Pour faire suite à l'article expliquant ce que veut dire responsive, je vous propose ici la partie technique, pour les créateurs de sites, pour travailler en mode responsive.
A une époque, faute de technologies permettant de faire du responsive webdesign, on faisait des sites "statiques" avec beaucoup de dimensions "fixes", en pixels. Il y a eu une période également où il était courant de proposer un site web et un site mobile qui étaient indépendants en termes de développement / design / contenu / gestion... Ça se fait toujours, MAIS...
Il n'y a pas qu'une seule méthode pour obtenir un site responsive, mais je vais essayer de résumer ici les méthodes que j'utilise personnellement.
Sans rentrer dans les détails, la balise viewport permet de correctement interprêter le niveau de zoom en prenant en compte la surface réelle de l'écran, sa résolution, la largeur de l'écran, bref, indispensable pour que ça fonctionne bien, à insérer dans la partie HTML head de vos fichiers du site :
Côté HTML on va privilégier les éléments de type block div et éviter, là où c'est possible, l'utilisation de table
Pour pouvoir poursuivre avec un exemple concret, voici un exemple en HTML / CSS pour créer 4 colonnes que je vais détailler ensuite : exemple.html
Côté CSS, on va dimensionner nos éléments en utilisant essentiellement des pourcentages et le moins possible (voir pas du tout) de largeurs fixes en pixels. Par exemple, si on veut afficher 4 colonnes côte à côte, de même largeur, on va mettre la width à 25%.
Dans l'exemple j'enlève 14px pour palier aux espaces blancs d'1px qui se forment à cause des espaces entre les div en html et 10px pour la marge interne "padding" de 5px de chaque côté à l'intérieur des div. D'autres solutions pour le problème des espaces blancs ICI.
Les polices seront exprimées en em (exit les px !), cette unité permet aux polices d'écritures de s'adapter en fonction de l'élément parent.
J'utilise les max-width, car avec les tailles exprimées en pourcentage, on peut aussi avoir des éléments ou des pages beaucoup trop larges si on est sur de grands écrans. En définissant par exemple le conteneur de ma page avec width : 100%; max-width : 1400px , je m'assure que mon conteneur ne sera jamais plus grand que 1400px. Et si c'est en-dessous de 1400px, ça prendra toute la largeur (100%) de la page.
Astuce pour centrer les éléments qui ne prennent pas toute la largeur ou qui ont une max-width, en css : margin : 0 auto;
Avec ces premiers règlagles vous avez déjà sur votre site des éléments "liquides", mais l'adaptation va être possible jusqu'à un certain point.
Si l'écran est petit, les 4 colonnes à 25% vont être si fines qu'elles ne pourront pas afficher un contenu lisible.
Alors on va tester en modifiant la taille de la fenêtre de notre navigateur et déterminer là où ça commence à coincer : on va donc définir les breakpoints (points de rupture) dont on a besoin.
Il y a une liste de breakpoints communs, qui permettent surtout de savoir à quel type d'écran on a à faire. A nous de voir ensuite, à partir de quel breakpoint il faut donner de nouvelles règles CSS pour que tout soit toujours lisible.
Vous trouverez une liste des breakpoints les plus courants ici
Avec mon exemple des 4 colonnes, en fonction de leur contenu, si on voit qu'à partir de 1024px (= écran de tablette) ça devient un peu trop petit, on va indiquer au css que l'on préfère que les boites div fassent 50% de largeur et ainsi s'affichent sur 2 rangées, à partir du breakpoint screen 1024px :
Et si on voit que sur mobile, ça coince à nouveau, on mettra nos 4 boites les unes en-dessous des autres, en fixant leur largeur à 100% :
Si vous reprenez mon fichier exemple.html vous pouvez jouer sur la taille de la fenêtre pour voir que les boites s'adaptent à 2 niveaux de breakpoint, grâce aux codes ci-dessus.
Il y a peut-être des éléments du site dans sa version "desktop" qui ne sont pas indispensables, voir même qui polluent un peu la clarté, lorsque l'on passe sur tablette ou mobile. On va pouvoir choisir de ne pas afficher certains éléments. Tout simplement avec du display:none; sur les éléments, à l'intérieur de la media query souhaitée.
De la même manière on peut choisir d'afficher des éléments qui ne sont pas présents dans la version desktop. Le menu de navigation en est un bon exemple. Pour ma part je fais souvent 2 menus (un mobile et un desktop), l'un qui est en display:none et l'autre en display:block et inversement à partir du breakpoint souhaité.
Un petit code qui va bien :
Avec ça, les images ne pourront pas dépasser leur conteneur et ne dépasseront pas leur taille disponible (elles ne tenteront pas de s'afficher plus grandes qu'elles ne le sont dans l'absolu).
Ensuite dans leur élément les images peuvent avoir un taille exprimée en pourcentage, 100% de leur conteneur ou 80% ou peu importe ce qu'il vous faut. On va éviter les tailles exprimées en pixels, parce que ça pourrait ne plus coller en fonction de la taille d'écran et par conséquent sortir du conteneur, voir de la page.
Après, le traitement des images reste un peu complexe, entre qualité d'image (haute résolution) et temps de chargement (résolution optimisée, réduite), à vous de choisir les solutions qui correspondent le mieux aux besoins de votre site.
Vous pouvez par exemple utiliser les média queries pour donner des largeurs fixes à vos images, voir même prévoir plusieurs images avec des tailles différentes qui seront appelées à chaque breakpoint, mais attention, il faudra gérer l'appel des images en CSS, c'est plus facile à faire avec des "background-image" qu'avec des "img src" qui est du HTML.
Pour terminer d'optimiser on peut ajouter éventuellement des adaptations conditionnelles en JavaScript ou jQuery.
Le menu est encore un bon exemple, le menu mobile souvent est "caché", on a juste le bouton pour l'ouvrir et cette ouverture va se faire grâce à du jQuery.
On peut appliquer cette idée sur d'autres éléments qui prennent trop de place sur l'écran mobile, mais pour lesquels on veut pouvoir laisser la possibilté d'ouvrir, fermer (hide / show ou slideDown / slideUp)...
Ce code est en jQuery, à mettre donc dans un fichier .js ou entre des balises script :
On peut également inclure un script qui va pas mal et qui permet, si vous avez vraiment trop de changements à faire entre la version mobile et desktop (mais normalement ce n'est pas le but), de détecter l'appareil de l'utilisateur et ainsi inclure ou non certains éléments ou effets, en PHP.
Il s'agit de mobiledetect
Ce script peut notamment vous permettre de gérer les images insérées en HTML avec img src, puisque celles-ci ne seront pas gérables en CSS (voir la partie Traitement des images).
Je n'ai pas encore totalement pris cette habitude, mais il est devient très intéressant de concevoir pour le web en pensant "mobile first" et "enrichissement progressif".
On va d'abord produire un site pour mobile (dans mon article précédent sur le responsive webdesign on peut voir que le mobile est de plus en plus utilisé) et on viendra seulement après ajouter des éléments ou adapter les éléments pour les écrans plus grands. Ceci dans le but de faciliter l'accessibilité, la compatibilité et de rester dans une performance des pages optimisée.
Evidemment c'est difficile de rentrer dans les détails en un seul article, n'hésitez pas à me contacter si vous avez des questions ou besoin d'un éclairage sur certains points. Je vous propose également en téléchargement 2 fichiers html et css pour débuter et mieux comprendre mon exemple avec les 4 colonnes responsives.
Le fichier HTML est ici : exemple.php
(Pour voir le code source HTML vous pouvez faire un clic-droit, afficher le code source.)
Et le fichier CSS ici : exemple.css
