Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

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 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" />

Capture de Sunfox.org sur un Nexus 5

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).

Capture d'écran du tout premier site Web, sur un smartphone

Pour avoir des sites future-friendly qui résistent aux temps et aux technologies, faites comme ce dernier, adoptez la simplicité.

Don't be the product, buy the product!

Schweinderl