Free Important Tools That Every Webmaster Must Know 3 (Responsiveness)

9 Jan 2015

Free Important Tools That Every Webmaster Must Know 3 (Responsiveness)

By abhishek
9 Jan 2015
Tags: browser, chrome, how, tricks

Hope you had read previous two parts of "Free Important Tools That Every Webmaster Must Know". Part one was about Cross Browser Testing, and Part two was about Checking speed and Performance of a Webpage.
Now in part three, it is time to check Responsiveness of your website. if you are a webmaster, you know how responsiveness is essential in terms of your website's look in mobile, tablet and desktop of different screen sizes. well the easiest way is to resize your browser window, but then all browser/devices might not accept all your @media query
Out of my little knowledge i will share two methods with you, if you have other methods you can share via comment.

1. If you are chrome user, great news for you! Google Chrome has a inbuilt way of checking responsiveness of a web page.

Just press F12 or Ctrl + Shift + I via keyboard( for Mac press Cmd + Opt + I ), by this you will enter Developer Tools
or just go to Chrome menu

at the top-right of your browser window, then Tools> Developer Tools.

Now click Select Model at top left corner. There you will get a list of devices and notebooks in a alphabetical order

selecting any of the devices, browser will render the webpage for that device's display. Just for example i have used one of my previous post.

for learning more about chrome developer tool visit this website

2. Another is way is to go to this site: quirktools.com/screenfly/, just go and see. There is nothing to tell you about it, it is very easy to use. There you will get a lot of options like Desktop, notebook, tablets mobile, and other devices(Television etc) with large screen display.