Andrew101

What do you think about the 15 points?
Would you add anything?
 

Header button use this ID
header#header a.btn

I figured out my own question. Here is the code I used
 
// Header Style
.header{
  margin:20px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0px 0px 25px;
}

Hey Andrew,
I'm running into the same issue.
The code you pasted above using 
.header-actions-action--social a:nth-of-type(1) rather than Justin's 
.sqs-svg-icon--list a:nth-of-type(1) also worked for me on desktop but not on mobile. 
What was the code you used to change it on mobile? Thanks!

Omg how did I not know this (haha) - thank you so much much Jessica!

Not sure to be honest but found the correct code and it's all good now. 
Thanks for helping out, I appreciate it! 

Hopefully someone much more technologically wise can give me some pointers on this, and how to hopefully fix the issue:

Earlier last year, I decided to create a new website with Squarespace, to eventually replace my old website that runs on a different domain. Everything was easy peasy, everything worked great, except GSC kept telling me the URLs on my products and categories are too long. I was getting good sales, people seemed to not have a problem finding my site. But still, GSC told me the urls are too long - So I changed the names of categories, and some products - which, obviously, caused all products to no longer be available to Google, since those urls are no longer valid.

I did quite a few manual 301 redirects from the old url to the new ones - but GSC still says there are 94 pages not indexed, and the last crawl date shows N/A. I've been trying to submit the new urls manually to have them indexed - but no change on GSC.

I've resubmitted the sitemap multiple times, though that seems to be happening automatically anyway, so that's probably overkill anyway. 

Orders and visits to my site have dropped wayyyy down.
Is there a way to fix this indexing issue to bring my site back up, in a way that a technologically challenged person like me can do that on my own?
(I did not connect my two sites - the old one runs on Opencart, and I'd hate to break that one as well as this one in the process).

Have you ever heard of the term “mobile-first design”? It’s a common concept among web designers who want to stay ahead of the curve on the technologies that we use every day to view sites on the Internet. The philosophy contained within mobile-first design is called “progressive advancement,” which dictates that you should design your web presence with smaller screens in mind first, which in turn makes it easier for you to progressively move on to larger screens.  
According to data shared by the AdobeXD Ideas blog, two billion people currently access the internet on their mobile devices, and that number is expected to jump 72.5% in the next three years. That’s a lot of people to think about! In essence, thinking about mobile-first design forces you to strategize and prioritize your content so that it is leaner and more to the point, to use headings strategically in order to create a visual hierarchy, reduce the number of links in your navigation to fit a smaller screen, use fonts that prioritize readability, and to use white spaces to your advantage for a cleaner layout. 
What are your best practices for designing more mobile friendly sites? Share your ideas below!
 

You shouldn't have to do anything for mobile, it should just work with the original code. What happened on mobile?

Hey Andrew! This is easy with a bit of custom code. I've included a couple screenshots and the code I used here. 
What you would do is put the social links that you want in, and then navigate to Website Tools, then Custom CSS. From there, upload the files of the logo you want to use (in this case, the bluesky logo you want to use) in the color you want. Then, add this code, and notice that it says nth-of-type(3). That means it's the 3rd social link. So wherever you want the link, put it there in the order you want it. If you want it to be the first one, it would be nth-of-type(1). They just need to match in the social icons links area.
Once you have the code in there, copy and paste the URL of the image you just uploaded to Custom CSS, and put it between the parentheses under background-image: url(_).
Hope this helps!
//Custom Social Icons// .sqs-svg-icon--list a:nth-of-type(3) { svg { display:none; } background-image: url(); background-size: 100%; background-repeat: no-repeat; }

Hi
I am building a site and am creating a ‘Portfolio’ page with PNG images. I want the user to be able to ‘scroll’ these images as if they were a webpage as they are a lot longer than the image box. Like a iFrame but with a PNG rather than a live site. An example of what I am trying to do is on @bycrawford site.
Is there a setting or CSS code I could use?
Any input greatly received.

Love it! I noticed the same things Hannah did, and agree that it's a beautiful site. Well done!

Hi,
This is possible with CSS code, you can share link to all pages where you use button on your site, we can give custom code to achieve this.

Okay, figured as such. I've already done that and always have my sites set up there too. 

Bing has ~3% of search traffic - so many people might not view it as worth it. Setting up Bing Webmaster Tools (to be able to show on Bing) is pretty quick, so worth it for the small marginal gains in my opinion!

Hi @norafateh,
Please share your website URL so we can take a look!
— Hannah
Studio Founded

I like hero with text blurb and a call to action for most situations. If a visitor is likely to know enough to respond to the call to action without needing the blurb, then you could cut it or minimize it. Carousels are almost always out these days, but do have their place perhaps. Sometimes a thirds layout can work if there 3 distinct things to highlight. Let content dictate design. 
A few other suggestions:
Standardize Call to Action styles, I see at least 4 on the homepage (1. top right of the main nav, 2. bottom left of the hero image, 3. the two learn mores on the next two sections, 4. the complimentary discovery call). I like the 4th the best, though the black border outline is a bit intense.  Consider removing the Call to Action from the Nav, it's already too busy up there. Ideally get the nav onto one line for most desktop browsing. Consider using the Logo without the words, just the image. Put Cultivating Conversations somewhere else in the hero.  On contact forms I like Full Name rather than First and Last. I realize some mailmerge really likes the separation, but I think better to design around full name, since not everyone's name fits the first and last well. Though this is more of a concern when targeting international clients beyond Canada and the US.  The Services page is an important page, and I feel like it could use more than just text in the first 2/3rds of it. There is some nice imagery at the bottom but it takes a while to get there. Avoid styling webpages like Word Docs, with just plane headings and bulleted lists. Create boxes, split into half and third layouts, find icons to represent. If you're going to talk about a retreat, show the experience right next to it with an image. Also make that Call to Action button (Connect with me and find out more) consistent, it's a 5th style, and on desktop its crashing into the text above it. 

@Inspirerd 
Thank you! I appreciate that and respect your knowledge, very cool!
I will test the code and let you know!
 
 

Hey @Andrew101!
Wow, good catch! I need to fix this on my website (revised: just did with the plugin). To the best of my knowledge, you can't change that in Squarespace. Luckily I had a snippet of code for something similar.
Here is a pure Javascript solution (no-need for jQuery). It's worth mentioning, that to utilize this code (or any other JavaScript solution), you'd need to be on a Squarespace plan that supports JavaScript.
 
I published it as a free plugin, but you can find the code here.
Add the code snippet to your blog page header code (settings icon for blog page -> advanced -> Page Header Code Injection) or use a code block on the blog page. 
*Note this is your blog collection page (the one that shows all your posts), not an individual blog post page.
<script src="https://cdn.jsdelivr.net/gh/Excito-LLC/squarespace-plugins@main/plugins/blog-page-headings-fix-plugin/plugin.min.js"></script>  
While testing I noticed that in some cases there was a bug that caused the heading not to show up because of Squarespace animations. I realized that I don't have animations on my website enabled, so I enabled it to test it out and it worked. However, I couldn't test it on your website with header code, so I made a fix just in case. Try the above code on your website. If you see the bug where the heading's don't appear, try the following code:
<script> var EXC_BLOG_PAGE_HEADINGS_PLUGIN_CONFIG = { fixAnimationBug: true, }; </script> <script src="https://cdn.jsdelivr.net/gh/Excito-LLC/squarespace-plugins@main/plugins/blog-page-headings-fix-plugin/plugin.min.js"></script>  
Hope this helps! Let me know if you have any updates or questions.
Daniel 

Hi @Sidra!
It looks lovely! 
The only things I would note are:
I can't seem to click the links in your footer (portfolio, email, etc). Add legal pages (Privacy Policy and Terms and Conditions). The light brown text over the beige background doesn't have enough contrast so does not meet accessibility checks.  Your images are quite large and are slowing the site down a little. I recommend resizing them for web and compressing further. Let me know if you have any questions!
— Hannah
Studio Founded

Hi @Ihab-Workplace!
Visitors should be able to visit your site and immediately understand what you do. I recommend developing the home page with more copy to describe what you offer, your brand story, your unique selling points, your specific services, etc. This will also support your SEO and help you be found easier! 
I would definitely add more information about your offer. Exactly what services do you provide?  What do costs/timeframes look like? Who do you work with? Who don't you work with?  Do you work in a specific location or remotely worldwide?
Lastly, I recommend adding the newsletter sign up to the home page so it's easy to find. Explain what subscribers will get from it — what value will your newsletter offer? You can incentive sign ups by offering a useful or exciting freebie in return for their email (for example, a 10-point guide on things business owners need to know about email security). 
Let me know if this helps!
— Hannah
Studio Founded

Hi All
I would appreciate your feedback on a new website we just completed for a project that is near and dear to us - Climate Literacy for kids - https://www.suziehickstheclimatechick.com/.
We are open to any suggestions - you will see we are having issues with the video on the page - any guidance would be appreciated. 
 
Thank you so much,
Suzie

Congratulations on your second paid client! That's so awesome. My general thought is that there's a lot of color, but no real color scheme. Since the photos and logo are all different colors, maybe change the purple to something more neutral like a warm grey? 😁

I'm not a circler, but I find things like the colour changing banner at the top and the white glow that follows the cursor around at the bottom of the home page distracting. It looks like the logo has been designed for a white background, and a lot of the detail in that image, (like the wood grain in the tree stump) doesn't show up well against a colour background - it definitely looks its best on the contact page. 

I think Circle Member image on footer should be white color?
On Mobile, these buttons overlap

I think you can add link to these text, to make user navigate to other pages easier


and add link to this phone, so users on app, they can tap on phone to call you

with images on portfolio project: https://bardamuconsulting.ca/web-design-portfolio/bardamu-consulting
you can consider using this format, so customers view full your site example easier