Designing
Responsive Grids
for the Web

In this lecture:

  • Mobile-First
  • The Viewport
  • Breakpoints
  • Content inventory

What is Mobile-First?

Assumptions

  • Mobile's most difficult to design
  • Different screen sizes requires decisions about content placement
  • Mobile serves up integral content

Application

Learn about some basic browser and device properties, and design strategies for web content:

  • Browser property: The Viewport and its meta reference tag
  • Device properties: Breakpoints / Device widths
  • Design strategies: Content planning, @media and @support queries

Viewports

What's the Viewport?

See the Pen Containing blocks and position properties by Chris Lindgren (@lndgrn) on CodePen.

Application

If responsive, use meta viewport tag: 

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

Breakpoints

What are Breakpoints?

Answer: The equivalent of the size of paper you use, i.e., the physical constraints of your canvas.

Example Breakpoints per Device

Device Breakpoints
iPhone 5/5s (portrait) 320x568px
iPhone 5/5s (landscape) 568x320px
iPad Pro (portrait) 1024x1366px
iPad Pro (landscape) 1366×1024px
Samsung Galaxy S5 (portrait) 360×540px
Samsung Galaxy S5 (landscape) 540×360px

Check out UXPIN's breakpoint cheatsheet.

Using BPs in CSS

To-be discussed next time, but here's a preview:

  • @media queries 
    @media (min-height: 500px) {
  header img {
    width: 100%;
  }
}
  • NEW @support feature queries. (Read Simmons.) 
    @supports (display: grid) {
   // Only applied if browser supports CSS Grid
 }

Good Design Involves Good Content-Planning

Content Inventory

Plan out your HTML structure, design, and its content:

Playing with a Grid Preview

  • Group up (2-3 ppl)

  • Open the following preview-grid/index.html file in your browser. Use your element inspector tool to start playing around with CSS Grid.

  • Refer to MDN's guide for different declarations and rule sets to try out in the grid container and items.