Best Practices for User Experience and Design With A Squarespace Website

Avoid these key rookie mistakes that let people know your site wasn’t built by a professional. Master this simple checklist and no one will know the difference.

Also, all of these tips will improve functionality and make your website as user-friendly as possible.

Make Sure Your Navigation is Simple and Clear

Websites are great places to express creativity, but your header menu is a bad place to be creative. It’s a map. We generally don’t like visually creative maps.

In general, only have 5 or fewer navigation items.

Don’t name your blog “ramblings on life.” Just call it “Blog.”

Keep the letters to a minimum. This is important, especially because your menu bar gets condensed on mobile.

The shorter your words, the better.

If you absolutely have to, you can use a drop-down submenu on an item, but even this should be kept very simple.

Anything else that is important but is not linked to the primary and secondary goals of your website can go in the footer.

There are some things that need to go in a footer, like your privacy policy or terms of service. More on this stuff later.

Use a Button at the Top Right of Your Website

Use a button for your primary goal at the top right. Studies show that the first thing our eyes are drawn to is the top right of a website. Then our eyes scroll left, then to the middle.

Use a Search Bar in Your Footer Navigation

This is great for a few reasons. Generally, it’s helpful to the searcher to be able to find stuff on your website.

Also, as you get more and more traffic to your website you can go into Google Analytics to see what people are searching for on your site.

This will allow you to:

Get to know your customer more.
Answer common questions ahead of time on your site.
Display content that more aligns with your visitor’s goals.

Make Your Squarespace Website Photo Quality Great, Even If You Are Not a Pro Photographer

If you have professional photography, awesome. Use it.

If you are like most people that don’t, then you are going to have to get creative.

Use Stock Photography… Smartly

If you are using stock photography from free websites like Pexels or Unsplash, then try to use photos from the same photographer throughout one page.

Modify photos in Canva to make them more interesting. I walk you through this step by step in a later design course.

Create a transparent background and swap the background or create a collage.
Use shapes or frames for photos.
Change the colors of photos.
Use photo overlays or filters like ones on Picsart or BeFunky to create an animated or unique look.
Opt-out of photos altogether and just use shapes.
Use clipart or graphics like the ones on Undraw to display art in a consistent way without a single human model.

Keep Your Photo Image Size Below 500 KB

Large photo sizes for image blocks or backgrounds are the number one thing that slows down site load speed of a website.

In general, a PNG is a larger file size than a JPEG.

Make sure any image uploaded to your Squarespace website is under 500 KB, but still remains crisp quality.

An easy way to do this is to run your photo through TinyPNG.com. They’ll compress the file, and you can see the sizes of the original and the compressed versions.

Make Sure Your Image and Text Don’t Clash

It’s important to make sure that people can read your text and that you use contrasting image and text colors. There are a few ways to accomplish this:

Change the image or the text color.
Blur the image or background.
Change the focal point of an image.

Again, more on this later in the course, but it’s good to be thinking about now.

Make Your Opt-in Pages Simple and Direct

An opt-in or a landing page is a page that has one goal, usually tied to your primary or secondary goal. It’s the finish line, it’s the place where someone is going to decide whether to buy your product or service or not.

Have one call to action on this page and repeat it multiple times.

Your homepage might have a button for someone to learn more about you or the company, to view your services in detail, or to look at your portfolio. However, the opt-in page is meant to either make the sale or get someone’s contact info.

The calls to action should be simple and direct. Subscribe now, buy now, or begin learning for FREE are the types of CTAs you’ll see here. It’s okay if you change up the wording for these buttons, but the destination should be the same.

If you have a picture of the product, use it. If it is a digital product, create a 3D mockup (more on this later). Use a picture of a person looking at and/or pointing at the opt-in form or button. People look where other people are looking.

Make Your Text Large Enough and Scannable

It’s cool to be artsy, but many websites have fonts that are too small for most people, and they will just click off your site if they have to struggle to read it.

Follow these simple guidelines for an awesome user experience:

Use a font size that is at least 16px. (I’ll show you how to set this in the site styles section.) Minimalism is super cool, but not small-ism. Even if you have great eyesight, accommodate the average person on the desktop.
Avoid or minimize cursive fancy writing that is difficult to read, especially for more than a word or two. No one wants to read a paragraph that looks like it was in the declaration of independence.
Write paragraphs no longer than three lines. Make the enter button your best friend. People don’t read, they skim. If they see a big blocky paragraph they will skip your information. A wall of text is intimidating.

If a paragraph is more than two lines, then left-align it. When you have to go to a new place at the beginning of each line it is frustrating for the reader.

Make.

It.

Easy.

Just left align it.

Use Spacing In Your Sections

People do not like to read or view things from one side of their computer to the other side, or from far left to far right. Reduce the cognitive load by using spacing. (Meaning space on the sides and in between sections of your content.)

Use different sections of a web page every time you are completing a new thought. For example, each section on our homepage design has a different look and feel.

This makes things interesting for the browser and helps to organize your material. Each section should be roughly the size of the page.

Think of this like a PowerPoint slide presentation that only scrolls down. There will be a similar tone and style between the pages, but the actual content and topic will be different.

Have at Least One CTA on Each Page

You cannot rely on people to go to your navigation to get to your stuff. You need to make things easy. Put buttons or hyperlinked text throughout the page.

It’s even okay if each button change takes browsers to the same place. Just change up the text a bit. On the Squarespace School homepage we have the following CTAs:

“Get Started”

“Take First Course”

“Start First Course”

“Begin Learning Now”

All buttons go to the same place.

For example, if you want some help with your Squarespace website, then schedule a free consultation call with me by clicking the button below.

Schedule A Call