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
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 :-)
- 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:
- 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
- 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.