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