Mobiles Webdesign mit Media Queries

© Internet Magazin

Webdesigner mussten schon immer Seiten entwerfen, die in ganz verschiedenen Bildschirmformaten und -auflösungen einen guten Eindruck hinterlassen. Seit das Web auch durch die Augen der unzähligen Smartphones und Tablets gesehen wird, hat sich das Design-Problem potenziert.Die Lösungen dafür aber muss der Webdesigner nicht jedes Mal neu erfinden, sondern es gibt technische Rahmenwerke, die ihm viel Arbeit abnehmen. Eines davon heißt Media Queries, seit Juni ein W3C-Standard .Mit Media Queries optimieren Sie Seiten für mobile Endgeräte. Gleich zu Beginn werden viele Kenner einwenden, dass Smartphones und Tablet-PCs die Darstellung von Haus aus richtig regeln. Mobile Geräte folgen einer einfache Strategie, Websites darzustellen: Sie skalieren die Website einfach auf die zur Verfügung stehende Breite der Bildschirmfläche herunter.Allerdings bleibt hier die Benutzerfreundlichkeit der Website auf der Strecke. Bild- und Textelemente sowie Menüleisten sind so klein, dass man mit zwei Fingern auf dem Touchscreen in die Website hinein- und wieder herauszoomen muss.Das responsive Webdesign nimmt sich dieses Umstands an. Dem mobilen Internetnutzer wird auf seinem Gerät ein verändertes Design und Layout angeboten, am besten sogar maßgeschneiderte Inhalte.Genau genommen handelt es sich bei Media Queries um eine CSS-Erweiterung. Damit lässt sich, insbesondere via CSS3 und spezielle "@media"-Regeln, lässt sich eine Website für verschiedene Displaygrößen, Seitenverhältnisse und vor allem unter dem Aspekt der "Usability für mobile Endgeräte" optimieren. Adaptive Bilder mit Responsive Design

Das Design

"Don't shrink, rethink." Diesem Ansatz von Nokia folgend sollte man sich bereits beim Entwurf einer Website die entsprechenden Gedanken machen. Wie und was möchte ich in welcher Größe und Reihenfolge in mobilen Browsern darstellen? Man beginnt mit der klassischen Desktop-Version der Website.Dann sollte die Darstellung auf Tablet-PCs berücksichtigt werden - das Längs- als auch das Querformat (Portrait- beziehungsweise Landscape-Modus). Abschließend wird, gewissermaßen als Substrat, eine mobile Version für Smartphones überlegt. Im Design konvergieren die Gestaltungsmöglichkeiten gegen Unendlich.Einen sehr guten Überblick über aktuelle, aber auch anspruchsvolle Trends und Möglichkeiten des responsiven Webdesigns verschafft die Website mediaqueri.es. Praktisch ist beim Einsatz von Media Queries, dass eine Website durch einfaches Verkleinern des Desktop-Browsersfensters in der Breite gleich ihre Responsive-Qualitäten offenbart.Eine Überprüfung einer für Mobilgeräte optimierten Website nativ auf einem Tablet-PC oder Smartphone ist zwar nicht unbedingt notwendig; bei kommerziellen Projekten sollten Sie sie aber zumindest einmal prüfen. Die zahlreichen Beispiele von mediaqueri.es sollten aktiv durch Verkleinerung des Browserfensters durchgesehen werden.Das Augenmerk liegt dabei auf verschiedenen, sich verändernden Aspekten: Größe der Typografie, der Bildelemente beziehungsweise Grafiken und deren Verhältnissen zueinander, Art und Position der Menüleiste, ursprüngliches mehrspaltiges Desktop-Layout, Transformation schrittweise hin zu einem einspaltigen System für Smartphones.Auffällig ist auch die Veränderung beziehungsweise Komprimierung der Menüleisten. Gerade auf einem Smartphone sollten die einzelnen Menüpunkte groß genug, also leicht mit einem Finger zu bedienen sein. Jedoch möchte man den Smartphone-User nicht ausschließlich mit einer Menüleiste plus Logo begrüßen. Etwas vom eigentlichen Content der Website sollte schließlich auch gleich beim ersten Aufruf sichtbar sein.Eine Methode wäre, das Menü platzsparend komplett im Select- oder Dropdown-Stil (Ausklappmenü) darzustellen. Unter Umständen ist es auch sinnvoll, großformatige Aufmacherbilder im Kopf einer Website zugunsten aussagekräftiger und lesbarer Informationen ganz weggelassen. Wie Sie vorgehen, kommt ganz darauf an, welche Bedürfnisse Sie dem Betrachter der Website unterwegs mit seinem Smartphone unterstellen. Vermutlich ist in dieser Situation ein kurzer Text hilfreicher als opulentes Bildmaterial.Letztendlich hängen solche Entscheidungen aber von der Erwartungshaltung der anvisierten Zielgruppe ab. Form und Inhalt müssen also auch im Rahmen eines Responsive Webdesigns neu aufeinander abgestimmt werden. So sorgen Sie für zuverlässiges Scrollverhalten

Der Content

Es lassen sich keine pauschalen Aussagen zur sinnvollen und gesonderten Aufbereitung des Contents für Mobilgeräte treffen. Von der noch einigermaßen gut eingrenzbaren Zielgruppe abgesehen ist es unmöglich, die Vorlieben des Anwenders im Umgang mit dem mobilen Internet vorherzusehen.Der Nutzer eines Desktop-PCs oder Laptops wird in der Regel eher bequem an einem Schreibtisch sitzen und beide Hände für den Computer freihaben. Der spontane und flüchtige Einsatz eines Mobilgerätes an jedem denkbaren Ort, zu jeder Zeit und in jeder Situation macht hier den Unterschied.Es gilt die Herangehensweise für die inhaltliche Aufbereitung von Websites im Allgemeinen: Prioritäten setzen. Welche Merkmale und Angebote möchte ich dem (mobilen) Besucher meiner Website zuerst anbieten und welche sind eher sekundär? Und: Welchen Wert hat die dargestellte Information eigentlich für den Anwender?Für die letztendlich einspaltigen Layouts bei Smartphones kommt dieser Aspekt ganz besonders zum Tragen: Hier ist nicht viel Platz für zweideutige Experimente. Die Website eines Fotografen etwa bietet idealerweise zu Beginn ein paar Fotografien aus seinem Portfolio an.Die Website eines Journalisten kommt direkt zur Sache, indem sie einige aktuelle Publikationen zum Weiterlesen anbietet. Hier ist eine gut lesbare Typografie wesentlich; Bilder könnten dann in die Desktop-Version der Website aufgenommen werden, denn hier ist mehr Platz.

Die Technik

CSS2 bot bereits die Möglichkeit, durch "media types" bestimmte Medientypen anzusprechen. Bekanntestes Beispiel hierfür ist eine gesonderte Druckversion der Website, die überflüssige Hintergrundgrafiken, Menüleisten und so weiter beim Drucken einfach ausblendet.

© Internet Magazin

Media Queries greifen dieses Konzept auf. Jedoch wird hier nicht ein Stylesheet einem bestimmten Ausgabemedium zugeordnet, sondern es werden Eigenschaften und Fähigkeiten des Ausgabemediums automatisch erkannt und bedient. Funktional relevant ist hier die Abfrage der Breite und gegebenenfalls der Höhe des mobilen Browserfensters bzw. des Ausgabegeräts, auch dessen Lage beziehungsweise Position (Portrait oder Landscape) kann berücksichtigt werden.Relevant für responsive Weblayouts ist vor allem aber immer die Breite des so genannten Viewports. Die Abfrage der Bildschirmauflösung beziehungsweise der Pixeldichte wäre seit der marktreifen Einführung von Retina-Displays ein weiteres Kriterium. Dazu aber später mehr.Browserbedingte Darstellungsunterschiede, wie sie Entwickler vor allem vom Internet Explorer der Versionen 6 bis 9 her kennen, sind bei mobilen Browsern eher als marginal zu betrachten. Die Hard- und Software von Mobilgeräten wird seitens der Nutzer vergleichsweise viel häufiger erneuert als beim heimischen, geschweige denn firmeneigenen Desktop-PC. Insofern kann zunehmend so gut wie ohne Einschränkung das Potenzial von Media Queries ausgeschöpft werden.Als CSS-Erweiterung bearbeitet der Webdesigner das bereits vorhandene Stylesheet für Desktop-Browser um zusätzliche Media-Queries-Anweisungen. Wird nun eine Eigenschaft eines Geräts erkannt, überschreiben die Media Queries die voranstehenden Anweisungen für Desktop-Browser im Stylesheet.Die Abfrage beginnt einfach mit

@media only screen and (min-width:
176px) and (max-width: 600px) { ... }

In diesem Beispiel wird festgelegt, welche Viewports, also Bildschirmgrößen, gemessen in Pixeln von bis, bedient werden sollen. Zwischen den geschweiften Klammern fährt man nun in klassischer CSS-Schreibweise fort, die neuen Spezifikationen für vorhandene Container und Inhalte anzugeben.Für eine geringere Breite des Gesamtlayouts ab einer Viewport-Breite von 600 Pixeln bis hinunter zu 176 Pixeln sind alle mobilen Endgeräte, aber auch Desktop-Browser bedient. Die Gesamtbreite der Site, die Überschrift <h1> und in der gleichen Eigenschaft das Aufmacherbild skalieren sich automatisch mit. Ein Beispiel:

@media only screen and (min- width:176px) and (max-width:600px) {
#wrapper {width:95%;} <!-- Rahmen um die Homepage --> #header h1 {font-size:120%;} <!-- eine Ueberschrift --> #content img {max-width:100%; height:auto;} <!-- ein Bild --> }

Es zeichnet sich bereits ab, dass je nach Einsatzgebiet eine prozentuale Angabe vorteilhaft sein kann.Die Breite der Website, die Größe der Überschrift und das Aufmacherbild werden sich im Code-Beispiel immer automatisch dem Viewport-Größe anpassen - unabhängig davon, welche Ausgabegröße der Browser zur Verfügung stellen kann. Sollen nur mobile Browser bedacht werden, nutzt man statt max-width:600px einfach max-device-width:600px. Die Desktop-Variante der Website bleibt so von den Media-Queries-CSS gesteuerten Design-Änderungen in jedem Fall unberührt.Mehrspaltige Websites sollten auf einem Smartphone aus Platzgründen nur noch eine Spalte haben. Nebeneinander liegende Spalten werden üblicherweise durch die CSS-Anweisung float:left; und eine Breitenangabe positioniert. Media Queries lösen dieses Verhältnis auf, indem man schreibt:

#spalte1{float:none; width:auto;}
#spalte2{float:none; width:auto;}

Nun werden die zwei Spalten untereinander dargestellt und sie sind auch gleich breit.Das iPhone benötigt noch etwas Nachhilfe. In der HTML-Datei sollte im Kopf ein zusätzlicher Meta-Tag stehen:

<meta name="viewport"
content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" /><!-- Responsive Design iPhone -->

Es ist auch erlaubt, ein separates Stylesheet anzulegen. Die Einbindung in HTML lautet entsprechend:

<link rel="stylesheet" type="text/
css" media="only screen and (min-width:176px) and (max-width:600px)" href="style-device.css" />

Somit lassen sich übersichtlich für jede beliebige Viewport-Größe eigene, rein CSS-gesteuerte Designs erstellen. Ratsam ist das nicht. Schließlich sollte der zusätzliche Aufwand möglichst gering gehalten werden und dennoch ein möglichst breites Spektrum der Viewports gängiger und zukünftiger Mobile Devices abgedeckt werden.