I’ve noticed lately a proliferation of websites like Responsive Design Testing Tool which claim to offer a way to test your responsive web designs in different browser or device widths. I happily began testing some of the pages I design and noticed that they didn’t look right—the designs weren’t responding to the width. After checking my CSS @media queries for errors I had an idea. Check the page on my iPhone.
If you go to the Responsive Design Testing Tool and put in a web page you know is responsive, you might notice something like what I saw in the screen shot above. What you’re seeing is the About.com home page rendered in four iframes at the four listed dimensions. If you look closely, you’ll notice that all four images in the frames are exactly the same size. This is because while the iframes loading the page are set to the width and height of the devices, the pages are rendering based on the browser window itself, not the iframe widths.
When I viewed the page on my iPhone the responsive features kicked in as they were supposed to and I saw the page as it was supposed to look.
As you can see, on a real iPhone the About.com logo is smaller and on the black background. The navigation has been reduced down to the icon. The headline and image are both fully visible. And there is no horizontal scrolling required. In other words, About.com modified the layout responsively based on the viewport of the iPhone.
Be Wary of Online Emulators
There are a number of sites like the Responsive Design Testing Tool that claim to be RWD testing tools, but in reality they are just iframe page loaders. And because most pages take their cue from the device window rather than a width set on an HTML element like an iframe, they just show the page as it would look on the browser it’s in.
I decided for the hell of it to see how About.com’s page would render in the iframes of the Responsive Testing Tool on my iPhone. Below is the result:
The immediate red flag for me when viewing this site on my iPhone was that the testing tool page itself made no effort to be responsive. You could argue that that’s because it really needs to be viewed on a desktop browser, but it was very difficult to scroll horizontally to see any of the iframes other than the 240×320 (small phone) frame. Other things I noticed were that the URL field did not use the URL input field, which made it slightly tougher to type in on my iPhone and it cut off the iframe completely on the right as you can see in the screen shot on the left.
All in all I wouldn’t trust this tool to do any testing on my websites. I’d be better off doing only testing on my browser and not worrying about mobile devices.
What Can You Use?
While online emulators might not be the best solution for testing responsive websites, you can use them to test non-responsive sites to see how your pages might render on a smaller screen device.
Want to Learn more about Responsive Web Design?
I am writing a book on responsive web design Responsive Web Design with HTML5 and CSS3 in 24 Hours, Sams Teach Yourself. It is available now for pre-order on Amazon and other places where books are sold.