Responsive Webdesign –
as easy as it sounds

TYPO3 Conference 2014

Sven Wolfermann | maddesigns

Web native features

flexible by default
no pixel perfection
unknown browser features
interactions
you can't control the flow of content

Evolution in mobile web

2010 “We need a mobile site!”

2012 “Let's make it responsive!”

via @karenmcgrane

Responsive Webdesign

Flexible grids
Fluid images
CSS3 media queries

Quelle Bild: http://macrojuice.com/

„Responsive Web Design is easy“

„Responsive Web Design is easy“

Ok, ok… I see. Not so easy…

Now: let’s Bootstrap all the things!

Responsive Web Design

solves many things

one URL, one code base, one deployment
all contents available (if not hidden)
Future friendly

Mobile first
Conception & technique

Mobile first design/conception

Smartphone first
Planning, conception, development with focus on mobile devices
Design planning for touch devices
concentrate on important content – wich content is important – imoprtant content first

Mobile first technique

all devices get the “smartphone view”
progressive enhancement
media queries from bottom up
Use newest techniques – Innovation
no degredation of the content, instead enhancement step by step

change border-box model

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

http://farm7.staticflickr.com/6022/5910326877_4e1ec3edb9_b.jpg

Viewport

understand the viewport

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

Blogpost about viewport (german)

HTML5 input fields

Android Chrome vs iOS7

test native input styles http://nativeformelements.com/

Embrace touch

Code-Example:

if ( touch ) {

  /* make touch friendly */

} else {

  /* oh just kidding, keep
    everything touch friendly  */

}

Fastclick

Fastclick (faster touch interactions)

Inspired by Brad Frost

Content first

Responsive Content manifest:
the smaller the device , the more important is it to put important content at the beginning of the page

Users consume our content in different ways...
RSS (Google Reader ^†1. Juli 2013, Feedly)
Readability, Instapaper
SEO‽

speaking of SEO

Google honored RWD, and shows an icon for mobile optimized websites in SERPs now

Google’s recommendations for building smartphone-optimized websites

What can we say about
the "user’s web"?

What can we say about the "user’s web"?

Nowadays we don't know how and where the user visits our website

we don't know the screen size
we don't know the browser capabilities
we don't know the connection speed

Design planning
aka „We need a design for desktop and iPhone.”

Breakpoints

do you remember 2 years ago?

320 Pixel - iPhone portrait
480 Pixel - iPhone 4 landscape
768 Pixel - iPad portrait
1024 Pixel - iPad landscape
1200 Pixel - bigger screens == desktop?
or iPad landscape == desktop?

Screen- (Device-)pixel vs CSS-Pixel (Video)

Breakpoints today

320 Pixel - iPhone portrait
360 Pixel - Androids – Samsung Galaxy S3/4/5/, Samsung Note 2/3/4, Google Nexus 5, HTC One, ...
600 Pixel - small tablets (7") portrait (Nexus 7, LG Pad G8.3)
1600 Pixel - larger screens, Smart TV?
1600 Pixel - damn, Toshiba AT330 13.3" Mega-Tablet
but wait for it…
568 Pixel - iPhone 5 landscape
383 Pixel - Nexus 4
375 Pixel - iPhone 6
414 Pixel - iPhone 6plus

HP Slate 17" Android Tablet (Display: 1920 x 1080 px)

http://stadt-bremerhaven.de/hp-slate17-zoll-android/

Let the content choose your breakpoints! Not Devices!

From waterfall to agile in 6 simple steps
by Daniel Mall

Video von der btconf

Clients sign off new deliverables:

Style guides and prototypes
Core content/functionality priority lists
Performance and UX budgets
Legacy browser support (in general - components support in detail)
Responsive images strategy

E-Mail von Superfriendly (Daniel Mall) zum Thema Kosten/Angebot

Source: Responsive Design is Hard/Easy! Be Afraid/Don't Worry!

Grids

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

many Gridsystems…

Example-Grid for “product view” width CSS floats

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

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)

Singularity Grid System Source

It’s easy to make a bunch of boxes responsive

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%;
}

Multi-Level Responsive Navigation ^*
^* works, but don't do that

Client: , Project: DHBW CAS, in Cooperation with: Spooner Web

Translation: if you have to develop a multi level responsive navigation, estimate the effort by level. 2 level = twice effort, 4 levels = 4x

prevent auto text-size adjusting

html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

prevent page zooming in input fileds

input, select, textarea {
    font-size: 16px; /* (1em) */
}

more about responsive typography (german)

Advantage for Responsive Web Design

body { font-size: 1em; }

@media only screen and (min-width: 600px) {
  body { font-size: 1.5em; }
}

@media only screen and (min-width: 750px) {
  body { font-size: 2em; }
}

@media only screen and (min-width: 1000px) {
  body { font-size: 2.5em; }
}

relative font size – rem

rem font size based on root element (<html>)

span {
  font-size: 1rem; /* 16px / 16px */
}

Attention! rem based on <html>
=> default mostly 100% => 16px!

html { font-size: 100%; } /* 16px */
body { font-size: 1em; } /* 16px */

Set font-size to 16px to be sure that rem base value is 16px. Some browsers have higher default values.

Sass rem() function

$base-fontsize: 16px;

@function rem($target, $context: $base-fontsize) {
  @if $old-ie == true {
    @return strip-units($target) * 1px;
  }
  @else {
    @return (strip-units($target) / strip-units($context)) * 1rem;
  }
}

Usage:

h1 {
  font-size: rem(24px);
}

Sass rem() function

CSS:

h1 {
  font-size: 1.5rem;
}

CSS (IE8-Fallback):

h1 {
  font-size: 24px;
}

more advanced Sass rem mixin
https://gist.github.com/maddesigns/6415889

vw, vh, vmin, vmax - 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;
}

viewport units simple example / blog post

Web fonts

Web fonts in modern browser

Blog Post: „Webfonts how to” (german)

Webfont Loader – load web fonts async

for Typekit, Google, Fontdeck, Fonts.com, … and self hosted fonts

<script>
WebFontConfig = {
  typekit: { id: 'xxxxxx' }
};
(function() {
  var wf = document.createElement('script');
  wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
    '://ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js';
  wf.type = 'text/javascript';
  wf.async = 'true';
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(wf, s);
})();
</script>

https://github.com/typekit/webfontloader

Web font Loader

CSS selectors for font events

.wf-loading
.wf-active
.wf-inactive
.wf-<familyname>-<fvd>-loading
.wf-<familyname>-<fvd>-active
.wf-<familyname>-<fvd>-inactive

h1, h2, h3 {
  font-family: sans-serif;
}

.wf-active h1, .wf-active h2, .wf-active h3 {
  font-family: "webfont", sans-serif;
}

Font Awesome

Font Awesome is a full suite of 479 pictographic icons

https://github.com/FortAwesome/Font-Awesome

Font Awesome / IcoMoon

If you only use a bunch of icons, strip down the files with icomoon.io

IcoMoon

save as font (or SVG)

save Kb!

SVG Icons (Sprites)

Blog post: SVG Sprites vs. Icon Fonts (german)

SVG – Scalable Vector Graphic

great for logos & Icons

<img src="img/SVG-logo.svg" width="100" alt="">
<img src="img/SVG-logo.svg" width="200" alt="">
<img src="img/SVG-logo.svg" width="300" alt="">

Responsive SVG Logo

<svg version="1.0" …>
  <defs>
    <style type="text/css"><![CDATA[
      @media screen and (max-width: 280px) {
        .logo-subline {
          display: none;
        }
      }

      @media print {
        .logo .logo-item1 {
          fill: #000;
        }
        .logo .logo-item2 {
          fill: #FFF;
          stroke: #000;
          stroke-width: 2pt;
        }
      }

    ]]></style>
  </defs>
  <g class="logo"> …

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

Responsive Images
a topic for itself…

Responsive Images [german]

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

http://httparchive.org/trends.php

Device (viewport width) optimized images

Responsive Image W3C solution

After 3 years we have a standardized solution

<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 test

Responsive Images: Use Cases and Documented Code Snippets to Get You Started

Responsive Images Art Direction Usecase

http://responsiveimages.org/

Picturefill

native support for picture/srcset: Chrome 38, Firefox 33, Safari 8, ...)

https://github.com/scottjehl/picturefill

responsive iframe

first step

img,iframe {
  max-width: 100%;
}

second step – fluid container

<div class="embed-container">
    <iframe
      width="640"
      height="360"
      src="https://www.youtube-nocookie.com/embed/9T7eSyo7DRU"
      frameborder="0"
      allowfullscreen>
  </iframe>
</div>

responsive iframe - Youtube

.container {
  max-width: 800px;
}

.responsive-embed {
  position: relative;
  padding-bottom: 56.25%; /* ratio16x9 */
  padding-top: 30px; /* youtube specific */
  height: 0;
  width: 100%;
  overflow: hidden;

  > iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

Flickr Example

moto.oakley.com

85.4MB page weight
471 HTTP requests
2 minutes 45 seconds until loading screen replaced with content
4 minutes 10 seconds until onLoad event

Oakley's monster page of baubles

85.4MB, 471 requests!

THIS IS NOT RWD!

moto.oakley.com fail

ok, ok, Oakley does it better now:
JUST 14.2MB, 291 request (more than 70MB less)

with mobile user-agent? 6.7MB, 114 requests :/

Oakley's Moto diet

RWD

has some issues

site tend to be too large for mobile
some content is hard to adapt: images, tables, ads, ...
IE8 doesn't understand media queries

Guy Podjarny's RWD performance tests

sites have nearly same weight on mobile as on desktop

Real World RWD Performance – Take 2

Performance

Reduce image payload (the biggest effect)
Reduce JavaScript and CSS payload
Further optimize based on feature detection

Lightening Your Responsive Website Design With RESS

3rd Party Scripte

include one Facebook Like Button and one Youtube iframe

1Mb fonly for Facebook and Youtube JS

GoogleMaps (ca. 700 KB)
Nuggad (ca. 78.4 KB) / Webtrekk (ca. 56.3 KB)

Performance Tips

use the best image size for every breakpoint
use GZIP + Caching
avoid redirect / unnecessary DNS request (prefetch requests)
compress CSS & JS
concatenate to useful chunks
load not onload relevant JS after DOMcontentLoaded or async
modularize JS and use a script loader (require.js)
optimize for “critical path” rendering

RWD is a lot of fun!
Thanks for your attention!
Sven Wolfermann | @maddesigns | maddesigns.de

Responsive Webdesign – as easy as it sounds

1993the web is born

first website

Web native features

Evolution in mobile web

2014 “Holy crap!”

Responsive Webdesign

A List Apart now responsive

Responsive Webdesign

„Responsive Web Design is easy“

„Responsive Web Design is easy“

Ok, ok… I see. Not so easy…

Now: let’s Bootstrap all the things!

„Responsive Web Design is easy“

„Responsive Web Design is easy“

„Responsive Web Design is easy“

Responsive Web Design

mobile first? desktop first?

Desktop first?

Desktop first?

Desktop first?

desktop first? NO! mobile first!

Mobile first Conception & technique

Mobile first design/conception

Mobile first technique

change border-box model

Viewport

HTML5 input fields

HTML5 input fields

yay! easy… but be careful

Embrace touch

Fastclick

Mobile first -› Content first!?

Content first

Users consume our content in different ways...

speaking of SEO

Design Planning

What can we say about the "user’s web"?

What can we say about the "user’s web"?

Design planning aka „We need a design for desktop and iPhone.”

Breakpoints

Breakpoints today

HP Slate 17" Android Tablet (Display: 1920 x 1080 px)

Android Devices

1024px desktop vs. iPad mini

Let the content choose your breakpoints! Not Devices!

Responsive Web Design Workflow

From waterfall to agile in 6 simple steps by Daniel Mall

Et voilà! Agile.

Clients sign off new deliverables:

E-Mail von Superfriendly (Daniel Mall) zum Thema Kosten/Angebot

Grids

Grids

Example-Grid for “product view” width CSS floats

Grids are fun!

fixed grid / fluid container

fully responsive

Grids with flexbox

Simple ordering with CSS

Grid systems with Sass – Singularity GS

Pinterest column view

RWD is more

Content Structure

switch content order with flexbox

Adaptive Content – Adaptive Map

Responsive Table

Navigation

„Responsive Web Design is easy“

Overflow Tab Navigation

Content Navigation

Multi-Level Responsive Navigation * * works, but don't do that

Typography

prevent auto text-size adjusting

prevent page zooming in input fileds

Advantage for Responsive Web Design

relative font size – rem

Sass rem() function

Sass rem() function

vw, vh, vmin, vmax - viewport relative units

Viewport units full width image example

Responsive Webdesign –
as easy as it sounds

mobile first?
desktop first?

desktop first?
NO! mobile first!

Mobile first
Conception & technique

What can we say about
the "user’s web"?

Design planning
aka „We need a design for desktop and iPhone.”

From waterfall to agile in 6 simple steps
by Daniel Mall

Multi-Level Responsive Navigation ^*
^* works, but don't do that

Icon fonts
(happydance)

Responsive Images
a topic for itself…

85.4MB, 471 requests!

THIS IS NOT RWD!