8 Awesome Responsive Web Design Emulators

Here’s my definition of responsive web design: adjusting the design of a website to fit the size of the device it will be viewed on. I start with a desktop-sized design (1140 x 900 pixels) and scale things down to fit smaller screens. But some designers begin with the smallest screen of an Android as their base and scale up to fit larger screens. Either way, the design is, in a sense, responding to the device size and adjusting accordingly.

Once upon a time, we designed just for desktop and laptop screens. With the explosive growth of mobile devices, it’s now necessary to adapt your designs for the myriad of screen sizes, ranging from tablets to cellphones. In addition, with the advent of web television, it will soon become commonplace to scale up the web designs to those larger, often higher-resolution, formats.

You need to see how the design will look on different screen sizes, yet it’s impossible to test your design on devices you don’t own or have access to. Fortunately, there are a bunch of online emulators for testing your responsive web designs. You use them in conjunction with tools that enable you to view the code (Firebug in Firefox; Developer Tools in Chrome), so you can target the exact CSS selectors that need modification.

Best Responsive Emulators

Chrome Device Mode

 

 

Google Chrome’s developer tools include a device mode and an elements inspector. To access the tools, launch Chrome and go to the VIEW menu > Developer > Developer Tools. Activate the tools by clicking their icons, which are next to one another at the top of the tool “drawer” (circled in red in the image above). The emulation feature has an extensive list of screen sizes, includes a touch screen emulator, and works seamlessly with the inspector tool. You can easily toggle in and out of device mode. A full description of it is on the Google site.

The Firefox emulator is similar to Chrome, with more limited size options. It is found under the TOOLS menu > Web Developer > Responsive Design View. You can always click and drag the container bar to create new/custom sizes. Firebug is the Firefox elements inspector and is installed as an add-on.

Screenfly by Quirktools

 

Screenfly provides 27 views, including desktop, tablets, and cellphones. You can create custom sizes as well. There’s a nifty “rotate screen” option that will switch the view of the device from portrait to landscape (and vice-versa). The user-interface is simple, clean, and attractive.

Dimensions Toolkit

 

Dimensions Toolkit no longer exists as a simulator. Too bad, because it had a sleek user-interface and many view options. I think it evolved into this Google Chrome tool for measuring screen dimensions. If you find out more, please let me know!

StudioPress Mobile Responsive Design Testing

 

I often start my testing with the StudioPress tool simply because I use StudioPress themes nearly exclusively. It has 5 essential views (240px, 320px, 480px, 768px, and 1024px) based on width or device sizes.

Matt Kersley Responsive Design Testing

 

Quite similar to the StudioPress emulator in that it offers the 5 essential views and a toggle between width and device sizes.

isResponsive

 

isResponsive offers 10 essential views (including iPhones, iPads, and Androids), shows the bodies of the devices, and provides the media query syntax:

Media query:
@media screen and (min-width: 320px) and (max-width: 480px), (min-device-width: 320px) and
(max-device-width: 480px) and (orientation : landscape) {
/* CSS */
}

Responsinator

 

Responsinator is a simpler version of isResponsive, providing  a limited number of views, but they’re key ones, like iPhones, iPads, and Androids. You can also make custom sizes. Responsinator also shows the bodies of the devices, which helps visualize things.

More Responsive Tools

ViewLikeUS – Has a fantastic range of device views, including wide-screen televisions. However, I don’t like the header design, where the proximity of options is not compact enough.

Google’s online test will analyze a URL and tell you if it’s mobile-friendly: http://www.google.com/webmasters/tools/mobile-friendly/

General information about customizing a site for responsiveness: https://developers.google.com/webmasters/mobile-sites/website-software/

Your Responsive Tools

What tools do you use?!