DEV Community

Cover image for Responsive Web Design
Klaudia Jaszczak
Klaudia Jaszczak

Posted on • Edited on

Responsive Web Design

RWD - Responsive Web Design

As a Front-End developer, I want to create websites that look good on all devices (mobile, tablets, large screens...). Some components will be universal for all devices. However, some of them require improvements so that the end-user is equally satisfied with the website on all their devices.

There are two approaches to creating responsive websites (good and ... not-good). 😄

  • The first approach is desktop-first the "not-good" one. By writing "not-good", I mean not recommended. But why❔
    In this approach, we build a website starting with large screens and then add code to handle increasingly smaller resolutions.
    When building websites for the desktop, we have more possibilities. We create websites full of content with beautiful animations, enriched with additional functionalities using modern technologies. Then we want to translate it all 1: 1 into smaller devices and then it turns out that it cannot be scaled this way. In such a case, the functionalities have to be cut down to the basic ones or we need to start looking for alternative solutions only to use them on the mobile version.

  • The second, "good" approach is mobile-first. This is the recommended approach for creating an RWD page. In this case, we first create a website for mobile devices and then move on to higher resolutions.
    Starting with creating a mobile website taking into account the available technologies, functionalities, and website readability for smaller resolutions - we do not have to give up anything in the next stages. Moving on - when adjusting the website for higher resolutions, all that remains is to expand the design. We can add something, thus making the website look or work even better. Thanks to this approach, we can be sure that the end-user using the mobile website will be as satisfied as the one using the website on the computer. 😊
    But to not make it sound too good to be true, it is worth adding a disadvantage of this approach. I believe it is more difficult to start creating the pages for mobile devices first and after that expand the website with additional functionalities. It is always easier to cut something off and give up something, but is it better? Probably not. 😏

I also post a short video of how I created a responsive website for the client.

RWD example

Top comments (0)