Responsive-Width Assistant

Checking a web page to see if it looks good displayed in browser windows at various widths can be time consuming.

The page may be viewed with a phone, portrait and landmark orientations. Perhaps with a tablet. And on a desktop with various browser widths.

Toward the end of development, when final touches are being done, it generally is prudent to do all that viewing with every tweak.

To save some time on a project, last week, I built a responsive-width assistant. It does not emulate other devices or browsers. It's entire purpose is to see how a web page responds with the viewport at various widths.

The assistant is an iframe on a web page. The web page is displayed in a wide browser window on the desktop.

Above the iframe is a text field to type or paste in the URL to check.

Below the iframe are radio buttons to change the iframe width.

Within the iframe is the web page to be tested. The radio buttons are clicked to see how the page looks at certain widths.

I find it pleasant to use. You may, too.

Here is a working installation. The default iframe width is 320 pixels, which you may change.

Specify a URL above the iframe and select a width below the iframe. (You'll need to tap anywhere outside the URL text field so the browser knows you are done typing.)

As you select different widths, you'll see how the web page responds.

You may use the Responsive-Width Assistant right here at this web page. Or, you may install it on your own website.

If you elect to install it on your website, here is the source code.

<div style="max-width:500px; border:3px solid #ccc; border-radius:1em; padding:.5em; margin-bottom:5px;">
URL: 
<input 
   type="text" 
   value="https://lightfocus.com/friday-photo-series/good-morning.php" 
   id="iframe-url" 
   onchange="ChangeURL()" 
   style="width:100%; border:1px solid #ccc; border-radius:5px; padding:.5em;">
</div>
<iframe id="i-frame" 
   style="height:500px; border:1px solid black;" 
   src="">
</iframe>
<div style="border:3px solid #ccc; border-radius:1em; display:table; padding:.5em;">
Width: 
<label><input type="radio" name="width" onclick="ChangeWidth(320)" checked="checked">320</label> 
<label><input type="radio" name="width" onclick="ChangeWidth(450)">450</label> 
<label><input type="radio" name="width" onclick="ChangeWidth(550)">550px</label> 
<label><input type="radio" name="width" onclick="ChangeWidth(700)">700px</label>
</div>
<script>
function ChangeWidth(n) { document.getElementById("i-frame").style.width=n+"px"; }
function ChangeURL() { document.getElementById("i-frame").src=document.getElementById("iframe-url").value; }
ChangeWidth(320); // Specifies default width.
ChangeURL();
</script>

Paste the source code into a plain text file, name the file ResponseWidthAssistant.php (or other *.php file name), and upload the file to your server. Type its URL into your browser and you're ready to go.

The default web page may be changed. Find this code in the source code above

<input 
   type="text" 
   value="https://lightfocus.com/friday-photo-series/good-morning.php" 
   id="iframe-url" 
   onchange="ChangeURL()" 
   style="width:100%; border:1px solid #ccc; border-radius:5px; padding:.5em;">

and change the purple URL to the URL of your choice.

If you wish to add more radio button options, make a copy of this line

<label><input type="radio" name="width" onclick="ChangeWidth(550)">550px</label> 

The Responsive-Width Assistant is actually kinda fun to use, just to see how various web pages respond. Now may be a good time to check each of your websites.

Enjoy. :-)

This article first appeared with an issue of the Possibilities newsletter.

Will Bontrager