The Best Mobile Emulators & Responsive Design Testing Tools
When creating a mobile or responsive web design, testing is imperative. It’s difficult to test your site on devices and screen sizes that you don’t have access to, so mobile emulators and online responsive testing tools can be invaluable.
in this post, we’ve listed some of the best online mobile emulators and responsive design tools to help you see what your design will look like on various mobile devices and screen sizes. We have also included a couple of services which test speed and validate mark-up, to help make sure your mobile design works well behind the scenes too.
**UPDATE** We have published a new post with a list of tools for testing responsive designs.
Pixmobi’s Mobile Phone Emulator - mobilephoneemulator.com
Created by Pixmobi, this emulator allows you to view your designs on 6 different phones, including the iPhone 4 and HTC HD 2. You can set the orientation of the device and even share the chosen configuration via email to remind yourself or a colleague of any bugs you might find. The emulator also tells you the default browser used by the devices as well as some useful technical information, such as the screen size in pixels and inches.
Opera Mini Simulator - opera.com/developer/tools/mini/
Opera Mini is the world’s most popular web browser and is used by over 130 million users, so making sure your site looks good and works well on this browser is crucial. Opera Mini is used predominantly in emerging markets and often on feature phones, as opposed to smartphones. This means that navigation is performed with the keypad instead of a touchscreen, which this emulator allows you to test.
Gomez Cross-Device Website Compatibility Test - gomez.com/cross-device-website-compatibility-test
This service from Gomez emails you a report detailing how your site looks on 4 different devices: iPhone 3GS, iPad, BlackBerry Storm 2 and Nexus One on Android.
Bolt Browser Emulator - boltbrowser.com/demo/
The BOLT Browser currently has over 1 million users and displays content in a desktop style layout. It also supports streaming of videos using Flash and HTML5. This emulator allows you to check your site’s design on a BOLT browser and test the navigation using a keypad.
Google’s GoMoMeter - howtogomo.com/en/d/test-your-site/#gomo-meter
The recently released How To GoMo site from Google contains a simple mobile emulator called the GoMoMeter, which also tells you your site’s speed and gives the site a score out of 4. The site also gives helpful advice for agencies who want to sell mobile services to clients.
iPad Peek - ipadpeek.com
iPad peek is a simple iPad emulator. Although it does show Flash elements in tested websites, which do not render on actual iPads, so be aware of this when using it.
Responsive Design Testing Tools
**UPDATE** We have published a new post with a more comprehensive list of tools for testing responsive designs – Read it here.
ProtoFluid - app.protofluid.com
ProtoFluid allows you to test your media query based designs on a variety of devices, including phones, tablets, computer monitors and TVs. You can test several sites at once and view them in pop-out windows too.
Matt Kersley’s Responsive Design Tool - mattkersley.com/responsive/
Matt Kersley, web designer and developer, has created a simple tool for testing responsive web designs. The emulator displays your site in 5 sizes: small phone, iPhone, small tablet, iPad portrait and iPad landscape.
Screenfly - quirktools.com/screenfly/
Screenfly by QuirkTools is a nice little responsive emulator with a choice of 25 devices and screen sizes, including 5 kinds of tablet.
Responsive Px - responsivepx.com
Responsivepx is a responsive emulator which helps you to find the breaking points in your designs so you can alter your media queries accordingly. You can change the test screen size pixel by pixel to see exactly where the problems in your site occur and it gives you the option to add or remove scrollbars too.
Validating & Testing
W3 Mobile Validator - validator.w3.org/mobile/
The W3 MobileOK Checker gives your mobile site a score out of 100% and then gives you a detailed report listing technical criteria which your site has failed against. This includes http requests, redirects, file sizes, markup etc.
MobiReady - ready.mobi/launch.jsp
mobiReady is a tool from dotMobi which uses W3C standards to test your mobile site. Tests include page and file sizes, redirections, pop ups, character encoding, use of stylesheets, image resizing etc. and it will also give you the estimated cost for a user to download the site in various different countries.
We hope you find these tools useful. If you know of any more that we have left out then please let us know in the comments and we will add them.
10 comments on “The Best Mobile Emulators & Responsive Design Testing Tools”
Pingback: The Best Mobile Emulators & Responsive Design Testing Tools | Bonnes Pratiques Web | Scoop.it