1993the web is born

first website

Evolution in mobile web

A List Apart now responsive

Responsive Webdesign

• Flexible grids
• Fluid images
• CSS3 media queries

Let’s Bootstrap all the things!

„Responsive Web Design is easy“

„Responsive Web Design is easy“

„Responsive Web Design is easy“

First of all -› change your workflow!

Responsive Webdesign Workflow

My Slides: http://maddesigns.de/responsive-workflow/

Slides from Patrick Lobacher:

Responsive Basics

change border-box model

*, *:before, *:after {
  box-sizing: border-box;
}

Viewport

understand the viewport

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

Blogpost about viewport (german)

Grids

Grids

Simple Grids: 50%, 33%, 25%, …

many Gridsystems…

Example-Grid for “product view” with CSS floats

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

Grids are fun!

fixed grid / fluid container

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

fully responsive

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

Grids with flexbox

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

Look ma, no media queries!

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

.card {
  flex: 1 0 250px;
}

Simple ordering with CSS

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

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

Grid systems with Sass – Singularity GS

• Unlimited Sass Grid System
• define your own grids
• independent from HTML
• asymmetric grids / responsive grids (3/6/12 columns)

Blog-Post (german)

CSS3 Columns

CSS3 Responsive Columns

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

Look ma, no media queries!

p {
  columns: 3 20em;
}

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

Pinterest column view

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

Responsive Layout with Aspect Ratios and Items spanning rows

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

Content Structure

Content Choreography - good old floats

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

Content Choreography - good old floats

Teaser

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

Look Ma! No media queries!!

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

switch content order with flexbox

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

Fallback: http://codepen.io/maddesigns/pen/sAjgo

Flexbox Order

Responsive Table

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

Blog-Post (german)

For third party widgets, sometimes you just have to to do…

table[width=“575px”] {
  width: 100%;
}

Viewport relative units

1vw = 1% of viewport width
1vh = 1% of viewport height
1vmin = 1vw or 1vh, whichever is smaller
1vmax = 1vw or 1vh, whichever is larger

Usage:

h1 {
  font-size: 5.9vw;
}
h2 {
  font-size: 3.0vh;
}
p {
  font-size: 2vmin;
}

Responsive Headline that always fills the screen

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

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

Fullsize image example

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

Fullsize image example

<article>
  <p>…</p>
  <div class="full-width">
    <img src="image.jpg">
  </div>
  <p>…</p>
</article>

article {
  max-width: 80em;
  margin: 0 auto;
}

.full-width {
  margin: 0 calc(-50vw + 50%);
}

Responsive Images

Average Web Page Site (2.4 Mb) 😢

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

Images majority of bytes per page – average ~1.5MB!

Device (viewport width) optimized images

Responsive Image Solutions

<picture> & srcset + sizes

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 Images without Image for Smartphone

Picture:

<picture>
  <source srcset="http://unsplash.it/640/360" media="(min-width: 640px)" alt="image only for screens up to 640px">
  <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="">
</picture>

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

srcset:

<img srcset="http://unsplash.it/640/360   640w"
     src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
     sizes="(min-width: 640px) 100vw, 0" alt="">

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

picture + object-fit + aspect ratios

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