Upload
martin-reiher
View
1.363
Download
1
Embed Size (px)
DESCRIPTION
Responsive vs. mobile Website vs. Apps:Lösungsansätze und Praxisbeispiele Vortrag von Martin Reiher und Jan Gessenhardt am 12.09.2013 auf der Jahrestagung des Bundesverbandes für Hochschulkommunikation in Hannvover.
Citation preview
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 [email protected]
Telefon +49 (0) 30 – 283 921 – 910
Fax +49 (0) 30 – 283 921 – 29
Aperto AGMartin Reiher Etat Direktor // Leiter Hochschulteam
E-Mail [email protected]
Telefon +49 (0) 30 – 283 921 – 315
Fax +49 (0) 30 – 283 921 – 29
Aperto AG – In der Pianofabrik
Chausseestr. 5
10115 Berlin