26
Jan

Simple responsive design test page

There are some pretty complex testing tools for responsive designs out there. I even see people constantly resizing their browser window using on-screen rulers. The easiest approach to me is just a simple page with a bunch of iframes, like Matt Kersley’s test page. Because I always ended up refreshing the whole page rather than the URL bar on that page, I saved the file locally and tweaked it a little.

Somebody recently asked me to share it, so here it is. Just drop this HTML document in the same folder as your index page and open it – it’s dead simple, really!

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Responsive Design Testing</title>
    <style>
        body { margin: 20px; font-family: sans-serif; overflow-x: scroll; }
        .wrapper { width: 6000px; }
        .frame { float: left; }
        h2 { margin: 0 0 5px 0; }
        iframe { margin: 0 20px 20px 0; border: 1px solid #666; }
    </style>    
</head>
<body>
    <div class="wrapper">
        <div class="frame">
            <h2>320 &times; 480 <small>(mobile)</small></h2>
            <iframe src="./" sandbox="allow-same-origin allow-forms" seamless width="320" height="480"></iframe>
        </div>
        <div class="frame">
            <h2>480 &times; 640 <small>(small tablet)</small></h2>                   
            <iframe src="./" sandbox="allow-same-origin allow-forms" seamless width="480" height="640"></iframe>
        </div>                                                                                                                        
        <div class="frame">
            <h2>768 &times; 1024 <small>(tablet - portrait)</small></h2>                   
            <iframe src="./" sandbox="allow-same-origin allow-forms" seamless width="768" height="1024"></iframe>
        </div>
        <div class="frame">
            <h2>1024 &times; 768 <small>(tablet - landscape)</small></h2>
            <iframe src="./" sandbox="allow-same-origin allow-forms" seamless width="1024" height="768"></iframe>
        </div>
        <div class="frame">
            <h2>1200 &times; 800 <small>(desktop)</small></h2>
            <iframe src="./" sandbox="allow-same-origin allow-forms" seamless width="1200" height="800"></iframe>
        </div>
    </div>
</body>
</html>

Update: Ben Keen turned this into a very handy bookmarklet. Reloading the page will kill the effect of course, but still very useful for quick one-shot tests.

Update 2: Here’s another bookmarklet based on this idea by William Golden.

responsive design testing