How to test responsive designs for free

Default avatar.
July 31, 2013
How to test responsive designs for free.

thumbnailStop resizing that browser, you’re gonna wear it out!” How many times have you heard that one? Well okay, maybe not so many times, but if you develop responsive design web sites, you know what I’m talking about: with every DOM or CSS edit you’re dragging that browser edge back and forth, testing your changes and looking for anything broken.

Ultimately, most of this effort is an attempt to emulate the screen size of different devices.

If you’re doing corporate development, you may have a variety of devices provided by the company to test on. Where I work we have an iPad, iPod, one or two other tablets, laptops and desktops. If you don’t have that luxury, you have to use whatever is at hand.

In my home we have two different laptops, two different Android devices, a Kindle and a Nexus 7. These are the devices I use to test my freelance development, but clearly this isn’t an exhaustive collection. No iOS devices at all, and although I’m a bit of an early adopter, I don’t plan on buying every new phone/​phablet/​tablet as it hits the market.

So what is a developer to do? Thankfully, there is a growing number of browser-based tools available that emulate the screen sizes of a wide variety of devices. Different tools come with different feature sets and varying levels of utility, of course. We’ll look at several of them here.

For testing purposes, I used the first truly responsive site that I made, PajamasOnYourFeet​.com. This site is based on the Brownie HTML5 template, very graciously provided to the development community for free on EGrappler.

Am I Responsive?

Am I Responsive? is a dead simple, instant view of your site as it would display on four different devices. All four are iOS, and the developer explains that focus on the site. It offers no controls and no choices, just a very simple, elegant presentation.

Viewport sizes are

  • Desktop — 1600992px scaled down to scale(0.3181)
  • Laptop — 1280802px scaled down to scale(0.277)
  • Tablet — 7681024px scaled down to scale(0.219)
  • Mobile — 320480px scaled down to scale(0.219)

Quoting the developer, This is not a tool for testing, it is really important that you do that on real devices. This instead is a tool for quick screenshots (for me) and to visually allow people to get’ what you mean in client meetings.”

Two very nice features are the ability to drag the devices” wherever you want on the screen, and the ability to embed your test site in a link you can share. In Firefox, at least with the structure of the test site, the side scrollbar on the iPhone doesn’t display, but it does in IE and Chrome.

deviceponsive

deviceponsive is similar to Am I Responsive? in that it simply and cleanly displays your site, with no controls or options available as far as the devices are concerned. All devices are shown at once on one long page. It does have the interesting feature that you can customize the site header by editing a header background color and embedding your own logo, and then share via screen capture. This lets you brand the site, in a way, when you share screenshots with a customer.

Devices and screen sizes emulated in this site are

  • Macbook — 1280800
  • iPad portrait — 7681024
  • iPad landscape — 1024768
  • Kindle portrait — 6001024
  • Kindle landscape — 1024600
  • iPhone portrait — 320480
  • iPhone landscape — 480320
  • Galaxy portrait — 240320
  • Galaxy landscape — 320240

As with most of these tools, scrollbars are displayed on the smaller devices. On the actual device they would not display, but to allow scrolling the test view on a non-touch scroll device, some concessions must be made.

responsive test

Like deviceponsive, responsive test displays your site in a variety of devices, but instead of displaying them all on the page at once, you choose which device to view from a simple menu at the top of the page. Viewing this site on a medium-sized laptop, I found zooming the page out works well, allowing you to see the entire test site within the test device’s bezel.

Thirteen different viewports are offered here, ranging from a large desktop monitor to a what they call Crappy Android’ (to be fair, they also have an option called Nicer Android’).

Once again, Firefox is the browser that stumbles a bit on this site. Notice in the screenshot, between the green header and the white background content area, there is only a blue stripe where an image slider should be displayed.

responsive​.is

Quite similar to the previous two entries, the one thing that sets responsive​.is apart from them is the smooth animation from one device’s display to the next, and a semi-transparent overlay that shows the site real estate that falls outside of the viewport.

The only device options available here are auto, which fills your browser window, showing the site as you’d see it if you actually went there, Desktop; Tablet Landscape; Tablet Portrait; SmartPhone Landscape; and SmartPhone Portrait, pixel dimensions aren’t given.

Screenqueries

Once again, a few different features and options set Screenqueries slightly apart from the others. 14 handsets and 12 tablets are provided here, with a separate control to switch between portrait and landscape mode. They display on a numbered pixel grid, with the dimensions shown at the bottom right of the test display. The edges of the display are draggable so you can test custom sizes. Mouse over or click on the test area and the background switches to grey, giving you a less cluttered view.

An interesting feature of this site, for several of the devices there is a Trueview” option which shows your site wrapped in the specified device’s browser chrome.

Unfortunately, and I’m getting used to it by now, Firefox fails to display the test site’s image slider. Don’t flame me, Firefox is actually my browser of choice, but thankfully we have options.

Screenfly

Screenfly really steps up the usability quotient. It offers nine bigger-than-tablet devices, from 10″ notebook to 24″ desktop, five tablets, nine smartphones, three television sizes, and a custom screen size option. Any option you choose can be rotated to portrait or landscape with a separate menu control. You can choose to allow scrolling or not, and you can generate a shareable link with the click of a button.

The site is proactively useful with how it presents pixel dimension information. Each device in the menus is shown with name and pixel dimensions, the dimensions of your own actual browser window are shown near the top right of the window, and the selected option’s dimensions are shown in a footer under the display, along with the URL of the site being tested. That little feature adds a nice touch for documenting screenshots and sharing the information with clients.

All the aforementioned would make this a perfectly good tool, but the developers of Screenfly saw fit to kick it up one major notch and provide a proxy server feature. Quoting from their site, Screenfly can use a proxy server to mimic devices while you view your website. The proxy server mimics the user agent string of the devices you select, but not the behavior of those devices.”

All the other tools covered here deal solely with CSS. Screenfly is the only one that allows testing based on agent string.

Testing with the one site I’ve made that provides a mobile version based on agent string, the results for the mobile site were very good. Things displayed exactly as I expected and functions were testable. Admittedly, testing for agent strings is old school, but this site was made back in the day”, and the proxy server feature does make a useful addition to this site.

Conclusion

So we see there are quite a few resources for testing your responsive sites. Differentiated by unique features, which sites you might use will be based on your own individual preferences and requirements, and I encourage you to explore and experiment with them. The more truly useful tools we have as web developers, the better.

Do you use any of these tools? How do you test your responsive designs? Let us know in the comments.

Steve Ralston

Steve Ralston is a web development professional in Waterloo, IA. You can connect with him on LinkedIn. He has just released his first book, Pajamas On Your Feet”, check it out at pajamasonyourfeet​.com

Read Next

15 Best New Fonts, May 2023

The choices you make when selecting a typeface have more impact on your design than almost any other decision, so it’s …

10+ Best Tools & Resources for Web Designers and Agencies (2023 updated)

Having the ability to envision a tastefully designed website (i.e., the role creativity plays) is important. But being …

20 Best New Websites, May 2023

This month, there are tons of great new agency websites to get excited about. 3D animated prisms are a popular theme, a…

How to Find the Right White Label Website Builder for Your Agency

Web design agencies face a lot of obstacles in closing the deal with new clients. One of the most common ones is the ar…

Exciting New Tools For Designers, May 2023

There are hundreds of new tools for designers and developers released each month. We sift through them all to bring you…

3 Essential Design Trends, May 2023

All three of the website design trends here mimic something bigger going on in the tech space, from a desire to have mo…

10 Best AI Tools for Web Designers (2023)

It’s time to stop worrying if AI is going to take your job and instead start using AI to expand the services you can of…

10 Best Marketing Agency Websites (Examples, Inspo, and Templates!)

Marketers are skilled in developing strategies, producing visual assets, writing text with high impact, and optimizing …

15 Best New Fonts, April 2023

Fonts are a designer’s best friend. They add personality to our designs and enable fine typography to elevate the quali…

20 Best New Websites, April 2023

In April’s edition, there’s a whole heap of large-scale, and even full-screen, video. Drone footage is back with a veng…

Exciting New Tools For Designers, April 2023

The AI revolution is having a huge impact on the types of products that are hitting the market, with almost every app b…

3 Essential Design Trends, March 2023

One thing that we often think about design trends is that they are probably good to make a list. That’s not always true…