How to Make a Better Responsive Web Design – Full Guide

Table of content:

What is responsive design?

Responsive web design is a way of designing and building websites that ensures that they look and function well on any device, regardless of the screen size or resolution. This is increasingly important in today’s world, where people access the internet from a wide range of devices including smartphones, tablets, laptops, and desktop computers.

In order to create a responsive website, a designer must use a variety of techniques and technologies, including flexible grids, media queries, and responsive images.

Responsive web design and adaptive web design

Responsive web design (RWD) and adaptive web design (AWD) are two approaches to creating websites that are designed to work well on a wide range of devices and screen sizes. While both approaches aim to create a seamless and optimal user experience across devices, they differ in the way they achieve this goal.

Responsive web design involves creating a single layout that adjusts itself automatically to fit the size of the screen it is being displayed on. This is achieved using a combination of HTML, CSS, and sometimes JavaScript, with techniques such as media queries, fluid grids, and flexible images. The layout adjusts itself based on the width of the screen, and the content remains the same regardless of the device.

Adaptive web design, on the other hand, involves creating multiple fixed layouts that are tailored to specific screen sizes or devices. These layouts are created using media queries and are served to the user based on the device they are using. The content may vary depending on the device, with some content being hidden or shown based on the layout.

Some key differences between responsive web design and adaptive web design include:

• Flexibility: Responsive design is more flexible than adaptive design, as it can adapt to any screen size or resolution. Adaptive design is limited to the specific layouts that have been created, and may not work well on devices that fall outside of these ranges.

• Development time: Creating multiple fixed layouts for adaptive design can be time-consuming, as it requires more design and development work. Responsive design, on the other hand, can be more efficient, as it involves creating a single layout that adjusts itself to fit any screen size.

• Performance: Responsive design may have slightly better performance, as it avoids the need to load and switch between multiple layouts. Adaptive design requires the browser to load the appropriate layout based on the device, which can add some overhead.

Both responsive web design and adaptive web design have their own pros and cons, and the best approach will depend on the specific needs of the project.

Responsive building blocks

This section covers the fundamentals of responsive website designs and their different components.

Responsive images

Responsive images are images that are designed to automatically adjust their size and display characteristics based on the device and display size of the user. This is important because it allows images to be displayed optimally on different devices with varying screen sizes and resolutions.

There are several ways to implement responsive images in HTML. One way is to use the srcset and sizes attributes on the img element. The srcset attribute allows you to specify a set of images with different widths and the sizes attribute will enable you to specify the size of the image in relation to the viewport. The browser will then choose the most appropriate image to display based on the available space and the device pixel ratio.

Another way to implement responsive images is to use the picture element. The picture element allows you to specify multiple source elements, each with its own srcset and media attributes. The media attribute allows you to specify a media query, and the srcset attribute allows you to specify a set of images with different widths. The browser will then choose the most appropriate source based on the media query and the device pixel ratio.

Here’s an example of how you might use the srcset and sizes attributes to implement responsive images:

<!-- HTML, CSS and JS code coming your way! -->

<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" sizes="(max-width: 1000px) 100vw, 50vw" alt="A responsive image">

And here’s an example of how you might use the picture element:

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

It’s also a good idea to use the src attribute as a fallback for browsers that don’t support the srcset and sizes attributes or the picture element.

Flexbox layout

Flexbox is a layout mode in CSS that allows you to easily control the layout of elements within a container. It’s particularly useful for building flexible and responsive layouts.

Here’s an example of how you might use flexbox to create a simple two-column layout:

<div style="display: flex;">
  <div style="flex: 1; background-color: lightblue;">Column 1</div>
  <div style="flex: 1; background-color: lightgreen;">Column 2</div>
</div>

In this example, the outer div element is the flex container, and the two inner div elements are the flex items. The display: flex style tells the browser to treat the outer div as a flex container, and the flex: 1 style tells the browser to distribute the available space evenly between the two flex items.

You can also use the justify-content and align-items properties to control the alignment of flex items within the flex container. For example, you can use justify-content: center to center the flex items horizontally, or align-items: center to center the flex items vertically.

Here’s an example that demonstrates both of these properties:

<div style="display: flex; justify-content: center; align-items: center;">
  <div style="flex: 1; background-color: lightblue;">Column 1</div>
  <div style="flex: 1; background-color: lightgreen;">Column 2</div>
</div>

Grid layout

CSS Grid is a layout mode in CSS that allows you to easily create complex grid-based layouts. It’s particularly useful for building responsive layouts that can adapt to different screen sizes and devices.

Here’s an example of how you might use CSS Grid to create a simple two-column layout:

<div style="display: grid; grid-template-columns: 1fr 1fr;">
  <div style="background-color: lightblue;">Column 1</div>
  <div style="background-color: lightgreen;">Column 2</div>
</div>

In this example, the outer div element is the grid container, and the two inner div elements are the grid items. The display: grid style tells the browser to treat the outer div as a grid container, and the grid-template-columns: 1fr 1fr style tells the browser to create a grid with two equal-width columns.

You can also use the grid-template-rows property to specify the number and size of rows in the grid, and the grid-template-areas property to define the areas within the grid. For example, you can use the following styles to create a grid with three rows and two columns:

grid-template-columns: 1fr 1fr;
grid-template-rows: 100px 200px 300px;
grid-template-areas:
  "header header"
  "sidebar main"
  "footer footer";

You can then use the grid-area property to assign grid items to specific areas within the grid. For example:

<div style="display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 100px 200px 300px; grid-template-areas:
  'header header'
  'sidebar main'
  'footer footer';">
  <div style="grid-area: header; background-color: lightblue;">Header</div>
  <div style="grid-area: sidebar; background-color: lightgreen;">Sidebar</div>
  <div style="grid-area: main; background-color: lightyellow;">Main content</div>
  <div style="grid-area: footer; background-color: lightpink;">Footer</div>
</div>

Media queries and responsive breakpoints

A media query is a CSS feature that allows you to apply styles based on the characteristics of the device or environment that the page is being displayed on. This allows you to create responsive designs that adapt to different devices and screen sizes.

For example, a website needs to support both desktop and mobile devices might have the following breakpoints:

• A small breakpoint for phones (e.g. 320px)

• A medium breakpoint for tablets (e.g. 768px)

• A large breakpoint for desktop computers (e.g. 1024px)

At each of these breakpoints, the layout of the website might change to suit the dimensions of the display better. For example, the layout might switch from a three-column layout on a desktop to a single-column layout on a mobile device.

To implement responsive breakpoints in your design, you can use media queries in your CSS to apply different styles at different screen sizes. For example:

/* Default styles */
body {
  font-size: 16px;
}

/* Small breakpoint */
@media (max-width: 319px) {
  body {
    font-size: 14px;
  }
}

/* Medium breakpoint */
@media (min-width: 320px) and (max-width: 767px) {
  body {
    font-size: 16px;
  }
}

/* Large breakpoint */
@media (min-width: 768px) {
  body {
    font-size: 18px;
  }
}

Another example of a simple media query that changes the font size of a heading element based on the width of the viewport:

h1 {
  font-size: 20px;
}

@media (min-width: 500px) {
  h1 {
    font-size: 30px;
  }
}

@media (min-width: 800px) {
  h1 {
    font-size: 40px;
  }
}

In this example, the default font size of the h1 element is 20px. The first media query applies a font size of 30px to the h1 element when the viewport is at least 500px wide, and the second media query applies a font size of 40px to the h1 element when the viewport is at least 800px wide.

Media queries can also be used to apply styles based on other characteristics of the device or environment, such as the orientation (portrait or landscape), the aspect ratio, the resolution, and the color capability.

Here’s an example of a media query that applies a different background color to the body element based on the orientation of the device:

@media (orientation: portrait) {
  body {
    background-color: lightblue;
  }
}

@media (orientation: landscape) {
  body {
    background-color: lightgreen;
  }
}

Here are some more examples of media queries with multiple screen sizes:

/* Small screens (e.g. phones) */
@media (max-width: 600px) {
  /* styles for small screens go here */
}

/* Medium screens (e.g. tablets) */
@media (min-width: 601px) and (max-width: 960px) {
  /* styles for medium screens go here */
}

/* Large screens (e.g. desktop computers) */
@media (min-width: 961px) {
  /* styles for large screens go here */
}

You can also use media queries to apply styles based on the pixel density of the device, using the min-resolution and max-resolution media features. For example:

/* High-resolution displays */
@media (min-resolution: 300dpi) {
  /* styles for high-resolution displays go here */
}

/* Low-resolution displays */
@media (max-resolution: 150dpi) {
  /* styles for low-resolution displays go here */
}

And you can use media queries to apply styles based on the aspect ratio of the viewport, using the aspect-ratio media feature. For example:

/* Widescreen displays */
@media (aspect-ratio: 16/9) {
  /* styles for widescreen displays go here */
}

/* Portrait displays */
@media (aspect-ratio: 9/16) {
  /* styles for portrait displays go here */
}

Other responsive options to explore – pros and cons

– Using JavaScript to detect screen size and apply styles:

Pros:

• Allows for more fine-grained control over the responsive design.

• Can be used to create more complex and dynamic layouts that are not possible with media queries alone.

Cons:

• Requires a more advanced understanding of JavaScript.

• This may result in slower performance, as the JavaScript has to be run every time the screen size changes.

<style>
  .column {
    width: 50%;
  }

  .small-screen .column {
    width: 100%;
  }
</style>

<div class="container">
  <div class="row">
    <div class="column">Column 1</div>
    <div class="column">Column 2</div>
  </div>
</div>

<script>
  var container = document.querySelector('.container');
  var screenWidth = window.innerWidth;

  if (screenWidth < 768) {
    container.classList.add('small-screen');
  }
</script>

– Using a JavaScript library or framework with built-in responsive design support:

Pros:

• Provides a simpler and more declarative syntax for creating responsive designs.

• Can be easier to use and more efficient than writing custom JavaScript.

Cons:

• Requires learning a new library or framework.

• May not be as flexible as writing custom JavaScript.

Example (using React.js and the “responsive props” system):

import React from 'react';

function Columns({ xs, sm, md, lg }) {
  return (
    <div className="columns">
      <div className="column" style={{ width: xs }}>Column 1</div>
      <div className="column" style={{ width: sm }}>Column 2</div>
      <div className="column" style={{ width: md }}>Column 3</div>
      <div className="column" style={{ width: lg }}>Column 4</div>
    </div>
  );
}

export default function App() {
  return (
    <Columns
      xs="100%"
      sm="50%"
      md="33.3333%"
      lg="25%"
    />
  );
}

– Using the “vw” and “vh” units:

The “vw” (viewport width) and “vh” (viewport height) units allow you to specify sizes as a percentage of the viewport dimensions. This can be used to create a responsive design that adjusts the layout based on the size of the screen.

Pros:

• Simple and easy to use.

• Can be used to create a basic responsive design without any additional code.

Cons:

• Limited in terms of the control it provides over the responsive design.

• May not work well for more complex layouts.

Example:

.column {
  width: 50vw;
}

@media (max-width: 768px) {
  .column {
    width: 100vw;
  }
}

How to ensure your website will show properly across all web browsers

Follow these best practices:

1. Test your website on multiple devices and browsers: It’s important to test your website on as many different devices and browsers as possible to ensure that it looks and functions correctly. You can use tools like BrowserStack or CrossBrowserTesting to test your website on a wide range of devices and browsers.

2. Use responsive design techniques: By using responsive design techniques like responsive images, flexbox, CSS grid, and media queries, you can ensure that your website adjusts its layout and design to fit the dimensions of the viewport.

3. Use feature detection: Some features that are supported by newer browsers might not be supported by older browsers. To ensure that your website functions properly on all browsers, you can use feature detection to check for the availability of specific features before using them.

4. Use modern, well-supported technologies: It’s important to use modern, well-supported technologies when building your website, as these will be more likely to work correctly across different browsers. For example, using newer versions of HTML, CSS, and JavaScript will help ensure that your website functions properly on all browsers.

5. Use a framework: Using a framework like Bootstrap or Foundation can make it easier to create responsive designs across different devices and browsers. These frameworks provide a set of pre-designed, tested and responsive components that you can use to build your website.

CSS frameworks Bootstrap and tailwind – pros and cons

Bootstrap:

Pros:

• Widely used and well-documented.

• Provides a large number of pre-designed components and layout options.

• Easy to get started with, as it has a simple and intuitive syntax.

• Can be customized using the provided Sass variables and mixins.

Cons:

• This can result in a “generic” or “cookie-cutter” look, as many websites use similar Bootstrap styles.

• May require more code and overrides to achieve the desired custom look.

• Can be overkill for simple projects or those with limited design requirements.

Tailwind CSS:

Pros:

• Provides a large number of low-level utility classes for building custom layouts and styles.

• Allows for more flexibility and customization than pre-designed frameworks like Bootstrap.

• Encourages a functional and minimalistic approach to design.

• Has a smaller file size than Bootstrap.

Cons:

• Requires more setup and configuration than frameworks like Bootstrap.

• May require a steeper learning curve, as it uses a different syntax and approach than traditional CSS.

• May not be as well-suited for larger projects with more complex design requirements.

Ultimately, the choice between Bootstrap and Tailwind CSS (or any other CSS framework) will depend on the specific needs and goals of the project. Bootstrap may be a good choice for projects that need a large number of pre-designed components and a simple, intuitive syntax, while Tailwind CSS may be a better fit for projects that require more flexibility and customization.

Conclusion:

Responsive design is essential for creating user-friendly and accessible websites that can be easily viewed and navigated on a wide range of devices, including phones, tablets, and desktop computers. By using responsive design techniques and tools, you can ensure that your website looks great and functions properly on any device, providing a seamless and enjoyable experience for your users.

In conclusion, responsive design is an important aspect of modern web development that allows websites to adapt to the different devices and screen sizes that they are viewed on. There are several techniques and tools that can be used to create responsive designs, including responsive images, flexbox, CSS grid, and media queries.