SlideShare une entreprise Scribd logo
1  sur  39
X-PRIME Groupe / La matinale Le web mobile
X-PRIME Groupe Qui sommes nous ?
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 Structure du Groupe
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 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 Nos clients Ils nous font confiance
Le web mobile Les spécificités
9 Le web mobile	 Les spécificités De nombreux OS
10 Le web mobile Les spécificités Une répartition géographique hétérogène
11 Le web mobile Les spécificités Un marché fragmenté entre les constructeurs de mobile
12 Le web mobile Les spécificités Un marché en pleine évolution
13 Le web mobile Les spécificités De nombreux formats à prendre en compte
Le web mobile Sites flexibles avec  Media Queries
15 Le web mobile Sites flexibles avec Media Queries Le Responsive Design De nombreux exemples ici : www.mediaqueri.es
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 Le web mobile Sites flexibles avec Media Queries Exemple: portrait
18 Le web mobile Sites flexibles avec Media Queries  Les dimensions fluides
19 Le web mobile Sites flexibles avec Media Queries Les dimensions fixes
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...)
Le web mobile Sites dédiés avec jQuery Mobile
22 Le web mobile Sites dédiés avec jQuery Mobile Exemples :
23 Le web mobile Sites dédiés avec jQuery Mobile Page type :
24 Le web mobile Sites dédiés avec jQuery Mobile Liste de liens :
25 Le web mobile Sites dédiés avec jQuery Mobile Formulaire basique :
26 Le web mobile Sites dédiés avec jQuery Mobile Niveau de support de jQuery Mobile par navigateur:
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
Le web mobile Trucs et astuces
Le web mobile Trucs et astuces Eviter le « pinch to zoom »
30 Le web mobile Trucs et astuces Exemple :  	Version desktopVersion mobile
31 Le web mobile Trucs et astuces Prévoir un thème switcher pour basculer de la version desktop à la version mobile
32 Le web mobile Trucs et astuces Les images doivent occuper 100% de la largeur disponible  Exemple
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 Le web mobile Trucs et astuces Intégrer des champs de formulaires HTML Pour du texte :		Pour un adresse mail : 	    Pour une URL :
35 Le web mobile Trucs et astuces Intégrer la géolocalisation
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 Le web mobile Trucs et astuces Intégrer des QR codes
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

Contenu connexe

En vedette

EvaluacióN PRIMERAS 4 PRÁCTICAS
EvaluacióN PRIMERAS 4 PRÁCTICASEvaluacióN PRIMERAS 4 PRÁCTICAS
EvaluacióN PRIMERAS 4 PRÁCTICASirenecuevasjimenez
 
Para Que Apresies Lo Que Tienes
Para Que Apresies Lo Que TienesPara Que Apresies Lo Que Tienes
Para Que Apresies Lo Que Tienesyashira
 
Crucero Brisas Del Mediterraneo
Crucero Brisas Del MediterraneoCrucero Brisas Del Mediterraneo
Crucero Brisas Del Mediterraneoguest62ca15b
 
Estadística
EstadísticaEstadística
Estadísticanorbea04
 
Nuevos Marcos Conceptuales
Nuevos Marcos ConceptualesNuevos Marcos Conceptuales
Nuevos Marcos ConceptualesOladys Corcega
 
Objectif 6200
Objectif 6200Objectif 6200
Objectif 6200loikiloik
 
Was ist ein guter Link - Hitmeister eCommerce Day 2013
Was ist ein guter Link - Hitmeister eCommerce Day 2013Was ist ein guter Link - Hitmeister eCommerce Day 2013
Was ist ein guter Link - Hitmeister eCommerce Day 2013Michael Fritz
 
Pampel & Bertelmann: Von Subskription zu Open Access
Pampel & Bertelmann: Von Subskription zu Open AccessPampel & Bertelmann: Von Subskription zu Open Access
Pampel & Bertelmann: Von Subskription zu Open AccessHeinz Pampel
 
Strommarktdesign der Zukunft. Die Topologie der aktuellen Debatten (so neutra...
Strommarktdesign der Zukunft. Die Topologie der aktuellen Debatten (so neutra...Strommarktdesign der Zukunft. Die Topologie der aktuellen Debatten (so neutra...
Strommarktdesign der Zukunft. Die Topologie der aktuellen Debatten (so neutra...Oeko-Institut
 
TXIM: Comment utiliser AuthorRank et Auhorship ?
TXIM: Comment utiliser AuthorRank et Auhorship ?TXIM: Comment utiliser AuthorRank et Auhorship ?
TXIM: Comment utiliser AuthorRank et Auhorship ?X-PRIME GROUPE
 
EMPRENDEDOR POR JOSE DE JESUS OLVERA
EMPRENDEDOR POR JOSE DE JESUS OLVERAEMPRENDEDOR POR JOSE DE JESUS OLVERA
EMPRENDEDOR POR JOSE DE JESUS OLVERAJOSE DE JESUS OLVERA
 

En vedette (20)

Solucionario 3ra Y 4ta Practica Calificada
Solucionario 3ra Y 4ta Practica CalificadaSolucionario 3ra Y 4ta Practica Calificada
Solucionario 3ra Y 4ta Practica Calificada
 
EvaluacióN PRIMERAS 4 PRÁCTICAS
EvaluacióN PRIMERAS 4 PRÁCTICASEvaluacióN PRIMERAS 4 PRÁCTICAS
EvaluacióN PRIMERAS 4 PRÁCTICAS
 
Para Que Apresies Lo Que Tienes
Para Que Apresies Lo Que TienesPara Que Apresies Lo Que Tienes
Para Que Apresies Lo Que Tienes
 
Usabilidad Web
Usabilidad WebUsabilidad Web
Usabilidad Web
 
Presentacion Web 2.0
Presentacion Web 2.0Presentacion Web 2.0
Presentacion Web 2.0
 
Crucero Brisas Del Mediterraneo
Crucero Brisas Del MediterraneoCrucero Brisas Del Mediterraneo
Crucero Brisas Del Mediterraneo
 
Estadística
EstadísticaEstadística
Estadística
 
Multimedia
MultimediaMultimedia
Multimedia
 
Cap 8 Ensayo.
Cap 8 Ensayo.Cap 8 Ensayo.
Cap 8 Ensayo.
 
Nuevos Marcos Conceptuales
Nuevos Marcos ConceptualesNuevos Marcos Conceptuales
Nuevos Marcos Conceptuales
 
Objectif 6200
Objectif 6200Objectif 6200
Objectif 6200
 
Modulo 1
Modulo 1Modulo 1
Modulo 1
 
Was ist ein guter Link - Hitmeister eCommerce Day 2013
Was ist ein guter Link - Hitmeister eCommerce Day 2013Was ist ein guter Link - Hitmeister eCommerce Day 2013
Was ist ein guter Link - Hitmeister eCommerce Day 2013
 
TXIM: ThingLink
TXIM: ThingLinkTXIM: ThingLink
TXIM: ThingLink
 
CRM 2.0: Alles Social oder was?
CRM 2.0: Alles Social oder was?CRM 2.0: Alles Social oder was?
CRM 2.0: Alles Social oder was?
 
Pampel & Bertelmann: Von Subskription zu Open Access
Pampel & Bertelmann: Von Subskription zu Open AccessPampel & Bertelmann: Von Subskription zu Open Access
Pampel & Bertelmann: Von Subskription zu Open Access
 
Strommarktdesign der Zukunft. Die Topologie der aktuellen Debatten (so neutra...
Strommarktdesign der Zukunft. Die Topologie der aktuellen Debatten (so neutra...Strommarktdesign der Zukunft. Die Topologie der aktuellen Debatten (so neutra...
Strommarktdesign der Zukunft. Die Topologie der aktuellen Debatten (so neutra...
 
Wikinomics08
Wikinomics08Wikinomics08
Wikinomics08
 
TXIM: Comment utiliser AuthorRank et Auhorship ?
TXIM: Comment utiliser AuthorRank et Auhorship ?TXIM: Comment utiliser AuthorRank et Auhorship ?
TXIM: Comment utiliser AuthorRank et Auhorship ?
 
EMPRENDEDOR POR JOSE DE JESUS OLVERA
EMPRENDEDOR POR JOSE DE JESUS OLVERAEMPRENDEDOR POR JOSE DE JESUS OLVERA
EMPRENDEDOR POR JOSE DE JESUS OLVERA
 

Similaire à X-PRIME Groupe - la Matinale - le web mobile

Les tendances des site web en 2015
Les tendances des site web en 2015Les tendances des site web en 2015
Les tendances des site web en 2015Vincent Pereira
 
Sites internet et reseaux sociaux quelles tendances 2015 - cci bordeaux - ina...
Sites internet et reseaux sociaux quelles tendances 2015 - cci bordeaux - ina...Sites internet et reseaux sociaux quelles tendances 2015 - cci bordeaux - ina...
Sites internet et reseaux sociaux quelles tendances 2015 - cci bordeaux - ina...polenumerique33
 
Responsive Web design - defimedia
Responsive Web design - defimediaResponsive Web design - defimedia
Responsive Web design - defimediadefimedia
 
Communication digitale
Communication digitaleCommunication digitale
Communication digitaleChris Gaillard
 
Formation : "Concevoir et promouvoir son site Internet"
Formation : "Concevoir et promouvoir son site Internet"Formation : "Concevoir et promouvoir son site Internet"
Formation : "Concevoir et promouvoir son site Internet"Synerg'hetic
 
Les applications de News d’aujourd’hui et de demain - Meetup
Les applications de News d’aujourd’hui et de demain - MeetupLes applications de News d’aujourd’hui et de demain - Meetup
Les applications de News d’aujourd’hui et de demain - MeetupThiga
 
03 By Agency Interactive
03 By Agency Interactive03 By Agency Interactive
03 By Agency InteractiveBy Agency Group
 
HTML5mtl - 2012-02-22 - Responsive Web Design
HTML5mtl - 2012-02-22 - Responsive Web DesignHTML5mtl - 2012-02-22 - Responsive Web Design
HTML5mtl - 2012-02-22 - Responsive Web DesignFrédéric Harper
 
Réunion Club CML : Mobilité et Responsive design; définitions et enjeux
Réunion Club CML : Mobilité et Responsive design; définitions et enjeuxRéunion Club CML : Mobilité et Responsive design; définitions et enjeux
Réunion Club CML : Mobilité et Responsive design; définitions et enjeuxClub des Community Managers de Lyon
 
Strat mobiweb 2012
Strat mobiweb 2012Strat mobiweb 2012
Strat mobiweb 2012LACT
 
33 éditeurs de logiciel avec solutions marketing
33 éditeurs de logiciel avec solutions marketing33 éditeurs de logiciel avec solutions marketing
33 éditeurs de logiciel avec solutions marketingMicrosoft Ideas
 
Formats publicitaires sur mobile
Formats publicitaires sur mobileFormats publicitaires sur mobile
Formats publicitaires sur mobileNicolas Bermond
 
Viniacom - Les bonnes raisons de passer au mobile.
Viniacom - Les bonnes raisons de passer au mobile.Viniacom - Les bonnes raisons de passer au mobile.
Viniacom - Les bonnes raisons de passer au mobile.Viniacom
 
AtelierLCDW - Monétiser son site internet
AtelierLCDW - Monétiser son site internetAtelierLCDW - Monétiser son site internet
AtelierLCDW - Monétiser son site internetLa Cuisine du Web
 

Similaire à X-PRIME Groupe - la Matinale - le web mobile (20)

Les tendances des site web en 2015
Les tendances des site web en 2015Les tendances des site web en 2015
Les tendances des site web en 2015
 
Salon Use IT Lyon
Salon Use IT LyonSalon Use IT Lyon
Salon Use IT Lyon
 
Sites internet et reseaux sociaux quelles tendances 2015 - cci bordeaux - ina...
Sites internet et reseaux sociaux quelles tendances 2015 - cci bordeaux - ina...Sites internet et reseaux sociaux quelles tendances 2015 - cci bordeaux - ina...
Sites internet et reseaux sociaux quelles tendances 2015 - cci bordeaux - ina...
 
Responsive Web design - defimedia
Responsive Web design - defimediaResponsive Web design - defimedia
Responsive Web design - defimedia
 
Communication digitale
Communication digitaleCommunication digitale
Communication digitale
 
Formation : "Concevoir et promouvoir son site Internet"
Formation : "Concevoir et promouvoir son site Internet"Formation : "Concevoir et promouvoir son site Internet"
Formation : "Concevoir et promouvoir son site Internet"
 
Les applications de News d’aujourd’hui et de demain - Meetup
Les applications de News d’aujourd’hui et de demain - MeetupLes applications de News d’aujourd’hui et de demain - Meetup
Les applications de News d’aujourd’hui et de demain - Meetup
 
Les métiers du web
Les métiers du web Les métiers du web
Les métiers du web
 
Empowerment numérique
Empowerment numériqueEmpowerment numérique
Empowerment numérique
 
Webinar Eenox Compario 17 avril 2013
Webinar Eenox Compario 17 avril 2013Webinar Eenox Compario 17 avril 2013
Webinar Eenox Compario 17 avril 2013
 
03 By Agency Interactive
03 By Agency Interactive03 By Agency Interactive
03 By Agency Interactive
 
HTML5mtl - 2012-02-22 - Responsive Web Design
HTML5mtl - 2012-02-22 - Responsive Web DesignHTML5mtl - 2012-02-22 - Responsive Web Design
HTML5mtl - 2012-02-22 - Responsive Web Design
 
Veille digitale
Veille digitaleVeille digitale
Veille digitale
 
Réunion Club CML : Mobilité et Responsive design; définitions et enjeux
Réunion Club CML : Mobilité et Responsive design; définitions et enjeuxRéunion Club CML : Mobilité et Responsive design; définitions et enjeux
Réunion Club CML : Mobilité et Responsive design; définitions et enjeux
 
Strat mobiweb 2012
Strat mobiweb 2012Strat mobiweb 2012
Strat mobiweb 2012
 
33 éditeurs de logiciel avec solutions marketing
33 éditeurs de logiciel avec solutions marketing33 éditeurs de logiciel avec solutions marketing
33 éditeurs de logiciel avec solutions marketing
 
Votre commerce sur le Web
Votre commerce sur le WebVotre commerce sur le Web
Votre commerce sur le Web
 
Formats publicitaires sur mobile
Formats publicitaires sur mobileFormats publicitaires sur mobile
Formats publicitaires sur mobile
 
Viniacom - Les bonnes raisons de passer au mobile.
Viniacom - Les bonnes raisons de passer au mobile.Viniacom - Les bonnes raisons de passer au mobile.
Viniacom - Les bonnes raisons de passer au mobile.
 
AtelierLCDW - Monétiser son site internet
AtelierLCDW - Monétiser son site internetAtelierLCDW - Monétiser son site internet
AtelierLCDW - Monétiser son site internet
 

Plus de X-PRIME GROUPE

Smart breakfast - Digital As A Service
Smart breakfast - Digital As A ServiceSmart breakfast - Digital As A Service
Smart breakfast - Digital As A ServiceX-PRIME GROUPE
 
Smart Breakfast X-PRIME
Smart Breakfast X-PRIMESmart Breakfast X-PRIME
Smart Breakfast X-PRIMEX-PRIME GROUPE
 
Social Media Guideline - A propos de Wikipédia
Social Media Guideline - A propos de WikipédiaSocial Media Guideline - A propos de Wikipédia
Social Media Guideline - A propos de WikipédiaX-PRIME GROUPE
 
Social Media Guideline - A propos de YouTube
Social Media Guideline - A propos de YouTubeSocial Media Guideline - A propos de YouTube
Social Media Guideline - A propos de YouTubeX-PRIME GROUPE
 
Social media Guideline - A propos de #Instagram
Social media Guideline - A propos de #InstagramSocial media Guideline - A propos de #Instagram
Social media Guideline - A propos de #InstagramX-PRIME GROUPE
 
Social Media Guideline - A propos de #Twitter
Social Media Guideline - A propos de #TwitterSocial Media Guideline - A propos de #Twitter
Social Media Guideline - A propos de #TwitterX-PRIME GROUPE
 
Social Media Guideline - A propos de Facebook
Social Media Guideline - A propos de FacebookSocial Media Guideline - A propos de Facebook
Social Media Guideline - A propos de FacebookX-PRIME GROUPE
 
Smart Breakfast - Comprendre bitcoin by La maison du bitcoin
Smart Breakfast - Comprendre bitcoin by La maison du bitcoinSmart Breakfast - Comprendre bitcoin by La maison du bitcoin
Smart Breakfast - Comprendre bitcoin by La maison du bitcoinX-PRIME GROUPE
 
A picture is not only a picture !
A picture is not only a picture ! A picture is not only a picture !
A picture is not only a picture ! X-PRIME GROUPE
 
TXIM: Optimisation des formats ads Facebook
TXIM: Optimisation des formats ads Facebook TXIM: Optimisation des formats ads Facebook
TXIM: Optimisation des formats ads Facebook X-PRIME GROUPE
 
Smart Breakfast: Cedric Giorgi pour Cookening
Smart Breakfast: Cedric Giorgi pour CookeningSmart Breakfast: Cedric Giorgi pour Cookening
Smart Breakfast: Cedric Giorgi pour CookeningX-PRIME GROUPE
 
Smart Breakfast: Maxime Garrigues présente Evernote
Smart Breakfast: Maxime Garrigues présente EvernoteSmart Breakfast: Maxime Garrigues présente Evernote
Smart Breakfast: Maxime Garrigues présente EvernoteX-PRIME GROUPE
 
Smart Breakfast: Laure wagner pour Blablacar
Smart Breakfast: Laure wagner pour BlablacarSmart Breakfast: Laure wagner pour Blablacar
Smart Breakfast: Laure wagner pour BlablacarX-PRIME GROUPE
 
TXIM: l'utilisation de jeux concours sur Facebook sans application !
TXIM: l'utilisation de jeux concours sur Facebook sans application ! TXIM: l'utilisation de jeux concours sur Facebook sans application !
TXIM: l'utilisation de jeux concours sur Facebook sans application ! X-PRIME GROUPE
 
Les améliorations des insights facebook
Les améliorations des insights facebookLes améliorations des insights facebook
Les améliorations des insights facebookX-PRIME GROUPE
 
TXIM: rationalisation des Facebook ads
TXIM: rationalisation des Facebook adsTXIM: rationalisation des Facebook ads
TXIM: rationalisation des Facebook adsX-PRIME GROUPE
 
TXIM: Twitter lead generation card !
TXIM: Twitter lead generation card !TXIM: Twitter lead generation card !
TXIM: Twitter lead generation card !X-PRIME GROUPE
 
TXIM: Mobile et campagne universelle sur Google adwords
TXIM: Mobile et campagne universelle sur Google adwordsTXIM: Mobile et campagne universelle sur Google adwords
TXIM: Mobile et campagne universelle sur Google adwordsX-PRIME GROUPE
 
TXIM: Overview des Facebook ads
TXIM: Overview des Facebook ads TXIM: Overview des Facebook ads
TXIM: Overview des Facebook ads X-PRIME GROUPE
 

Plus de X-PRIME GROUPE (20)

Smart breakfast - Digital As A Service
Smart breakfast - Digital As A ServiceSmart breakfast - Digital As A Service
Smart breakfast - Digital As A Service
 
Smart Breakfast X-PRIME
Smart Breakfast X-PRIMESmart Breakfast X-PRIME
Smart Breakfast X-PRIME
 
Smartbreakfast XPRIME
Smartbreakfast XPRIMESmartbreakfast XPRIME
Smartbreakfast XPRIME
 
Social Media Guideline - A propos de Wikipédia
Social Media Guideline - A propos de WikipédiaSocial Media Guideline - A propos de Wikipédia
Social Media Guideline - A propos de Wikipédia
 
Social Media Guideline - A propos de YouTube
Social Media Guideline - A propos de YouTubeSocial Media Guideline - A propos de YouTube
Social Media Guideline - A propos de YouTube
 
Social media Guideline - A propos de #Instagram
Social media Guideline - A propos de #InstagramSocial media Guideline - A propos de #Instagram
Social media Guideline - A propos de #Instagram
 
Social Media Guideline - A propos de #Twitter
Social Media Guideline - A propos de #TwitterSocial Media Guideline - A propos de #Twitter
Social Media Guideline - A propos de #Twitter
 
Social Media Guideline - A propos de Facebook
Social Media Guideline - A propos de FacebookSocial Media Guideline - A propos de Facebook
Social Media Guideline - A propos de Facebook
 
Smart Breakfast - Comprendre bitcoin by La maison du bitcoin
Smart Breakfast - Comprendre bitcoin by La maison du bitcoinSmart Breakfast - Comprendre bitcoin by La maison du bitcoin
Smart Breakfast - Comprendre bitcoin by La maison du bitcoin
 
A picture is not only a picture !
A picture is not only a picture ! A picture is not only a picture !
A picture is not only a picture !
 
TXIM: Optimisation des formats ads Facebook
TXIM: Optimisation des formats ads Facebook TXIM: Optimisation des formats ads Facebook
TXIM: Optimisation des formats ads Facebook
 
Smart Breakfast: Cedric Giorgi pour Cookening
Smart Breakfast: Cedric Giorgi pour CookeningSmart Breakfast: Cedric Giorgi pour Cookening
Smart Breakfast: Cedric Giorgi pour Cookening
 
Smart Breakfast: Maxime Garrigues présente Evernote
Smart Breakfast: Maxime Garrigues présente EvernoteSmart Breakfast: Maxime Garrigues présente Evernote
Smart Breakfast: Maxime Garrigues présente Evernote
 
Smart Breakfast: Laure wagner pour Blablacar
Smart Breakfast: Laure wagner pour BlablacarSmart Breakfast: Laure wagner pour Blablacar
Smart Breakfast: Laure wagner pour Blablacar
 
TXIM: l'utilisation de jeux concours sur Facebook sans application !
TXIM: l'utilisation de jeux concours sur Facebook sans application ! TXIM: l'utilisation de jeux concours sur Facebook sans application !
TXIM: l'utilisation de jeux concours sur Facebook sans application !
 
Les améliorations des insights facebook
Les améliorations des insights facebookLes améliorations des insights facebook
Les améliorations des insights facebook
 
TXIM: rationalisation des Facebook ads
TXIM: rationalisation des Facebook adsTXIM: rationalisation des Facebook ads
TXIM: rationalisation des Facebook ads
 
TXIM: Twitter lead generation card !
TXIM: Twitter lead generation card !TXIM: Twitter lead generation card !
TXIM: Twitter lead generation card !
 
TXIM: Mobile et campagne universelle sur Google adwords
TXIM: Mobile et campagne universelle sur Google adwordsTXIM: Mobile et campagne universelle sur Google adwords
TXIM: Mobile et campagne universelle sur Google adwords
 
TXIM: Overview des Facebook ads
TXIM: Overview des Facebook ads TXIM: Overview des Facebook ads
TXIM: Overview des Facebook ads
 

X-PRIME Groupe - la Matinale - le web mobile

  • 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