Going Mobile: Überblick über Mobile Web

  • 312 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
312
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
9
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Going Mobile - ein Ü Überblick
  • 2. Reichweite Mobiles Web
  • 3. Going Mobile – 3 Möglichkeiten1. Native Apps2. Hybride Apps3. Responsive Websites
  • 4. Gründe für native AppsOffline-NutzungsszenarienZugriff auf spezifische Gerätefunktionen und Daten (z.B. Kamera, Adressbuch)Hohe Performance (wichtig z.B. für Spiele)Distribution über App StoresDirekte Monetarisierung möglich
  • 5. Native Apps - NachteileHauptproblem: Diverse Plattformen erfordern unterschiedliche EntwicklungssträngeProgrammierung in unterschiedlichen Sprachen notwendig: Java, C#, Objective C etc.Hohe Kosten für die Erstellung und vor allem für die Pflege
  • 6. Hybride AppsTechnologie: HTML5, CSS3, JavascriptDistribution über Stores - wie bei nativen AppsEine Codebasis - verschiedene PlattformenEntwicklung mit Hilfe von Frameworks (z.B. Titanium oder PhoneGap)
  • 7. Hybride Apps - VorteileRelativ kostengünstige Entwicklung im Vergleich zu nativen AppsSchnellere Anpassung möglichUnterstützung vieler PlattformenZugriff auf die wichtigsten Gerätefunktionen wie Geolocation, Kamera etc.
  • 8. Hybride Apps - NachteileSchlechtere Performance im Vergleich zu nativen AppsZugriff 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 mitunterschiedlichen Auflösungen.Die mit CSS3 eingeführten „Media Queries“ Media Querieserlauben dabei die Anpassung des Designs an verschiedene Endgeräteparameter.
  • 10. Responsive Design - BeispielResponsive Design reagiert auf die Abmessungen der Endgeräte und passtsich an diese an.
  • 11. UsabilityResponsive Design muss Rücksicht nehmen auf die speziellen Anforderungen vonMobilgeräten:Kleine Bildschirmgröße , Eingabe nur perFingerbedienungNielsen: Visual continuity, feature continuity,data continuity, content continuity
  • 12. Usability - BeispielAnpassung von Layoutelementen:Dabei muss immer darauf geachtet werden, dass die Elemente auch gut bedienbar bleiben und werdeneine Mindestgröße behalten...
  • 13. Responsive Website - VorteileWesentlich geringerer PflegeaufwandEs werden gleich mehrere Bildschirmauflösungen bedient – auch TabletsZugriff auf bestimmte Funktionen wie z.B. Geolokalisierung möglichTechnologiestack: HTML5, CSS3, JavascriptMit fast jedem CMS umsetzbar
  • 14. Responsive Website - NachteileKeine Distribution über App-Stores möglichFühlt sich an wie eine Website – nicht wie eine AppViele gerätespezifischen Funktionen können nicht genutzt werdenOffline-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 - BeispieleLebendige Traditionen: http://www.lebendigetraditionen.chAktuelles Klickmodell ch.chAb dem 4.12. online: http://www.literaturpreise.ch
  • 17. Danke für ihre Aufmerksamkeit – Fragen?Sebastian Rollerroller@seitenbau.com+49 (0) 7531 36598 26