Why responsive web design matters
Something I find myself talking about a lot with clients is responsive web design. A lot of clients I speak to either haven’t heard of it, or don’t really understand what it is. So in this blog post I thought it would be helpful to explain here a little bit about responsive web design: what it is, what it means for your site and why it’s a good thing.
Why responsive web design is a good thing
We’ve all had the experience of visiting a website on our phone, only to find the text so teeny tiny it’s impossible to read, or the images too small to make sense of, or tried to pinch and zoom in only to have the whole website slide around frustratingly underneath our fingers.
Responsive websites make sure that these things don’t happen.
They are critical to ensuring a good user-experience and making sure people looking at your site on a mobile or iPad don’t just click off in frustration.
(Also: having a non-responsive website these days makes your site look like a proper dinosaur, and makes people think it’s unlikely to be up to date. All of this is BAD, basically.)
All Squarespace websites are responsive. It’s one of the reasons the platform is so great – and one of the reasons I love it. But let’s start with explaining exactly what that means…
But what exactly is responsive web design?
Responsive websites are sites that automatically ‘respond’ (ha) to the device they are being viewed on.
This means that if you look at the website on an iPhone, it will resize automatically, in order to display the content in the best possible way on the screen, making sure that it’s user friendly (easy to read and navigate) and that the person viewing the site has a good user experience.
Here’s how Squarespace explains it:
“Squarespace’s built-in responsive design resizes your content and images to fit different devices and screen widths. With responsive design, visitors can automatically view your site in many ways, so you don’t need to create and maintain separate sites for every potential device, browser, and display width”
What this means for your site
This means that any content you add to your website – text, images, buttons and other elements – will automatically resize depending on the size of the screen they are being viewed on.
What this also means is that on a small laptop screen your site will look (slightly) different than on a large desktop. And it will look even more different on an iPhone.
Sometimes when I send websites to clients for their feedback, I get comments back such as: ‘Can we make sure the title of my novel doesn’t break over two lines in the header?’ and ‘I can’t see the whole of the banner image when I look at my site on mobile – can you fix it?’
These are the limitations of responsive website design.
BUT! The upside is that on all screens the site will be attractive and easy to use.
The most noticeable example of this is the amount of space there will be around certain elements.
Here’s an example from my own author website:
On my laptop, the banner image appears with the picture of the cover of my book on the left, and then a quote about it on the right, along with the button below (my call to action encouraging users to click through my site and find out more).
However, when you view my site on a mobile, you get quite a different image. Here, you get the image of the book first, with the quote below, and the button below that.
This is responsive design in action! It means that all the important elements for my homepage banner – the book cover, the quote, and the call to action – are still easily visible on a mobile phone, and visitors to the site know what to do.
You also might find that any text on your site breaks over different lines depending on the size of the screen, as it resizes in order to make sure it’s easy for people to read. This can be frustrating – for example if you don’t want to have the title of your book breaking over two lines, as one of my clients once asked me about – but it’s the price you have to pay in order to ensure your site looks smart on mobile, and is a much better compromise than tiny text that no one can read.
Unfortunately, you can’t just put in a paragraph return to try to force certain words onto certain lines. If you do that, when the screen resizes and the words all move around, these breaks can look odd, leaving strange gaps.
Best practice tips for images
So how do we make sure our website looks good on all devices? The most important thing to consider when building a responsive site (on Squarespace or another platform) are the images. And most specifically the banner or background images.
You need to choose an image that will look good on as many size screens as possible. It helps also to choose images that are roughly the same shape as the space in which they’ll appear – for example, using a landscape (or wide) image for a banner.
However, do think carefully about your image and choose one that will still work even when cropped. You’ll see on the example of my own site that I have used a repeating brick background as the image behind the cover and quote on my banner. Abstract patterns and images without any text, or borders, work best for banner images.
If you have text as part of your image (rather than adding the text on top of the picture in Squarespace), bear in mind that the text may get cut off as the image is cropped on mobile.
If it’s important that a specific area of the image (like a person, or words) aren’t cropped, then make sure you add a wide bleed area around all four edges of the image. This way, when it’s cropped, the person or words will still appear, and aren’t cut off.
Best practice tips for text
As mentioned above, text on a responsive website resizes automatically to fit the screen. Because of this, you won’t always be able ‘shape’ the text in the way you might like.
You can use Spacer blocks in Squarespace to add padding around text blocks, and of course you can use left, right and centre alignment so you have some control over how text appears.
It’s best to add all text on your website directly on the page, rather than using images that contain text.
This will avoid cropping issues and it also means that search engines can ‘read’ the text, which helps with your SEO. Text that’s part of the actual image itself is unreadable by Google and other search engines.
Last but not least
When you’re working on your site, make sure you regularly check how it looks on different devices. There are several tools you can use to do this (there are Chrome plugins that do this, and you can also use Chrome’s own built-in Developer Tools).
Squarespace also offers a very clever ‘device’ view in the back end of its system, which means as you are making changes, you can switch views to see how they are reflected on mobile and iPad. You can find out more about this here.
But a foolproof way to make sure your site looks good on mobile is to keep your mobile phone close to hand and regularly refresh your website on your mobile phone browser so that you can see how it’s all looking.
Hope that all makes sense, but do leave a comment if you have any questions, and I’ll happily answer them!
