X-PRIME Groupe - la Matinale - le web mobile

1,370 views
1,311 views

Published on

Published in: Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,370
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
16
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

X-PRIME Groupe - la Matinale - le web mobile

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

×