View
471
Download
0
Category
Preview:
DESCRIPTION
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.
Citation preview
„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
info@mann-beisst-hund.de
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!
Recommended