Die mobile Herausforderung

Die mobile Herausforderung Responsive vs. mobile Website vs. AppsLösungsansätze und Praxisbeispiele

Hannover, 12.09.2013

Heute für Sie hier

Martin ReiherEtat Direktor // Leiter Hochschulteam Aperto

Jan GessenhardtGeschäftsführer Aperto Move GmbH

Wer wir sind.

Agentur für Kommunikation

BrandStrategy

Public Relations, Issue

Campaigning

Print, TV, POS, Events, BrandCampaigning

Mobile & Apps

Online Marketing

Web Experiences

Aperto heute.Facts & Figures.

01Platz

Höchster Anteil digitaler Leistungen aller Werbeagenturen Deutschlands

der größten inhabergeführten Werbeagenturen Deutschlands

30Millionen EuroUmsatz 2012 laut vorläufigem Jahresabschluss

340Köpfe im Momentund stetig gesund wachsend

GWA Ranking 2011, Aperto mit 51% Digitalanteil

08Platz

5

Ausgezeichnet in Konzeption und Design.

6

BarrierefreiheitEffizienzDesignKreativität

DesignKommunikations-design

KreativitätDigitale 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

2009 2010 2011 2012 20130%

5%

10%

15%

20%

25%

30%

35%

40%

45%

seltener

mind. 1x pro Monat

mind. 1x pro Woche

täglich

Basis: Deutsche Onlinenutzer ab 14 JahrenAnteil der deutschen Onliner, die das mobile Internet nutzen

Mobile Web verdoppelt Nutzerzahl innerhalb eines Jahres

Quelle: ARD/ZDF Onlinestudie

15

Uni BremenLMU München Uni Heidelberg Uni Freiburg FU Berlin

Mobile Status bei Deutschlands „Elite-Unis“

Uni 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

19

Mobile Devices: Neue Einflussfaktoren auf digitale AnwendungenBerücksichtigung neuer Nutzungssituationen

01 02 03 04

iOS & Android?Retina Display?Touch & Swipe?

Verschiedene Endgeräte

VerschiedeneOrte

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

NexusAndroid Tablets Nexus Q / Google TV Google Play / Cloud

Chromebook / Chrome Browser

Windows8 ComputerWindows /

NokiaSurface

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?

MobileWebsite

?Responsive

?

?

?

??

? Apps

?

Wir haben bei Aperto mit allen Disziplinen ein gemeinsames Verständnis entwickelt …

ResponsiveWebdesign

Adaptive Device

TemplatesNative Apps

W… und wir haben Kombinations-Strategien und Entscheidungskriterien erarbeitet.

ResponsiveWebdesign

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 und App StoresAnpassung der Screengröße

Native Apps

Responsive Webdesign

ResponsiveWebdesign

AdaptiveDevice

TemplatesNative 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.

Responsive Webdesign

Und wenn Ladezeit und Performance auf Smartphones nicht erfolgskritisch sind.

Responsive Webdesign

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!

Responsive Webdesign

IHK Berlin , Intranet Prototyp umgesetzt von www.aperto.de

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

Responsive Webdesign

Responsive Webdesignist 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

ResponsiveWebdesign

AdaptiveDevice

TemplatesNative 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

EinzelneSeiten/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

Adaptive Device Templates

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

Adaptive Device Templates

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

Adaptive Device Templates

Adaptive Device Templatessind 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

ResponsiveWebdesign

AdaptiveDevice

TemplatesNative Apps

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

Windows 8iOS

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.Von Aperto umgesetzt

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

Appssind 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

Bewertung der Varianten

Responsive DesignEin Quellcode, eine Navigation, jeweils angepasste Darstellung

Adaptive TemplatesUnterschiedliche Site-Quellcode für unterschiedliche Geräteklassen

AppsNative Software für unterschiedliche App-Ökosysteme (Apple, Android, Windows)

Usability

Kosten

Zeitb

edar

f

Zuku

nftsfähigk

eit

Cont

ent-R

edak

tion

59

Beispiel-Bewertungsskala für Varianten

Cross-Plattform Strategien sind clevere Kombinationen!

ResponsiveWebdesign

AdaptiveDevice

TemplatesNative Apps

Meist ist eine Kombination der Ansätze notwendig und auch sinnvoll

Responsive Website, adaptive Templates und Native Apps

62

Cross-Platform Lösung auf Basis von MagnoliaEin zukunftsgerichteter digitaler Multi-Channel Ansatz

Up To Planet iOS App

Investor Relations iOS App

Desktop / Tablet Website

Mobile Website

63

Zentrale Content-Quelle für alle KanäleKanal-übergreifende Content-Pflege, kanal-spezifische Ausspielung

Editors create content once

API

IR iPad App(iOS)

Tablet / desktop website(responsive)

Adaptive mobile web site(HTML 5 templates)

Magnolia CMSONE 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“ tablets10“ tablets

ResponsiveDesign

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 Bedienungfür alle Geräte verbessern

Neue mobile Templates und Paragraphen

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

!!DankeAperto Move GmbHJan Gessenhardt Managing Director

E-Mail jan.gessenhardt@aperto.de

Telefon +49 (0) 30 – 283 921 – 910

Fax +49 (0) 30 – 283 921 – 29

Aperto AGMartin 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

Aperto AG – In der Pianofabrik

Chausseestr. 5

10115 Berlin