Die Nutzung des Internet mit mobilen Endgeräten steigt stetig und hat seinen Zenit noch nicht erreicht. Was liegt da näher, als die eigene Webseite mit einem responsive Webdesign fit für die mobile Nutzung zu machen.
Bevor man sich jedoch ans Werk macht, sollte man sich noch ein paar Gedanken gemacht haben. Responsive Webdesign hat einige Tücken und der Aufwand kann um einiges höher sein, wie bei einem herkömmlichen Webdesign.
Grundvoraussetzung – Fit in CSS und Media Queries
Selbst wenn auf fertige Grids zurückgegriffen wird, wer noch nie oder nur wenig mit CSS & Media Queries zutun hat, läuft Gefahr die Orientierung und damit die Lust zu verlieren.
Responsive gestaltete Webseite verhält sich fließend. Das beutet, dass im CSS nicht – oder nur äußerst selten – mit festen Pixelwerten gearbeitet werden kann. Anstelle von festen Werten werden für die Anzeige des Webdesign Prozentangaben verwendet. Möchte man also seine Seitenelemente positionieren, muss man auch immer die umgebenden Elemente im Auge behalten um ein ungewolltes Verhalten zu verhindern.
Werden, wie im Beispiel zu sehen, zwei Texte nebeneinander positioniert und ihre Breite per Prozent festgelegt, lässt sich mit dieser Anrodnung auch auf einem iPad noch „leben“, auf einem Smartphone ist es grenzwertig.
Um dieses Malheur in den Griff zu bekommen, wird im CSS ein Breakpoint per Media Querie notiert mit dem beide Textblöcke auf 100 Prozent gesetzt werden und gleichzeitig wird das Floating aufgehoben. Im Ergebnis würden beide Textblöcke zentriert untereinander stehen und die gesamte Breite des Display einnehmen.
Media Queries – Max-Width anstatt Max-Device-Width
Der erste Test im Browser und nichts passiert. Das Design bleibt statisch und von responsive keine Spur. Mögliche Ursache ein klassischer Fehler in den Media Queries.
Damit sich das Webdesign auch in einem Desktop Browser responsive verhält muss es im CSS so definiert sein, dass es auf Änderungen der Weite des Browserfenster reagiert. Wählt man im CSS Max-Device-Width für den Media Querie Breakpoint, werden die Werte erst „aktiv“, wenn die Webseite mit einem Gerät (Device) in der entsprechenden Auflösung geöffnet wird. Die Anweisung Max-Width hingegen, bezieht sich das auf die Breite des Browserfenster ansich und ist unabhängig von der Auflösung des Display.
Ein Beispiel: Ein Desktop Monitor hat eine Auflösung von 1280*1024 Pixel (die Device Width) allerdings lässt sich das Browserfenster auf 800*600 Pixel verkleinern (die Width).
- @media screen and (max-device-width: 480px)
- @media screen and (max-width: 480px)
Wären die Media Queries als Max-Device-Width gesetzt, ließe sich das responsive Design nicht durch das verkleinern des Browserfenster testen sondern erst durch die Änderung der Auflösung. Die Verwendung von Max-Width ist flexibler und das macht responsive Webdesign ja aus, flexibel und fließend zu sein.
Responsive von unten nach oben oder umgekehrt – wie denn nun?
Es gibt zahlreiche Stimmen im Internet, die empfehlen mit der mobilen Variante zu beginnen, von klein nach groß. Andere wiederum arbeiten sich herunter.
Ob es nun sinnvoller ist, erst eine Desktop Version der Webseite zu haben oder mit dem mobilen Design zu beginnen, bleibt jedem selber überlassen. Beginnt man bei der Webentwicklung mit einem leeren HTML Dokument und fügt nur ein paar div Tags untereinander ein, hat man eigentlich schon eine responsive Webseite, auch ohne CSS und Media Queries. Beginnt man nun damit nur die Texte einzufügen, hat man eigentlich alles was man braucht und kann mit der Positionierung der Inhalte beginnen.
Streng genommen hat man weder oben noch unten begonnen. Wenn man sich vor Augen hält, dass feste Größen in Pixel eher konterproduktiv sind, ergibt sich das meiste von selber. Sinnvoll ist sicherlich, die ersten Media Queries für die kleinste Größe an zu legen und im nächsten Schritt für die größte Größe. Aber es geht eben auch umgekehrt.
Des Webdesigners Eitelkeit – Weniger ist oft mehr
Mobiles Internet heißt auch Ladezeiten optimiert – Page Speed und Usability sind wichtige Faktoren und nicht immer lässt sich das Webdesign damit vereinen.
Ganz gleich, ob es eine komplett neue Gestaltung ist oder eine bestehende Webseite um die mobile Darstellung erweitert wird. Gute Planung ist das A&O um sich unnötig Arbeit oder einem Kunden Kosten zu sparen.
Orientiert man sich bei der Entwicklung des Design an der rein mobilen Version einer Webseiten, wie z.B. Amazon oder Wikipedia, sieht man deutlich worauf es ankommt. Es ist unerheblich, ob es ein responsive Design ist und sich fließende angleicht oder ob es adaptive ist und sich „sprunghaft“ den Displaygrößen anpasst. Sprechen wir von mobilem Internet, meinen wir auch immer reduziert. Beim Webdesign, wie für eine Desktop Version aus dem vollen zu schöpfen, kann später bei der Umsetzung in CSS und HTML für Probleme sorgen und den Code durch dutzende Breakpoints unnötig aufblähen.
Gänzlich auf Bilder oder Grafiken verzichten muss man natürlich nicht. Man muss sich nur überlegen ab welcher Größe man sie zeigen möchte oder welcher Größe man sie – zu Gunsten der Lesbarkeit – ausblenden möchte. Auf einem iPad kann man sicher noch die Desktop Variante ausgeben, auf einem Smartphone hingegen, könnte man – zugunsten der Pagespeed Optimierung – und besserer Ladezeiten sicher auch auf das eine oder andere verzichten.