Neue Anforderungen an Webdesign

Prototyping und Responsive Webdesign anstatt starrer Layout-Entwicklung: Die Zunahme mobiler Internetnutzung erfordert neue Wege in der Webentwicklung.

Der mobile Datentransfer in Deutschland wird von 2011 bis 2016 um das 21-fache steigen, dies prognostiziert eine Studie von Cisco mit dem sperrigen Titel „Visual Networking Index (VNI) Global Mobile Data Traffic Forecast“.

Eine Vorhersage, die sich konkreter betrachtet auch in aktuellen Zahlen zur Entwicklung der Internetnutzung im Jahr 2012 widerspiegelt, wie Reachblog.de in einem Artikel zur mobilen Internetnutzung anschaulich aus verschiedenen Quellen zusammenträgt.

Die Internetnutzung wird vielfältiger. Immer mehr Menschen greifen in unterschiedlichen Situationen mit unterschiedlichsten Endgeräten und Bildschirmauflösungen auf Online-Inhalte zu.

Hiermit ändern sich auch die Anforderungen an ein gutes Webdesign. Denn ein starres Layout von Internetseiten mit festen Abmessungen, Schriftgrößen und einem unflexiblen Elemente-Raster liefert oftmals keine zufriedenstellenden Ergebnisse mehr.

Ein Webdesign, das auf dem Desktop-Bildschirm schick aussieht, ist dann auf dem Smartphone kaum mehr zu bedienen. Und umgekehrt sind Websites, die starr auf die mobile Nutzung hin entwickelt wurden, oftmals am stationären PC eine Zumutung. Der größere Bildschirm wird bei weitem nicht genutzt. Aussehen und Bedienung leiden.

Technisch gibt es hier bereits Lösungsansätze. Sowohl das Bereitstellung unterschiedlicher Varianten einer Website für die verschiedenen Endgeräte als auch die flexible Anordnung und Programmierung von Webdesign, das sogenannte Responsive Webdesign, werden praktiziert.

Die Vorteile des Responsive Webdesign im Gegensatz zur Mehrvarianten-Lösung liegen vor allem im deutlich geringeren Aufwand, gerade wenn es gilt, eine Vielzahl von Devices zu berücksichtigen.

Fazit: Ein gutes Webdesign, das sowohl auf Handys, Tablets als auch auf stationären PC-Systemen und anderen Endgeräten ein optimales Nutzer-Erlebnis gewährleistet, sollte flexibel sein. Doch hier schließt sich nun eine weitere Hürde an: Der Workflow.

Weit verbreitet ist das Vorgehen, dass der Webdesigner ausgehend vom Konzept einer Website in Grafikprogrammen wie Photoshop oder Fireworks das Webdesign zuerst in Form von Bildern detailliert umsetzt. Diese Bilder werden dann mit dem Kunden besprochen, das Webdesign hiermit final abgestimmt und der fertige Screen dem Frontend-Entwickler zur Programmierung übergeben.

Die Vorteile dieser Vorgehensweise liegen auf der Hand: Für den Kunden und für die Internetagentur ist es sehr transparent und bietet große Planungssicherheit. Der Kunde hat bereits vor der eigentlichen Programmierung eine ganz klare Vorstellung, wie seine Internetseite später aussehen wird. Er entscheidet sich für eine mehr oder weniger Eins-zu-Eins-Abbildung seiner Website in Form eines Bildes. Die Webdesign Agentur wiederum hat den Vorteil, dass der Kunde eine eindeutige Design-Vorgabe freigibt – je nachdem sogar gestempelt und protokolliert. Der Aufwand für die Programmierung wird damit exakt kalkulierbar. Und spätere Änderungswünsche können zweifelsfrei als Mehraufwand belegt und ggf. zusätzlich abgerechnet werden.

Der Nachteil: Ein Bild hat exakte Abmaße, also eine feste Breite und Höhe. In dem Moment, wo das Design flexibel wird, stellt das Bild nur eine mögliche Erscheinungsform des Webdesign dar. Ein Lösungsansatz sind mehrere Bilder. Das Webdesign wird also für die wichtigsten Bildschirmauflösungen unterschiedlicher Endgeräte jeweils als Bild dargestellt, um dann die einzelnen „Geräte-Screens“ mit dem Kunden abzustimmen. Je nach Projekt ist dieser Ansatz durchaus praktikabel und sinnvoll.

Gerade bei komplexeren Internetprojekten kann der Aufwand für die notwendige Grafikbearbeitung jedoch erheblich steigen. In diesem Fall sollten Agentur und Kunde umdenken und einen neuen Workflow etablieren.

Die Ausarbeitung des Webdesign im Grafikprogramm wird hierbei reduziert. Photoshop und Co. werden genutzt, um Ideen zu skizzieren, einzelne Elemente zu entwerfen und eine erste Anmutung der späteren Website zu erzeugen. Anschließend werden die Ideen dann direkt im Browser, also während der Programmierung finalisiert. Die Abnahme des Kunden erfolgt nicht über Bilder sondern über Prototypen. Bei flexiblen Webdesigns lassen sich so deutlich schneller Entscheidungen treffen, als würden alle Zwischenschritten in Photoshop grafisch ausgearbeitet: z.B. zu Schriftgrößen und Schriftarten oder Breakpoints für unterschiedliche Auflösungen und Darstellungen.

Vor allem bei funktional komplexeren Projekten, bei denen detailliertere Darstellungen von Funktionsabläufen festgelegt werden müssen, bietet sich anstelle der Ausarbeitung von Screenlayouts mit Photoshop auch die Arbeit mit schematischen Mockups an. Mit entsprechender Software lassen sich diese wesentlich schneller.

Dieses Vorgehen erfordert natürlich eine wesentlich engere Zusammenarbeit und vor allem mehr Kommunikation zwischen Kunde, Designer und Entwickler/Programmierer. Sie erlaubt jedoch nicht nur, komplexe Designs flexibel in überschaubarer Zeit umzusetzen sondern ermöglicht auch insgesamt das Endergebnis zu verbessern, da Alternativen im Detail direkt im Browser getestet und bewertet werden können.

Tag-IT: Responsive Webdesign, Internetagentur, Webdesigner, Mobile Devices, iPhone, iPad, Notebook, PC, Internetseiten programmieren, Homepagegestaltung, Mobiles Internet, flexibles Webdesign

Fotos und Abbildungen:
Rainer Sturm / Pixelio.de
Bradfrostweb.Com
Balsamic
uliP / formativ.net
(Thx!)

 

Zurück zur Übersicht