Resposive Web Design Testing Tools

Photo of Marykris de Leon
Modified Friday, March 1, 2013
Hi guys! Today we have a guest post from Marykris de Leon, you can find more about her at the end of the post, please read below!

Hello geeks! This is a quick guide on how you can test your responsive website without actual gadgets or devices. I personally recommend these tools for testing on devices such as smartphones, laptops, tablets, and TVs. We are going to have two categories: Browser Extensions and Online Tools.

Browser Extensions

1. Internet Explorer - You should have Microsoft Internet Explorer Developer Toolbar which can be downloaded on this link: Internet Explorer Developer Toolbar. After installing, you have to press F12 on your keyboard to use this tool.

EI Developer Toolbar. Click to enlarge.

2. Firefox - For Firefox users, you may use Firesizer which can be downloaded on this link: Firesizer. To use this, you have to enable your addon bar:

Enable Add-on bar for Firesizer. Click to enlarge.

Then on the add-on bar look for the Firesizer function which is located on the lower right corner of Firefox, you have to right click to customize the sizes.

Using Firesizer. Click to enlarge.

You may also try Responsive Design View on Firefox > Web Developer > Responsive Web Design or Ctrl + Shift + M for keyboard shortcut.

Firefox Responsive Web Design View. Click to enlarge.

3. Google Chrome - Chrome has Window Resizer, you can install this awesome Chrome extension from this link: Window Resizer

Google Chrome Window Resizer. Click to enlarge.

Online Tools

1. Screenfly - Allows you to enter your website URL and gives you many view options for testing such as Netbooks, Desktop, Kindle Fire, iPad 1-3/Mini, Nexus 7, Motorola Razr, Blackberry, LG optimus, Galaxy SIII, iPhones, and Television views (480p, 720p, 1080p). It also allows you to specify custom screen size and rotate the screen view. This is my favorite online testing tool.


2. Responsinator - Also allows you to enter your website URL (located on the upper left corner) and gives you the available views in one load which is kinda fast and convenient, you just have to scroll down. The available views is limited to iPhone (3,4,5), iPad, Kindle, and Samsung Galaxy. All has portrait and landscape mode.


3. Responsivetest- Also allows you to enter your responsive website URL (located on the upper left corner) and loads the view one at a time, depends on your device selection. Screens are limited to XGA, WXGA, iPad, Kindle Fire, iPhone and Android phones (320 x 240 and 515 x 295), also has landscape and portrait mode.

By the way, the example website we used in this post is this responsive web design live demo. The tutorial for coding a responsive website can be found here: Coding A Responsive Website Design.

Let us know in the comments what testing tools do you use? :)

About Marykris

Marykris De Leon is a professional Systems Analyst and Web Developer for the past three years. You can follow her on Facebook, Twitter and Google+
For FREE programming tutorials, click the red button below and subscribe! :)
Thanks for the comments!
"First do it, then do it right, then do it better."
~ Addy Osmani
"Talk is cheap. Show me the code."
~ Linus Torvalds
Let's Stay Connected!
g+ r
Android app on Google Play
© 2011-2014 The Code Of A Ninja. All rights reserved. Proudly Powered by Google Blogger. Images, logos, marks or names mentioned herein are the property of their respective owners.