SlideShare a Scribd company logo
1 of 17
Download to read offline
Going Mobile - ein Ü
                   Überblick
Reichweite Mobiles Web
Going Mobile – 3 Möglichkeiten




1.   Native Apps
2.   Hybride Apps
3.   Responsive Websites
Gründe für native Apps




Offline-Nutzungsszenarien
Zugriff auf spezifische Gerätefunktionen und Daten (z.B. Kamera, Adressbuch)
Hohe Performance (wichtig z.B. für Spiele)
Distribution über App Stores
Direkte Monetarisierung möglich
Native Apps - Nachteile




Hauptproblem: Diverse Plattformen erfordern unterschiedliche Entwicklungsstränge
Programmierung in unterschiedlichen Sprachen notwendig: Java, C#, Objective C etc.
Hohe Kosten für die Erstellung und vor allem für die Pflege
Hybride Apps




Technologie: HTML5, CSS3, Javascript
Distribution über Stores - wie bei nativen Apps
Eine Codebasis - verschiedene Plattformen
Entwicklung mit Hilfe von Frameworks (z.B. Titanium oder PhoneGap)
Hybride Apps - Vorteile




Relativ kostengünstige Entwicklung im Vergleich zu nativen Apps
Schnellere Anpassung möglich
Unterstützung vieler Plattformen
Zugriff auf die wichtigsten Gerätefunktionen wie Geolocation, Kamera etc.
Hybride Apps - Nachteile




Schlechtere Performance im Vergleich zu nativen Apps
Zugriff auf spezielle Gerätefunktionen nicht oder nur eingeschränkt möglich
(z.B.
(z B Adressbuch)
Kein natives Userinterface („fühlt sich anders an als eine echte App“‘)
Responsive Webdesign - Was ist das?




Responsive Design ermöglicht die Ausgabe von Webseiten auf Endgeräte mit
unterschiedlichen Auflösungen.



Die mit CSS3 eingeführten   „Media Queries“
                             Media Queries
erlauben dabei die Anpassung des Designs an verschiedene Endgeräteparameter.
Responsive Design - Beispiel


Responsive Design reagiert auf die Abmessungen der Endgeräte und passt
sich an diese an.
Usability




Responsive Design muss Rücksicht nehmen auf die speziellen Anforderungen von
Mobilgeräten:




Kleine   Bildschirmgröße                                 , Eingabe nur per


Fingerbedienung

Nielsen: Visual continuity, feature continuity,
data continuity, content continuity
Usability - Beispiel


Anpassung von Layoutelementen:




Dabei muss immer darauf geachtet werden, dass die Elemente auch gut bedienbar bleiben und
                                 werden
eine Mindestgröße behalten...
Responsive Website - Vorteile




Wesentlich geringerer Pflegeaufwand
Es werden gleich mehrere Bildschirmauflösungen bedient – auch Tablets
Zugriff auf bestimmte Funktionen wie z.B. Geolokalisierung möglich
Technologiestack: HTML5, CSS3, Javascript
Mit fast jedem CMS umsetzbar
Responsive Website - Nachteile




Keine Distribution über App-Stores möglich
Fühlt sich an wie eine Website – nicht wie eine App
Viele gerätespezifischen Funktionen können nicht genutzt werden
Offline-Nutzung nur bedingt möglich
Responsive Website – Umdenken im Designprozess




"Using photoshop for responsive design is like bringing a
   knife to a gunfight"
Andy Clarke
   stuffandnonsense.co.uk
Responsive Webdesign im Bund - Beispiele




Lebendige Traditionen: http://www.lebendigetraditionen.ch


Aktuelles Klickmodell ch.ch


Ab dem 4.12. online: http://www.literaturpreise.ch
Danke für ihre Aufmerksamkeit – Fragen?




Sebastian Roller
roller@seitenbau.com
+49 (0) 7531 36598 26

More Related Content

Viewers also liked

Netbaes 28 01-2013
Netbaes 28 01-2013Netbaes 28 01-2013
Netbaes 28 01-2013BrainSourcer
 
biology first-Marketing: Erfolgreiche Marken beginnen und enden im Hirn!
biology first-Marketing: Erfolgreiche Marken beginnen und enden im Hirn!biology first-Marketing: Erfolgreiche Marken beginnen und enden im Hirn!
biology first-Marketing: Erfolgreiche Marken beginnen und enden im Hirn!Kremer und Konsorten
 
Teorías de la Libertad Unidad 1 Actividad 2
Teorías de la Libertad Unidad 1 Actividad 2Teorías de la Libertad Unidad 1 Actividad 2
Teorías de la Libertad Unidad 1 Actividad 2glass74
 
Peer Review und Redaktionsprozesse
Peer Review und RedaktionsprozessePeer Review und Redaktionsprozesse
Peer Review und RedaktionsprozesseEditage Germany
 
Loewe Presseclippings Österreich, 1. HJ/2011
Loewe Presseclippings Österreich, 1. HJ/2011Loewe Presseclippings Österreich, 1. HJ/2011
Loewe Presseclippings Österreich, 1. HJ/2011resultsrelations
 
Psychiatrie im Film
Psychiatrie im FilmPsychiatrie im Film
Psychiatrie im FilmF. Nouri
 
FileMaker Konferenz 2012 Lightning Presentation
FileMaker Konferenz 2012 Lightning PresentationFileMaker Konferenz 2012 Lightning Presentation
FileMaker Konferenz 2012 Lightning PresentationMartin Brändle
 
E trends & Future Technologies
E trends & Future TechnologiesE trends & Future Technologies
E trends & Future TechnologiesTim Bruysten
 
32. LTG-Sitzung am 11. Oktober 2011 Budgeteinbegleitung
32. LTG-Sitzung am 11. Oktober 2011 Budgeteinbegleitung32. LTG-Sitzung am 11. Oktober 2011 Budgeteinbegleitung
32. LTG-Sitzung am 11. Oktober 2011 BudgeteinbegleitungStephan Tauschitz
 
مرگ.رنگ -سهراب.سپهری
مرگ.رنگ -سهراب.سپهریمرگ.رنگ -سهراب.سپهری
مرگ.رنگ -سهراب.سپهریFarid Kamali
 
Neue Bücherei.virtueller Spaziergang
Neue Bücherei.virtueller SpaziergangNeue Bücherei.virtueller Spaziergang
Neue Bücherei.virtueller SpaziergangLieschen Müller
 
Location based services_dimke_dotterweich
Location based services_dimke_dotterweichLocation based services_dimke_dotterweich
Location based services_dimke_dotterweichDimkese
 
09 Das Modalverb (Moechten)
09 Das Modalverb (Moechten)09 Das Modalverb (Moechten)
09 Das Modalverb (Moechten)guest93c630
 
„Nachhaltigkeit als Träger touristischen Marketings – Verpflichtungen und Cha...
„Nachhaltigkeit als Träger touristischen Marketings – Verpflichtungen und Cha...„Nachhaltigkeit als Träger touristischen Marketings – Verpflichtungen und Cha...
„Nachhaltigkeit als Träger touristischen Marketings – Verpflichtungen und Cha...Daxboeck_Mostviertel
 
plista Präsentation Paid Content Distribution
plista Präsentation Paid Content Distributionplista Präsentation Paid Content Distribution
plista Präsentation Paid Content DistributionDominik Matyka
 

Viewers also liked (20)

Netbaes 28 01-2013
Netbaes 28 01-2013Netbaes 28 01-2013
Netbaes 28 01-2013
 
Gazpacho
GazpachoGazpacho
Gazpacho
 
Actividades 2014. ESCUELA 258- SERODINO
Actividades 2014. ESCUELA 258- SERODINOActividades 2014. ESCUELA 258- SERODINO
Actividades 2014. ESCUELA 258- SERODINO
 
La Electricidad
La Electricidad La Electricidad
La Electricidad
 
biology first-Marketing: Erfolgreiche Marken beginnen und enden im Hirn!
biology first-Marketing: Erfolgreiche Marken beginnen und enden im Hirn!biology first-Marketing: Erfolgreiche Marken beginnen und enden im Hirn!
biology first-Marketing: Erfolgreiche Marken beginnen und enden im Hirn!
 
Teorías de la Libertad Unidad 1 Actividad 2
Teorías de la Libertad Unidad 1 Actividad 2Teorías de la Libertad Unidad 1 Actividad 2
Teorías de la Libertad Unidad 1 Actividad 2
 
Peer Review und Redaktionsprozesse
Peer Review und RedaktionsprozessePeer Review und Redaktionsprozesse
Peer Review und Redaktionsprozesse
 
Loewe Presseclippings Österreich, 1. HJ/2011
Loewe Presseclippings Österreich, 1. HJ/2011Loewe Presseclippings Österreich, 1. HJ/2011
Loewe Presseclippings Österreich, 1. HJ/2011
 
Marktinfo Schweiz 2015
Marktinfo Schweiz 2015Marktinfo Schweiz 2015
Marktinfo Schweiz 2015
 
Psychiatrie im Film
Psychiatrie im FilmPsychiatrie im Film
Psychiatrie im Film
 
FileMaker Konferenz 2012 Lightning Presentation
FileMaker Konferenz 2012 Lightning PresentationFileMaker Konferenz 2012 Lightning Presentation
FileMaker Konferenz 2012 Lightning Presentation
 
E trends & Future Technologies
E trends & Future TechnologiesE trends & Future Technologies
E trends & Future Technologies
 
32. LTG-Sitzung am 11. Oktober 2011 Budgeteinbegleitung
32. LTG-Sitzung am 11. Oktober 2011 Budgeteinbegleitung32. LTG-Sitzung am 11. Oktober 2011 Budgeteinbegleitung
32. LTG-Sitzung am 11. Oktober 2011 Budgeteinbegleitung
 
مرگ.رنگ -سهراب.سپهری
مرگ.رنگ -سهراب.سپهریمرگ.رنگ -سهراب.سپهری
مرگ.رنگ -سهراب.سپهری
 
Neue Bücherei.virtueller Spaziergang
Neue Bücherei.virtueller SpaziergangNeue Bücherei.virtueller Spaziergang
Neue Bücherei.virtueller Spaziergang
 
Location based services_dimke_dotterweich
Location based services_dimke_dotterweichLocation based services_dimke_dotterweich
Location based services_dimke_dotterweich
 
09 Das Modalverb (Moechten)
09 Das Modalverb (Moechten)09 Das Modalverb (Moechten)
09 Das Modalverb (Moechten)
 
„Nachhaltigkeit als Träger touristischen Marketings – Verpflichtungen und Cha...
„Nachhaltigkeit als Träger touristischen Marketings – Verpflichtungen und Cha...„Nachhaltigkeit als Träger touristischen Marketings – Verpflichtungen und Cha...
„Nachhaltigkeit als Träger touristischen Marketings – Verpflichtungen und Cha...
 
ÖW Marketingkampagne 2013 Deutschland
ÖW Marketingkampagne 2013 DeutschlandÖW Marketingkampagne 2013 Deutschland
ÖW Marketingkampagne 2013 Deutschland
 
plista Präsentation Paid Content Distribution
plista Präsentation Paid Content Distributionplista Präsentation Paid Content Distribution
plista Präsentation Paid Content Distribution
 

Similar to Going Mobile: Überblick über Mobile Web

Umsetzungsstrategien für Cross-Plattform Projekte - IA Konferenz 2013 Klaus R...
Umsetzungsstrategien für Cross-Plattform Projekte - IA Konferenz 2013 Klaus R...Umsetzungsstrategien für Cross-Plattform Projekte - IA Konferenz 2013 Klaus R...
Umsetzungsstrategien für Cross-Plattform Projekte - IA Konferenz 2013 Klaus R...Klaus Rüggenmann
 
Einfluss der Endgeräte-Innovationen auf technische Realisierung netzbasierter...
Einfluss der Endgeräte-Innovationen auf technische Realisierung netzbasierter...Einfluss der Endgeräte-Innovationen auf technische Realisierung netzbasierter...
Einfluss der Endgeräte-Innovationen auf technische Realisierung netzbasierter...Alexej Antropov
 
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)denkwerk GmbH
 
Responsive Webdesign Process
Responsive Webdesign ProcessResponsive Webdesign Process
Responsive Webdesign ProcessSven Wolfermann
 
Cross Plattform Entwicklung für Mobile Anwendungen
Cross Plattform Entwicklung für Mobile AnwendungenCross Plattform Entwicklung für Mobile Anwendungen
Cross Plattform Entwicklung für Mobile AnwendungenMarkus Eiglsperger
 
Erstellung von mobilen cross-platform-Apps
Erstellung von mobilen cross-platform-AppsErstellung von mobilen cross-platform-Apps
Erstellung von mobilen cross-platform-AppsRalf Lütke
 
Automatisierte Generierung hybrider Apps für Mobile Devices (Kolloquium)
Automatisierte Generierung hybrider Apps für Mobile Devices (Kolloquium)Automatisierte Generierung hybrider Apps für Mobile Devices (Kolloquium)
Automatisierte Generierung hybrider Apps für Mobile Devices (Kolloquium)Jens Küsters
 
Die mobile Herausforderung
Die mobile Herausforderung Die mobile Herausforderung
Die mobile Herausforderung Martin Reiher
 
Intel XDK: Cross-Plattform Entwicklung – Apps Entwickeln für alle Plattformen...
Intel XDK: Cross-Plattform Entwicklung – Apps Entwickeln für alle Plattformen...Intel XDK: Cross-Plattform Entwicklung – Apps Entwickeln für alle Plattformen...
Intel XDK: Cross-Plattform Entwicklung – Apps Entwickeln für alle Plattformen...Gregor Biswanger
 
WP Camp 2012 Mobile First & Wordpress
WP Camp 2012 Mobile First & WordpressWP Camp 2012 Mobile First & Wordpress
WP Camp 2012 Mobile First & WordpressKirstenSchelper
 
Roadshow: Einstieg in die Hybrid-App Entwicklung mit dem Intel XDK und Apache...
Roadshow: Einstieg in die Hybrid-App Entwicklung mit dem Intel XDK und Apache...Roadshow: Einstieg in die Hybrid-App Entwicklung mit dem Intel XDK und Apache...
Roadshow: Einstieg in die Hybrid-App Entwicklung mit dem Intel XDK und Apache...Gregor Biswanger
 
Progressive Web Apps Presentation
Progressive Web Apps PresentationProgressive Web Apps Presentation
Progressive Web Apps PresentationSteffen Wagner
 
Android Entwicklung (App Entwickler Konferenz 2010 der Telekom)
Android Entwicklung (App Entwickler Konferenz 2010 der Telekom)Android Entwicklung (App Entwickler Konferenz 2010 der Telekom)
Android Entwicklung (App Entwickler Konferenz 2010 der Telekom)greenrobot
 

Similar to Going Mobile: Überblick über Mobile Web (20)

Umsetzungsstrategien für Cross-Plattform Projekte - IA Konferenz 2013 Klaus R...
Umsetzungsstrategien für Cross-Plattform Projekte - IA Konferenz 2013 Klaus R...Umsetzungsstrategien für Cross-Plattform Projekte - IA Konferenz 2013 Klaus R...
Umsetzungsstrategien für Cross-Plattform Projekte - IA Konferenz 2013 Klaus R...
 
Einfluss der Endgeräte-Innovationen auf technische Realisierung netzbasierter...
Einfluss der Endgeräte-Innovationen auf technische Realisierung netzbasierter...Einfluss der Endgeräte-Innovationen auf technische Realisierung netzbasierter...
Einfluss der Endgeräte-Innovationen auf technische Realisierung netzbasierter...
 
Digitale Mobilmachung - Wege zum mobilen Internetangebot
Digitale Mobilmachung - Wege zum mobilen Internetangebot Digitale Mobilmachung - Wege zum mobilen Internetangebot
Digitale Mobilmachung - Wege zum mobilen Internetangebot
 
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
 
Responsive Webdesign Process
Responsive Webdesign ProcessResponsive Webdesign Process
Responsive Webdesign Process
 
Cross Plattform Entwicklung für Mobile Anwendungen
Cross Plattform Entwicklung für Mobile AnwendungenCross Plattform Entwicklung für Mobile Anwendungen
Cross Plattform Entwicklung für Mobile Anwendungen
 
design
designdesign
design
 
Web Design Trends 2011
Web Design Trends 2011Web Design Trends 2011
Web Design Trends 2011
 
Responsive design
Responsive designResponsive design
Responsive design
 
Erstellung von mobilen cross-platform-Apps
Erstellung von mobilen cross-platform-AppsErstellung von mobilen cross-platform-Apps
Erstellung von mobilen cross-platform-Apps
 
Automatisierte Generierung hybrider Apps für Mobile Devices (Kolloquium)
Automatisierte Generierung hybrider Apps für Mobile Devices (Kolloquium)Automatisierte Generierung hybrider Apps für Mobile Devices (Kolloquium)
Automatisierte Generierung hybrider Apps für Mobile Devices (Kolloquium)
 
Mobile Applikationen: Idee, Konzeption, Architektur - Erfolgreicher Start für...
Mobile Applikationen: Idee, Konzeption, Architektur - Erfolgreicher Start für...Mobile Applikationen: Idee, Konzeption, Architektur - Erfolgreicher Start für...
Mobile Applikationen: Idee, Konzeption, Architektur - Erfolgreicher Start für...
 
Die mobile Herausforderung
Die mobile Herausforderung Die mobile Herausforderung
Die mobile Herausforderung
 
Mobile Applikationen - Juni 2013 - Cross-Plattform-Entwicklung
Mobile Applikationen - Juni 2013 - Cross-Plattform-EntwicklungMobile Applikationen - Juni 2013 - Cross-Plattform-Entwicklung
Mobile Applikationen - Juni 2013 - Cross-Plattform-Entwicklung
 
Intel XDK: Cross-Plattform Entwicklung – Apps Entwickeln für alle Plattformen...
Intel XDK: Cross-Plattform Entwicklung – Apps Entwickeln für alle Plattformen...Intel XDK: Cross-Plattform Entwicklung – Apps Entwickeln für alle Plattformen...
Intel XDK: Cross-Plattform Entwicklung – Apps Entwickeln für alle Plattformen...
 
WP Camp 2012 Mobile First & Wordpress
WP Camp 2012 Mobile First & WordpressWP Camp 2012 Mobile First & Wordpress
WP Camp 2012 Mobile First & Wordpress
 
Roadshow: Einstieg in die Hybrid-App Entwicklung mit dem Intel XDK und Apache...
Roadshow: Einstieg in die Hybrid-App Entwicklung mit dem Intel XDK und Apache...Roadshow: Einstieg in die Hybrid-App Entwicklung mit dem Intel XDK und Apache...
Roadshow: Einstieg in die Hybrid-App Entwicklung mit dem Intel XDK und Apache...
 
Mobile Applikationen: Entwicklung, Rollout, Wartung - Tipps und Tricks für di...
Mobile Applikationen: Entwicklung, Rollout, Wartung - Tipps und Tricks für di...Mobile Applikationen: Entwicklung, Rollout, Wartung - Tipps und Tricks für di...
Mobile Applikationen: Entwicklung, Rollout, Wartung - Tipps und Tricks für di...
 
Progressive Web Apps Presentation
Progressive Web Apps PresentationProgressive Web Apps Presentation
Progressive Web Apps Presentation
 
Android Entwicklung (App Entwickler Konferenz 2010 der Telekom)
Android Entwicklung (App Entwickler Konferenz 2010 der Telekom)Android Entwicklung (App Entwickler Konferenz 2010 der Telekom)
Android Entwicklung (App Entwickler Konferenz 2010 der Telekom)
 

More from ch.ch

Impulspräsentation zu ch.ch
Impulspräsentation zu ch.chImpulspräsentation zu ch.ch
Impulspräsentation zu ch.chch.ch
 
ch.ch 2020
ch.ch 2020 ch.ch 2020
ch.ch 2020 ch.ch
 
Erwartungen an e-Gov
Erwartungen an e-GovErwartungen an e-Gov
Erwartungen an e-Govch.ch
 
Options stratégiques pour ch.ch
Options stratégiques pour ch.chOptions stratégiques pour ch.ch
Options stratégiques pour ch.chch.ch
 
Strategische Optionen für ch.ch
Strategische Optionen für ch.chStrategische Optionen für ch.ch
Strategische Optionen für ch.chch.ch
 
Vom Informations- zum Interaktionsportal
Vom Informations- zum InteraktionsportalVom Informations- zum Interaktionsportal
Vom Informations- zum Interaktionsportalch.ch
 
Twitter @br sprecher
Twitter @br sprecherTwitter @br sprecher
Twitter @br sprecherch.ch
 
Twitter @vbs ddps
Twitter @vbs ddpsTwitter @vbs ddps
Twitter @vbs ddpsch.ch
 
Social Media Monitoring beim BSV
Social Media Monitoring beim BSVSocial Media Monitoring beim BSV
Social Media Monitoring beim BSVch.ch
 
Bundesarchiv: Erste Schritte auf Facebook
Bundesarchiv: Erste Schritte auf FacebookBundesarchiv: Erste Schritte auf Facebook
Bundesarchiv: Erste Schritte auf Facebookch.ch
 
Schreiben für Suchmaschinen
Schreiben für SuchmaschinenSchreiben für Suchmaschinen
Schreiben für Suchmaschinench.ch
 
I like – und jetzt?
I like – und jetzt?I like – und jetzt?
I like – und jetzt?ch.ch
 
Social Media Kennzahlen, Reporting und Monitoring
Social Media Kennzahlen, Reporting und MonitoringSocial Media Kennzahlen, Reporting und Monitoring
Social Media Kennzahlen, Reporting und Monitoringch.ch
 
Social-Media-Krise
Social-Media-KriseSocial-Media-Krise
Social-Media-Krisech.ch
 
Social-Media-Krisenkommunikation
Social-Media-KrisenkommunikationSocial-Media-Krisenkommunikation
Social-Media-Krisenkommunikationch.ch
 
Search Engine Optimization
Search Engine Optimization Search Engine Optimization
Search Engine Optimization ch.ch
 
Suchmaschinen Optimierung
Suchmaschinen OptimierungSuchmaschinen Optimierung
Suchmaschinen Optimierungch.ch
 
ch.ch wird neu I ch.ch change de peau
ch.ch wird neu I ch.ch change de peauch.ch wird neu I ch.ch change de peau
ch.ch wird neu I ch.ch change de peauch.ch
 
Productivité et sites web de l'administration
Productivité et sites web de l'administrationProductivité et sites web de l'administration
Productivité et sites web de l'administrationch.ch
 
Websites wirtschaftlich betreiben
Websites wirtschaftlich betreibenWebsites wirtschaftlich betreiben
Websites wirtschaftlich betreibench.ch
 

More from ch.ch (20)

Impulspräsentation zu ch.ch
Impulspräsentation zu ch.chImpulspräsentation zu ch.ch
Impulspräsentation zu ch.ch
 
ch.ch 2020
ch.ch 2020 ch.ch 2020
ch.ch 2020
 
Erwartungen an e-Gov
Erwartungen an e-GovErwartungen an e-Gov
Erwartungen an e-Gov
 
Options stratégiques pour ch.ch
Options stratégiques pour ch.chOptions stratégiques pour ch.ch
Options stratégiques pour ch.ch
 
Strategische Optionen für ch.ch
Strategische Optionen für ch.chStrategische Optionen für ch.ch
Strategische Optionen für ch.ch
 
Vom Informations- zum Interaktionsportal
Vom Informations- zum InteraktionsportalVom Informations- zum Interaktionsportal
Vom Informations- zum Interaktionsportal
 
Twitter @br sprecher
Twitter @br sprecherTwitter @br sprecher
Twitter @br sprecher
 
Twitter @vbs ddps
Twitter @vbs ddpsTwitter @vbs ddps
Twitter @vbs ddps
 
Social Media Monitoring beim BSV
Social Media Monitoring beim BSVSocial Media Monitoring beim BSV
Social Media Monitoring beim BSV
 
Bundesarchiv: Erste Schritte auf Facebook
Bundesarchiv: Erste Schritte auf FacebookBundesarchiv: Erste Schritte auf Facebook
Bundesarchiv: Erste Schritte auf Facebook
 
Schreiben für Suchmaschinen
Schreiben für SuchmaschinenSchreiben für Suchmaschinen
Schreiben für Suchmaschinen
 
I like – und jetzt?
I like – und jetzt?I like – und jetzt?
I like – und jetzt?
 
Social Media Kennzahlen, Reporting und Monitoring
Social Media Kennzahlen, Reporting und MonitoringSocial Media Kennzahlen, Reporting und Monitoring
Social Media Kennzahlen, Reporting und Monitoring
 
Social-Media-Krise
Social-Media-KriseSocial-Media-Krise
Social-Media-Krise
 
Social-Media-Krisenkommunikation
Social-Media-KrisenkommunikationSocial-Media-Krisenkommunikation
Social-Media-Krisenkommunikation
 
Search Engine Optimization
Search Engine Optimization Search Engine Optimization
Search Engine Optimization
 
Suchmaschinen Optimierung
Suchmaschinen OptimierungSuchmaschinen Optimierung
Suchmaschinen Optimierung
 
ch.ch wird neu I ch.ch change de peau
ch.ch wird neu I ch.ch change de peauch.ch wird neu I ch.ch change de peau
ch.ch wird neu I ch.ch change de peau
 
Productivité et sites web de l'administration
Productivité et sites web de l'administrationProductivité et sites web de l'administration
Productivité et sites web de l'administration
 
Websites wirtschaftlich betreiben
Websites wirtschaftlich betreibenWebsites wirtschaftlich betreiben
Websites wirtschaftlich betreiben
 

Going Mobile: Überblick über Mobile Web

  • 1. Going Mobile - ein Ü Überblick
  • 3. Going Mobile – 3 Möglichkeiten 1. Native Apps 2. Hybride Apps 3. Responsive Websites
  • 4. Gründe für native Apps Offline-Nutzungsszenarien Zugriff auf spezifische Gerätefunktionen und Daten (z.B. Kamera, Adressbuch) Hohe Performance (wichtig z.B. für Spiele) Distribution über App Stores Direkte Monetarisierung möglich
  • 5. Native Apps - Nachteile Hauptproblem: Diverse Plattformen erfordern unterschiedliche Entwicklungsstränge Programmierung in unterschiedlichen Sprachen notwendig: Java, C#, Objective C etc. Hohe Kosten für die Erstellung und vor allem für die Pflege
  • 6. Hybride Apps Technologie: HTML5, CSS3, Javascript Distribution über Stores - wie bei nativen Apps Eine Codebasis - verschiedene Plattformen Entwicklung mit Hilfe von Frameworks (z.B. Titanium oder PhoneGap)
  • 7. Hybride Apps - Vorteile Relativ kostengünstige Entwicklung im Vergleich zu nativen Apps Schnellere Anpassung möglich Unterstützung vieler Plattformen Zugriff auf die wichtigsten Gerätefunktionen wie Geolocation, Kamera etc.
  • 8. Hybride Apps - Nachteile Schlechtere Performance im Vergleich zu nativen Apps Zugriff auf spezielle Gerätefunktionen nicht oder nur eingeschränkt möglich (z.B. (z B Adressbuch) Kein natives Userinterface („fühlt sich anders an als eine echte App“‘)
  • 9. Responsive Webdesign - Was ist das? Responsive Design ermöglicht die Ausgabe von Webseiten auf Endgeräte mit unterschiedlichen Auflösungen. Die mit CSS3 eingeführten „Media Queries“ Media Queries erlauben dabei die Anpassung des Designs an verschiedene Endgeräteparameter.
  • 10. Responsive Design - Beispiel Responsive Design reagiert auf die Abmessungen der Endgeräte und passt sich an diese an.
  • 11. Usability Responsive Design muss Rücksicht nehmen auf die speziellen Anforderungen von Mobilgeräten: Kleine Bildschirmgröße , Eingabe nur per Fingerbedienung Nielsen: Visual continuity, feature continuity, data continuity, content continuity
  • 12. Usability - Beispiel Anpassung von Layoutelementen: Dabei muss immer darauf geachtet werden, dass die Elemente auch gut bedienbar bleiben und werden eine Mindestgröße behalten...
  • 13. Responsive Website - Vorteile Wesentlich geringerer Pflegeaufwand Es werden gleich mehrere Bildschirmauflösungen bedient – auch Tablets Zugriff auf bestimmte Funktionen wie z.B. Geolokalisierung möglich Technologiestack: HTML5, CSS3, Javascript Mit fast jedem CMS umsetzbar
  • 14. Responsive Website - Nachteile Keine Distribution über App-Stores möglich Fühlt sich an wie eine Website – nicht wie eine App Viele gerätespezifischen Funktionen können nicht genutzt werden Offline-Nutzung nur bedingt möglich
  • 15. Responsive Website – Umdenken im Designprozess "Using photoshop for responsive design is like bringing a knife to a gunfight" Andy Clarke stuffandnonsense.co.uk
  • 16. Responsive Webdesign im Bund - Beispiele Lebendige Traditionen: http://www.lebendigetraditionen.ch Aktuelles Klickmodell ch.ch Ab dem 4.12. online: http://www.literaturpreise.ch
  • 17. Danke für ihre Aufmerksamkeit – Fragen? Sebastian Roller roller@seitenbau.com +49 (0) 7531 36598 26