Comment j’ai rendu mon blog responsive
L’HTML et le CSS de ce blog ont été écrits en 2006. En années Internet c’est comme si je l’avais fait il y a 3042 ans.
À cette époque l’iPhone n’existait pas encore et on ne se préoccupait pas de savoir si un site fonctionnait sur son assistant personnel ou pas. La première mention de Responsive Web Design date de 2010 (il y a 520 ans environ). Essentiellement il s’agit de transformer un site pour qu’il puisse s’adapter de façon fluide à toutes tailles d’écrans.
Transformer quelque chose qui n’a pas été pensé mobile first n’est pas chose facile, alors un vieux site au CSS croupissant, cela paraît insurmontable.
Pourtant, il ne m’a fallu ajouter que les quelques règles de style suivantes :
body { max-width: 55em; } /* (au lieu de width: 55em) */
img { max-width: 100%; }
textarea { max-width: 100%; }
Et l’HTML :
<meta name="viewport" content="width=device-width" />
Et voilà !
Si c’était facile c’est parce que le site lui-même était très simple, sans grille, en une seule colonne, avec peu de largeurs fixes. Je n’ai eu qu’à régler le problème de largeur maximale de la page et profiter du fait qu’HTML et CSS sont flexibles par défaut.
Le tout premier site, à l’origine du World Wide Web, a été remis en place à son URL originale. C’est un site encore plus simple. Sa simplicité fait qu’il fonctionne très bien sur un smartphone, de façon flexible, sans avoir à zoomer, sans avoir à ajouter des styles CSS ni des breakpoints.
Tout ça alors qu’il a été créée en 1989 (il y a 20 000 années Internet environ).
Pour avoir des sites future-friendly qui résistent aux temps et aux technologies, faites comme ce dernier, adoptez la simplicité.
1
Sunny :
(Bon OK, niveau design il reste du boulot et tout serait à refaire… mais c’est un premier pas.)
2
François Dupin :
Il y a une certaine escroquerie à resizer les images en fonction du support, non ?
3
Mauricio Sevilla :
Il n’y a pas mieux simplicité de conception, excellente conclusion, en particulier dans les domaines de SEO, où par exemple, il n’est pas recommandé de CSS3 et HTML5.
4
Sunny :
Coucou François !
Je suis obligé car mes images doivent être flexibles. Je veux que, selon la largeur du navigateur, elles puissent être de pleine largeur. Je dois laisser le navigateur la retailler car je ne vais pas créer mon image à toutes les largeurs possibles (210px, 215px, 216px, 217px, 218px, … 600px).
Certes, pour ne pas ralentir le téléchargement je devrais envoyer une image plus petite. Mais quand ? Choisir si je dois charger une image plus petite est très complexe et très flou. Cela dépends de :
– Densité de pixels du device (qui peut être de 2, 2.5, …)
– Vitesse de connection du device (qui peut être temporaire, peut changer pendant ou après le chargement)
– Largeur du navigateur (ou plutôt du bloc contenant l’image à ce moment précis)
– Changement de tailles de navigateur en cours de route (redimensionnement du navigateur, changement d’orientation)
– Le nombre de versions plus petites que l’on a disposition (et de leurs tailles diverses)
– Présence ou pas d’images mieux retaillées (art direction)
Quand on ajoute à ça des standards différents de navigateurs, les contraintes de performances actuelles (préchargement des images) et le manque de standardisation, cela devient un problème très très complexe.
Et la complexité, ça résiste mal au temps.
5
François Dupin :
Ben oui, pour moi, c’est là qu’est le vrai problème du « responsive ».
Coucou, itou.