Onjsdev.com - Author @onjsdev

@onjsdev

Share on TwitterShare on FacebookShare on LinkedInShare on Pinterest

How To Build a Responsive Website

Dec 28 2024

Did you know? As of the last quarter of 2023, mobile devices (excluding tablets) accounted for 58.67% of global website traffic. This statistics clearly shows that mobile has become the dominant means of accessing the internet worldwide.

Naturally, you wouldn't want your website to miss out on this significant source of traffic. Here, responsive design is indeed the key to making websites look good and function well on smartphones and tablets.

Understanding Responsive Web Design

Responsive web design is a development approach that adjusts website layouts and content dynamically to fit various screen sizes and orientations. This approach come various benefits including:

  • Enhanced User Experience: Smooth interaction on all devices.
  • Increased Reach: Cater to both desktop and mobile audiences.
  • SEO Benefits: Favored by search engines for improved ranking.
  • Cost Efficiency: Eliminates the need for separate mobile and desktop versions.

Essential Tools and Technologies for Responsive Web Design

To create a responsive web design, there are various elements that HTML and CSS offer. Below is a breakdown of some essential ones

Viewport

The viewport refers to the visible area of a web page on a display screen. It changes depending on the device's screen size, orientation (portrait or landscape), and resolution.

Without viewport control, mobile browsers often default to scaling down the page to fit it within the screen, which can lead to poor readability. In order to optimize your page for mobile and other devices, you need to control how it scales within the browser. This is done by using the viewport meta tag inside the <head> section of your HTML:

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

Here's what the parts of this tag mean:

  • width=device-width: Ensures that the width of the viewport is set to the device's width, preventing the browser from scaling the content.
  • initial-scale=1: Specifies the initial zoom level when the page is first loaded. The value of 1 means no zoom, meaning the content will be shown at the default size.

Other Properties You Can Add:

  • maximum-scale=1: Restricts the user from zooming in beyond a specified scale.
  • user-scalable=no: Prevents the user from zooming in or out on the page (can impact accessibility, so use with caution).
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Media Queries

It is not hard to say media queries are a cornerstone of responsive design. They enable the application of different styles based on the characteristics of the device.

The basic syntax of a media query looks like this:

@media [media_type] and ([condition]) {
  /* CSS styles go here */
}
  • [media_type]: Optional (such as screen, print, etc.). In most cases, it’s used for distinguishing between various types of media.
  • [condition]: Defines conditions for which the styles should apply, such as screen width, height, orientation, etc.

For example, the following quert applies styles when the viewport is less than or equal to 600px wide (common for mobile screens):

@media (max-width: 600px) {
  body {
    background-color: lightgreen;
  }
  .container {
    padding: 10px;
  }
  h1 {
    font-size: 24px;
  }
}

Here, when the viewport width is 600px or smaller, the styles defined inside this query apply, such as changing the background color and adjusting the text size and padding.

In other example, the query applies styles when the viewport width is between 601px and 1024px (common for tablets):

@media (min-width: 601px) and (max-width: 1024px) {
  body {
    background-color: lightblue;
  }
  .container {
    padding: 20px;
  }
  h1 {
    font-size: 32px;
  }
}

When the viewport width is between 601px and 1024px, these styles will apply to the device, adjusting the body background and text styles.

Lastly, this query applies styles for larger screens (more than 1024px wide), typically for desktops or large monitors:

@media (min-width: 1025px) {
  body {
    background-color: lightyellow;
  }
  .container {
    padding: 40px;
  }
  h1 {
    font-size: 48px;
  }
}

On screens wider than 1024px, the styles change again for a more spacious layout.

Layout with a Fluid Grid System

Using a fluid grid means the widths of columns and other layout components are set in relative units, like percentages, instead of fixed pixel values. This approach makes your layout elements dynamically adjust based on the viewport or parent container size, resulting in a more responsive and adaptable design.

We’ll start with a basic container layout where we will use percentages instead of fixed pixel widths for elements inside the container.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Flexible Layout using Percentages</title>
  <style>
    /* Flexbox Container */
    .container {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      padding: 20px;
    }

    /* Flex Items with Percentage-based Widths */
    .item {
      flex: 1 1 30%; /* Flex-grow, flex-shrink, and base width */
      box-sizing: border-box;
      background-color: lightblue;
      padding: 20px;
      border-radius: 8px;
    }

    /* Responsive Media Queries */
    @media (max-width: 1024px) {
      .item {
        flex: 1 1 45%; /* 2 items per row on tablet */
      }
    }

    @media (max-width: 600px) {
      .item {
        flex: 1 1 100%; /* 1 item per row on mobile */
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
    <div class="item">Item 6</div>
  </div>
</body>
</html>

The Flexbox items have a base width defined by flex: 1 1 30%, meaning each item will take up 30% of the container width. This enables flexible resizing based on the container’s width.

In addition, with the media queries, the grid adjusts:

  • At 1024px width or lower, the items switch to taking up 45% of the container, which results in two items per row.
  • At 600px or lower, each item takes up 100%, stacking them in a single column.

Responsive Images

Media elements in a website is cruical component for engaging content. Responsive images are essential for providing a good user experience across all devices.

Preserving Aspect Ratio

Maintaining a proper aspect ratio while adapting to different screen sizes is crucial. You can ensure your images scale appropriately by using the intrinsic approach, which respects the aspect ratio.

img {
  width: 100%;
  height: auto;
}

By setting width: 100% and height: auto, the image will fill its container while preserving the aspect ratio.

Using the srcset Attribute

The srcset attribute allows you to specify different image sources for different viewport widths or pixel densities. This allows the browser to choose the most appropriate image size for the device based on its screen properties (like resolution and size).

<img src="image-small.jpg" 
     srcset="image-small.jpg 600w, 
             image-medium.jpg 1200w, 
             image-large.jpg 1800w" 
     alt="A description of the image">

The browser selects the best image based on the screen width and resolution.

  • 600w: Image width of 600px (used for smaller screens).
  • 1200w: Image width of 1200px (used for larger screens).
  • 1800w: Image width of 1800px (used for even larger screens or higher-res devices).

Using the picture Element

The element is more advanced and allows more control over different image formats (e.g., WebP, PNG, JPEG), as well as better handling of images based on specific conditions like viewport size, orientation, and more.

<picture>
  <source srcset="image-small.webp" media="(max-width: 600px)" type="image/webp">
  <source srcset="image-medium.webp" media="(max-width: 1200px)" type="image/webp">
  <source srcset="image-large.webp" media="(min-width: 1201px)" type="image/webp">
  <img src="image.jpg" alt="A description of the image">
</picture>

It defines different image resources based on media queries, meaning that the browser will load the most appropriate image according to the display conditions (e.g., max-width: 600px). If none of the media queries match, the browser will load the img tag image as a fallback.

Responsive Typography

Instead of using fixed units like pixels (px), using relative units makes typography flexible and adjusts to different screen sizes and resolutions.

  • rem (Root em): This unit is relative to the font size of the root element (html). It's ideal for consistent scaling throughout the document.

1rem equals the base font size (typically 16px unless otherwise set). Example: font-size: 1.5rem; (This will scale up or down based on the root size).

  • em: This unit is relative to the font size of its parent element. It’s useful when you want to create nested scalability.

Example: If the parent has font-size: 2em;, then its child element would be font-size: 1.5em; (relative to the parent).

Conclusion

Responsive web design bridges the gap between different devices and users. With structured planning, proper tools, and continuous testing, anyone can build a responsive website. Start small and iterate—your audience will thank you for the seamless experience.