Responsive UI: Testing Using Browser

Few days back I wrote a blog about how to make a website responsive. But how do you exactly check for responsiveness of a website? Well, you can do it using your browser itself. Both Mozilla Firefox and Google Chrome provides responsive mode for testing responsiveness of websites for standard resolutions and also to drag and check for any resolution.

Typically, there are four screen types:
  1. desktop,
  2. laptop,
  3. tablet, and
  4. smartphone.
These usually have certain standard resolutions which are provided in the browsers for you to test in.

Mozilla Firefox

Open your website in mozilla firefox. Then either right-click>inspect element or use the shortcut CTRL+SHIFT+i to open the inspect element. There at the right side of the top bar, you would find a button which you need to click to get to responsive mode.
Screenshot from 2016-07-09 00:11:28.png
After you have gone to responsive mode, it looks something like this:
Screenshot from 2016-07-09 00:14:27.png
As you can see, the website is now being shown at a resolution of 768 X 1024 resolution. You can click on the drop down to get other resolutions or also enter a custom resolution whichever suits your need. You can also drag and resize the container, to check for responsiveness.

Google Chrome

Google chrome browser also provides a similar feature. You need to open inspect element in google chrome in same way ( right-click->Inspect element ; or CTRL+SHIFT+i ). Then click on the button shown below.
After clicking on the button, you get something like this:
Screenshot from 2016-07-09 00:58:19.png
You can either select a preferred device from the dropdown or resize the container to check at various other resolutions.


Popular posts from this blog

iTerm + zsh + tmux for your MacOS

What to expect from GSoC?

What's the preferred unit in CSS for responsive design?