?RESPONSIVE WEBDESIGN      @jonathanpath // #rwdiesa
RESPONSIVE WEBDESIGN      @jonathanpath // #rwdiesa
RESPONSIVE WEBDESIGNLE DESIGN QUI S’ADAPTE A TOUTES LES SITUATIONS (OU PAS)                 @jonathanpath // #rwdiesa
DEFINITIONVrai ou Faux ? Le responsive design consiste à faireen sorte qu’un site puisse s’afficher correctement sur        ...
DEFINITIONVrai ou Faux ? Le responsive design consiste à faireen sorte qu’un site puisse s’afficher correctement sur        ...
DEFINITION           Un site responsive est potentiellement capable             de se transformer en un site adapté pour :...
ATTENTIONAvant d’être des stars du responsive,  soyons des stars du HTML/CSS       @jonathanpath // #rwdiesa
MAUVAIS EXEMPLEUn site responsive qui aurait mieux valut ne pas l’être                  @jonathanpath // #rwdiesa
MAUVAIS EXEMPLEUn site qui aurait mieux valut être responsive ?  Lundi 6 novembre au soir, je recherche «Obama» sur Google...
1. STATISTIQUES     Pour savoir pourquoi, à quel niveau et dans quels cas faire du responsive                    Les stati...
1.1 TAILLES ET APPAREILS              De plus en plus de tailles d’écran différents1366x768                              10...
1.2 MOBILEComment accédons-nous au web?  59%   Monde                             34%                             Franceuti...
1.2 MOBILE                      Quelle plateforme pour surfer ?   9%                   32%                         30%    ...
1.2 MOBILE                                  Futur prometteur?       Mobinautes                      Internautes           ...
1.2 MOBILE                  Equipement et connexions des français 65M                55M             26M               19M...
1.2 MOBILEPart de marché smartphones des constructeurs en France Constructeurs                       Marché smartphone    ...
1.2 MOBILE               Part de marché des navigateurs mobiles                                                           ...
1.2 MOBILE                       Lieux d’utilisation du smartphone en FranceOn peut imaginer l’utilisateur comme 1 œil & 1...
1.2 MOBILESatisfaction relative à la consultation de sites web sur un smartphone     Il y a des sites que j’ai carrément a...
1.2 MOBILE               M-commerce     53%       Monde                                 39%                               ...
1.2 MOBILE                                Web vs Applications                                                             ...
1.2 MOBILE     Attention à bien interpréter les statistiques Ce n’est pas parce qu’il y a beaucoup de mobinautesqu’il vont...
1.3 TABLETTES          Haute croissance en France                                          3 millions                     ...
1.3 TABLETTES                                 Comportements         70%                                              57%  ...
1.3 TABLETTES               T-commerce en France   40%                                      50%achètent en ligne          ...
2. MOBILE FIRSTL’essor du mobile a déclenché l’approche du responsive webdesign                       @jonathanpath // #rw...
2.1 EXIGENCES                        Cela vaut le coup d’optimiser 4s max                                                 ...
2.2 CONNEXIONS MOYENNES         En France en 2012                                            (métro, campagne, wifi)       ...
2.3 CAS PRATIQUE  Temps de chargement de la version mobile face à la version bureau2x plus long       2x plus long        ...
2.3 GARDER L’ESSENTIELUne fois que les gens utilisent la version mobile, il nest pas rare quils réclament que la version d...
2.3 GARDER L’ESSENTIEL   On commence un site en par pensant aux contraintes mobile                                        ...
2.3 MOBILE FIRST    Exemple avec Flickr    @jonathanpath // #rwdiesa
2.4 RESPONSIVE OU PAS ?                Analyse de sites / Battles 1 contre 1Facebook        SmashingMagazine              ...
2.4 RESPONSIVE OU PAS ?                          Battles 1 contre 1- définir l’utilisateur mobile/tablette type :• Comment ...
2.5 ERGONOMIE MOBILEC’est vous les experts / proposez une version mobile par groupes de 4       - Carte de france interact...
2.5 NOUVEAU PROCESS de création de maquettes design / wireframesRESPONSIVE  DATING             @jonathanpath // #rwdiesa
PROJETSPremière approche@jonathanpath // #rwdiesa
PROJETde création de maquettes design / wireframes- Blog de recettes de cuisine- Site institutionnel d’une startup qui cré...
Prochain SlideShare
Chargement dans…5
×

Responsive webdesign-introduction

4 971 vues

Publié le

1 commentaire
4 j’aime
Statistiques
Remarques
  • Un bon souvenir de ce cours splendide, dont le professeur a été un un superbe guide. #wafaa
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
Aucun téléchargement
Vues
Nombre de vues
4 971
Sur SlideShare
0
Issues des intégrations
0
Intégrations
3 401
Actions
Partages
0
Téléchargements
44
Commentaires
1
J’aime
4
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Responsive webdesign-introduction

    1. 1. ?RESPONSIVE WEBDESIGN @jonathanpath // #rwdiesa
    2. 2. RESPONSIVE WEBDESIGN @jonathanpath // #rwdiesa
    3. 3. RESPONSIVE WEBDESIGNLE DESIGN QUI S’ADAPTE A TOUTES LES SITUATIONS (OU PAS) @jonathanpath // #rwdiesa
    4. 4. DEFINITIONVrai ou Faux ? Le responsive design consiste à faireen sorte qu’un site puisse s’afficher correctement sur ordinateurs, tablettes et mobiles. @jonathanpath // #rwdiesa
    5. 5. DEFINITIONVrai ou Faux ? Le responsive design consiste à faireen sorte qu’un site puisse s’afficher correctement sur ordinateurs, tablettes et mobiles. On peut faire mieux @jonathanpath // #rwdiesa
    6. 6. DEFINITION Un site responsive est potentiellement capable de se transformer en un site adapté pour : IE6 MobilesLunettes Google Tablettes TV Aveugles tout en gardant la même url @jonathanpath // #rwdiesa
    7. 7. ATTENTIONAvant d’être des stars du responsive, soyons des stars du HTML/CSS @jonathanpath // #rwdiesa
    8. 8. MAUVAIS EXEMPLEUn site responsive qui aurait mieux valut ne pas l’être @jonathanpath // #rwdiesa
    9. 9. MAUVAIS EXEMPLEUn site qui aurait mieux valut être responsive ? Lundi 6 novembre au soir, je recherche «Obama» sur Google. Le premier résultat est un article de TF1, je clique, et là... @jonathanpath // #rwdiesa
    10. 10. 1. STATISTIQUES Pour savoir pourquoi, à quel niveau et dans quels cas faire du responsive Les statistiques suivantes sont extraites de différentes études ou outils de statistiquessur le mobile, les tablettes et les internautes en France et dans le monde. De ce fait, il pourrait y avoir certaines disparités. @jonathanpath // #rwdiesa
    11. 11. 1.1 TAILLES ET APPAREILS De plus en plus de tailles d’écran différents1366x768 1024x768 1280x800 1280x768 1680x1050 1920x1080 1440x900 320x480 1600x900 1680x1050 768x1024 Dans le monde entier - Source : W3Counter @jonathanpath // #rwdiesa
    12. 12. 1.2 MOBILEComment accédons-nous au web? 59% Monde 34% Franceutilisent leur mobile comme unique source Internet Source : Inmobi @jonathanpath // #rwdiesa
    13. 13. 1.2 MOBILE Quelle plateforme pour surfer ? 9% 32% 30% 29%Surtout via PC Autant via PC que mobile Surtout via mobile Uniquement via mobile Uniquement en France - Source : Inmobi @jonathanpath // #rwdiesa
    14. 14. 1.2 MOBILE Futur prometteur? Mobinautes Internautes Et ensuite?2015 1,9 2015 1,6 milliard 2013 Mobinautes > Internautes milliard2009 1,4 milliard 800 millions 2009 Dans le monde entier - Source : DCI @jonathanpath // #rwdiesa
    15. 15. 1.2 MOBILE Equipement et connexions des français 65M 55M 26M 19M 13M Mobile Smartphone Mobinautes Mobinautes très actifsPopulation 85% 40% 29% 20% Valeurs en millions - Source : Analyse de l’agence Dagobert / ARCEP / Médiamétrie @jonathanpath // #rwdiesa
    16. 16. 1.2 MOBILEPart de marché smartphones des constructeurs en France Constructeurs Marché smartphone Samsung 27,3 % Apple 25,2 % Nokia 15,8 % Source : ComScore 2012 @jonathanpath // #rwdiesa
    17. 17. 1.2 MOBILE Part de marché des navigateurs mobiles ...Monde 22% 21% 20% 11% 26%France 37% 2% 46% 1% 14% Source : DCI (Monde) - StatCounter (France) @jonathanpath // #rwdiesa
    18. 18. 1.2 MOBILE Lieux d’utilisation du smartphone en FranceOn peut imaginer l’utilisateur comme 1 œil & 1 pouce (une bébé dans la main, en train de faire les courses...) -Luke Wroblewsi / Mobile FirstDomicile Travail Déplacement Magasin Restaurant Café Transports Cabinet Aéroport Ecole Source : Our Mobile Planet 2012 @jonathanpath // #rwdiesa
    19. 19. 1.2 MOBILESatisfaction relative à la consultation de sites web sur un smartphone Il y a des sites que j’ai carrément arrêté de visiter sur mobile tellement c’est la galère. -Anonyme, discussion de couloir 19% 36% 29% 14% 3% Pas du tout Pas vraiment Indifférent Satisfait Tout à fait Source : Our Mobile Planet 2012 @jonathanpath // #rwdiesa
    20. 20. 1.2 MOBILE M-commerce 53% Monde 39% Francedes internautes ont acheté en ligne via leur mobile en mai 2012 Source : Inmobi @jonathanpath // #rwdiesa
    21. 21. 1.2 MOBILE Web vs Applications ...Part des Utilisateurs Twitter 14% 8% 7% 4% Web iPhone Blackberry Autres qui accèdent au réseau sur Mobile Source : Livre Mobile First @jonathanpath // #rwdiesa
    22. 22. 1.2 MOBILE Attention à bien interpréter les statistiques Ce n’est pas parce qu’il y a beaucoup de mobinautesqu’il vont aller visiter tous les sites que vous allez faire @jonathanpath // #rwdiesa
    23. 23. 1.3 TABLETTES Haute croissance en France 3 millions 1.5 millions440 0002010 2011 2012 Source : GFK @jonathanpath // #rwdiesa
    24. 24. 1.3 TABLETTES Comportements 70% 57% des utilisateurs l’utilisent des utilisateurs l’utilisent dans leur litpendant qu’ils regarde la télé Source : GFK @jonathanpath // #rwdiesa
    25. 25. 1.3 TABLETTES T-commerce en France 40% 50%achètent en ligne préfèrent acheter sur tablettes chaque mois que sur ordinateur Source : GFK @jonathanpath // #rwdiesa
    26. 26. 2. MOBILE FIRSTL’essor du mobile a déclenché l’approche du responsive webdesign @jonathanpath // #rwdiesa
    27. 27. 2.1 EXIGENCES Cela vaut le coup d’optimiser 4s max 12s le temps que 60% le temps desont prêts à attendre chargement moyen 1 seconde de chargement en plus -10% de pages vues Source : StrangeLoop @jonathanpath // #rwdiesa
    28. 28. 2.2 CONNEXIONS MOYENNES En France en 2012 (métro, campagne, wifi) débit très variable 4.8 Mb/s 2,5 Mb/s Source : Akamai 2012 @jonathanpath // #rwdiesa
    29. 29. 2.3 CAS PRATIQUE Temps de chargement de la version mobile face à la version bureau2x plus long 2x plus long 1.5x plus long Egalité Responsive Pas d’adaptations Pas d’adaptations Version mobile Egalité 1.5x plus long 3x plus rapide Egalité Version mobile Responsive Version mobile Responsive Source : Tests personnels & sur Akamai @jonathanpath // #rwdiesa
    30. 30. 2.3 GARDER L’ESSENTIELUne fois que les gens utilisent la version mobile, il nest pas rare quils réclament que la version de bureau soit "aussi simple" - Luke Wroblewsi dans le livre Mobile First @jonathanpath // #rwdiesa
    31. 31. 2.3 GARDER L’ESSENTIEL On commence un site en par pensant aux contraintes mobile Solutions Contraintes Focus sur lesTemps de chargement fonctionnalités les plus long plus importantes écrans petits Zones cliquables plus grandes Pas d’effet de survol Ergonomie inspirée des applications @jonathanpath // #rwdiesa
    32. 32. 2.3 MOBILE FIRST Exemple avec Flickr @jonathanpath // #rwdiesa
    33. 33. 2.4 RESPONSIVE OU PAS ? Analyse de sites / Battles 1 contre 1Facebook SmashingMagazine Ebay Pages jaunesComment ça marche? L’équipe Wikipédia FNACLouis Vuitton Météo France Microsoft Awwwards @jonathanpath // #rwdiesa
    34. 34. 2.4 RESPONSIVE OU PAS ? Battles 1 contre 1- définir l’utilisateur mobile/tablette type :• Comment l’utilisateur peut-il arriver sur le site?• Quelles informations cherche-t-il?• Où peut-il être? (dans les transports? dans son lit? au boulot?)- quelles sont les adaptations qui ont été faites ?- est-ce que les bons choix ont été fait ? @jonathanpath // #rwdiesa
    35. 35. 2.5 ERGONOMIE MOBILEC’est vous les experts / proposez une version mobile par groupes de 4 - Carte de france interactive : http://leboncoin.fr/ - Carousel : http://www.sho.com/sho/home - Tarifs : http://wufoo.com/signup/ - Formulaire avancé : https://order.emporiumpies.com/ - Galerie photo : http://500px.com/team - Fenêtre modale : http://gonefreelancing.com/ (cliquer sur “more”) - Liste de pays : http://www.ikea.com/ @jonathanpath // #rwdiesa
    36. 36. 2.5 NOUVEAU PROCESS de création de maquettes design / wireframesRESPONSIVE DATING @jonathanpath // #rwdiesa
    37. 37. PROJETSPremière approche@jonathanpath // #rwdiesa
    38. 38. PROJETde création de maquettes design / wireframes- Blog de recettes de cuisine- Site institutionnel d’une startup qui créé des applications Facebook- Site d’actualité- Site plein écran pour une marque avec un effet parallaxe- Portfolio- Site d’un évènement web- Site d’un photographe- Site d’un restaurant- Application avec géolocalisation- Site d’un film- Site d’une association- Ou de votre choix? @jonathanpath // #rwdiesa

    ×