Digitale Mobilmachung - Wege zum mobilen Internetangebot
•
0 gefällt mir•1,223 views
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.
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Andere mochten auch
Andere mochten auch (7)
Ähnlich wie Digitale Mobilmachung - Wege zum mobilen Internetangebot
Ähnlich wie Digitale Mobilmachung - Wege zum mobilen Internetangebot (20)
Mehr von Mann beißt Hund Agentur für Kommunikation
Mehr von Mann beißt Hund Agentur für Kommunikation (10)
Digitale Mobilmachung - Wege zum mobilen Internetangebot
- 1. „Digitale Mobilmachung“ Wege zum mobilen Internetangebot 25..9 2014 / Marcus Flatten, in Zusammenarbeit mit Ari Gröbke
- 3. 3 strategische Beratung, Konzeption Pressearbeit Kooperationsmanagement Leistungen
- 4. 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. 8 Evolution: Honigvögel auf Hawaii „Adaptive Radiation“ erschließt Nischen (Quelle)
- 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
- 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. 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. 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. 27 Google Appstore-Suche nach „Universität“
- 28. 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. 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. 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!