How To Make Your Squarespace Website More Mobile Friendly
Does it really matter that much if your website is mobile-friendly? Isn’t that just something developers worry about? Here’s why you should care…Over half of the traffic coming to your website is seeing it from a phone. In fact, that number may be as high as 90%!
Most of us craft a beautiful, functional, user-friendly website on a desktop computer and then just check the mobile view as an afterthought (or sometimes not at all). But with so much of your audience accessing your site from their phones, it’s important to make sure everything is mobile-friendly.
Thankfully if you’re using Squarespace, most of that work is taken care of for you.
However, there are still a lot of ways you can optimize your website so that your mobile viewers are getting the best experience. You want them to stick around. So let’s talk through some easy steps you can take today to get your Squarespace mobile version working great.
How to Make Your Squarespace Website Mobile Friendly
Step 1: Test Each Webpage In Mobile View
This is a no-brainer since Squarespace makes it so easy. But you’d be surprised how many website designers forget to check the mobile view before going live. In the upper-right corner of Squarespace, you’ll see a tiny phone icon. This gives you a pretty good idea of what your website looks like in mobile view.
If you’re using the Fluid editor, you can just drag your elements around and adjust them to look great in this view. Most of the changes you make here, like sizing and rearranging blocks will not affect your desktop view so you can make it truly customized for phones.
If you’re not using the Fluid editor, watch for gaps or for places where you had been using spacers in the desktop view to add space.
Step 2: Optimize Your Text
This is a good time to break up large sections of text. If you have large paragraphs, you’ll want to split those into 2-3 sentences. That way, you won’t make a mobile viewer feel like they’re scrolling forever. It makes it easier to quickly skim through.
You’ll also want to make sure you have a good amount of extra space between letters and lines. Add plenty of space around your text whenever possible.
Step 3: Optimize Images
A lot of large images can slow down your page loading speed. You’ll want to compress your images and keep them around 1500-2500px.
While you’re testing your images in Squarespace, it’s a great time to choose a focal point. Inside your image viewer, drag the circle to a key area of the photo. That way if an image gets resized or cropped in mobile view, you’ll still see the most important parts.
Step 4: Watch Your Bounding Boxes for Blocks
In Squarespace 7.1, the Fluid Editor allows you to have overlapping text and other blocks. It’s hard to tell how elements will interact with mobile view and sometimes they appear much closer together on a phone. It’s a good idea to check your bounding boxes to make sure they are not overlapping another element.
You’ll also want to make sure blocks are in the right order, layered correctly, and have plenty of extra space in mobile view. We like to add a little extra space around each section divider to make everything a little more breathable.
Step 5: Turn on Accelerated Mobile Pages
If you want your page to load extra quickly on mobile devices, you can turn on AMP (Accelerated Mobile Pages). These are stripped-down, lightweight pages that use a subset of HTML to allow your website to load extra fast on a mobile device. They prioritize making your content simple and readable.
Google will show featured images and headlines in search results and may even view AMP content as better for those who are searching on mobile. To allow AMP providers to show the AMP view of your blog pages, you can turn on this setting in Squarespace. Go to Settings > Blog Preferences > Use AMP.
Step 6: Use Pre-designed Templates
When you use pre-designed templates like the ones from the LC Shop, I’ve already made sure the design is looking great on multiple devices. Since all of the blocks, sections, and layouts are added ahead of time, there’s less for you to do when it comes time to add your content.
I still recommend checking your design and edits before going live, just to be sure any additions look okay. I’m also happy to help you through any questions you run into when it comes to your template looking mobile-friendly.
Ready to get started with a mobile-friendly design from the shop? Browse websites here.
