RESPONSIVE WEB DESIGN

#webdev #beginners #tutorial #css

INTRODUCTION

Webpages can be viewed on a lot of devices. Some of these devices include the mobile phone, tablet and desktop. To be able to make your site look good on these devices, you need to know what a responsive web design is.

Responsive web design uses only HTML and CSS. This means if you have knowledge on HTML and CSS, you would be able to create a responsive webpage. Since the webpage display on a desktop or tv would not look good on a mobile device (would be too large to fit), the responsive web design helps us to give a display for every device the webpage is viewed on, to give users the best experience.

THE VIEWPORT

It is the user's visible part of a web page. Viewports vary with each device. It would be bigger on a computer screen than on a mobile phone. HTML5 brought about a method that would allow developers to take control of the viewport with the <meta> tag.

NB: In all your web pages, always include the viewport element in your code.

The viewport code:

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

📌 The width=device-width part of the code sets the width of the web page to follow the screen width of the device. So if it detects that the device being used is a tablet, the viewport would automatically set the width of the webpage to suit that of the tablet.

📌 The initial-scale=1.0 sets the zoom level when the page is first loaded by the browser.

THE GRID-VIEW

Many web pages are divided into columns (grid). Using a grid view comes in handy for developers. It makes it a lot more easier to place elements on the webpage. In so many tutorials, I always saw a lot of 'box-sizing:border-box' in the CSS codes, but I did not really get the concept till I learnt about the purpose of the grid-view. The concept of the grid view becomes helpful when you want to add columns to your webpage.

MEDIA QUERIES

Media queries is the @media rule in CSS. Even though the viewport is essential for setting the width for each device, stating the particular thing the webpage should do when it is viewed on a certain device make your site more responsive.
With the media queries, it uses specific width for each device. For example, if you want the background color of your webpage to be lets say green, on mobile view, the @media rule makes that possible. You can use these width sizes to design your devices;

📌 On extra small devices (phones, 600px and down);
@media only screen and (max-width: 600px) {...}

📌 On small devices (portrait tablets and large phones, 600px and up);
@media only screen and (min-width: 600px) {...}

📌 On medium devices (landscape tablets, 768px and up);
@media only screen and (min-width: 768px) {...}

📌 On large devices (laptops/desktops, 992px and up);
@media only screen and (min-width: 992px) {...}

📌 On extra large devices (large laptops and desktops, 1200px and up);
@media only screen and (min-width: 1200px) {...}

CONCLUSION

It is always best to get a basic understanding of the @media rule and the viewport. Understanding them better would allow developers to create better looking webpages on different devices. Thanks for reading!