Device optimisation protocol (full proof optimisation for your website on all devices)

EducationTips

15 Jan

You’re a small business owner, with a Squarespace website and you want to know alllll the tea on how to make it look 🤌🏽🤌🏽🤌🏽 without the designer price. Welcome back to The Squarespace Series: your ultimate guide to designing like a pro and creating a website that turns heads (and maybe a little envy too). In episode 2, we are looking at device optimisation protocol and how to make sure your website looks *chef’s kiss* on all devices.

Media queries (in the land of coding) let’s us get really targeted with our CSS. I’m going to run you through the best practice on using them and how they are super beneficial for your website.

So why should you do this on your Squarespace website?

If you’re implementing any custom code to your website, chances are you’ll need to style elements like font sizes differently depending on the screen size.

Here’s the media queries that differs mobile, tablet and desktop. You can add into Website Tools > Custom CSS

/*Devices smaller than 767px*/
@media (max-width: 767px) {
h1 {
  font-size: 30px;
    }
}

/*Devices between 768px and 1024px*/
@media (min-width: 768px) and (max-width: 1024px) {
h1 {
  font-size: 40px;
    }
}

/*Devices larger than 1024px*/
@media (min-width: 1024px) {
h1 {
  font-size: 60px;
    }
}

Copy to clipboard

In the above code snippet, we are telling our browser to apply different font sizes based on the width of the device. Targeting Heading 1 (h1), I’ve set the font size to be 30px on mobile, 40px on tablet and 60px on desktop devices. If you read The Squarespace Series: Easy customisation options to align your website with your branding (highly recommend), then you’ll have a good understanding about the heading tags I’ve used in the code snippet above.

When adding this code, take note of the curly brackets {}, you want to make sure that the @media… is wrapping around whatever your are targeting.

Yeah, but why should I use this on my Squarespace website?

Simply put, your font sizes will most likely be WAY to big for smaller devices. And let’s be honest, there is nothing worse then a website not optimised for mobile. Most websites are viewed primarily on mobile now so it’s important that you are adding these media queries to your website.

Enjoy & happy coding!