Responsive Web Design Tutorial

Immer mehr Leute nutzen statt ihrem Computer lieber ihr Smartphone und Tablet um im Internet Informationen zu finden. Je zugänglicher diese Informationen für den Besucher sind, desto höher ist die Chance, dass er die Seite nicht sofort wieder verlässt. Dazu gehört auch, dass er nicht erst den Text per pinch und zoom vergrößern muss, sondern dass dieser sich an das Display anpasst. Eine mögliche Lösung dafür ist ein Layout, dass sich der gewünschten Breite des Geräts anpasst: Responsive Web Design.

Video

Responsive Web Design – Media Queries

Wenn man mit einem modernen Browser auf MarcTV surft und man die Größe des Browserfensters verändert, dann ordnen sich die Elemente bezüglich ihrer Größe und Position neu an. Dies funktioniert grundsätzlich über die CSS3 media queries. Diese erlauben das Schreiben von Bedingungen für das Erkennen der Pixelbreite des Browserfensters direkt im CSS Code:

@media screen and (max-width: 320px) {
  #wrapper{
    width: 320px;
  }
}

Media Queries haben den Vorteil, dass man sie direkt im Stylesheet einsetzen kann und dass sie nicht mal Javascript benötigen. Und sie werden von allen modernen und vor allem von iOS und Android Browser voll unterstützt. Apple empfiehlt den Einsatz von Conditional CSS sogar explizit in ihrer Dokumentation.

Code to standards, not devicesAnne van Kesteren

Mobile Geräte und selbst Personal Computer entwickeln sich permanent bezüglich ihrer technischen Parameter wie Auflösung und Pixeldichte weiter. Dazu kommen noch Geräte wie der Amazon Kindle oder die Boxee Box, die bezüglicher dieser Eigenschaften über ihre eigenen speziellen Parameter verfügen. Sie haben aber eine Sache gemein: Die Bildschirmauflösung.

Das ist zwar kein Web Standard aber immerhin benutzt man dabei nicht User Agent um das Gerät zu identifizieren.

prezi-responsive
Prezi Präsentation zum Thema „Responsive Webdesign“

Responsive Web Design – Welche Auflösungen?

Dazu muss man wissen, dass z.B. ein iPhone im vertikalen Portraitmodus 320px Breite ausgibt und im horizontalen Landscapemodus 480px. Das liegt an der hohen Pixeldichte des iPhone und vergleichbaren Geräten. Deswegen wird einfach die reale Pixelbreite halbiert.

Bezogen auf Android, iOS und MacOS bin ich auf folgende media queries gekommen. Diese funktionieren auch für die von mir getesteten Androidtelefone sehr gut.

@media screen and (max-width: 479px) {
  /* iPhone Portrait width: 320px */

  html h1:after{
    content: "Weniger als 480 Pixel - iPhone Portrai)";
  }

  html #wrapper{
    width: 320px;
  }

}

@media screen and (min-width: 480px) and (max-width: 767px) {
  /* iPhone Landscape width: 480px */

  h1:after{
    content: "Weniger als 768 Pixel - iPhone Landscape";
  }

  html #wrapper{
    width: 480px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
  /* iPad Portrait */  

  html h1:after{
    content: "Weniger als 1024 Pixel - iPad Portrait";
  }

  html #wrapper{
    width: 768px;

  }

}

@media screen and (min-width: 1024px) {
  /* > iPad Portrait */
  html h1:after{
    content: "Mehr als 1024 Pixel- iPad Portrait oder Netbooks";
  }

  html #wrapper{
    width: 1024px;

  }

}

@media screen and (min-width: 1260px) {
  html h1:after{
    content: ">Mehr als 1260 Pixel - Normale Bildschirme";
  }

  html #wrapper {
    width: 100%;
  }
}

Wie man sieht, definiert dies Blöcke von CSS Anweisungen für verschiedenen Auflösungen. Darin kann man dann jeweils seine Styles für die entsprechende Auflösung anpassen. Nehmen wir an, ein Wrapper Element wäre vorher so definiert gewesen:

#wrapper{
  width: 960px;
}

Dann könnte man es so für die jeweilige Auflösung anpassen, in dem man den Style für Geräte mit einer Auflösung von max. 479px überschreibt:

@media screen and (max-width: 479px) {
  html #wrapper{
    width: 320px;
  }
}

Responsive Web Design – CSS vereinfachen

Wenn man so an die Sache heran geht, dann merkt man schnell, dass man am Ende redundanten Code vor sich hat. Für mein Theme habe ich einen ähnlichen Ansatz gewählt, wie bei meiner Inspirationsquelle informationarchitects.ch: Man arbeitet so weit es geht ohne explizite  Pixelangaben für alle Elemente, die man verändern will sondern nutzt den Wrapper, an dem sich dann alle Elemente ausrichten.

Dafür muss aber leider die im IMG Tag angegeben Pixelbreiten entfernt werden, damit man die Bilder mit CSS mit 100% in der Breite entsprechend justieren kann. Dafür habe ich mir ein einfaches WordPress Plugin geschrieben: MarcTV Remove IMG height. Die vollständige CSS Datei mit den css media queries ist deswegen recht überschaubar. Leider gibt es noch einige Sonderfälle durch Plugins weswegen ich dort teilweise Dinge per ! important überschreiben musste.

Responsive Web Design – Gleiches HTML für alle

Man sollte sich auch bewusst machen, dass das  HTML der Webseite immer gleich bleibt und nur die CSS Styles die Elemente beeinflussen. Dies steht im harten Kontrast zu einer eigenen HTML Version, die über den User Agent ausgeliefert wird. Deswegen sollte man sehr viel Zeit darauf verwenden, das HTML zu optimieren und sich gut überlegen, was man über die Template Engine in das DOM reinläd.

Definition des Viewports

<meta
name="viewport"
content="user-scalable=0, width=device-width, initial-scale=1, maximum-scale=1">
</meta>

Der viewport Tag mit den entsprechenden Attributen gehört in den head-Bereich der Webseite. Er steuert wie Geräte wie das iPhone und Android die Webseite initial darstellen. Bei allen anderen Browsern zeigt er keine Wirkung weswegen ich ihn permanent im Template einsetze.

  • user-scalable=0
    Der Benutzer kann nicht mehr Zoomen
  • width=device-width
    Die Breite des Viewports wird auf die interne Auflösung des Gerätes eingestellt. Dies muss nicht zwangsläufig die native Auflösung des Displays sein.
  • initial-scale=1
    Der Zoom wird auf den Standardwert gesetzt.
  • maximum-scale=1
    Der höchstmögliche Zoom wird auf den Standardwert gesetzt.

Schriftgröße in Prozentangaben

font-size: 100% ist nicht zu groß sondern entspricht egal auf welcher Plattform der Schriftgröße, die er Browser als normalgroß ansieht. Dies ist auf einem Mobiltelefon oder E-Reader unter Umständen in Pixel umgerechnet etwas völlig anderes als auf einem PC. Die Schriftgröße liegt hier im Blog ist je nach Auflösung sogar über 100% und wird bei über 1240px sogar auf 120% angehoben. So kann man auf auch großen PC Monitoren oder der Boxee Box die Texte angenehm lesen.

Linearisierung

Auf meinen Übersichtsseiten sind die Artikelbilder gekachelt in einem Raster angeordnet. Auf einem kleinen Display funktioniert das natürlich nicht mehr. Deswegen habe ich dort und an vielen anderen Stellen das Layout linearisiert. Alle Elemente laufen auf den schmalen Versionen deswegen untereinander. Das gilt auch für Label für z.B. das Kommentarformular und die Artikeltools unter den Artikeln. Meistens musste ich nur ein float: right gegen ein float: none austauschen.

Javascript

Manche Javascript-Features machen auf der kleinen Versionen keinen Sinn. Dazu gehören u.a. Scripte wie colorbox, für die ich eine Ausnahme einbauen musste:

if($(window).width() > 1023){
/* load colorbox(); and other stuff for non-mobile devices */
}

Fazit

Während man bei einer echten mobilen Ansicht in den Templates kleinere Bilder laden kann, so ist dies über den Ansatz über CSS nicht möglich. Im Blog werden immer die 960px breiten Teaserbilder geladen. Egal ob sie auf dem iPhone auf 320px skaliert werden oder nicht. Dadurch müssen deutlich mehr Daten übertragen werden als nötig. Eine Alternative für WordPress ist WP Touch, dass eine komplett eigene Oberfläche für Gesten von Touchdisplays läd.

Dafür ist die Technik ist verhältnismäßig einfach umzusetzen und zu pflegen. Bevor man eine eigene mobile Version der Seite mit eigenem Template erstellt, kann man diesen Task recht bequem im Frontend erledigen. Außerdem muss man so keine zwei Templates oder gar Plattformen pflegen. Es kommt natürlich auch stark auf die Größe und Anforderungen an die Website an. Gleichzeitig bleibt das Look-and-Feel der Webseite erhalten.

Der Hauptgrund für die Implementierung hier im Blog war aber, dass ich mittlerweile selber mehr auf dem iPhone surfe als auf einem normalen PC. Das mag vielleicht zuerst absurd klingen aber in meiner Freizeit habe ich eher die Zeit und ein iPhone bei mir um schnell Dinge auf Wikipeda nachzugucken oder auch mal einen Artikel aus meinem Feedreader oder Social Networks zu lesen. Und je mehr ich mit dem Mobiltelefon surfe, desto wohler fühle ich mich auf Seiten, die für mobile Geräte angepasst sind. Besonders bei Elementen, die eine Interaktion von mir erwarten wie Formulare. Deswegen musste eine konsistente mobile Version her. Deswegen konnte ich mir nichts einfacheres Vorstellen, als per CSS ein paar Media Queries dafür zu benutzen.

27 Antworten auf „Responsive Web Design Tutorial“

  1. Marc, ich fand diese Artikel extrem hilfreich und habe Stunden damit verbracht wunderlich an meinem Browserfenster rumzuzupfen. Was machen wir denn jetzt wo das iPad nen Retina display bekommen hat und ne besser Aufloesung hergibt als nen 27′ imac? (2048-by-1536 resolution)

    javascript? das ist doch nicht elegant. Just wondering.

    1. Interessante Frage. Bei Apple lief es in der Vergangenheit so: Das Retina Display vom iPhone 4 wird nicht wirklich über 960px selektiert sondern über 320px. Das steht auch im Artikel. Das hat Apple deswegen gemacht, um eine gute Abwärtskompatibilität zu ermöglichen.

      Ich gehe nun fest davon aus, dass dies bei den Browser auch Einzug halten wird. Wenn nicht, dann werden Prozentangaben wieder interessant. Besonders für Schriftarten wird das, wie hier im Blog, ja an anderen Stellen auch schon so gemacht. Das bedeutet aber auch, dass der Browser bzw. das OS bestimmen muss, was 100% sind. Jedenfalls müssen es viel mehr sein als bei einem normalen Display.

      Bei dem MacBook mit Retina Display, dass ich hier in Hamburg im Laden gesehen habe, waren die Webseiten tatsächlich viel zu klein. Jedenfalls im Chrome. Ich weiß nicht, ob Apple beim Safari so etwas wie „Mach alles 2 × so groß“ implementiert hat oder so etwas bald ins das MacOS integriert. Und wie sieht das dann bei Windows aus?

      Um es kurz zu machen: Ich halte es für den falschen Weg, wenn man über die Media Queries die Webseiten an die Retina Displays anpassen müsste. Letztendlich sollte man mehr Pixel pro Inch zur Verfügung haben und das sollte auch der Browser bzw. das OS automatisch umrechnen.

  2. Hallo Marc,

    wirklich super Artikel.
    Ich hätte mal noch eine Frage zu den Media-Queries.

    Du hast die ja oben alle aufgelistet. Meist verwendest du feste Breiten. (768px – 1023px verwendet 768px als Breite). Gibt es dafür einen Grund bzw. könnte man auch gleich 100% nehmen?

  3. Die Seite ist für mobile Geräte wirklich gut gelungen. Sowohl auf dem iPhone als auch auf dem iPad ist das Surfen entspannend. Offenbar hat die Auflösung keine Auswirkungen auf die Schriftgröße. Der Safari Browser erkennt den Unterschied. Retina Displays zeigen also keine kleinere Schrift an sondern nur schärfer.

    Ich hätte es auch kaum selber für möglich gehalten, aber das iPad Mini hat den PC zum Surfen abgelöst. Das Teil ist einfach handlicher, flexibler und schneller als ein PC.

  4. Vielen Danke dafür! Ich hab schon lange darüber nachgedacht die Website mittels responsive Webdesign bzw. responsive Webdesign anzupassen und wollte nicht unbedingt eine Marketing Agentur oder Typo3 Agentur beauftragen. Vielen Dank, bisher klappt alles super! (:

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.