Problem Statement

Nowadays, most people browse the web with their mobile devices such as phones, tablets and laptops.

Internet Usage

The standard for the user - is to interact with the sites - irrespective of screen size.

Front End Web Development - How?

When you develop mobile first, you start with a small screen, then make your way to a bigger one. You use your favourite browser on one size at a time.

Now when you start adjusting for a higher size, you want to make sure that there is no regression on the smaller screen, for example, you decrease the width of the button but this should still be full width in the smaller one.

Even when you start coding on bigger screens, you want to make sure that things are not breaking on other screen sizes.

One way to deal with this situation is to use multiple browsers or tabs to manually keep track of the changes.

This, however, can be hassle to track. Even if you use something like Hot Module Replacement, that is, when you save a file after a change, the browser reloads the page.

An excellent free tool that I've been using recently is Responsively.

Responsively

You can have multiple screen sizes in the same browser. This is even more helpful if you have a large screen for development.

Responsive.ly brings interesting benefits such as:

  • Open source
  • Preview target screens in a single window side by side
  • Existing dev-tools
  • One click screenshot of current screen sizes

There is also browser extensions if you don't want to download the app.