1993the web is born

first website

2010: Responsive Web Design

Responsive Web Design by Ethan Marcotte

• Flexible grids
• Fluid images
• CSS3 media queries

2017: Latest Tricks
(personal favourites)

Grids

Grid Example:

Responsive Product Grid

Using Bootstrap?

Example for “product view” with CSS floats

http://codepen.io/maddesigns/pen/poxsa

Goin’ further – grids are fun!

full responsive (fixed breakpoints)

http://codepen.io/maddesigns/full/yJdiL/

fixed grid / fluid container (without breakpoints)

http://codepen.io/maddesigns/full/EBlHd/

grids with flexbox

http://codepen.io/maddesigns/full/ogHuJ

Look ma, no media queries!

.grid {
  max-width: 1280px;
  display: flex;
  flex-wrap: wrap;
}

.column {
  flex: 1 0 250px;
}

• full responsive product grid
• same column height
• without media queries
• IE10+ (with prefix)

http://codepen.io/maddesigns/pen/FlBhd

Flexbox: Same height

Flexbox Ordering

…
@media only all and (min-width: 64em) {
  .recipe__tags {
    order: 6;
    width: 25%;
  }
}

@media only all and (min-width: 64em) {
  .recipe__image {
    order: 7;
    width: 75%;
  }
}

Final Example – Flexbox Ordering

Flexbox Button Bar

flexible button bar without media queries

same height centered button (link) text

http://codepen.io/maddesigns/pen/EyvXEZ

Responsive Table with Flexbox

scrollable tbody, pure CSS solution

http://codepen.io/maddesigns/pen/JEdjKj

HT: https://martinwolf.org/blog/2017/01/responsive-tabellen-nur-mit-css

Flexbox Fallbacks with display: table

http://maddesigns.de/flexbox-fallbacks-2670.html
https://kyusuf.com/post/almost-complete-guide-to-flexbox-without-flexbox

💥 NEW:
CSS Grid Layout

The new W3C standard for grid layouts

https://www.w3.org/TR/css-grid-1/ (Candidate Recommendation)

Flexbox vs Grid

Example Layout

http://gridbyexample.com/examples/ by Rachel Andrew

Grid Markup

<div class="wrapper">
    <div class="box a">.a</div>
    <div class="box b">.b</div>
    <div class="box c">.c</div>
    <div class="box d">.d</div>
</div>

Add Grid layout

new display property: display: grid;

.wrapper {
    display: grid;
    grid-template-columns: 33.334% 33.334% 33.334%; /* 3 columns */
}

Spanning grid cells

a {
    grid-column: 1 / span 2;  /* starts at col pos 1, span 2 cols */
    grid-row:    1 / span 1;  /* starts at row pos 1, span 1 row */
}

Spanning grid cells

.a {
    grid-column: 1 / span 2;
    grid-row: 1 / span 1;
}
.b {
    grid-column: 3 / span 1;
    grid-row: 1 / span 2;
}

DONE

Same height

Like flexbox grid cells are same height by default

“Table Layouts?”
🤔

12 column grid system (like Bootstrap) in a tweet ^*

^* with Sass 😉

— @rachelandrew

https://twitter.com/martirology/status/770668674294378496

More CSS Grid Goodies

Off-Grids

http://s.codepen.io/maddesigns/debug/GjKkAd

Can I Use CSS Grids?

Data on support for the css-grid feature across the major browsers from caniuse.com.

http://caniuse.com/#feat=css-grid

CSS3 Columns

text flows into columns

CSS3 Responsive Columns

set column-count for each breakpoint

@media (min-width: 40em) {
    p {
        columns: 2;
    }
}
@media (min-width: 60em) {
    p {
        columns: 3;
    }
}
@media (min-width: 80em) {
    p {
        columns: 4;
    }
}

Look ma, no media queries!

p {
  columns: 3 20em; /* max 3 columns, min 20em */
}

http://codepen.io/maddesigns/pen/EyNjBa

min-height Media Query

use column text only for larger screens to avoid scrolling up and down

@media (min-height: 35em) {
  p {
    columns: 3 20em;
  }
}

Look Ma! No media queries!!

Text/Image Teaser:

img {
  min-width: 50%;                    /* value to use above 400px */
  width: calc((400px - 100%) * 400); /* 400px "breakpoint" */
  max-width: 100%;                   /* value to use below 400px */
}

http://codepen.io/maddesigns/pen/KMNPRx

Viewport Units

Responsive Headline that always fills the screen

h1 {
  font-size: calc(4vw + 4vh + 2vmin);
}

https://codepen.io/CrocoDillon/pen/fBJxu

Responsive Fluid Typography

font-size: min 16px, max 24px between 400-800px viewport

h1 { font-size: 16px; }

@media screen and (min-width: 400px) and (max-width: 800px) {
  h1 { font-size: calc(16px + (24 - 16) * (100vw - 400px) / (800 - 400)); }
}

@media screen and (min-width: 800px) {
  h1 { font-size: 24px; }
}

Responsive Images

Average Web Page Site (2.6 Mb) 😢

A compressed copy of the Doom (1993) installer was 2.34 Mb

Images are majority of bytes per page ~1.6MB! 😱

Responsive Images
Long Story short…

whole info graphic

Device (viewport width) optimized images

Responsive Image Solutions

1. srcset + sizes
2. <picture>

resolution switching only -› use srcset (+ sizes)

<img
  srcset=" large.jpg 1200w,
           medium.jpg 600w,
           small.jpg 360w"
  sizes="  (min-width: 50em) 33vw,
           (min-width: 28em) 50vw,
           100vw"
  src="small.jpg"
  alt="alttext"
/>

srcset/sizes provides information to browsers

<picture> provides instructions to browsers.

<picture> – Art Direction Images and Type Switching

Responsive Images Art Direction

Fallback

picture/srcset has native support in all major browser

use respimage or picturefill for cross browser-support

Lazy Load Responsive Images

• lazysizes - lazysizes is a […] lazyloader for images (including responsive images picture/srcset), iframes, scripts/widgets and much more.
• Responsive Images – lazy loading - my blog about CSS for lazy loading images (german)
• WURFL Image Tailor (WIT) - Responsive Images as a Service

Responsive Pattern