Mobile Friendly and Responsive Web Design Tips for Squarespace.
The world wide web is always evolving, and it’s surprising to think only a few years ago, having a “mobile friendly” website wasn’t on our radar. Nowadays, it’s pretty darn essential.
Your website NEEDS to be responsive as you want to be able to reach your potential website visitors on all platforms and devices.
To break things down a little further, there is a slight difference between “mobile friendly” and “responsive”, as the latter refers to your website *lookin’ good* at any screen size (not just on a phone). From a large desktop computer, to a browser that takes up half you screen, to an iPad, and finally, your phone. Essentially, having a “responsive web design” is ideal as it covers all of your basis.
And once again, Squarespace is checking all of our boxes and does a great job of achieving this. With their platform, your website automatically updates depending on the screen size, and there is no wasted time having to build out a completely different mobile view. While it may not look “perfect”, it’s a decent start and there are a few more things to consider.
device switcher
Squarespace makes it easy to view your website on an iPad and mobile view with their toggle (found above your website). Just switch between the different views and you’ll notice how the layout changes. We do recommend also viewing on a physical phone (even if you set your website to password protected if you’re not ready to make it live!) and make sure to check all of your pages, not just the home!
site styles
There is a specific section designated for MOBILE updates, so make sure to take some time to make sure that matches your branding. The MOBILE BRANDING and MOBILE MENU can easily be missed, but makes a big difference in the overall look. Just make sure to toggle to the mobile view to see the changes take place (as you won’t see the updates in the desktop view).
Keep in mind, you’ll have to use the same logo as your desktop view (unless you want to get into the custom code).
mobile breakpoint
Something to consider in the site styles is at what width does your “mobile view” begins. We tend to recommend 800px as this applies to the iPad version, but you may want to consider your navigation design. If you have quite a few navigation items and they’ve moved on to a second line at smaller screen sizes, you may want to look at making that option a larger number, such as having the MOBILE BREAKPOINT be 900px instead.
speed of website
You’ll want to make sure your website loads quickly on the mobile view, so make sure your images are optimized and not large in size (which benefits the desktop version as well). If you have a lot of blog posts, consider enabling AMP (accelerated mobile pages), which essentially shows a lightweight version of your posts. You’ll find it under Settings->Blogging.
focal points
You may have noticed that when you view your website on a mobile view, some banner images may look off, and luckily this is an easy change. Jump back into the banner settings and move the focal point (circle in the middle) over to where you’d like to place your focus, save, and just double check it looks good to go!
spacer blocks
Spacer blocks are our best friends in creating some white space as well columns at different widths. Unfortunately, some spacers on mobile view will create too much space. Easy solution? Instead of one long spacer blog, put two next to each other and they cancel each other out in mobile view!
custom code
If you’re willing to jump into the custom code and add some CSS, you’ll need to add in some specific code to assign which screen size you are referring to (with their own “opening and closing brackets”). We’ll use our HEADING 1 as an example, as you may want to minimize the font size for a mobile view. Keep in mind this updates ALL Heading 1’s on your website.
@media (max-width: 640px)
{
h1
{font-size: 30px;}
}
