Mobile web #bch11

1.500 Aufrufe

Veröffentlicht am

Planung, Konzeption und Umsetzung einer Mobilen Seite. Session vom Barcamp Hannover 2011

Veröffentlicht in: Technologie, Business
0 Kommentare
1 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.500
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
6
Aktionen
Geteilt
0
Downloads
4
Kommentare
0
Gefällt mir
1
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Mobile web #bch11

  1. 1. Websites für das Mobile Web optimieren
  2. 2. <ul><li>Über mich </li></ul>Gesichtserkennung mit iOS 5 Leif Janzik Software Engineer bei der conVISUAL AG Twitter: ElliotMonster & ThoughtOnMobile Blog: http://www.thoughtsonmobile.com
  3. 3. <ul><li>Über conVISUAL </li></ul>conVISUAL AG Mobile Marketing Firma aus Oberhausen we‘re hiring: convisual.de/jobs
  4. 4. <ul><li>Gedanken im Vorfeld </li></ul><ul><li>Fragen über Fragen </li></ul>
  5. 5. Was ist ein Mobiles Endgerät?
  6. 6. „ Today Apple is going to reinvent the phone“ – Steve Jobs bei der Vorstellung des ersten iPhone
  7. 7. &quot;iPad's Not Mobile...It's A Computer...Sorry!“ Mark Zuckerberg über das iPad
  8. 8. <ul><li>Herausforderungen einer Mobile Site </li></ul><ul><li>Unterschiede von Mobile zu Desktop </li></ul><ul><li>Kleiner Bildschirm </li></ul><ul><li>Teils langsame Verbindung </li></ul><ul><li>Vielzahl an Browsern, Endgeräten und anderen technischen Unterschieden </li></ul><ul><li>Viele heterogene Nutzungssituationen </li></ul>
  9. 9. Für welches Land entwickele ich eine Mobile Seite? 29. August 2011
  10. 10. <ul><li>Konzeption </li></ul><ul><li>Welche Geräte sollen angesprochen werden? </li></ul><ul><ul><li>kleinster gemeinsamer Nenner bestimmt das Gerüst </li></ul></ul><ul><ul><li>Geräte-Weichen erfordern mehr Aufwand, da verschiedene Versionen umgesetzt werden müssen </li></ul></ul><ul><ul><li>Weniger ist mehr: auch ein schlankes, nicht grafiklastiges Design kann schick aussehen </li></ul></ul><ul><ul><li>Eyecatcher / JavaScripts on top, nicht als grundlegendes Konzept </li></ul></ul>
  11. 11. <ul><li>Usability </li></ul><ul><li>Optimierung des Contents für mobile Geräte </li></ul><ul><li>Textwüsten vermeiden: kurze, aussagekräftige Texte </li></ul><ul><li>Content-Elemente untereinander anordnen, nicht nebeneinander </li></ul><ul><li>Seitenlänge auf max. das 2 - 2,5fache der Screenhöhe begrenzen </li></ul><ul><li>klare Menüführung und Navigation auf allen Seiten </li></ul>
  12. 12. <ul><li>Usability </li></ul><ul><li>Formulare </li></ul><ul><li>Ausfüllen auf mobilen Geräten ist naturgemäß schwieriger als mit Hardware-Tastatur (es gibt z.B. kaum Autocomplete) </li></ul><ul><li>Anzahl der Felder gering halten </li></ul><ul><li>Neue HTML5 Input-Types nutzen (email, tel, url) </li></ul><ul><li>Eingaben im Fehlerfall behalten </li></ul>
  13. 13. Wo ist mein User? Wenn er meine Seite besucht 29. August 2011
  14. 14. Wie findet mein Besucher zu mir? Der Einstiegsweg ist wichtig!
  15. 15. Wie kommt mein Besucher zu mir? <ul><li>Im einfachsten Falle: </li></ul><ul><li>Über meine Domain </li></ul>
  16. 16. <ul><li>Wie kommt mein Besucher zu mir </li></ul><ul><li>QR-Code </li></ul><ul><li>Ein anderer Weg </li></ul><ul><li>Durch einen aufgedruckten QR Code, der mit einer App eingelesen wird </li></ul>
  17. 17. <ul><li>Wie kommt mein Besucher zu mir </li></ul><ul><li>Was will ich damit sagen? </li></ul><ul><li>Die (hauptsächliche) Situation in der der Besucher die Seite besucht bestimmt die Inhalte der Seite: </li></ul><ul><li>z.B. wenn der Besucher über einen QR-Code auf der Verpackung eines Produkts auf die Seite kommt ist das letzte was er sehen will die Informationen, die er auch auf der Verpackung findet (maximal auf Unterseiten oder den 2. Blick). Stattdessen sollten weiterführende Informationen angeboten werden. </li></ul>
  18. 18. <ul><li>Ein paar Tipps zum Entwickeln von Mobilen Seiten </li></ul>
  19. 19. Eine Seite für alle <ul><li>Mobile First! </li></ul><ul><li>http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu </li></ul>
  20. 20. <ul><li>Mobile first </li></ul><ul><li>Die „schlechteste“/simpelste Version zuerst </li></ul><ul><li>Die minimalste Version für die ältesten Geräte wird zuerst entwickelt </li></ul><ul><li>Alle Erweiterungen und Verbesserungen werden z.B. mit Media Queries „oben drauf“ gesetzt, denn alte Geräte unterstützen diese neuen Techniken nicht und ignorieren sie daher </li></ul><ul><li>Denn schon seit längerem wissen wir... </li></ul>
  21. 21. nachsalzen kann man immer, wegsalzen kann man nie
  22. 22. <ul><li>Performance </li></ul><ul><li>Was sollte man beachten? </li></ul><ul><li>Komprimierung des Webservers nutzen (mod_deflate) </li></ul><ul><li>Anzahl der Requests minimieren </li></ul><ul><li>JavaScripts in eine Datei zusammenfassen und diese minimalisieren (z.B. Google Closure) </li></ul><ul><li>Grafiken wenn möglich durch CSS ersetzen (z.B. Farbverläufe) oder einbinden (Base64), CSS-Sprites nutzen </li></ul>
  23. 23. <ul><li>Performance </li></ul><ul><li>Was sollte man beachten? </li></ul><ul><li>auf älteren Geräten lieber reines CSS (langsame Verbindungen), sofern möglich </li></ul><ul><li>Grafiken optimiert ausliefern, ggf. alle Dateien in verschiedenen Auflösungen vorhalten (nicht für jedes Gerät bzw. Auflösung) </li></ul><ul><li>Animationen (GIF) vermeiden </li></ul><ul><li>Kommentare aus dem HTML entfernen </li></ul>
  24. 24. Ende Danke für eure Aufmerksamkeit und noch ein schönes #bch11

×