Resposive Web Design Testing Tools

Last update: •Date posted:
COMMENTS•4 Comments/in /Posted by MIKE DALISAY

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.

Resposive Web Design Testing 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.
EI Developer Toolbar.

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.
Enable Add-on bar for Firesizer.

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.
Using Firesizer.

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.
Firefox Responsive Web Design View.

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

Google Chrome Window Resizer.
Google Chrome Window Resizer.

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.

Screenfly.
Screenfly.

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.

Responsinator.
Responsinator.

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.

responsivetest.net
responsivetest.net

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+

Hi! I'm Mike Dalisay, the co-founder of codeofaninja.com, a site that helps you build web applications with PHP and JavaScript. Need support? Comment below or contact [email protected]

I'm also passionate about technology and enjoy sharing my experience and learnings online. Connect with me on LinkedIn, Twitter, Facebook, and Instagram.