8 Things You Need to Know About Responsive Web Design
Everyone knows that responsive web design is absolutely essential. But what exactly is responsive web design? And how can you make your Squarespace website more responsive?
In this post, I’ll clue you into 8 key facts you need to know about responsive web design and give you tips on how to build a truly responsive website on Squarespace!
Responsive web design is more than just having a mobile version of your site.
Responsive web design isn’t just about having a mobile version of your site. That’s mobile-friendly rather than responsive. A responsive website responds to look great on every screen size—from tiny smartphones to large desktop monitors and everything in-between.
This is one of the reasons why I think Squarespace is such a great platform to build a website. Unlike some other platforms, which are just mobile-friendly, Squarespace websites intuitively adapt to fit virtually every screen size. And you don’t have to take the time to build a whole separate mobile version of your site (cough Showit cough.)
That doesn’t mean your website will look great on every screen size right off the bat. It just means that it will be pretty user-friendly on every screen size. To take things to the next level, you’ll want to make some additional tweaks, which we’ll talk about next.
It’s best to make your website at least 1920px wide.
1280px and 1920px are the two standard widths for web design. A 1280px website will look great on laptops and mobile devices but not so great on large monitors.
To ensure your site looks just as good on big screens as it does on small screens, set your max site width to 1920px or more.
On Squarespace 7.0, go to Design > Site Styles to set your max site width. It’s the second setting from the top. Move the slider all the way to the right to set the max-width at 1920px.
On Squarespace 7.1, go to Design > Spacing to set your max site width. You can set it up to 3000px for ultra-large monitors.
Keep in mind that the recommended width of banner images is about 2000px. This is because huge images take a lot longer to load. But if your images are only 2000px wide, they’ll look pixelated on a 3000px+ widescreen. So keeping your site width under the 2000px mark is generally a good rule of thumb if you want it to look great and load fast.
This also applies to other images on your website. The wider your max website width, the bigger your images will have to be to avoid looking pixelated on 4k monitors and other large screens. Don’t forget to compress images to ensure they load as quickly as possible!
One other thing to note is that just because your website is set to a max-width of 1920px doesn’t mean your text should be that wide. The web accessibility initiative recommends a maximum line length of 80 characters. That might mean constraining the width of your text block or page section or splitting your text into columns.
Whatever website width you ultimately go for, make sure you check it on some of those larger screens to ensure you don’t have any pixelated images, endlessly long lines of text, etc.
Card blocks may need to be adjusted for big screens.
If you have vertically stacked card blocks on your site, like this…
…They wont’t stack if the monitor your site is being viewed on is wide enough to accommodate the text and image side-by-side. As a result, your site can end up looking like this…
…On big screens. Yikes.
To fix this issue, you’ll need to add a media query to your CSS that forces the card block to stack on big screens.
To do that, follow this tutorial but swap out the max-width: 800px in the media query for min-width: 1080px.
Less is more for mobile users.
There are blocks of content (images, divider lines, stylistic elements, and more) that look amazing on the desktop version of your site but on mobile devices, they’re just unwelcome distractions.
Luckily, you can remove them with a simple line of CSS code. Read my tutorial on CSS media queries for instructions.
The Spacer block is your best friend.
The spacer block can help you add much-needed whitespace to your website…but sometimes it’s too much for mobile screens. To get around this issue, just add two spacer blocks next to each other. They’ll show on desktop screens and then conveniently disappear on mobile.
Link spacing is super important for mobile users.
Have you ever been browsing through a website on your phone and you try to click on a link but accidentally click another link because the two are so close together? Very frustrating.
Giving links enough room to breathe on mobile devices is important, not only for user experience but because Google will actually penalize your site if clickable elements are too close together.
Check your website on your smartphone and make sure that all of the links on your site are finger-friendly. You can also sign up for Google Search Console, which will notify you if there are issues with the mobile version of your site.
Keep in mind that websites load slower on mobile devices.
You’ve probably noticed that websites take longer to load on mobile devices, even when they’re connected to wifi. So it’s important to optimize your images, keep scripts to a minimum, and turn on AMP for blog posts to help give your page speed a little extra boost.
Read my guide to Squarespace SEO for more tips on how to optimize your loading speed.
Your website will look different on different screens.
No matter how much you tweak things, a responsive website will look different on every screen size. And that’s okay! The mobile version is supposed to be pared down and compact. And there’s going to be more white space on a large screen.
As a general rule of thumb, try to check your website on a smartphone, laptop, and large desktop monitor (4k preferred) before launching to make sure it looks good on all screen sizes. Accept that there will be tiny things that aren’t pixel-perfect on every screen.
Looking for a responsive Squarespace website template to help you grow your online business? Click here to check out my list of recommended template shops.
