„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!