X-Prime Groupe est une agence de communication et de marketing digital fondée en 2002, comptant plus de 60 employés. Le groupe gère le webzine Blogoergosum et propose des émissions de marketing digital tout en se spécialisant dans le développement de sites web mobiles adaptés à différents formats. Leur expertise vise à optimiser la communication des marques en tenant compte des spécificités du marché mobile en constante évolution.

1. X-PRIME Groupe / La matinaleLe web mobile

2. X-PRIME GroupeQui sommes nous ?

3. 3A propos deX-PRIME GroupeNotre métier est de concevoir, réaliser et médiatiser des dispositifs de communication et de marketing pour les marques et leurs publicsUne équipeAnnée de créationUn groupe interactifde plus de 60 personnes2002indépendantIntervenant sur le conseil, la création, la réalisation et la diffusion de dispositifs de communication sur les médias digitaux

4. 4Structure duGroupe

5. 5Blogoergosum,Notre expertise au profit des internauteswww.BlogoErgoSum.comBlogoErgoSum, 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.3k2000TopBlogvisites par jourarticlesclassementWikio

6. 6Brand contentDes émissions 100 % marketing digitalLes 60 Secondes du WebEmission hebdomadaireL’essentiel de l’actualité web (marketing, design, technologique …) dans un format court, à emporter … et avec une bonne dose de fun !Diffusé surDepuis 2010

7. 7Nos clientsIls nous font confiance

8. Le web mobileLes spécificités

9. 9Le web mobile Les spécificitésDe nombreux OS

10. 10Le web mobileLes spécificitésUne répartition géographique hétérogène

11. 11Le web mobileLes spécificitésUn marché fragmenté entre les constructeurs de mobile

12. 12Le web mobileLes spécificitésUn marché en pleine évolution

13. 13Le web mobileLes spécificitésDe nombreux formats à prendre en compte

14. Le web mobileSites flexibles avec Media Queries

15. 15Le web mobileSites flexibles avec Media QueriesLe Responsive DesignDe nombreux exemples ici : www.mediaqueri.es

16. 16Le web mobileSites flexibles avec Media QueriesDétection CSS 3 :Orientation (portrait, paysage)Dimensions (hauteur, largeur)Résolution (dpi)Exemple : paysage

17. 17Le web mobileSites flexibles avec Media QueriesExemple: portrait

18. 18Le web mobileSites flexibles avec Media Queries Les dimensions fluides

19. 19Le web mobileSites flexibles avec Media QueriesLes dimensions fixes

20. 20Le web mobileLes sites flexibles avec Media QueriesLes avantages : Une seule version du site à maintenir(desktop, laptop, tablette, smartphone, TV...)Attention : Très bien penser la conception du sitePenser aussi aux pages internes (panier, contact...)

21. Le web mobileSites dédiés avecjQuery Mobile

22. 22Le web mobileSites dédiés avec jQuery MobileExemples :

23. 23Le web mobileSites dédiés avec jQuery MobilePage type :

24. 24Le web mobileSites dédiés avec jQuery MobileListe de liens :

25. 25Le web mobileSites dédiés avec jQuery MobileFormulaire basique :

26. 26Le web mobileSites dédiés avec jQuery MobileNiveau de support de jQuery Mobile par navigateur:

27. 27Le web mobileSites dédiés avec jQuery MobileLes avantages :Bon support des navigateursBonne documentationMoins de 20koAttention : Encore en version Alpha (version finale prévue pour cet été)Site mobile dédié = 2 versions du site

28. Le web mobileTrucs et astuces

29. Le web mobileTrucs et astucesEviter le « pinch to zoom »

30. 30Le web mobileTrucs et astucesExemple : Version desktopVersion mobile

31. 31Le web mobileTrucs et astucesPrévoir un thème switcher pour basculer de la version desktop à la version mobile

32. 32Le web mobileTrucs et astucesLes images doivent occuper 100% de la largeur disponible Exemple

33. 33Le web mobileTrucs et astucesMasquer des éléments secondaires ou choisisExemplePas de Flash  l’iPhone ne le lit pas !Intégrer le clic to call

34. 34Le web mobileTrucs et astucesIntégrer des champs de formulaires HTMLPour du texte : Pour un adresse mail : Pour une URL :

35. 35Le web mobileTrucs et astucesIntégrer la géolocalisation

36. 36Le web mobileTrucs et astucesPossibilité 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. 37Le web mobileTrucs et astucesIntégrer des QR codes

38. 38Le web mobileTrucs et astucesJamais de largeur supérieure au device-width (~300px)Ne pas fixer la hauteur des blocsPenser aux bords de l'écran (padding)Zones de clic suffisamment larges (padding)L'état : hover n'existe pas sur mobileMontage tableau interdit !

39. 39