Self-Indulgent Code: Building a Responsive Web Tester

When our Web Production Manager Greg wrote about the Mobile Testing Process I started to think about easier ways to test sites and visualize the results for a designer. As a backend engineer I do not consider the woes of a front end designer often. But here at NuRelm we are making responsive and mobile website a priority in our design. This led me to Matt Kersley’s Responsive Tester I loved its simplicity. Just an abuse of the iframe sandbox features for HTML 5. What I didn’t like about it was the lack of interactivity so I forked his project and created my own which lives The goal of my variation of this concept is to give more control over the page size.

Screenshot of Responsive Tester by Paul Scarrone

The designers here made mention that the issue with testing devices sometimes is they don’t all fall into standard sizes. So being able to evaluate a page at an odd size is useful. This my responsive tester was born.

The real secret of the whole project is here in case you want to make your own:

The second issue I see with responsive and mobile testing is that of the User-Agent header. Your mobile devices provide a specific string which helps the web-server and in relation the website to respond to special features and conditions of your site. You will notice that if you use my responsive tester to inspect nothing changes no matter what size the screen is. This is because this site does not respond to CSS media queries like the responsive model but to the User-Agent string of the browser. Thus the next step in the development of this tester is to allow the user to proxy their requests with a supplied User-Agent and get a better visualization of all sites on their device.

The project code is here if you want to help out