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.
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.
 |
| 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. |
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 |
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! :)
website