Adaptives Web-Layout breitet sich aus

Wie man dem einen oder anderen Post hier entnahmen kann, bin ich ja ein großer Verfechter der Idee adaptiver Websites. Wem dieser Begriff nichts sagt: damit meine ich Websites, die versuchen, die Informationen, die über einen Besucher zur Verfügung stehen, zu nutzen, um diesem Besucher die Informationen optimal zu Verfügung zu stellen. (Mehr Details dazu hier.) Ein Aspekt dieser Idee (wenn auch bei weitem nicht der einzige) ist das adaptive Layout, das manche Webdesigner auch "fluid design" nennen. Man könnte auch "intelligentes Layout" sagen, denn Webseiten mit adaptivem Layout passen sich an die Größe des Bildschirms bzw. des Fensters automatisch an. Auch diese Website macht das zum Beispiel - zum Ausprobieren einfach mal das Fenster deutlich kleiner machen und dann wieder groß ziehen.

Die technische Umsetzung dieser Idee ist in modernen Browsers kein Hexenwerk. Selbst eine Allerwelts-Site, wie die des Internet-Providers 1&1, nutzt diese Möglichkeit.

Hier die Version für Bildschirme mit bis zu 1024 Pixel Breite:

Und hier die Version für größere Bildschirme:

Wie man sieht, werden hier bei der Größenänderung nicht nur die Elemente größer oder kleiner. Die große Version verwendet 4 Produkt-Teaser statt Dreien in der kleinen Variante (noch breitere Bildschirme zeigen fünf Produkte). Und aus einem zweispaltigen Layout wird ein dreispaltiges, wenn der Platz dafür da. Technisch ist das, wie gesagt, kein Hexenwerk. Aber selbstverständlich müssen sich die Designer und UX-Experten nach wie vor Gedanken machen, wie sie die Anpassung an unterschiedliche Bildschirmgrößen konzeptionell lösen.

Bei 1&1 sind das natürlich noch sehr simple Anpassungen, aber sie zeigen schon die Vorteile des Prinzips: die zur Verfügung stehende Bildschirmfläche wird besser genutzt - und zugleich ist der visuelle Gesamteindruck stimmiger, als wenn man das Layout auf 1024 Pixel optimieren und bei größeren Bilschirmen einfach nur Freiraum ergänzen würde. Schön wäre es, wenn 1&1 auch gleich Smartphones mit einem eigenen Layout beglücken würde. Aber, man kann nicht alles haben.

Posted via email from _notizen