How to make Responsive Web Design – Best Practices

Responsive web design is an approach to web design that makes your web content adapt to the different screen and window sizes of a variety of devices. For example, your content might be separated into different columns on desktop screens, because they are wide enough to accommodate that design. But on smaller screens, such as mobile phones, the columns might stack on top of each other, or the content might be rearranged to fit the available space. This way, you can create seamless user experiences across devices, without compromising on the quality or readability of your content.

In this blog, I will share some of the best practices for responsive web design, based on the latest web standards and technologies. I will also show you some examples of responsive websites that follow these best practices.

Use CSS Grid Layout and Flexbox for Responsive Layouts

One of the most important aspects of responsive web design is creating flexible and fluid layouts that can adapt to different screen sizes and orientations. CSS Grid Layout and Flexbox are two modern CSS layout methods that can help you achieve this goal.

CSS Grid Layout is a two-dimensional layout system that allows you to create complex grid-based layouts with rows and columns. You can define the size, position, and alignment of grid items using various properties and values. You can also use media queries to change the grid layout based on the viewport size.

For CSS Grid Layout, you can see an example of how to create a responsive grid layout with three columns on large screens and one column on small screens using the following code:

Example:

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.item {
  background-color: lightblue;
  height: 200px;
}
<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

Flexbox is a one-dimensional layout system that allows you to create flexible layouts with flex items that can grow, shrink, and wrap according to the available space. You can control the direction, order, alignment, and spacing of flex items using various properties and values. You can also use media queries to change the flex layout based on the viewport size.

For Flexbox, you can see an example of how to create a responsive flex layout with a horizontal navigation bar on large screens and a vertical navigation bar on small screens using the following code:

.nav {
  display: flex;
  flex-wrap: wrap;
}

.nav-item {
  flex: 1 0 auto;
}

@media (max-width: 600px) {
  .nav {
    flex-direction: column;
    align-items: center;
  }

  .nav-item {
    width: 100%;
    text-align: center;
  }
}
<nav class="nav">
  <a class="nav-item" href="#">Home</a>
  <a class="nav-item" href="#">About</a>
  <a class="nav-item" href="#">Services</a>
  <a class="nav-item" href="#">Contact</a>
</nav>

Both CSS Grid Layout and Flexbox are responsive by default, meaning they will automatically adjust to the container size and the content size. They also have good browser support, so you can use them confidently in your responsive web design projects.

Here are some examples of responsive websites that use CSS Grid Layout and Flexbox for their layouts:

• The New York Times uses CSS Grid Layout to create a newspaper-like layout with multiple columns and sections. The layout changes depending on the screen size, with fewer columns and more rows on smaller screens.
• Spotify uses Flexbox to create a music streaming app-like layout with a sidebar, a header, and a main content area. The layout changes depending on the screen size, with the sidebar collapsing into a hamburger menu and the header shrinking on smaller screens.
• Airbnb uses both CSS Grid Layout and Flexbox to create a travel booking website-like layout with a search form, a map, and a list of accommodations. The layout changes depending on the screen size, with the map moving below the list and the search form becoming more compact on smaller screens.

Use Responsive Images and SVGs for Optimized Performance

Another important aspect of responsive web design is using images that can scale nicely to fit any browser size and resolution, while ensuring optimized performance and quality. Responsive images are images that have multiple versions for different screen sizes and resolutions, and are served to the browser based on the viewport size and pixel density.

To create responsive images, you can use the HTML <picture> element, which allows you to define different image sources for different media conditions. You can also use the srcset and sizes attributes on the <img> element, which allow you to specify a list of image sources and their corresponding widths or pixel densities. The browser will then choose the most appropriate image source based on its own calculations.

For responsive images, you can see an example of how to use the <picture> element to provide different image sources for different screen sizes using the following code:

<picture>
  <source media="(min-width: 800px)" srcset="large.jpg">
  <source media="(min-width: 400px)" srcset="medium.jpg">
  <img src="small.jpg" alt="A responsive image">
</picture>

SVGs are scalable vector graphics that are defined by XML code. They can be scaled up or down without losing quality or clarity. They are also lightweight and easy to manipulate with CSS or JavaScript. SVGs are ideal for icons, logos, illustrations, charts, and other graphics that need to be crisp and sharp on any device.

Here are some examples of responsive websites that use responsive images and SVGs for their graphics:

• [BBC News] uses responsive images for its news articles, with different image sources for different screen sizes and resolutions. The images are also lazy-loaded, meaning they are only loaded when they are in or near the viewport, which improves performance and saves bandwidth.
• [CodePen] uses SVGs for its logo, icons, buttons, badges, and other UI elements. The SVGs are styled with CSS variables, which allow them to change color based on the theme or mode selected by the user.
• [Dribbble] uses both responsive images and SVGs for its showcase of design projects. The images have multiple versions for different screen sizes and resolutions, while the SVGs are used for logos, icons, animations, and other decorative elements.

Use Media Queries and Breakpoints for Responsive Design

Media queries are a feature of CSS that allow you to apply different styles based on various media features, such as width, height, resolution, orientation, color, and more. Media queries are essential for responsive web design, as they enable you to create different layouts and designs for different devices and situations.

Breakpoints are the points at which the layout or design changes based on the media query. Breakpoints are usually defined by the viewport width, as it is the most common factor that affects the layout and design of a website. However, you can also use other media features to define breakpoints, such as height, aspect ratio, orientation, or even custom properties.

For media queries and breakpoints, you can see an example of how to use media queries to change the font size and color of a heading based on the viewport width using the following code:

h1 {
  font-size: 2rem;
  color: black;
}

@media (max-width: 600px) {
  h1 {
    font-size: 1.5rem;
    color: green;
  }
}
<h1>A responsive heading</h1>

There is no definitive rule for choosing breakpoints, as they depend on the content and design of your website, as well as the devices and browsers you want to support. However, a common practice is to use a mobile-first approach, meaning you start with the smallest screen size and then add breakpoints for larger screens. This way, you can ensure that your website is accessible and usable on any device, while enhancing the experience for larger screens.

Here are some examples of responsive websites that use media queries and breakpoints for their design:

• [Wikipedia] uses media queries and breakpoints to create a simple and clean design for its encyclopedia articles. The design changes based on the viewport width, with a sidebar appearing on larger screens and a hamburger menu on smaller screens.
• [Netflix] uses media queries and breakpoints to create a dynamic and engaging design for its streaming service. The design changes based on the viewport width, with more or less content being displayed on larger or smaller screens.
• [Amazon] uses media queries and breakpoints to create a functional and user-friendly design for its e-commerce platform. The design changes based on the viewport width, with different layouts and components being shown or hidden on larger or smaller screens.

Conclusion

Responsive web design is not a single technique or technology, but a combination of best practices and web standards that aim to create seamless user experiences across devices. By using CSS Grid Layout and Flexbox for responsive layouts, responsive images and SVGs for optimized performance, and media queries and breakpoints for responsive design, you can create responsive websites that are accessible, usable, and enjoyable for your users. I hope this blog has given you some insights and inspiration for your own responsive web design projects.

Thank you for reading! 😊