88: How To Edit Squarespace Responsively
With more than half of all website traffic now coming from smartphones and tablets, a site that doesn't perform well on smaller screens is missing out on connecting with the majority of potential customers. Let's dive into why responsive design matters for your Squarespace website and how to implement mobile-first thinking.
What Is Responsive Design in Squarespace?
Responsive design means your website automatically adjusts its layout, text, images, and interactive elements to fit perfectly on any screen size. While Squarespace handles many technical aspects of responsiveness behind the scenes through "breakpoints," you still need to make intentional design choices to ensure an optimal experience.
A breakpoint is the screen width at which your layout changes—like when two columns on desktop collapse into a single column on mobile. The most notable Squarespace breakpoint occurs at 950 pixels, when your desktop navigation transforms into a mobile menu.
Why Mobile-First Design Is the Winning Approach
The traditional website design process starts with desktop layouts—but this approach can lead to problems. When you fall in love with how your site looks on a large screen, you might create designs that simply don't translate well to mobile viewing.
Mobile-first design flips this process. By starting with the mobile layout (using Squarespace's mobile preview tool), you ensure that your most important content works beautifully on smaller screens. Then you can enhance and expand that experience for larger devices.
Three Common Mobile Design Pitfalls in Squarespace
1. Text Overwhelm
Headlines that look perfect on desktop can consume an entire mobile screen. Paragraphs that are easily scannable on a laptop can become intimidating walls of text on phones. When designing mobile-first, consider shorter headlines, more concise copy, and strategic line breaks.
2. Button Accessibility
On mobile, buttons must be large enough for thumbs (not cursor pointers) and spaced far enough apart to prevent frustrating mis-taps. Use the "fill" option rather than "fit" for buttons in Squarespace to create full-width, highly tappable buttons that guide mobile users through your site.
3. Layout Complications
Complex desktop layouts with overlapping elements often break down on mobile. For layered image effects, consider creating these in external design tools like Canva, then uploading them as transparent PNGs—this ensures consistent appearance across all devices.
Remember: mobile users are often on-the-go, distracted, and looking for quick answers. A truly responsive design isn't just about making things fit—it's about creating a seamless, intuitive experience that respects your visitors' time and context.
-
[00:00:00] More than half of all website traffic happens on mobile devices. Now. People are using tablets and phones to check out your website. And if your website isn't easy to use on a smaller screen, they are not gonna stick around long enough to see how awesome you are. So today we're diving into something that every website creator needs to understand, responsive design, what it is, why it matters, and how to make sure that your Squarespace site looks good and works well on every device.
[00:00:33] Welcome to Think Inside The Square, a podcast full of tips and tricks to help you create a website that you're proud of. I'm your host, Becca Harpain, Squarespace expert and educator and creator of Inside the square.co. In this episode, we're talking about one of the most essential elements of great web design, making your website responsive.
[00:00:51] A responsive website automatically adapts to look great and function well on different screen sizes. And yes, technically Squarespace does this for you, but there is so much more to the story. For a full transcript of this episode and the links to any tools and resources mentioned, visit insidethesquare.co/podcast
[00:01:09] the term Squarespace is a trademark of Squarespace, Inc. This content is not affiliated with Squarespace, Inc.
[00:01:16] This episode is sponsored by my very own Squarespace code AI, known as Custom Codey. Custom Codey is the world's first AI trained to be an expert at writing code for Squarespace.
[00:01:26] That's right. You can ask Custom Codey any question about how to customize your website, and they'll generate the code that you need to make that magic happen. Lifetime access to Custom Codey at customcodey.com
[00:01:38] That's customcodey.com
[00:01:41] now onto the episode,
[00:01:42] Let's start with the basics, what responsive really means, and why it's so tricky in Squarespace.
[00:01:49] A responsive website is one that automatically adjusts its layout, font sizes, images, and spacing the content of a site to fit the screen. It's being viewed on whether it's a big desktop monitor, a tablet, or a tiny phone. Now behind the scenes. This happens at different screen widths that are called break points.
[00:02:07] That's a design term for the point in which your layout ships, like when two columns on a desktop becomes one long vertical stack on mobile, Squarespace handles those break points for us behind the scenes. It'll automatically adjust things at certain screen widths. One of the most obvious examples is the Breakpoint 950, which is when your mobile menu kicks in.
[00:02:27] Squarespace has decided that at 950 pixels and width or smaller, it could be very difficult for people to interact with your main website navigation. It decided the mobile menu was a better option. We can absolutely adjust how your content is displayed using custom code, but Squarespace engineers have put a lot of work into making sure that our website.
[00:02:48] We'll respond well at certain breakpoints to improve the layout and usability. Now we will get into the details about what Squarespace handles and what it doesn't, but before we do, there's one more concept that I wanna define for you, and that is mobile first design. Mobile first design is the idea that when you're creating a website, you should plan the design starting with the smallest screen, usually a phone, and then scale it up for larger screens like tablets and desktops.
[00:03:14] Why? Because a majority of your visitors are probably on mobile, and that's not a guess. That's the data for most websites today, more than half of traffic comes from our phones. So if your site doesn't work well on a smaller screen, you're not just missing out, you're losing people before they even get started.
[00:03:31] But here's where it gets tricky. When you hop in to edit your Squarespace website, it's going to start you in desktop view. When you're building your site, you're looking at this big, beautiful full screen layout. You've got columns, you've got background images, all of this gorgeous breathing room. It's very easy to fall in love with how it looks on your laptop, but your visitors aren't guaranteed to see that version.
[00:03:52] If someone visits your site on a phone, which again, most people do. Their experience is going to be completely different. So mobile first design is about flipping the script. You can use the mobile preview mode while editing that little phone icon on the top right hand corner of the Squarespace editor.
[00:04:08] That is going to display your website content on a smaller screen. It's going to give you the mobile layout so you can see what background images look like when your gallery section shifts to two columns instead of three. You can see how the text is laid out and how the alignment fits. You can review everything and edit everything right there on the mobile version.
[00:04:27] Now, there are a few nuances that you should know. The first is that you can't change the content of your website without affecting any version, both desktop and mobile. If you change the text or the images, any content inside the content blocks themselves, that's going to change that content on any version of your website, no matter what device you're using to look at.
[00:04:48] However. The alignment of content inside those content blocks and the size of those content blocks, those can be edited on mobile separately from desktop. That means you can change the vertical alignment for things, even the horizontal alignment for things you can change. What content block is going to show up first on mobile and it won't change anything about the desktop version of your site.
[00:05:10] So again, when you're editing your website, yes, the Squarespace editor will instantly pop you into the desktop view. You can click that mobile preview icon on the top right hand side of your screen and you can edit the content on the mobile version of your website first. Now, I don't wanna gloss over the key word in that last sentence.
[00:05:28] You can edit the content in the mobile preview. Be advised, you cannot add a content block in mobile preview. You can't even add a page section. You'll notice if you try, you're not going to be able to interact with that feature like you normally would. Adding content needs to be done in the desktop version of your Squarespace website, so you'll need to go to the desktop preview to add content in that desktop version, including new page sections.
[00:05:54] But as soon as you do, you can go back to mobile preview to start editing that content and rearranging it for your mobile first design. Now, who knows, maybe in the not too distant future, Squarespace will make some changes to the editor. But at the time of recording this, we can only add content on the desktop version, and I strongly recommend that once you have the content on the page, hop into mobile view and start your design there first.
[00:06:17] When you start designing Mobile first and Squarespace, there are three things that most designers notice that I want to talk about in this episode. The first is that texts can look great on desktop, but overwhelm on mobile. You might find that the headline you wrote that is absolutely perfect for your landing page that spans the whole screen on desktop and looks great, takes up the entire view on a phone.
[00:06:39] Paragraphs that might feel easy to skim on. A laptop can turn into a wall of text that you have to scroll to finish reading. So when it comes to mobile first design, you might need to adjust the length of your content. Your font sizes change up, your line breaks, or rethink your layout just for mobile.
[00:06:55] Now, if you have a completely different layout concept for mobile, where you have to change things dramatically from what you designed for the desktop view, there is a code trick that I love to use called the mobile section swap. I will include a link to my tutorial video about this in the show notes for this episode at insidethesquare.co/podcast
[00:07:14] all right, we talked about text. Let's talk about buttons next. On a phone, buttons need to be big and they need to be far apart. People are using their thumbs, not a cursor. So if buttons or links are way too close together or they're too small, it can be very frustrating, and that means the user is much more likely to bounce.
[00:07:33] Make sure that your buttons have enough padding and space to breathe, especially when they're stacked. When you add a button to Squarespace, you can choose the fit versus fill option. When this first showed up in Fluid Engine, I was pretty excited about it because fit seemed to be perfect for resizing a button for the content.
[00:07:50] I very quickly realized that fill is a much better choice. When you set a button to fill the button, block will fill the entire space of the content block, which means on a mobile device, you can stretch that button to be full width, so it's very easy to click with the thumb. You can also stretch it to only take up half the screen if you wanna encourage people to keep scrolling.
[00:08:10] This also makes it very easy for buttons to be stacked and gives them enough padding to separate the edge of the button from the text inside. So again, I prefer to set my buttons to fill when I'm designing mobile first. And last but not least, let's talk about the layouts that break. Layouts that look amazing on desktop can fall apart on mobile.
[00:08:30] Overlapping blocks and layered images might look cool, but when it comes to responsive design, they can be so messy. One of my favorite pro tips for layered images is to layer them. Outside of the editor, create a layered image effect in a program like Canva or Adobe Express, and then upload that as a PNG with a transparent background to your Squarespace website.
[00:08:52] Fake that layered effect so that it's going to show up perfectly no matter what screen size someone is using to access your site. Anything that's overlapping or layered can definitely get messy when we're talking about different break points. So again, if you're layering images, consider creating a PNG to fake that effect.
[00:09:09] Rather than using the blocks there inside Squarespace. When talking about layouts, it's also very important to remember that alignment can be totally different from desktop to mobile. Vertical alignment and horizontal alignment for all content blocks can drastically change the way your website looks between desktop and mobile.
[00:09:26] So play around with the alignment options to make sure that your layout looks great. Don't be afraid to rearrange things and put them in a different order than where they were automatically placed by Squarespace. When you hop over to the mobile preview, get creative here. The key takeaway from this episode is that responsive design is really about your user experience.
[00:09:44] You want your content to fit the screen. You want your text to be legible and your buttons to be tapable. But let's take this one level deeper because responsive design, it's not just about visuals, it's about how people feel when they use your site. That's what we call user experience or ux. Mobile users are in a different headspace than people who are visiting your website on a laptop.
[00:10:05] Mobile users are scrolling quickly. They're looking for clear information. They're probably on the go, distracted in a hurry, or maybe they're standing in line. That means your job as a website designer is to simplify the layout, make the navigation intuitive, and guide them to what matters most. Each scroll should feel like progress.
[00:10:25] Your headline should tell a story, and it should tell it in a concise and quick way. Your section should flow naturally and your calls to action, your buttons, your forms, your links, they should be clearly clickable and make sense. Think of your mobile site as a tour guide. It should say, here's where you are, here's where you wanna see next, and here's how to get there.
[00:10:43] If people get lost or confused, they're going to leave, not because your content isn't good, but because the experience didn't support them. Responsive design is how you show your visitors that you respect their time. You're saying, Hey, I know you're on your phone. Let me make this easy for you. That is what builds trust.
[00:10:59] Alright, my friend, let's make this practical. You've got an action step for today. Here's what I want you to do. Open up your Squarespace website on your phone, on your tablet if you have one, and on your computer. Now if you don't have a tablet, here's what I want you to do. Open up a second browser window and go to your website and then shrink that window so it only takes up half the screen that is going to mimic a tablet breakpoint.
[00:11:23] Now I want you to look at your homepage, a services, or a sales page, a contact page. Pick three key pages from your website, and for each one, here's what I want you to ask. Can I read everything without zooming in? Are the buttons big enough to tap? Do I know what to do next? If you spot anything that feels awkward or unclear or frustrating, make one small fix today.
[00:11:46] Maybe that's adjusting the button, padding or reordering a mobile layout. Even one tiny improvement to alignment in a content block can make a huge difference in the user experience. I hope this episode has given you a fresh perspective on the concept of responsive design. Yes, Squarespace does it for us automatically, and no, it is certainly far from perfect every time, but we as Squarespace designers do have a lot more flexibility.
[00:12:10] So why don't you give it a try? Take a look at the mobile layout first before you design desktop, and see if you can create a better user experience one page at a time. Thank you so much for tuning into this episode of Think Inside The Square. For a transcript of this episode along with links to helpful resources, be sure to check out the show notes at insidethesquare.co/podcast
[00:12:30] and if you enjoyed this episode, let me know in the comments below and subscribe wherever you happen to be listening. Thanks again for tuning in and most importantly, have fun with your website. Bye for now.
-
Tablet design workshop replay: insidethesquare.co/tablet
Mobile section swap tutorial: youtu.be/AQnwhitEqnI
Squarespace breakpoint guide: insidethesquare.co/mobile
