„Always on“ – Nutzer sind heutzutage nicht nur ständig online, sondern sie verwenden dafür auch eine immer größere Anzahl von Geräten. Damit steigt auch die Anzahl der Bildschirmauflösungen, für die eine Website optimiert werden muss.
Webdesign in fixen Größen
Unter dem Motto „Alte Zöpfe abschneiden“ verficht t3n-Autor Dieter Petereit deshalb den Ausbruch aus überkommenen Webdesignkonventionen. Lesen Sie hier den Artikel von Dieter Petereit.
Früher war beim Webdesign alles einfacher: Man passte das Design einfach den gängigsten Bildschirmauflösungen an. Taktgeber bei der Entwicklung waren die Displayhersteller und die Auflösungsstandards VGA, XVGA, XGA etc.
Mit dem Aufkommen internetfähiger Mobilgeräte wie Tablets und Smartphones mussten Webdesigner auch an die mobilen Nutzer denken – und taten dies zunächst meist mit einer für Mobilnutzer optimierten Subdomain („m.-Domain“), die in puncto Inhalte und Design oft eingeschränkt war.
Responsive Design: Smartphone-Siegeszug stellt Webdesigner vor Probleme
Je mehr Smartphone-Modelle auf den Markt kamen, umso mehr Bildschirmgrößen mussten mitbedient werden. Denn der Markt entwickelte sich rasant von Bildschirmdiagonalen von 3,5″ bzw. 4″ zu immer größeren Touchscreens von 7″, die unter dem Namen Phablet oder Smartlet in den Umlauf kamen. Zeitgleich entwickelte sich die Standardgröße von Tablets von 7″ zu 10″, auch 12″ sind mittlerweile verbreitet.
All diese Bildschirmgrößen und ihre jeweiligen Auflösungen mussten nun auch berücksichtigt werden. Dies geschah zunächst über wenige vordefinierte Bildschirmbreiten, die dann mehr oder weniger gut zu den Anzeigegeräten passten.
„Anstelle eines Mockups, wie früher, bauten wir nun eben drei für die typischerweise drei verschiedenen Geräteklassen und konnten so wieder Dateien mit Pixelgrößen definieren.“
Dieter Petereit
 |
| Responsive Design. Quelle: Wikipedia |
Raus aus dem Photoshop, rein in den Browser
Der wachsenden Anzahl der Mobilgeräte und ihrer vielen verschiedenen Displaygrößen wurden diese drei Mock-ups aber irgendwann nicht mehr gerecht. Um „fluides Design“ zu verwirklichen, ist es aber auch nicht sinnvoll, im Photoshop eine Unzahl von Designs anzulegen, die dann im Browser an den jeweiligen Breakpoints umbrechen. Das ist schlicht zu aufwendig. Besser ist es, einzelne Elemente so zu entwickeln, dass sie zu größeren Einheiten kombiniert und an verschiedenen Stellen wiederverwendet werden können (Stichwort hier: „Atomic Design“ von Brad Frost). Realisiert wird dies über HTML und CSS. Das heißt: weg von Photoshop und statischen PSD-Dateien hin zu HTML und CSS.
Ändern müssen sich allerdings nicht nur die für das Design verwendeten Softwares, sondern auch die Entwickler, denn die Abgrenzung zwischen Webdesignern und Webentwicklern verschwimmt zunehmend.
Komponenten statt Seiten
Gestalterisch verschiebt sich die Arbeit also vom Design mit fester Pixelanzahl zum komponentenbasierten Design. Petereit erwartet in seinem Artikel, dass „reine Designer“ nur noch „in großen Agenturen […] eine Zukunft haben werden“– einfach, weil Designen zukünftig ohne Kenntnisse der Frameworks und Codes nur noch schwer möglich sein wird.
Bei der mds nutzen wir den Ansatz der komponentenbasierten Webentwicklung bereits seit Längerem: Anstatt jede Seite einzeln aufzubauen, ist es sinnvoller und einfacher, wiederkehrende Komponenten zu verwenden – dem vordefinierten Styleguide folgend. Korrekturen und Änderungen werden dadurch enorm erleichtert.
Wenn Sie dazu Fragen haben, freuen wir uns auf Ihren Kommentar oder Ihre Nachricht.
