workshop responsive webdesign 2015

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

Upload: eth-bibliothek

Post on 24-Jan-2017

300 views

Category:

Education


7 download

TRANSCRIPT

Page 1: Workshop Responsive Webdesign 2015

||

Responsive Webdesign

Workshop für Produkt- und Projektverantwortliche von Web-Angeboten

Maximiliane Okonnek | Bernd Uttenweiler

23.04.2015

Page 2: Workshop Responsive Webdesign 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

Page 3: Workshop Responsive Webdesign 2015

||

Zusammenfassung

23.04.2015 3

Was ist ‘responsive Webdesign’?

Maximiliane Okonnek

Page 4: Workshop Responsive Webdesign 2015

||

… 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

Page 5: Workshop Responsive Webdesign 2015

|| 23.04.2015 5

Responsive Webdesign - schematisch

Quelle: http://www.i-group.deMaximiliane Okonnek

Page 6: Workshop Responsive Webdesign 2015

|| 23.04.2015 6

Responsive Webdesign – Wissensportal

Maximiliane Okonnek

Page 7: Workshop Responsive Webdesign 2015

||

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

Page 8: Workshop Responsive Webdesign 2015

||

Zusammenfassung

23.04.2015 8

Warum ‘responsive Webdesign’?

Maximiliane Okonnek

Page 9: Workshop Responsive Webdesign 2015

|| 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

Page 10: Workshop Responsive Webdesign 2015

|| 08.03.2016 10

Touch-Screen Technologie – Treiber für das mobile Web

Maximiliane Okonnek

Page 11: Workshop Responsive Webdesign 2015

||

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

Page 12: Workshop Responsive Webdesign 2015

|| 08.03.2016 12

2014: Mobile Internetnutzung als Mainstream

Quelle: Y&R Media Use Index Schweiz 2014

Maximiliane Okonnek

Page 13: Workshop Responsive Webdesign 2015

|| 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

Page 14: Workshop Responsive Webdesign 2015

||

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

Page 15: Workshop Responsive Webdesign 2015

||

Zusammenfassung

23.04.2015 15

Mobilfähige Webangebote im Kontext digitaler Positionierung

Maximiliane Okonnek

Page 16: Workshop Responsive Webdesign 2015

|| 23.04.2015 16

Medienmarken in der Schweiz

Maximiliane Okonnek

Page 17: Workshop Responsive Webdesign 2015

|| 17

Wie sieht der Googlebot das eigene Web-angebot?

z. B. Wissensportal

Worüber ist weiter nachzudenken …

Maximiliane Okonnek 23.04.2015

Page 18: Workshop Responsive Webdesign 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

Page 19: Workshop Responsive Webdesign 2015

||

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

Page 20: Workshop Responsive Webdesign 2015

|| 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

Page 21: Workshop Responsive Webdesign 2015

||

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

Page 22: Workshop Responsive Webdesign 2015

||

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

Page 23: Workshop Responsive Webdesign 2015

||

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

Page 24: Workshop Responsive Webdesign 2015

||

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

Page 25: Workshop Responsive Webdesign 2015

||

Zusammenfassung

23.04.2015 25

Allgemeine Webtrends als Reaktion auf Webdesign

für kleine Endgeräte

Maximiliane Okonnek

Page 26: Workshop Responsive Webdesign 2015

|| 23.04.2015 26

Versteckte Navigationsmenüs

Maximiliane Okonnek

Page 27: Workshop Responsive Webdesign 2015

|| 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

Page 28: Workshop Responsive Webdesign 2015

|| 23.04.2015 28

Grosse Typografie

Quelle: http://www.paul-rand.com/

Maximiliane Okonnek

Page 29: Workshop Responsive Webdesign 2015

||

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

Page 30: Workshop Responsive Webdesign 2015

||

Zusammenfassung

23.04.2015 30

Zusammenfassung

Maximiliane Okonnek

Page 31: Workshop Responsive Webdesign 2015

||

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

Page 32: Workshop Responsive Webdesign 2015

||

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

Page 33: Workshop Responsive Webdesign 2015

||

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

Page 34: Workshop Responsive Webdesign 2015

||

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

Page 35: Workshop Responsive Webdesign 2015

|| 23.04.2015 35

Und jetzt erst mal Kaffeepause …

… und dann weiter mit Bernd Uttenweiler

Page 36: Workshop Responsive Webdesign 2015

||

Aspekte Responsiven Webdesigns

Beispiele in unseren Portalen

Strategie

23.04.2015 36

Inhalt

Bernd Uttenweiler

Page 37: Workshop Responsive Webdesign 2015

||

Zusammenfassung

23.04.2015 37

Aspekte Responsiven Webdesigns

Bernd Uttenweiler

Page 38: Workshop Responsive Webdesign 2015

||

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

Page 39: Workshop Responsive Webdesign 2015

||

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

Page 40: Workshop Responsive Webdesign 2015

||

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

Page 41: Workshop Responsive Webdesign 2015

||

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

Page 42: Workshop Responsive Webdesign 2015

||

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

Page 43: Workshop Responsive Webdesign 2015

||

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

Page 44: Workshop Responsive Webdesign 2015

||

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

Page 45: Workshop Responsive Webdesign 2015

||

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

Page 46: Workshop Responsive Webdesign 2015

||

Zusammenfassung

23.04.2015 46

Beispiele in unseren Portalen

Bernd Uttenweiler

Page 47: Workshop Responsive Webdesign 2015

||

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

Page 48: Workshop Responsive Webdesign 2015

||

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

Page 49: Workshop Responsive Webdesign 2015

||

www.recherche-portal.ch Reinzoomen/Rauszoomen ist verhindert Schlechtes Viewport Metatag

23.04.2015 49

Beispiel Rechercheportal Primo

Bernd Uttenweiler

Page 50: Workshop Responsive Webdesign 2015

||

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

Page 51: Workshop Responsive Webdesign 2015

||

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

Page 52: Workshop Responsive Webdesign 2015

||

Zusammenfassung

23.04.2015 52

Strategie

Bernd Uttenweiler

Page 53: Workshop Responsive Webdesign 2015

||

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

Page 54: Workshop Responsive Webdesign 2015

||

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

Page 55: Workshop Responsive Webdesign 2015

||

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

Page 56: Workshop Responsive Webdesign 2015

||

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

Page 57: Workshop Responsive Webdesign 2015

||

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

Page 58: Workshop Responsive Webdesign 2015

||

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

Page 59: Workshop Responsive Webdesign 2015

|| 23.04.2015 59

Vielen Dank für die Aufmerksamkeit!