Hilfreiche Tipps für ein nutzerfreundliches Responsive Design

Ein Responsive Design lässt uns mit Hilfe von HTML5 und CSS3 Media-Queries erstellen, wodurch die Inhalte einer Webseite einheitlich auf allen mobilen Endgeräten angezeigt werden können. Das Layout wird so flexibel gestaltet, dass es sich entweder dem Computer, dem Tablet oder dem Smartphone automatisch anpasst und uns so die Inhalte in einer für das Gerät gerechten Auflösung wiedergibt. Dadurch kann der Benutzer die Inhalte schneller aufnehmen und die gleichbleibende Benutzerfreundlichkeit auf den verschiede­nen Geräten bleibt gewährleistet.

Wenn man das Ganze näher betrachtet, war die Flexibilität einer Webseite ursprünglich immer schon gegeben. Öffnet man ein „nacktes“ HTML-Dokument, passt dieses, egal in welchem Brow­ser wir die Seite öffnen, den Inhalt automatisch an die Fenstergröße an. Jedoch wurde dem HTML-Dokument die Flexibilität zunehmend genommen. Da in den letzten Jahren mehr Wert auf das Aussehen einer Webseite gelegt wurde, benutzten viele Programmierer fixe Größen für das Layout. Ein grundsätzlich flexibles Layout verwandelt sich so in ein starres, nicht mehr variables Gebilde.

Da zu der Zeit nicht viele Ausführungen von verschiedenen Displaygrößen vorhanden waren, wurden die meisten Webseiten für gängige Monitorgrößen erstellt. Dabei nahm man in Kauf, dass auf kleineren Monitoren der Inhalt nicht mehr perfekt wiedergegeben werden konnte und vielleicht sogar einige Teile der Webseite abge­schnitten wurden, sodass der Benutzer horizontal scrollen musste, um den ganzen Inhalt sehen zu können.

Die Technologie schreitet immer weiter voran, somit auch die Vielfalt an verschiedene Monitorgrößen. Eine Standardmonitorgröße gibt es heute nicht mehr. Es lässt sich nicht mehr sagen, welche Monitorgröße am häufigsten genutzt wird. Es gibt Smartphones, die bei einer Bildschirmdiagonale von 2,5 Zoll anfangen, und den Desktop-Computer mit einer Bildschirmdiagonale von bis zu 30 Zoll. Auch die Fernsehrbild­schirme von Smart-TVs mit einer noch viel größeren Bildschirmdiagonale dürfen nicht vergessen werden.

Eine Webseite mit einer fixen Größe kann diese ganze Vielfalt an Display-Größen nicht mehr zufriedenstellend decken. Das Responsive Design ist hier eine Lösung, die uns einen besseren Zugang zu Informationsmaterialien verschafft.

Media Queries

Media Queries helfen uns dabei, die Webseite an die Umgebung des Ausgabegeräts an­zupassen. Im Rahmen der CSS-Interpretation kann man mittels Media Query abfragen, ob die Browserbreite über oder unter einem bestimmten Wert liegt. Je nach Ergebnis wird dann ein Stylesheet geliefert, welches zu diesen Bedingungen passt und dann einzelne Seiten­bestandteile umformatiert oder sogar ein- und ausblendet.

Die Media Queries fragen nach den Eigenschaften statt nach dem Ausgabemedium, also zum Beispiel nach der Browsergröße, der Bildschirmauflösung etc. So kann man ganz einfach die verschiedenen Geräte voneinander abgrenzen und relativ simpel unterschiedliche Styles für diese verschiedenen Geräte erstellen. Auch die Kombination von Media-Regeln und Media Queries ist hier möglich. Natürlich gibt es viel mehr Abfragen, die ein Entwickler setzen kann, doch meistens reicht die Abfrage nach der Maximal- und Mindestbreite vollkommen aus.

Das Einbinden eines Cascading Stylesheets erfolgt durch ein „link“-Element, wobei zu­sätzlich noch das „media“-Attribut angegeben werden sollte, damit man weiß, für welche Ausgabemedien die referenzierte Datei bestimmt ist. Wenn man also folgenden Code angibt

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

wird das Stylesheet „style.css“ nur geladen, wenn es sich beim Ausgabemedium um ei­nen Computerbildschirm handelt. Man kann darüber hinaus auch noch bestimmte Regeln innerhalb eines Stylesheets oder style-Elements für bestimmte Medi­en setzen. Mithilfe der At-Regel „@media“ kann darauf zurückgegriffen werden. Man kann also Elemente einer Seite, wie zum Beispiel den Header und den Footer, ausblenden lassen, falls der Benutzer die Seite ausdrucken möchte.

@media print {
div#header, div#sidebar, div#footer {
display: none;
}
}

Mit CSS3 Media-Queries können Webdesigner sogar überprüfen lassen, ob das Medium oder Ausgabegerät bestimmte Eigenschaften aufweist. Zum Beispiel wird das über link-Element eingebundene Stylesheet nur berücksichtigt, wenn das Ausgabemedium ein Bildschirm ist und die Breite von maximal 300 Pixel hat.

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

Dies kann direkt in der CSS-Datei noch besser an die verschiedenen Geräte angepasst und die Bereiche abgegrenzt werden. So lässt sich einstellen, wie sich die Webseite bei einem Gerät mit einer Mindestbildschirmbreite von 1024 Pixel, einer Mindestbildschirm­breite von 768 Pixel und einer maximalen Bildschirmbreite von 1023 Pixel oder einer maxi­malen Bildschirmgröße von 767 Pixel verhalten soll. Man bekommt eine klare Abgrenzung zwischen verschiedenen Größen.

@media (min-width: 1024px) {
/* breite Browserfenster */
}

@media (min-width: 768px) and (max-width: 1023px) {
/* Darstellung auf Netbooks */
}

@media (max-width: 767px) {
/* mobile Geräte */
}

Verknüpfung von Medientyp und -merkmal

Man kann desweiteren auch die Angabe von Medientypen und bestimmten Medien­merkmalen (sogenannte “Media Features”) miteinander verknüpfen. Dadurch entstehen logi­sche Ausdrücke.

@media screen and (max-width: 600px)

Das oben angeführte Beispiel besteht aus mehreren Teilen. Der Medientyp screen schränkt den Geltungsbereich auf Computerbildschirme ein. Durch max-width wird noch zusätzlich auf Bildschirmbreiten von bis zu 600 Pixel eingeschränkt. Durch den Begriff „and“ wird beides miteinander verbunden. Das Wort „and“ drückt ein logisches „Und“ aus. Damit die Me­dia Query hier „true“ (wahr) ergibt, müssen beide Bedingungen erfüllt werden. Erst dann wird das CSS in diesem Fall angewendet. Falls dies jedoch nicht zutrifft, sondern eine oder sogar beide Bedingungen nicht zutreffen, ergibt die Media Query „false“ und das CSS wird ignoriert.

Das “and” kann natürlich auch zwei Ausdrücke miteinander verbinden, wie beispielsweise

@media (min-width: 450px) and (max-width: 950px)

Hier muss der Bildschirm eine Mindestbreite von 450 Pixel und eine maximale Breite von 950 Pixel haben, damit das CSS angewendet wird.

Flexible Bilder im Responsive Design

Zu jeder Seite gehören auch Bilder. Ein normales Header-Bild für Desktop-Computer wäre jedoch auf ein Smartphone deplaziert. Man kann mit Hilfe einer einfachen Regel verhindern, dass ein Bild breiter ist als der umgebende Container und hinausragt:

img { max-width: 100%; }

So können die Bilder kleiner skaliert werden, sobald sich die Breite ändert.

Schlusswort

Responsive Design gewinnt immer mehr an Bedeutung durch die schnell voranschrei­tende Technologie. Es ist wichtig, die Webseite so optimal zu programmie­ren, dass diese sich auch weiterhin jedem Gerät gut anpasst und der Inhalt für den Benutzer angenehm lesbar ist. Da es sicherlich immer mehr Endgeräte geben wird mit den unter­schiedlichsten Bildschirmgrößen, sollte man großen Wert darauf legen, Responsive Design stetig zu benutzen.

Wie man sehen kann, gibt es noch viele Webseiten im Internet, die noch nicht unter die­sen Regeln programmiert worden sind. Man riskiert somit, dass der Benutzer beim Öffnen einer für sein Gerät nicht optimierten Seite die Lust auf das Lesen des Inhaltes verliert. Um dies zu verhindern, sollte das Thema Responsive Design nicht vernachlässigt werden.