Responsive Design: Nah(tlos) am Kunden
Fast jeder zweite Deutsche besitzt ein Smartphone und bereits jeder Achte nennt ein Tablet sein Eigen. Deshalb sollten Marketingverantwortliche ihre Inhalte für eine möglichst große Anzahl an Devices zugänglich machen. Der Schlüssel dazu ist Responsive Webdesign. Wir zeigen, wie Sie Ihren Webauftritt fit für das Mobile Web machen.
User gehen über immer mehr Zugangsgeräte ins Netz: Desktop-PC, Laptop, Tablet, Smartphone, Phablet, Uhr, Navigationsgerät, Google Glass, TV – um nur die wichtigsten zu nennen. Beinah jedes Gerät mit einem Display kann und wird in Zukunft internetfähig sein.
Für Unternehmen bedeutet dies, Content auf allen Endgeräten möglichst gleich gut darzustellen. Das heißt nicht, dass die Inhalte beispielsweise in der Smartphone-Ansicht exakt dieselben sind wie auf dem Desktop-PC. Mobil gilt meist: weniger ist mehr. Priorisieren Sie, welche Funktionen und Inhalte in der mobilen Nutzungssituation wirklich wichtig sind und welche nicht.
6 Tipps für den Responsive Design-Prozess:
Gute Responsive Design-Projekte erfolgen in agilem Projektmanagement. Dabei sollten einige wichtige Punkte beachtet werden:
1. Grundlagen klären
Bevor man überhaupt mit den ersten technischen Überlegungen beginnt, müssen klare Entscheidungen bezüglich des Teams und interner Verantwortlichkeiten geklärt werden. Nichts ist schlimmer, als ein chaotisches Projektmanagement. Einigen Sie sich bereits in einem ersten Kick-off Meeting auf die wichtigsten Geräte und Browser, die im Projekt dann umfänglich getestet werden. Auch der Vertrag sollte in einer frühen Phase besprochen werden.
2. Strategie planen
Als primäres Ziel sollte eindeutig zwischen stationär und mobil priorisiert werden. Was ist mobil wirklich wichtig? Welche Navigationspunkte können auf unterschiedlichen Endgeräten in den Hintergrund rücken? Im M-Commerce lassen sich diese Fragen mit einer großen Suchfunktion unterteilt nach Produkten und Standorten, Produkt-Rondell (Swipe), schneller Zugriff auf Services und Kontakt sowie Social Media-Elemente konkret beantworten.
3. Displaytechniken beachten
Durch neue Bildschirmtechniken eröffnet sich eine weitere Herausforderung für Designer. Da zur Zeit oftmals Designs für eine Auflösung von 460PX x 320PX für “klassische” mobile Kunden entstehen und zusätzlich dazu ein Layout für die höhere Retina-Auflösung von 960PX x 640PX konzipiert wird, besteht ein erhöhter Mehraufwand. Dem kann mit Responsive Webdesign optimal entgegengewirkt werden.
4. Breakpoints festlegen
Wer von Responsive Webdesign spricht, kommt auch um die Festlegung von Breakpoints nicht herum. Breakpoints bezeichnen solche Punkte, an denen sich das Layout einer Website ändert, wenn der Content auf Devices mit unterschiedlich großen Displays ausgegeben werden. Orientieren Sie sich an gängigen Bildschirmgrößen beliebter Smartphones und Tablets und nutzen Sie diese als Grundlage für ihre Breakpoint-Werte. Überlegen Sie dazu, welche Geräte ihre Zielgruppe nutzt, welche Hersteller bevorzugt werden und wie Sie neue Geräte zukünftig integrieren können.
5. Content erzeugen
Nun können Content Wireframes erstellt werden, mit denen die Positionierung des Contents grob skizziert werden kann. Berücksichtigen Sie hierbei die zuvor festgelegten Breakpoints und passen Sie diese wenn nötig an. Im Anschluss können Sie den Content für Ihre Webpräsenz erstellen bzw. bereits vorhandene Inhalte anpassen und prüfen. So erhalten Sie ein übersichtliches Content Inventory, in dem alle Content-Elemente eingetragen sind. Verwenden Sie dabei vorerst nur Text und machen Sie erste Auszeichnungen beispielsweise mit Markdown, AsciiDoc oder ReST. Diese können anschließend mit einem geeigneten Konverter in reines Content-HTML (Text-Dummy) verwandelt werden. Vergessen Sie nicht, den Content-Dummy zu testen, um Menge und Umbrüche sichtbar zu machen.
6. Moodboards erstellen
Erstellen Sie Moodboards oder Style Tiles, mit denen Sie den visuellen Stil der Website festlegen. So gewinnen Sie ein erstes Look & Feel der geplanten Website und es können bereits einzelne Details wie Farben, Textblöcke oder Abstände definiert werden.
BEST PRACTICES
Agravis
TWT sorgte im Rahmen des Relaunchs der Agravis-Website für Responsive Webdesign, das sich auch beim Zugriff über mobile Endgeräte automatisch dem jeweiligen Ausgabemedium optimal anpasst.
Stadtwerke Aachen
Auch beim Relaunch der Website der Stadtwerke Aachen stawag.de setzt TWT auf Responsive HTML, um die Darstellung für iPhone und iPad zu op-timieren.
Dolormin
Unter dolormin.de sorgte TWT für die Kreation des Web-Layout sowie responsives Interaktions-Design.
Fazit
Die mobile Optimierung Ihrer Website ist ein wichtiger Schritt für Ihren Business-Erfolg.
Weitere Informationen unter:
www.twt.de/news/detail/responsive-design-nahtlos-am-kunden.html
User gehen über immer mehr Zugangsgeräte ins Netz: Desktop-PC, Laptop, Tablet, Smartphone, Phablet, Uhr, Navigationsgerät, Google Glass, TV – um nur die wichtigsten zu nennen. Beinah jedes Gerät mit einem Display kann und wird in Zukunft internetfähig sein.
Für Unternehmen bedeutet dies, Content auf allen Endgeräten möglichst gleich gut darzustellen. Das heißt nicht, dass die Inhalte beispielsweise in der Smartphone-Ansicht exakt dieselben sind wie auf dem Desktop-PC. Mobil gilt meist: weniger ist mehr. Priorisieren Sie, welche Funktionen und Inhalte in der mobilen Nutzungssituation wirklich wichtig sind und welche nicht.
6 Tipps für den Responsive Design-Prozess:
Gute Responsive Design-Projekte erfolgen in agilem Projektmanagement. Dabei sollten einige wichtige Punkte beachtet werden:
1. Grundlagen klären
Bevor man überhaupt mit den ersten technischen Überlegungen beginnt, müssen klare Entscheidungen bezüglich des Teams und interner Verantwortlichkeiten geklärt werden. Nichts ist schlimmer, als ein chaotisches Projektmanagement. Einigen Sie sich bereits in einem ersten Kick-off Meeting auf die wichtigsten Geräte und Browser, die im Projekt dann umfänglich getestet werden. Auch der Vertrag sollte in einer frühen Phase besprochen werden.
2. Strategie planen
Als primäres Ziel sollte eindeutig zwischen stationär und mobil priorisiert werden. Was ist mobil wirklich wichtig? Welche Navigationspunkte können auf unterschiedlichen Endgeräten in den Hintergrund rücken? Im M-Commerce lassen sich diese Fragen mit einer großen Suchfunktion unterteilt nach Produkten und Standorten, Produkt-Rondell (Swipe), schneller Zugriff auf Services und Kontakt sowie Social Media-Elemente konkret beantworten.
3. Displaytechniken beachten
Durch neue Bildschirmtechniken eröffnet sich eine weitere Herausforderung für Designer. Da zur Zeit oftmals Designs für eine Auflösung von 460PX x 320PX für “klassische” mobile Kunden entstehen und zusätzlich dazu ein Layout für die höhere Retina-Auflösung von 960PX x 640PX konzipiert wird, besteht ein erhöhter Mehraufwand. Dem kann mit Responsive Webdesign optimal entgegengewirkt werden.
4. Breakpoints festlegen
Wer von Responsive Webdesign spricht, kommt auch um die Festlegung von Breakpoints nicht herum. Breakpoints bezeichnen solche Punkte, an denen sich das Layout einer Website ändert, wenn der Content auf Devices mit unterschiedlich großen Displays ausgegeben werden. Orientieren Sie sich an gängigen Bildschirmgrößen beliebter Smartphones und Tablets und nutzen Sie diese als Grundlage für ihre Breakpoint-Werte. Überlegen Sie dazu, welche Geräte ihre Zielgruppe nutzt, welche Hersteller bevorzugt werden und wie Sie neue Geräte zukünftig integrieren können.
5. Content erzeugen
Nun können Content Wireframes erstellt werden, mit denen die Positionierung des Contents grob skizziert werden kann. Berücksichtigen Sie hierbei die zuvor festgelegten Breakpoints und passen Sie diese wenn nötig an. Im Anschluss können Sie den Content für Ihre Webpräsenz erstellen bzw. bereits vorhandene Inhalte anpassen und prüfen. So erhalten Sie ein übersichtliches Content Inventory, in dem alle Content-Elemente eingetragen sind. Verwenden Sie dabei vorerst nur Text und machen Sie erste Auszeichnungen beispielsweise mit Markdown, AsciiDoc oder ReST. Diese können anschließend mit einem geeigneten Konverter in reines Content-HTML (Text-Dummy) verwandelt werden. Vergessen Sie nicht, den Content-Dummy zu testen, um Menge und Umbrüche sichtbar zu machen.
6. Moodboards erstellen
Erstellen Sie Moodboards oder Style Tiles, mit denen Sie den visuellen Stil der Website festlegen. So gewinnen Sie ein erstes Look & Feel der geplanten Website und es können bereits einzelne Details wie Farben, Textblöcke oder Abstände definiert werden.
BEST PRACTICES
Agravis
TWT sorgte im Rahmen des Relaunchs der Agravis-Website für Responsive Webdesign, das sich auch beim Zugriff über mobile Endgeräte automatisch dem jeweiligen Ausgabemedium optimal anpasst.
Stadtwerke Aachen
Auch beim Relaunch der Website der Stadtwerke Aachen stawag.de setzt TWT auf Responsive HTML, um die Darstellung für iPhone und iPad zu op-timieren.
Dolormin
Unter dolormin.de sorgte TWT für die Kreation des Web-Layout sowie responsives Interaktions-Design.
Fazit
Die mobile Optimierung Ihrer Website ist ein wichtiger Schritt für Ihren Business-Erfolg.
Weitere Informationen unter:
www.twt.de/news/detail/responsive-design-nahtlos-am-kunden.html