SlideShare ist ein Scribd-Unternehmen logo
1 von 59
Downloaden Sie, um offline zu lesen
||
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.de
Maximiliane 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 Research
Media 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 durch
Anpassungsfähigkeit
Bernd Uttenweiler
||
 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
||
 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!

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (11)

Enhancing medical education and training
Enhancing medical education and trainingEnhancing medical education and training
Enhancing medical education and training
 
History Board
History BoardHistory Board
History Board
 
Exposición ii guerra mundial listo
Exposición ii guerra mundial listoExposición ii guerra mundial listo
Exposición ii guerra mundial listo
 
Powepoint pp presentacion final
Powepoint pp presentacion finalPowepoint pp presentacion final
Powepoint pp presentacion final
 
CV - Ardeleanu Augustin ENG
CV - Ardeleanu Augustin ENGCV - Ardeleanu Augustin ENG
CV - Ardeleanu Augustin ENG
 
Enterprises benefit from nodejs
Enterprises benefit from nodejsEnterprises benefit from nodejs
Enterprises benefit from nodejs
 
G.O.E.N°6.275 11 dic-2016 Nuevo.presidente Sudeban y fuera curso_legal_billet...
G.O.E.N°6.275 11 dic-2016 Nuevo.presidente Sudeban y fuera curso_legal_billet...G.O.E.N°6.275 11 dic-2016 Nuevo.presidente Sudeban y fuera curso_legal_billet...
G.O.E.N°6.275 11 dic-2016 Nuevo.presidente Sudeban y fuera curso_legal_billet...
 
MY PROFILE RESUME
MY PROFILE RESUMEMY PROFILE RESUME
MY PROFILE RESUME
 
Glimpses of ISO 9001:2015
Glimpses of ISO 9001:2015Glimpses of ISO 9001:2015
Glimpses of ISO 9001:2015
 
A New Worker is Needed
A New Worker is NeededA New Worker is Needed
A New Worker is Needed
 
Baustein 07 grundlagen-html-css-php
Baustein 07 grundlagen-html-css-phpBaustein 07 grundlagen-html-css-php
Baustein 07 grundlagen-html-css-php
 

Ähnlich wie Workshop Responsive Webdesign 2015

Ueberlegungen Projektmanagement Web Applications
Ueberlegungen Projektmanagement Web ApplicationsUeberlegungen Projektmanagement Web Applications
Ueberlegungen Projektmanagement Web Applications
Günther Haslbeck
 

Ähnlich wie Workshop Responsive Webdesign 2015 (20)

Usability als strategisches Element im Entwicklungsprozess
Usability als strategisches Element im EntwicklungsprozessUsability als strategisches Element im Entwicklungsprozess
Usability als strategisches Element im Entwicklungsprozess
 
Fonda: Erfolgsfaktor Benutzeroberfläche
Fonda: Erfolgsfaktor BenutzeroberflächeFonda: Erfolgsfaktor Benutzeroberfläche
Fonda: Erfolgsfaktor Benutzeroberfläche
 
BASTA Spring 2018: User Interface, quo vadis? Überlebensstrategien eines Soft...
BASTA Spring 2018: User Interface, quo vadis? Überlebensstrategien eines Soft...BASTA Spring 2018: User Interface, quo vadis? Überlebensstrategien eines Soft...
BASTA Spring 2018: User Interface, quo vadis? Überlebensstrategien eines Soft...
 
Einführung der Adobe Marketing Cloud bei Credit Suisse
Einführung der Adobe Marketing Cloud bei Credit SuisseEinführung der Adobe Marketing Cloud bei Credit Suisse
Einführung der Adobe Marketing Cloud bei Credit Suisse
 
Die Zukunft des Semantic Web
Die Zukunft des Semantic WebDie Zukunft des Semantic Web
Die Zukunft des Semantic Web
 
Trendreport: Die Zukunft des Semantic Web
Trendreport: Die Zukunft des Semantic WebTrendreport: Die Zukunft des Semantic Web
Trendreport: Die Zukunft des Semantic Web
 
WCM im Jahr 2013 und danach - der Stand der Dinge
WCM im Jahr 2013 und danach - der Stand der DingeWCM im Jahr 2013 und danach - der Stand der Dinge
WCM im Jahr 2013 und danach - der Stand der Dinge
 
UX aus Sicht eines Concepters
UX aus Sicht eines ConceptersUX aus Sicht eines Concepters
UX aus Sicht eines Concepters
 
Der Weg zum nutzerzentrierten Unternehmen
Der Weg zum nutzerzentrierten UnternehmenDer Weg zum nutzerzentrierten Unternehmen
Der Weg zum nutzerzentrierten Unternehmen
 
Ueberlegungen Projektmanagement Web Applications
Ueberlegungen Projektmanagement Web ApplicationsUeberlegungen Projektmanagement Web Applications
Ueberlegungen Projektmanagement Web Applications
 
W3C/DFKI Automotive Workshop
W3C/DFKI Automotive WorkshopW3C/DFKI Automotive Workshop
W3C/DFKI Automotive Workshop
 
SEO Produktspezifikation für RWD
SEO Produktspezifikation für RWDSEO Produktspezifikation für RWD
SEO Produktspezifikation für RWD
 
Kaufabbruch in letzter Sekunde? Mit UX Testing die Conversion Rate steigern
Kaufabbruch in letzter Sekunde? Mit UX Testing die Conversion Rate steigernKaufabbruch in letzter Sekunde? Mit UX Testing die Conversion Rate steigern
Kaufabbruch in letzter Sekunde? Mit UX Testing die Conversion Rate steigern
 
tekom regional: Technische Dokumentation auf mobilen Endgeräten
tekom regional: Technische Dokumentation auf mobilen Endgerätentekom regional: Technische Dokumentation auf mobilen Endgeräten
tekom regional: Technische Dokumentation auf mobilen Endgeräten
 
Micro UX. Wie Produkte wirklich Spaß machen (2014)
Micro UX. Wie Produkte wirklich Spaß machen (2014)Micro UX. Wie Produkte wirklich Spaß machen (2014)
Micro UX. Wie Produkte wirklich Spaß machen (2014)
 
Web Content-Management-Systeme the Past - the Present - the Future
Web Content-Management-Systeme the Past - the Present - the FutureWeb Content-Management-Systeme the Past - the Present - the Future
Web Content-Management-Systeme the Past - the Present - the Future
 
design
designdesign
design
 
Web Design Trends 2011
Web Design Trends 2011Web Design Trends 2011
Web Design Trends 2011
 
Mediencampus Website Grobkonzept
Mediencampus Website GrobkonzeptMediencampus Website Grobkonzept
Mediencampus Website Grobkonzept
 
2010 - Basta!: IPhone Apps mit C#
2010 - Basta!: IPhone Apps mit C#2010 - Basta!: IPhone Apps mit C#
2010 - Basta!: IPhone Apps mit C#
 

Mehr von ETH-Bibliothek

Mehr von ETH-Bibliothek (20)

17:15 Kolloquium – Donnerstag, 27. Februar 2020 – Das Büro darf nicht nur Mit...
17:15 Kolloquium – Donnerstag, 27. Februar 2020 – Das Büro darf nicht nur Mit...17:15 Kolloquium – Donnerstag, 27. Februar 2020 – Das Büro darf nicht nur Mit...
17:15 Kolloquium – Donnerstag, 27. Februar 2020 – Das Büro darf nicht nur Mit...
 
OriginStamp: Trusted Time Stamping via the Bitcoin Blockchain
OriginStamp: Trusted Time Stamping via the Bitcoin BlockchainOriginStamp: Trusted Time Stamping via the Bitcoin Blockchain
OriginStamp: Trusted Time Stamping via the Bitcoin Blockchain
 
Tracking Citations to Research Software via PIDs
Tracking Citations to Research Software via PIDsTracking Citations to Research Software via PIDs
Tracking Citations to Research Software via PIDs
 
Persistent Identifiers for Scientific Data at CSCS
Persistent Identifiers for Scientific Data at CSCSPersistent Identifiers for Scientific Data at CSCS
Persistent Identifiers for Scientific Data at CSCS
 
Building Open Research Infrastructure with PIDs
Building Open Research Infrastructure with PIDsBuilding Open Research Infrastructure with PIDs
Building Open Research Infrastructure with PIDs
 
DataCite and its Members: Connecting Research and Identifying Knowledge
DataCite and its Members: Connecting Research and Identifying KnowledgeDataCite and its Members: Connecting Research and Identifying Knowledge
DataCite and its Members: Connecting Research and Identifying Knowledge
 
Bilder online recherchieren – Tipps und Tricks
Bilder online recherchieren – Tipps und TricksBilder online recherchieren – Tipps und Tricks
Bilder online recherchieren – Tipps und Tricks
 
Transkribus. Eine Forschungsplattform für die automatisierte Digitalisierung,...
Transkribus. Eine Forschungsplattform für die automatisierte Digitalisierung,...Transkribus. Eine Forschungsplattform für die automatisierte Digitalisierung,...
Transkribus. Eine Forschungsplattform für die automatisierte Digitalisierung,...
 
Herausforderungen im Datenmanagement von Metadaten
Herausforderungen im Datenmanagement von MetadatenHerausforderungen im Datenmanagement von Metadaten
Herausforderungen im Datenmanagement von Metadaten
 
Gamification und Game Design: Theorie und Praxis jenseits der Heilsversprechu...
Gamification und Game Design: Theorie und Praxis jenseits der Heilsversprechu...Gamification und Game Design: Theorie und Praxis jenseits der Heilsversprechu...
Gamification und Game Design: Theorie und Praxis jenseits der Heilsversprechu...
 
Data Management in Research –WhyandHow?
Data Management in Research –WhyandHow?Data Management in Research –WhyandHow?
Data Management in Research –WhyandHow?
 
Openness, exchange, FAIR DATA – oh brave new world that has such vision! (Dr....
Openness, exchange, FAIR DATA – oh brave new world that has such vision! (Dr....Openness, exchange, FAIR DATA – oh brave new world that has such vision! (Dr....
Openness, exchange, FAIR DATA – oh brave new world that has such vision! (Dr....
 
CitizenScience - Freiwillige lokalisieren Bilder im virtuellen Globus
CitizenScience - Freiwillige lokalisieren Bilder im virtuellen GlobusCitizenScience - Freiwillige lokalisieren Bilder im virtuellen Globus
CitizenScience - Freiwillige lokalisieren Bilder im virtuellen Globus
 
FORUM - Das Bottom-up Gremium der ETH-Bibliothek
FORUM - Das Bottom-up Gremium der ETH-BibliothekFORUM - Das Bottom-up Gremium der ETH-Bibliothek
FORUM - Das Bottom-up Gremium der ETH-Bibliothek
 
Digitaler Zugang zu Lesespuren - Das Projekt „Thomas Mann Nachlassbibliothek“...
Digitaler Zugang zu Lesespuren - Das Projekt „Thomas Mann Nachlassbibliothek“...Digitaler Zugang zu Lesespuren - Das Projekt „Thomas Mann Nachlassbibliothek“...
Digitaler Zugang zu Lesespuren - Das Projekt „Thomas Mann Nachlassbibliothek“...
 
„Ex meis libris“ - Die Provenienzdatenbank der ETH-Bibliothek
„Ex meis libris“ - Die Provenienzdatenbank der ETH-Bibliothek „Ex meis libris“ - Die Provenienzdatenbank der ETH-Bibliothek
„Ex meis libris“ - Die Provenienzdatenbank der ETH-Bibliothek
 
Wenn Algorithmen Zeitschriften lesen - Vom Mehrwert automatisierter Textanrei...
Wenn Algorithmen Zeitschriften lesen - Vom Mehrwert automatisierter Textanrei...Wenn Algorithmen Zeitschriften lesen - Vom Mehrwert automatisierter Textanrei...
Wenn Algorithmen Zeitschriften lesen - Vom Mehrwert automatisierter Textanrei...
 
Die Research Collection der ETH Zürich - Ein Repositorium für Publikationen u...
Die Research Collection der ETH Zürich - Ein Repositorium für Publikationen u...Die Research Collection der ETH Zürich - Ein Repositorium für Publikationen u...
Die Research Collection der ETH Zürich - Ein Repositorium für Publikationen u...
 
Texte visualisieren und lesen
Texte visualisieren und lesenTexte visualisieren und lesen
Texte visualisieren und lesen
 
Netzwerk Metadatenmanagement
Netzwerk MetadatenmanagementNetzwerk Metadatenmanagement
Netzwerk Metadatenmanagement
 

Workshop Responsive Webdesign 2015

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