Un site web responsive en une heure ?

Un site web responsive en une heure ?

AgoraCMS 2012, Paris

Adf4ff2212aea06456ca3c3bca95c0db?s=128

Raphael Goetter

May 14, 2013
Tweet

Transcript

  1. 1.

    Raphaël Goetter Raphaël Goetter UN SITE WEB RESPONSIVE EN UNE

    HEURE ? UN SITE WEB RESPONSIVE EN UNE HEURE ? TOP CHRONO ! TOP CHRONO !
  2. 3.

    EN UNE HEURE, VOUS AVEZ DIT ? EN UNE HEURE,

    VOUS AVEZ DIT ? SANS DECONNER ?! SANS DECONNER ?!
  3. 5.

    AVANT DE SE LANCER... Analyser et comprendre le code existant

    (template de CMS qui « laisse à désirer ») Identifier les problèmes en amont (largeurs, iframes, points de rupture) Faire un choix de maquette et d'ergo Faire un choix de navigation Penser « Performance Web » Penser « HD » et « Retina » Analyser et comprendre le code existant (template de CMS qui « laisse à désirer ») Identifier les problèmes en amont (largeurs, iframes, points de rupture) Faire un choix de maquette et d'ergo Faire un choix de navigation Penser « Performance Web » Penser « HD » et « Retina » → COMPTER 2 à 4 jours → COMPTER 2 à 4 jours
  4. 6.

    AVANT DE SE LANCER...(bis) Connaître le contexte mobile (navigateurs, moteurs,

    spécificités) Comprendre le Viewport (device-width, pixel-ratio, viewport) Maîtriser les CSS3 Media Queries (et HTML / CSS en général) Connaître le contexte mobile (navigateurs, moteurs, spécificités) Comprendre le Viewport (device-width, pixel-ratio, viewport) Maîtriser les CSS3 Media Queries (et HTML / CSS en général) → COMPTER... pfiouu → COMPTER... pfiouu
  5. 7.

    PENDANT Produire du code pour écrans multiples (tablettes, smartphones, écrans

    larges) Produire des adaptations pour 2 orientations Penser « tactile » (positions et largeurs des zones tactiles) Prendre en compte tous les gabarits (home, page-type, formulaires, galeries, etc.) Ajouter / développer du JavaScript dédié Produire du code pour écrans multiples (tablettes, smartphones, écrans larges) Produire des adaptations pour 2 orientations Penser « tactile » (positions et largeurs des zones tactiles) Prendre en compte tous les gabarits (home, page-type, formulaires, galeries, etc.) Ajouter / développer du JavaScript dédié → COMPTER... 3 à 6 jours → COMPTER... 3 à 6 jours
  6. 8.

    ET APRES ? CORRIGER ! Bugs sur tableaux HTML, iframes,

    vidéos, etc. Bugs CSS ou JS inexpliqués (table-cell, flexbox, événements, touch) Modifier le HTML si nécessaire Problèmes de compatibilités (anciens Android, Blackberry, etc.) Bugs sur tableaux HTML, iframes, vidéos, etc. Bugs CSS ou JS inexpliqués (table-cell, flexbox, événements, touch) Modifier le HTML si nécessaire Problèmes de compatibilités (anciens Android, Blackberry, etc.) → COMPTER... 1 à 3 jours → COMPTER... 1 à 3 jours
  7. 9.

    TOTAL ? TOTAL ? ENTRE 6 ET 12 JOURS ENTRE

    6 ET 12 JOURS … OU PLUS … OU PLUS
  8. 10.

    LE RESPONSIVE, C'EST PAS DU « BONUS » ! LE

    RESPONSIVE, C'EST PAS DU « BONUS » ! ÇA SE DÉCIDE EN AMONT ÇA SE DÉCIDE EN AMONT
  9. 12.

    Zoom nécessaire Navigation aveugle Design « cassé » Mauvaise expérience

    Zoom nécessaire Navigation aveugle Design « cassé » Mauvaise expérience AgoraCMS « mobile »
  10. 14.
  11. 17.

    La surface d'affichage Les Media Queries CSS3 Box-sizing pour vous

    servir Halte aux débordements La surface d'affichage Les Media Queries CSS3 Box-sizing pour vous servir Halte aux débordements NOTIONS INDISPENSABLES
  12. 22.

    LARGEUR PHYSIQUE « VRAIS PIXELS » « VRAIS PIXELS »

    iPhone 3 : 320px Samsung Galaxy S : 480px iPhone 4, iPhone 5 : 640px Nokia Lumia 920 : 768px iPad, iPad Mini : 768px Sony Xperia Z : 1080px Samsung Galaxy S4 : 1080px iPad 3 : 1536px iPhone 3 : 320px Samsung Galaxy S : 480px iPhone 4, iPhone 5 : 640px Nokia Lumia 920 : 768px iPad, iPad Mini : 768px Sony Xperia Z : 1080px Samsung Galaxy S4 : 1080px iPad 3 : 1536px
  13. 23.

    « DEVICE-WIDTH » « FAUX PIXELS » « FAUX PIXELS

    » iPhone 3, 4, 5 : 320px Nokia Lumia 920 : 320px Sony Xperia Z : 360px Samsung Galaxy S4 : 360px iPad 1, 2, 3 : 768px iPad mini : 768px iPhone 3, 4, 5 : 320px Nokia Lumia 920 : 320px Sony Xperia Z : 360px Samsung Galaxy S4 : 360px iPad 1, 2, 3 : 768px iPad mini : 768px
  14. 24.

    « VIEWPORT » « FAUX PIXELS » « FAUX PIXELS

    » Safari : 980px Opera mini : 850px Opera mobile : 980px Android 1 : 800px Android 2 : 800px Android 3 : 800px Android 4 : 980px IE mobile : 1024px Safari : 980px Opera mini : 850px Opera mobile : 980px Android 1 : 800px Android 2 : 800px Android 3 : 800px Android 4 : 980px IE mobile : 1024px
  15. 26.

    640px 640px 640px 640px IPHONE4 IPHONE4 320px 320px 320px 320px

    980px 980px 980px 980px DEVICE-WIDTH DEVICE-WIDTH VIEWPORT VIEWPORT LARGEUR PHYSIQUE LARGEUR PHYSIQUE
  16. 27.

    IPHONE4 IPHONE4 320px 320px 320px 320px 980px 980px 980px 980px

    DEVICE-WIDTH DEVICE-WIDTH VIEWPORT VIEWPORT Niveau de zoom : 320 / 980 = 0,33x Niveau de zoom : 320 / 980 = 0,33x
  17. 29.

    <meta name="viewport" content="width=device-width"> LA BALISE META « VIEWPORT » Largeur

    de fenêtre = device-width Largeur de fenêtre = device-width
  18. 30.

    <meta name="viewport" content="width=device-width"> LA BALISE META « VIEWPORT » <meta

    name="viewport" content="initial-scale=1.0"> Niveau de zoom = 1 Niveau de zoom = 1
  19. 31.

    VIEWPORT DANS LES SPECS @viewport { width: device-width; zoom: 1;

    } Déjà reconnu par Opera, IE Mobile 10 et Firefox mobile (ex. @-o-viewport) Déjà reconnu par Opera, IE Mobile 10 et Firefox mobile (ex. @-o-viewport)
  20. 32.

    Niveau de zoom : 320 / 320 = 1x Niveau

    de zoom : 320 / 320 = 1x <meta name="viewport" content="initial-scale=1.0">
  21. 34.

    <link rel="stylesheet" href="styles.css" media="screen" > Pas de Media Queries ?

    Pas de Media Queries ? Tous les écrans sont ciblés Tous les écrans sont ciblés
  22. 35.

    <link rel="stylesheet" href="mobile.css" media="screen and (max-width: 640px)" > <link rel="stylesheet"

    href="styles.css" media="screen" > Avec Media Queries : Avec Media Queries : Sont ciblés : écrans dont la fenêtre est inférieure ou égale à 640 pixels Sont ciblés : écrans dont la fenêtre est inférieure ou égale à 640 pixels
  23. 36.

    @media (max-width:640px) { body { width: auto; } } Dans

    un fichier CSS : Dans un fichier CSS : Ici : plein de styles CSS dédiés aux petits écrans Ici : plein de styles CSS dédiés aux petits écrans
  24. 37.

    body { background-color: black; } @media (max-width:640px) { body {

    background-color: red; } } @media (max-width:640px) { body { width: auto; } } Dans un fichier CSS : Dans un fichier CSS : En pratique : En pratique :
  25. 38.

    Fenêtre de largeur supérieure à 640px Fenêtre de largeur supérieure

    à 640px Moins de 640px Moins de 640px RÉSULTAT
  26. 39.

    MEDIA QUERIES width / height largeur / hauteur de viewport

    device-width / device-height largeur / hauteur du device orientation : portrait ou landscape etc. width / height largeur / hauteur de viewport device-width / device-height largeur / hauteur du device orientation : portrait ou landscape etc. 9 9
  27. 46.

    MA JOLIE BOÎTE div { width: 50%; padding: 1em; border-width:

    1px; } 50%+2em+2px 50%+2em+2px 50%+2em+2px 50%+2em+2px 50%+2em+2px 50%+2em+2px 50%+2em+2px 50%+2em+2px
  28. 47.

    BOX-SIZING ! div { width: 50%; padding: 1em; border-width: 1px;

    } 50% 50% 50% 50% 50% 50% 50% 50% box-sizing: border-box;
  29. 53.

    ET LES IMAGES ? Tiens, c'est tout cassé là !

    Tiens, c'est tout cassé là !
  30. 54.

    ET LES IMAGES ? img { max-width : 100%; height

    : auto; } /* IE8 uniquement (bugfix) */ .ie8 img { width : auto; } Une bordure sur l'image ? Une bordure sur l'image ?
  31. 59.

    ANALYSE DE L'EXISTANT 6 fichiers CSS différents 42 fois «

    font-size » 70 fois « !important » 30 fois « margin: 0 » 27 fois « padding: 0 » 23 fois « position » 30 fois « float » 12 fois « clear » 6 fichiers CSS différents 42 fois « font-size » 70 fois « !important » 30 fois « margin: 0 » 27 fois « padding: 0 » 23 fois « position » 30 fois « float » 12 fois « clear » OK, no stress ! OK, no stress !
  32. 61.

    FEUILLE DE STYLES MOBILE Appliquée seulement sur écrans de largeur

    de fenêtre au maximum de 960 pixels Appliquée seulement sur écrans de largeur de fenêtre au maximum de 960 pixels
  33. 63.

    RETOUR À LA NORMALE Pour les éléments problématiques : •

    width : auto • height : auto • float : none • position : static • padding : 0 • margin : 0 • etc.
  34. 74.

    TEMPS PASSÉ Production effective de CSS = 6 heures Compréhension

    de l'existant = 4 heures Réflexions en amont, stratégie = 4 heures Corrections bugs, anomalies = 1 heure Production effective de CSS = 6 heures Compréhension de l'existant = 4 heures Réflexions en amont, stratégie = 4 heures Corrections bugs, anomalies = 1 heure → TOTAL : 15 heures → TOTAL : 15 heures
  35. 75.

    NON TRAITÉ Seule la Homepage a été prise en compte

    Ergonomie : le minimum vital a été fait pour smartphones et tablettes Aucune adaptation faite pour les différentes orientations Performances web : aucun effort n'a été fait dans ce domaine Écrans « HD » et « Retina » : aucune prise en compte Seule la Homepage a été prise en compte Ergonomie : le minimum vital a été fait pour smartphones et tablettes Aucune adaptation faite pour les différentes orientations Performances web : aucun effort n'a été fait dans ce domaine Écrans « HD » et « Retina » : aucune prise en compte → à « l'arrache » → à « l'arrache »
  36. 79.

    Photos, illustrations : flickr.com (licence CC) Police : Delicious Delicious

    Heavy Icones et pictos : iconfider.net findicons.com icônes Star Wars : Everaldo Coelho (free) icônes noires : Token Dark par Brsev (free) Photos, illustrations : flickr.com (licence CC) Police : Delicious Delicious Heavy Icones et pictos : iconfider.net findicons.com icônes Star Wars : Everaldo Coelho (free) icônes noires : Token Dark par Brsev (free) CRÉDITS