Responsive Web Design Principles For Developers.

Responsive Web Design is a technique that relies heavily in the use of flexible structures and Media Queries to adapt a web page to the device its being displayed in.

You could say it's all about looking good, doesn't matter where it goes.

How can we achieve responsiveness?

One of its many wonders is that the site will do what it takes from resizing to hiding content, to make it look good on all devices. This is extremely important since majority of users access the web on mobile devices.

So, let's see ways we can do that.

Viewport meta tag

This sets the viewport of the page, that is the user's visible area. It looks like this:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

This will set the initial zoom and width of the page according to the device. But this by itself will not make a page fully responsive, we need the help of other tools at our disposal like Media Queries.

Media Queries

This will change the presentation of the content based on the different viewport sizes if it finds a match and will display that version of the site.

Keep in mind:

• Max-width: means from that width backwards all devices will be affected.
• Min-width: means from that width forward all devices will be affected.

@media only screen and (max-width: 620px) {
  .container {
    max-width: 100%;
   }
}

They provide you with such flexibility that you can display a completely different version of the same site just using Media Queries. They're also known as breaking points since your page 'breaks' on those screen sizes it's not prepared for.

You can also test for many others and multiple conditions, here we're seeing if the device matches our min-height and if it's in landscape mode, if so make the container's background green:

@media (min-height: 620px), screen and (orientation: portrait) { 
  .container {
   background-color: green;
   }
 }

Quite powerful, huh?

Mobile first approach

This is a very popular approach of building your projects, i have tried it before and trust me when i say it saves you a lot of time, my friend!

The concept here is that instead of building sites for desktop and adjusting it for smaller devices, you start working the other way around, starting from mobile and scaling it up to desktop, using Media Queries.

So, a handy Media Query for developing mobile first, along many others, would be:

@media only screen and (min-width: 768px) {...}

This approach will also make you focus more on the hierarchy of your content and how it is presented, forcing you to make it more readable on smaller screens first.

Images and text

For responsive images and text to scale appropriately to each device, one approach is to set a max-width value and a font size according to the viewport instead of using px.

img{
max-width: 100%; /* Scale it to fit its container*/
height: auto; /*For it to keep its original aspect ratio*/
}

h1{
font-size: 5vw;
}

You could also play with it and see what works best for you!

Take from this

Now, you don't want to fill your CSS file with media queries, try using a responsive layout method like CSS Grid or Flexbox to help you ease your page into responsiveness and use media queries to fill those breaking points you might encounter. You should find a way to mix the best of both worlds.

There are also many popular libraries that take the responsibility off your hands and take care of it, like Bootstrap but the choice is yours!

---

As always thank you SOOO much for reading!! :)

I really hope you learned something new today!

Don't hesitate to contact me and let me know what you think in the comments!

☕If you enjoy my content Buy me a coffee It'll help me continue making quality blogs💕

💙Follow me on Twitter to know more about my self-taught journey!

💜Make sure to check out more articles on my Web Design for Beginners Series

💜And if interested check out more articles on my JavaScript For Newbies Series

❤️ Also subscribe to my Youtube Channel !

🖤And for more content and tips on TikTok !