Responsive webdesign - devenir un #rwd master

5 557 vues

Publié le

0 commentaire
2 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
5 557
Sur SlideShare
0
Issues des intégrations
0
Intégrations
3 650
Actions
Partages
0
Téléchargements
83
Commentaires
0
J’aime
2
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
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Responsive webdesign - devenir un #rwd master

    1. 1. RESPONSIVE WEBDESIGN POUR DEVENIR #RWD MASTER @jonathanpath // #rwdiesa
    2. 2. 1. MISE EN PAGE HTML/CSS ESSENTIEL POUR ABORDER LE #RWD @jonathanpath // #rwdiesa
    3. 3. 1.1 DISPLAY La basedisplay: block;<div> <p> <form> <header> <footer> <section> ...Prend la largeur du conteneur display: inline; display: inline-block; <span> <a> ... Semblable à «inline», mais on peut attribuer une Prend la largeur du contenant. hauteur et une largeur. On ne peut peut pas attribuer de hauteur ni de largeur. Compatible avec IE8+ On peut simuler display:inline-block; sur IE6 et 7 avec *display: inline; *zoom: 1; @jonathanpath // #rwdiesa
    4. 4. 1.1 DISPLAY Mise en page avec display: inline-block;.bloc .bloc .bloc.bloc .bloc .bloc .bloc { display: inline-block; /* <=IE7 Hack */ Note : entre chaque bloc, il y a un espace qui correspond à *display: inline; un caractère. Il y a plusieurs méthodes pour faire disparaître *zoom: 1; cet espace. (article creativjuiz / alsacreation) width: 33%; margin-bottom: 1em; } @jonathanpath // #rwdiesa
    5. 5. 1.1 DISPLAY Centrer un bloc width: 1140px; margin: 0 auto;auto display: block; auto Mettre un margin auto à gauche et à droite d’un bloc (display: block;) permet de le centrer. @jonathanpath // #rwdiesa
    6. 6. 1.2 FLOAT Sortir du flux display: block;float: left; float: right; Le conteneur ne prend pas en compte la hauteurPlace le bloc à gauche Place le bloc à droite des blocs flottants qu’il contient @jonathanpath // #rwdiesa
    7. 7. 1.2 FLOAT Sortir du flux display: block;float: left; float: right;Place le bloc à gauche Place le bloc à droite clear: both; Solution n°1 Mettre un élement «block» en dessous des élements flottants à l’intérieur du conteneur. @jonathanpath // #rwdiesa
    8. 8. 1.2 FLOAT .clearfix:after { content: "."; Sortir du flux display: block; clear: both; heigth: 0; visibility: hidden; } .clearfixfloat: left; float: right;Place le bloc à gauche Place le bloc à droite élément généré par .clearfix:after Solution n°2 Mettre une class clearfix sur le contenant. Meilleure solution parce que cela évite de rajouter un élément HTML qui n’a pas de valeur sémantique. @jonathanpath // #rwdiesa
    9. 9. 1.2 FLOAT Mise en pagefloat: left; display: block;width: 300px; margin-left: 350px; @jonathanpath // #rwdiesa
    10. 10. 1.3 MODELE DE BOITES width + padding + border + margin Margin Border Padding .bloc Width / Height width @jonathanpath // #rwdiesa
    11. 11. 1.3 MODELE DE BOITES Se simplifier la vie avec CSS3*{ Margin -webkit-box-sizing: border-box; -moz-box-sizing: border-box; Border box-sizing: border-box;} Padding .bloc Width / Height Largeur du .bloc = width width @jonathanpath // #rwdiesa
    12. 12. 1.4 LA SUITE SUR Learnlayout.com @jonathanpath // #rwdiesa
    13. 13. 2. TAILLE D’ECRAN VIEWPORT / DEVICE-WIDTH @jonathanpath // #rwdiesa
    14. 14. 2.1 VIEWPORT Taille de fenêtre virtuelleNavigateur Viewport Taille réelle Bureau Taille de la fenêtre Taille de la fenêtre Mobile 980px 320px / 480px @jonathanpath // #rwdiesa
    15. 15. 2.1 VIEWPORT Paramètres Paramètre Signification Initial-scale Zoom par défautMaximum-scale Zoom maximumUser-scalable=no Interdit à l’utilisateur de zoomer @jonathanpath // #rwdiesa
    16. 16. 2.1 VIEWPORT Combo breakerQue s’affiche-t-il sur un mobile si je mets ce code sur un site? <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> @jonathanpath // #rwdiesa
    17. 17. 2.1 VIEWPORT Combo breaker <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">Je ne pourrais pas zoomer, et je pourrais uniquement visualiser la largeur et la hauteur du viewport. @jonathanpath // #rwdiesa
    18. 18. 2.2 DEVICE-WIDTH Largeur déclarée par le périphérique• iPhone 3 et iPhone 4 ont le même device-width, malgré leur densité de pixels différente• Le device-width sur Safari est identique en portrait qu’en paysage (!)• Un device-width (en portrait) peut globalement varier de 240px à 640px selon les terminaux mobiles En savoir plus : Lire l’excellent article de @goetter sur ce sujet @jonathanpath // #rwdiesa
    19. 19. 2.3 VIEWPORT=DEVICE-WIDTH nous permet de faire du #rwd <meta name=“viewport“ content=“width=device-width“> La fenêtre virtuelle est égale à la largeur de l’écran. @jonathanpath // #rwdiesa
    20. 20. 3. MEDIA QUERIES VIVE CSS3 @jonathanpath // #rwdiesa
    21. 21. 3.1 ATTRIBUT MEDIA Quelles significations à votre avis? Type Signification screenhandheldembossedprojection tty tv print all @jonathanpath // #rwdiesa
    22. 22. 3.1 ATTRIBUT MEDIA depuis CSS2 Type Signification screen écranshandheld mobile ou petite tailleembossed Imprimantes brailleprojection projecteurs tty terminal tv téléviseur print Impression all tout @jonathanpath // #rwdiesa
    23. 23. 3.1 ATTRIBUT MEDIA depuis CSS2Malheureusement, handeld est ignoré par la grande majorité des navigateurs mobiles Il faut donc utiliser “screen“ comme pour les navigateurs bureaux @jonathanpath // #rwdiesa
    24. 24. 3.2 CRITERES peut être préfixé par min- et max- pour les valeurs numériques Critère Signification color support de la couleur (bits/pixel) aspect-ratio ratio du périphérique de sortie (par exemple 16/9)device-aspect-ratio densité de pixels : utile pour détecter “Retina“ device-height hauteur déclarée par le périphérique device-width largeur déclarée par le périphérique height hauteur du viewport width largeur du viewport @jonathanpath // #rwdiesa
    25. 25. 3.3 ORIENTATION Paysage ou Portrait @media (orientation: portrait) ou @media (orientation: landscape)• permet de savoir si un périphérique est en vue portrait ou paysage• Certains navigateurs l’implémentent également en calculant le ratio hauteur/largeur• Petit détail : il y a une faille sur iPhone : si on active la console d’erreurs, on ne peut plus détecter l’orientation Navigateurs qui supportent le paramètre orientation sur caniuse.com @jonathanpath // #rwdiesa
    26. 26. 3.4 EXEMPLES Améliorations ou dégradation progressive ? Mobile firstDégradation progressive Amélioration progressivenav li { nav li { display: inline; display: block;} }@media (max-width: 780px) { @media (min-width: 780px) { nav li { nav li { display: block; display: inline; } }} } @jonathanpath // #rwdiesa
    27. 27. 3.5 COMPATIBILITE <= IE8• Respond.js : script javascript qui simule les medias queries pour les anciennes version d’IE• Une déclaration CSS uniquement pour <=IE8 • <!--[if lt IE 9]><link href=“IE.css“ ... ><![endif]--> • .lt-ie9 avec Boilerplate @jonathanpath // #rwdiesa
    28. 28. 4. DESIGN FLUIDEPOUR S’ADAPTER A TOUTES LES TAILLES @jonathanpath // #rwdiesa
    29. 29. 4.1 PIXEL Exemple de changement de largeurVersion Largeur du siteClassique 960pxTablette 768px Mobile 320px Exemple : Thème Focus @jonathanpath // #rwdiesa
    30. 30. 4.1 PIXEL Avantages / Inconvénients + - - beaucoup de points de rupture- maitrise des changements - beaucoup d’espace sur les côtés dans certains cas - difficulté de changer la taille des polices @jonathanpath // #rwdiesa
    31. 31. 4.2 EM Taille de typographie relative1em = Taille de police par défaut du navigateur em : Taille de police relative au parent Exemple : Thème Focus @jonathanpath // #rwdiesa
    32. 32. 4.2 EM Si on veut agrandir la taille de la typographie sur mobile ?px : On change la taille pour em : On change la taillechaque déclaration une seule fois@media (max-width: 480px) { p{ font-size: 20px; } @media (max-width: 480px) { h1 { body { font-size: 30px; font-size: 1.5em; } } h2 { } font-size: 25px; }} @jonathanpath // #rwdiesa
    33. 33. 4.2 EM On mélange «em» et px ? «Padding» sur un bouton ?«Width» sur la largeur d’un site ? @jonathanpath // #rwdiesa
    34. 34. 4.2 EM On mélange «em» et px ? «Padding» sur un bouton : NON La taille d’une marge intérieure est relative à la typographie«Width» sur la largeur d’un site : POSSIBLE La largeur d’un site dépend de la taille de la fenêtre @jonathanpath // #rwdiesa
    35. 35. 4.2 EM On mélange «em» et px ? Certains préfèrent tout définir en «em» pour avoir une cohérence globale. D’autres de garder la largeur des blocs en «px»pour éviter de faire de nombreux calculs et d’avoir des valeurs telles que 34.4293837em @jonathanpath // #rwdiesa
    36. 36. 4.2 % Exploiter toute la largeur exploitable 2 colonnes qui font la même taillefloat: left; float: right;width: 48%; width: 48%; Taille de la fenêtre Exemple : CSSgrid @jonathanpath // #rwdiesa
    37. 37. 4.2 % Définir les points de rupture D’après le critère 10.11 de accessiwebfaire en sorte que les colonnes aient maximum 80 caractères par ligne @jonathanpath // #rwdiesa
    38. 38. 5. OPTIMISERET SURTOUT, PENSER MOBILE FIRST @jonathanpath // #rwdiesa
    39. 39. 5.1 OPMISATIONS GENERALES POUR SITES BUREAUX• Javascript en bas de page• CSS en haut de page• Compression en 1 seul fichier CSS et javascript• Utilisation de sprites CSS et/ou encoder en data URI• Optimisation de la taille des images (shmushit, jpegmini, imageoptim)• Réduire la taille du DOM• Favoriser CSS3 tant que possible (mais attention aux dégradés et aux animations infinies) Détail sur Developer Yahoo performances @jonathanpath // #rwdiesa
    40. 40. 5.2 OPMISATIONS MOBILE CHARGEMENT D’IMAGES PLUS PETITES/* Grands écrans */ /* Petits écrans */@media (min-width: 481px) { @media (max-width: 480px) { .img { .img { background-image: url(‘img-big.jpg’); background-image: url(‘img-small.jpg’); } }} }/* Penser à faire le chargement des grandes images pour <=IE8 */.lt-ie9 .img { background-image: url(‘img-big.jpg’);} Voir l’article correspondant sur goetter.fr @jonathanpath // #rwdiesa
    41. 41. 5.2 OPMISATIONS MOBILE NE PAS AFFICHER LES IMAGES DONT ON A PAS BESOIN/* display: none; sur le contenant et non sur l’image */@media (max-width: 480px) { .bloc <img> .bloc { display: none; }} Voir l’article correspondant sur le blog de @theystolemynickname @jonathanpath // #rwdiesa
    42. 42. 5.2 OPMISATIONS MOBILE JAVASCRIPT• Ne pas mettre les scripts js en bas de page pour iOS : Safari mobile attend de les charger pour afficher la page (marche par contre sur Android) • Solution : Chargement asynchrone de JS : lazyloadlight• Se passer de jQuery & jQuery mobile si possible @jonathanpath // #rwdiesa
    43. 43. 5.2 OPMISATIONS MOBILE MOBILE FIRSTPenser premièrement à la version mobile permet d’avoir une version minimaliste avec peu d’information et de code à charger. Il n’y a pas meilleure optimisation. @jonathanpath // #rwdiesa
    44. 44. 6. ADAPTIONS ECRANS TOUCH TOUCH PAS A TOUT @jonathanpath // #rwdiesa
    45. 45. 6.1 PAS D’EFFET DE SURVOL QUE DES CLICS• A chaque fois que vous pensez à un effet de survol, réfléchissez à l’alternative écran «touch».• Important de désactive les effets de survol sur les écrans «touch» pour éviter d’avoir l’effet qui s’active au clic @jonathanpath // #rwdiesa
    46. 46. 6.2 FIXER AVEC PRECAUTION• Si vous avez une menu fixe sur version bureau, désactiver le sur mobile, ou sinon, faites un hack pour que cela fonctionne• Attention à la petite taille d’écran des mobiles @jonathanpath // #rwdiesa

    ×