The easiest way to preview your Squarespace website on different devices - video tutorial
The easiest way to preview your Squarespace website on different devices
Whenever I build and design a website, one of my biggest considerations is how it looks and displays on different devices. Whether someone is viewing the site from a desktop, tablet or smartphone, I want to make sure that everything displays correctly and that the user experience remains unaffected!
There's a super easy way to do this if you're using Squarespace, and it's a trick I rely on with every single website I work with. Responsive design is a feature of every Squarespace template but unless you're a pro, you might not know how the site will end up looking on different devices after your design is complete unless you check it out for yourself.
My friend, let me introduce you to the wonderful world of Device View!
I recently realized that not everyone knows that the Device View feature exists, and I've even heard stories of people struggling to find iPads and other sized devices to test out their website's design on before going live. What a time suck! This easy trick will save you from that hassle and it gives you peace of mind a whole lot faster.
If you've ever wanted to see how your website displays on different devices, the Device View trick is for you! Don't waste your time pulling up your website on your smart phone, tablet AND desktop when you could do it all at once. This video tutorial will show you how!
Note: want to watch more of my Squarespace video tutorials? I've linked to them at the bottom of this post or you can head over to my Youtube channel to binge them now. #aintnoshame
Using Squarespace's Device View feature
This video will show you:
- How to use the Device View feature in Squarespace
- How to toggle between different Device View options
How to use Squarespace's Device View
Log into your Squarespace account and open the website preview (any page will do).
- Click the little line (will turn into a downwards arrow if you hover it) to expand to different Device View options
- Toggle between mobile, tablet and desktop views to see how your site displays on each device
Note: Device View will give you good but general look at how your site appears on a typical mobile browser. It's not 100% accurate for every phone or tablet. This means that depending on the window size of a particular device (specifically smart phones and tablets), the website's features might look and behave differently on the actual device than they do in Device view.
Device View is the quickest and easiest way to preview your website on different devices and see how your site will look depending on how it's viewed. It's a tool that I use all the time as a webs designer/developer and I love how it's built in to Squarespace's platform for easy access! Save yourself the trouble to viewing your site on a smartphone, iPad AND your laptop/desktop and use Device View instead! You're welcome :)
Now it's your turn to tell me, have you checked out how your website works on different devices? Are you familiar with responsive design and how it affects user experience of your website? Are you familiar with Device View or is this a new trip that you'll start using today? I'd love to know so leave me a comment below!
MORE SQUARESPACE TUTORIAL VIDEOS
- How to disable the escape key login on your Squarespace website
- How to add and format images on a Squarespace website
- How to enable and disable comments on your Squarespace website
- How to add an Instagram feed to a Squarespace website
- How to add and style a button in Squarespace
- How to add and customize a Squarespace announcement bar
- How to name photos for increased SEO in Squarespace
- How to add and remove pages from the navigation in Squarespace
- 4 Squarespace templates I recommend for business websites
- How to add videos to your Squarespace website
- How to use tags and categories in your Squarespace blog
- Favicons: how to create one in Canva and upload it to your Squarespace website
- How to set up a blog on a Squarespace website
- How to add related posts to the bottom of Squarespace blog posts
- How to connect social media accounts to your Squarespace website
- How to easily find out which Squarespace template a website is using
- How to update and edit banner images in Squarespace
LAUNCH YOUR BEST SITE - FREE ECOURSE
Interested in learning more about what it takes to get a website up and running? Sign up for my free 7 day e-course!