Surfen tut man längst nicht mehr nur auf dem Desktop. Mobile Clients wie Smartphone und Tablet machen ein adaptives Layout notwendig, das sich dem Endgerät anpasst. Egal welche Viewportgröße und welches Format – ein professionelles Webdesign muss heute ausgezeichnete User-Experience auf allen Geräten bieten.

Beste User-Experience: Beispiele für professionelles Webdesign

„Responsives Webdesign“ liegt voll im Trend. Der Begriff beschreibt das adaptive Verhalten von Webseiten. Wie ein Chamäleon, dass sich farblich seiner Umgebung anpasst, so verändert sich das Aussehen der Webseite je nach Endgerät, mit dem der Besucher eine Webseite betrachtet. Dabei ist der sichtbare Ausschnitt entscheidend. Je nach Viewportgröße und Format bietet ein responsives Webdesign dem Besucher im Idealfall eine ausgezeichnete User-Experience. Die Webseite bleibt übersichtlich und navigierbar. Egal ob Smartphone oder Desktop, Hoch- oder Querformat – es werden keine Bilder und Grafiken angeschnitten, das Menü bleibt optimal positioniert, auch Schrift und Farbe passen sich bei einem professionellen Webdesign dem Endgerät an. E-VANCE, die Internetagentur aus Berlin, stellt Ihnen drei gelungene Bespiele von adaptivem Layout vor:

Shiny Demos

Die Webseite shinydemos.com präsentiert die neusten Open Web Standards – und das in responsivem Design. Kein Wunder, dass die Seite sehr gelungen ist, denn die Mitglieder des Opera Developer Realtions Teams sind Experten für Webseitengestaltung. Das farbenfrohe Layout zeigt sich leider nicht auf jedem Browser so bunt. Der Firefox 3.6 zum Beispiel kann das Design der Shiny Demos nicht rendern.

Andersson Wise Architects

Dort, wo Shiny Demos mit grafischen Elementen spielt, verwenden die Architekten aus Austin, Texas Fotos. Das sieht wunderbar aus und kommt bei adaptiven Webseiten bis heute nicht häufig zum Einsatz. Selten sind großformatige Bilder in responsivem Design zu sehen. Der Übergang von einer Anzeigegröße zur nächsten ist auf anderssonwise.com hervorragend gelungen. Nicht nur Anordnung, sondern auch Schrift- und Hintergrundfarbe ändern sich je nach Viewport. Auf dem Tablet trennen weiße Abstände Fotos und dunkel hinterlegte Textflächen voneinander, auf dem Smartphone dagegen sind Menü, Überschrift und Text weiß hinterlegt.

Design made in Germany Magazin Auflage 5

Für die 5. Auflage des Magazins – zu finden unter designmadeingermany.de/magazin/5/ – setzt DMIG eine scrollende Navigation vor fixer Szenerie ein. Die Magazinartikel auf dunklem, halbtransparenten Grund schiebt der Besucher über die gezeichneten Grafiken hinweg. Die Zeichnungen wechseln je nach Themenabschnitt des Heftes. Sie werden während der Lücken sichtbar, die sich zwischen die Textabschnitte schieben. Das Design passt sich optimal der Ausschnittsgröße des Endgeräts an. Je nach Viewport sind die Textabschnitte mehr oder weniger breit.