Responsivität und Webdesign
Der Trend, dass immer mehr User von ihrem Smartphone aus im Internet surfen, ist ungebrochen. Das hat natürlich auch Auswirkungen auf das Webdesign. Responsivität, bei der sich die Darstellung der Webseiten automatisch dem jeweiligen Endgerät anpasst, ist hier mittlerweile Standard. Neuer und trendgemäßer – und deshalb von uns favorisiert – ist der Ansatz Mobile First: Das heißt, dass eine Webseite zuallererst für die mobile Nutzung konzipiert und erst danach für die Ansicht auf dem Desktop erweitert wird.
Optimale Ansicht auf jedem Gerät
Unabhängig vom Mobile-First-Ansatz ist Responsive Design heute ein Muss, um den Webseitenbesuchern auf allen Geräten ein optimales Kundenerlebnis zu bieten. Mithilfe sogenannter Media Queries werden die wichtigsten Eigenschaften der Benutzergeräte abgerufen, um die Webseite auf dem jeweiligen Gerät funktionsfähig darzustellen. Responsive Typografie und responsives Imaging sorgen für eine angemessene Anordnung und Größe der Texte und Bilder.
Bei den Bildern achten wir zusätzlich darauf, dass diese nicht nur an das Displayformat angepasst, sondern in der richtigen Größe (Auflösung) für das jeweilige Gerät ausgeliefert werden. So stellen wir eine möglichst kurze Ladezeit sicher, egal ob auf PC, Tablet oder Smartphone.
Fokus auf User Experience
Auch die unterschiedlichen Eingabemethoden – also Mauszeiger oder Finger (Touch), Tastatur, ja sogar Sprachsteuerung – werden bei der responsiven Gestaltung von Webseiten berücksichtigt. Entscheidend ist, dass die Webseite für den User bequem und einfach zu bedienen ist: Dazu gehören kurze Ladezeiten und eine übersichtliche und leicht zu navigierende Menüführung. Je wohler sich der Besucher auf Ihrer Webseite fühlt, desto höher ist die Wahrscheinlichkeit, dass er bis zum Schluss, also bis zum Kauf, draufbleibt.
Mit Atomic Design zur individuellen Website
- Den Atomen entsprechen dabei die UI-Elemente (d. h. die Elemente des User Interface), die nicht weiter teilbar sind, z. B. Buttons, Eingabefelder und Labels, die ein Textfeld beschriften
- Atome bilden zusammen Moleküle, die spezifische Eigenschaften besitzen. Ein Beispiel für ein Molekül ist ein Formular, das aus den drei Atomen Label, Eingabefeld und Button besteht
- Die Organismen entstehen aus den Molekülen und sind schon ziemlich komplexe und unabhängige UI-Komponenten, wie Header, die Navigation und Suchfunktion
- Beim Template sind wir wieder im Webdesigner-Jargon. Templates sind die leeren Seitenvorlagen, die auf Ihren Content warten. Die zugrunde liegende Struktur der Seite ist hier gut sichtbar und ergibt sich aus den Organismen, Molekülen und Atomen
Unkompliziertes Webdesign
Durch seinen logischen Aufbau bietet Atomic Design viele Vorteile:
- Schnelle Implementierung: Der Entwickler kann Atome, Moleküle und Organismen bereits sukzessive umsetzen, ohne auf das fertige Design warten zu müssen
- Einfache und kostengünstige Anpassungen: Wünscht der Kunde z. B. einen anders gestalteten Button, muss der Entwickler diese Änderung nur in seiner CSS-Klasse durchführen, und schon ist sie überall auf der Seite aktualisiert
- CI-Konformität: Die zentral definierten Elemente garantieren webseitenübergreifend ein einheitliches, professionelles und den Regeln der CI entsprechendes Erscheinungsbild
Moderne Layoutentwicklung mit Sketch und Pattern Lab
UI-Designelemente und Layouts erstellen wir in der Regel mit Sketch. Sketch arbeitet, im Gegensatz zu Photoshop, vektorbasiert und ist für Webdesign und das Erstellen responsiver Webseiten somit besser geeignet. Als Tool zur Webseitengenerierung favorisieren wir Pattern Lab.
Für den modularen Aufbau Ihrer Webseite kann man sich Pattern Lab gut als den Lego-Kasten vorstellen, aus dem wir uns bedienen. In Pattern Lab heißen alle Atome, Moleküle, Organismen und Templates Ihres User Interface nun Patterns. Diese liegen zentral in der Pattern Library. Die Vorlagen in Sketch heißen Symbole. Pattern Lab sorgt am Ende dafür, dass alle UI-Komponenten reibungslos miteinander funktionieren.
Das Besondere: Wenn an einem Pattern oder einem Symbol Änderungen vorgenommen werden, werden diese sofort auf alle anderen Patterns und Symbole gleichen Typs übertragen. Veränderungen können so einheitlich und mühelos vorgenommen werden. Im Prinzip entspricht dies der Funktionsweise von Pimcore: Mit dieser Open-Source-Lösung können Produktinformationen zentral und einheitlich vorgehalten und gemanagt werden.
Styleguide inklusive
Durch das Prinzip des Style Guide Driven Development kreieren und dokumentieren wir parallel zum Aufbau Ihrer Webseite die UI-Design-Entscheidungen von Anfang an mit. Ihr Corporate Design erhält so im Styleguide und der Pattern Library eine feste Grundlage. Alle Informationen zu wichtigen Details des UI-Designs, ob Farben, Bilddarstellung, Button oder Schriftart, werden hier zusammengefasst. Das hat für Sie viele Vorteile:
- Die Kommunikation über Aufbau und Erweiterungen der Webseite bekommt eine Sprache und wird für alle erleichtert
- Durch Styleguide und Pattern Library können Sie selbst oder andere in Zukunft an der Website arbeiten, ohne dabei das Corporate Design zu verändern
- Das User Interface bleibt so geräteübergreifend einheitlich und sorgt für eine positive User Experience sowie ein seriöses Außenbild der Firma
Website intelligent mit Content füllen
Was das „Füllen“ der Templates mit Ihrem Content angeht, lohnt es sich, dafür ein Produktinformationssystem (PIM) zu verwenden. Wir empfehlen Pimcore, das sich mit Leichtigkeit mit der Website verknüpfen lässt. Auf diese Weise haben Sie eine integrierte Medien- und Bildverwaltung und können Produktinfos, Kundendatensätze und Ansprechpartner intelligent mit der Webseite verbinden, ohne dass dafür externe Schnittstellen notwendig werden.
Einem wirkungsvollen Customer Experience Management steht dann nichts mehr im Weg, und Sie können auf Ihrer Webseite ganz gezielt Inhalte ausspielen, die genau auf die individuellen Bedürfnisse Ihrer Kunden zugeschnitten sind.