Skip to main content

Lesson 5: Responsive Design Principles

Responsive web design ensures that web pages look good on all devices, whether it’s a phone, tablet, or desktop. The goal is to create layouts that adapt to different screen sizes, resolutions, and orientations.

1. Media Queries​

Media queries are a core component of responsive design. They allow you to apply different styles based on the screen size, orientation, or other characteristics of the device.

Basic syntax of a media query:

@media (max-width: 768px) {
  /* Styles for devices with a width of 768px or less */
  .container {
    flex-direction: column;
  }
}

In this example, the .container will switch to a vertical layout (using Flexbox) when the screen width is 768px or less, making it more suitable for mobile devices.

You can also target other screen characteristics, like:

  • min-width: Apply styles when the screen width is greater than or equal to a certain value.
  • max-width: Apply styles when the screen width is less than or equal to a certain value.
  • orientation: Apply styles based on screen orientation (landscape or portrait).

Example for targeting orientation:

@media (orientation: landscape) {
  .container {
    background-color: lightblue;
  }
}

2. Fluid Grids and Flexible Images​

Fluid grids are a flexible layout technique that uses percentages for widths rather than fixed pixel values. This allows the layout to scale according to the screen size.

Example of a fluid grid layout:

.container {
  width: 100%;
}

.column {
  width: 33.33%; /* Each column takes up one-third of the container */
  float: left;
}

With fluid layouts, images should also be flexible to prevent them from exceeding the width of their containers. This can be achieved using:

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

This ensures that the image resizes proportionally based on the container’s width, while maintaining its aspect ratio.

3. Mobile-First Design Approach​

In mobile-first design, you write your CSS to target small screens first and then use media queries to adjust the layout for larger screens. This approach ensures that the basic functionality and content are available on mobile devices, which often have more constraints, and progressively enhances the experience for larger devices.

Mobile-first example:

/* Base styles for mobile devices */
.container {
  width: 100%;
  padding: 10px;
}

/* Styles for tablets and larger devices */
@media (min-width: 768px) {
  .container {
    width: 75%;
  }
}

/* Styles for desktops */
@media (min-width: 1024px) {
  .container {
    width: 60%;
  }
}

In this example, the container takes up 100% of the screen width on mobile devices, but gradually reduces in width as the screen size increases, ensuring a better experience for tablet and desktop users.

4. Viewport Meta Tag​

To ensure proper scaling on mobile devices, it's important to use the viewport meta tag in the <head> of your HTML document. This controls the page’s width and scaling on different devices.

Example:

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

This tag sets the width of the page to the width of the device and ensures that the content is not zoomed out or too small to read.

5. Breakpoints​

Breakpoints are specific screen sizes at which the layout changes. Typically, breakpoints are chosen based on popular device widths. For example:

  • Mobile: 320px–480px
  • Tablet: 768px
  • Small Desktop: 1024px
  • Large Desktop: 1200px+

Example of using breakpoints with media queries:

/* Mobile styles (default) */
.container {
  width: 100%;
}

/* Tablet and larger */
@media (min-width: 768px) {
  .container {
    width: 75%;
  }
}

/* Desktop and larger */
@media (min-width: 1024px) {
  .container {
    width: 60%;
  }
}

Here, the layout adapts for mobile, tablet, and desktop screens using common breakpoints.