Navigation

How to test responsive designs for free

By Steve Ralston | Mobile, Resources | Jul 31, 2013

“Stop 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 — 1600 x 992px scaled down to scale(0.3181)
  • Laptop — 1280 x 802px scaled down to scale(0.277)
  • Tablet — 768 x 1024px scaled down to scale(0.219)
  • Mobile — 320 x 480px 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 — 1280 x 800
  • iPad portrait — 768 x 1024
  • iPad landscape — 1024 x 768
  • Kindle portrait — 600 x 1024
  • Kindle landscape — 1024 x 600
  • iPhone portrait — 320 x 480
  • iPhone landscape — 480 x 320
  • Galaxy portrait — 240 x 320
  • Galaxy landscape — 320 x 240

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.

Share this post
Comments (no login required)
  • Luke Cooper

    I recently tested my first website using browserstack.com.
    It let’s you select not only different devices (therefore screen sizes) but also older browsers which I found valuable for sorting out IE7/8 issues.

    You can then download the images to compare one device against another

  • Luke Cooper

    Geoffrey, Your navigation breaks on to 2/3 lines quite a lot as it flexs width.

    Have you considered some sort of responsive nav that maybe changes size on width or perhaps hides into a drop down / slide out nav using jquery or the like?

    I’m putting one into my own site under development and it’s such as soace saver and works (hopefully) great.

    @doncoop

  • Jack Rimell

    A really wonderful article and will help a lot when creating a new website. Responsive web design should be something that everyone creates or websites on phones will just be to small to see.

    Any feedback on my site would be great: http://jackrimell.co.uk/ Thanks

    • Steve Ralston

      Hey Jack – You have some good things going there, but I see some issues, too. In Firefox, it’s pretty broke, I’m afraid. Looks like the page isn’t finding images and css. It does much better in Chrome and IE. One thing in Chrome that I notice, if you close the window down quite narrow, the “DO” in What I Do overlaps some text and a graphic. If you just change the span style to have a background-color of ‘transparent’ instead of a hex value, that problem seems to go away. There are also some spots where lines of text get smushed together when the window is quite narrow. I see the same issue with the text in IE. But these are all just good examples of why we test in multiple browsers (or simulators/emulators). None of these issues should be too difficult to overcome. Something you might want to experiment with just for kicks is resizing the text as the window gets narrower. There are different ways to achieve this. You can do it with media queries in css, or there are ways of doing it on-the-fly with jQuery. Thanks for sharing, keep having fun with it :-)

  • RWDave

    I saw this tweeted yesterday: http://testrwd.com found it quite useful!

  • The Digital Agenda

    I like Am I responsive, as it is fast and easy to use. It is a great site for a quick check to see what your site looks like. We just redesigned our company website and designed our website http://www.thedigitalagenda.net to be responsive. Our company specializes in responsive websites, so having a quick tool like Am I Responsive helps our testing process. Thank you for the other sites info!

    • Steve Ralston

      Glad you like the info. Am I Responsive is so simple, works just as described, it’s really a useful tool.

  • John Jacob Designs

    Just a tip for chrome users. Is the best developer tools options you change the user agent to any browser to quickly test browser based code without a proxy.

  • S Emerson

    None of the tools mentioned in the article and in the comments so far work if the site is setup to break out of frames.
    Anyone have a tool that does not use frames?

  • http://www.graciolli.com/ Graciolli Dotcom

    Adorei este exemplo – Muito Bom – Very Good!

  • SDorinPXM

    Awesome, thanks for the tip !

  • http://www.letsillustrate.com/web-design-wigan Illustrate Media

    Great post on responsive design. I particularly like the ease of going in to a design meeting with a better idea for clients!

    • Steve Ralston

      I thought that was really useful, too. It’s great to have answers to the customer’s questions before they even ask them.

  • Steve Ralston

    That page works fine. As a personal preference, when the check button goes below the input field, I’d like to see the square edges on both rounded. That should be easy to do if you want.

    • Akkis

      Of course. I understand what you mean and i will fix it. Thank you!

  • Edwin Lap

    Thank god for this post. We are waking with this right now with a big client of ours. Why would you keep resizing the browser? Who does that anyway?

    Thank you for postin this!

  • thenetguruz

    Thanks for this cool tip!

  • http://www.mathewporter.co.uk/ Mathew Porter

    Nice to have some free resource, I personally use raw devices available (quite a few) and then do any final testing using http://www.browserstack.com/ which is a great services testing on actual devices with multiple device, os and software versions available and is worth the fee if you have the budget for it.

  • j_rob

    Thanks for sharing! This should be helpful. I agree that responsive design should be about testing on multiple screen widths not just 3 fixed widths. It’s great for quickly testing though.

  • Jehp Dragon
  • Nuno

    I really also like http://www.viewlike.us. I think it was actually the first to appear.

  • http://www.isstrani.si/ ISScyborg

    Great post. Is there similar site like this – http://ami.responsivedesign.is/ but not for all devices in one, but for each separately?

  • Maxine Daryl Toledo

    use this http://ponsive.appspot.com/ if you want multiple view in 1 loading.

  • Lindsay Jopson

    I made a bookmarklet to jump on the back of Screenfly. http://lindsayjopson.co.nz/2013/10/24/responsive-website-testing-bookmarklet/ I use nearly every day when developing responsive websites. Quite a fan of Screenfly due to its device preloaded resolutions.

  • Yahya Younes

    also you can use
    http://www.isresponsive.com

  • http://webthil.com Senthil Kumar

    I use http://rwdesigntest.com and it looks great