Responsive Design

Worauf kommt es an?

Mark Howells-Mead

@mhmli                markweb.ch

Beim Responsive Webdesign … handelt es sich um ein gestalterisches und technisches Paradigma zur Erstellung von Websites, so dass diese auf Eigenschaften des jeweils benutzten Endgeräts, vor allem Smartphones und Tabletcomputer, reagieren können.

Dies betrifft insbesondere die Anordnung und Darstellung einzelner Elemente, wie Navigationen, Seitenspalten und Texte, aber auch die Nutzung unterschiedlicher Eingabemethoden von Maus (klicken, überfahren) oder Touchscreen (tippen, wischen). Technische Basis hierfür sind die neueren Webstandards HTML5, CSS3 (hier insbesondere die Media Queries) und JavaScript.

de.wikipedia.org/wiki/Responsive_Webdesign

«jeweils benutzte Endgeräte»

www.lukew.com

2010 - Browsererkennung mit Js

Media Queries

  • Erster Vorschlag: 1994
  • Erster Arbeit: 2000
  • Funktionale Version: 2001
  • Browserunterstützung: 2012
  • Heute: IE9+ (caniuse.com)
body {
    font-size: 1rem; /* 16px */
}

@media screen and (min-width: 64em) {
    html {
        font-size: 125%;
    }
}

Mobile first

There are more mobile internet users than desktop internet users; 52.7% of global internet users access the internet via mobile, and 75.1% of U.S. internet users access the internet via mobile.

hostingfacts.com/internet-facts-stats-2016

Mobile first

kleines tablett

grosses tablett

kleines laptop

Grosses laptop

Datenmengen

mobile

ipad

desktop

46 requests | 32KB transferred
46 requests | 374KB transferred
46 requests | 188KB transferred

SERVICE WORKER

46 requests | 300B transferred

Service Worker: drweb.de

46 requests | 636KB transferred
46 requests | 32KB transferred
46 requests | 32KB transferred

auflösung != mobilgerät

iPad Pro

2732 x 2048

13-Zoll

Acer EEE

1024 x 768

7-Zoll

Testing: Browser Stack

iMac

2560 x 1440

27-Zoll

Xperia Z5 Premium

3840 x 2160

5.5-Zoll @ 806 ppi

BIldauflösung vs. Dateigrösse

  • PC (2000): 72 dpi
  • Mac (2000): 96 dpi
  • iPhone 3S: 165 ppi
  • Fotoabzug: 300 ppi
  • iPhone 6: 326 ppi
  • xPeria Z5 Premium: 806 ppi
  • Scalable Vector Graphics (SVG)

Anwendung für das Gerät

Google Karten

Wahl eines Themes

Weitere Beispiele

SBB RCS - sbbrcs.ch - 2016

– Responsive Panel

– Responsive Typografie

Friendly Work Space ® - friendlyworkspace.ch - 2015

– Responsive Slider

– Responsive Images

Verkehrsclub - verkehrsclub.ch - 2012

– Bestehendes Layout umbauen

– Mobile Navigation

Mark Howells-Mead

@mhmli                markweb.ch

Responsive Design - worauf kommt es an?

By Mark Howells-Mead

Responsive Design - worauf kommt es an?

  • 1,681