SlideShare une entreprise Scribd logo
INTRODUCTION AU


RESP ONS IV E
WEB DE SI GN
                  DEC 2012
                             FÉVRIER 2012
LE USAGES DIGITAUX ÉVOLUENT…
… LES SUPPORTS SE MULTIPLIENT
LES SITES DOIVENT S’ADAPTER

 … AUX RÉSOLUTIONS ET TAILLES D’ÉCRANS




2,73%   2,79%     4,64%   4,96%   5,88%   8,29%   8,47%   12,23%   12,4%
                                                                                  15,7%




                                                                     Libstat.com, aout 2011
LES SITES DOIVENT S’ADAPTER

… AUX RÉSOLUTIONS ET TAILLES D’ÉCRANS
… AUX ORIENTATIONS
LES SITES DOIVENT S’ADAPTER

… AUX RÉSOLUTIONS ET TAILLES D’ÉCRANS
… AUX ORIENTATIONS
… AUX SUPPORTS
LES SITES DOIVENT S’ADAPTER

… AUX RÉSOLUTIONS ET TAILLES D’ÉCRANS
… AUX ORIENTATIONS
… AUX SUPPORTS
… À LA PERFORMANCE
SI L’ON NE FAIT RIEN…
                         ON ARRIVE A CA

…   DES BORDS SUR LES GRANDES RESOLUTIONS   … DES SITES ILLISIBLES SUR LES PETITES   …OBLIGATION DE
                                            RESOLUTIONS                              NAVIGUER AVEC LE ZOOM
IL FAUT DONC REPENSER LE WEBDESIGN
…POUR ÊTRE COMPATIBLE AVEC
PLUSIEURS TERMINAUX
EST-ON OBLIGÉ D’EN ARRIVER À ÇA ?

                                                1 SITE SMARTPHONE   1 SITE IPHONE       1 SITE IPAD         1 SITE ANDROID
                                                ANDROID ET/OU           ET/OU           ET/OU                ET/OU
1 SITE WEB GRANDE       1 SITE WEB PETITE       1 APPLICATION           1 APPLICATION   1 APPLICATION        APPLICATION
RESOLUTION              RESOLUTION              ANDROID                 IPHONE          IPAD                 ANDROID




                    +                       +                       +                   +               +
PLUTÔT QUE DE CONCEVOIR DES
SYSTÈMES DÉCONNECTÉS LES UNS DES
AUTRES EN AUGMENTANT LE NOMBRE
DE DISPOSITIFS INTERNET, CES SYSTÈMES
PEUVENT ÊTRE CONSIDÉRÉS COMME LES
FACETTES D’UNE EXPÉRIENCE
COMMUNE GRÂCE AU
RESPONSIVE DESIGN
LE RESPONSIVE DESIGN
LE RESPONSIVE DESIGN

C’EST QUOI
C’EST QUOI?




              IL S’AGIT D’UNE TECHNIQUE QUI PERMET DE CRÉER
              UN SITE QUI SOIT COMPATIBLE AVEC TOUS LES
              TERMINAUX, UN SITE FLUIDE POUR UNE EXPÉRIENCE
              UNIQUE SUR DIFFÉRENTS SUPPORTS.
              LE PRINCIPE DU RESPONSIVE DESIGN EST DE TENIR
              COMPTE EN PRIORITÉ DE L’EXPÉRIENCE
              UTILISATEUR.
DES EXEMPLES ?
THE BOSTON GLOBE




CE SITE EST FLUIDE…
                      POSTE DE BUREAU
                      (1024)
THE BOSTON GLOBE




… IL PEUT S’ADAPTER FACILEMENT SUR TABLETTE
        TABLETTE       POSTE DE BUREAU
        (768PX)        (1024)
THE BOSTON GLOBE




… SUR SMARTPHONE
SMARTPHONE   TABLETTE   POSTE DE BUREAU
(320PX)      (768PX)    (1024)
THE BOSTON GLOBE




… ET SUR UN ÉCRAN À PLUS HAUTE RÉSOLUTION
SMARTPHONE   TABLETTE   POSTE DE BUREAU   POSTE DE BUREAU
(320PX)      (768PX)    (1024)            (1600PX)
UN AUTRE EXEMPLE : FOODSENSE



SMARTPHONE   TABLETTE    NETBOOK   POSTE DE BUREAU
(320PX)      (768PX)     (1024)    (1600PX)
OU ENCORE : JON WHITE



SMARTPHONE   TABLETTE       NETBOOK   POSTE DE BUREAU
(320PX)      (768PX)        (1024)    (1600PX)
MAIS COMMENT ÇA MARCHE ?
COMMENT ÇA MARCHE ?




  PARLONS TECHNIQUE…

                      3 éléments indispensables



      GRILLES FLUIDES          IMAGES FLEXIBLES            MEDIA QUERIES


     Autrement dit, pour rendre un site adaptable il faut
     •  transformer les largeurs fixes en largeurs variables,
     •  gérer la taille des éléments, comme les images par exemple
     •  et interroger le média sur son identité (iPad, PC…) pour s’adapter à la
        résolution et aux usages du support.
LE RESPONSIVE DESIGN …

    … Solution   MIRACLE
LES CLEFS POUR CHOISIR

LE   MEILLEUR RAPPORT ACCESSIBILITÉ / EXPÉRIENCE /COÛT
•    Une expérience utilisateur unique sur différents terminaux
•    Une ultra accessibilité : compatibilité quelque soit le support
•    Coûts inférieurs à la création de plusieurs dispositifs
•    Résiste aux « aléas » des évolutions de dispositifs sur-mesure


MAIS ÉVIDEMMENT MOINS OPTIMISÉ QU’UN DISPOSITIF SUR-MESURE PENSÉ ET DÉVELOPPÉ
INDÉPENDANDAMMENT POUR CHAQUE SUPPORT
•  Ergonomie non native qui sera toujours moins aboutie qu’un dispositif spécifique pour chaque support
ET VOUS ?
QUEL ÉCO-SYSTÈME VOUS CORRESPOND ?




 1 DISPOSITIF UNIQUE POUR
 MAXIMISER L’ACCÈS ET
 MINIMISER LES COÛTS ?
QUEL ÉCO-SYSTÈME VOUS CORRESPOND ?




 DES DISPOSITIFS DÉDIÉS POUR
 MAXIMISER L’EXPÉRIENCE ?
QUEL ÉCO-SYSTÈME VOUS CORRESPOND ?




 UN ÉQUILIBRE
 ENTRE LES DEUX ?
PARLONS-EN !

 POUR OBTENIR LES SLIDES DE CETTE PRESENTATION
 contact@dagobert.fr

 Dagobert
 39 rue des Mathurins, 75008 Paris
 01 56 03 99 80
 contact@dagobert.fr
 www.dagobert.com
 www.facebook.com/agencedagobert
 www.twitter.com/agencedagobert
contact




                                 JÉRÉMIE ABRIC     SOLANGE DERREY
                    DIRECTEUR DE LA STRATÉGIE      DIGITAL PLANNER
                       jeremie.abric@dagobert.fr   solange.derrey@dagobert.fr
                                        @jabric    @SolangeDerrey




DÉCOUVREZ AUSSI…
LES AUTRES ÉTUDES DU PLANNING STRATÉGIQUE                                       CONTACT
                                                                                39 RUE DES MATHURINS
                                                                                75008 PARIS
                                                                                + 33 (0)1 56 03 99 80

Contenu connexe

Tendances

Conf 2023 TLD - ChatGPT impact dans le Design
Conf 2023 TLD - ChatGPT impact dans le DesignConf 2023 TLD - ChatGPT impact dans le Design
Conf 2023 TLD - ChatGPT impact dans le Design
TanguyLeDuff1
 
Atelier Web et Mobile Design partie I, introduction au web design, Ahmed BACH...
Atelier Web et Mobile Design partie I, introduction au web design, Ahmed BACH...Atelier Web et Mobile Design partie I, introduction au web design, Ahmed BACH...
Atelier Web et Mobile Design partie I, introduction au web design, Ahmed BACH...
Ahmed BACHIR CHERIF
 
Les systèmes intelligents
Les systèmes intelligentsLes systèmes intelligents
Les systèmes intelligents
Nour El Houda Megherbi
 
Réalisation d'un site web dynamique mobile pour Air Algérie
Réalisation d'un site web dynamique mobile pour Air AlgérieRéalisation d'un site web dynamique mobile pour Air Algérie
Réalisation d'un site web dynamique mobile pour Air Algérie
Bachir Benyammi
 
La culture digitale en images
La culture digitale en images La culture digitale en images
La culture digitale en images
Agence Angie
 
Réseaux de neurones récurrents et LSTM
Réseaux de neurones récurrents et LSTMRéseaux de neurones récurrents et LSTM
Réseaux de neurones récurrents et LSTM
Jaouad Dabounou
 
Presentation DevOps : enjeux , objectifs, consequences
Presentation DevOps : enjeux , objectifs, consequencesPresentation DevOps : enjeux , objectifs, consequences
Presentation DevOps : enjeux , objectifs, consequences
Stéphane Di Cioccio
 
Introduction aux théories de l'information et de la communication_DUT_MMI
Introduction aux théories de l'information et de la communication_DUT_MMIIntroduction aux théories de l'information et de la communication_DUT_MMI
Introduction aux théories de l'information et de la communication_DUT_MMI
Virginie Colombel
 
Lean UX
Lean UXLean UX
iA Générative : #ChatGPT #MidJourney
iA Générative : #ChatGPT #MidJourney iA Générative : #ChatGPT #MidJourney
iA Générative : #ChatGPT #MidJourney
Hicham Sabre
 
Voyage dans le monde du Deep Learning
Voyage dans le monde du Deep LearningVoyage dans le monde du Deep Learning
Voyage dans le monde du Deep Learning
Alexia Audevart
 
Le guide de l'hygiène informatique
Le guide de l'hygiène informatiqueLe guide de l'hygiène informatique
Le guide de l'hygiène informatique
NRC
 
Machine Learning
Machine LearningMachine Learning
Machine Learning
Soft Computing
 
Culture digitale
Culture digitaleCulture digitale
Culture digitale
Babacar LO
 
ConversationsAvecChatGPT-v5.pdf
ConversationsAvecChatGPT-v5.pdfConversationsAvecChatGPT-v5.pdf
ConversationsAvecChatGPT-v5.pdf
UGAIA
 
Intelligence-Artificielle-cours.pdf
Intelligence-Artificielle-cours.pdfIntelligence-Artificielle-cours.pdf
Intelligence-Artificielle-cours.pdf
TCHAMINIPRINCESSELUS
 
Présentation cloud computing
Présentation cloud computingPrésentation cloud computing
Présentation cloud computing
Cynapsys It Hotspot
 

Tendances (20)

Conf 2023 TLD - ChatGPT impact dans le Design
Conf 2023 TLD - ChatGPT impact dans le DesignConf 2023 TLD - ChatGPT impact dans le Design
Conf 2023 TLD - ChatGPT impact dans le Design
 
Atelier Web et Mobile Design partie I, introduction au web design, Ahmed BACH...
Atelier Web et Mobile Design partie I, introduction au web design, Ahmed BACH...Atelier Web et Mobile Design partie I, introduction au web design, Ahmed BACH...
Atelier Web et Mobile Design partie I, introduction au web design, Ahmed BACH...
 
Les systèmes intelligents
Les systèmes intelligentsLes systèmes intelligents
Les systèmes intelligents
 
Réalisation d'un site web dynamique mobile pour Air Algérie
Réalisation d'un site web dynamique mobile pour Air AlgérieRéalisation d'un site web dynamique mobile pour Air Algérie
Réalisation d'un site web dynamique mobile pour Air Algérie
 
Comment fonctionne ChatGPT.pdf
Comment fonctionne ChatGPT.pdfComment fonctionne ChatGPT.pdf
Comment fonctionne ChatGPT.pdf
 
La culture digitale en images
La culture digitale en images La culture digitale en images
La culture digitale en images
 
Réseaux de neurones récurrents et LSTM
Réseaux de neurones récurrents et LSTMRéseaux de neurones récurrents et LSTM
Réseaux de neurones récurrents et LSTM
 
Presentation DevOps : enjeux , objectifs, consequences
Presentation DevOps : enjeux , objectifs, consequencesPresentation DevOps : enjeux , objectifs, consequences
Presentation DevOps : enjeux , objectifs, consequences
 
Introduction aux théories de l'information et de la communication_DUT_MMI
Introduction aux théories de l'information et de la communication_DUT_MMIIntroduction aux théories de l'information et de la communication_DUT_MMI
Introduction aux théories de l'information et de la communication_DUT_MMI
 
Lean UX
Lean UXLean UX
Lean UX
 
iA Générative : #ChatGPT #MidJourney
iA Générative : #ChatGPT #MidJourney iA Générative : #ChatGPT #MidJourney
iA Générative : #ChatGPT #MidJourney
 
01 Introduction aux SI 2018
01 Introduction aux SI 201801 Introduction aux SI 2018
01 Introduction aux SI 2018
 
Voyage dans le monde du Deep Learning
Voyage dans le monde du Deep LearningVoyage dans le monde du Deep Learning
Voyage dans le monde du Deep Learning
 
Le guide de l'hygiène informatique
Le guide de l'hygiène informatiqueLe guide de l'hygiène informatique
Le guide de l'hygiène informatique
 
Machine Learning
Machine LearningMachine Learning
Machine Learning
 
T ps dsp
T ps dspT ps dsp
T ps dsp
 
Culture digitale
Culture digitaleCulture digitale
Culture digitale
 
ConversationsAvecChatGPT-v5.pdf
ConversationsAvecChatGPT-v5.pdfConversationsAvecChatGPT-v5.pdf
ConversationsAvecChatGPT-v5.pdf
 
Intelligence-Artificielle-cours.pdf
Intelligence-Artificielle-cours.pdfIntelligence-Artificielle-cours.pdf
Intelligence-Artificielle-cours.pdf
 
Présentation cloud computing
Présentation cloud computingPrésentation cloud computing
Présentation cloud computing
 

En vedette

Un site web responsive en une heure
Un site web responsive en une heureUn site web responsive en une heure
Un site web responsive en une heure
Raphaël Goetter
 
"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
 
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
 
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
ekino
 
Happy Marketing : rejoignez le Happy Movement !
Happy Marketing : rejoignez le Happy Movement !Happy Marketing : rejoignez le Happy Movement !
Happy Marketing : rejoignez le Happy Movement !
Dagobert
 
Dagobert Trends 2013 : Persocial Years
Dagobert Trends 2013 : Persocial YearsDagobert Trends 2013 : Persocial Years
Dagobert Trends 2013 : Persocial Years
Dagobert
 
Les 7 clefs du site institutionnel de demain
Les 7 clefs du site institutionnel de demainLes 7 clefs du site institutionnel de demain
Les 7 clefs du site institutionnel de demain
Dagobert
 
Réinvestir le corps
Réinvestir le corpsRéinvestir le corps
Réinvestir le corps
Dagobert
 
Les marques coach
Les marques coachLes marques coach
Les marques coach
Dagobert
 
L’ÉCONOMIE COLLABORATIVE : COMMENT ADOPTER SES CODES POUR UNE MARQUE QUI C...
L’ÉCONOMIE COLLABORATIVE :  COMMENT ADOPTER  SES CODES POUR UNE  MARQUE QUI C...L’ÉCONOMIE COLLABORATIVE :  COMMENT ADOPTER  SES CODES POUR UNE  MARQUE QUI C...
L’ÉCONOMIE COLLABORATIVE : COMMENT ADOPTER SES CODES POUR UNE MARQUE QUI C...
Dagobert
 
LA E-GENDER COMMUNICATION
LA E-GENDER COMMUNICATIONLA E-GENDER COMMUNICATION
LA E-GENDER COMMUNICATION
Dagobert
 
Marque employeur : Donnez-vous vraiment envie aux candidats ?
Marque employeur : Donnez-vous vraiment envie aux candidats ?Marque employeur : Donnez-vous vraiment envie aux candidats ?
Marque employeur : Donnez-vous vraiment envie aux candidats ?
Dagobert
 
Marques et réseaux sociaux : comment affirmer sa personnalité en ligne ? ER S...
Marques et réseaux sociaux : comment affirmer sa personnalité en ligne ? ER S...Marques et réseaux sociaux : comment affirmer sa personnalité en ligne ? ER S...
Marques et réseaux sociaux : comment affirmer sa personnalité en ligne ? ER S...
Dagobert
 
Tendances digitales 2015
Tendances digitales 2015Tendances digitales 2015
Tendances digitales 2015
Vanksen
 
Pour que les marques comptent !
Pour que les marques comptent !Pour que les marques comptent !
Pour que les marques comptent !
Dagobert
 
Storytelling : de l'image de marque à l'histoire de marque
Storytelling : de l'image de marque à l'histoire de marqueStorytelling : de l'image de marque à l'histoire de marque
Storytelling : de l'image de marque à l'histoire de marque
Dagobert
 
7 leviers pour générer du trafic en Point de Vente
7 leviers pour générer du trafic en Point de Vente7 leviers pour générer du trafic en Point de Vente
7 leviers pour générer du trafic en Point de Vente
Dagobert
 
Tablettes : les usages outstore et instore pour les marques
Tablettes : les usages outstore et instore pour les marquesTablettes : les usages outstore et instore pour les marques
Tablettes : les usages outstore et instore pour les marques
Dagobert
 
L'essor des Messaging Apps : Quels enjeux pour les marques ?
L'essor des Messaging Apps : Quels enjeux pour les marques ?L'essor des Messaging Apps : Quels enjeux pour les marques ?
L'essor des Messaging Apps : Quels enjeux pour les marques ?
Dagobert
 
50A présentation agence communication digitale
50A présentation agence communication digitale50A présentation agence communication digitale
50A présentation agence communication digitale
Nicolas Bermond
 

En vedette (20)

Un site web responsive en une heure
Un site web responsive en une heureUn site web responsive en une heure
Un site web responsive en une heure
 
"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 ?
 
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...
 
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
 
Happy Marketing : rejoignez le Happy Movement !
Happy Marketing : rejoignez le Happy Movement !Happy Marketing : rejoignez le Happy Movement !
Happy Marketing : rejoignez le Happy Movement !
 
Dagobert Trends 2013 : Persocial Years
Dagobert Trends 2013 : Persocial YearsDagobert Trends 2013 : Persocial Years
Dagobert Trends 2013 : Persocial Years
 
Les 7 clefs du site institutionnel de demain
Les 7 clefs du site institutionnel de demainLes 7 clefs du site institutionnel de demain
Les 7 clefs du site institutionnel de demain
 
Réinvestir le corps
Réinvestir le corpsRéinvestir le corps
Réinvestir le corps
 
Les marques coach
Les marques coachLes marques coach
Les marques coach
 
L’ÉCONOMIE COLLABORATIVE : COMMENT ADOPTER SES CODES POUR UNE MARQUE QUI C...
L’ÉCONOMIE COLLABORATIVE :  COMMENT ADOPTER  SES CODES POUR UNE  MARQUE QUI C...L’ÉCONOMIE COLLABORATIVE :  COMMENT ADOPTER  SES CODES POUR UNE  MARQUE QUI C...
L’ÉCONOMIE COLLABORATIVE : COMMENT ADOPTER SES CODES POUR UNE MARQUE QUI C...
 
LA E-GENDER COMMUNICATION
LA E-GENDER COMMUNICATIONLA E-GENDER COMMUNICATION
LA E-GENDER COMMUNICATION
 
Marque employeur : Donnez-vous vraiment envie aux candidats ?
Marque employeur : Donnez-vous vraiment envie aux candidats ?Marque employeur : Donnez-vous vraiment envie aux candidats ?
Marque employeur : Donnez-vous vraiment envie aux candidats ?
 
Marques et réseaux sociaux : comment affirmer sa personnalité en ligne ? ER S...
Marques et réseaux sociaux : comment affirmer sa personnalité en ligne ? ER S...Marques et réseaux sociaux : comment affirmer sa personnalité en ligne ? ER S...
Marques et réseaux sociaux : comment affirmer sa personnalité en ligne ? ER S...
 
Tendances digitales 2015
Tendances digitales 2015Tendances digitales 2015
Tendances digitales 2015
 
Pour que les marques comptent !
Pour que les marques comptent !Pour que les marques comptent !
Pour que les marques comptent !
 
Storytelling : de l'image de marque à l'histoire de marque
Storytelling : de l'image de marque à l'histoire de marqueStorytelling : de l'image de marque à l'histoire de marque
Storytelling : de l'image de marque à l'histoire de marque
 
7 leviers pour générer du trafic en Point de Vente
7 leviers pour générer du trafic en Point de Vente7 leviers pour générer du trafic en Point de Vente
7 leviers pour générer du trafic en Point de Vente
 
Tablettes : les usages outstore et instore pour les marques
Tablettes : les usages outstore et instore pour les marquesTablettes : les usages outstore et instore pour les marques
Tablettes : les usages outstore et instore pour les marques
 
L'essor des Messaging Apps : Quels enjeux pour les marques ?
L'essor des Messaging Apps : Quels enjeux pour les marques ?L'essor des Messaging Apps : Quels enjeux pour les marques ?
L'essor des Messaging Apps : Quels enjeux pour les marques ?
 
50A présentation agence communication digitale
50A présentation agence communication digitale50A présentation agence communication digitale
50A présentation agence communication digitale
 

Similaire à Introduction au Responsive web design

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 responsive & E-Commerce, un seul site pour tous les devices ?
Web responsive & E-Commerce, un seul site pour tous les devices ?Web responsive & E-Commerce, un seul site pour tous les devices ?
Web responsive & E-Commerce, un seul site pour tous les devices ?
altima°
 
Smartphone : et l'informatique devint mobile...
Smartphone : et l'informatique devint mobile...Smartphone : et l'informatique devint mobile...
Smartphone : et l'informatique devint mobile...
CARA_Lyon
 
Le meilleur de l'offre collaborative open source
Le meilleur de l'offre collaborative open sourceLe meilleur de l'offre collaborative open source
Le meilleur de l'offre collaborative open source
Thomas Choppy
 
Mobile 201 - Conférence 2012
Mobile 201 - Conférence 2012Mobile 201 - Conférence 2012
Mobile 201 - Conférence 2012
MBA Multimedia
 
RWD - Back to Basics par Ruben Pieraerts
RWD - Back to Basics par Ruben PieraertsRWD - Back to Basics par Ruben Pieraerts
RWD - Back to Basics par Ruben Pieraerts
La FeWeb
 
Responsive Web Design : back to basics
Responsive Web Design : back to basicsResponsive Web Design : back to basics
Responsive Web Design : back to basics
Alinoa
 
Retour d'expérience sur la conception et la construction d'une application ME...
Retour d'expérience sur la conception et la construction d'une application ME...Retour d'expérience sur la conception et la construction d'une application ME...
Retour d'expérience sur la conception et la construction d'une application ME...
Microsoft Technet France
 
Niji débriefe le CES 2017 !
Niji débriefe le CES 2017 !Niji débriefe le CES 2017 !
Niji débriefe le CES 2017 !
Niji
 
10 Revelations sur le Web Mobile
10 Revelations sur le Web Mobile10 Revelations sur le Web Mobile
10 Revelations sur le Web Mobile
Raphaël Goetter
 
Responsive web design new14
Responsive web design new14Responsive web design new14
Responsive web design new14
FullSIX Group
 
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
 
Presentation rok solution
Presentation rok solutionPresentation rok solution
Presentation rok solution
ROK75
 
Tendances Web Design 2015
Tendances Web Design 2015Tendances Web Design 2015
Tendances Web Design 2015
Philippe Rondepierre
 
Viva Media
Viva Media
Viva Media
Viva Media
gamerblog24
 
Touristic présentation Kaysersberg - Internet de séjour
Touristic présentation Kaysersberg - Internet de séjourTouristic présentation Kaysersberg - Internet de séjour
Touristic présentation Kaysersberg - Internet de séjour
Johanna Wiss
 
Revolution Mobile @Web2day
Revolution Mobile @Web2dayRevolution Mobile @Web2day
Revolution Mobile @Web2day
Alexandre Jubien
 
Cci Innovation "Penser, concevoir et fabriquer autrement" - CCI Bordeaux 03/1...
Cci Innovation "Penser, concevoir et fabriquer autrement" - CCI Bordeaux 03/1...Cci Innovation "Penser, concevoir et fabriquer autrement" - CCI Bordeaux 03/1...
Cci Innovation "Penser, concevoir et fabriquer autrement" - CCI Bordeaux 03/1...
polenumerique33
 
Salon Use IT Lyon
Salon Use IT LyonSalon Use IT Lyon
Salon Use IT Lyon
Intuitiv Technology
 
Présentation développement application Android
Présentation développement application AndroidPrésentation développement application Android
Présentation développement application Android
ambin_fr
 

Similaire à Introduction au Responsive web design (20)

Les solutions mobiles (potentiel et enjeux)
Les solutions mobiles (potentiel et enjeux)Les solutions mobiles (potentiel et enjeux)
Les solutions mobiles (potentiel et enjeux)
 
Web responsive & E-Commerce, un seul site pour tous les devices ?
Web responsive & E-Commerce, un seul site pour tous les devices ?Web responsive & E-Commerce, un seul site pour tous les devices ?
Web responsive & E-Commerce, un seul site pour tous les devices ?
 
Smartphone : et l'informatique devint mobile...
Smartphone : et l'informatique devint mobile...Smartphone : et l'informatique devint mobile...
Smartphone : et l'informatique devint mobile...
 
Le meilleur de l'offre collaborative open source
Le meilleur de l'offre collaborative open sourceLe meilleur de l'offre collaborative open source
Le meilleur de l'offre collaborative open source
 
Mobile 201 - Conférence 2012
Mobile 201 - Conférence 2012Mobile 201 - Conférence 2012
Mobile 201 - Conférence 2012
 
RWD - Back to Basics par Ruben Pieraerts
RWD - Back to Basics par Ruben PieraertsRWD - Back to Basics par Ruben Pieraerts
RWD - Back to Basics par Ruben Pieraerts
 
Responsive Web Design : back to basics
Responsive Web Design : back to basicsResponsive Web Design : back to basics
Responsive Web Design : back to basics
 
Retour d'expérience sur la conception et la construction d'une application ME...
Retour d'expérience sur la conception et la construction d'une application ME...Retour d'expérience sur la conception et la construction d'une application ME...
Retour d'expérience sur la conception et la construction d'une application ME...
 
Niji débriefe le CES 2017 !
Niji débriefe le CES 2017 !Niji débriefe le CES 2017 !
Niji débriefe le CES 2017 !
 
10 Revelations sur le Web Mobile
10 Revelations sur le Web Mobile10 Revelations sur le Web Mobile
10 Revelations sur le Web Mobile
 
Responsive web design new14
Responsive web design new14Responsive web design new14
Responsive web design new14
 
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 ?
 
Presentation rok solution
Presentation rok solutionPresentation rok solution
Presentation rok solution
 
Tendances Web Design 2015
Tendances Web Design 2015Tendances Web Design 2015
Tendances Web Design 2015
 
Viva Media
Viva Media
Viva Media
Viva Media
 
Touristic présentation Kaysersberg - Internet de séjour
Touristic présentation Kaysersberg - Internet de séjourTouristic présentation Kaysersberg - Internet de séjour
Touristic présentation Kaysersberg - Internet de séjour
 
Revolution Mobile @Web2day
Revolution Mobile @Web2dayRevolution Mobile @Web2day
Revolution Mobile @Web2day
 
Cci Innovation "Penser, concevoir et fabriquer autrement" - CCI Bordeaux 03/1...
Cci Innovation "Penser, concevoir et fabriquer autrement" - CCI Bordeaux 03/1...Cci Innovation "Penser, concevoir et fabriquer autrement" - CCI Bordeaux 03/1...
Cci Innovation "Penser, concevoir et fabriquer autrement" - CCI Bordeaux 03/1...
 
Salon Use IT Lyon
Salon Use IT LyonSalon Use IT Lyon
Salon Use IT Lyon
 
Présentation développement application Android
Présentation développement application AndroidPrésentation développement application Android
Présentation développement application Android
 

Plus de Dagobert

Digital Detox : tendance déconnexion
Digital Detox : tendance déconnexionDigital Detox : tendance déconnexion
Digital Detox : tendance déconnexion
Dagobert
 
Tumblr : enjeux et intérêts pour les marques
Tumblr : enjeux et intérêts pour les marquesTumblr : enjeux et intérêts pour les marques
Tumblr : enjeux et intérêts pour les marques
Dagobert
 
Hello Weibo
Hello Weibo Hello Weibo
Hello Weibo
Dagobert
 
Etat des lieux du mobile en France - Mai 2012
Etat des lieux du mobile en France - Mai 2012Etat des lieux du mobile en France - Mai 2012
Etat des lieux du mobile en France - Mai 2012
Dagobert
 
Instagram : enjeux et interets pour les marques
Instagram : enjeux et interets pour les marquesInstagram : enjeux et interets pour les marques
Instagram : enjeux et interets pour les marques
Dagobert
 
Pinterest - Enjeux et intérêts pour les marques
Pinterest - Enjeux et intérêts pour les marquesPinterest - Enjeux et intérêts pour les marques
Pinterest - Enjeux et intérêts pour les marques
Dagobert
 
Etat des lieux du mobile - Septembre 2011
Etat des lieux du mobile - Septembre 2011Etat des lieux du mobile - Septembre 2011
Etat des lieux du mobile - Septembre 2011
Dagobert
 
Social Shopping
Social ShoppingSocial Shopping
Social Shopping
Dagobert
 
Mobile scanning
Mobile scanningMobile scanning
Mobile scanning
Dagobert
 
Dagobert fait le point sur la TV Connectée
Dagobert fait le point sur la TV ConnectéeDagobert fait le point sur la TV Connectée
Dagobert fait le point sur la TV Connectée
Dagobert
 
TV Connectée
TV ConnectéeTV Connectée
TV Connectée
Dagobert
 
Nouvelles Pages Facebook
Nouvelles Pages FacebookNouvelles Pages Facebook
Nouvelles Pages Facebook
Dagobert
 
Facebook Places : Quand la marque se "Places" dans la vie réelle 
Facebook Places : Quand la marque se "Places" dans la vie réelle Facebook Places : Quand la marque se "Places" dans la vie réelle 
Facebook Places : Quand la marque se "Places" dans la vie réelle 
Dagobert
 
Le Parcours Digital Gagnant en Point de Vente
Le Parcours Digital Gagnant en Point de VenteLe Parcours Digital Gagnant en Point de Vente
Le Parcours Digital Gagnant en Point de Vente
Dagobert
 
LUXE ET BRAND CONTENT : DES LIAISONS DANGEREUSES ?
LUXE ET BRAND CONTENT :  DES LIAISONS DANGEREUSES ?LUXE ET BRAND CONTENT :  DES LIAISONS DANGEREUSES ?
LUXE ET BRAND CONTENT : DES LIAISONS DANGEREUSES ?
Dagobert
 
Comment adapter ses contenus aux médias sociaux
Comment adapter ses contenus aux médias sociauxComment adapter ses contenus aux médias sociaux
Comment adapter ses contenus aux médias sociaux
Dagobert
 

Plus de Dagobert (16)

Digital Detox : tendance déconnexion
Digital Detox : tendance déconnexionDigital Detox : tendance déconnexion
Digital Detox : tendance déconnexion
 
Tumblr : enjeux et intérêts pour les marques
Tumblr : enjeux et intérêts pour les marquesTumblr : enjeux et intérêts pour les marques
Tumblr : enjeux et intérêts pour les marques
 
Hello Weibo
Hello Weibo Hello Weibo
Hello Weibo
 
Etat des lieux du mobile en France - Mai 2012
Etat des lieux du mobile en France - Mai 2012Etat des lieux du mobile en France - Mai 2012
Etat des lieux du mobile en France - Mai 2012
 
Instagram : enjeux et interets pour les marques
Instagram : enjeux et interets pour les marquesInstagram : enjeux et interets pour les marques
Instagram : enjeux et interets pour les marques
 
Pinterest - Enjeux et intérêts pour les marques
Pinterest - Enjeux et intérêts pour les marquesPinterest - Enjeux et intérêts pour les marques
Pinterest - Enjeux et intérêts pour les marques
 
Etat des lieux du mobile - Septembre 2011
Etat des lieux du mobile - Septembre 2011Etat des lieux du mobile - Septembre 2011
Etat des lieux du mobile - Septembre 2011
 
Social Shopping
Social ShoppingSocial Shopping
Social Shopping
 
Mobile scanning
Mobile scanningMobile scanning
Mobile scanning
 
Dagobert fait le point sur la TV Connectée
Dagobert fait le point sur la TV ConnectéeDagobert fait le point sur la TV Connectée
Dagobert fait le point sur la TV Connectée
 
TV Connectée
TV ConnectéeTV Connectée
TV Connectée
 
Nouvelles Pages Facebook
Nouvelles Pages FacebookNouvelles Pages Facebook
Nouvelles Pages Facebook
 
Facebook Places : Quand la marque se "Places" dans la vie réelle 
Facebook Places : Quand la marque se "Places" dans la vie réelle Facebook Places : Quand la marque se "Places" dans la vie réelle 
Facebook Places : Quand la marque se "Places" dans la vie réelle 
 
Le Parcours Digital Gagnant en Point de Vente
Le Parcours Digital Gagnant en Point de VenteLe Parcours Digital Gagnant en Point de Vente
Le Parcours Digital Gagnant en Point de Vente
 
LUXE ET BRAND CONTENT : DES LIAISONS DANGEREUSES ?
LUXE ET BRAND CONTENT :  DES LIAISONS DANGEREUSES ?LUXE ET BRAND CONTENT :  DES LIAISONS DANGEREUSES ?
LUXE ET BRAND CONTENT : DES LIAISONS DANGEREUSES ?
 
Comment adapter ses contenus aux médias sociaux
Comment adapter ses contenus aux médias sociauxComment adapter ses contenus aux médias sociaux
Comment adapter ses contenus aux médias sociaux
 

Introduction au Responsive web design

  • 1. INTRODUCTION AU RESP ONS IV E WEB DE SI GN DEC 2012 FÉVRIER 2012
  • 2. LE USAGES DIGITAUX ÉVOLUENT…
  • 3. … LES SUPPORTS SE MULTIPLIENT
  • 4. LES SITES DOIVENT S’ADAPTER … AUX RÉSOLUTIONS ET TAILLES D’ÉCRANS 2,73% 2,79% 4,64% 4,96% 5,88% 8,29% 8,47% 12,23% 12,4% 15,7% Libstat.com, aout 2011
  • 5. LES SITES DOIVENT S’ADAPTER … AUX RÉSOLUTIONS ET TAILLES D’ÉCRANS … AUX ORIENTATIONS
  • 6. LES SITES DOIVENT S’ADAPTER … AUX RÉSOLUTIONS ET TAILLES D’ÉCRANS … AUX ORIENTATIONS … AUX SUPPORTS
  • 7. LES SITES DOIVENT S’ADAPTER … AUX RÉSOLUTIONS ET TAILLES D’ÉCRANS … AUX ORIENTATIONS … AUX SUPPORTS … À LA PERFORMANCE
  • 8. SI L’ON NE FAIT RIEN… ON ARRIVE A CA … DES BORDS SUR LES GRANDES RESOLUTIONS … DES SITES ILLISIBLES SUR LES PETITES …OBLIGATION DE RESOLUTIONS NAVIGUER AVEC LE ZOOM
  • 9. IL FAUT DONC REPENSER LE WEBDESIGN
  • 10. …POUR ÊTRE COMPATIBLE AVEC PLUSIEURS TERMINAUX
  • 11. EST-ON OBLIGÉ D’EN ARRIVER À ÇA ? 1 SITE SMARTPHONE 1 SITE IPHONE 1 SITE IPAD 1 SITE ANDROID ANDROID ET/OU ET/OU ET/OU ET/OU 1 SITE WEB GRANDE 1 SITE WEB PETITE 1 APPLICATION 1 APPLICATION 1 APPLICATION APPLICATION RESOLUTION RESOLUTION ANDROID IPHONE IPAD ANDROID + + + + +
  • 12. PLUTÔT QUE DE CONCEVOIR DES SYSTÈMES DÉCONNECTÉS LES UNS DES AUTRES EN AUGMENTANT LE NOMBRE DE DISPOSITIFS INTERNET, CES SYSTÈMES PEUVENT ÊTRE CONSIDÉRÉS COMME LES FACETTES D’UNE EXPÉRIENCE COMMUNE GRÂCE AU RESPONSIVE DESIGN
  • 15. C’EST QUOI? IL S’AGIT D’UNE TECHNIQUE QUI PERMET DE CRÉER UN SITE QUI SOIT COMPATIBLE AVEC TOUS LES TERMINAUX, UN SITE FLUIDE POUR UNE EXPÉRIENCE UNIQUE SUR DIFFÉRENTS SUPPORTS. LE PRINCIPE DU RESPONSIVE DESIGN EST DE TENIR COMPTE EN PRIORITÉ DE L’EXPÉRIENCE UTILISATEUR.
  • 17. THE BOSTON GLOBE CE SITE EST FLUIDE… POSTE DE BUREAU (1024)
  • 18. THE BOSTON GLOBE … IL PEUT S’ADAPTER FACILEMENT SUR TABLETTE TABLETTE POSTE DE BUREAU (768PX) (1024)
  • 19. THE BOSTON GLOBE … SUR SMARTPHONE SMARTPHONE TABLETTE POSTE DE BUREAU (320PX) (768PX) (1024)
  • 20. THE BOSTON GLOBE … ET SUR UN ÉCRAN À PLUS HAUTE RÉSOLUTION SMARTPHONE TABLETTE POSTE DE BUREAU POSTE DE BUREAU (320PX) (768PX) (1024) (1600PX)
  • 21. UN AUTRE EXEMPLE : FOODSENSE SMARTPHONE TABLETTE NETBOOK POSTE DE BUREAU (320PX) (768PX) (1024) (1600PX)
  • 22. OU ENCORE : JON WHITE SMARTPHONE TABLETTE NETBOOK POSTE DE BUREAU (320PX) (768PX) (1024) (1600PX)
  • 23. MAIS COMMENT ÇA MARCHE ?
  • 24. COMMENT ÇA MARCHE ? PARLONS TECHNIQUE… 3 éléments indispensables GRILLES FLUIDES IMAGES FLEXIBLES MEDIA QUERIES Autrement dit, pour rendre un site adaptable il faut •  transformer les largeurs fixes en largeurs variables, •  gérer la taille des éléments, comme les images par exemple •  et interroger le média sur son identité (iPad, PC…) pour s’adapter à la résolution et aux usages du support.
  • 25. LE RESPONSIVE DESIGN … … Solution MIRACLE
  • 26. LES CLEFS POUR CHOISIR LE MEILLEUR RAPPORT ACCESSIBILITÉ / EXPÉRIENCE /COÛT •  Une expérience utilisateur unique sur différents terminaux •  Une ultra accessibilité : compatibilité quelque soit le support •  Coûts inférieurs à la création de plusieurs dispositifs •  Résiste aux « aléas » des évolutions de dispositifs sur-mesure MAIS ÉVIDEMMENT MOINS OPTIMISÉ QU’UN DISPOSITIF SUR-MESURE PENSÉ ET DÉVELOPPÉ INDÉPENDANDAMMENT POUR CHAQUE SUPPORT •  Ergonomie non native qui sera toujours moins aboutie qu’un dispositif spécifique pour chaque support
  • 28. QUEL ÉCO-SYSTÈME VOUS CORRESPOND ? 1 DISPOSITIF UNIQUE POUR MAXIMISER L’ACCÈS ET MINIMISER LES COÛTS ?
  • 29. QUEL ÉCO-SYSTÈME VOUS CORRESPOND ? DES DISPOSITIFS DÉDIÉS POUR MAXIMISER L’EXPÉRIENCE ?
  • 30. QUEL ÉCO-SYSTÈME VOUS CORRESPOND ? UN ÉQUILIBRE ENTRE LES DEUX ?
  • 31. PARLONS-EN ! POUR OBTENIR LES SLIDES DE CETTE PRESENTATION contact@dagobert.fr Dagobert 39 rue des Mathurins, 75008 Paris 01 56 03 99 80 contact@dagobert.fr www.dagobert.com www.facebook.com/agencedagobert www.twitter.com/agencedagobert
  • 32. contact JÉRÉMIE ABRIC SOLANGE DERREY DIRECTEUR DE LA STRATÉGIE DIGITAL PLANNER jeremie.abric@dagobert.fr solange.derrey@dagobert.fr @jabric @SolangeDerrey DÉCOUVREZ AUSSI… LES AUTRES ÉTUDES DU PLANNING STRATÉGIQUE CONTACT 39 RUE DES MATHURINS 75008 PARIS + 33 (0)1 56 03 99 80