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. Open Event Organizer’s Server has quite some responsive issues, so I would tell about reporting the issues as well.
Typically, there are four screen types:
- desktop,
- laptop,
- tablet, and
- 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 inpect 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.
After you have gone to responsive mode, it looks something like this:
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:
You can either select a prefered device from the dropdown or resize the container to check at various other resolutions.
Reporting Issue
Visit the link http://open-event.herokuapp.com and browse through the entire website. Once you have found a responsiveness issue,
- Take a screenshot
- Go to https://github.com/fossasia/open-event-orga-server/issues/
- Create a New Issue with the screenshot in the description
- Label the issue with “Responsive UI”