X-PRIME Groupe - la Matinale - le web mobile
-
Upload
x-prime-groupe -
Category
Business
-
view
1.200 -
download
0
Transcript of X-PRIME Groupe - la Matinale - le web mobile
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
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
15
Le web mobileSites flexibles avec Media Queries
Le Responsive Design
De nombreux exemples ici : www.mediaqueri.es
16
Le web mobileSites flexibles avec Media Queries
Détection CSS 3 :Orientation (portrait, paysage)Dimensions (hauteur, largeur)Résolution (dpi)
Exemple : paysage
18
Le web mobileSites flexibles avec Media Queries
Les dimensions fluides
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...)
22
Le web mobileSites dédiés avec jQuery Mobile
Exemples :
27
Le web mobileSites dédiés avec jQuery Mobile
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
31
Le web mobileTrucs et astuces
Prévoir un thème switcher pour basculer de la version desktop à la version mobile
32
Le web mobileTrucs et astuces
Les images doivent occuper 100% de la largeur disponible
Exemple
33
Le web mobileTrucs et astuces
Masquer des éléments secondaires ou choisisExemple
Pas de Flash l’iPhone ne le lit pas !
Intégrer le clic to call
34
Le web mobileTrucs et astuces
Intégrer des champs de formulaires HTML
Pour du texte : Pour un adresse mail : Pour une URL :
36
Le web mobileTrucs et astuces
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
38
Le web mobileTrucs 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 !