SlideShare ist ein Scribd-Unternehmen logo
1 von 29
Le responsive design
22 avril 2013
Focus sur les éléments techniques et sur l’e-mailing web responsive
2
Le responsive design
Le responsive web design englobe les
techniques de conception qui permettent de
proposer des contenus auto-adaptables en
fonction des interfaces de consultation utilisées
par le visiteur.
Le responsive design permet de s’adapter à
l’environnement technique de consultation sans
pour autant multiplier les versions d’un même
contenu.
Le responsive design
3
Les largeurs fixes deviennent variables
Grilles fluides
1
Le responsive design
4
Les largeurs fixes deviennent variables
Grilles fluides
1
La taille des images s’adapte à
chaque écran
Images flexibles
2
Le responsive design
5
Les largeurs fixes deviennent variables
Grilles fluides
1
La taille des images s’adapte à
chaque écran
Images flexibles
Interrogation des devices pour
déterminer lequel est utilisé et sa résolution
3
Media Queries
2
Le responsive design
6
Sur les devices mobiles, les zones froides et les zones chaudes ne sont pas les même
que sur desktop. Sur mobile, la lecture est rapide et incomplète. Le message doit
donc être repensé et adapté à ce terminal.
Zones chaudes
Zones tempérées
Zones froides
Le responsive design
7
Sur les devices mobiles, les zones froides et les zones chaudes ne sont pas les même
que sur desktop. Sur mobile, la lecture est rapide et incomplète. Le message doit
donc être repensé et adapté à ce terminal.
Zones chaudes
Zones tempérées
Zones froides
Exemple
8
Exemple
9
Exemple
10
L’approche idéale
Mobile first
11
Intégrer en premier les contraintes
techniques de l’environnement mobile …
…puis se concentrer sur les besoins
mobiles de l’utilisateur et le contenu
avant le design d’interface.
FOCUS
ELEMENTS TECHNIQUES DU WEB RESPONSIVE
BIG5MEDIA, 3 Impasse du Bel Air, 94110 ARCUEIL | +33 1 47 40 32 10
12
Le responsive design
13
Le device
La technologie reconnaît…
L’OS du device
Le type de messagerie
électronique
Les dimensions de l’écran
La résolution de l’écran L’orientation de l’écran
Le responsive design
HTML5
structure
14
Et repose sur…
Le responsive design
HTML5
structure
15
Et repose sur…
CSS3
Feuilles de style
Dans le code, le web responsive suppose d’appliquer des règles spécifiques suivant le support
de lecture….
16
Le responsive design
17
Le responsive design
Dans le code, le web responsive suppose d’appliquer des règles spécifiques suivant le support
de lecture….On précise la résolution de l’écran (ici 320 px à 490 px) et on adapte la taille du
contenu.
Le responsive design
18
• HTML5 est un standard ouvert et gratuit : le code est accessible
Vous ne prenez en charge que la partie créative de votre projet
mobile !
Le responsive design
19
• HTML5 est un standard ouvert et gratuit : le code est accessible
Vous ne prenez en charge que la partie créative de votre projet
mobile !
• Le R.O.I est optimisé
FOCUS
L’EMAILING WEB RESPONSIVE
20
L’e-mailing web responsive
Par le biais d’un seul envoi, l’e-mailing web responsive adapte le contenu et l’ergonomie en fonction
des différents écrans sur lequel il est consulté.
21
• Adapter vos messages en fonction de l’appareil sur lequel il est
lu pour optimiser vos campagnes.
• Proposer des contenus adaptés aux utilisateurs en situation de
mobilité pour améliorer le taux de transformation des
campagnes.
• Adapter la forme de vos messages, et donc apporter un confort
de lecture à votre cible.
C’est une nette amélioration de l’expérience client !
L’e-mailing web responsive
22
55 millions de français possèdent un mobile dont
26 millions possède un Smartphone *
*ARCEP, (avril 2012)
L’e-mailing web responsive
23
* Ipsos profiling (Sept 2010), **ReturnPath (2012).
Des mobinautes français consultent
leur e-mails sur mobile et y
consacrent plus d’1h30 par semaine*
48 %
41 %
Des Européens ont tendance à refermer
voir effacer un email non optimisé pour
leur interface mobile*
300 %
progression des
ouvertures sur
mobile**
24
Vos campagnes email marketing
sont-elles optimisées en priorité
pour cet environnement ?
25
Le responsive design
1,7 %*
* Fevad
Smartphones
26
Le responsive design
1,9 %*
Ordinateur
* Fevad
1,7 %*
Smartphones
27
Le responsive design
Tablette
* Fevad
3,9 %*
Tablette
Le taux de transformation est plus important sur tablette
1,9 %*
Ordinateur
1,7 %*
Smartphones
L’e-mailing web responsive
28
Masquer les éléments inutiles en mobilité
(partage de réseaux sociaux, page miroir...)
Ré-agencer les blocs de contenu au
format vertical : Prévoir un email sur une
colonne de large (400 - 500 pixels)
Densifier le haut du message pour permettre un
appel au clic rapide, une compréhension de
l'offre dans les 200/300 premiers pixels
La taille du doigt étant de 0,8 cm² au minimum,
il faut prévoir des appels au clic en adéquation
avec cette dimension
29
www.big5media.com
Contact :
contact@big5media.com
BIG5MEDIA, 3 Impasse du Bel Air,
94110 ARCUEIL | +33 1 47 40 32 10
Pour recevoir cette présentation, cliquez ici

Más contenido relacionado

Was ist angesagt?

Responsive Web Design : best practices et retour d'expérience de Backelite et...
Responsive Web Design : best practices et retour d'expérience de Backelite et...Responsive Web Design : best practices et retour d'expérience de Backelite et...
Responsive Web Design : best practices et retour d'expérience de Backelite et...Idean France
 
MobiliteaTime #5 : Responsive & Adaptive Design
MobiliteaTime #5 : Responsive & Adaptive Design MobiliteaTime #5 : Responsive & Adaptive Design
MobiliteaTime #5 : Responsive & Adaptive Design USERADGENTS
 
Webdesign sites web et mobiles-strategies et enjeux-ergonomie
Webdesign sites web et mobiles-strategies et enjeux-ergonomieWebdesign sites web et mobiles-strategies et enjeux-ergonomie
Webdesign sites web et mobiles-strategies et enjeux-ergonomieOlivier Dommange
 
telmedia* : tendances digitales 2014, l'engagement émotionnel
telmedia* : tendances digitales 2014, l'engagement émotionneltelmedia* : tendances digitales 2014, l'engagement émotionnel
telmedia* : tendances digitales 2014, l'engagement émotionneltelmedia
 
Mobile et Flashcode : Effet de mode ou moyens stratégiques ? | acti
Mobile et Flashcode : Effet de mode ou moyens stratégiques ? | actiMobile et Flashcode : Effet de mode ou moyens stratégiques ? | acti
Mobile et Flashcode : Effet de mode ou moyens stratégiques ? | actiacti
 
Les 10 Tendances Webdesign de 2014 by Vanksen
Les 10 Tendances Webdesign de 2014 by VanksenLes 10 Tendances Webdesign de 2014 by Vanksen
Les 10 Tendances Webdesign de 2014 by VanksenVanksen
 
Responsive web design new14
Responsive web design new14Responsive web design new14
Responsive web design new14FullSIX Group
 
Webdesign sites web et mobiles-tendances 2015
Webdesign sites web et mobiles-tendances 2015Webdesign sites web et mobiles-tendances 2015
Webdesign sites web et mobiles-tendances 2015Olivier Dommange
 
Le référencement naturel en 2018
Le référencement naturel en 2018Le référencement naturel en 2018
Le référencement naturel en 2018Concept Image
 
L'évolution du web-design
L'évolution du web-designL'évolution du web-design
L'évolution du web-designOlivier Soros
 
Audit formulaire
Audit formulaireAudit formulaire
Audit formulaireUX_Claurent
 
MobiliTeaTime #13 : Accelerated Mobile Pages
MobiliTeaTime #13 : Accelerated Mobile PagesMobiliTeaTime #13 : Accelerated Mobile Pages
MobiliTeaTime #13 : Accelerated Mobile PagesUSERADGENTS
 
Mobile & Responsive Design: Rendez votre marque mobile
Mobile & Responsive Design: Rendez votre marque mobileMobile & Responsive Design: Rendez votre marque mobile
Mobile & Responsive Design: Rendez votre marque mobileWSI France
 
Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8
Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8
Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8Vincent Vandevelde
 
Les étapes de création d'un site web
Les étapes de création d'un site webLes étapes de création d'un site web
Les étapes de création d'un site webChris Gaillard
 
Analyse comparateur assurance
Analyse comparateur assuranceAnalyse comparateur assurance
Analyse comparateur assuranceUX_Claurent
 

Was ist angesagt? (20)

Responsive Web Design : best practices et retour d'expérience de Backelite et...
Responsive Web Design : best practices et retour d'expérience de Backelite et...Responsive Web Design : best practices et retour d'expérience de Backelite et...
Responsive Web Design : best practices et retour d'expérience de Backelite et...
 
MobiliteaTime #5 : Responsive & Adaptive Design
MobiliteaTime #5 : Responsive & Adaptive Design MobiliteaTime #5 : Responsive & Adaptive Design
MobiliteaTime #5 : Responsive & Adaptive Design
 
Webdesign sites web et mobiles-strategies et enjeux-ergonomie
Webdesign sites web et mobiles-strategies et enjeux-ergonomieWebdesign sites web et mobiles-strategies et enjeux-ergonomie
Webdesign sites web et mobiles-strategies et enjeux-ergonomie
 
telmedia* : tendances digitales 2014, l'engagement émotionnel
telmedia* : tendances digitales 2014, l'engagement émotionneltelmedia* : tendances digitales 2014, l'engagement émotionnel
telmedia* : tendances digitales 2014, l'engagement émotionnel
 
Mobile et Flashcode : Effet de mode ou moyens stratégiques ? | acti
Mobile et Flashcode : Effet de mode ou moyens stratégiques ? | actiMobile et Flashcode : Effet de mode ou moyens stratégiques ? | acti
Mobile et Flashcode : Effet de mode ou moyens stratégiques ? | acti
 
Les 10 Tendances Webdesign de 2014 by Vanksen
Les 10 Tendances Webdesign de 2014 by VanksenLes 10 Tendances Webdesign de 2014 by Vanksen
Les 10 Tendances Webdesign de 2014 by Vanksen
 
Responsive web design new14
Responsive web design new14Responsive web design new14
Responsive web design new14
 
molka foods
molka foodsmolka foods
molka foods
 
Webdesign sites web et mobiles-tendances 2015
Webdesign sites web et mobiles-tendances 2015Webdesign sites web et mobiles-tendances 2015
Webdesign sites web et mobiles-tendances 2015
 
Le référencement naturel en 2018
Le référencement naturel en 2018Le référencement naturel en 2018
Le référencement naturel en 2018
 
Histoire du webdesign
Histoire du webdesignHistoire du webdesign
Histoire du webdesign
 
L'évolution du web-design
L'évolution du web-designL'évolution du web-design
L'évolution du web-design
 
Atelier 5 - Que l'esprit de la bidouille soit avec vous - ET8
Atelier 5 - Que l'esprit de la bidouille soit avec vous - ET8Atelier 5 - Que l'esprit de la bidouille soit avec vous - ET8
Atelier 5 - Que l'esprit de la bidouille soit avec vous - ET8
 
Audit formulaire
Audit formulaireAudit formulaire
Audit formulaire
 
MobiliTeaTime #13 : Accelerated Mobile Pages
MobiliTeaTime #13 : Accelerated Mobile PagesMobiliTeaTime #13 : Accelerated Mobile Pages
MobiliTeaTime #13 : Accelerated Mobile Pages
 
Design Trends
Design TrendsDesign Trends
Design Trends
 
Mobile & Responsive Design: Rendez votre marque mobile
Mobile & Responsive Design: Rendez votre marque mobileMobile & Responsive Design: Rendez votre marque mobile
Mobile & Responsive Design: Rendez votre marque mobile
 
Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8
Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8
Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8
 
Les étapes de création d'un site web
Les étapes de création d'un site webLes étapes de création d'un site web
Les étapes de création d'un site web
 
Analyse comparateur assurance
Analyse comparateur assuranceAnalyse comparateur assurance
Analyse comparateur assurance
 

Andere mochten auch

Geomail marketing Effidata
Geomail marketing EffidataGeomail marketing Effidata
Geomail marketing EffidataDavid Grunberger
 
World Mobile Congress 2013 : Les temps forts / Jour 3
World Mobile Congress 2013 : Les temps forts / Jour 3World Mobile Congress 2013 : Les temps forts / Jour 3
World Mobile Congress 2013 : Les temps forts / Jour 3Care
 
World Mobile Congress 2013 : Les temps forts / Jour 2
World Mobile Congress 2013 : Les temps forts / Jour 2World Mobile Congress 2013 : Les temps forts / Jour 2
World Mobile Congress 2013 : Les temps forts / Jour 2Care
 
Email mobile
Email mobileEmail mobile
Email mobileCEFAC
 
L'intégration d'e-mails responsive
L'intégration d'e-mails responsiveL'intégration d'e-mails responsive
L'intégration d'e-mails responsiveHTeuMeuLeu
 
Comment refondre un intranet de 10 000 pages
Comment refondre un intranet de 10 000 pagesComment refondre un intranet de 10 000 pages
Comment refondre un intranet de 10 000 pagessemrush_webinars
 
Comment coder un emailing responsive ?
Comment coder un emailing responsive ?Comment coder un emailing responsive ?
Comment coder un emailing responsive ?43 Degrés
 
Comment designer un emailing responsive ?
Comment designer un emailing responsive ?Comment designer un emailing responsive ?
Comment designer un emailing responsive ?43 Degrés
 
Social Loves Mobile
Social Loves MobileSocial Loves Mobile
Social Loves MobileNexize
 
Stratégie digitale, médias et réseaux sociaux
Stratégie digitale, médias et réseaux sociauxStratégie digitale, médias et réseaux sociaux
Stratégie digitale, médias et réseaux sociauxFred Colantonio
 
Les applications mobiles, sites mobiles et web apps
Les applications mobiles, sites mobiles et web appsLes applications mobiles, sites mobiles et web apps
Les applications mobiles, sites mobiles et web appsNeedeo
 
5 killer ways to open up your next presentation
5 killer ways to open up your next presentation5 killer ways to open up your next presentation
5 killer ways to open up your next presentationBig Fish Presentations
 
Les Réseaux Sociaux sur Mobile
Les Réseaux Sociaux sur MobileLes Réseaux Sociaux sur Mobile
Les Réseaux Sociaux sur Mobiledgerges
 
Médias sociaux & CoM mobile : Vidéos en ligne, Brand Content, Vidéo virale, Y...
Médias sociaux & CoM mobile : Vidéos en ligne, Brand Content, Vidéo virale, Y...Médias sociaux & CoM mobile : Vidéos en ligne, Brand Content, Vidéo virale, Y...
Médias sociaux & CoM mobile : Vidéos en ligne, Brand Content, Vidéo virale, Y...at Backbook
 
Médias sociaux & CoM mobile : Community Manager, Facbook, Twitter
Médias sociaux & CoM mobile : Community Manager, Facbook, Twitter Médias sociaux & CoM mobile : Community Manager, Facbook, Twitter
Médias sociaux & CoM mobile : Community Manager, Facbook, Twitter at Backbook
 
Email responsive : dopez vos performances emailing en adaptant vos campagnes ...
Email responsive : dopez vos performances emailing en adaptant vos campagnes ...Email responsive : dopez vos performances emailing en adaptant vos campagnes ...
Email responsive : dopez vos performances emailing en adaptant vos campagnes ...Sarbacane
 
Livre blanc Responsive Design en email marketing
Livre blanc Responsive Design en email marketing Livre blanc Responsive Design en email marketing
Livre blanc Responsive Design en email marketing NP6
 

Andere mochten auch (20)

Geomail marketing Effidata
Geomail marketing EffidataGeomail marketing Effidata
Geomail marketing Effidata
 
World Mobile Congress 2013 : Les temps forts / Jour 3
World Mobile Congress 2013 : Les temps forts / Jour 3World Mobile Congress 2013 : Les temps forts / Jour 3
World Mobile Congress 2013 : Les temps forts / Jour 3
 
World Mobile Congress 2013 : Les temps forts / Jour 2
World Mobile Congress 2013 : Les temps forts / Jour 2World Mobile Congress 2013 : Les temps forts / Jour 2
World Mobile Congress 2013 : Les temps forts / Jour 2
 
SoLoMo
SoLoMoSoLoMo
SoLoMo
 
Email mobile
Email mobileEmail mobile
Email mobile
 
L'intégration d'e-mails responsive
L'intégration d'e-mails responsiveL'intégration d'e-mails responsive
L'intégration d'e-mails responsive
 
Comment refondre un intranet de 10 000 pages
Comment refondre un intranet de 10 000 pagesComment refondre un intranet de 10 000 pages
Comment refondre un intranet de 10 000 pages
 
Comment coder un emailing responsive ?
Comment coder un emailing responsive ?Comment coder un emailing responsive ?
Comment coder un emailing responsive ?
 
Comment designer un emailing responsive ?
Comment designer un emailing responsive ?Comment designer un emailing responsive ?
Comment designer un emailing responsive ?
 
Marketing mobile acpm-2013
Marketing mobile acpm-2013Marketing mobile acpm-2013
Marketing mobile acpm-2013
 
Social Loves Mobile
Social Loves MobileSocial Loves Mobile
Social Loves Mobile
 
Du Web vers le mobile
Du Web vers le mobileDu Web vers le mobile
Du Web vers le mobile
 
Stratégie digitale, médias et réseaux sociaux
Stratégie digitale, médias et réseaux sociauxStratégie digitale, médias et réseaux sociaux
Stratégie digitale, médias et réseaux sociaux
 
Les applications mobiles, sites mobiles et web apps
Les applications mobiles, sites mobiles et web appsLes applications mobiles, sites mobiles et web apps
Les applications mobiles, sites mobiles et web apps
 
5 killer ways to open up your next presentation
5 killer ways to open up your next presentation5 killer ways to open up your next presentation
5 killer ways to open up your next presentation
 
Les Réseaux Sociaux sur Mobile
Les Réseaux Sociaux sur MobileLes Réseaux Sociaux sur Mobile
Les Réseaux Sociaux sur Mobile
 
Médias sociaux & CoM mobile : Vidéos en ligne, Brand Content, Vidéo virale, Y...
Médias sociaux & CoM mobile : Vidéos en ligne, Brand Content, Vidéo virale, Y...Médias sociaux & CoM mobile : Vidéos en ligne, Brand Content, Vidéo virale, Y...
Médias sociaux & CoM mobile : Vidéos en ligne, Brand Content, Vidéo virale, Y...
 
Médias sociaux & CoM mobile : Community Manager, Facbook, Twitter
Médias sociaux & CoM mobile : Community Manager, Facbook, Twitter Médias sociaux & CoM mobile : Community Manager, Facbook, Twitter
Médias sociaux & CoM mobile : Community Manager, Facbook, Twitter
 
Email responsive : dopez vos performances emailing en adaptant vos campagnes ...
Email responsive : dopez vos performances emailing en adaptant vos campagnes ...Email responsive : dopez vos performances emailing en adaptant vos campagnes ...
Email responsive : dopez vos performances emailing en adaptant vos campagnes ...
 
Livre blanc Responsive Design en email marketing
Livre blanc Responsive Design en email marketing Livre blanc Responsive Design en email marketing
Livre blanc Responsive Design en email marketing
 

Ähnlich wie Le responsive design : adapter ses contenus aux formats mobiles

DrupalCamp Paris 2013 : Sites mobiles avec Drupal
DrupalCamp Paris 2013 : Sites mobiles avec DrupalDrupalCamp Paris 2013 : Sites mobiles avec Drupal
DrupalCamp Paris 2013 : Sites mobiles avec DrupalActency
 
Design et expérience utilisateur sous SharePoint 2013
Design et expérience utilisateur sous SharePoint 2013Design et expérience utilisateur sous SharePoint 2013
Design et expérience utilisateur sous SharePoint 2013Microsoft
 
2012 cyril-wolfangel-responsive design-typo3
2012 cyril-wolfangel-responsive design-typo32012 cyril-wolfangel-responsive design-typo3
2012 cyril-wolfangel-responsive design-typo3Talan
 
Les solutions mobiles (potentiel et enjeux)
Les solutions mobiles (potentiel et enjeux)Les solutions mobiles (potentiel et enjeux)
Les solutions mobiles (potentiel et enjeux)SCALA
 
Web Mobile : quelles opportunités face aux apps ?
Web Mobile : quelles opportunités face aux apps ?Web Mobile : quelles opportunités face aux apps ?
Web Mobile : quelles opportunités face aux apps ?NiceToMeetYou
 
Qu'est-ce que le Responsive Design.docx
Qu'est-ce que le Responsive Design.docxQu'est-ce que le Responsive Design.docx
Qu'est-ce que le Responsive Design.docxGeorges59
 
Mobile 201 - Conférence 2012
Mobile 201 - Conférence 2012Mobile 201 - Conférence 2012
Mobile 201 - Conférence 2012MBA Multimedia
 
Livre blanc Développement mobile
Livre blanc Développement mobileLivre blanc Développement mobile
Livre blanc Développement mobileLudovic Tant
 
Livre blanc Rubedo - Plateforme digitale open-source
Livre blanc Rubedo - Plateforme digitale open-sourceLivre blanc Rubedo - Plateforme digitale open-source
Livre blanc Rubedo - Plateforme digitale open-sourceRubedo, a WebTales solution
 
Responsive Design : impact sur les processus de production
Responsive Design : impact sur les processus de productionResponsive Design : impact sur les processus de production
Responsive Design : impact sur les processus de productionL_Demontiers
 
L’accessibilité numérique est au cœur de la transformation digitale de Microsoft
L’accessibilité numérique est au cœur de la transformation digitale de MicrosoftL’accessibilité numérique est au cœur de la transformation digitale de Microsoft
L’accessibilité numérique est au cœur de la transformation digitale de MicrosoftPatricia CHARRAIS-BOUVIER
 
Responsive web design, enjeux et stratégies
Responsive web design, enjeux et stratégiesResponsive web design, enjeux et stratégies
Responsive web design, enjeux et stratégiesMehdi Kabab
 
CMSday 2013 - Votre audience peut-elle encore se passer d'une version mobile ?
CMSday 2013 - Votre audience peut-elle encore se passer d'une version mobile ?CMSday 2013 - Votre audience peut-elle encore se passer d'une version mobile ?
CMSday 2013 - Votre audience peut-elle encore se passer d'une version mobile ?Smile I.T is open
 
aYaline - Offre Mobilité - Responsive Web Design
aYaline - Offre Mobilité - Responsive Web DesignaYaline - Offre Mobilité - Responsive Web Design
aYaline - Offre Mobilité - Responsive Web DesignaYaline
 
aYaline - Offre Mobilité - Responsive Web Design
aYaline - Offre Mobilité - Responsive Web DesignaYaline - Offre Mobilité - Responsive Web Design
aYaline - Offre Mobilité - Responsive Web DesignaYaline
 
Présentation Responsive Webdesign
Présentation Responsive WebdesignPrésentation Responsive Webdesign
Présentation Responsive WebdesignWilly Bahuaud
 

Ähnlich wie Le responsive design : adapter ses contenus aux formats mobiles (20)

Salon Use IT Lyon
Salon Use IT LyonSalon Use IT Lyon
Salon Use IT Lyon
 
DrupalCamp Paris 2013 : Sites mobiles avec Drupal
DrupalCamp Paris 2013 : Sites mobiles avec DrupalDrupalCamp Paris 2013 : Sites mobiles avec Drupal
DrupalCamp Paris 2013 : Sites mobiles avec Drupal
 
Design et expérience utilisateur sous SharePoint 2013
Design et expérience utilisateur sous SharePoint 2013Design et expérience utilisateur sous SharePoint 2013
Design et expérience utilisateur sous SharePoint 2013
 
2012 cyril-wolfangel-responsive design-typo3
2012 cyril-wolfangel-responsive design-typo32012 cyril-wolfangel-responsive design-typo3
2012 cyril-wolfangel-responsive design-typo3
 
Les solutions mobiles (potentiel et enjeux)
Les solutions mobiles (potentiel et enjeux)Les solutions mobiles (potentiel et enjeux)
Les solutions mobiles (potentiel et enjeux)
 
Formation mobile-cross-platform
Formation mobile-cross-platformFormation mobile-cross-platform
Formation mobile-cross-platform
 
Web Mobile : quelles opportunités face aux apps ?
Web Mobile : quelles opportunités face aux apps ?Web Mobile : quelles opportunités face aux apps ?
Web Mobile : quelles opportunités face aux apps ?
 
Plasticité2015 technovf
Plasticité2015 technovfPlasticité2015 technovf
Plasticité2015 technovf
 
Qu'est-ce que le Responsive Design.docx
Qu'est-ce que le Responsive Design.docxQu'est-ce que le Responsive Design.docx
Qu'est-ce que le Responsive Design.docx
 
Mobile 201 - Conférence 2012
Mobile 201 - Conférence 2012Mobile 201 - Conférence 2012
Mobile 201 - Conférence 2012
 
Livre blanc Développement mobile
Livre blanc Développement mobileLivre blanc Développement mobile
Livre blanc Développement mobile
 
Livre blanc Rubedo - Plateforme digitale open-source
Livre blanc Rubedo - Plateforme digitale open-sourceLivre blanc Rubedo - Plateforme digitale open-source
Livre blanc Rubedo - Plateforme digitale open-source
 
Responsive Design : impact sur les processus de production
Responsive Design : impact sur les processus de productionResponsive Design : impact sur les processus de production
Responsive Design : impact sur les processus de production
 
L’accessibilité numérique est au cœur de la transformation digitale de Microsoft
L’accessibilité numérique est au cœur de la transformation digitale de MicrosoftL’accessibilité numérique est au cœur de la transformation digitale de Microsoft
L’accessibilité numérique est au cœur de la transformation digitale de Microsoft
 
Responsive web design, enjeux et stratégies
Responsive web design, enjeux et stratégiesResponsive web design, enjeux et stratégies
Responsive web design, enjeux et stratégies
 
bb-d_ERGO-UX
bb-d_ERGO-UXbb-d_ERGO-UX
bb-d_ERGO-UX
 
CMSday 2013 - Votre audience peut-elle encore se passer d'une version mobile ?
CMSday 2013 - Votre audience peut-elle encore se passer d'une version mobile ?CMSday 2013 - Votre audience peut-elle encore se passer d'une version mobile ?
CMSday 2013 - Votre audience peut-elle encore se passer d'une version mobile ?
 
aYaline - Offre Mobilité - Responsive Web Design
aYaline - Offre Mobilité - Responsive Web DesignaYaline - Offre Mobilité - Responsive Web Design
aYaline - Offre Mobilité - Responsive Web Design
 
aYaline - Offre Mobilité - Responsive Web Design
aYaline - Offre Mobilité - Responsive Web DesignaYaline - Offre Mobilité - Responsive Web Design
aYaline - Offre Mobilité - Responsive Web Design
 
Présentation Responsive Webdesign
Présentation Responsive WebdesignPrésentation Responsive Webdesign
Présentation Responsive Webdesign
 

Le responsive design : adapter ses contenus aux formats mobiles

  • 1. Le responsive design 22 avril 2013 Focus sur les éléments techniques et sur l’e-mailing web responsive
  • 2. 2 Le responsive design Le responsive web design englobe les techniques de conception qui permettent de proposer des contenus auto-adaptables en fonction des interfaces de consultation utilisées par le visiteur. Le responsive design permet de s’adapter à l’environnement technique de consultation sans pour autant multiplier les versions d’un même contenu.
  • 3. Le responsive design 3 Les largeurs fixes deviennent variables Grilles fluides 1
  • 4. Le responsive design 4 Les largeurs fixes deviennent variables Grilles fluides 1 La taille des images s’adapte à chaque écran Images flexibles 2
  • 5. Le responsive design 5 Les largeurs fixes deviennent variables Grilles fluides 1 La taille des images s’adapte à chaque écran Images flexibles Interrogation des devices pour déterminer lequel est utilisé et sa résolution 3 Media Queries 2
  • 6. Le responsive design 6 Sur les devices mobiles, les zones froides et les zones chaudes ne sont pas les même que sur desktop. Sur mobile, la lecture est rapide et incomplète. Le message doit donc être repensé et adapté à ce terminal. Zones chaudes Zones tempérées Zones froides
  • 7. Le responsive design 7 Sur les devices mobiles, les zones froides et les zones chaudes ne sont pas les même que sur desktop. Sur mobile, la lecture est rapide et incomplète. Le message doit donc être repensé et adapté à ce terminal. Zones chaudes Zones tempérées Zones froides
  • 11. L’approche idéale Mobile first 11 Intégrer en premier les contraintes techniques de l’environnement mobile … …puis se concentrer sur les besoins mobiles de l’utilisateur et le contenu avant le design d’interface.
  • 12. FOCUS ELEMENTS TECHNIQUES DU WEB RESPONSIVE BIG5MEDIA, 3 Impasse du Bel Air, 94110 ARCUEIL | +33 1 47 40 32 10 12
  • 13. Le responsive design 13 Le device La technologie reconnaît… L’OS du device Le type de messagerie électronique Les dimensions de l’écran La résolution de l’écran L’orientation de l’écran
  • 15. Le responsive design HTML5 structure 15 Et repose sur… CSS3 Feuilles de style
  • 16. Dans le code, le web responsive suppose d’appliquer des règles spécifiques suivant le support de lecture…. 16 Le responsive design
  • 17. 17 Le responsive design Dans le code, le web responsive suppose d’appliquer des règles spécifiques suivant le support de lecture….On précise la résolution de l’écran (ici 320 px à 490 px) et on adapte la taille du contenu.
  • 18. Le responsive design 18 • HTML5 est un standard ouvert et gratuit : le code est accessible Vous ne prenez en charge que la partie créative de votre projet mobile !
  • 19. Le responsive design 19 • HTML5 est un standard ouvert et gratuit : le code est accessible Vous ne prenez en charge que la partie créative de votre projet mobile ! • Le R.O.I est optimisé
  • 21. L’e-mailing web responsive Par le biais d’un seul envoi, l’e-mailing web responsive adapte le contenu et l’ergonomie en fonction des différents écrans sur lequel il est consulté. 21 • Adapter vos messages en fonction de l’appareil sur lequel il est lu pour optimiser vos campagnes. • Proposer des contenus adaptés aux utilisateurs en situation de mobilité pour améliorer le taux de transformation des campagnes. • Adapter la forme de vos messages, et donc apporter un confort de lecture à votre cible. C’est une nette amélioration de l’expérience client !
  • 22. L’e-mailing web responsive 22 55 millions de français possèdent un mobile dont 26 millions possède un Smartphone * *ARCEP, (avril 2012)
  • 23. L’e-mailing web responsive 23 * Ipsos profiling (Sept 2010), **ReturnPath (2012). Des mobinautes français consultent leur e-mails sur mobile et y consacrent plus d’1h30 par semaine* 48 % 41 % Des Européens ont tendance à refermer voir effacer un email non optimisé pour leur interface mobile* 300 % progression des ouvertures sur mobile**
  • 24. 24 Vos campagnes email marketing sont-elles optimisées en priorité pour cet environnement ?
  • 25. 25 Le responsive design 1,7 %* * Fevad Smartphones
  • 26. 26 Le responsive design 1,9 %* Ordinateur * Fevad 1,7 %* Smartphones
  • 27. 27 Le responsive design Tablette * Fevad 3,9 %* Tablette Le taux de transformation est plus important sur tablette 1,9 %* Ordinateur 1,7 %* Smartphones
  • 28. L’e-mailing web responsive 28 Masquer les éléments inutiles en mobilité (partage de réseaux sociaux, page miroir...) Ré-agencer les blocs de contenu au format vertical : Prévoir un email sur une colonne de large (400 - 500 pixels) Densifier le haut du message pour permettre un appel au clic rapide, une compréhension de l'offre dans les 200/300 premiers pixels La taille du doigt étant de 0,8 cm² au minimum, il faut prévoir des appels au clic en adéquation avec cette dimension
  • 29. 29 www.big5media.com Contact : contact@big5media.com BIG5MEDIA, 3 Impasse du Bel Air, 94110 ARCUEIL | +33 1 47 40 32 10 Pour recevoir cette présentation, cliquez ici