Développer pour le web mobile en pratique - outils et techniques

Concevoir un site ou une application web pour le mobile n'a rien à voir avec le web classique. Pourtant, les techniques et processus débordent aujourd'hui sur le web de bureau !

Cet atelier commencera donc par un rappel des notions et contraintes qui font la particularité du web mobile, suivi par un tour d'horizon des différents frameworks et outils disponibles. Enfin, l'analyse de différents sites et applications nous permettra de réfléchir à ce qui fonctionne bien ou pas, et pourquoi.

Atelier présenté à Paris Web.

Transcript

1. Développer pour le Web Mobile en pratique : outils et techniques Goulven CHAMPENOIS
2. Bonjour !
3. Ressources Les liens sont dans files.userland.fr/pw2011
4. Sondage : avez-vous... ✓ Déjà consulté un site mobile ? ✓ Un smartphone ? ✓ Un netbook ? ✓ Une tablette ? ✓ Développé un site mobile ? ✓ Développé une appli mobile ?
5. Rappels ✓ Smartphone / Feature phone ✓ Contexte / Usage mobile ✓ Navigateur Proxy / Complet / Hybride ✓ Webkit == Wekbit ? ✓ Click vs Touch ✓ Quelle taille fait 1px ✓ Media Queries ✓ Design réactif (responsive web design) ✓ Mobile != iPhone ✓ Natif != Mieux
6. Contraintes ✓ Réseau ✓ Processeur ✓ Espace pour cache ✓ Système de pointage ✓ Méthode de saisie
7. Quelques chiffres ✓ Fin 2010, il s’est vendu plus de tablettes que de PC ✓ En 2010, 25% des utilisateurs Facebook actifs utilisaient leur mobile ✓ En 2011, ils sont 50% ✓ 33% des messages postés sur Facebook viennent d’un mobile ✓ 40% des tweets viennent d’un mobile
8. Performances ✓ Eviter Javascript ✓ Minifier ✓ Compresser ✓ Date d’expiration lointaine ✓ HTML max 25ko ✓ CSS/JS/img < 1Mo ✓ Manifest ✓ localStorage ✓ Eviter les cookies
9. Détecter le type d’appareil 1.Chercher des mots-clés 2.Utiliser WURFL, DeviceAtlas ou Apache Mobile Filter 3.Assumer le pire et demander à l’appareil
10. Appli native ou web ?
11. Appli native ✓ Tourne plus rapidement ✓ Accès photo, contact, accéléromètre... ✓ Mais : 1 par OS ✓ Mais : délais AppStore
12. Appli web ✓ Développeurs déjà formés ✓ Pas d’installation ✓ Mais : code branching
13. Système hybride ✓ Langages maîtrisés ✓ Compilation / Tests simplifiés ✓ Mais : API à apprendre ✓ Mais : intermédiaire en plus Développé en web, packagé en application
14. Des questions ? ✓ goulvench@gmail.com ✓ @goulvench
15. Merci ! ✓ Système de présentation : CSSS par Lea Verou ✓ Photo de Berlin sur flickr.com/photos/goulvenchampenois Crédits :