SHS Swiss Innovation Tour ITB Responsive Webdesign Unschlagbar schnelle Websites Web Analytics Tricks

Transkript

1 SHS Swiss Innovation Tour ITB 2014 Responsive Webdesign Unschlagbar schnelle Websites Web Analytics Tricks

2 Responsive Webdesign Ein Web für Alle

3 Die Geschichte des Mobile Web Android Galaxy ipad WAP 1997 Windows Mobile 2002 iphone 2007 Windows Phone Phablet

4 Wie viele Leute nutzen Mobile? Desktop Mobile Tablet 16 % Schwierig. 26 % 58 %

5 Noch mehr Bildschirmgrößen

6 Verschiedene Wege Native App: Schnell Offline Systemfunktionen Beschränkt auf ein System, muss installiert werden Mobile Site: Inhalte optimiert auf Mobile Individuell je Gerät (theoretisch!) Aufwändig zu pflegen Responsive Site: Geringer Pflegeaufwand Suchmaschinen- optimiert Meiste (auch zukünftige) Geräte abgedeckt

7 So funktioniert Responsive HTML

8 In der Praxis Drei Responsive Stufen + Abstufungen Liquid Design Einschränkungen

9 Erweiterungen Mobile First Verstecken von Inhalten Responsive Images JavaScript Anpassungen Widgets (Adaptive Design)

10 Beispiele

11 Schnellere Websites

12 Warum eigentlich? Lange Wartezeit führt zu Abbruch Schnelle Websites steigern Buchungen und Umsatz Verbinden mit Werten des Unternehmens Google Ranking Kriterium

13 Verschiedene Komponenten ergänzen sich Frontend Applikation Technische Infrastruktur

14 Frontend Design Zahl der Requests für eine Webseite reduzieren Größe eine Webseite reduzieren Wahl geeigneter Bilddateiformate verlustfreie Komprimierung von Bildern Zusammenfassen von CSS und JS Komprimierung von CSS und JS Verwenden von CSS Sprites & Iconfonts Bilder, CSS, JS und andere statische Lazy Loading: Bilder erst bei Bedarf laden (Slide Shows, Scrolling usw.) Frontend Programmierung optimieren Inhalte von einer anderen, Cookiefreien Domain ausliefern

15 Applikation Inhalte durch korrekten Einsatz von HTTP-Headern cachebar machen Soweit es geht auf Sessions verzichten Nicht benötigte Module und PlugIns deaktivieren Applikationsoptimierung durch Profiling und Identifizierung häufig genutzter oder langlaufender Programmteile sowie entsprechenden Umbau der Applikation

16 Technische Infrastruktur Einsatz schneller Serversoftware Einsatz von lokalem Caching Aktivierung komprimierter HTTP- Optimierung lokaler Systemeinstellungen Übertragung Provider in Bezug auf Anbindung prüfen Optimierung der Datenbanklösung DNS-Performance Messen und unter Intensivere Nutzung von RAM Schnellere Festplatten / SSD Umständen auf schnellere Provider wechseln! Zwischenschaltung eines Proxy-Servers Bei internationalen Kunden CDN benutzen

17 Über Caching CMS schluckt Zeit (dynamische Seiten) Statische Dateien sind schnell Daher wird das Ergebnis zwischengespeichert Einschränkungen: Individuell angepasste Websites

18 Über Caching CDN Caching Server (Proxy) CMS

19 Performance messen pagespeed/insights/ Gomez/Compuware

20 Web Analytics Tricks

21 SISTRIX Sichtbarkeits-Index Sichtbarkeit einer Domain in den organischen Google Suchergebnissen Basis: Rankings nach Suchvolumen und Position pro Keyword Messen der Veränderungen der Rankings

22 Google Analytics + SISTRIX SISTRIX Google Analytics

23 SISTRIX Sichtbarkeits-Index Gegensatz zu GA: kein Traffic-Index Ziel: non-brand Keywords entsprechend der Zielgruppe optimieren Keywords: Berücksichtigung der Machbarkeit (Pos., Konkurrenz) Benutzerdef. Keyword-Sets (Angebote, Hotel) / in GA gegenprüfen Schwierigkeit: not provided > 80% / GWT?

24 Typische Werte (unbez. Suche) 100% Gesamt-Traffic: 60% organisch 60% organisch 10 % Gute Absprungrate unter 30% 40 % 30 % 60 % 10% Neukunden 70 % 90 % organic Referrer + direkt non-brand brand (Name) unter 30 = gut 70 % bleiben

25 GA => UA Klassische GA wird zu UA (Migration / Update per Interface) Tracking Code muss aktualisiert werden 1. anstatt 5 CV => 20 Dim., 20 Met. 2. User tagging per Unique User ID + geräterübergreifendes Tracking 3. Cookieless / + Ladezeiten / Ausschließen von KW & Referrer etc.

26 UA Beispiel: Cross Device Tracking LOGIN

27 GTM 1) GTM Implement. (optional) datalayer = [{ 'websitetype':'mobile', 'pagelanguage': 'en', 'hotelcode': '123', 'event': 'contact', }]; 2) GTM tags was UA wann alle Seiten Wert UA-123 3) Übermitteln / UA

28 Measurement Protocol (beta) Daten per URL-Param. in GA schreiben (CRM?) 1. &t=event // Anweisung an GA event 2. &ec=itb2014 // event category 3. &ea=conversion // event action 4. &el=ennit // event label v=1&tid=ua &cid=123&t=event&ec=itb2014&ea=conversion &el=ennit Ergebnis