Als es noch Standards gab
Designer der alten Schule kennen das Problem unterschiedlicher Bildschirmgrößen noch von früher. Damals, bis etwa 2008, waren die verschiedenen Auflösungen aber recht übersichtlich. Ein Desktop-PC mit 17 Zoll-Bildschirm war Standard. Die Auflösung in der Breite war meistens 1024 Pixel oder breiter. So konnte mit einem Design die große Masse der Nutzer sauber bedient werden.
Die Absprache mit den Kunden lief damals in etwa so ab:
- Absprache und Planung mit dem Kunden zum Thema Layout Design und Aussage der zu erstellenden Seite.
- Daraufhin wird ein Mockup / Design mit einem Grafikprogramm gefertigt.
- Der Kunde nimmt das Design ggf. ab oder lässt noch Änderungen fertigen.
- Das Design wird auf einer Testumgebung umgesetzt
- Der Kunde prüft die Umsetzung und lässt ggf. noch Änderungen einfließen.
- Die Site wird final online gestellt.
Mit dem ersten iPhone ging es dann los: Seiten mussten für das Handy optimiert werden, und zwar für alle mit dutzenden unterschiedlichen Bildschirmgrößen, Auflösungen und uneinheitlichen Pixeldichten. Und auch im Portrait- oder Landschaftsmodus. Das gleiche galt für die Tablets, die sich seit 2010 immer weiter verbreitet haben.
Fixes Design ist nicht mehr zeitgemäß
Statische Layouts haben ausgedient, denn sie zeigen immer nur eine Momentaufnahme in der speziellen Größe. Man könnte natürlich für jeden gängigen Gerätetyp ein Design erstellen, dieser Aufwand steht aber zu keinem Verhältnis zu den Kosten schon bei 3 Gerätetypen können extrem viele Ansichten entstehen, die nach jedem Änderungswunsch angepasst werden müssen (3 x Startseite, Kategorieseite, Detailseite und ggf. den gesamten Checkout im Shop á 5 Seiten = 24 Seiten).
Die Antwort heißt Responsive Design
Unter Responsive Design versteht man die automatische Anpassung des Aussehens einer Website an das Gerät, auf dem sie angezeigt wird.Millimeter genaues Arbeiten lässt das Responsive Design nicht mehr zu, da man nie genau sagen kann, bei welchem Gerät der Button „X“ größer oder kleiner ist. Wenn man statisch aber ein Design erstellt, suggeriert man dem Kunden das der Button „X“ immer genau so aussieht. Diese Problematik kann sich durch jede Interaktivität der Site schlängeln und Probleme bereiten, als man eigentlich durch das Design vermeiden will.
Entwicklung 2015 – interaktiv und interdisziplinär
Da in Shops viele interaktive Funktionalitäten erforderlich sind, müssen wir auch gleich von Anfang an „interaktiv“ agieren. Dadurch ergibt sich, dass wir den Code und das Design Hand in Hand erstellen und ausarbeiten. Direkt nach der Planung wird die Site mit HTML und CSS als „Prototyp“ erstellt dieser Prototyp ist sehr reduziert und hat noch keine gestalterischen Elemente, wodurch Korrekturen schnell und unkompliziert gemacht werden können.
- Nun kann man in einem Grafikprogramm die verschiedenen Elemente erstellen (durch den Prototyp weiß man welche Elemente interaktiver gestaltet werden müssen)
- Nun kann man das angepasste Design an den Prototypen einarbeiten, ab diesem Zeitpunkt sollten das Design und die Programmierung parallel laufen (Dies erfordert ein gutes Zusammenspiel zwischen Designer und Programmierer).
Meistens sind die Finalisierung und die Abnahme vom Kunden bei diesem Ablauf fließend und parallel.
Genauso wie früher sollte es heute auch noch so sein, dass die kleinste Version erstellt wird (Mobil) und dann an größere Bildschirme gedacht wird. Dies macht die Site von Anfang hinsichtlich der Datenmenge viel kleiner.
Heutzutage ist es unablässig, im Agenturgeschäft lineare Strukturen abzubauen und klassische Abläufe umzukrempeln.
Dies bedeutet neue Herausforderungen im Umgang mit dem Kunden und verschiedene Zeitplanungen. Zukünftig müssen Programmierer und Designer sehr eng miteinander zusammen arbeiten, um den Anforderungen der vielen unterschiedlichen Geräte gerecht zu werden.