Download - Workshop Responsive Webdesign 2015
||
Responsive Webdesign
Workshop für Produkt- und Projektverantwortliche von Web-Angeboten
Maximiliane Okonnek | Bernd Uttenweiler
23.04.2015
||
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
||
Zusammenfassung
23.04.2015 3
Was ist ‘responsive Webdesign’?
Maximiliane Okonnek
||
… 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
|| 23.04.2015 5
Responsive Webdesign - schematisch
Quelle: http://www.i-group.deMaximiliane Okonnek
|| 23.04.2015 6
Responsive Webdesign – Wissensportal
Maximiliane Okonnek
||
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
||
Zusammenfassung
23.04.2015 8
Warum ‘responsive Webdesign’?
Maximiliane Okonnek
|| 23.04.2015 9
Blick auf das digitale Umfeld der ETH-Bibliothek
IPMZ - Institute of Mass Communication and Media ResearchMedia Change & Innovation Division (www.mediachange.ch)
Maximiliane Okonnek
|| 08.03.2016 10
Touch-Screen Technologie – Treiber für das mobile Web
Maximiliane Okonnek
||
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
|| 08.03.2016 12
2014: Mobile Internetnutzung als Mainstream
Quelle: Y&R Media Use Index Schweiz 2014
Maximiliane Okonnek
|| 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
||
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
||
Zusammenfassung
23.04.2015 15
Mobilfähige Webangebote im Kontext digitaler Positionierung
Maximiliane Okonnek
|| 23.04.2015 16
Medienmarken in der Schweiz
Maximiliane Okonnek
|| 17
Wie sieht der Googlebot das eigene Web-angebot?
z. B. Wissensportal
Worüber ist weiter nachzudenken …
Maximiliane Okonnek 23.04.2015
||
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
||
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
Worüber ist weiter nachzudenken …
Sind die in eine Website eingebetteten Inhalte mobilfähig?
z. B. Slideshare-Präsentation via Frames in Website eingebunden
||
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
||
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
||
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
||
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
||
Zusammenfassung
23.04.2015 25
Allgemeine Webtrends als Reaktion auf Webdesign
für kleine Endgeräte
Maximiliane Okonnek
|| 23.04.2015 26
Versteckte Navigationsmenüs
Maximiliane Okonnek
|| 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
|| 23.04.2015 28
Grosse Typografie
Quelle: http://www.paul-rand.com/
Maximiliane Okonnek
||
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
||
Zusammenfassung
23.04.2015 30
Zusammenfassung
Maximiliane Okonnek
||
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
||
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
||
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
||
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
|| 23.04.2015 35
Und jetzt erst mal Kaffeepause …
… und dann weiter mit Bernd Uttenweiler
||
Aspekte Responsiven Webdesigns
Beispiele in unseren Portalen
Strategie
23.04.2015 36
Inhalt
Bernd Uttenweiler
||
Zusammenfassung
23.04.2015 37
Aspekte Responsiven Webdesigns
Bernd Uttenweiler
||
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
||
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
||
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
||
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
||
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
||
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
||
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
||
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
||
Zusammenfassung
23.04.2015 46
Beispiele in unseren Portalen
Bernd Uttenweiler
||
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
||
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
||
www.recherche-portal.ch Reinzoomen/Rauszoomen ist verhindert Schlechtes Viewport Metatag
23.04.2015 49
Beispiel Rechercheportal Primo
Bernd Uttenweiler
||
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
||
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
||
Zusammenfassung
23.04.2015 52
Strategie
Bernd Uttenweiler
||
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
||
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
||
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
||
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 durchAnpassungsfähigkeit
Bernd Uttenweiler
||
Mobile First -> Content First: Content Priorization (Reihenfolgeuntereinander)
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 nichtzu vergessen
Design und Entwicklung sind viel stärker verwoben als früher
Styleguides
…
23.04.2015 57
Workflow
Bernd Uttenweiler
||
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
|| 23.04.2015 59
Vielen Dank für die Aufmerksamkeit!