Definition

ico50-responsiveBeim Responsive (englisch „reagierend“) Design handelt es sich um ein gestalterisches und technisches Konzept zur Erstellung von Websites, so dass diese auf die Bildschirmgrösse und Pixeldichte des benutzten Endgeräts (Desktop Monitor, Notebook, Smartphone, Tablet) reagieren können, wie auch auf das verwendete Format (Breit- oder Hochformat).

Benutzer Interaktion

Verschiedene Geräte werden verschieden benutzt. Während bei Desktops und Laptops Maus und Touchpad als Interaktionstechnik dominieren, werden Tablets und Handies per Touch bedient.

touchWeil Web Inhalte auf kleinen Geräten meist einspaltig dargestellt werden, ist es oft nicht möglich, den gesamten Inhalt einer Seite auf einem Bildschirm darzustellen, weshalb der Benutzer mit Wipe Bewegungen nach unten scrollt. Bis zu einem gewissen Punkt ist dies durchaus zumutbar, denn Wipen ist auf Smartphones eine Gewohnheit.

Ein anderer Unterschied ist das Klicken auf Desktops und Laptops und das Berühren auf Touchscreens. Während es für Maus/Touchpad die drei Zustände "berührt", "gedrückt" und "nach dem Klick loslassen" gibt, erkennt der Touchscreen nur "berührt". Somit sind zB. die klassichen Rollover Menüs nur für Nicht-Touch Geräte geeignet.

Flexibilität

Die Gestaltung muss flexible Layouts ermöglichen. Im Gegensatz zur Gestaltung von Printmedien, wo von einer gegebenen Mediengrösse ausgegangen werden kann, muss sich im Webdesign die Darstellung auf Endgeräten anpassen können.

Es gibt kein "fixes" Design mehr. Dies stellt hohe Anforderungen an die Gestaltung und das Vorstellungsvermögen. Layoutelemente selber müssen skaliert werden können. Mehrspaltige Layouts müssen auf kleinen Bildschirmen in ein-oder zweispaltige Layouts umgebrochen werden können.

Mehr dazu siehe auch responsive Layout Grids.

Technik

Die technische Umsetzung von Responsive Design geschieht auf mehreren Ebenen:

Der Viewport Tag, eine Zeile Code im Head (Meta) Teil eines HTML Dokuments, erlaubt dem User Agent (Browser), die gerätespezifische Skalierung der Inhalte und Schriften einer Website vorzunehmen:

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

Bei der Programmierung des Designs per CSS wird darauf geachtet, flexible, veränderbäre Layouts zu gestalten. Dieses CSS Beispiel zeigt, dass ein Layoutelement names "Wrapper", welches 1140px breit ist, auf niedrigere Grössen skaliert werden kann (dank der Eigenschaft "max-width"):

#wrapper { max-width: 1140px; }

Um die flexiblen Layouts  gerätespezifisch korrekt anzeigen zu können, werden oft sogenannte Media Queries (Schwellenwerte) innerhalb des CSS Codes eingesetzt.  Dieses Beispiel zeigt, dass bei einer Bildschirmbreite bis max. 800px das Element "wrapper" nun permanent 100% der Breite einnehmen soll:

@media screen and (max-width: 800px) {
#wrapper { width: 100% }
}