3. 3 A propos de X-PRIME Groupe Notre métier est de concevoir, réaliser et médiatiser des dispositifs de communication et de marketing pour les marques et leurs publics Une équipe Année de création Un groupe interactif de plus de 60 personnes 2002 indépendant Intervenant sur le conseil, la création, la réalisation et la diffusion de dispositifs de communication sur les médias digitaux
5. 5 Blogoergosum, Notre expertise au profit des internautes www.BlogoErgoSum.com BlogoErgoSum, le webzine alimenté par les collaborateurs de X-PRIME Groupe, traitant au quotidien de l’actualité du design, du social media, du web marketing, du mobile etc. 3k 2000 TopBlog visites par jour articles classementWikio
6. 6 Brand content Des émissions 100 % marketing digital Les 60 Secondes du Web Emission hebdomadaire L’essentiel de l’actualité web (marketing, design, technologique …) dans un format court, à emporter … et avec une bonne dose de fun ! Diffusé sur Depuis 2010
15. 15 Le web mobile Sites flexibles avec Media Queries Le Responsive Design De nombreux exemples ici : www.mediaqueri.es
16. 16 Le web mobile Sites flexibles avec Media Queries Détection CSS 3 : Orientation (portrait, paysage) Dimensions (hauteur, largeur) Résolution (dpi) Exemple : paysage
17. 17 Le web mobile Sites flexibles avec Media Queries Exemple: portrait
18. 18 Le web mobile Sites flexibles avec Media Queries Les dimensions fluides
19. 19 Le web mobile Sites flexibles avec Media Queries Les dimensions fixes
20. 20 Le web mobile Les sites flexibles avec Media Queries Les avantages : Une seule version du site à maintenir (desktop, laptop, tablette, smartphone, TV...) Attention : Très bien penser la conception du site Penser aussi aux pages internes (panier, contact...)
22. 22 Le web mobile Sites dédiés avec jQuery Mobile Exemples :
23. 23 Le web mobile Sites dédiés avec jQuery Mobile Page type :
24. 24 Le web mobile Sites dédiés avec jQuery Mobile Liste de liens :
25. 25 Le web mobile Sites dédiés avec jQuery Mobile Formulaire basique :
26. 26 Le web mobile Sites dédiés avec jQuery Mobile Niveau de support de jQuery Mobile par navigateur:
27. 27 Le web mobile Sites dédiés avec jQuery Mobile Les avantages : Bon support des navigateurs Bonne documentation Moins de 20ko Attention : Encore en version Alpha (version finale prévue pour cet été) Site mobile dédié = 2 versions du site
29. Le web mobile Trucs et astuces Eviter le « pinch to zoom »
30. 30 Le web mobile Trucs et astuces Exemple : Version desktopVersion mobile
31. 31 Le web mobile Trucs et astuces Prévoir un thème switcher pour basculer de la version desktop à la version mobile
32. 32 Le web mobile Trucs et astuces Les images doivent occuper 100% de la largeur disponible Exemple
33. 33 Le web mobile Trucs et astuces Masquer des éléments secondaires ou choisis Exemple Pas de Flash l’iPhone ne le lit pas ! Intégrer le clic to call
34. 34 Le web mobile Trucs et astuces Intégrer des champs de formulaires HTML Pour du texte : Pour un adresse mail : Pour une URL :
35. 35 Le web mobile Trucs et astuces Intégrer la géolocalisation
36. 36 Le web mobile Trucs et astuces Possibilité d’utiliser les Touchgestures (swipe, pinch, long tap…) Intégrer un mode hors ligne : les contenus de bases sont téléchargés et accessibles à tout moment
37. 37 Le web mobile Trucs et astuces Intégrer des QR codes
38. 38 Le web mobile Trucs et astuces Jamais de largeur supérieure au device-width (~300px) Ne pas fixer la hauteur des blocs Penser aux bords de l'écran (padding) Zones de clic suffisamment larges (padding) L'état : hover n'existe pas sur mobile Montage tableau interdit !
