Responsive Design: Warum es Ihre beste Option ist und wie Sie es richtig machen

BY admin
|

Das explosive Wachstum von Mobilgeräten und die anhaltende Verbreitung einer Vielzahl von Geräten machen Responsive Web Design (RWD) zur besten Option für Einzelhändler und Marken, die die Interaktion mit Kunden über alle digitalen Berührungspunkte hinweg optimieren möchten. Laut Internet Retailer besitzen 261 Millionen US-Verbraucher mobile Geräte und 66 Millionen dieser Gerätebesitzer kaufen mit ihnen ein. In der Tat hat Internet Retailer einen 159% Anstieg der Händler auf der IR Mobile 500 mit Responsive von 2013 bis 2014 gesehen, da Händler darauf drängen, wettbewerbsfähig zu bleiben und die Bedürfnisse der Verbraucher unterwegs zu erfüllen.

Mobile Versionen von Desktop-Websites waren bisher eine beliebte Lösung, aber die Erfahrung fehlt oft kritische Branding- und Content-Elemente und bindet wertvolle Mitarbeiter und Budget mit der Verwaltung von zwei Versionen einer Website. Durch die Bereitstellung von Informationen aus einer einzigen Codebasis, die das mobile Gerät erkennt und sich daran anpasst, löst Responsive Design diese beiden Probleme und von einer einzigen URL aus.

So wie der Start einer E-Commerce-Website keine Garantie für den Geschäftserfolg ist, berücksichtigt und plant eine leistungsstarke responsive Website gleichermaßen. Wenn es nicht richtig gemacht wird, können responsive Websites so viele Herausforderungen mit sich bringen, wie sie lösen: langsame Leistung, teure, zeitaufwändige und komplexe Entwicklungstestverzögerungen, und es kann architektonische Herausforderungen aufdecken, die ein Umschreiben der Website erfordern. In einer kürzlich durchgeführten Moovweb-Studie mit 12 responsiven Websites stellte Internet Retailer fest, dass die Leistung auf Smartphones um 513% langsamer war als auf PCS und Tablets, wobei das Laden einiger Websites 18,24 Sekunden dauerte, weit über der branchenüblichen Ladezeit von 3 Sekunden.

Optimieren für Responsive: Bevor Sie beginnen

In einem kürzlich von Magento gesponserten Internet Retailer Webinar, Gastredner, Forrester Research, Inc. Analyst Mark Grannan betonte, dass eine erfolgreiche RWD-Implementierung wie bei den meisten Projekten mit der Abstimmung von Geschäfts- und Entwicklungszielen beginnt. Wenn Sie sich im Vorfeld Zeit nehmen, um mobile Verkehrsmuster zu analysieren, Geräteprioritätslisten zu erstellen und Ihre Informationsarchitektur und -inhalte zu überprüfen, können sich Ihre Teams schneller bewegen. Die enge Verbindung von Design- und Entwicklungsteams und die Beschleunigung ihrer Zusammenarbeit mit Prototyping-Tools und Entwicklungsframeworks können die Markteinführungszeit ebenfalls verkürzen. Grannan empfahl Ingenieuren auch, von Anfang an Long-Tail-Anforderungen zu lösen, z. B. festzustellen, ob Änderungen an CMS oder Webarchitektur erforderlich sind, um Responsive Design-Projekte zu unterstützen, und proaktiv Geschwindigkeit und Site-Beschleunigung durch Frontend-Optimierungstechniken anzugehen. Schließlich empfahl Grannan, Geschäftswertmetriken (wie Site-Traffic und Conversions) mit dem Entwicklungsumfang abzugleichen.

Optimierung für Responsive: Ordnen Sie die Reise Ihrer Kunden zu

Wie alles andere beginnt die Optimierung Ihrer Website für mehrere Geräte mit Ihrer Zielgruppe – ihrer Zusammensetzung und ihrem Verhalten.

  • Wie viel Prozent Ihres Website-Traffics kommt über mobile Geräte? Die meisten Händler peg 20-30% mobile Traffic als Auslöser für die Berücksichtigung responsive

  • Wie greifen sie heute auf Ihre Website zu? Makrotrends sind weniger wichtig als die Besonderheiten Ihrer Website und Ihres Kunden

  • Welche Geräte / Browser bevorzugt Ihre Kundenpopulation? Es ist wichtig zu beachten, dass Responsive Webdesign mit Techniken implementiert wird, die mit älteren Browsern (insbesondere IE8 und älter) nicht kompatibel sind. Wenn Sie die wichtigsten Geräte identifizieren, die auf Ihre Site zugreifen, können Sie auch die Anzahl der Bildschirmbruchpunkte bestimmen, für die Sie Ihre Site entwerfen sollten

Optimierung für Responsive: Definieren Sie Ihre Content-Strategie

Die Vorbereitung von Inhalten für eine responsive Website ist eine der größten Herausforderungen für Händler, da sie ihre Einstellung zu Inhalten ändern müssen. Es wird oft gesagt, dass die Implementierung eines responsiven Webdesigns eher eine Frage der Inhaltsstrategie als eine Designfrage ist.

Wie Brendan Falkowski von Gravity Department es ausdrückte: „Mobile First ist eine Methodik, die Sie auffordert, Interaktionen zu entwerfen, indem Sie zuerst an den kleinen Bildschirm denken. Mobile First ist keine abgespeckte Version einer Desktop-Site.“

Sehen Sie sich die Suchbegriffe an, die Ihre Kunden verwenden, und definieren Sie zunächst die wichtigen Interaktionen für Ihr Geschäft. Priorisieren Sie Funktionen und Informationen, um die mobile Ansicht effizienter zu organisieren, und skalieren Sie sie dann auf eine sauberere Website für große Bildschirme. Beim Erstellen einer gewinnbringenden Erfahrung geht es nicht darum, Nutzen oder Tiefe zu beseitigen.

Im Gegenteil, Benutzer erwarten, dass sie jede Aktion von jedem Gerät aus ausführen können, das sie in der Hand halten. Das bedeutet, dass das Filtern von Suchergebnissen, das Lesen von Bewertungen, das Speichern auf Wunschlisten und das Auschecken allgemein zugänglich sein müssen.

Optimierung für Responsive: Code und Bilder

Eine Herausforderung von RWD besteht darin, dass seine einzelne Codebasis sehr groß und langsam geladen werden kann. Beachten Sie diese Tipps, viele von Mark Grannan im jüngsten Internet Retailer Webinar geteilt, für eine optimale mobile Erfahrung:

  • Laden Sie Prioritätsinhalte zuerst und Late Load („Lazy Load“) Inhalte darunter, um die Wahrnehmung einer schnelleren Leistung zu erzeugen, anstatt darauf zu warten, dass Inhalte angezeigt werden, nachdem alles geladen wurde

  • Verwenden Sie serverseitige Technologie, um Bilder in geeigneter Größe für das Gerät bereitzustellen oder zu rendern

  • Codieren Sie Ihre Site, um die Anzahl der Roundtrips zurück zum Server zu reduzieren und die Latenz zu verringern

  • Verwenden Sie offene Webfonts anstelle von benutzerdefinierten Schriftarten, um das Seitengewicht zu reduzieren

  • Erwägen Sie die Verwendung von Beschleunigung durch Dritte anbieter wie CDNs, um die Leistung durch eine Reihe von Technologien und lokales Content-Caching zu optimieren

Going Responsive: Lessons from the Trenches

Skinny Ties ist einer der größten Einzelhändler und Großhändler für Krawatten in den USA und eines der ersten Unternehmen, das traditionelle Krawatten online verkauft. Daher war es nur passend, dass der Einzelhändler einer der ersten Händler sein sollte, der bereits Anfang 2012 eine responsive Website entwickelte.

Um die außergewöhnliche Kundenerfahrung zu schaffen, die Skinny Ties anstrebte, erhöhte die Abteilung die Komplexität ihrer Taxonomie drastisch, indem sie jedes Attribut einem standardisierten Format zuordnete. Zuvor konnten Benutzer nur in einem starren Kategoriebaum navigieren. Die dynamische Taxonomie eröffnete jedem Produkt mehrere Eingänge.

Die Kombination aus responsivem Design und einer flexiblen Taxonomie trug zu einem massiven Anstieg des Umsatzes, des SEO-Werts und der Conversion-Raten auf jeder Plattform und in jedem Formfaktor bei.

  • 58% anstieg der Transaktionen im Jahresvergleich

  • 20.8% erhöhung der AOV

  • 187% umsatzsteigerung mit Android-Geräten

  • 224% umsatzsteigerung durch iPads

  • 437% umsatzsteigerung durch iPhones

Vax ist eine meistverkaufte Bodenpflegemarke in Großbritannien und Teil der Bodenpflegesparte von TTI mit Sitz in Hongkong, einem weltweit führenden Anbieter von Produkten für die Heimwerker– und Bauindustrie.

Das Geschäft wächst um 40% pro Jahr und das Online-Geschäft hat 85% + Wachstum erfahren.

Das Unternehmen hat enorme Erfolge mit Flash-Verkäufen oder so genannten Yard-Verkäufen erzielt.

Diese fünftägigen Veranstaltungen bringen in Spitzenzeiten mehr als 3.000 gleichzeitige Benutzer und waren sehr erfolgreich! Als das Unternehmen sah, dass 40% des Traffics für Yard Sales von mobilen Geräten stammten, wussten sie, dass sie eine für Mobilgeräte optimierte Website benötigten.

Nigel Aitchison, EMEA-Direktor von TTi Floorcare, teilte nach dem Start von Magento Enterprise Edition 1 großartige Ergebnisse aus ihrer Vax-Linie mit.Das responsive Theme von 14, für dessen Erstellung und Test sie nur vier Wochen brauchten. Mit der responsiven Website konnte Vax die Conversion während des Big Yard Sale um 42% auf Tablets und 156% auf Mobiltelefonen steigern.

Zusätzliche Ressourcen:

Internet Retailer – 23.Juli 2014: Schritte zum Erfolg von Responsive Webdesign

Forrester Research – Jan. 16, 2014: Sechs Fallstricke für Responsive Website-Projekte und Best Practices, um sie zu vermeiden

Internet Retailer – 2. Mai 2013: Skinny Ties erzielt mit seiner Responsive Design-Website einen Anstieg des mobilen Umsatzes um 211%

Brendan Falkowski : https://speakerdeck.com/brendanfalkowski

Moovweb – Juli 2014: 8 Möglichkeiten, die Leistung Ihrer responsiven Website zu verbessern

Magento Blog – Mai 13, 2014: Magento ermöglicht Responsive Websites in der Hälfte der Zeit