Webdesign: Alles muss flexibel werden

Christian
Christian
Teilen:
  • facebook share icon
  • twitter share icon

Noch vor einiger Zeit ging quasi jeder User mit seinem Desktoprechner ins Netz. Die Bildschirmauflösungen waren fest vorgegeben und als Webdesigner konzentrierte man sich auf eine Auflösung, die auf möglichst vielen Endgeräten gut aussah. Dann wurden die Bildschirme größer. Nun gestaltete man Websites etwas größer. Der Nachteil: Auf kleinen Bildschirmen sah die Website dann schon nicht mehr so gut aus. Scrollbalken verhinderten eine Ansicht der gesamten Website und störten die Benutzerfreundlichkeit. Also konzentrierte man sich auf eine fixe Bildschirmgröße und gestaltete das Webdesign dafür passend oder man versuchte einen Mittelweg mit der Folge, dass die Websites für kleinere Bildschirme zu groß geraten waren oder für große Bildschirme zu klein.

Um das Dilemma perfekt zu machen, hat sich die Vielfalt der Endgeräte in den letzten drei Jahren nahezu vervielfacht. Erst kamen die Netbooks, kleine praktische Helfer für unterwegs. Dann das allseits bekannte iPhone, welches den Smartphonemarkt revolutionierte. Dann die Android-Geräte, welche als Antwort von Google auf den rasant wachsenden Smartphonemarkt zu verstehen sind. Darüber hinaus brachte Apple den Tablet-Rechner "iPad" raus, der auf einen Schlag die gesamte Geräteklasse für eine breite Nutzerschicht attraktiv machte. Allen Endgeräten ist eines gemeinsam: Sie verwenden verschiedene Bildschirmgrößen und Bedienkonzepte. Somit stehen wir vor der Fragestellung: Wie kann eine Website gestaltet werden, die mit Bildschirmauflösungen von 960 x 640 px (und weniger) bis zu 2560 x 1440 px (und mehr) funktioniert, ohne die Benutzerfreundlichkeit zu vernachlässigen?

Die Antwort nennt sich Responsive Webdesign. Dahinter verbirgt sich ein Designkonzept, das in einem vorab definierten Rahmen flexibel auf die Endgeräte der Nutzer reagiert. Um eines vorweg zu nehmen: Responsive Webdesign ist nicht gleichbedeutend mit Mobile Design. Responsive Webdesign nimmt sich der gesamten Bandbreite der Endgeräte an und dient nicht ausschließlich Smartphones.

Flexibles Layout

Da man heute schwer sagen kann, welche Auflösungen in den nächsten Jahren auf welchen Endgeräten zur Verfügung stehen werden, arbeitet eine ideales Webdesign nicht mehr in Pixelangaben, sondern in Prozentwerten. In flexiblen Layouts bekommt eine Website dehalb keine fixen Pixelmaße mehr, sondern wird in Prozent der zur Verfügung stehenden Fläche definiert. Ein mit Prozenten definiertes Layout, wird deshalb immer den zur Verfügung stehenden Platz, möglichst gut nutzen. Um das möglichst einheitlich umzusetzen, empfiehlt sich der Einsatz eines Grid-Systems. Sehr zu empfehlen ist das 1140er-Grid-System. Es passt perfekt in einen 1280px-Bildschirm, der bei Desktop-Geräten nach wie vor weit verbreitet ist. Für kleinere Layouts verkleinert sich das Grid-System elastisch und schaltet ab einer bestimmten Göße, mit media queries, auf die Darstellung für Smartphones um. So kann mit relativ geringem Aufwand ein hübsche Website mit flexiblem Layout umgesetzt werden. Es gibt natürlich noch viele andere Grid-Systems (beliebt ist auch yaml) denn nicht jede Website lässt sich so einfach flexibel umsetzen.

Flexible Schriften

Auch die Typografie muss sich den verschiedenen Bildschirmgrößen anpassen. Schnell werden sonst Schriften auf Smartphones zu klein dargestellt, was suboptimal wäre. Schriften lassen sich ähnlich wir Layouts in Prozentangaben definieren. Per CSS wird einmalig festgelegt, welcher Basiswert gelten soll (zum Beispiel 15px entspricht 100%). Anschließend wird, bezugnehmend auf die Basisschriftgröße per Prozentangabe, die passende Schriftart definiert.

Flexible Bildgrößen

Mit Bildgrößen wird anders verfahren. Hier versucht man Bilder, entsprechend passend zu skalieren umd gleichzeitig nicht in die Falle zu tappen, Smartphones die volle Auflösung der Bilder zuzumuten. Da auf Reisen die zur Verfügung stehende Bandbreite kostbar ist, werden Bilder für kleine Bildschirme in geringerer Auflösung vorgehalten. Der Vorteil dabei ist die geringere Dateigröße. Der Nachteil ist, dass alle Bilder in verschiedenen Auflösungen manuell erstellt und auf den Webserver geladen werden müssen. Für dieses Problem gibt es eine geniale Lösung: Adaptive-Images. Mit diesem praktischen Tool werden alle Bilder serverseitig in vier verschiedene Größen gerechnet und lassen sich leicht per CSS ansteuern. Das Ganze funktioniert so: Ein kleines Java-Script im Header der Website fragt die aktuelle Bildschirmgröße ab und speichert einen Cookie mit dem aktuellen Wert. Ein PHP-Script fragt den Wert ab und sorgt für die Auslieferung eines (praktischerweise vorab gecachten) Bildes. Thats it!

Responsive Webdesign ist ein Weg, der zu einem bestmöglichen Webdesign führt. Mit dieser Methode sind Sie nicht nur für die Diversität der Browser und Endgeräte gerüstet, sondern auch zukunftssicher aufgestellt. Weitere Informationen erhalten Sie wie immer direkt bei uns, Ihrem Team für Webdesign in Bielefeld.

Christian
Christian
Teilen:
  • facebook share icon
  • twitter share icon