Responsive Design

Adapting your design across viewports

Responsive Web Design

Responsive web design refers to the ability of websites to adapt the presentation of content to a range of devices and media. Making a website responsive typically involves a number of strategies:

responsive meta tag
fluid layout
relative units
fluid images
media queries

Meta tag

Insert the viewport meta tag within the <head></head> of all your html pages. This ensures that the browser will register the physical width of the device’s screen as its screen width.

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

A Fluid Layout & Relative Units

A fluid layout often has:

a container element that fills the entire screen size
the container element responds to adjustments in browser widths
widths of the columns nested within the container get narrower, or collapse under each other accordingly

Remember CSS Size Units.

Fluid Images

Any embedded assets, such as images, videos, etc will need to scale appropriately. Usually, the image container has defined width. The image itself then has width: 100% to resize to fill its container. Alternatively, you can use max-width: 100%; to scale down if its container resizes, but would never scale up to be larger than its original size.

Your CSS


.container {
  width: 33%;
}

.figure img {
  width: 100%;
}

Your HTML


<div class="container">
  <img src="image.png">
</div>

Retina displays

72dpi (dots / inch, in this case pixels) used to be the standard for screen resolutions. But now with the introduction of mobile devices and retina screens, screen resolutions may be much higher. In order to have your images appear crisp on retina screens, you will need to provide higher resolution images (at least 2x large — resolutions are often 144dpi or above.) Many website prepare multiple versions of the same image so to load the best image resolution for that particular device and viewport.

Media Queries

Media queries are the crux of responsive design. They define the breakpoints at which different CSS rules are applied. Any CSS rule can be added or updated within these media queries. Typically, you will style your website for one viewport size, then apply overrides for the others. You can approach writing media queries in two ways.

Desktop-first, defining css rules for wide screens as default, and setting max-width breakpoints to go smaller
Mobile-first, defining css rules for narrow screens as default, and setting min-width breakpoints to go larger

Breakpoints and Responsive CSS

Breakpoints determine the browser widths at which new CSS rules apply, including how your containers will rearrange into a single column. Note: instead of relying on the latest device specifications, I would choose your breakpoints depending on the needs of your layout, using the inspector as a guide to test out different viewports. (Tip: turn on the ruler icon on your inspector.)

Sometimes you need to use both min and max
Collapsed columns: Block-level containers are rearranged according to the DOM (HTML structure). You may need to reconsider your HTML structure when you begin writing your responsive rules.
Collapsed menu
Scaled type sizes
Adjusted line-height
Adjusted paragraph widths (measure)
Shortened words, omitted items
Adjusted image sizes

Media Query Syntax

Media queries are written with the @media keyword, with max-width and/or min-width conditions specified within parentheses.


/* default styles */	
.container{
	width: 80%;
	margin: auto;
}
.grid{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

/* mobile styles */	
@media (max-width: 480px){ 
  .container{
    width: 100%;
  }
  .grid{
  	display: block;
  }
}

Note: nested braces, similar to @keyframe rules.

Screen and Print Media

You can also be specific about what kind of media—screen or print. This lets you easily style your webpage for printing-out.


/* mobile styles */	
@media screen and (max-width: 480px){ 
  .container{
    width: 100%;
  }
  .grid{
  	display: block;
  }
}	

/* print styles */	
@media print{ 
  nav{
  	display: none;
  }
}

Reference

Exercise

Make your styled text (from last week) or your web poster responsive. Commit your code to publish it into a live page, and try accessing it with your mobile device.