Responsive Design: Is your website mobile-friendly?

Over the last decade, mobile phone usage has skyrocketed. Mobile phone users made up almost 60% of website traffic in 2023, meaning the demand for mobile responsiveness is a requirement, not an option. Platforms like Squarespace make it pretty easy to remain mobile-responsive, however, sometimes our customizations are not super mobile-friendly. Here are a few ways you can improve your mobile responsiveness and not lose out on sales because your mobile site is lacking.

(One) Use a responsive website builder

There are like one million different platforms to build a website on these days. Okay, maybe not a million but seriously it seems like there is a new one popping up all the time now. This is good and bad - not all of them are built equally. Squarespace is my preferred CMS, so that’s what I will talk about here.

Squarespace has made it so easy-peasy for you to stay responsive across devices! You will build out your desktop view first, then you can make adjustments to your mobile design. Keep in mind that some changes that you make on mobile - like font size and styles - will reflect on your desktop version. It’s important to remember this when testing styles like font sizes and line spacing. I like to check them on both devices to nail down a sizing that works well on both views.

You’ll also want to keep mobile in mind as you build out your desktop view. Sometimes elements on a desktop don’t translate well to mobile and you have to get creative! Wireframing before building can help you save time here. Start with mobile, then build the desktop view. Since you can’t do this within Squarespace (they won’t let you add blocks on mobile), you can wireframe in a program like Figma and use it as a reference when you start building on Squarespace.

(Two) Compress your images and videos

This will help with SEO and with your mobile responsiveness. Long load times on your website can be detrimental to your SEO ranking and your users’ experience. If you are worried your website is going to load slowly, add some sort of loading screen that will let your user know that something is happening, it’s just taking a moment to get it all ready. If your website just shows a blank white screen while your user is trying to load your website, they might think their phone isn’t working or that your website is broken. They might dip out and then you’ve lost your chance to wow them. Womp womp. :(

TinyPNG is a great, free resource to compress images and still maintain quality. I utilize them for client projects and for my own website and I have been pleased with how well it maintains the crispness of images! As far as videos go, embedding an external player, like YouTube or Vimeo, is a great option to avoid long load times. GIFs can also be a great alternative, but they will need to be short to maintain quality and a small file size.

Testing your website periodically on different devices can help you find the painful loading points and correct them. I recommend trying them on desktop and mobile or tablet devices. When testing on mobile, make sure you try with and without WiFi, as this will let you know how users without WiFi may experience your website.

(Three) Spacing, spacing, spacing!

This is a bigger issue on mobile than on desktop, but should be taken into consideration for each view. Most mobile users are using their thumbs to navigate. Everyone has different sized hands and mobility, so what may be easy for you to hit on mobile might actually be very difficult and frustrating for another user. If you cram a bunch of links next to or on top of each other, the user may have a difficult time visiting the page they want to which can lead to them giving up all-together.

When placing your links and buttons, make sure there is enough unclickable white space around the touch target. The recommended minimum size for a button is 38px by 38px, this tends to allow enough space in the touch target for the button to be easily accessed. If you are using a lot of inline links, like in a blog article or within your website copy, you don’t have to worry about sizing but make sure you don’t put a lot of links directly next to one another or you may run into some accessibility issues.

(Four) Double-check your CSS customizations on mobile

If you are sprucing up your website with Squarespace plug-ins or writing your own CSS, you might run into some mobile responsiveness issues. Since these snippets of code are altering Squarespace’s built-in code, it can do some funny things if it isn’t written properly.

Any good plug-in will be written to be responsive on mobile, but if you find that it isn’t you might have to do some extra research to figure out what isn’t vibing. While you should be checking your website periodically to make sure it’s functioning well on all devices regardless of whether you are using CSS or not, any time you update something in the custom code take a peak on mobile to make sure it looks how you want it to!

Mobile responsive web design doesn’t have to be challenging! Approaching your design with empathy and consideration for your users will help you build a website that is inclusive and accessible to mobile users.