Responsive Web Design

A responsive web design is one that is capable of adapting to different screen sizes, the system detects the width of the screen and from there it adapts all the elements of the page, from the font size, to the images and texts. Menus offer the user the best possible experience.

Below I'm going to share some basic tips to make a good responsive design.

Set the viewport

HTML5 introduced a method to let web designers take control over the viewport, through the <meta> tag.


You should include the following <meta> viewport element in all your web pages:

<!DOCTYPE html>
<html lang="en">
<head>
  …
  <meta name="viewport" content="width=device-width, initial-scale=1">
  …
</head>

This gives the browser instructions on how to control the page's dimensions and scaling on the base of the width of the device's screen.

In addition to setting an initial-scale, you can also set the following attributes on the viewport:

  • minimum-scale
  • maximum-scale
  • user-scalable

When set, these can disable the user's ability to zoom the viewport, potentially causing accessibility issues. Therefore, we would not recommend using these attributes.

Size content to the viewport

Responsive Web Design

If the user is forced to scroll horizontally, or zoom out to see the whole web page, it results in a poor user experience.

Percentage units will allow elements to be fluid. Setting minimum and maximum widths can be helpful, but don't go smaller or bigger than its container.

img {
 max-width: 100%;
 display: block;
}

Use Media Queries based on viewport size

Media queries allow us to create a specific style for different screen resolutions. In most cases, only three viewports are considered:

  • Mobile
  • Tablet
  • Desktop
Responsive Web Design

But there is a wide range of resolutions, so what this tells us is that we should consider all of them when thinking about responsive web design.

  • Smartphone/mobile–portrait
  • Smartphone/mobile–landscape
  • Tablet–portrait
  • Tablet–landscape
  • Desktop
@media (min-width: 576px) {
 .container {
   max-width: 540px;
 }
}
@media (min-width: 768px) {
 .container {
   max-width: 720px;
 }
}
@media (min-width: 992px) {
 .container {
   max-width: 960px;
 }
}
@media (min-width: 1200px) {
 .container {
   max-width: 1140px;
 }
}

Responsive Web Design

Make Layouts Flexible/Adaptive

Layouts should be flexible , they need to naturally adapt as the browser resizes.

Modern CSS layout techniques such as Flexbox, Grid Layout, and Multicol make the creation of these flexible grids much easier.

.container {
 display: grid;
 grid-template-columns: 1fr 3fr;
}
Responsive Web Design