X-PRIME Groupe / La matinale<br />Le web mobile<br />
X-PRIME Groupe<br />Qui sommes nous ?<br />
3<br />A propos de<br />X-PRIME Groupe<br />Notre métier est de concevoir, réaliser et médiatiser des dispositifs de commu...
4<br />Structure du<br />Groupe<br />
5<br />Blogoergosum,<br />Notre expertise au profit des internautes<br />www.BlogoErgoSum.com<br />BlogoErgoSum, le webzin...
6<br />Brand content<br />Des émissions 100 % marketing digital<br />Les 60 Secondes du Web<br />Emission hebdomadaire<br ...
7<br />Nos clients<br />Ils nous font confiance<br />
Le web mobile<br />Les spécificités<br />
9<br />Le web mobile	<br />Les spécificités<br />De nombreux OS <br />
10<br />Le web mobile<br />Les spécificités<br />Une répartition géographique hétérogène <br />
11<br />Le web mobile<br />Les spécificités<br />Un marché fragmenté entre les constructeurs de mobile<br />
12<br />Le web mobile<br />Les spécificités<br />Un marché en pleine évolution<br />
13<br />Le web mobile<br />Les spécificités<br />De nombreux formats à prendre en compte<br />
Le web mobile<br />Sites flexibles avec <br />Media Queries<br />
15<br />Le web mobile<br />Sites flexibles avec Media Queries<br />Le Responsive Design<br />De nombreux exemples ici : ww...
16<br />Le web mobile<br />Sites flexibles avec Media Queries<br />Détection CSS 3 :<br />Orientation (portrait, paysage)<...
17<br />Le web mobile<br />Sites flexibles avec Media Queries<br />Exemple: portrait <br />
18<br />Le web mobile<br />Sites flexibles avec Media Queries<br /> Les dimensions fluides <br />
19<br />Le web mobile<br />Sites flexibles avec Media Queries<br />Les dimensions fixes<br />
20<br />Le web mobile<br />Les sites flexibles avec Media Queries<br />Les avantages : Une seule version du site à mainten...
Le web mobile<br />Sites dédiés avec<br />jQuery Mobile<br />
22<br />Le web mobile<br />Sites dédiés avec jQuery Mobile<br />Exemples :<br />
23<br />Le web mobile<br />Sites dédiés avec jQuery Mobile<br />Page type : <br />
24<br />Le web mobile<br />Sites dédiés avec jQuery Mobile<br />Liste de liens : <br />
25<br />Le web mobile<br />Sites dédiés avec jQuery Mobile<br />Formulaire basique : <br />
26<br />Le web mobile<br />Sites dédiés avec jQuery Mobile<br />Niveau de support de jQuery Mobile par navigateur: <br />
27<br />Le web mobile<br />Sites dédiés avec jQuery Mobile<br />Les avantages :<br />Bon support des navigateurs<br />Bonn...
Le web mobile<br />Trucs et astuces<br />
Le web mobile<br />Trucs et astuces<br />Eviter le « pinch to zoom »<br />
30<br />Le web mobile<br />Trucs et astuces<br />Exemple : <br />	Version desktopVersion mobile<br />
31<br />Le web mobile<br />Trucs et astuces<br />Prévoir un thème switcher pour basculer de la version desktop à la versio...
32<br />Le web mobile<br />Trucs et astuces<br />Les images doivent occuper 100% de la largeur disponible <br />Exemple <b...
33<br />Le web mobile<br />Trucs et astuces<br />Masquer des éléments secondaires ou choisis<br />Exemple<br />Pas de Flas...
34<br />Le web mobile<br />Trucs et astuces<br />Intégrer des champs de formulaires HTML<br />Pour du texte :		Pour un adr...
35<br />Le web mobile<br />Trucs et astuces<br />Intégrer la géolocalisation<br />
36<br />Le web mobile<br />Trucs et astuces<br />Possibilité d’utiliser les Touchgestures (swipe, pinch, long tap…)<br />I...
37<br />Le web mobile<br />Trucs et astuces<br />Intégrer des QR codes<br />
38<br />Le web mobile<br />Trucs et astuces<br />Jamais de largeur supérieure au device-width (~300px)<br />Ne pas fixer l...
39<br />
Prochain SlideShare
Chargement dans…5
×

X-PRIME Groupe - la Matinale - le web mobile

1 481 vues

Publié le

Publié dans : Business
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
1 481
Sur SlideShare
0
Issues des intégrations
0
Intégrations
5
Actions
Partages
0
Téléchargements
16
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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 />

×