1. Einfluss der Endgeräte-Innovationen auf
technische Realisierung netzbasierter
Medienprodukte
Alexej Antropov
Dezember 2013

2. Einfluss der Endgeräte-Innovationen auf technische
Realisierung netzbasierter Medienprodukte
1990 – 2010:
2010 – 2013:
Vom PC über Handy zu
Smartphone und Laptop
•Vielfalt der Geräteklassen nimmt zu
•Grenzen der Geräteklassen verschwimmen
•Q1/2013: 42,5 % der Mobiltelefone sind
Smartphones
•Prognose USA bis 2017: +45% Tablet-Nutzer;
+48% Smartphone-Nutzer
Statistiken aus: Studie Mobile Effects 2013-1; Tomorrow Focus Media

3. Einfluss der Endgeräte-Innovationen auf technische
Realisierung netzbasierter Medienprodukte
Digitale Medien:
komplexe Produkte, die aus vielen Einzelbestandteilen bestehen, die einzeln produziert
und in einem gemeinsamen Rahmen integriert werden müssen.
Netzbasierte Medienprodukte:
digitale Medienangebote wie z. B. Lernsysteme, Nachschlagwerke, Spiele, Webauftritte,
elektronische Handelsplattformen, etc.
Definitionen in Anlehnung an: Malaka, R., Butz A., Hußmann H. (2009): Medieninformatik, eine Einführung
FOM.de
SPIEGEL Online
es geht um:
Webseiten
Mobile Webseiten
Apps

4. Einfluss der Endgeräte-Innovationen auf technische
Realisierung netzbasierter Medienprodukte
Netzbasierte Medienprodukte unterscheiden sich in der technischen Realisierung
grundlegend von anderen Produkten:
Autorenwerk
Autorenwerk
zeug
zeug
•Backend
•Content
Mangement
System
Medienobjekt
Medienobjekt
(Datei(en))
(Datei(en))
WiedergabeWiedergabeprogramm
programm
•Webbrowser
•Applikation
WiedergabeWiedergabeGerät
Gerät
•PC / Laptop
•Tablet
•Smartphone
•TV
•...
In Anlehnung an: Malaka, R., Butz A., Hußmann H. (2009): Medieninformatik, eine Einführung

5. Endgeräte-Innovationen haben Einflus auf...
...Applikation!
...Qualitätssicherung!
...Interfaces!
...Lifecycle Costs!

6. Neue Programmiersprachen

7. Anwendung der Programmiersprachen
Web
Wahlweise:
81% PHP
18% ASP.NET
3% Java
iOS
Vorgabe:
Objective-C
Cocoa (API)
AppleScript
89%
JavaScript
16% Flash
frei wählbar
Android
Vorgabe:
Java
Alternativ:
C
C++
XML
iOS SDK
Android
Development Kits
Development Kits
Development
Kit
Für Entwicklung von Applikationen für iOS und Android müssen andere Programmiersprachen verwendet werden!
Abbildungen aus: Malaka, R., Butz A., Hußmann H. (2009): Medieninformatik, eine Einführung
Statistiken: World Wide Web Technology Surveys, w3techs.org
developer.apple.com; developer.android.com

8. Interfaces

9. Herausforderung Fragmentierung
Genutzte mobile Betriebssysteme
Nutzung der Betriebssysteme im Zeitverlauf
Verdreifachung von Android-Modellen
zwischen 2012 – 2013...
...auf 11.868 Geräte-Modelle!
8 Android-Versionen auf dem Markt!
Auflösungen von Android-Geräten
Quellen: Mobile Effects 2013-1, tomorrow focus media; Statista; Android Fragmentation 2013, open signals;

10. Strategische Entscheidung notwendig
Vorteile
Mobile
• jederzeit parallel zur Desktop-Version
Webseite
realisierbar
• Inhaltlich exakt an Bedürfnisse von
Mobilnutzern anpassbar
• läuft auf allen Plattformen
Web• App-Feeling
Applikation • jederzeit parallel zur Desktop-Version
realisierbar
• läuft auf allen Plattformen
Nachteile
• Erhöhter Pflegeaufwand
• Gleicher Content unter verschiedenen URLs
Native
• App-Feeling
Applikation • Über die verschiedenen App-Stores zu
beziehen
• Nutzung nativer Funktionen (Telefon,
GPS, Kamera, ...) möglich
• jederzeit parallel zur Desktop-Version
realisierbar
Responsive • Gleicher HTML-Code wie DesktopWebseite
Version
• Kein zusätzlicher Pflegeaufwand
• Läuft auf allen Plattformen
• Einheitliche URLs
• Apps müssen für unterschiedliche
Plattformen entwickelt werden (Android,
iOS, Win8,...)
• Updates müssen für alle Plattformen
ausgerollt werden
• Hoher Preis
• Für User schwierig auffindbar, da nicht in
App-Stores
• Nutzung nativer Funktionen (Telefon, GPS,
Kamera,...) eingeschränkt möglich
• hoher Aufwand für Nachrüstung
bestehender Websites
• Änderungen müssen für alle Auflösungen
vorgenommen werden
• erhöhter Konzeptionsaufwand („mobile
first“)
In Anlehnung an: http://www.analog.de/mobile-website-responsive-design-web-app-native-app/

11. Trend: responsive Webdesign
Die Breakpoints für Viewport (=sichtbarer Bereich im Browser-Fenster) werden
gesetzt und nach Über/Unterschreiten dieser, passt sich das Design an :
viewport > X
X > viewport > Y
breakpoint 1
Y < viewport
breakpoint 2
• Responsive Design ist keine Technologie. Es ist eine Design- und Umsetzungsmethode
rund um Media Queries von CSS3 oder Manipulierung des DOM per JavaScript.
• Bedeutung innerhalb von 2 Jahren stark gestiegen. Große Marken und Verleger setzen
darauf, u. a. Starbucks, Disney, Google, Microsoft, ESPN, The Bosten Globe, AOL, Time.

12. Vorteile von responsive Webdesign überwiegen
Vorteile von Responsive Design:
•Eine Applikation/Instanz ist weniger wartungsintensiv als Desktop-Version + mobile
Version
•Einheitliche URLs steigern organischen Suchmaschinentraffic
•Social Sharing ist benutzerfreundlicher
•Barrierefreiheit!
Herausforderungen in der Realisierung:
•Ältere Browser unterstützen keine CSS Media Queries
•Anwender können JavaScript deaktivieren
•Bilderauslieferung ohne unnötige Bandbreite zu verschwenden
•Eindeutige technische Unterscheidung der Geräteklasse nicht (einfach) möglich.
Useragent beinhaltet u. a Geräte-Bezeichnung, Auflösung, Pixelratio aber nicht
Geräteklasse!
•Werbeauslieferung nicht einfach, da AdServer-Anbieter in der Anpassung zu langsam.
Bislang nur Workarounds möglich

13. Qualitätssicherung & Lifecycle-Costs

14. Herausforderung: Vielfalt und Zukunft
Geräte
+ Modelle!
Browser
+ Versionen
Betriebssysteme + Versionen!
+ Zeitfaktor!
AbwärtsAbwärtskompatibilität
kompatibilität
...?
...?
...gestern
heute
morgen...
morgen
morgen
veraltet...?
veraltet...?

15. Fazit
• zuerst: Endgeräte- und Technologieinnovationen = Technology-Push
• kurz darauf: Technologie-Marktführer schaffen innovative netzbasierte Medienprodukte
• implizit werden Erwartungen der Anwender zu Anforderungen an alle Medienprodukte
= Market-Pull
• stetiger Prozess wegen sehr kurzen Innovationszyklen (wenige Monate)
Technology-Push
Technology-Push
Technology-Push
Technology-Push
Technology-Push
Technology-Push
Anpassungsdruck:
Anpassungsdruck:
Herausforderung
Herausforderung
und Chance
und Chance
Market-Pull
Market-Pull
Market-Pull
Market-Pull
Market-Pull
Market-Pull

16. Vielen Dank für die Aufmerksamkeit!
Verwendete Quellen:
Malaka, R., Butz A., Hußmann H. (2009): Medieninformatik, eine Einführung
Spath, D., et. al. (2011): Technologiemanagement – Grundlagen, Konzepte, Methoden
Maurice, F. (2012): Mobile Webseiten – Strategien, Techniken, Dos und Don‘ts für Webentwickler
Studie Mobile Effects 2013-1; Tomorrow Focus Media
http://www.slideshare.net/fullscreen/eMarketerInc/emarketer-webinar-responsive-designa-solution-for-publishers-a-question-formarketers/2
http://opensignal.com/reports/fragmentation-2013/fragmentation-2013.pdf
http://www.chip.de/news/Alcatel-One-Touch-Fire-Firefox-Handy-ab-90-Euro_60726398.html
www.w3techs.com