Traduction
Débuter en programmation web - sommaire
Débuter en programmation web - recherche
L'auteur : Patrick Darcheville
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Une page web doit apparaitre correctement non seulement sur un grand écran (PC de bureau) mais aussi sur un petit écran (tablette et smartphone).
On dit qu'elle doit être "responsive". Il s'agit d'un vrai challenge car un écran d'ordinateur de bureau c'est plus de 1600 pixels de large alors
qu'un smartphone c'est 300 pixels de large en mode portrait ...
Compte tenu de l'importance croissante de l'internet mobile (internet à partir de terminaux mobiles : smartphones et tablettes)
chaque page de votre site doit s'afficher correctement tant sur grands écrans (ordinateur portable ou de bureau) que sur petites écrans (tablettes et
smartphone) c'est ce qu'on appelle le responsive design.
Pour certains grands sites il y a en fait deux URL : une correspondant aux terminaux fixes et une autre pour les mobiles.
Une solution plus simple à mettre en oeuvre consiste à proposer des règles de style différentes en fonction de la largeur en pixels de l'écran. C'est la
technique des requêtes de média ou "media queries".
Dans le paragraphe suivant vous trouverez une présentation rapide des media queries.
Mais pour l'instant je vous communique seulement quelques astuces ...
Dans l'exemple ci-dessus je n'utilise pas encore les "media queries" mais tout simplement quelques astuces.
Le code HTML :
Donc ce code HTML nous avons cependant une nouveauté (par rapport à vos connaissances) : la balise meta viewport.
L'instruction meta viewport est fondamentale dans le cadre du Web mobile et doit être insérée dans la partie HEAD de chaque page !
Les écrans des mobiles sont beaucoup plus étroits que les écrans de PC (seulement quelques centaines de pixels de large). Pour s'adapter, les navigateurs mobiles affichent par défaut le site en "dézoomant" ce qui permet d'avoir un aperçu de l'ensemble de la page mais alors c'est tellement écrit petit que ça en devient illisible ! Cette zone d'affichage simulée est appelée le viewport.
Attention la valeur du viewport ne dépend pas du terminal mais du navigateur mobile installé sur ce terminal. Ainsi le viewport est compris entre 800 pixels (Android 3) et 980 (Android 4 et Safari).
Prenons un exemple concret. Votre iphone 6 a une largeur utile d'écran de 377 par 667 pixels ; le viewport possible est de 980 pixels grâce au
navigateur safari mobile qui est installé.
Mais grâce à l'instruction meta name ="viewport" content= "width=device-width, user-scalable=yes"
la largeur effective ne sera plus que 377 pixels ou (667 selon l'orientation).
Deux grandes divisions : NAV & ARTICLE qui sont descendants directs de BODY.
Les éléments a, img, p, h1 & h2 sont des enfants de NAV ou de ARTICLE
Notez l'emploi des classes pour les images.
Notez la règle "reset" dans la feuille de style pour annuler des formatages par défaut : taille de texte, marge, soulignement, etc.
Il s'agit de la règle de style ayant le sélecteur *
Naturellement vous devez ensuite rédéfinir des marges et des taille de texte pour les titres en particulier.
Ici taille du texte de H1 est ici égal à 140% de la taille de référence (16px) = 16 * 140% = 22px et pour H2 ...
La hauteur de ligne dans H1 & H2 = 30px et comme le texte est toujours centré verticalement dans sa ligne, le titre sera
parfaitement centrée verticalement dans sa boite !
C'est ce que vous devez retenir pour l'instant du responsive design : ne pas exprimer les largeurs des boites et images en pixels
mais en pourcentages !
En effet un grand écran c'est parfois 1600 pixels de large alors qu'un smartphone c'est seulement à peine 400 pixels (en orientation "portrait").
Donc pour prendre un seul exemple, une image de 500px de large serait affichée correctement sur un grand écran mais sur un écran d'ordiphone
il va y avoir "dézoomage" de la page pour afficher l'image dans toute sa largeur donc le texte aura une taille minuscule et sera illisible !
Le rendu du code dans un cadre :
Affichez la page à partir de votre PC puis cliquez sur l'icône "niveau inférieur" pour simuler l'affichage sur un petit écran
Ajustez ensuite la largeur avec la double flèche.
Pour une page "responsive" nous allons cette fois utiliser un nouvel outil CSS : les "media queries".
La solution précédente n'est pas totalement satisfaisante. Ainsi la largeur de la page égale à celle de la fenêtre c'est bien sur un petit écran
mais sur un écran de PC de bureau c'est pas très ergonomique pour le regard ; on a du mal à lire le texte sur les bords.
Il faudrait plutôt une page se limitant à 1000 pixels de large
avec ce type de terminal.
Grâce aux requêtes de média on peut faire ce genre de règlage dans la feuille de style.
En effet on peut tester la largeur de la fenêtre (du viewPort). Donc on peut parfaitement coder en CSS la règle suivante, à titre d'exemple :
Si largeur de la fenêtre >= 1000px alors largeur page = 1000px sinon largeur page = largeur fenêtre.
Reprenons le thème précédent.
Le code HTML sera inchangé. Les seuls changements concernent la feuille de style.
Il y a aussi d'autres petits ajustements pour petits écrans.
Grande nouveauté : @media (max-width: 800px) . Il s'agit d'une 'media query'.
Le rendu du code dans un cadre :
Affichez la page à partir de votre PC puis cliquez sur l'icône "niveau inférieur" pour simuler l'affichage sur un petit écran
Ajustez ensuite la largeur avec la double flèche.
Il y a tout un chapitre sur les media queries dans le tutoriel CSS.