How to Make Your Webpage Responsive – The Easy Way

Again, this is more like an acclamation of of Kevin Powell – the online guru that teaches «how to make the web and how to make it look good while they [(we)] are at it». Here is his video on responsive design made easy. Here, in this article, I have concluded his tips as a list to have an easy and accessible place to look to whenever in need for it.

Let’s take a look on Kevin’s tips on how to make a webpage responsive.

1. Lay the HTML elements out considering the desktop version of your page

The desktop version is the most complicated version in terms of layout. For this reason, the structure of the HTML should be written considering this version. Doing it this way will yield you the least amount of and easiest css to write.

2. Write the css for the mobile view of your page first

Use the developer tools to take a look on your page in mobile view. You should design your page keeping it in this format first. Mobile designs are usually just the elements of the page stacked vertically on top of each other because of the lack of horizontal space (if you don’t have a mobile design, design it like that). Vertical layout is the inherent structure of the DOM, and this is why this way of doing it (writing the styles for mobile first) is what will give you the least amount of and easiest css to write.

3. Determine a breakpoint where the design starts to break

When you are satisfied with how your page looks for the mobile, start increasing the viewport width of your page. When the design starts to look bad, in some awkward place between the viewport width for mobile and the viewport width for tablet/desktop, consider this a breakpoint for which you will write media rules for.

4. Add media rules to the breakpoint to make it look good again when increasing the viewport

Tidy up where it gets messy on the page with styles that you put inside a media rule. This applies for the elements that you need to structure horizontally instead of vertically, especially. Do this exercise multiple times (adding a media rule when the design breaks), until you have met the desktop design specifications.

With these steps, you will end up with the result you want – a webpage that supports all viewport widths.