Workshop auf der Jahrestagung 2014 des Bundesverbands Hochschulkommunikation in Konstanz, am 25.9.2014.
Immer mehr Menschen sind unterwegs online. Muss deshalb jedes digitale Angebot auch mobil nutzbar sein? Langfristig: Ja! Mittel- und kurzfristig wäre es zwar wünschenswert, ist aber in vielen Hochschulen unrealistisch. Denn wer seinen letzten Website-Relaunch 2012 ins Netz gestellt hat, hatte das Thema bei Projektstart noch nicht auf dem Schirm. Heute bringt der massive Ruf nach „Mobilmachung“ viele Kommunikationsabteilungen unter Zugzwang. Was tun, wenn keine Mittel für einen erneuten Relaunch vorhanden sind? Wenn zudem die IT-Abteilung meldet, dass die technischen Grundlagen für responsives Design nicht gegeben sind? In unserem Workshop möchten wir verschiedene Wege zum mobilen Internetangebot vorstellen und miteinander vergleichen. Wir zeigen gelungene Beispiel und geben einen kurzen Einblick in die technischen Grundlagen, ohne zu sehr ins Detail zu gehen. Und wir diskutieren das Für und Wider pragmatischer Übergangslösungen.
6. 6
Das Web bisher
•Lokale Nutzung
•Wenige Monitorgrößen
•Ähnliche Art der Bedienung
Mobile Evolution
7. 7
Das Web heute
•Lokale Nutzung
•Mobile Nutzung
•Duale Nutzung (Second Screen)
•Viele verschiedene Displaygrößen
•Mouse-Bedienung
•Touch-Bedienung
•Spracherkennung
Mobile Evolution
9. 9
Mobile Evolution
www.verveuk.dk via http://t3n.de/news/basics-responsive-webdesign-568195/responsive_webdesign_basics/
10. 10
Deutsche Hochschulwebsites
•Relaunch-Zyklus: alle 3 bis 7 Jahre („gefühlt“)
•Relaunch dauert 1 bis 3 Jahre (Beschluss bis Going online)
•Mobiles Web (Responsive Design) wurde ab 2012 Thema
•2013 sind noch viele nicht-mobile Uni-Seiten online gegangen
Mobile Evolution
2010 2011 2012 2013 2014 2015 2016 2017 2018 2019
11. 11
Fazit
•Hochschul-Websites entwickeln sich langsamer als die mobile Evolution
•Viele Hochschulen kommen erst in drei Jahren mit einer für mobile Geräte optimierten Seite auf den Markt, manche erst in fünf Jahren.
Aber: Nicht-mobile Seiten werden für junge Nutzer schon bald sehr alt aussehen.
Was tun?
•Relaunch beschleunigen
•Interimslösungen
Mobile Evolution
12. 12
1.Unabhängige mobile Website
2.Responsive Website
3.Adaptive Website
4.Native App
5.Web-App
Fünf Lösungen
14. 14
Zweite Website mit eigener Subdomain (http://m.uni-xyz.de)
•Separater Auftritt in klassischem HTML/CSS
•nur online nutzbar, über Browser
•Gut vernetzt mit anderen Ressourcen
•Können problemlos aktualisiert werden
•Muss separat gepflegt werden
•Hat meist nur wenige Funktionen, wenig Inhalt
•Ist für eine bestimmte Displaygröße optimiert (fixes Layout)
… stirbt gerade aus.
1. Unabhängige mobile Website
15. 15
Die Seite „antwortet“ auf die Display-Größe; passt sich ihr an.
•Basiert auf aktuellem HTML5 & CSS3
•Nur online nutzbar, über Browser
•Sehr gut vernetzt
•Es muss nur 1 Auftritt gepflegt werden
2. Responsive Website
16. 16
www.verveuk.dk via http://t3n.de/news/basics-responsive-webdesign-568195/responsive_webdesign_basics/
17. 17
Begriffe
Media Queries fragen Medieneigenschaften ab, z.B. Viewport, Ausrichtung, Farbtiefe, Auflösung etc.
Breakpoint: Punkt, an dem das Design umbricht. .
2. Responsive Website
18. 18
Beispiele
•Uni Osnabrück
•Technische Universität Chemnitz
•Hochschule Bremerhaven
•Universität Duisburg-Essen
•Uni Potsdam
•Universität Paderborn
•The University of Vermont
•Temple University, Japan Campus
•Regent College
•University of California, San Diego
2. Responsive Website
19. 19
Alles neu!
•Neue Denke: Seite sieht nicht immer gleich aus, „fluides“ Layout, Pixel werden zu Prozent, alles wird relativ
•Neue Arbeitsweise: Prototyping statt Photoshop
•Neuer Zwang, Prioritäten zu setzen (Linearisierung)
•Neue Struktur: Möglichst nicht mehr als 3 Ebenen
•Neuer Content: Inhalte müssen sorgfältig in responsive Formate gebrachte werden: Tabellen, Bilder, Formulare, PDF etc.
•Neue Technik: HTML5 & CSS3 erforderlich
Responsives Webdesign (RWD) ist kein
Zusatz-Feature; erfordert vollständigen Relaunch.
2. Responsive Website
20. 20
1. Graceful Degradation („Abspecken“)
Beispiel: University of California, San Diego
2. Responsive Website: Zwei Wege
21. 21
1.Graceful Degradation („Abspecken“)
•Optimiert für die Desktop-Nutzung
•Viele Grafiken, eher aufwändiges Design
•Nicht optimierte Inhalte (Slideshows, Videos etc.)
•Viel Bandbreite / Performance notwendig
•Häufig Platzprobleme
•Nicht optimierte komplexe Navigationen
Oft Kompromisse notwendig.
2. Responsive Website: Zwei Wege
23. 23
2. Progressive Enhancement („Mobile first!)
•Optimiert für kleine Displays
•Wenig Grafiken, oft minimalistische Layouts, White Space
•Flache, simple Navigationen
•Inhalte stehen im Mittelpunkt
•Wenig Scripte, Videos etc.
•Für schwaches Internet optimiert
Back to the roots!
2. Responsive Website: Zwei Wege
24. 24
Responsive Website, die nur für eine begrenzte Anzahl von Displaygrößen optimiert ist.
Nicht „fluid“, aber auf vielen mobilen Geräten lesbar.
Beispiele
•www.tagesschau.de
•www.harvard.edu
Adaptive Layouts sind mögliche Übergangslösungen!
Beispiel: Uni Bonn (nur als Demo, nicht ausgearbeitet)
http://mann-beisst-hund.de/kunden/uni-bonn/index.html
3. Adaptive Website
25. 25
3. Adaptive Website
Demo Universität Bonn (Visualisierung mit http://ami.responsivedesign.is )
26. 26
Software in der Programmiersprache eines mobilen Betriebssystems (z.B. iOS, Android, Ovi, Windows)
•Offline nutzbar
•Wird aus App-Stores geladen
•Muss installiert werden
•Oft geringe Vernetzung mit anderen Online-Ressourcen
•Optimiert für eine bestimmte Displaygröße
•Kann Hardware-Funktionen nutzen (Navigation, Kamera etc.)
•Werden lange und regelmäßig genutzt
•Aber aufwändig:
—Komplexe Programmierung
—Erstellung und Pflege getrennt für jedes Betriebssystem
4. Native App
29. 29
„App, die im Browser abläuft“
Oder: „Responsive Website im App-Format“
•Erstellt in HTML5 & CSS3, läuft im Browser
•Eingeschränkt auch offline nutzbar
•Kann wie eine App installiert und vertrieben werden (über App Stores)
•Gute Vernetzung
•Muss nicht separat gepflegt werden
•optimiert für verschiedene Displaygrößen
•Lässt sich leicht aktualisieren
•Werden bewusster und länger genutzt als Websites
•Können eingeschränkt auf die Hardware zugreifen (zunehmend)
5. Web App
31. 31
Überblick
Klassische Website (Fixes Layout)
Nicht responsiv
HTML/CSS (2 Codes)
Mobile Seite m.xyz.de
Nicht HTML/CSS
Native App
Responsiv
Voll responsive Seite
Web App (1 Code)
Adaptive Seite