Responsive Tester

Recently, I was chatting to a client about responsive design and testing. I mentioned something I'd been using locally for a while and figured they'd find it useful. So here's a little something I use when I'm building websites and landing pages.

It's probably not error free. During my initial development I tend to only use Chrome, so it's only been (kind of) tested there. Somewhat ironically, this site isn't at all responsive. But (obviously) that would be kind of pointless. It also shouldn't be used as a replacement for actual testing (not that you would). Browsers have a lot of quirks - your '100vh' height intro screen may look fine here - Safari on your iPhone may be another matter...

It is great, however, for testing breakpoints and checking that your content (or the content on your client's site) is flowing properly and nothing looks untoward. It should give you a good idea of how a site will (probably) look on a smaller screened device.

Anyway, you might find it useful as well. If that's the case and you have any suggestions, find any issues, or improve on it in any way - I'd love to know. You can find me on Twitter - @yesiamben. If forking is your poison, feel free to do so here on GitHub. It's MIT licensed, so you're welcome to do as you please, but I'd appreciate a link if you use it :-)

Helpful hints

  • Up and away, the question I've heard the most is "why doesn't this page display?" Often there are measures in place to prevent the iframing of a site. *Sometimes* this can be circumvented in Chrome by installing this extension. Obviously, use this at your own risk - and maybe disable the extension when you're not using it.
  • All settings are stored using localstorage. This means they should be the same when you return to the site, provided you're not in a private browsing session, or you clear your localstorage. Everything should save as you go, except the URL (but you can load that in the URL).
  • Any page can be loaded by adding the URL as a query string. For example:
    http://www.responsivetester.net/?http://www.iamben.co.uk
  • I'm not sure if Windows has scrollbars or not anymore, but if your scrollbars are messing with the breakpoints, you can add a few pixels to every box without changing the widths manually (for example, your 320px wide frame could be 340px to account for the 20px wide scrollbar the phone won't have).
  • Setting 'largest first' will reorder the frames largest to smallest. I prefer small to large, but different strokes for different folks :-)
  • By default the frames are set to crop at screen height. This is useful for testing breakpoint widths. I tend to untick this if I'm looking for an idea of the content that will appear above the fold on handheld devices.
  • You can set as many custom sizes as you like, and call them whatever you like. My favourites are the defaults, but go crazy if you wish. Settings are stored in your localstorage and should appear active or not when you return. I've added a link at the bottom to a useful collection of Viewport Sizes. You can probably find your favourite phones and tablets there.
  • At the very top, by the input box, are buttons to reload all the frames, and to slide closed the menu. If you slide it closed, it will stay that way until you open it.
  • You may encounter a couple of problems opening sites (especially those you're not developing). Some sites prevent themselves being opened in an iframe (or display a blank page), others use the UserAgent to detect mobiles or tablets and serve content accordingly. Browsers can also get a bit funny about navigation inside iframes. Just load the page you want in the input box or via the location bar.
  • If you're using this on OSX, you may have issues with horizontal swiping - in that it takes you back (or forward) in history if you swipe too far in either horizontal direction. Two solutions. One, be careful, two, disable the behaviour by clicking the Apple in the top left hand corner, then: System Preferences > Trackpad > More Gestures - and then disable 'Swipe between pages'.
  • Finally, you can reset everything by clicking the link in the 'Options' section.