SlideShare une entreprise Scribd logo
1  sur  13
Télécharger pour lire hors ligne
Responsive
Webdesign
Le Responsive Webdesign est une série de
techniques permettant de rendre compatible
un site web avec un maximum de
périphériques, sans sacrifier l'expérience
utilisateur.
En 2013, les smartphones
génèreront plus de visites que les PC
Avantages par rapport à un site .mobi :

- 1 seule interface de gestion
- 1 seul site à crawler
- 1 seule URL à partager et à liker
- recommandé par Google et le W3C
- des sites prêts pour le futur
Ce n'est pas grave si les internautes ne
voient pas le site sous la même forme.

L'essentiel est qu'il aient accès à son
contenu de façon optimale.
Les variations visuelles des sites
« responsive » sont déterminées par les
règles d'ergonomie.
Un site « responsive » prendra une
multitude de formes ; ce n'est pas pour
autant que chacune de ses apparences
doivent être soumises à la validation du
client.
Les clients doivent faire confiance à
notre expertise en ce qui concerne
les variations de design de sites
« responsive »
Le graphiste qui réalise la maquette d'un
site en « responsive » doit réfléchir aux
différentes apparences que celui-ci prendra.
C'est indispensable !

Il commence à déterminer grossièrement
des « points de rupture »
L'intégrateur code le site sur une base
« flexible » en utilisant uniquement des
valeurs en pourcentage et en em.

Il détermine avec le graphiste les
« points de rupture »

Il utilise ensuite des « media queries »
pour coder les variations du site.
Le graphiste, l'intégrateur et le chef de
projet doivent conclure la réalisation du
site en le testant sur de vrais
périphériques.
Attention aux mauvaises pratiques !
Ressources :

- Responsive Webdesign
- Mobile First
- L'ergonomie web
- le site http://mediaqueri.es

Contenu connexe

En vedette

Qualité, bonnes pratiques et CMS - WordCamp Bordeaux - 18 mars 2017
Qualité, bonnes pratiques et CMS - WordCamp Bordeaux - 18 mars 2017Qualité, bonnes pratiques et CMS - WordCamp Bordeaux - 18 mars 2017
Qualité, bonnes pratiques et CMS - WordCamp Bordeaux - 18 mars 2017Elie Sloïm
 
Mise à jour sur la sécurité WordPress – WordCamp Bordeaux 2017
Mise à jour sur la sécurité WordPress – WordCamp Bordeaux 2017Mise à jour sur la sécurité WordPress – WordCamp Bordeaux 2017
Mise à jour sur la sécurité WordPress – WordCamp Bordeaux 2017Boiteaweb
 
Les taxonomies, un système flexible et puissant - WordCamp Bordeaux 2017
Les taxonomies, un système flexible et puissant - WordCamp Bordeaux 2017Les taxonomies, un système flexible et puissant - WordCamp Bordeaux 2017
Les taxonomies, un système flexible et puissant - WordCamp Bordeaux 2017Frédéric Demarle
 
Animer un blog d'entreprise
Animer un blog d'entrepriseAnimer un blog d'entreprise
Animer un blog d'entrepriseEditoile
 
Zen et l'art de la contribution
Zen et l'art de la contributionZen et l'art de la contribution
Zen et l'art de la contributionJenny Beaumont
 
Comment transformer WordPress en portail de formation
Comment transformer WordPress en portail de formationComment transformer WordPress en portail de formation
Comment transformer WordPress en portail de formationBenoit Tostain
 
Faire du e-commerce en France avec WordPress
Faire du e-commerce en France avec WordPressFaire du e-commerce en France avec WordPress
Faire du e-commerce en France avec WordPresscorsonr
 
[WordCamp Bordeaux] Fusionner sa politique print et web avec WordPress
[WordCamp Bordeaux] Fusionner sa politique print et web avec WordPress [WordCamp Bordeaux] Fusionner sa politique print et web avec WordPress
[WordCamp Bordeaux] Fusionner sa politique print et web avec WordPress Grillot Sébastien
 
Seocamp day Toulouse - Yannick Gaultier - sh404SEF: SEO, Analytics, Social an...
Seocamp day Toulouse - Yannick Gaultier - sh404SEF: SEO, Analytics, Social an...Seocamp day Toulouse - Yannick Gaultier - sh404SEF: SEO, Analytics, Social an...
Seocamp day Toulouse - Yannick Gaultier - sh404SEF: SEO, Analytics, Social an...Yannick Gaultier
 
How to Become a Thought Leader in Your Niche
How to Become a Thought Leader in Your NicheHow to Become a Thought Leader in Your Niche
How to Become a Thought Leader in Your NicheLeslie Samuel
 
Qualité Web et mégalomanie : tout ce que j'ai à apprendre à google
Qualité Web et mégalomanie : tout ce que j'ai à apprendre à googleQualité Web et mégalomanie : tout ce que j'ai à apprendre à google
Qualité Web et mégalomanie : tout ce que j'ai à apprendre à googleElie Sloïm
 
Multilingual WordPress
Multilingual WordPressMultilingual WordPress
Multilingual WordPressJenny Beaumont
 
Freelance WordPress, quelle offre et quel business model en 2017 ?
Freelance WordPress, quelle offre et quel business model en 2017 ?Freelance WordPress, quelle offre et quel business model en 2017 ?
Freelance WordPress, quelle offre et quel business model en 2017 ?Benoit Mercusot
 
Présentation du SOA et BPM par Rs2i_AtelierFocusInnovation_06022014
Présentation du SOA et BPM par Rs2i_AtelierFocusInnovation_06022014Présentation du SOA et BPM par Rs2i_AtelierFocusInnovation_06022014
Présentation du SOA et BPM par Rs2i_AtelierFocusInnovation_06022014Marc Bourhis
 
Wordcamp Bordeaux 2017 : et si Wordpress devenait votre système d'information ?
Wordcamp Bordeaux 2017 : et si Wordpress devenait votre système d'information ?Wordcamp Bordeaux 2017 : et si Wordpress devenait votre système d'information ?
Wordcamp Bordeaux 2017 : et si Wordpress devenait votre système d'information ?Frédéric Mandrea
 
Les bonnes pratiques SEO avec PrestaShop et WordPress - CCI Montpellier
Les bonnes pratiques SEO avec PrestaShop et WordPress - CCI MontpellierLes bonnes pratiques SEO avec PrestaShop et WordPress - CCI Montpellier
Les bonnes pratiques SEO avec PrestaShop et WordPress - CCI MontpellierNicolas Mercatili
 
Comment se charge WordPress ? Le loading du core.
Comment se charge WordPress ? Le loading du core.Comment se charge WordPress ? Le loading du core.
Comment se charge WordPress ? Le loading du core.Boiteaweb
 
Pourquoi coder son propre thème WordPress
Pourquoi coder son propre thème WordPressPourquoi coder son propre thème WordPress
Pourquoi coder son propre thème WordPressThomas Villain
 
Wordpress notes de cours
Wordpress notes de coursWordpress notes de cours
Wordpress notes de coursmichel.titeux
 

En vedette (20)

Qualité, bonnes pratiques et CMS - WordCamp Bordeaux - 18 mars 2017
Qualité, bonnes pratiques et CMS - WordCamp Bordeaux - 18 mars 2017Qualité, bonnes pratiques et CMS - WordCamp Bordeaux - 18 mars 2017
Qualité, bonnes pratiques et CMS - WordCamp Bordeaux - 18 mars 2017
 
Mise à jour sur la sécurité WordPress – WordCamp Bordeaux 2017
Mise à jour sur la sécurité WordPress – WordCamp Bordeaux 2017Mise à jour sur la sécurité WordPress – WordCamp Bordeaux 2017
Mise à jour sur la sécurité WordPress – WordCamp Bordeaux 2017
 
Les taxonomies, un système flexible et puissant - WordCamp Bordeaux 2017
Les taxonomies, un système flexible et puissant - WordCamp Bordeaux 2017Les taxonomies, un système flexible et puissant - WordCamp Bordeaux 2017
Les taxonomies, un système flexible et puissant - WordCamp Bordeaux 2017
 
Animer un blog d'entreprise
Animer un blog d'entrepriseAnimer un blog d'entreprise
Animer un blog d'entreprise
 
Zen et l'art de la contribution
Zen et l'art de la contributionZen et l'art de la contribution
Zen et l'art de la contribution
 
Comment transformer WordPress en portail de formation
Comment transformer WordPress en portail de formationComment transformer WordPress en portail de formation
Comment transformer WordPress en portail de formation
 
Faire du e-commerce en France avec WordPress
Faire du e-commerce en France avec WordPressFaire du e-commerce en France avec WordPress
Faire du e-commerce en France avec WordPress
 
[WordCamp Bordeaux] Fusionner sa politique print et web avec WordPress
[WordCamp Bordeaux] Fusionner sa politique print et web avec WordPress [WordCamp Bordeaux] Fusionner sa politique print et web avec WordPress
[WordCamp Bordeaux] Fusionner sa politique print et web avec WordPress
 
Seocamp day Toulouse - Yannick Gaultier - sh404SEF: SEO, Analytics, Social an...
Seocamp day Toulouse - Yannick Gaultier - sh404SEF: SEO, Analytics, Social an...Seocamp day Toulouse - Yannick Gaultier - sh404SEF: SEO, Analytics, Social an...
Seocamp day Toulouse - Yannick Gaultier - sh404SEF: SEO, Analytics, Social an...
 
How to Become a Thought Leader in Your Niche
How to Become a Thought Leader in Your NicheHow to Become a Thought Leader in Your Niche
How to Become a Thought Leader in Your Niche
 
Qualité Web et mégalomanie : tout ce que j'ai à apprendre à google
Qualité Web et mégalomanie : tout ce que j'ai à apprendre à googleQualité Web et mégalomanie : tout ce que j'ai à apprendre à google
Qualité Web et mégalomanie : tout ce que j'ai à apprendre à google
 
Multilingual WordPress
Multilingual WordPressMultilingual WordPress
Multilingual WordPress
 
Freelance WordPress, quelle offre et quel business model en 2017 ?
Freelance WordPress, quelle offre et quel business model en 2017 ?Freelance WordPress, quelle offre et quel business model en 2017 ?
Freelance WordPress, quelle offre et quel business model en 2017 ?
 
Présentation du SOA et BPM par Rs2i_AtelierFocusInnovation_06022014
Présentation du SOA et BPM par Rs2i_AtelierFocusInnovation_06022014Présentation du SOA et BPM par Rs2i_AtelierFocusInnovation_06022014
Présentation du SOA et BPM par Rs2i_AtelierFocusInnovation_06022014
 
Wordcamp Bordeaux 2017 : et si Wordpress devenait votre système d'information ?
Wordcamp Bordeaux 2017 : et si Wordpress devenait votre système d'information ?Wordcamp Bordeaux 2017 : et si Wordpress devenait votre système d'information ?
Wordcamp Bordeaux 2017 : et si Wordpress devenait votre système d'information ?
 
Les bonnes pratiques SEO avec PrestaShop et WordPress - CCI Montpellier
Les bonnes pratiques SEO avec PrestaShop et WordPress - CCI MontpellierLes bonnes pratiques SEO avec PrestaShop et WordPress - CCI Montpellier
Les bonnes pratiques SEO avec PrestaShop et WordPress - CCI Montpellier
 
Comment se charge WordPress ? Le loading du core.
Comment se charge WordPress ? Le loading du core.Comment se charge WordPress ? Le loading du core.
Comment se charge WordPress ? Le loading du core.
 
reveal.js 3.0.0
reveal.js 3.0.0reveal.js 3.0.0
reveal.js 3.0.0
 
Pourquoi coder son propre thème WordPress
Pourquoi coder son propre thème WordPressPourquoi coder son propre thème WordPress
Pourquoi coder son propre thème WordPress
 
Wordpress notes de cours
Wordpress notes de coursWordpress notes de cours
Wordpress notes de cours
 

Similaire à Présentation Responsive Webdesign

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
 
"Responsive Design" : Pourquoi et comment y aller ?
 "Responsive Design" : Pourquoi et comment y aller ? "Responsive Design" : Pourquoi et comment y aller ?
"Responsive Design" : Pourquoi et comment y aller ?WebSchool Orléans
 
Référencement Mobile Brioude Internet - Formation VLC
Référencement Mobile Brioude Internet - Formation VLCRéférencement Mobile Brioude Internet - Formation VLC
Référencement Mobile Brioude Internet - Formation VLCBrioude Internet
 
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
 
Green France Tourisme : Visibilité sur Internet, le mobile prend le pouvoir
Green France Tourisme : Visibilité sur Internet, le mobile prend le pouvoirGreen France Tourisme : Visibilité sur Internet, le mobile prend le pouvoir
Green France Tourisme : Visibilité sur Internet, le mobile prend le pouvoirBrioude Internet
 
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
 
Le responsive design : adapter ses contenus aux formats mobiles
Le responsive design : adapter ses contenus aux formats mobilesLe responsive design : adapter ses contenus aux formats mobiles
Le responsive design : adapter ses contenus aux formats mobilesBig5media
 
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
 
Les nouveaux challenges techniques pour le SEO
Les nouveaux challenges techniques pour le SEOLes nouveaux challenges techniques pour le SEO
Les nouveaux challenges techniques pour le SEOGroupe Neper
 
Bien Démarrer avec le Responsive Web Design
Bien Démarrer avec le Responsive Web DesignBien Démarrer avec le Responsive Web Design
Bien Démarrer avec le Responsive Web DesignGreg Hoin
 
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
 
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
 
Veille : L'impact de l'évolution des technologies web sur le référencement et...
Veille : L'impact de l'évolution des technologies web sur le référencement et...Veille : L'impact de l'évolution des technologies web sur le référencement et...
Veille : L'impact de l'évolution des technologies web sur le référencement et...maclic
 
Design adaptatif / Mobilité
Design adaptatif / MobilitéDesign adaptatif / Mobilité
Design adaptatif / MobilitéAndré Dubreuil
 
Responsive Web Design - Enjeux, Solutions, Méthodologie
Responsive Web Design - Enjeux, Solutions, MéthodologieResponsive Web Design - Enjeux, Solutions, Méthodologie
Responsive Web Design - Enjeux, Solutions, Méthodologieekino
 
Les 10 Tendances Webdesign pour 2014 by Vanksen
Les 10 Tendances Webdesign pour 2014 by VanksenLes 10 Tendances Webdesign pour 2014 by Vanksen
Les 10 Tendances Webdesign pour 2014 by VanksenSolange Derrey
 
Comment se préparer au Mobile Index First de Google
Comment se préparer au Mobile Index First de GoogleComment se préparer au Mobile Index First de Google
Comment se préparer au Mobile Index First de GoogleKseo Conseil
 
Le responsive design vs les apps - Octobre 2013
Le responsive design vs les apps - Octobre 2013Le responsive design vs les apps - Octobre 2013
Le responsive design vs les apps - Octobre 2013Idaho Consulting
 

Similaire à Présentation Responsive Webdesign (20)

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
 
"Responsive Design" : Pourquoi et comment y aller ?
 "Responsive Design" : Pourquoi et comment y aller ? "Responsive Design" : Pourquoi et comment y aller ?
"Responsive Design" : Pourquoi et comment y aller ?
 
Référencement Mobile Brioude Internet - Formation VLC
Référencement Mobile Brioude Internet - Formation VLCRéférencement Mobile Brioude Internet - Formation VLC
Référencement Mobile Brioude Internet - Formation VLC
 
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
 
molka foods
molka foodsmolka foods
molka foods
 
Green France Tourisme : Visibilité sur Internet, le mobile prend le pouvoir
Green France Tourisme : Visibilité sur Internet, le mobile prend le pouvoirGreen France Tourisme : Visibilité sur Internet, le mobile prend le pouvoir
Green France Tourisme : Visibilité sur Internet, le mobile prend le pouvoir
 
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...
 
Le responsive design : adapter ses contenus aux formats mobiles
Le responsive design : adapter ses contenus aux formats mobilesLe responsive design : adapter ses contenus aux formats mobiles
Le responsive design : adapter ses contenus aux formats mobiles
 
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 marketing
Mobile marketingMobile marketing
Mobile marketing
 
Les nouveaux challenges techniques pour le SEO
Les nouveaux challenges techniques pour le SEOLes nouveaux challenges techniques pour le SEO
Les nouveaux challenges techniques pour le SEO
 
Bien Démarrer avec le Responsive Web Design
Bien Démarrer avec le Responsive Web DesignBien Démarrer avec le Responsive Web Design
Bien Démarrer avec le Responsive Web Design
 
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
 
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 ?
 
Veille : L'impact de l'évolution des technologies web sur le référencement et...
Veille : L'impact de l'évolution des technologies web sur le référencement et...Veille : L'impact de l'évolution des technologies web sur le référencement et...
Veille : L'impact de l'évolution des technologies web sur le référencement et...
 
Design adaptatif / Mobilité
Design adaptatif / MobilitéDesign adaptatif / Mobilité
Design adaptatif / Mobilité
 
Responsive Web Design - Enjeux, Solutions, Méthodologie
Responsive Web Design - Enjeux, Solutions, MéthodologieResponsive Web Design - Enjeux, Solutions, Méthodologie
Responsive Web Design - Enjeux, Solutions, Méthodologie
 
Les 10 Tendances Webdesign pour 2014 by Vanksen
Les 10 Tendances Webdesign pour 2014 by VanksenLes 10 Tendances Webdesign pour 2014 by Vanksen
Les 10 Tendances Webdesign pour 2014 by Vanksen
 
Comment se préparer au Mobile Index First de Google
Comment se préparer au Mobile Index First de GoogleComment se préparer au Mobile Index First de Google
Comment se préparer au Mobile Index First de Google
 
Le responsive design vs les apps - Octobre 2013
Le responsive design vs les apps - Octobre 2013Le responsive design vs les apps - Octobre 2013
Le responsive design vs les apps - Octobre 2013
 

Présentation Responsive Webdesign

  • 2. Le Responsive Webdesign est une série de techniques permettant de rendre compatible un site web avec un maximum de périphériques, sans sacrifier l'expérience utilisateur.
  • 3. En 2013, les smartphones génèreront plus de visites que les PC
  • 4. Avantages par rapport à un site .mobi : - 1 seule interface de gestion - 1 seul site à crawler - 1 seule URL à partager et à liker - recommandé par Google et le W3C - des sites prêts pour le futur
  • 5. Ce n'est pas grave si les internautes ne voient pas le site sous la même forme. L'essentiel est qu'il aient accès à son contenu de façon optimale.
  • 6. Les variations visuelles des sites « responsive » sont déterminées par les règles d'ergonomie.
  • 7. Un site « responsive » prendra une multitude de formes ; ce n'est pas pour autant que chacune de ses apparences doivent être soumises à la validation du client.
  • 8. Les clients doivent faire confiance à notre expertise en ce qui concerne les variations de design de sites « responsive »
  • 9. Le graphiste qui réalise la maquette d'un site en « responsive » doit réfléchir aux différentes apparences que celui-ci prendra. C'est indispensable ! Il commence à déterminer grossièrement des « points de rupture »
  • 10. L'intégrateur code le site sur une base « flexible » en utilisant uniquement des valeurs en pourcentage et en em. Il détermine avec le graphiste les « points de rupture » Il utilise ensuite des « media queries » pour coder les variations du site.
  • 11. Le graphiste, l'intégrateur et le chef de projet doivent conclure la réalisation du site en le testant sur de vrais périphériques.
  • 12. Attention aux mauvaises pratiques !
  • 13. Ressources : - Responsive Webdesign - Mobile First - L'ergonomie web - le site http://mediaqueri.es