As a front-end developer(a web designer), you’re probably aware that it’s very good to always keep the word “responsiveness” in mind when handling the front-end development of a project.
Designing a responsive website or web application does not alone prove that you’re a pro at what you do; but also shows that you’re not an old version of a designer 😛 and that you care about visitors with smaller screen sizes. In case you’re new to front-end development:
Responsiveness in Web design is simply the ability of a Web page to easily respond and adapt to all screen sizes whether zoomed in or not. ASAP!
That’s my definition of Responsiveness in Web design. Of course that’s what it is!
You can make use of a cool front-end development framework like bootstrap to handle the responsiveness of a website or web application design project. After which you might have designed a website or web application you expect to be responsive, you can verify its responsiveness by happily lunching your Firefox browser.
Hold on…. Please ensure that you have version 38.0.8 of the Firefox browser or a newer version ‘cos I doubt it if the tool is available on older versions. So, after lunching the browser, click on the Open Menu icon at the toolbar
After the drop-down appears, scroll down to click on Developer and then click on Responsive view.
Now you can select or preferably type in the screen size you’d like to view the current web page on.
You can also capture the complete view of the web page with the screenshot tool.
Although you can just resize your browser to see the responsive view of the current web page instead of going through the process I explained, but “re-sizing-the-browser” method is actually useless when you need to view the web page on a screen larger than yours.
Feel free to press
You can repeat the same keyboard combination