Die mobile Herausforderung

Die mobile Herausforderung
Responsivevs.mobileWebsitevs.Apps
LösungsansätzeundPraxisbeispiele
Hannover, 12.09.2013

Heute für Sie hier
Martin Reiher
Etat Direktor // Leiter
Hochschulteam Aperto
Jan Gessenhardt
Geschäftsführer
Aperto Move GmbH

Agentur für Kommunikation
Brand
Strategy
Public Relations,
Issue
Campaigning
Print, TV, POS,
Events, Brand
Campaigning
Mobile
& Apps
Online
Marketing
Web Experiences

Aperto heute.
Facts & Figures.
01
Platz
Höchster Anteil digitaler Leistungen
aller Werbeagenturen Deutschlands
der größten inhabergeführten
Werbeagenturen Deutschlands
30
Millionen Euro
Umsatz 2012 laut vorläufigem
Jahresabschluss
340
Köpfe im Moment
und stetig gesund wachsend
GWA Ranking 2011, Aperto mit 51% Digitalanteil
08
Platz
5

Ausgezeichnet in Konzeption und Design.
6
BarrierefreiheitEffizienzDesignKreativität
Design
Kommunikations-
design
Kreativität
Digitale Marken-
kommunikation

Unsere SCIENCE-Expertise (Auswahl)

Ausgewählte
Referenzen
(Hochschulen und
Wissenschafts-
einrichtungen)
8

Research in Germany 2009 - heute
 Relaunch und stetige
Weiterentwicklung der
Website
 2013: Technik-Relaunch –
Migration von CoreMedia
auf Magnolia
 SEA-Marketing und
Newsletterversand
Forschungsmarketing für die Bundesrepublik Deutschland

RWTH Aachen 2010 - heute
 Relaunch der zentralen
Hochschulwebsite, inkl. 9
Fakultäten und 7
Fachgruppen
 Umsetzung eines
Baukastens für 260 Institute
plus Lehrstühle und
Forschungsgebiete
 Erarbeitung einer Social
Media Guideline
 Beratung zur Mobilstrategie
 Einführung eines Intranets
Onlinekommunikation der Exzellenz-Universität RWTH Aachen

Universität Potsdam 2011 - heute
 Kompletter Relaunch der
Hochschulwebsite
 Technische Umsetzung
auf Basis Typo3
 IT-Support und laufende
Betreuung
 Erarbeitung eines
Konzeptes zur Online-
Kommunikation mit
Studieninteressierten
Relaunch Bereich „Studium“ und IT-Support

TU Hamburg-Harburg 2012 - heute
 Kompletter Relaunch der
Hochschulwebsite
(Konzept, Design,
Frontend-Umsetzung)
 Entwicklung CD und
Umsetzung Geschäfts-
ausstattung
 Laufender Support und
Ausbau der
Funktionalitäten
 Technische Umsetzung
auf Typo3 durch TUHH
Relaunch Hochschulwebsite

Über 40% Mobile Internetnutzer in Deutschland
0%
5%
10%
15%
20%
25%
30%
35%
40%
45%
2009 2010 2011 2012 2013
seltener
mind. 1x pro Monat
mind. 1x pro Woche
täglich
Basis: Deutsche Onlinenutzer ab 14 Jahren
Anteil der deutschen Onliner, die das mobile Internet nutzen
Mobile Web verdoppelt Nutzerzahl innerhalb eines Jahres
Quelle: ARD/ZDF Onlinestudie

Uni BremenLMU München Uni Heidelberg Uni Freiburg FU Berlin
Mobile Status bei Deutschlands „Elite-Unis“
15Uni Göttingen Uni Konstanz Uni Karlsruhe TU MünchenTU Berlin

Nutzererwartungen (2011) …
36%
64%dieser User erwarten beim
Aufruf einer mobilen Seite
die gleichen Inhalte, die
sie auch via PC finden
14-19 Jahre alt
Smartphone-Nutzer
Tablet - Nutzer
Aller User ärgern sich
regelmäßig über nicht
mobil-optimierte Seiten
58%
59%
49%
Davon sind:
85%
81%
76%
14-19 Jahre alt
Smartphone-Nutzer
Tablet - Nutzer
Source: Karen McGrane, Mobile Content Strategy , 2011

Verschiedenste Bildschirmgrößen und Geräte.
Mit Touch-Bedienung auch für große Bildschirmflächen
17

… ebenso wie deren Bedienungskonzepte
18

Mobile Devices: Neue Einflussfaktoren auf
digitale Anwendungen
Berücksichtigung neuer Nutzungssituationen
19
01 02 03 04
iOS & Android?
Retina Display?
Touch & Swipe?
Verschiedene
Endgeräte
Verschiedene
Orte
Verschiedene
Aktivitäten
Verschiedene
Verbindungen
Zu Hause?
Im Büro?
Unterwegs
Social Media?
Zeitvertreib?
PC-Ersatz?
WLAN?
Mobiles Netz?
Offline?

Die tatsächliche
Herausforderung:
Digitale Ökosysteme
sind im Wandel

Die Post-PC Ära wird Wirtschaftsprozesse und
Industrien nachhaltig verändern!

Führende Technologien kämpfen
um alle 4 Bildschirme
Android/
Motorola
Nexus
Android Tablets Nexus Q / Google TV Google Play / Cloud
Chromebook /
Chrome Browser
Windows8 Computer
Windows /
Nokia
Surface
Windows 8 Tablets Marketplace / AzureXboX One
Mac Computer iPhone iPad Apple TV iTunes / iCloud

Cross-Plattform ist Grundanforderung für
digitale Services geworden
23

Positive Nutzererfahrung auf verschiedenen
Endgeräten wird zum Wettbewerbsvorteil.
USER
WEBSITEVIDEOSOCIAL Game

Wie mache ich eine
Webseite fit für das
Cross-Plattform
Zeitalter?

?Für welches Projekt ist
welche Option geeignet?
Mobile
Website
?
Responsive
?
?
?
?
?
? Apps
?

Wir haben bei Aperto mit allen Disziplinen ein
gemeinsames Verständnis entwickelt …
Responsive
Webdesign
Adaptive
Device
Templates
Native Apps

W… und wir haben Kombinations-Strategien
und Entscheidungskriterien erarbeitet.
Responsive
Webdesign
Adaptive
Device
Templates
Native Apps

… klassifiziert wurden 3 mögliche
Cross-Device Umsetzungsoptionen
29
Responsive Web Design Adaptive Web Design
Device Templates Auswahl an OS undApp StoresAnpassung der Screengröße
Native Apps

Responsive Webdesign
Responsive
Webdesign
Adaptive
Device
Templates
Native Apps

Responsive Webdesgin: Ein Quellcode, eine
Navigation, jeweils angepasste Darstellung
31

Das CMS generiert also nur 1 Seite, die dann
unterschiedlich dargestellt wird.
32
1 HTML-
Seite
1 Seite im
CMS

Ist besonders geeignet, wenn es um die
Anpassung der Darstellung auf
Bildschirmgrößen geht und nicht um die
Abbildung gerätespezifischer Use-Cases.

Und wenn Ladezeit und Performance auf
Smartphones nicht erfolgskritisch sind.
https://www.gov.uk, Performance auf Smartphones
nicht erfolgskritisch und kaum Bilder.

Nur wenn die gesamte Website neu gemacht
wird, und nicht z.B. die Desktop-Version bleibt!
IHK Berlin , Intranet Prototyp umgesetzt von
www.aperto.de

Funktioniert besonders gut, wenn Responsive
Design als Komplexitätsreduktion gelebt wird.

ist besonders geeignet, …
wenn Anpassung der
Darstellung auf
Bildschirmgrößen und keine
Device-spezifischen
Use-Cases
wenn Responsive Design
als Methode der
Komplexitätsreduktion
gelebt wird
wenn die gesamte Website
neu umgesetzt und von
Anfang an
plattformübergreifend
gestaltet wird
wenn Ladezeit und
Performance auf
Smartphones nicht
erfolgskritisch sind
als Grundlage für alle
Cross-Plattform
Projekte, auch wenn Teile
durch Device-Templates
gelöst werden
wenn es keine komplexen
Features wie z.B.
Warenkörbe gibt (diese
über mobile Templates
integrieren)
wenn die Umsetzung auf
Basis von Patterns erfolgen
kann
wenn nicht für ältere mobile
Endgeräte optimiert
werden muss
wenn die Komplexität der
Templates gering gehalten
werden soll

Adaptive Device
Templates
Responsive
Webdesign
Adaptive
Device
Templates
Native Apps

Adaptive Device Templates: Unterschiedliche
Site-Quellcode für verschiedene Geräteklassen
39

Ein CMS, einmalige Eingabe der
Inhalte, Ausspielung optimierter Device-
Templates
HTML-
Seite 1
1 Seite im
CMS
HTML-
Seite 3
HTML-
Seite 2
40

Aber am besten auf Basis EINER Codebasis
41
Responsive HTML-Code
1 Seite im
CMS
Einzelne
Seiten/Module

Cross-Plattform-Umsetzung nah am
Templating

Share-Funktion
direkt im Mobile
Gerät aufrufbar!
Modularer Aufbau Desktop vs. Smartphone

Besonders notwendig, wenn unterschiedliche
Use-Cases auf unterschiedlichen Geräten –
und damit jeweils unterschiedliche Features
Adaptive Device Templates
Z.B. Location Based Services Z.B. Second Screen

Immer wenn Ladezeit und Performance
erfolgskritisch sind, z.B. weil Bilder und
Videos eine wichtige Rolle spielen
www.rallytheworld.com, umgesetzt von Aperto: Ein responsive Template-Set für Desktop und Tablets, ein adaptives Template-Set für Smartphones

Komplexere Features und Prozesse wie z.B.
Warenkörbe oder komplexe Suchfunktionen
sind häufig ein Grund für Device Templates
www.sos-kinderdorf.de, umgesetzt von Aperto

Wenn eine Desktop-Website schon existiert
und bestehen bleiben soll, dann besser neue
Templates für Smartphones und Tablets
www.eads.com, umgesetzt von Aperto

sind besonders geeignet, …
wenn es spezifische Use-
Cases für Smartphones gibt
und damit zusätzliche
Features, wie z.B. Location
Based Services
wenn Ladezeit und
Performance erfolgskritisch
sind, z..B. wenn Bilder und
Videos eine wichtige Rolle
auf der Website spielen
wenn es spezifische Use-
Cases für Tablets gibt und
damit zusätzliche
Features, wie z.B. Second
Screen Anwendungen
wenn komplexe Features
und Prozesse wie z.B.
Warenkörbe oder komplexe
Suchfunktionen abgebildet
werden sollen
wenn stark auf Touch-
Nutzung optimiert werden
soll, eventuell auch
geräteklassenspezifisch
wenn eine Desktop-Website
schon existiert und nur
mobilisiert werden soll
wenn schrittweise
umgesetzt werden muss
(erst wichtigste
Templates, dann später
weitere)
wenn später eine Hybrid-
App wahrscheinlich ist, die
dann auf die Device-
Templates zurückgreifen
soll

Apps
Responsive
Webdesign
Adaptive
Device
Templates
Native Apps

Apps: Native Software für unterschiedliche
App-Ökosysteme (Apple, Android, Windows)
Windows 8
iOS
Android
50

Alphaguide, Corporate Car-Sharing von BMW: Fahrzeug finden und
buchen, Werkstätten, Unfallberichte in der App.
Von Aperto umgesetzt
Apps: Native Software für Services und
mobile Transaktionen
Apps

Wenn es klar geeignete Use-Cases und
Business-Cases gibt!
Apps
Alphaguide, Corporate Car-Sharing von
BMW: Fahrzeug finden und
buchen, Werkstätten, Unfallberichte in der
App.
Beispiel myTaxi:
Taxifahrt anbieten, Taxi
rufen, Vermittlungsgebühr.
Beispiel Spotify:
Alle Musik immer dabei. Im Abo.

Wenn klar ist, dass es echte Software-
Entwicklung ist, mit häufigen Updates und
laufendem App-Management
Apps
Beispiel: AutoScout24-App auf allen Systemen: Mehr als 6 Mio App-Downloads

Apps sind geeignet, wenn Performance und
Joy-of-Use zentral sind
Apps
EADS Upmagazine, umgesetzt von Aperto

Meist notwendig, wenn native Funktionalitäten
von Geräten genutzt werden sollen
Apps
Beispiele: Die WWF Schneekugel App (Aperto) nutzt den Trägheitssensor.

Mit Apps kann Sichtbarkeit in den jeweiligen
App-Stores erreicht werden
Apps

Apps
sind besonders geeignet, …
wenn es klare Use-Cases
gibt, die sich zur Umsetzung
in einer App eignen
Wenn Performance extrem
wichtig ist
wenn es klare
Business-Cases gibt,
z.B. Abo oder Verkauf
wenn hoher Joy-of-Use
erreicht werden soll
wenn native
Funktionalitäten der Geräte
genutzt werden sollen (z.B.
Trägheitssensor)
wenn komplexe
Interaktionen abgebildet
werden müssen
wenn klar ist, dass App-
Entwicklung Software-
Entwicklung ist, Updates
und App-Management
notwendig sind
wenn Sichtbarkeit in
App-Stores erreicht und
reichweitenstark vermarktet
werden soll
wenn man auf wenige OS
eingrenzen kann

Responsive Design
Ein Quellcode, eine
Navigation, jeweils angepasste
Darstellung
Adaptive Templates
Unterschiedliche Site-Quellcode
für unterschiedliche Geräteklassen
Apps
Native Software für
unterschiedliche App-Ökosysteme
(Apple, Android, Windows)
59
Beispiel-Bewertungsskala für Varianten

Cross-Plattform
Strategien sind clevere
Kombinationen!
Responsive
Webdesign
Adaptive
Device
Templates
Native Apps

Meist ist eine Kombination der Ansätze
notwendig und auch sinnvoll
Responsive Website, adaptive Templates und Native Apps

Cross-Platform Lösung auf Basis von Magnolia
Ein zukunftsgerichteter digitaler Multi-Channel Ansatz
62
Up To Planet iOS App
Investor Relations iOS App
Desktop / Tablet Website
Mobile Website

Zentrale Content-Quelle für alle Kanäle
Kanal-übergreifende Content-Pflege, kanal-spezifische Ausspielung
63
Editors create content
once
API
IR iPad App
(iOS)
Tablet / desktop website
(responsive)
Adaptive mobile web site
(HTML 5 templates)
Magnolia CMS
ONE content source for all relevant channels
Up To Planet App
(iOS)

Das CMS füttert sämtliche Endgeräte – ohne
extra redaktionellen Aufwand
CMS – eine Inhaltequelle für verschiedene Kanäle
Tablets Smartphones
7“ tablets
10“ tablets
Responsive
Design
Device
Templates
Website

Was bleibt, was ändert sich?
Der Inhalt Webseite bleibt
identisch
Auch 2012 neue
Technologien finden und
einsetzen.
Auch 2012 neue
Technologien finden und
einsetzen.
Die Pflege der Inhalte
ändert sich nicht bzw. nur
minimal
Es wird mit dem
bestehenden CMS
gearbeitet
Breaking points für
Responsive Design
Optik und Bedienung
für alle Geräte verbessern
Neue mobile Templates
und Paragraphen

Cross-Device-Umsetzung RWTH Aachen
(Arbeitsstand „Mobile“ September 2013)

Danke
Aperto Move GmbH
Jan Gessenhardt Managing Director
E-Mail jan.gessenhardt@aperto.de
Telefon +49 (0) 30 – 283 921 – 910
Fax +49 (0) 30 – 283 921 – 29
Aperto AG
Martin Reiher Etat Direktor // Leiter Hochschulteam
E-Mail martin.reiher@aperto.de
Telefon +49 (0) 30 – 283 921 – 315
Fax +49 (0) 30 – 283 921 – 29
ApertoAG – In der Pianofabrik
Chausseestr. 5
10115 Berlin

Die mobile Herausforderung

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (18)

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie Die mobile Herausforderung

Ähnlich wie Die mobile Herausforderung (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (10)

Die mobile Herausforderung