X-PRIME Groupe - la Matinale - le web mobile

www.xprimegroupe.com

X-PRIME Groupe / La matinale

Le web mobile

X-PRIME GroupeQui sommes nous ?

3

A propos deX-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

de plus de 60 personnesIntervenant sur le conseil, la création, la réalisation et la diffusion de dispositifs de communication sur les médias digitaux

Année de création2002

Un groupe interactifindépendant

4

Structure duGroupe

5

Blogoergosum,Notre expertise au profit des internautes

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.

www.BlogoErgoSum.com

3k 2000 TopBlog

visites par jour

articlesclassemen

tWikio

6

Brand contentDes émissions 100 % marketing digital

Depuis 2010

Emission hebdomadaire

L’essentiel de l’actualité web (marketing, design, technologique …) dans un format court, à emporter … et avec une bonne dose de fun !

Les 60 Secondes du Web

Diffusé sur

7

Nos clientsIls nous font confiance

Le web mobileLes spécificités

9


De nombreux OS

10


Une répartition géographique hétérogène

11


Un marché fragmenté entre les constructeurs de mobile

12


Un marché en pleine évolution

13


De nombreux formats à prendre en compte

Le web mobileSites flexibles avec Media Queries

15


Le Responsive Design

De nombreux exemples ici : www.mediaqueri.es

http://www.mediaqueri.es/

16


Détection CSS 3 :Orientation (portrait, paysage)Dimensions (hauteur, largeur)Résolution (dpi)

Exemple : paysage

17


Exemple: portrait

18


Les dimensions fluides

http://www.stpaulsschool.org.uk/

19


Les dimensions fixes

http://naomiatkinson.com/

20

Le web mobileLes 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...)

Le web mobileSites dédiés avecjQuery Mobile

22

Le web mobileSites dédiés avec jQuery Mobile

Exemples :

http://m.goba.mobi/

http://m.youchicago.org/

23


Page type :

24


Liste de liens :

25


Formulaire basique :

26


Niveau de support de jQuery Mobile par navigateur:

27


Les avantages : Bon support des navigateursBonne documentationMoins de 20ko

Attention : Encore en version Alpha (version finale prévue pour cet été)Site mobile dédié = 2 versions du site

Le web mobileTrucs et astuces


Eviter le « pinch to zoom »

30


Exemple : Version desktop Version mobile

31


Prévoir un thème switcher pour basculer de la version desktop à la version mobile

32


Les images doivent occuper 100% de la largeur disponible

Exemple

http://staffanstorp.se/

33


Masquer des éléments secondaires ou choisisExemple

Pas de Flash l’iPhone ne le lit pas !

Intégrer le clic to call

http://sweethatclub.org/

34


Intégrer des champs de formulaires HTML

Pour du texte : Pour un adresse mail : Pour une URL :

35


Intégrer la géolocalisation

36


Possibilité d’utiliser les Touch gestures (swipe, pinch, long tap…)Intégrer un mode hors ligne : les contenus de bases sont téléchargés et accessibles à tout moment

37


Intégrer des QR codes

38


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

[email protected]

Follow us - @xprimeJoin us on Facebook - www.facebook.com/xprimegroupe

Business

X-PRIME Groupe - la Matinale - le web mobile