Whitepaper Responsive Design

Transkript

1

2 76% Smartphone-Besitzer surfen täglich 69% Tablet-Besitzer surfen täglich 74% der Schweizer nutzen das Internet mobil Das mobile Internet ist mittlerweile fest in den Alltag der Schweizer integriert: 76 Prozent der Smartphone-Besitzer nutzen das Internet täglich, bei den Tablet-Besitzern sind es 69 Prozent. Und immer häufiger ist das Smartphone das Gerät mit dem am meisten Zeit im Internet verbracht wird. Die Zahlen aus dem Jahr 2013 zeigen die enorme Wichtigkeit eines mobil optimierten Online-Auftritts. Das gibt Einblick in die aktuelle Entwicklung und fasst Vorteile und technische Voraussetzungen für ein erfolgreiches Responsive Design zusammen. Die Herausforderung Obwohl man immer wieder von der steigenden Verbreitung von mobilen Geräten hört, werden Webseiten meist für Desktop-Rechner entwickelt. Eine mobile Version galt lange Zeit als Bonus oder wurde nur aus persönlichem Interesse umgesetzt. In der Zwischenzeit jedoch ist eine mobil optimierte Webseite und Online-Shop essentiell für den Erfolg. Findet der Besucher die gewünschten Informationen nicht schnell genug, oder ist die Bedienung zu kompliziert, verliert man einen potentiellen Kunden. Mit nur einem Klick hat der Besucher die Webseite oder den Online-Shop gewechselt und kauft bei einem Konkurrenten. Ein sogenanntes Responsive Design (auch Responsive Webdesign) ist die Lösung. Unter Verwendung aktueller technischer Möglichkeiten wird der Onlineauftritt optimal auf den zur Verfügung stehenden Bildschirm abgestimmt. Dabei werden sowohl die Ausgabe der Informationen als auch die Funktionen angepasst, um dem Besucher ein bestmögliches Surferlebnis zu bieten. 2

3 Responsive Design als Lösung Responsive Design ermöglicht den Besuchern einen übersichtlichen und einfachen Zugang zum Onlineangebot. Dabei ist es unerheblich, ob die Webseite von einem Smartphone, Tablet, PC, Laptop, E-Book-Reader oder internetfähigem TV aufgerufen wird. Die Webseite reagiert automatisch und dynamisch auf den für die Anzeige zur Verfügung stehenden Bereich. Technisch basiert die Umsetzung eines Responsive Design im Wesentlichen auf drei Elementen: flexiblen Grid Layouts, Media Queries und Responsive Images. Dabei kommen ausschliesslich Front-End-Technologien zum Einsatz. Es sind damit in der Regel keine serverseitigen Skripte oder Anpassungen notwendig. Um zu Testen, ob Ihr Onlineauftritt bereits für mobile Geräte optimiert ist, stehen verschiedene Möglichkeiten zur Verfügung. Nutzen Sie beispielsweise den responsive Check auf - Dieser liefert mit nur einem Klick und völlig automatisch verschiedene Ansichten Ihres Onlineauftritts abgestimmt auf die verschiedenen Geräte. Drei Hauptelemente 1. Flexible Grid Layouts - das Layout der Webseite oder Online-Shop ist flexibel angelegt und passt sich entsprechend der zur Verfügung stehenden Bildschirmgrösse an 2. CSS3 Media Queries - ermöglichen die Definition unterschiedlicher Regeln basierend auf Gerätemerk- malen und/oder Orientierung (vertikal / horizontal) des mobilen Gerätes 3. Responsive Images - passen sich in Grösse und Position automatisch an den zur Verfügung stehenden Bildschirm an 3

4 Vorteile eines Responsive Design Endlos viele Geräte Ein flexibles Layoutkonzept gewährleistet auch für die stetig steigende Anzahl an Smartphones, Tablets und anderer internetfähiger Geräte eine optimale Darstellung. Gleichbleibende URLs Sprechende URLs, welche über alle Gerätearten hinweg gleich sind, erleichtern das Teilen, erhöhen die Effizienz in Suchmaschinen und vereinfachen die Auswertung und Analyse. Volle Funktionalität Ein gleichbleibendes Surferlebnis über alle Gerätetypen hinweg gibt dem Besucher Orientierung und unterstützt ein einheitliches Markenerlebnis. Von Google empfohlen Suchmaschinen haben die Wichtigkeit mobil optimierter Webseiten erkannt. Google etwa belohnt die mobile Ausrichtung von Webseiten mit besseren Positionierungen. Die Zukunft ist mobil Die Nutzung und der Absatz von mobilen Geräten steigt weiter rasant an. Ein responsive Design ist zukunftsfähig und sorgt für perfekte Darstellung in jeder Situation. Keine doppelte Pflege Responsive Webdesign steht für gleiche Inhalte und Funktionalitäten auf allen Geräten. Damit entfällt das sehr aufwändige und damit teure Bereitstellen separater Inhalte. 4

5 Auswirkungen / Erfolg Google mag Responsive Webdesign Ganz klarer Vorteil von Responsive Webdesign ist der hohe Wiedererkennungswert einer Website auf jedem (mobilen) Endgerät. Da sowohl die Inhalte, als auch die HTML-Struktur in der Regel identisch sind, ist ein Responsive Webdesign auch aus Sicht der Suchmaschinenoptimierung die beste Lösung. Nicht umsonst spricht sich auch Google für Responsive Webdesign aus. Egal welches Geräte verwendet wird, es gibt nur eine URL unter welcher die Inhalte aufgefunden werden. Auch wichtige Tags, wie zum Beispiel Überschriften bleiben gleich. Verweildauer hoch, Absprungrate runter Man kann mit Responsive Webdesign sehr gut dafür sorgen, dass sich der Besucher einer Webseite oder eines Online-Shops länger dort aufhält. Die Absprungrate lässt sich ebenfalls reduzieren. Beides sind wichtige indirekte Rankingfaktoren für die Positionierung in den Suchergebnissen. Beispiel: Verlässt ein Besucher die Webseite oder den Online-Shop sofort wieder, weil dieser mit der Ausgabe der Informationen, der Navigation usw. überfordert ist, bewertet die Suchmaschine dies negativ (hohe Absprungrate). Anders sieht das bei bei einer Website mit Responsive Design aus. Der Besucher findet schnell die gewünschten Informationen, kann bequem durch alle Seiten navigieren und verweilt so deutlich länger auf der Webseite oder dem Online-Shop. Anpassung ist wichtig Responsive Webdesign ist kein Luxus mehr. Es ist wichtig, dass man den Besuchern einer Webseite die Möglichkeit bietet, die Seite optimal auf allen Geräten betrachten zu können. Nur so ist es möglich, ein positives Besuchererlebnis zu schaffen und damit in guter Erinnerung zu bleiben. Professionelles und vor allem technisch einwandfreies Responsive Webdesign ist nichts, was man mal eben so macht. Hier sollten Profis ans Werk. Die Investition erscheint anfangs möglicherweise hoch. Überlegt man jedoch, dass man so wirklich alle potenziellen Besucherinnen und Besucher zufrieden stellen kann, ist diese Investition sinnvoll. Immer mehr Besucher kaufen mobil Aktuelle Studien zeigen, dass immer mehr Besucher nicht nur mobil surfen, sondern auch mobil einkaufen. Beispiele aus der täglichen Praxis zeigen, dass bis zu 95% aller Einkäufe mit einem mobilen Gerät getätigt wurden. Vor allem im Bereich E-Commerce wirkt sich das Responsive Design damit direkt auf den Unternehmenserfolg aus. Diese Investition armortisiert sich innerhalb kürzester Zeit und kann zusätzlich dabei helfen, neue Käufergruppen zu erreichen. 5

6 Technische Voraussetzungen Die verschiedenen gängigen Browser erfüllen die Voraussetzungen für die Anzeige einer mobil optimierten Webseite oder Online-Shops. Lediglich einige ältere Versionen des Internet Explorer bieten keine integrierte Unterstützung für die CSS3 Media Queries an. Abhilfe schafft hier das Einbinden spezieller JavaScript-Bibliotheken, etwa css3-mediaqueries.js ( oder respond.js ( scottjehl/respond). Wenn Sie das Besucherverhalten Ihrer Webseite bereits heute beispielsweise mit Google Analytics auswerten, dann sehen Sie mit welchen Geräten und Browserversionen die Besucher Ihre Webseite nutzen. Diese Daten helfen dabei, die individuellen Voraussetzungen für ein Responsive Design zu bestimmen. Damit kann die mobile Optimierung ggf. spezifischer erfolgen oder detailliert auf Ihre Webseite zugeschnitten werden. Zusammenfassung Responsive Design ist die Lösung, um ein positives Besuchererlebnis über alle Geräte hinweg zu bieten. Kostspielige Pflegearbeiten und aufwändige Überlegungen für unterschiedliche Webseiten sind damit überflüssig. Ihre Webseite ist auch für zukünftige Geräte und Bildschirmgrössen bestens gerüstet. Eine professionelle Integration von Responsive Design ist heute in Content-Management-Systeme, wie Joomla! und Wordpress oder Online-Shop-Systeme, wie Magento und WooCommerce sehr gut möglich. Ein Responsive Design ist für eine aktuelle Webseite oder einen Online-Shop genauso interessant wie für eine Neuentwicklung oder einen Relaunch. Je nach Projekt und Budget gibt es grundsätzlich verschiedene Möglichkeiten, mit denen das Besuchererlebnis auf mobilen Geräte deutlich verbessert werden kann. 6

7 Glossar Back-End HTML Bezeichnet den Teil der Webseite, welcher im Hinter- Die Hypertext Markup Language (HTML) ist die Aus- grund läuft und z.b. Datenbankrecherchen an den zeichnungssprache in elektronischen Dokumenten. Browser liefert. Oft auch die Administrationsoberflä- Diese Dokumente können von Browsern dargestellt che der Webseite oder des Online-Shops. werden. CMS (Content-Management-System) JavaScript Ein meist modular aufgebautes System, welches Ist eine Skriptsprache welche es bspw. ermöglicht die Aufbereitung, Produktion und Publikation von Benutzerinteraktionen auszuwerten oder Inhalte zu Online-Inhalten unterstützt. verändern. CSS3 Media Queries Mit Cascading Style Sheets kann der Inhalt von Ein Konzept innerhalb von CSS3, mit welchem HTML-Dokumenten optisch verändert werden (z.b. Gestaltungsanweisungen abhängig von Geräteei- Farben, Schriftgrössen, Rahmen). Die aktuelle Versi- genschaften (z.b. Breite / Höhe oder Orientierung) on 3 bietet einen gesteigerten Funktionsumfang. definiert werden können. Flexible Grid Layouts Orientierung Bezeichnet das Gestaltungsraster einer Webseite in Bezeichnet die Ausrichtung eines Endgerätes im Spalten. Flexible Layouts passen sich an umgebende Querformat (Landscape) oder Hochformat (Portrait). Elemente und Bildschirmgrössen an. Responsive Images Front-End Bilder und Grafiken, welche in verschiedenen Grös- Steht für den Teil der Webseite, welchen der Besu- sen und Auflösungen vorliegen und auf Basis von cher sieht. Gegenstück zum Back-End. Geräteeigenschaften dynamisch geladen werden. Quellen

8 serecomm GmbH Forchstrasse Herrliberg