MarcTV

Immer mehr Leute nutzen statt ihrem Computer lieber ihr Smartphone 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 Design, dass sich der gewünschten Breite des Geräts anpasst: responsive web design.

Responsive Web Design in Aktion

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 devices

via Anne 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.

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 */
}
@media screen and (min-width: 480px) and (max-width: 767px) {
  /* iPhone Landscape width: 480px */
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  /* iPad Portrait */
}
@media screen and (max-width: 1024px) {
  /* < iPad Portrait */
}
@media screen and (min-width: 1260px) {
  /* big screens */
}

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

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. Das habe ich über ein einfaches jQuery Script gelöst. 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.

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 so 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.

• Mehr Media Queries Beispiele – mediaqueri.es
• CSS3 media queries – webdesignerwall.com
• Responsive Web Design – A List Apart
• Kritische Auseinandersetzung mit den media queries – codecandies.de