SlideShare uma empresa Scribd logo
1 de 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

Mais conteúdo relacionado

Mais procurados

Personal branding ou marketing de soi à l’ére du social selling v2.2
Personal branding ou marketing de soi à l’ére du social selling   v2.2Personal branding ou marketing de soi à l’ére du social selling   v2.2
Personal branding ou marketing de soi à l’ére du social selling v2.2Mehdi CHAHI
 
Strategies de communication
Strategies de communicationStrategies de communication
Strategies de communicationBrahim Zoghlami
 
Cours d'initiation à Photoshop
Cours d'initiation à PhotoshopCours d'initiation à Photoshop
Cours d'initiation à Photoshopaymenli
 
Communication institutionnelle
Communication institutionnelleCommunication institutionnelle
Communication institutionnelleClubPromoGC
 
La réalité augmentée d'un point de vue e-marketing
La réalité augmentée d'un point de vue e-marketingLa réalité augmentée d'un point de vue e-marketing
La réalité augmentée d'un point de vue e-marketingJean-Marc Seigneur
 
Masterclass transformation digitale du travail
Masterclass transformation digitale du travailMasterclass transformation digitale du travail
Masterclass transformation digitale du travailSarah Mezidi
 
Transformation digitale
Transformation digitaleTransformation digitale
Transformation digitaleAmeniBoubaker2
 
La communication interpersonnelle
La communication interpersonnelleLa communication interpersonnelle
La communication interpersonnelleAhmed Mesellem
 
Transformation Digitale et Performances Economiques des Banques en Zone CEMAC
Transformation Digitale et Performances Economiques  des Banques en Zone CEMACTransformation Digitale et Performances Economiques  des Banques en Zone CEMAC
Transformation Digitale et Performances Economiques des Banques en Zone CEMAClancedafric.org
 
Creation d'entreprise agence de communication
Creation d'entreprise  agence de communicationCreation d'entreprise  agence de communication
Creation d'entreprise agence de communicationFakhr-Eddine Gabsi
 
Personal branding, créer sa marque personnelle, surveiller on e-reputation.
Personal branding, créer sa marque personnelle, surveiller on e-reputation.Personal branding, créer sa marque personnelle, surveiller on e-reputation.
Personal branding, créer sa marque personnelle, surveiller on e-reputation.Amelie Nollet
 
Chapitre iii le processus entrepreneurial
Chapitre iii le processus entrepreneurialChapitre iii le processus entrepreneurial
Chapitre iii le processus entrepreneurialKoffi KONAN
 
Présentation intelligence artificielle et domaines d'applications - #DigitalT...
Présentation intelligence artificielle et domaines d'applications - #DigitalT...Présentation intelligence artificielle et domaines d'applications - #DigitalT...
Présentation intelligence artificielle et domaines d'applications - #DigitalT...Digital Thursday
 
Communication interne en entreprise
Communication  interne en entrepriseCommunication  interne en entreprise
Communication interne en entrepriseLotfi Mekouar
 
Présentation sur la gamification
Présentation sur la gamificationPrésentation sur la gamification
Présentation sur la gamificationgroyperras
 

Mais procurados (20)

Personal branding ou marketing de soi à l’ére du social selling v2.2
Personal branding ou marketing de soi à l’ére du social selling   v2.2Personal branding ou marketing de soi à l’ére du social selling   v2.2
Personal branding ou marketing de soi à l’ére du social selling v2.2
 
Strategies de communication
Strategies de communicationStrategies de communication
Strategies de communication
 
Cours d'initiation à Photoshop
Cours d'initiation à PhotoshopCours d'initiation à Photoshop
Cours d'initiation à Photoshop
 
Communication institutionnelle
Communication institutionnelleCommunication institutionnelle
Communication institutionnelle
 
La réalité augmentée d'un point de vue e-marketing
La réalité augmentée d'un point de vue e-marketingLa réalité augmentée d'un point de vue e-marketing
La réalité augmentée d'un point de vue e-marketing
 
Langage corporel
Langage corporelLangage corporel
Langage corporel
 
Formation e-commerce
Formation e-commerceFormation e-commerce
Formation e-commerce
 
Cours e-marketing
Cours e-marketingCours e-marketing
Cours e-marketing
 
Cours fondement du multimedia
Cours fondement du multimediaCours fondement du multimedia
Cours fondement du multimedia
 
Masterclass transformation digitale du travail
Masterclass transformation digitale du travailMasterclass transformation digitale du travail
Masterclass transformation digitale du travail
 
Transformation digitale
Transformation digitaleTransformation digitale
Transformation digitale
 
La communication interpersonnelle
La communication interpersonnelleLa communication interpersonnelle
La communication interpersonnelle
 
L innovation
L innovationL innovation
L innovation
 
Transformation Digitale et Performances Economiques des Banques en Zone CEMAC
Transformation Digitale et Performances Economiques  des Banques en Zone CEMACTransformation Digitale et Performances Economiques  des Banques en Zone CEMAC
Transformation Digitale et Performances Economiques des Banques en Zone CEMAC
 
Creation d'entreprise agence de communication
Creation d'entreprise  agence de communicationCreation d'entreprise  agence de communication
Creation d'entreprise agence de communication
 
Personal branding, créer sa marque personnelle, surveiller on e-reputation.
Personal branding, créer sa marque personnelle, surveiller on e-reputation.Personal branding, créer sa marque personnelle, surveiller on e-reputation.
Personal branding, créer sa marque personnelle, surveiller on e-reputation.
 
Chapitre iii le processus entrepreneurial
Chapitre iii le processus entrepreneurialChapitre iii le processus entrepreneurial
Chapitre iii le processus entrepreneurial
 
Présentation intelligence artificielle et domaines d'applications - #DigitalT...
Présentation intelligence artificielle et domaines d'applications - #DigitalT...Présentation intelligence artificielle et domaines d'applications - #DigitalT...
Présentation intelligence artificielle et domaines d'applications - #DigitalT...
 
Communication interne en entreprise
Communication  interne en entrepriseCommunication  interne en entreprise
Communication interne en entreprise
 
Présentation sur la gamification
Présentation sur la gamificationPrésentation sur la gamification
Présentation sur la gamification
 

Destaque

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
 

Destaque (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
 

Semelhante a 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
 

Semelhante a 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
 

Mais 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
 

Mais 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