Intro to Responsive Layouts

Learning Goals

  • Define the four page layout types and explain benefits and drawbacks of each
  • Apply media queries and explain how they provide the behavior they do

Vocabulary

  • Page Layout - The size and positioning of elements on a page. Examples are static, liquid, adaptive, and responsive
  • Media Query A CSS feature that makes it possible to apply styling based on boolean logic
  • Breakpoint The specific amounts that media queries reference (usually in pixels)
  • Viewport Meta Tag An html tag that is used to describe attributes that affect how the page is displayed

Introduction

About 49% of web traffic is generated by mobile devices. Our products lives online, so as developers it’s our responsibility to make sure that no matter how a user accesses our products, they are able to use them successfully.

A general understanding of responsive website design, how to use media queries, and when to add breakpoints so your page layout resizes nicely is a critical skill to have.

In this session, we’ll be diving into responsive page layouts and using media queries to control your page content at all screen sizes. This lesson assumes you are familiar with HTML and CSS fundamentals.

Page Layouts

Page Layout refers to the arrangement and sizing of visual elements on a web page. There are four primary page layout types:

Static Page Layout

  • A static layout is fixed width and sits in the center of the screen – it is the traditional web layout. It works on one screen size and one screen size only. It will fail on screens any amount smaller or larger than the original design.

Liquid Page Layout

  • A liquid (also called ‘fluid’) page layout uses relative units instead of fixed units (think percentages instead of pixels).
  • Liquid layouts fill the whole page, regardless of the screen or browser width. It’s an approach that doesn’t take as much thought and planning as other techniques, making it quick and easy to implement. However, this ease of implementation comes with major disadvantages. These layouts fail at screen sizes significantly larger or smaller than the original design.

Adaptive Page Layout

  • An adaptive layout uses CSS media queries to detect the width of the browser and make layout adjustments accordingly. Unlike liquid layouts, adaptive layouts use fixed units like pixels to define widths. They behave like a series of static layouts defined by specific media queries.
  • Because adaptive layouts typically take less time to build than true responsive layouts, they are a great option for quickly updating an existing static layout to make it compatible with mobile devices.
  • The primary drawback to this strategy is that screen widths that fall between the set breakpoints can feel awkward, with contents looking either too crowded or with far too much space.

Responsive Page Layout

  • At first glance, a responsive site looks a lot like an adaptive site. But start resizing your screen, and you’ll see why it’s the best solution. A true responsive page layout combines the best parts of a liquid layout and an adaptive layout to create the best experience for your users as they move between devices and screen sizes. By using both relative units and media queries, a responsive site allows us to transition through screen sizes seamlessly and effortlessly.

Explore Page Layouts

Take a few minutes to explore Liquidapsive. One by one, select each option from the drop-down in the top right corner. Change the screen width and observe what happens. Jot down any observations/learnings in your graphic organizer.

Media Queries & Breakpoints

We know we want to build a site that works well on a variety of screen sizes, but we keep talking about “media queries” and “setting breakpoints”. What does that mean?

Media Queries are a Boolean chunk of logic that lives in your CSS, and when you write a series of media queries you are creating a very basic algorithm. They control at what screen size specific styles will be applied. We will usually write these at the bottom of the CSS file they live in.

There are several different media types (all, screen, print, speech), but for our purposes we’ll primarily use screen. This indicates that the media query is intended for computer screens.

Breakpoints are the pixel widths the media queries reference. When the media query is true (i.e. when the screen size matches what is specified by the break point), the styles specified in that media query will be applied. It may seem natural to set breakpoints for certain devices; it’s actually best practice to choose a breakpoint when the layout of content needs to change.

Turn & Talk

Review the two media queries written below. Predict the result of this code. Be ready to share out!

@media screen and (min-width: 900px) {
  body {
    background: magenta;
  }
}

@media screen and (max-width: 700px) {
  body {
    background: teal;
  }
}

Above is an example of the syntax for a media query with a breakpoint set for screens 900px and larger. We also have a breakpoint set for screens 700px and smaller. When the screen size is 900px or greater, the body should have a magenta background. When it is 700px or less, it should have a teal background. When it is in between, it will be the background color specified in CSS or white, if it was not specified.

See the Pen Media Queries Demo by khalidwilliams (@khalidwilliams) on CodePen.

Viewport Meta Tag

Before we write any queries, you’ll want to add a viewport meta tag in the head of your main html file (which is often named index.html). This tag will make sure that our site works on devices. It is a frustrating surprise to find that your responsive site works locally and in device simulators, only to try it out on your phone and find out it looks terrible.

The viewport meta tag gives the browser instructions on how to control the pages dimensions and sets the width of the page based on the screen width of the device it is being viewed on. Magic! If you want to learn more, Mozilla has an article that’s full of good information.

Here’s what the tag looks like:

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

The content attribute in viewport meta tag shown above includes:

width=device-width
initial-scale=1

In more human terms, these say:

  • Width: Make the width of the page the same width as whatever screen it is being shown on.
  • Initial Scale: Controls the zoom level when the page is first loaded.

Practice

To build on your CSS skills and now practice working with media queries, complete this set of Responsive Layout Challenges.

Before you start to build out the HTML, familiarize yourself with all required layouts. Map out which boxes need to be grouped in containers in order to satisfy all required layouts. Then, start writing code!

Challenge/Early Finisher: Refactor this not-very-responsive site.

Documentation & Resources

Lesson Search Results

Showing top 10 results