Responsive Design

Worauf kommt es an?

Mark Howells-Mead

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

em/rem/px für Media-Queries

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