The easiest way to preview your Squarespace website on different devices - video tutorial

Preview Squarespace website on different devices | Device View 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.

Final Thoughts

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!

Want to create your own stunning, professional Squarespace website? I build custom sites and I’d love to work with you. If you’d rather take the DIY route, I highly recommend the online course Website that Wows. It's a simple, step-by-step program designed to help coaches and service-based entrepreneurs create their own client-winning website from scratch. Plus, it's beginner-friendly with no coding required! You can start with a free trial here.