• Website Home
  • About
  • Services
  • Portfolio
    • Recent
    • Archives
  • Shop
    • Catalog
    • Order

ASK Design Blog

Designer | Artist | Teacher

  •  
    • Blog Home
    • Web Design
    • Graphic Design
    • Art
      • Licensed Art
    • Links
    • Calendar
    • Contact
      • Privacy Policy
      • Cookie Policy

    8 Awesome Responsive Web Design Emulators

    January 23, 2015 by ProfK 13 Comments

    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

    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

    Firefox Responsive Design View

    Screenfly by Quirktools

     

    Screenfly

    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

    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

    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

    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 480x320

    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 – 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?!

    Filed Under: Web Design Tagged With: mobile testing, responsive design, responsive tools

    Reader Interactions

    Comments

    1. Linda Novick says

      January 27, 2015 at 1:16 pm

      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

    2. Debra Jacobson says

      February 9, 2015 at 11:29 am

      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/.

    3. Anne says

      February 9, 2015 at 8:43 pm

      Hi Debra, the css tricks for data tables look good. Thanks very much for sharing!

    4. John Smith says

      March 4, 2015 at 4:42 am

      Nice blog!

    5. Damian Donovan says

      March 11, 2015 at 5:55 pm

      Articles like this one make me want to share such useful and practical information with all of my friends.

    6. Atif Asif says

      April 20, 2015 at 7:08 am

      Nice responsive Emulators will help me to convert website into responsive design. Really nice sharing Thanks

    7. Technocrab says

      July 17, 2015 at 5:17 am

      Great collection of responsive Emulators. It sounds something interesting, I will use these Emulators to convert my designs into responsive. Grateful for sharing.

    8. Robert Nichols says

      April 28, 2016 at 11:36 am

      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

    9. ProfK says

      April 28, 2016 at 5:58 pm

      Have you tried Browser Stack? I think it may do what you’re looking for.

    10. pooja says

      March 15, 2017 at 12:05 pm

      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

    11. Phil says

      March 23, 2018 at 10:36 am

      Here’s one
      https://github.com/xcartmods/Responsive-Design-Previewer

    12. ProfK says

      March 23, 2018 at 11:20 pm

      Nice, Phil! I’ll definitely explore this one. Very efficient code. Provides a huge list of device options. I appreciate your sharing, thank you!

    13. Cloudi5 Technologies says

      November 9, 2022 at 9:26 am

      Really Good Useful & informative blog. Keep sharing

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    This site uses Akismet to reduce spam. Learn how your comment data is processed.

    Primary Sidebar

    Affiliate Disclosure

    This website contains affiliate links, which means I may get a small commission (at no cost to you) if you use these links to make a purchase.

    Subscribe to Mailing List

    Sign up to get periodic updates on Anne's design and art adventures, and receive useful info. via her blog.
    * = required field

    We never share our email list with anyone.

    Looking for Something on this Site?

    Search the Web

    New Book Published!

    Kornegger book: Inside the Rainbow

    Art and design for book cover and interior

    Inside the Rainbow: Soul Connection in Nature, by Peggy Kornegger

    BUY THE BOOK!

    Peggy and I have completed our 3rd book together! This one is about soul connection in nature. Peggy is the writer, I'm the designer and artist. I think it's pretty darn special and hope you agree 🙂. Printed book and eBook are both available on Amazon.

     
    kornegger loseyourmind front cover
    Several of my paintings are in this book (including the cover)
    BUY THE BOOK!
     
    Check out my blog post about designing books: Self-Publishing Adventures

    Amazon Affiliate

    As an Amazon Associate I earn from qualifying purchases.

    Photo, Video & Design Software

    Affiliate Partners

    We receive compensation when you purchase a service or product via the links on this blog.

    Web Hosting

    StudioPress
     
    Bluehost Website Hosting

    Testimonials

    I received the notecards on Friday and it was on my to do list today to email you my deep appreciation for them. They are amazing and I am so glad to have them to share. I am sure I will order more in the future. You are such a gifted artist and I thank you for sharing in a way others can use the art.

    — Shari Spokes

    Your new pastel "Lettuce Lake” is really beautiful. Very, very nice.

    — Tony from Belmont, MA

    My dear sweet sister. I can’t tell you how much I love your pictures. I so much wanted something and was so sorry that I couldn’t pick something out at your sale. On the other hand, I so much wanted something that you had chosen for me. Its been on my mind and suddenly, your beautiful pictures arrived. They are beyond beautiful and I cried when I saw them. Sending you love and my bestness.

    — Marti from Reno, NV

    Copyright

    © 2000-2023 Anne S. Katzeff. All rights reserved. Unless noted, all artwork and text are copyrighted by the artist. Images may not be reproduced, manipulated, or used in any way without Anne’s written permission.

    Categories

    Graphic Design

    • AIGA
    • Design Is History
    • Janice Moore
    • Mass. Contractors

    Web Design

    • 978 Grid System
    • A List Apart
    • Adobe Color Tools (formerly Kuler)
    • AWWWards
    • Smashing Magazine
    • underthesite
    • www schools

    Tech-Computer

    • Adobe TV
    • Orramac
    • Teknoziz

    Comments

    In an effort to reduce spam, comments are restricted. Please email Anne if you have a comment or question that you are unable to post. Thanks for understanding.


    Archives

    Typography

    • 1001fonts
    • Adobe Type
    • Adobe Web Type
    • Bitstream
    • Dafont.com
    • Emigre
    • Font converter (free)
    • Font Spring
    • Font Squirrel
    • Google Fonts
    • I Love Typography
    • identifont
    • Typeinspire
    • Typewolf
    • Typoretum

    Photography

    • Creative Commons

    Footer

    Subscribe to Mailing List

    Sign up to get periodic updates on Anne's design and art adventures, and receive useful info. via her blog.
    * = required field

    We never share our email list with anyone.

    Contact

    Website
    Email

    Subscribe to RSS Feed

  •  ASK Design Blog
  • Connect and Share

  •  
  • Legal

    Privacy Policy
    Cookie Policy

    Copyright © 2023 · Optimal Theme · Built on the WordPress Genesis Framework· Customization and design by ASK Design