5 Newbie Mistakes You're Making In Squarespace
We are huge fans of Squarespace. Why? Because it allows anyone to create a website – no coding needed. It's more flexible, better-looking, more responsive, and more customizable than any other platform we've used (and we've used a lot of them!).
In short, Squarespace empowers you to take control over your web presence – and we're all about empowerment. As we like to say: If you can use Facebook, you can use Squarespace. It’s THAT user-friendly.
BUT! There is one downside to this fact:
Many Squarespace users are total newbies to web design – and make some very newbie mistakes.
This is to be expected – there's a learning curve any time you launch into a new field. Unfortunately, all those newbie mistakes can add up to really hurt your site performance.
But the good news is that many of these mistakes are easy fixes. So that's what we're doing today: Highlighting some common mistakes that hurt first-time web designers' websites and showing you how to fix them.
So without further ado...
Here are five newbie web design mistakes you're probably making in Squarespace – and what to do about them:
1. Using extra space in body text
For some reason, some Squarespace templates use body text that's tracked out as the default setting. This means the body text has extra space between the letters – something common in print and traditional design, but a Very Bad Call for web-only design.
Why is this a bad idea? Because readers' eyes tire out more quickly when they're reading from a screen than when they're reading from a page.
Spacing out your body text makes readers' eyes work extra-hard. And that's a turn-off that affects your reader retention rate.
Truth, here: When we see sites using extra spacing in body paragraphs, it's an immediate sign to me that the site creator doesn't really care about making their content thoughtful and user-friendly. Not a good first impression to make!
→ Lesson: Avoid spacing your body text out in order to be more reader-friendly. Set letter spacing to 0 in your paragraph font style section!
2. Using px instead of ems for text
You're probably familiar with pixels – those units of measurement that indicate the height and width of images and other objects on screen. Almost all default text in Squarespace is sized in pixels (abbreviated px) from the get-go.
However, there's a secret web designers know about sizing in px: px will not look the same on different screens.
Why? The short explanation is that different screens display pixels differently; screen resolutions vary, but pixels are inherently inflexible. [And, as a side note, px in CSS (which is code that you use to design the appearance of web pages) are angular measurements, not even counts of the number of screen pixels. Crazy confusing, right?!]
The text size that looks right on your screen, when sized in px, will display differently on other screens. What looks readable to you could look very different to someone else – especially if they're viewing your site on their phone.
Ems (pronounced as you would say the letter M out loud), on the other hand, are scalable units that respond to screen size. 1 em is what that screen displays as the "default" or "normal" (usually 16px [which equals around 12pt, if you're more familiar with font sizing in Word]) – and 1.1em is 1.1 times that, and 1.2em is 1.2 times that, etc. So if 1em = 16px, then 2em = 32px, and 0.75em = 12px, and 1.5em = 22px, and so on.
In short, using em instead of px is a better choice to keep your desired typographic proportions intact and to ensure your site is as responsive and reader-friendly as possible.
→ Lesson: Consider converting your Squarespace site typography from px to em to maximize how responsive your site is.
3. Not thinking responsively in your layout
Pretty much no one – traditional graphic designers and non-designers alike – is versed to think responsively in the structure of their layout.
Thinking responsively means considering the look and function of what you’re creating when it is viewed on a different screen size.
Squarespace's structure is wonderfully responsive. But the functionality of the content you put inside is up to YOU.
If you use a full-width image displaying text, it may look great on your computer while you're designing, but how will it look when it's only the width of an iPhone? Will you still be able to read it?
Or, if you insert an image so it's directly to the right of a block of text, how will that text and image rearrange on a larger screen, on a smaller screen, on a tablet, on a phone? You need to be aware that your content will not look the same on different screen dimensions.
Especially for designers, this can be annoying. We care about exactly how our content looks and don't like the fact that it changes at all.
Unfortunately for our old ways of thinking, websites aren't like a printed document. They’re dynamic!
→ Lesson: Get in the habit of resizing your browser window to check your layout at different sizes before publishing.
4. Not optimizing image size
We love big, beautiful images. You love big, beautiful images. We all love big, beautiful images.
Huge hi-res images take a long time to load. That slows down your site, annoys your viewers, and hurts your search ranking. Aim for file sizes under 500kb (kilobytes).
You'll probably run into this problem most often with photos. For example, the original file sizes on some of our old Outfit of the Day photos were 4.4 mb (megabytes). There are 1024 kilobytes in one megabyte, so that image was the equivalent of 4,505 kb – which means those photos were nearly 5x larger than we want!
→ Lesson: Resize and compress images that are too large to load quickly.
My favorite resource suggestion for quickly and easily resizing images online for free (for anyone not comfortable with software like Photoshop!) is imageoptimizer.net.
5. Using default URLs
This is a total newbie mistake that can really hurt your site: Squarespace automatically generates a page URL any time you create a new page or gallery.
If you title your page immediately when you create it, your auto-generated URL will be yoursite.com/your-page-title. However, if you choose to title your page later, Squarespace will initially set your URL at yoursite.com/new-page. Not what we want!
All URLs should be descriptive, intuitive, and short.
So instead of yoursite.com/sign-up-for-our-newsletter-here, (or, heaven forbid, yoursite.com/new-page-2) use something descriptive, intuitive, and short – like yoursite.com/newsletter or yoursite.com/signup. It will be easier for you, your users, and search engines!
You know what else these tips help with? Your website's search performance.
What else could you improve? Check out these major mistakes to avoid:
Hoot Design Co. is a marketing, branding, and design agency located in Columbia, MO. We specialize in creating a custom and comprehensive marketing strategy centered around your business's unique strengths and educating you with the tools you need from day one. From logo design to brand identity, website design and execution, and ongoing social media and content marketing strategies in-person and through online courses, we're focused on your business success every step of the way.
Read More →