Andi Gentsch, INM AG. · Responsive Webdesign Mobile Website Break-Points und Fluid (Achtung: UX)...
Transcript of Andi Gentsch, INM AG. · Responsive Webdesign Mobile Website Break-Points und Fluid (Achtung: UX)...
![Page 1: Andi Gentsch, INM AG. · Responsive Webdesign Mobile Website Break-Points und Fluid (Achtung: UX) Separate URL (m.inm.ch) ... Workshop Author: timotheus.bruderer Created Date: 9/16/2015](https://reader034.fdocument.pub/reader034/viewer/2022050217/5f62eac2b1a4a1200247e302/html5/thumbnails/1.jpg)
Andi Gentsch, INM AG. @elGentscho
![Page 2: Andi Gentsch, INM AG. · Responsive Webdesign Mobile Website Break-Points und Fluid (Achtung: UX) Separate URL (m.inm.ch) ... Workshop Author: timotheus.bruderer Created Date: 9/16/2015](https://reader034.fdocument.pub/reader034/viewer/2022050217/5f62eac2b1a4a1200247e302/html5/thumbnails/2.jpg)
Alltagsgegenstände
6.5 Mia. 4.5 Mia.
![Page 3: Andi Gentsch, INM AG. · Responsive Webdesign Mobile Website Break-Points und Fluid (Achtung: UX) Separate URL (m.inm.ch) ... Workshop Author: timotheus.bruderer Created Date: 9/16/2015](https://reader034.fdocument.pub/reader034/viewer/2022050217/5f62eac2b1a4a1200247e302/html5/thumbnails/3.jpg)
70% der Mails auf Mobile Phones.
![Page 4: Andi Gentsch, INM AG. · Responsive Webdesign Mobile Website Break-Points und Fluid (Achtung: UX) Separate URL (m.inm.ch) ... Workshop Author: timotheus.bruderer Created Date: 9/16/2015](https://reader034.fdocument.pub/reader034/viewer/2022050217/5f62eac2b1a4a1200247e302/html5/thumbnails/4.jpg)
SEO
Wovon sprechen wir?
![Page 5: Andi Gentsch, INM AG. · Responsive Webdesign Mobile Website Break-Points und Fluid (Achtung: UX) Separate URL (m.inm.ch) ... Workshop Author: timotheus.bruderer Created Date: 9/16/2015](https://reader034.fdocument.pub/reader034/viewer/2022050217/5f62eac2b1a4a1200247e302/html5/thumbnails/5.jpg)
SEO
Responsive passt sich an, ändert aber die URL nicht.
Was bedeutet Responsive?
![Page 6: Andi Gentsch, INM AG. · Responsive Webdesign Mobile Website Break-Points und Fluid (Achtung: UX) Separate URL (m.inm.ch) ... Workshop Author: timotheus.bruderer Created Date: 9/16/2015](https://reader034.fdocument.pub/reader034/viewer/2022050217/5f62eac2b1a4a1200247e302/html5/thumbnails/6.jpg)
SEO
Was bedeutet Responsive?
![Page 7: Andi Gentsch, INM AG. · Responsive Webdesign Mobile Website Break-Points und Fluid (Achtung: UX) Separate URL (m.inm.ch) ... Workshop Author: timotheus.bruderer Created Date: 9/16/2015](https://reader034.fdocument.pub/reader034/viewer/2022050217/5f62eac2b1a4a1200247e302/html5/thumbnails/7.jpg)
SEO
Responsive vs. Mobile Website.
Responsive Webdesign Mobile Website
Break-Points und Fluid (Achtung:
UX)
Separate URL (m.inm.ch)
Einmalige Pflege Separate Pflege der Inhalte
Ideale Darstellung auf allen
Endgeräten
Template pro Endgerät nötig
SEO ist einfacher SEO ist komplexer (duplicate
Content)
Aufwendiger und technisch
komplexer
Günstiger und schneller kreiert
Einfachere, statistische
Auswertungen
Besucher kommen nur über ein
Endgerät
Höhere Ladezeiten, da „schwerer“ Einfacher Aufbau und schnellere
Ladezeit
Einfacheres Marketing Mehrere Sites müssen beworben
werden
![Page 8: Andi Gentsch, INM AG. · Responsive Webdesign Mobile Website Break-Points und Fluid (Achtung: UX) Separate URL (m.inm.ch) ... Workshop Author: timotheus.bruderer Created Date: 9/16/2015](https://reader034.fdocument.pub/reader034/viewer/2022050217/5f62eac2b1a4a1200247e302/html5/thumbnails/8.jpg)
SEO
Prozessbezogene Unterschiede.
Apps vs. Responsive/ Mobile Website.
![Page 9: Andi Gentsch, INM AG. · Responsive Webdesign Mobile Website Break-Points und Fluid (Achtung: UX) Separate URL (m.inm.ch) ... Workshop Author: timotheus.bruderer Created Date: 9/16/2015](https://reader034.fdocument.pub/reader034/viewer/2022050217/5f62eac2b1a4a1200247e302/html5/thumbnails/9.jpg)
SEO
Grundsätzliche Unterschiede im Funktionsumfang.
Apps vs. Responsive/ Mobile Website.
![Page 10: Andi Gentsch, INM AG. · Responsive Webdesign Mobile Website Break-Points und Fluid (Achtung: UX) Separate URL (m.inm.ch) ... Workshop Author: timotheus.bruderer Created Date: 9/16/2015](https://reader034.fdocument.pub/reader034/viewer/2022050217/5f62eac2b1a4a1200247e302/html5/thumbnails/10.jpg)
SEO
Apps sind im Lead, was die Nutzung betrifft.
Apps vs. Responsive Webdesign.
![Page 11: Andi Gentsch, INM AG. · Responsive Webdesign Mobile Website Break-Points und Fluid (Achtung: UX) Separate URL (m.inm.ch) ... Workshop Author: timotheus.bruderer Created Date: 9/16/2015](https://reader034.fdocument.pub/reader034/viewer/2022050217/5f62eac2b1a4a1200247e302/html5/thumbnails/11.jpg)
SEO
Eine App für alle Fälle.
![Page 12: Andi Gentsch, INM AG. · Responsive Webdesign Mobile Website Break-Points und Fluid (Achtung: UX) Separate URL (m.inm.ch) ... Workshop Author: timotheus.bruderer Created Date: 9/16/2015](https://reader034.fdocument.pub/reader034/viewer/2022050217/5f62eac2b1a4a1200247e302/html5/thumbnails/12.jpg)
SEO
Verfügbare Apps.
Wofür nutzen die User Apps und wofür bevorzugen sie Browser-Lösungen?
![Page 13: Andi Gentsch, INM AG. · Responsive Webdesign Mobile Website Break-Points und Fluid (Achtung: UX) Separate URL (m.inm.ch) ... Workshop Author: timotheus.bruderer Created Date: 9/16/2015](https://reader034.fdocument.pub/reader034/viewer/2022050217/5f62eac2b1a4a1200247e302/html5/thumbnails/13.jpg)
SEO
Die Schweiz ist ein
App-Land.
Dies sind die
beliebtesten Dienste
der Schweizer. upc-cablecom.ch/de/mobile/smartphone-
apps-schweiz/
Was geht APP?
![Page 14: Andi Gentsch, INM AG. · Responsive Webdesign Mobile Website Break-Points und Fluid (Achtung: UX) Separate URL (m.inm.ch) ... Workshop Author: timotheus.bruderer Created Date: 9/16/2015](https://reader034.fdocument.pub/reader034/viewer/2022050217/5f62eac2b1a4a1200247e302/html5/thumbnails/14.jpg)
SEO
104 Apps, von stündlich über vierteljährlich bis nie.
Anzahl genutzter Apps.
![Page 15: Andi Gentsch, INM AG. · Responsive Webdesign Mobile Website Break-Points und Fluid (Achtung: UX) Separate URL (m.inm.ch) ... Workshop Author: timotheus.bruderer Created Date: 9/16/2015](https://reader034.fdocument.pub/reader034/viewer/2022050217/5f62eac2b1a4a1200247e302/html5/thumbnails/15.jpg)
SEO
Location Tracking, Push-Nachrichten, Bluetooth
Offline Modi, Kamera und Mails auslesen
Runtastic und TripIt
![Page 16: Andi Gentsch, INM AG. · Responsive Webdesign Mobile Website Break-Points und Fluid (Achtung: UX) Separate URL (m.inm.ch) ... Workshop Author: timotheus.bruderer Created Date: 9/16/2015](https://reader034.fdocument.pub/reader034/viewer/2022050217/5f62eac2b1a4a1200247e302/html5/thumbnails/16.jpg)
SEO
Der Buildster, ein Tool für Bauherren und Anbieter.
Apps passen sich Nischen an.
![Page 17: Andi Gentsch, INM AG. · Responsive Webdesign Mobile Website Break-Points und Fluid (Achtung: UX) Separate URL (m.inm.ch) ... Workshop Author: timotheus.bruderer Created Date: 9/16/2015](https://reader034.fdocument.pub/reader034/viewer/2022050217/5f62eac2b1a4a1200247e302/html5/thumbnails/17.jpg)
SEO
Suchen und Finden.
![Page 18: Andi Gentsch, INM AG. · Responsive Webdesign Mobile Website Break-Points und Fluid (Achtung: UX) Separate URL (m.inm.ch) ... Workshop Author: timotheus.bruderer Created Date: 9/16/2015](https://reader034.fdocument.pub/reader034/viewer/2022050217/5f62eac2b1a4a1200247e302/html5/thumbnails/18.jpg)
SEO
Nutzung von Endgeräten zur Suche im Internet.
Suche im Netz.
![Page 19: Andi Gentsch, INM AG. · Responsive Webdesign Mobile Website Break-Points und Fluid (Achtung: UX) Separate URL (m.inm.ch) ... Workshop Author: timotheus.bruderer Created Date: 9/16/2015](https://reader034.fdocument.pub/reader034/viewer/2022050217/5f62eac2b1a4a1200247e302/html5/thumbnails/19.jpg)
Google gewichtet mobile immer stärker und rückt
auch Apps gezielt in den Fokus.
Mobile Suche.
![Page 20: Andi Gentsch, INM AG. · Responsive Webdesign Mobile Website Break-Points und Fluid (Achtung: UX) Separate URL (m.inm.ch) ... Workshop Author: timotheus.bruderer Created Date: 9/16/2015](https://reader034.fdocument.pub/reader034/viewer/2022050217/5f62eac2b1a4a1200247e302/html5/thumbnails/20.jpg)
SEO
Location based – Google mischt mit.
Standortbezogene Suche.
![Page 21: Andi Gentsch, INM AG. · Responsive Webdesign Mobile Website Break-Points und Fluid (Achtung: UX) Separate URL (m.inm.ch) ... Workshop Author: timotheus.bruderer Created Date: 9/16/2015](https://reader034.fdocument.pub/reader034/viewer/2022050217/5f62eac2b1a4a1200247e302/html5/thumbnails/21.jpg)
SEO
Google MyBusiness ersetzt Telefonbücher.
Google, das Telefonbuch.
![Page 22: Andi Gentsch, INM AG. · Responsive Webdesign Mobile Website Break-Points und Fluid (Achtung: UX) Separate URL (m.inm.ch) ... Workshop Author: timotheus.bruderer Created Date: 9/16/2015](https://reader034.fdocument.pub/reader034/viewer/2022050217/5f62eac2b1a4a1200247e302/html5/thumbnails/22.jpg)
SEO
Google löscht unbestätigte Einträge aus Maps.
Google MyBusiness.
![Page 23: Andi Gentsch, INM AG. · Responsive Webdesign Mobile Website Break-Points und Fluid (Achtung: UX) Separate URL (m.inm.ch) ... Workshop Author: timotheus.bruderer Created Date: 9/16/2015](https://reader034.fdocument.pub/reader034/viewer/2022050217/5f62eac2b1a4a1200247e302/html5/thumbnails/23.jpg)
SEO
Über den Tag verteilt Nutzung.
Nutzung von Endgeräten.
![Page 24: Andi Gentsch, INM AG. · Responsive Webdesign Mobile Website Break-Points und Fluid (Achtung: UX) Separate URL (m.inm.ch) ... Workshop Author: timotheus.bruderer Created Date: 9/16/2015](https://reader034.fdocument.pub/reader034/viewer/2022050217/5f62eac2b1a4a1200247e302/html5/thumbnails/24.jpg)
SEO
Tablets werden vor allem zu Hause eingesetzt.
Fokussieren Sie im Business auf Smartphones.
Nutzung von Endgeräten.
![Page 25: Andi Gentsch, INM AG. · Responsive Webdesign Mobile Website Break-Points und Fluid (Achtung: UX) Separate URL (m.inm.ch) ... Workshop Author: timotheus.bruderer Created Date: 9/16/2015](https://reader034.fdocument.pub/reader034/viewer/2022050217/5f62eac2b1a4a1200247e302/html5/thumbnails/25.jpg)
• Werden Smartphone-Funktionen gebraucht?
• Ist Personalisierung gefragt?
• Ist das UI/ Design komplex?
• Haben Sie ein limitiertes Budget?
• Soll der Inhalt monetarisiert werden?
• Ist SEO ein Thema?
• Wird die App Store Zulassung schwierig?
• Werden grosse Datenmengen versendet?
• Werden häufig Updates vollzogen?
• Soll der Zugriff Endgerät unabhängig sein?
SEO
Die 10 Punkte Entscheidungs-Matrix.
![Page 26: Andi Gentsch, INM AG. · Responsive Webdesign Mobile Website Break-Points und Fluid (Achtung: UX) Separate URL (m.inm.ch) ... Workshop Author: timotheus.bruderer Created Date: 9/16/2015](https://reader034.fdocument.pub/reader034/viewer/2022050217/5f62eac2b1a4a1200247e302/html5/thumbnails/26.jpg)
1) Machen Sie sich mobil!
2) Prüfen Sie Aufwand und Ertrag vor und nach dem
Go-Live.
3) Welchen Mehrwert bietet Ihr Ansatz der
Zielgruppe?
4) Inhalte entscheiden, bei jedem Ansatz.
5) Bedienen Sie Plattformen wie Google MyBusiness.
6) Machen Sie sich mobil!
![Page 27: Andi Gentsch, INM AG. · Responsive Webdesign Mobile Website Break-Points und Fluid (Achtung: UX) Separate URL (m.inm.ch) ... Workshop Author: timotheus.bruderer Created Date: 9/16/2015](https://reader034.fdocument.pub/reader034/viewer/2022050217/5f62eac2b1a4a1200247e302/html5/thumbnails/27.jpg)
…übrigens: 18 Mal mehr Bakterien.
![Page 28: Andi Gentsch, INM AG. · Responsive Webdesign Mobile Website Break-Points und Fluid (Achtung: UX) Separate URL (m.inm.ch) ... Workshop Author: timotheus.bruderer Created Date: 9/16/2015](https://reader034.fdocument.pub/reader034/viewer/2022050217/5f62eac2b1a4a1200247e302/html5/thumbnails/28.jpg)
Andi Gentsch, INM AG. @elGentscho