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 den Bildschirm anpasst. Eine mögliche Lösung dafür ist ein Layout, dass sich der gewünschten Breite des Geräts anpasst: Responsive Webdesign.
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 devices
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 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.
Responsive Web Design – Welche Auflösungen?
Besonders relevant ist dabei, 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 hervorragend.
@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 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 selbst 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 nachzusehen 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 aufseiten, 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.
Schreibe einen Kommentar