So I had a thought on the bus the other day: Wouldn’t it be cool if I could test my responsive websites in multiple screen-sizes, without having to rubber-band my browser width back-and-forth, and back-and–forth, and back-and–forth? If I could see all the breakpoints that were important to this project at the same time, side-by-side, in a single window? Thus an idea started to form…

The Idea:

The implementation is simple: Take a URL and pass it to a bunch of inserted <iframe>s, each set to the width of a different breakpoint. Then, with one click, refresh all those <iframe>s (like, after I’ve made some change to something). And that’s basically what I have here:
https://aarontgrogg.com/rte/

The Process:

The process probably doesn’t need instructions, but here they are anyway:

1. Enter the URL you want to test into the “Enter the URL to test:” box
2. Enter a comma-separated list of breakpoints (the widths you want to test) into the “Enter your comma-separated breakpoints:” box
3. Click the “Display Viewports” button (or just hit the “Enter” key)
4. You should then see a series of <iframe>s (one for each breakpoint you designated) start loading into the page (see the “Known Issues” below)
5. Once all the <iframe>s have loaded (each should be vertically scrollable, as if it were a small-screen device), the parent container should be horizontally scrollable, if you’ve requested more breakpoints than can fit into your browser window
6. There will be two new buttons at the top of the page: 1) “Refresh Viewports”, which let’s you refresh all of the <iframe>s with one click, and 2) “Clear Viewports”, which clears all of the <iframe>s and resets the page as it was when you first arrived

Notes:

Note that each URL and set of breakpoints you view are appended to the URL, so it becomes something you can pass around for easy viewing.  When the page loads, it checks for them and, if present, populates the text boxes but does not automatically create the <iframe>s, in case the receiver wishes to edit something.

Additionally, I’ve created a little Bookmarklet that, when clicked, grabs the URL of the page you’re viewing and opens a new tab/window with that URL inserted into the text box, ready to load the <iframe>s:
RTE

Play:

This gets really fun when you start testing sites that are really taking advantage of @media queries to alter their sites based on screen size. Here are a few examples:

• https://aarontgrogg.com/rte/#http://www.pianolessonsnottingham.co.uk/
• https://aarontgrogg.com/rte/#http://www.hundredthmonkeyuk.com/
• https://aarontgrogg.com/rte/#http://www.zachwoomer.com/
• https://aarontgrogg.com/rte/#http://jeffcroft.com/

Known Issues:

• Some sites serve themselves with a header tag that prevents the site being loaded into a cross-domain <iframe> (sites like Google and Yahoo!); without this header, sites should load just fine

Update:

Amazingly, the morning after sending this link to a couple friends for their thoughts, I find this link during my morning commute RSS-fest… Ah well, just goes to show great ideas are always out there…

Top⇪