Skip to main content

Responsive Web Design – How to Create Responsive Web Apps

Responsive web design (RWD) means designing web pages to display nicely on the screen sizes you intend to support (mobiles, tablets, and desktops).

note

Responsive design is not a separate technology. It is a term for web layouts that look good and usable on various screen sizes.

Below are some features you can use to make your website naturally responsive.

Viewport Meta Tag​

Use the viewport meta tag in your HTML document's <head> element to render the webpage at its actual non-zoomed screen resolution.

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
  • The name="viewport" attribute specifies that the meta tag is for configuring the viewport.
  • The "width=device-width" value forces browsers to load web pages using the device's actual viewport width. This allows you to override any falsified viewport size with the device's real width.
  • device-width is equivalent to 100vw or 100% of the device's viewport width.
  • "initial-scale=1" tells browsers not to zoom in (or out) the viewport during the webpage's initial loading.

Dynamic Width​

Use dynamic width (like max-width=900px) to make elements flexible. Fixed dimensions, such as width=900px, prevent elements from shrinking below the specified size.

Note that you don't always need percentages for responsive design because:

  1. Most elements are naturally responsive to the viewport.
  2. Percentages do not help the aesthetic look of an element's margins as you change the screen size.

Responsive Layout Tools​

Use CSS Grid, Flexbox, or Multi-column to create responsive layouts.

For instance, the snippet below tells browsers to split the <article>'s content into multiple columns of 70px minimum widths.

article {
  column-width: 70px;
}

Try Editing It

Therefore, the computer will automatically calculate the number and size of columns the <article>'s width can fit.

Media Queries​

Use media queries to style your elements based on some specified tests.

For instance, the snippet below tells the browser to change the body element's background color from pink to cyan if the viewport has a 600px minimum width.

body {
  background-color: pink;
}

@media (min-width: 600px) {
  body {
    background-color: cyan;
  }
}

Try Editing It

Below are the viewport breakpoints developers often use.

Small devices (phones)​

@media (max-width: 640px) {
  /* ... */
}

Medium devices (tablets)​

@media (min-width: 768px) {
  /* ... */
}

Large devices (laptops/desktops)​

@media (min-width: 1024px) {
  /* ... */
}

Extra Large devices (large laptops/desktops)​

@media (min-width: 1280px) {
  /* ... */
}

Responsive Images​

Use the <picture> element or the <img>'s srcset and sizes attributes to recommend the appropriate images for different viewport sizes.

For instance, consider the following code:

<picture>
  <source srcset="mobile-size-couple.webp" media="(max-width: 600px)" />
  <source srcset="regular-size-couple.webp" media="(min-width: 600px)" />
  <img src="regular-size-couple.webp" alt="Couple" />
</picture>

Try Editing It

The snippet above provides metadata that hints browsers to display:

  • mobile-size-couple.webp on viewports having a 600px maximum width.
  • regular-size-couple.webp on viewports having a 600px minimum width.

Therefore, browsers supporting the <picture> element will choose the <source> element that best fits the user's viewport and display it in the <img>'s space.

However, browsers not supporting <picture> will fall back to the <img> element.

note
  • The browser will display the first <source> element whose media attribute evaluates to true. Or it will default to the <img> element if all the media attributes return false.
  • The traditional way of providing a large image and using CSS to scale it down for mobile devices wastes users' bandwidth by making them download unnecessarily large images intended for desktop viewports.

Overview​

This article discussed what responsive web design is. We also discussed some features you can use to make your web pages naturally responsive.

Your support matters: Buy me a coffee to support CodeSweetly's mission of simplifying coding concepts.

Tweet this article