Wie werden mobile Patterns so angewendet, dass sich die Benutzer optimal zurecht finden? An zwei Praxisbeispielen zeige ich häufige (handwerkliche) Fehler und wie man sie vermeiden kann. Der Vortrag stammt von der PORT #2, einer Veranstaltung von KOCHAN & PARTNER. Mehr Informationen hier: http://www.kochan.de/port-2

1. Kochan & Partner
Brand
Design
Development
Mobility
Do’s und Don’ts im mobilen Web
Markus Greve
zur PORT #2 am 27. Januar 2016
Mit-Teilen: Wo Dich das Rascheln von Laub
aufspürt, der Flügelschlag einer Graugans. Wo
Ideen lässig landen und Musen sich zum Kuss
aufreihen. VERSUCH ÜBER DAS GEMEINSAME:
www.kochan.de/experiment

2. Kochan & Partner Brand Design Development2
Markus Greve
KOCHAN & PARTNER
BRAND DESIGN DEVELOPMENT
T +49 89 17860–150
E markus.greve@kochan.de
 @mrmontezuma
Hello!
Slides de.slideshare.net/markusgreve/

3. Kochan & Partner Brand Design Development
Mobility
DO’s und Don’ts im mobilen Web
Insights unserer Arbeit
Und gerne die eine oder andere Frage danach.
3

4. Kochan & Partner Brand Design Development4
________
SIZEMATTERS
Und es kommt doch auf die Größe an
________

5. Kochan & Partner Brand Design Development5
Accelerated Mobile Pages (AMP)
»Die Einführung mobiler SERPS im April 2015 war
ein klares Zeichen an alle Webmaster, wie ernst es
Google mit der mobilen Suche ist – und mit der
Ankündigung von AMP wird dieser Weg konsequent
weitergeführt (…)
Es muss endlich Schluss sein mit 23MB großen
Seiten, auf die ich dann mit Edge in der Bahn
warten soll«
Raphael Raue Head of SEO bei Spiegel Online

6. Kochan & Partner Brand Design Development6
Accelerated Mobile Pages (AMP)
»Die Einführung mobiler SERPS im April 2015 war
ein klares Zeichen an alle Webmaster, wie ernst es
Google mit der mobilen Suche ist – und mit der
Ankündigung von AMP wird dieser Weg konsequent
weitergeführt (…)
Es muss endlich Schluss sein mit 23MB großen
Seiten, auf die ich dann mit Edge in der Bahn
warten soll«
Raphael Raue Head of SEO bei Spiegel Online

7. Kochan & Partner Brand Design Development7
Quelle www.websiteoptimization.com
0
450
900
1.350
1.800
95 96 97 98 99 01 02 03 04 05 06 07 08 09 10 11 12 13 14
Anzahl Objekte
Seitengröße (KB)

8. Kochan & Partner Brand Design Development7
Quelle www.websiteoptimization.com
0
450
900
1.350
1.800
95 96 97 98 99 01 02 03 04 05 06 07 08 09 10 11 12 13 14
Anzahl Objekte
Seitengröße (KB)
2 26 50 65 85 88 101 108 112

9. Kochan & Partner Brand Design Development7
Quelle www.websiteoptimization.com
0
450
900
1.350
1.800
95 96 97 98 99 01 02 03 04 05 06 07 08 09 10 11 12 13 14
Anzahl Objekte
Seitengröße (KB)
14
94
312
507
679
788
1.081
1.529
1.622
2 26 50 65 85 88 101 108 112

10. Kochan & Partner Brand Design Development7
Quelle www.websiteoptimization.com
0
450
900
1.350
1.800
95 96 97 98 99 01 02 03 04 05 06 07 08 09 10 11 12 13 14
Anzahl Objekte
Seitengröße (KB)
14
94
312
507
679
788
1.081
1.529
1.622
2 26 50 65 85 88 101 108 112
Durchschnitt (!) 2014
1,6 MB

11. Kochan & Partner Brand Design Development8
»… whilst flashy visuals may attract customers by
making a great first impression, building a long
lasting customer relationship actually depends on
the quality of the experience through how that
website performs.«
Michael Allen Vicepresident of APM at Compuware

13. Kochan & Partner Brand Design Development11
Handarbeit
Beispiel Responsive Images

14. Kochan & Partner Brand Design Development11
Handarbeit
Beispiel Responsive Images

15. Kochan & Partner Brand Design Development12
Google official Blog
October 2015

16. Kochan & Partner Brand Design Development12
Google official Blog
October 2015
Accelerated
Mobile
Pages
Project

17. Kochan & Partner Brand Design Development12
Google official Blog
October 2015
Accelerated
Mobile
Pages
Project

18. Kochan & Partner Brand Design Development12
Google official Blog
October 2015
Accelerated
Mobile
Pages
Project

19. Kochan & Partner Brand Design Development13
________
USERS
INTENT
Was wollen meine Besucher?
________

20. Kochan & Partner Brand Design Development14
Good user experience is
about matching intent.
Quelle sitetuners.com

21. Analyse & Vorhersage
Theorie & Wirklichkeit

25. ?

26. Gängelung durch
reduzierte Inhalte
?

29. Responsive Websites
mit Miniatur-Grafiken
Unterdrückter Zoom

30. Gängelung vermeiden
Mobile Weiche

31. Gängelung vermeiden
Mobile Weiche

32. Gängelung vermeiden
Mobile Weiche
Zur WWW-Version
Zur Mobil-Version
Automatische Vorauswahl
Änderbar durch den Besucher

33. Gängelung vermeiden
Grafiken

34. Gängelung vermeiden
Grafiken

35. Gängelung vermeiden
Grafiken

36. Gängelung vermeiden
Grafiken

37. Gängelung vermeiden
Grafiken
Größe der Abbildungen
Vollbild-Ansicht,
Zoombar

38. Kochan & Partner
Brand
Design
Development
Vielen Dank!