How can you test responsive websites for free?
There are many tools for PC as well as you can test your responsive website online also.
But if there is a way to to avoid those time consuming process and use a simple tool which doesn’t consume much of your valuable time – wouldn’t you want to know?
Yes you would want, there are ways with which you can test responsive websites within the browser without any interruption of going to another tab and loading an external website and then loading your website URL and so on.
Not only that you can test responsive websites – you can also test your Responsive html email newsletters as well!
Go through the tutorial here – How to create a responsive html email newsletter.
Now, you can do your testings in your comfort of your browser window itself. There are even shortcuts for that!
There are plugins available for browsers that allow you to test responsive websites within the browser and not the good thing is that you need not even reload your website which saves huge amount of time.
Nowadays, there are many browsers available in the market and some you might like and there are many you might not like according to your comfort. If you are a regular browser you might like Internet explorer because you might not have the knowledge that Internet explorer is called a browser and you there are other good browsers available in the market.
If you are a techie then, you should be aware of all major browsers available in the market. And, you might end up with linking a browser or two. Might be you like Firefox and Chrome as I do!
I have kept Firefox as my ‘The best browser‘. If you ask me why? – Its because, its developer friendly and flexible and many more goodness in it:-)
So, I love to debug websites using Firefox’s ‘Firebug‘ and test responsive websites using ‘Web developer‘ tool. Please see below for more information.
Getting you along to test responsive websites!
This plugin is exclusively for Firefox browser. Before you start testing your responsive website – you will need to install the plugin.
Open your Firefox browser and search for ‘Web developer addon for firefox‘ plugin OR click here ‘Install Web developer addon for firefox‘.
Once you have installed the addon – you are ready to go ahead and test responsive websites for the first time!
How to test responsive websites using web developer tool?
- Open your Responsive website in Firefox browser
- Click on Tools menu->Web developer->Responsive design view
- OR just press Ctrl+Shift+M
- You can test your responsive website on a list of screen sizes in the dropdown found within the tool.
You should then see your website browser turning out to be black by default and tool within the browser window and your website inside that tool!
The screen sizes in the drop down list are the standard screen sizes. You can however drag the outer boundary of the tool to change the screen size to your desired size
Below are few tests performed on my website using few screen sizes to show you how it works:
Pepfry.com – When viewed normally without any responsiveness
Pepfry.com - When viewed on 320X480 [iPhone Portrait orientation] screen size with the help of Web developer addon
Pepfry.com - When viewed on 480X320 screen size [iPhone Landscape Orientation] with the help of Web developer addon
That’s it guys, you can go ahead and test responsive websites for free for an unlimited time! You can test it on many such screen sizes of your choice.
If you have any queries, please do not hesitate to ask me or put it on the comment section below.
Please make sure that you also check the checkbox below the comments form [Notify me of follow-up comments by email]. So that you can get notified when I reply back to your comments.
Also, check the checkbox below the comments form [Notify me of new posts by email]. So that you are kept notified when I post a new tutorial or articles.