Skip to main content

HTML Responsive Design: Techniques and Frameworks

Responsive web design is an approach to web design that ensures that web pages are easily accessible and viewable on a wide range of devices with different screen sizes and resolutions, such as desktop computers, laptops, tablets, and mobile devices.

The goal of responsive web design is to create web pages that are optimized for different devices and screen sizes, so that they look good and are easy to use, no matter what device they are accessed from.

For learn more about HTML responsive design, visit our CSS Responsive Design tutorial.

To achieve responsive web design, there are several HTML techniques that can be used:

  • Viewport meta tag: This is a meta tag that can be added to the <head> section of an HTML document, and is used to control the viewport width and scale on mobile devices.

As an example:

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

  • Media queries: Media queries allow you to specify different styles for different screen sizes and devices. They are written using the @media rule, and are typically placed at the end of a CSS stylesheet.

    As an example:

@media (max-width: 768px) {
  /* styles for screens up to 768px wide */
}

@media (min-width: 769px) and (max-width: 1024px) {
  /* styles for screens between 769px and 1024px wide */
}

@media (min-width: 1025px) {
  /* styles for screens larger than 1024px wide */
}
  • Responsive images: Images can also be made responsive using HTML techniques. One common approach is to use the srcset attribute to specify different image files for different screen sizes.

As an example:

<img
  src="large-image.jpg"
  alt="Large Image"
  srcset="medium-image.jpg 640w, small-image.jpg 320w"
/>

In this example:

  • This code will display large-image.jpg on screens larger than 640 pixels, medium-image.jpg on screens between 321 and 640 pixels wide, and small-image.jpg on screens up to 320 pixels wide

Responsive Images​

Responsive images are images that adapt to different screen sizes and resolutions, providing an optimal viewing experience for users on a variety of devices.

There are several HTML techniques that can be used to make images responsive, including:

  • The srcset attribute: This attribute allows you to specify multiple image sources with different resolutions or sizes. The browser can then choose the appropriate image based on the user's screen size and resolution.

As an example:

<img
  src="large-image.jpg"
  alt="Large Image"
  srcset="medium-image.jpg 640w, small-image.jpg 320w"
/>
  • The sizes attribute: This attribute specifies the size of the image container in CSS pixels, allowing the browser to choose the most appropriate image based on the available space.

As an example:

<img
  src="large-image.jpg"
  alt="Large Image"
  srcset="medium-image.jpg 640w, small-image.jpg 320w"
  sizes="(max-width: 640px) 100vw, 50vw"
/>

In this example:

  • This code will display the image at full width on screens up to 640 pixels wide, and at 50% width on larger screens.

  • CSS background images: If an image is used as a background image in CSS, you can use the background-size property to ensure that the image scales appropriately.

As an example:

.element {
  background-image: url("image.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}

In this example:

  • The background-size property is set to cover to ensure that the image covers the entire background of the element.

  • The <picture> element: This element allows you to specify multiple image sources for different screen sizes and resolutions, along with optional media queries to specify even more fine-grained control over which images are displayed on which devices.

As an example:

<picture>
  <source media="(max-width: 640px)" srcset="small-image.jpg" />
  <source media="(max-width: 1024px)" srcset="medium-image.jpg" />
  <source media="(min-width: 1025px)" srcset="large-image.jpg" />
  <img src="large-image.jpg" alt="Large Image" />
</picture>

In this example:

  • The browser will display small-image.jpg on screens up to 640 pixels wide, medium-image.jpg on screens between 641 and 1024 pixels wide, and large-image.jpg on screens larger than 1024 pixels wide.

Responsive Text Size​

Responsive text size refers to the technique of adjusting the size of text based on the screen size of the device being used to view the content. This is important because the same font size may be too small on a mobile device but too large on a desktop screen.

Here are some ways to create responsive text size:

  • Using the vw unit: This unit of measurement is based on the width of the viewport, which makes it ideal for creating text that scales with the screen size.

As an example:

h1 {
  font-size: 5vw;
}

In this example:

  • The font size of the h1 element will be 5% of the viewport width.

  • Using media queries: You can use media queries to apply different font sizes to different screen sizes.

As an example:

h1 {
  font-size: 3rem;
}

@media (max-width: 768px) {
  h1 {
    font-size: 2rem;
  }
}

In this example:

  • The font size of the h1 element will be 3rem for screens larger than 768px, and 2rem for screens up to 768px.

  • Using the calc() functionL This function allows you to perform mathematical calculations within your CSS code.

As an example:

h1 {
  font-size: calc(1.5rem + 1vw);
}

In this example:

  • The font size of the h1 element will be 1.5rem plus 1% of the viewport width.

Responsive Web Design - Frameworks​

Responsive web design frameworks are pre-built collections of CSS and JavaScript files that provide a set of design and layout elements for creating responsive web pages quickly and easily.

These frameworks are designed to make it easier for developers to create responsive designs by providing a pre-made set of rules and components that can be customized to fit the needs of their project.

Some of the most popular responsive web design frameworks include:

  • Bootstrap: Bootstrap is a popular open-source framework that provides a set of responsive design elements such as grids, forms, and navigation. It also includes a large library of JavaScript plugins for adding interactivity to your web pages.

  • Foundation: Foundation is another popular responsive web design framework that provides a set of customizable design elements, including typography, forms, and navigation. It also includes a library of JavaScript plugins and a grid system for creating responsive layouts.

  • Materialize: Materialize is a responsive design framework based on Google's Material Design guidelines. It includes a set of pre-built components such as forms, cards, and icons, as well as a responsive grid system and JavaScript plugins.

  • Semantic UI: Semantic UI is a responsive design framework that provides a set of pre-built UI components and styling for creating responsive web pages. It also includes a grid system and a library of JavaScript plugins.