Responsive Webdesign –
as easy as it sounds

TYPO3 Conference 2014


Sven Wolfermann | maddesigns

1993the web is born

first website

Web native features

Evolution in mobile web

2010 “We need a mobile site!”

2012 “Let's make it responsive!”

via @karenmcgrane

2014 “Holy crap!”

Responsive Webdesign

A List Apart now responsive

Responsive Webdesign

„Responsive Web Design is easy“

Desktop View

„Responsive Web Design is easy“

Mobile View

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

solves many things

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

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


understand the viewport

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

Blogpost about viewport (german)

HTML5 input fields

HTML5 input fields

Android Chrome vs iOS7

test native input styles

yay! easy… but be careful

Embrace touch


if ( touch ) {

  /* make touch friendly */

} else {

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



Fastclick (faster touch interactions)

Mobile first -› Content first!?

Content first

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


speaking of SEO

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

Design Planning

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

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


do you remember 2 years ago?

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

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

Slides: Responsive Workflow



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

many Gridsystems…

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

Blog-Post (german)

Pinterest column view

It’s easy to make a bunch of boxes responsive

RWD is more

Content Structure

switch content order with flexbox


Adaptive Content – Adaptive Map

Responsive Table

Blog-Post (german)

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

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


„Responsive Web Design is easy“

Overflow Tab Navigation

Content Navigation

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;


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

Sass rem() function


h1 {
  font-size: 1.5rem;

CSS (IE8-Fallback):

h1 {
  font-size: 24px;

more advanced Sass rem mixin

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


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

Viewport units full width image example

Web fonts

Web fonts in modern browser

wrong usage of webfonts = faux bold

Blog Post: „Webfonts how to” (german)

Web font loading performance

Web font loading performance

Webfont Loader – load web fonts async

for Typekit, Google, Fontdeck,, … and self hosted fonts

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

Web font Loader

CSS selectors for font events

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

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

Icon fonts

I  icon fonts!

Icon fonts fallback is hard

Blog post: bulletproof icon fonts

Font Awesome

Font Awesome is a full suite of 479 pictographic icons

Font Awesome / IcoMoon

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


pick your icons


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

my blog post (german)

Making SVGs responsive with CSS by Sara Soueidan

Responsive SVG Logo

<svg version="1.0" …>
    <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;

  <g class="logo"> …

SVG has it’s own animation

Responsive Images
a topic for itself…

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

Device (viewport width) optimized images

Image by @grigs

Responsive Image W3C solution

After 3 years we have a standardized solution

<picture> & srcset + sizes

resolution switching only - use srcset (+ sizes)

srcset=" large.jpg 1200w,
         medium.jpg 600w,
         small.jpg 360w"
sizes="  (min-width: 50em) 33vw,
         (min-width: 28em) 50vw,

srcset test

Responsive Images Art Direction Usecase

Responsive Images Art Direction


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

responsive iframe

responsive iframe

first step

img,iframe {
  max-width: 100%;

second step – fluid container

<div class="embed-container">

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


Picard Facepalm 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 :/


has some issues

Guy Podjarny's RWD performance tests

sites have nearly same weight on mobile as on desktop

Performance is our biggest issue


3rd Party Scripte

include one Facebook Like Button and one Youtube iframe

Image by @MattWilcox

1Mb fonly for Facebook and Youtube JS

Performance Tips