„Digitale Mobilmachung“
Wege zum mobilen Internetangebot
25..9 2014 / Marcus Flatten, in Zusammenarbeit mit Ari Gröbke
3
strategische Beratung, Konzeption Pressearbeit Kooperationsmanagement
Leistungen
4
Themenfelder
Bildung
Universitäten Private wissenschaftliche Institute Wissenschaftsstandorte
5 5
Themen heute:
• Mobile Evolution
• 5 Lösungen
• Erfahrungsaustausch
Der Workshop
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
8
Evolution:
Honigvögel auf Hawaii
„Adaptive Radiation“
erschließt Nischen
(Quelle)
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
13 13
Beispiele
• m.deutschepost.de
• mobile.bahn.de
• bundestag.de/mobil
1. Unabhängige mobile Website
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 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
22 22
2. Progressive Enhancement („Mobile first!)
Beispiele: Hochschule Harz
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
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
27
Google Appstore-Suche nach „Universität“
28
Beispiel: Uni Mannheim (auf dem Tablet)
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
30 30
Webapps – Beispiele
• Universität Ulm
• Universität Hamburg
5. Web App
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
32 32
Was tun?
• Technische Basis prüfen
• Content prüfen
• Ziele definieren
• Budget klären
• Konzept erstellen
33
MANN BEISST HUND
Agentur für Kommunikation GmbH
Stresemannstraße 374
D-22761 Hamburg
fon +49 40 890 696-0
fax +49 40 890 696-20
www.mann-beisst-hund.de / www.mann-beisst-hund.de/blog
www.mann-beisst-hund.de
www.facebook.com/mannbeissthund
twitter.com/MannbeisstHund
Und jetzt Sie!
