SlideShare une entreprise Scribd logo
1  sur  32
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

Présentation web marketing
Présentation web marketingPrésentation web marketing
Présentation web marketingWajdi Zeidi
 
l'impact du marketing digital sur la performance des entreprises: Cas d'un ec...
l'impact du marketing digital sur la performance des entreprises: Cas d'un ec...l'impact du marketing digital sur la performance des entreprises: Cas d'un ec...
l'impact du marketing digital sur la performance des entreprises: Cas d'un ec...Fethi Ferhane
 
Les points essentiels d'une stratégie de communication par Philippe Limbourg
Les points essentiels d'une stratégie de communication par Philippe LimbourgLes points essentiels d'une stratégie de communication par Philippe Limbourg
Les points essentiels d'une stratégie de communication par Philippe LimbourgJ'ai besoin de com
 
E-reputation : quels indicateurs de mesure ?
E-reputation : quels indicateurs de mesure ?E-reputation : quels indicateurs de mesure ?
E-reputation : quels indicateurs de mesure ?Camille A
 
Strategie de-communication
Strategie de-communicationStrategie de-communication
Strategie de-communicationTerrassone Tanou
 
powerpoint de la séance1.2 E-commerce and Internet Marketing
powerpoint de la séance1.2 E-commerce and Internet Marketingpowerpoint de la séance1.2 E-commerce and Internet Marketing
powerpoint de la séance1.2 E-commerce and Internet Marketingsciafrique
 
Ppt memoire de fin d'étude Marketing de contenu Master 1
Ppt memoire de fin d'étude Marketing de contenu Master 1Ppt memoire de fin d'étude Marketing de contenu Master 1
Ppt memoire de fin d'étude Marketing de contenu Master 1rokaya lachgar
 
ChatBots et intelligence artificielle arrivent dans les banques
ChatBots et intelligence artificielle arrivent dans les banques ChatBots et intelligence artificielle arrivent dans les banques
ChatBots et intelligence artificielle arrivent dans les banques LINAGORA
 
Mémoire E-réputation
Mémoire E-réputationMémoire E-réputation
Mémoire E-réputationSabrina Debris
 
Communiquer sur les réseaux sociaux auprès de la génération Y
Communiquer sur les réseaux sociaux auprès de la génération Y Communiquer sur les réseaux sociaux auprès de la génération Y
Communiquer sur les réseaux sociaux auprès de la génération Y Julia Marras
 
Présentation oral GRC : Etudes des stratégies de fidélisation chez la FNAC
Présentation oral GRC : Etudes des stratégies de fidélisation chez la FNACPrésentation oral GRC : Etudes des stratégies de fidélisation chez la FNAC
Présentation oral GRC : Etudes des stratégies de fidélisation chez la FNACMélanie Viardot
 
Stratégie de communication Le coq sportif
Stratégie de communication Le coq sportifStratégie de communication Le coq sportif
Stratégie de communication Le coq sportifMarion IIM
 
communiquer-reseaux-sociaux.pptx
communiquer-reseaux-sociaux.pptxcommuniquer-reseaux-sociaux.pptx
communiquer-reseaux-sociaux.pptxolivier
 
M&m's - Stratégie de communication
M&m's - Stratégie de communicationM&m's - Stratégie de communication
M&m's - Stratégie de communicationCassandra Chatainier
 
8 Conseils pour Réussir votre Communication Digitale
8 Conseils pour Réussir votre Communication Digitale8 Conseils pour Réussir votre Communication Digitale
8 Conseils pour Réussir votre Communication DigitaleAgoralink
 

Tendances (20)

Soutenance mémoire master digital marketing
Soutenance mémoire master digital marketingSoutenance mémoire master digital marketing
Soutenance mémoire master digital marketing
 
Présentation web marketing
Présentation web marketingPrésentation web marketing
Présentation web marketing
 
Le mix marketing a l'heure du digital
Le mix marketing a l'heure du digitalLe mix marketing a l'heure du digital
Le mix marketing a l'heure du digital
 
l'impact du marketing digital sur la performance des entreprises: Cas d'un ec...
l'impact du marketing digital sur la performance des entreprises: Cas d'un ec...l'impact du marketing digital sur la performance des entreprises: Cas d'un ec...
l'impact du marketing digital sur la performance des entreprises: Cas d'un ec...
 
Les points essentiels d'une stratégie de communication par Philippe Limbourg
Les points essentiels d'une stratégie de communication par Philippe LimbourgLes points essentiels d'une stratégie de communication par Philippe Limbourg
Les points essentiels d'une stratégie de communication par Philippe Limbourg
 
E-reputation : quels indicateurs de mesure ?
E-reputation : quels indicateurs de mesure ?E-reputation : quels indicateurs de mesure ?
E-reputation : quels indicateurs de mesure ?
 
Strategie de-communication
Strategie de-communicationStrategie de-communication
Strategie de-communication
 
L'E-REPUTATION
L'E-REPUTATIONL'E-REPUTATION
L'E-REPUTATION
 
powerpoint de la séance1.2 E-commerce and Internet Marketing
powerpoint de la séance1.2 E-commerce and Internet Marketingpowerpoint de la séance1.2 E-commerce and Internet Marketing
powerpoint de la séance1.2 E-commerce and Internet Marketing
 
Ppt memoire de fin d'étude Marketing de contenu Master 1
Ppt memoire de fin d'étude Marketing de contenu Master 1Ppt memoire de fin d'étude Marketing de contenu Master 1
Ppt memoire de fin d'étude Marketing de contenu Master 1
 
ChatBots et intelligence artificielle arrivent dans les banques
ChatBots et intelligence artificielle arrivent dans les banques ChatBots et intelligence artificielle arrivent dans les banques
ChatBots et intelligence artificielle arrivent dans les banques
 
Adopteunmec Stratégie digitale
Adopteunmec  Stratégie digitaleAdopteunmec  Stratégie digitale
Adopteunmec Stratégie digitale
 
Mémoire E-réputation
Mémoire E-réputationMémoire E-réputation
Mémoire E-réputation
 
Communiquer sur les réseaux sociaux auprès de la génération Y
Communiquer sur les réseaux sociaux auprès de la génération Y Communiquer sur les réseaux sociaux auprès de la génération Y
Communiquer sur les réseaux sociaux auprès de la génération Y
 
Présentation oral GRC : Etudes des stratégies de fidélisation chez la FNAC
Présentation oral GRC : Etudes des stratégies de fidélisation chez la FNACPrésentation oral GRC : Etudes des stratégies de fidélisation chez la FNAC
Présentation oral GRC : Etudes des stratégies de fidélisation chez la FNAC
 
Stratégie de communication Le coq sportif
Stratégie de communication Le coq sportifStratégie de communication Le coq sportif
Stratégie de communication Le coq sportif
 
communiquer-reseaux-sociaux.pptx
communiquer-reseaux-sociaux.pptxcommuniquer-reseaux-sociaux.pptx
communiquer-reseaux-sociaux.pptx
 
M&m's - Stratégie de communication
M&m's - Stratégie de communicationM&m's - Stratégie de communication
M&m's - Stratégie de communication
 
8 Conseils pour Réussir votre Communication Digitale
8 Conseils pour Réussir votre Communication Digitale8 Conseils pour Réussir votre Communication Digitale
8 Conseils pour Réussir votre Communication Digitale
 
Mesurer Efficacité Campagne Pub
Mesurer Efficacité Campagne PubMesurer Efficacité Campagne Pub
Mesurer Efficacité Campagne Pub
 

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 heureRaphaë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éthodologieekino
 
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 YearsDagobert
 
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 demainDagobert
 
Réinvestir le corps
Réinvestir le corpsRéinvestir le corps
Réinvestir le corpsDagobert
 
Les marques coach
Les marques coachLes marques coach
Les marques coachDagobert
 
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 COMMUNICATIONDagobert
 
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 2015Vanksen
 
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 marqueDagobert
 
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 VenteDagobert
 
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 marquesDagobert
 
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 digitaleNicolas 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 sourceThomas Choppy
 
Mobile 201 - Conférence 2012
Mobile 201 - Conférence 2012Mobile 201 - Conférence 2012
Mobile 201 - Conférence 2012MBA 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 PieraertsLa FeWeb
 
Responsive Web Design : back to basics
Responsive Web Design : back to basicsResponsive Web Design : back to basics
Responsive Web Design : back to basicsAlinoa
 
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 MobileRaphaël Goetter
 
Responsive web design new14
Responsive web design new14Responsive web design new14
Responsive web design new14FullSIX 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 solutionROK75
 
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éjourJohanna Wiss
 
Revolution Mobile @Web2day
Revolution Mobile @Web2dayRevolution Mobile @Web2day
Revolution Mobile @Web2dayAlexandre 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
 
Présentation développement application Android
Présentation développement application AndroidPrésentation développement application Android
Présentation développement application Androidambin_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éconnexionDagobert
 
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 marquesDagobert
 
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 2012Dagobert
 
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 marquesDagobert
 
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 marquesDagobert
 
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 2011Dagobert
 
Social Shopping
Social ShoppingSocial Shopping
Social ShoppingDagobert
 
Mobile scanning
Mobile scanningMobile scanning
Mobile scanningDagobert
 
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éeDagobert
 
TV Connectée
TV ConnectéeTV Connectée
TV ConnectéeDagobert
 
Nouvelles Pages Facebook
Nouvelles Pages FacebookNouvelles Pages Facebook
Nouvelles Pages FacebookDagobert
 
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 VenteDagobert
 
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 sociauxDagobert
 

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