Who am I?

• CSS specification (co-)editor
  • Media queries level 3 and level 4
  • CSS Device Adapation
  • And few more (css-ui-3, css-ui-4, css-overflow, css-2015, css-egg, css-multicol-2)
• Not a web developer

What is responsive design?

Designing web content so that it works on any device, and adapt itself to provide the best experience possible given the caracteristics of the environement.

Responsive is nothing new

The first web site ever was responsive.

http://info.cern.ch/hypertext/WWW/TheProject.html

How did the web become non-responsive?

Beyond longform text documents

• Non responsive content: tables, images...
• Limited tools in early CSS for 2d layout: tables, floats, absolute positioning...

→ Rigid and fragile layouts on most sites

Mobile browsers and the layout viewport

Fixing the viewport

The viewport meta tag

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

If you want to know everything about viewports, PPK has a great presentation

@viewport

Alternative to the meta viewport in css

@viewport { width: auto; }

This is specified in CSS Device Adaptation

Support: Edge, IE>=10, IE Mobile>= 8, Opera Mobile 12, Opera Mini

@viewport { min-width: 980px; }

@viewport beyond mobile

It also works on desktop

@viewport { min-width: 500px; }
@media (min-width: 500px) {
  @-ms-viewport { width: 500px; }
  /* IE&Edge don't support @viewport’s min-width */
}

Media Queries

Simple media queries

Basic building block of responsive design

aside { float: right; }
@media (max-width: 500px) {
aside { float: none; }
}

Robust media queries

@media (width: 320px) { ... } /* iPhone screen width */

@media (max-width: 375px) { ... } /* iPhone 6 screen width */

@media (max-width: 500px) { ... } /* Size below which… */

@media (max-width: 45em) { ... } /* …your site would break */

Media Queries on SVG

Credit to Ana Sampaio

Fixing the layout

CSS 3 introduces expressive and robust new layout tools

• CSS Multi-column layout
• Flexbox
• CSS Grid layout

CSS Multi-column layout

Flexbox

CSS Grid layout

<div id="grid">
  <div id="title">Game Title</div>
  <div id="score">Score</div>
  <div id="stats">Stats</div>
  <div id="board">Board</div>
  <div id="controls">Controls</div>
</div>

#grid {
  display: grid;
  grid-template-areas: "title stats"
                       "score stats"
                       "board board"
                       "ctrls ctrls";
  grid-template-columns: auto minmax(min-content, 1fr);
  grid-template-rows: auto auto minmax(min-content, 1fr) auto
}
#title    { grid-area: title }
#score    { grid-area: score }
#stats    { grid-area: stats }
#board    { grid-area: board }
#controls { grid-area: ctrls }

Media Queries, revisited

Media types are dead ...

@media print { /* ... */ }

screen, print, handheld, projection, tv, ...

... long live media features

Example

@media screen {
  .menu ul { display: none; }
  .menu:hover ul { display: block; }
  a { text-decoration: none; }
  a:hover { text-decoration: underline; }
}

@media print {
  body { font-family: serif; }
  .js-ads { display: none; }
}

@media (width: 320px) /*iPhone*/ {
  button { min-height: 40px; }
} 

@media (hover) and (update) {
  .menu ul { display: none; }
  .menu:hover ul { display: block; }
  a { text-decoration: none; }
  a:hover { text-decoration: underline; }
}
@media (min-resolution: 2dppx) {
  body { font-family: serif; }
}
@media (scripting: none) {
  .js-ads { display: none; }
}
@media (pointer: coarse) {
  button { min-height: 40px; }
}