Before the first iPhone was held by hands outside of Apple's Cupertino headquarters in 2007, testing how your website would look for your visitors meant you needed to only check the site in a handful of web browsers. If you count both Mac and Windows versions of Safari, Firefox, and Opera, as well as Internet Explorer on Windows, that would be a total of seven different browsers on the two mainstream operating systems.
For simplicity's sake, I'm not counting all the versions of Internet Explorer that linger around long after Microsoft releases a new version.
Fast-forward to today, and you can mark off the Windows flavor of Safari and add Google's Chrome for both Mac and Windows for a minimum of eight modern browsers.
However, testing doesn't stop there anymore as we now have a plethora of smartphones you will want to test on your site. Do you have a tablet? Test on that too. Oh, wait! Your buddy has the latest fill-in-the-blank device with a larger screen. You should probably ask to test on that device just to be sure everything looks as intended.
Before you know it, you feel like you could spend all of your time testing your site because each device you check seems to show you something slightly different. Unfortunately, that's the world we live in today - a multi-device, varying screen sizes world.
Your Squarespace Site is Responsbly Responsive
Thankfully, if you have a website hosted on Squarespace you have a site that provides you with responsive web design. What does this mean? It means your site will reformat and adjust to the size of the screen of the mobile device you are holding.
That's great news, right? Of course it's great news! One site for all devices is the way to go. But, how can you test your site on multiple types of devices when you own only one or two?
Fortunately, there are some ways you can test your website and how it responds to varying screen sizes on your computer.
#1: Test in Your Browser
The easiest way to test the responsiveness of your Squarespace site is to do the simplest of actions: resize your browser window. That’s right, when you are viewing your Squarespace site, grab a side (or corner) of your browser window and resize the window and watch how the site responds to the change in your browser window’s width.
If you are on a Mac, hold down the option key on your keyboard while you resize your browser window. The browser window will remain centered in it’s location, resizing both sides of the window no matter which side of the window you are grabbing and resizing.
You may notice that images on your site are pixelated as you scale a window larger, this is because Squarespace initially loaded the images at a size optimized for the smaller window size before you resized the browser window. This is a byproduct of how Squarespace handles responsive images — serving the smallest image variation needed for the width of the area where it’s being displayed. Simply refresh your page once you are done resizing the browser window and Squarespace will load the best sized image.
#2: View Multiple Sizes of Your Site in One Browser Window
There are a few websites that help you test your site at multiple screen sizes from within one browser window on your computer. Enter your website’s URL (i.e. http://krisblack.com) in a form field to load your site for viewing.
The benefit these sites provide over resizing your browser window, as mentioned previously, is they allow you to view your site at a specific width and height. Some even match the width and height of a particular device screen. The following are a few examples of sites that allow you to test your site in such a way.
These sites are great for getting a quick-and-dirty look at your site at multiple screen sizes.
#3: Browser Bookmarks
Perhaps a little easier to use than visiting another website, is adding a browser bookmark to help resize your browser window for the current website you are viewing. Simply drag a bookmark to your browser’s bookmark bar and when you want to test how a site looks at certain sizes, you click the bookmark to load settings to adjust the width of the site you are viewing. The following sites provide easy to use features for testing your site.
- # Responsive Design Bookmarklet includes helpful visuals, such as a mobile device’s keyboard and status bar, you can toggle on to better simulate using a mobile device.
- Viewport Resizer includes a feature called Animate that automatically changes between numerous screen sizes to watch your site adjust to different widths.
These bookmark solutions for testing website responsiveness are my preferred ways of quickly testing different screen sizes.
#4: Test on Your Devices
If you own a mobile device, such as an iPhone, iPad, Android smartphone or tablet, or Kindle Fire, then by all means look at your site on your device. If you own or have access to multiple devices of varying screen sizes, then definitely look at your site on all of the devices you can. You’ll be surprised at how your site varies on each device.
If you are on a Wi-Fi network when you are testing, don’t forget to turn off your Wi-Fi setting to test your site over a cellular data connection (i.e. EDGE, 3G, 4G, or LTE). Doing so will show how your site will load for people not connected to a Wi-Fi network.
#5: Adobe Edge Inspect
If you are testing on multiple devices, it can become a huge annoyance to constantly have to refresh each device’s browser window. An easy solution to make the process of testing multiple devices at one time is to use Adobe Edge Inspect. You use Adobe Edge Inspect by installing an extension in the Google Chrome browser on your computer and downloading free apps on your iOS and Android devices. When you connect all your devices to the same Wi-Fi network that your computer is using, the Chrome extension can then sync the website you are viewing to the Edge Inspect apps on all your connected devices. Your devices automatically refresh when you refresh your Chrome browser window.
Adobe Edge Inspect is a paid service offered through an Adobe Creative Cloud account. A monthly subscription to Creative Cloud is required to use Edge Inspect beyond the 30-day free evaluation.
Once you start adding your own content to your site using Squarespace Blocks, testing your site’s responsiveness can become a beneficial process. Responsive website design requires you to be flexible with how your site displays on multiple devices. It’s inevitable that you won’t be able to control every aspect of how your site responds to varying screens, but testing your site at varying screen sizes will insure you know what people are seeing.
If you have questions or want to share more tips about mobile testing or responsive design leave a comment below.