In today's digital landscape, websites must be designed with responsiveness in mind. As a Squarespace designer, one of the most important steps in my web design process is ensuring my websites are responsive and look amazing on all displays, be it mobile, tablet, or desktop. Squarespace natively offers a mobile view that allows you to see what your website will look like on mobile, and with the new Fluid Engine update, it allows you to edit your mobile layout separately from the desktop layout. However, the mobile view is quite limited as not all mobile devices share the same screen resolution. Also, the Fluid Engine still doesn't offer a tablet view. So, how do I make sure the websites I design look good on all possible displays? Easy! I use my favorite responsiveness-checking Chrome extension: Responsive Viewer.

What is Responsive Viewer?

Responsive Viewer is a simple and powerful tool that allows me to quickly and easily check the responsiveness of any website on a variety of different devices. It's a browser extension that can be easily added to Chrome to test the responsiveness of any website, whether built on Squarespace or any other platform.

How to Use Responsive Viewer?

All you need to do is install the Chrome extension and then open the website you want to check and launch the extension. We can see in the example below that the default tab of the extension will display a grid view of the most common screen resolutions across mobile, tablet and desktop.

In addition to the default presets you will have the ability to view other resolutions by adding them through the inactive screens tab. I love this function because it allows me to quickly and easily add any resolution to my review tab. The extension also offers the ability to rotate the device between portrait and landscape mode on any resolution, which is handy when you’re optimizing for mobile and tablet. Once you’re done reviewing the page, click the extension button in your Chrome extensions tab to close Responsive Viewer and return to the normal viewing mode.

How to use Responsive Viewer with Squarespace websites?

For best results with Squarespace websites, I recommend reviewing your website through the front end or on a Private/Incognito tab. This will display the most accurate version of the website and what your visitors would be seeing. Reviewing a website through the back end where the layout editor is open will not be as accurate.

So there you have it folks! Responsive Viewer is an essential part of my web design toolkit and I hope it will help you as much as it has helped me. If you end using Responsive Viewer then I’d love to hear about your experience in the comments below!

Related Articles: