3 ways to preview your site on other devices and screen sizes
Table of Contents Show
📌 Pin it!
Yeah, –I know, the pic in the thumbnail is mobile, not tablet, but you get the idea!
Today’s post will be SUPER quick, so don’t blink or you’ll miss it.
Kinda like the new town we’re moving to. 😂
#ruralamericaforthewin
For 7.0 users, you may be rollin’ your eyes right now, because it’s had this tablet view for a whiiiiile. So it won’t be anything new to you.
If you have SquareKicker*, you have the ability to see your design in Desktop, LAPTOP, tablet, AND phone views. In other words, you’re real fancy!
But for 7.1 users, for some reason, Squarespace decided to introduce the new 7.1 version without the tablet view and it stayed that way for OVER A YEAR.
If you have the SquareWebsites Chrome extension like I do, there’s been a new update that allows you to toggle the site view to Tablet in either Landscape or Portrait mode.
And of course, if you don’t have either of those installed for your 7.1 website, I’ll show you how to view it on tablet or mobile screens for free.
Get a design plugin or extension
❶ SquareKicker’s plugin for 7.1
How to toggle different screen size previews on/off:
While you’re in edit mode on your Squarespace site, check out that top bar and look for the yellow/black SK logo.
click the SK logo
in the yellow tab at the top of that popup dialog box, on the righthand side is an icon of a desktop, click that
When you hover over it it will slide out 4 device options & a blue color will highlight all the screen sizes your changes made within SK will apply to
Click Laptop, for example; all changes made in this view should only apply to laptop size screens & smaller, but not to Desktop size screens.
Click Tablet; all changes made in this view should only apply to tablet size screens & smaller, but not to Desktop or laptop size screens.
Click Mobile; all changes made in this view should only apply to mobile size screens & smaller, but not to Desktop, laptop or tablet size screens.
When you select Desktop again & hover there for a couple seconds, you’ll notice it says “All Devices” – that means your changes will show on all devices.
❷ SquareWebsites Tools Extension Pro
How to toggle the tablet preview on/off:
While you’re in edit mode on your Squarespace site, check out that top bar.
You’ve got your Edit/Done/Save button on the left
Page title & status (draft/published) in the middle
SquareKicker plugin icon on the left side of the righthand icons
WTF is that? You gotta check it out over here*
Tablet in landscape (longways) preview
Tablet in portrait (upright) preview
Mobile preview (portrait only, for now)
In edit mode: Site Styles (some of it moved over here recently!)
Out of edit mode: the show in full-screen arrow icon
Clicking on any of those device icons will display your website in those approximate screen sizes, so you can see how your content will adapt for those smaller screens.
See below? Those tablet icons just slid right on in there during the Feb. 2021 update, didn’t they? 🙌🏻
NOT in edit mode 👆🏻
IN edit mode 👆🏻
Don’t have those plugins or extensions?
How to see different screen size previews in Chrome (free)
I recommend that you use this method when you’re not in Edit mode, but you can do it then too it’s just a little weirder for lack of a better description.
Using a Chrome browser to view your site, right-click anywhere on your site and select “Inspect”
The screen will split into 2 sections: one where it shows you the code that makes up the structure & design of your website, and two a preview of the screen as it was.
On the code side, look for an icon that looks like this:
Click that icon to show the device preview instead of your regular website preview
Now that it has switched, got to the top of the menu bar and use those options to select the device type you want to preview with
Need more visual instructions? Check out the How to get device screenshots for mockups, because it walks you through how to use the device preview in Chrome, and an additional method to view your screen at new sizes.
but how does it know to resize?
Real quick, let’s talk about how Squarespace set up its responsive design behavior.
Squarespace is set up on a 12 block grid; that’s because it’s the most versatile which is great because we can’t change that grid anywhere in our site settings. 😂
Basically, that just means on most templates, you can add up to 12 blocks literally, side-by-side. with some space on either side before the page’s border. Here’s what that looks like in practice:
See all those Spacer blocks? Yep, you guessed it. There’s 12, side-by-side.
Squarespace’s responsive behavior is dictated by this grid and which blocks are ‘grouped’ with which other blocks.
You can group block by adding a new one, then click & drag to move it around the page; watch that blue insert line to see where it will place that block. For example, if you want an image directly next to some text, you’d move that image block around until the blue insert line is ONLY the height of the text block next to it, rather than the full height of the page. Learn more & see this in action over here:
• 4 things you can do with Spacer blocks
• How to optimize your site for mobile screen sizes
As discussed in that mobile optimization post, once you have grouped blocks that follow each other around as the page responds to smaller screen sizes, next ya need to know in what order they display when they reorient.
Squarespace reads the elements on the page, top to bottom, then left to right, as it moves down the page.
This is why important text is usually on the left side of responsive website pages because for smaller screen sizes, the text will display first and THEN the image (which is usually less important, so it’s okay for the image to appear second).
So keep that in mind as you design your site!
✪ Download this free app - bonus!
I just found this resource thanks to another fellow Squarespace web designer & am adding it as a bonus method because it’s sooooo easy.
Download the Responsively App
––no I’m not an affiliate for this one!
This app is free and works on Apple, Windows, and Linux operating systems. By far, this is the easiest way to preview how your site will look on other devices!
What does it do?
it actively lets you browse one website in multiple-sized windows within the same screen so you can see, use & interact with it in various device sizes
you can adjust text to preview how a change in copy may look. On refresh though, the changes don’t stick (of course); you’ll have to be in Squarespace’s page editor for that.
you can rotate the viewport to see the website in landscape or portrait mode
when you scroll through the site on one “device” it scrolls the rest of them too, and at the right speed to keep up with the same content
you can take full-page screenshots of the design on each device
enable a touch/tap user experience to simulate mobile-use
you can also access Developer Mode to inspect the code if needed
and a few other things!
What does it look like? 👇🏻
