Your SlideShare is downloading. ×
  • Like
X-PRIME Groupe - la Matinale - le web mobile
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

X-PRIME Groupe - la Matinale - le web mobile

  • 1,144 views
Published

 

Published in Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,144
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
13
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. X-PRIME Groupe / La matinale
    Le web mobile
  • 2. X-PRIME Groupe
    Qui sommes nous ?
  • 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
  • 4. 4
    Structure du
    Groupe
  • 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
  • 7. 7
    Nos clients
    Ils nous font confiance
  • 8. Le web mobile
    Les spécificités
  • 9. 9
    Le web mobile
    Les spécificités
    De nombreux OS
  • 10. 10
    Le web mobile
    Les spécificités
    Une répartition géographique hétérogène
  • 11. 11
    Le web mobile
    Les spécificités
    Un marché fragmenté entre les constructeurs de mobile
  • 12. 12
    Le web mobile
    Les spécificités
    Un marché en pleine évolution
  • 13. 13
    Le web mobile
    Les spécificités
    De nombreux formats à prendre en compte
  • 14. Le web mobile
    Sites flexibles avec
    Media Queries
  • 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...)
  • 21. Le web mobile
    Sites dédiés avec
    jQuery Mobile
  • 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
  • 28. Le web mobile
    Trucs et astuces
  • 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 !
  • 39. 39