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
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.
Firefox Responsive Design View
Screenfly by Quirktools
Screenfly
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
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
StudioPress Mobile Responsive Design Test
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
Matt Kersley Responsive Design Test
Quite similar to the StudioPress emulator in that it offers the 5 essential views and a toggle between width and device sizes.
isResponsive
isResponsive 480×320
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 – iPhone 5 landscape
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?!
This is not my area of expertise, but you go girl! I am impressed with your abilities and inquisitiveness! I also loved seeing Monument Valley pastel. best, Ms. Yogapaint
Thanks for the nice summary of RWD emulators. I’ve been using ScreenFly but will try Google Chrome next. If you ever need to use data tables, see http://css-tricks.com/responsive-data-tables/.
Hi Debra, the css tricks for data tables look good. Thanks very much for sharing!
Nice blog!
Articles like this one make me want to share such useful and practical information with all of my friends.
Nice responsive Emulators will help me to convert website into responsive design. Really nice sharing Thanks
Great collection of responsive Emulators. It sounds something interesting, I will use these Emulators to convert my designs into responsive. Grateful for sharing.
As a developer retooling my site to be more responsive, this article was extraordinarily helpful.
The only thing I would like to see, and this is out of the control of the author, is more tools for developing. In other words, I have a page and want to try something just at my localhost. Only a few of the above tools can do that:
The Chrome development kit and Dimensions Toolkit
Have you tried Browser Stack? I think it may do what you’re looking for.
As an engineer retooling my site to be more responsive, this article was uncommonly useful.
The main thing I might want to see, and this is out of the control of the creator, is more instruments for creating. At the end of the day, I have a page and need to have a go at something exactly at my localhost. Just a couple of the above instruments can do that:
The Chrome advancement pack and Dimensions Toolkit
Here’s one
https://github.com/xcartmods/Responsive-Design-Previewer
Nice, Phil! I’ll definitely explore this one. Very efficient code. Provides a huge list of device options. I appreciate your sharing, thank you!
Really Good Useful & informative blog. Keep sharing