Digitale Mobilmachung - Wege zum mobilen Internetangebot

906 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Internet
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
906
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
70
Aktionen
Geteilt
0
Downloads
11
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Digitale Mobilmachung - Wege zum mobilen Internetangebot

  1. 1. „Digitale Mobilmachung“ Wege zum mobilen Internetangebot 25..9 2014 / Marcus Flatten, in Zusammenarbeit mit Ari Gröbke
  2. 2. 3 strategische Beratung, Konzeption Pressearbeit Kooperationsmanagement Leistungen
  3. 3. 4 Themenfelder Bildung Universitäten Private wissenschaftliche Institute Wissenschaftsstandorte
  4. 4. 5 Themen heute: •Mobile Evolution •5 Lösungen •Erfahrungsaustausch Der Workshop
  5. 5. 6 Das Web bisher •Lokale Nutzung •Wenige Monitorgrößen •Ähnliche Art der Bedienung Mobile Evolution
  6. 6. 7 Das Web heute •Lokale Nutzung •Mobile Nutzung •Duale Nutzung (Second Screen) •Viele verschiedene Displaygrößen •Mouse-Bedienung •Touch-Bedienung •Spracherkennung Mobile Evolution
  7. 7. 8 Evolution: Honigvögel auf Hawaii „Adaptive Radiation“ erschließt Nischen (Quelle)
  8. 8. 9 Mobile Evolution www.verveuk.dk via http://t3n.de/news/basics-responsive-webdesign-568195/responsive_webdesign_basics/
  9. 9. 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
  10. 10. 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
  11. 11. 12 1.Unabhängige mobile Website 2.Responsive Website 3.Adaptive Website 4.Native App 5.Web-App Fünf Lösungen
  12. 12. 13 Beispiele •m.deutschepost.de •mobile.bahn.de •bundestag.de/mobil 1. Unabhängige mobile Website
  13. 13. 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
  14. 14. 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
  15. 15. 16 www.verveuk.dk via http://t3n.de/news/basics-responsive-webdesign-568195/responsive_webdesign_basics/
  16. 16. 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
  17. 17. 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
  18. 18. 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
  19. 19. 20 1. Graceful Degradation („Abspecken“) Beispiel: University of California, San Diego 2. Responsive Website: Zwei Wege
  20. 20. 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
  21. 21. 22 2. Progressive Enhancement („Mobile first!) Beispiele: Hochschule Harz 2. Responsive Website: Zwei Wege
  22. 22. 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
  23. 23. 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
  24. 24. 25 3. Adaptive Website Demo Universität Bonn (Visualisierung mit http://ami.responsivedesign.is )
  25. 25. 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
  26. 26. 27 Google Appstore-Suche nach „Universität“
  27. 27. 28 Beispiel: Uni Mannheim (auf dem Tablet)
  28. 28. 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
  29. 29. 30 Webapps – Beispiele •Universität Ulm •Universität Hamburg 5. Web App
  30. 30. 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
  31. 31. 32 Was tun? •Technische Basis prüfen •Content prüfen •Ziele definieren •Budget klären •Konzept erstellen
  32. 32. 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!

×