Workshop zu Anforderungen an Websites und -plattformen im Kontext mobiler Nutzung

1. ||
Responsive Webdesign
Workshop für Produkt- und Projektverantwortliche von Web-Angeboten
Maximiliane Okonnek | Bernd Uttenweiler
23.04.2015

2. ||
 Was ist ‘responsives Webdesign’?
 Warum ‘responsive Webdesign’?
 Mobilfähige Webangebote im Kontext digitaler
Positionierung
 Neue Webtrends als Spiegel der verbreiteten
Smartphone-Nutzung
23.04.2015 2
Inhalt – Teil 1
Maximiliane Okonnek

3. ||
Zusammenfassung
23.04.2015 3
Was ist ‘responsive Webdesign’?
Maximiliane Okonnek

4. ||
… bedeutet im übertragenden Sinn:
«reagierendes Webdesign»
D. h. die Website-Elemente passen sich der Grösse des
aufrufenden Endgerätes an:
 Inhaltselemente
 Navigationselemente
 Struktureller Aufbau der Website
 Das Webdesign folgt dem Nutzenden (und nicht dieser
dem konstruierten Layout).
23.04.2015 4
Responsive Webdesign
Maximiliane Okonnek

5. || 23.04.2015 5
Responsive Webdesign - schematisch
Quelle: http://www.i-group.de
Maximiliane Okonnek

6. || 23.04.2015 6
Responsive Webdesign – Wissensportal
Maximiliane Okonnek

7. ||
Unabhängig von unterschiedlichen Gerätetypen der Erhalt
von:
 Gesamtästhetik
 Usability
 User Experience (UX)
23.04.2015 7
Ziel einer responsiven Website?
Maximiliane Okonnek

8. ||
Zusammenfassung
23.04.2015 8
Warum ‘responsive Webdesign’?
Maximiliane Okonnek

9. || 23.04.2015 9
Blick auf das digitale Umfeld der ETH-Bibliothek
IPMZ - Institute of Mass Communication and Media Research
Media Change & Innovation Division (www.mediachange.ch)
Maximiliane Okonnek

10. || 08.03.2016 10
Touch-Screen Technologie – Treiber für das
mobile Web
Maximiliane Okonnek

11. ||
Aktuell vor allem:
 Desktop-Computer
 Notebook
 Tablets
 Phablets
 Smartphones
zunehmende Relevanz von:
 Smart Watches
 Smart TV
 Kamera-Displays
23.04.2015 11
Grosse Vielfalt an Endgeräten
Maximiliane Okonnek

12. || 08.03.2016 12
2014: Mobile Internetnutzung als Mainstream
Quelle: Y&R Media Use Index Schweiz 2014
Maximiliane Okonnek

13. || 23.04.2015 13
Digital Omnivores als Mainstream
Umfrage unter Personen aus dem Bereich Gesundheitswesen, die regelmässig
und in professionellem Umfeld Notebook, Tablet und Smartphone einsetzen
Quelle: Epocrates Mobile Trends Survey 2013
Maximiliane Okonnek

14. ||
Das bedeutet für die Entwicklung digitaler Produkte
idealerweise einen sogenannten
«mobile first» Ansatz.
23.04.2015 14
«Der primäre Bildschirm ist mobil.»
Maximiliane Okonnek

15. ||
Zusammenfassung
23.04.2015 15
Mobilfähige Webangebote im
Kontext digitaler Positionierung
Maximiliane Okonnek

16. || 23.04.2015 16
Medienmarken in der Schweiz
Maximiliane Okonnek

17. || 17
Wie sieht der
Googlebot das
eigene Web-
angebot?
z. B.
Wissensportal
Worüber ist weiter nachzudenken …
Maximiliane Okonnek 23.04.2015

18. ||
Testen Sie eine der Websites der ETH-Bibliothek mit dem
Google Developers Tool «Optimierung für Mobilgeräte»
23.04.2015 18
Aufgabe
Quelle: https://www.google.com/webmasters/tools/mobile-friendly/
Maximiliane Okonnek

19. ||
Wie integrieren unterschiedliche Software-Lösungen im mobilen Kontext,
die in einer Plattform zusammengeführt werden?
08.03.2016 19
Worüber ist weiter nachzudenken …
Wissensportal
CMS
versus
Primo Discovery Tool
Maximiliane Okonnek

20. || 20
Worüber ist weiter nachzudenken …
Sind die in eine
Website
eingebetteten Inhalte
mobilfähig?
z. B. Slideshare-
Präsentation via
Frames in Website
eingebunden

21. ||
Wie mobilfreundlich
sind dargereichte
Dokumenttypen?
z. B. Gebührenblatt
der ETH-Bibliothek
auf dem Smartphone-
Display
23.04.2015 21
Worüber ist weiter nachzudenken …
Maximiliane Okonnek

22. ||
Entstehen Brüche bei Workflows, die plattformübergreifend ablaufen
(z.B. Transaktionsabschlüsse auf Fremd-Aggregatoren oder
Datenbanken)?
23.04.2015 22
Worüber ist weiter nachzudenken …
Wissensportal E-Lending: EBL Aggregator

23. ||
Entstehen
Medienbrüche im
Zuge der externen
Social Media
Integration von
Kommunikations-
inhalten?
z. B. Facebook-
Beiträge mit links
auf ETHeritage
08.03.2016 23
Worüber ist weiter nachzudenken …
Maximiliane Okonnek

24. ||
Wie sehen die Seitenladezeiten für Tablets und Smartphones aus?
23.04.2015 24
Worüber ist weiter nachzudenken …
Quelle: https://developers.google.com/speed/pagespeed/insights/
Maximiliane Okonnek

25. ||
Zusammenfassung
23.04.2015 25
Allgemeine Webtrends
als Reaktion auf Webdesign
für kleine Endgeräte
Maximiliane Okonnek

26. || 23.04.2015 26
Versteckte Navigationsmenüs
Maximiliane Okonnek

27. || 08.03.2016 27
Vertikales Scrollen als unproblematische Form
der Navigation
Quelle: http://www.cxpartners.co.uk/cxblog/the_myth_of_the_page_fold_evidence_from_user_testing/
Maximiliane Okonnek

28. || 23.04.2015 28
Grosse Typografie
Quelle: http://www.paul-rand.com/
Maximiliane Okonnek

29. ||
je nach Gerät, Inhalte z.
T. ausserhalb des
sichtbaren Bereichs &
bei Bedarf ohne
Scrollen zugänglich
23.04.2015 29
Off-Canvas
Quelle: http://jasonweaver.name/lab/offcanvas/
Maximiliane Okonnek

30. ||
Zusammenfassung
23.04.2015 30
Zusammenfassung
Maximiliane Okonnek

31. ||
 Konstante Nutzerfreundlichkeit (Usability) auf unterschiedlichen
Geräten
 Konsistente Nutzungserfahrung (User Experience) unabhängig von
Hardware-Aspekten
 Vermeidung von Medienbrüchen, wenn Nutzende von mobilfähigen
Drittangeboten auf Webangebote der ETH-Bibliothek gelangen.
 Weniger Aufwand für technischen Unterhalt im Vergleich zu
Doppelstrategien (Desktop- und Mobilversion)
 Weniger redaktioneller Aufwand für Publishing von Content und
Bildern
 Keine neuen Spezialentwicklungen für zukünftige Geräteformate
nötig
23.04.2015 31
Responsive Webdesign - Vorteile
Maximiliane Okonnek

32. ||
 Websiteaufruf für alle Geräte über gleiche URL möglich
 Bevorzugung mobilfähiger Websites im Google Ranking
 SEO-Massnahmen nur für eine Seite
23.04.2015 32
Responsive Webdesign - Vorteile
Maximiliane Okonnek

33. ||
Responsive Webdesign - Nachteile
 Konzeptionelle Mehrarbeit bei Website-Erstellung nötig
 Teilweise längerer Code, dadurch u. U. grösserer Entwicklungs- und
Pflegeaufwand für IT
 Zusätzliches Projektbudget für Web-Performance-Optimierung
(WPO) erforderlich, um lange Ladezeiten (insbesondere bei kleinen
Gerätetypen) zu vermeiden
 Redaktioneller Mehraufwand bei Entwicklung der Content- und
Bildstrategie (Textlänge/Bildinhalte)
 Mehraufwand bei der Einbindung von Seitenelementen via Frames
(Video, Slides etc.)
23.04.2015 33Maximiliane Okonnek

34. ||
 Die Welt ist unsicher
 Der Kunde entscheidet. Immer!
 Firstclass User Experience über alles
 Spielen Sie auf Angriff, nicht auf Verteidigung
 Bleiben Sie neugierig
 Seien Sie agil und flexibel
 Unterschätzen Sie nie neue oder kleine Akteure
 Weniger "Ja, aber". Mehr "Ja, wieso nicht".
08.03.2016 34
Digital Leaders Manifesto (HWZ)
Maximiliane Okonnek
Quelle: Vortrag #SOM15 von M. Nappo, Leiter Fachstelle Social Media Management, HWZ

35. || 23.04.2015 35
Und jetzt erst mal Kaffeepause …
… und dann weiter mit Bernd Uttenweiler

36. ||
 Aspekte Responsiven Webdesigns
 Beispiele in unseren Portalen
 Strategie
23.04.2015 36
Inhalt
Bernd Uttenweiler

37. ||
Zusammenfassung
23.04.2015 37
Aspekte Responsiven Webdesigns
Bernd Uttenweiler

38. ||
 Bildschirmgrösse von Desktop bis Smartphones (oder von TV bis
Wearables)
 Grösse des Browserfensters (falls veränderbar)
 Entfernung zum Bildschirm (TV vs. Smartphone)
 Device Pixel Ratio (Retina)
 Flexibilität ist das Wesen des Webs: die ersten Generationen von
Webseiten waren sehr flexibel.
 Fixe Breiten sind vom Print-Design geprägt. Designer wollten exakte
Kontrolle insbesondere auch beim Einsatz von Bildern.
23.04.2015Bernd Uttenweiler 38
Was wissen wir vom Web des Benutzers:
Bildschirm
Bernd Uttenweiler

39. ||
 Unterschiedliche Bandbreite der Internet-Verbindung
 Unterschiedliche Technik der Verbindung
(z.B. GPRS mit hohem Aufwand pro Request)
 Geografische Entfernung
 Unterschiedliche Geschwindigkeit im Parsen und Ausführen
von CSS und Javascript
 Z.B. auch Fähigkeiten beim Umsetzen von Animationen: wie
ruckelig ist es (CPU, GPU)?
 Wahrgenommene Performance und tatsächliche Seitenladezeit
23.04.2015 39
Was wissen wir vom Web des Benutzers:
Geschwindigkeit
Bernd Uttenweiler

40. ||
 Eingestellte Standardschriftgrösse des Browsers (meist 16px)
veränderbar.
 Verschiedene Eingabemethoden: Maus, Touch, Gesten, Tastatur,
Sprache, Trackpad
 Ausgabemöglichkeiten: Display, Sprache, Notifications
 Fähigkeiten des Browsers
(neue Techniken aus HTML, CSS und Javascript)
 Vor einigen Jahren waren im mobilen Web Blackberry-Phones mit
Tastatur dominant! Hier funktionierte nur eine minimalistische Web-
Strategie.
23.04.2015 40
Was wissen wir vom Web des Benutzers:
Verschiedenes
Bernd Uttenweiler

41. ||
 Unterschiedliche Umgebungen des Benutzers
(Licht, Ablenkung)
 Sich verändernde Erwartungen des Benutzers
23.04.2015 41
Was wissen wir vom Web des Benutzers:
Kontext
Bernd Uttenweiler

42. ||
 Mit der Entwicklung des Webs prägte sich die Erwartungshaltung der
Nutzer, Informationen schnell und einfach finden zu können.
 Dazu gehört die Erwartung, Informationen und Verweise auch über
gängige Such-GUIs zu finden.
 Er erwartet, dass Informationen miteinander verknüpft sind.
 Und dies unabhängig von Raum und Zeit. Und unabhängig vom
Gerät.
 Und immer soll es gut und angemessen aussehen.
23.04.2015 42
Was wissen wir vom Benutzer?
Bernd Uttenweiler

43. ||
 Es gibt immer schneller immer mehr Geräte
 Es gibt immer schneller neue Browserversionen
 Die verfügbaren Techniken werden immer zahlreicher und komplexer
 Im Web bleiben alte Geräte und Browser lange aktiv
 Das Web ist flexibel und unvorhersehbar
23.04.2015 43
Alles wird komplexer…
Bernd Uttenweiler

44. ||
 Flexibles Layout im Gestaltungsraster (gibt es schon lange)
 Variables Gestaltungsraster: Media Queries
 Die Inhalte müssen sich anpassen dürfen
 Flexibel eingebundene Medien z.B. responsive Images (Grösse!),
Videos, Slides
 Neue Techniken entwickeln sich rasch (z.B. CSS Grids)
 URL - Konzept
23.04.2015 44
Zutaten zu einer Lösung
Bernd Uttenweiler

45. ||
 Eine URL ist eindeutig für eine Ressource (Seite, Suchergebnis,
Objekt usw.), eindeutig über Geräte hinweg, teilbar, persistent, lesbar.
 Wenn die URL in Social Media Kanälen, Webseiten, Nachrichten o.a.
verwendet wird, dann landet man immer richtig, egal auf welchem
Gerät man den Link wählt.
 Sie repräsentiert eine Ressource, die gerätespezifisch etwas anders
aussehen und bedienbar sein kann (aber soll immer gut aussehen
und einfach bedienbar sein).
23.04.2015 45
One Web, One URL
Bernd Uttenweiler

46. ||
Zusammenfassung
23.04.2015 46
Beispiele in unseren Portalen
Bernd Uttenweiler

47. ||
 Container-Anordnung ändert sich (nicht nur durch floaten)
 Formular: Anfragen/Anschaffungsvorschläge
 Seitenelemente müssen sich auch anpassen
 Flexibel eingebundene Medien: Video, Bilder, Maps, Slides,
Landeskarten
 Responsive Tabellen (Schulungen-Tutorials-Schulungen)
 Navigationsstruktur
23.04.2015 47
Beispiel Wissensportal CMS
@media (min-width: 750px)
{
.col-sm-8 {width: 66.66666666666666%;}
}
Bernd Uttenweiler

48. ||
 Position der Headerbereiche
 Kein visuelles Abschneiden rechts (bzw. Scrollbar)
 Bessere Raumnutzung auf breiten Bildschirmen
 Grösse Bedienelemente: Pagination Ergebnisliste und Detailseite
 Touch in Zitierungs-Lightbox (Aktion des Details-Tabs)
 Schriftgrössenveränderung wirkt korrekter
 WPO: Dateien werden zusammengefasst und minifiziert, aber kein
effizientes Caching
23.04.2015 48
Beispiel Wissensportal Primo
Bernd Uttenweiler

49. ||
 www.recherche-portal.ch
 Reinzoomen/Rauszoomen ist verhindert
 Schlechtes Viewport Metatag
23.04.2015 49
Beispiel Rechercheportal Primo
Bernd Uttenweiler

50. ||
 Bilder-Container floaten und passen sich Bildschirmbreite an
 Header hat eine statische Mindestbreite von 1024px und verhindert
flexibles Verhalten der Gesamtseite.
 Kein Viewport Metatag:
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
 Manche Navigations-Elemente sind zu klein oder haben zu kleinen
Abstand (Touchscreens)
 Sehr viele Requests (auch ohne Bildern)
23.04.2015 50
Beispiel E-Pics
Bernd Uttenweiler

51. ||
 Seitenlayout ist mit Layout-Tabellen gebaut statt CSS
 Verschiedene feste Pixel-Breiten
 iPad: Startseite rechts beschnitten
 Viele Navigations-Elemente sind zu klein (Touchscreens)
 Zum Bedienen muss immer reingezoomt werden
23.04.2015 51
Beispiel e-rara.ch
Bernd Uttenweiler

52. ||
Zusammenfassung
23.04.2015 52
Strategie
Bernd Uttenweiler

53. ||
 Es gibt immer schneller immer mehr Geräte
 Es gibt immer schneller neue Browserversionen
 Die verfügbaren Techniken werden immer zahlreicher und komplexer
 Im Web bleiben alte Geräte und Browser lange aktiv
 Das Web ist flexibel und unvorhersehbar
 Es gibt Lösungsansätze für einige Probleme, aber …
 es gibt keine einfachen Regeln für alle Situationen
 es gibt wenige jahrelang gültigen Regeln oder Verfahren
23.04.2015 53
Alles wird immer komplexer…
Bernd Uttenweiler

54. ||
 Verständnis von Wissen und Handeln ändert sich
 Anpassungsfähigkeit durch Einsatz modernen Techniken
 Arbeitsmethodik
 Komplexeres Testen
23.04.2015 54
Frage der Strategie: Wie gehen wir damit um?
Bernd Uttenweiler

55. ||
 Situativ intelligentes Handeln Fachkundiger
 weniger administrative Steuerbarkeit
 stetiges Lernen -> Offenheit + Lernbereitschaft + Erfahrungen und
Wissen teilen
 Die Entwicklungs-Kultur muss sich stetig ändern
23.04.2015 55
Wandel in der Art des Wissens und Handelns
Bernd Uttenweiler

56. ||
 In den letzten Jahren haben sich neue Techniken im Web etabliert,
die sich stetig fortentwickeln: HTML5, CSS3, Media Queries,
Responsive Images usw.. Diese Techniken und deren Entwicklung
werden von den grossen Playern unterstützt und gemeinsam
vorangetrieben.
 Nur in dem Masse, in dem wir diese Techniken einsetzen, sind wir für
künftige Entwicklungen gerüstet.
 Sauberes Handwerk zahlt sich immer aus
 Neue Techniken entstehen, die das «Innere» des Webs umwälzen
werden.
 Wir müssen die Technikentwicklung rechtzeitig erkennen und
einschätzen (auch auf technischer Ebene).
 Erkenntnisse müssen sich intern umsetzen können
23.04.2015 56
Zukunftssicherheit entsteht durch
Anpassungsfähigkeit
Bernd Uttenweiler

57. ||
 Mobile First -> Content First: Content Priorization (Reihenfolge
untereinander)
 Mobile First -> Content First: starker Fokus (z.B. wie soll die
Menüstruktur gestaltet sein)
 Mobile First -> Hilfe für Unerfahrene, “neue” Aspekte wie Touch nicht
zu vergessen
 Design und Entwicklung sind viel stärker verwoben als früher
 Styleguides
 …
23.04.2015 57
Workflow
Bernd Uttenweiler

58. ||
 Auf vielen Geräten/Browsern testen: auch andere Bedienung
 Grösse des Browserfenster ändern
 Browserstack
 Simulation mit Chrome
23.04.2015 58
Testen
Bernd Uttenweiler

59. || 23.04.2015 59
Vielen Dank für die
Aufmerksamkeit!