Le Responsive Web Design, c’est la capacité d’afficher une page Web différemment selon la taille de l’écran afin d’obtenir une expérience utilisateur optimale qu’on soit sur un PC avec un grand ou un petit écran, une tablette ou un smartphone. Pour ce faire, il est nécessaire de faire des adaptations selon la taille de l’écran. C’est ce que cette technique propose de faire.

A l’ère des abonnements mobiles illimités, la consommation Internet à partir des smartphones explose et il devient de plus en plus inacceptable d’aboutir sur un site qui n’est pas adapté à la résolution de son téléphone. Ceci devient un vrai enjeu concurrentiel. Mais se mettre au Responsive Web Design, ce n’est pas immédiat. Il y a des pour et des contres.

C’est ce que Clubic s’est attelé à identifier dans son dossier « Post PC : est-il temps d’adopter le Responsive Web Design ? » que je vous invite à découvrir.

Pour info, bien que mon blog ait bien une version adaptée aux smartphones, ce n’est pas du responsive web design. Il existe en fait deux versions différentes du site qui s’appuient sur les mêmes données, la version affichée dépendant de la taille de l’écran.

Knacss est une feuille de style CSS qui contient quelques petites règles sympathiques afin de programmer ses feuilles de styles proprement. Il est composé de règles toutes simples mais rendent bien service et semble taillé pour un site en responsive design.

L’occasion de rappeler à quel point il est important d’avoir des feuilles de styles propres dans un grand projet car lorsqu’elles ne le sont pas, la maintenance devient vite un calvaire, surtout quand les équipes changent souvent. En fait, non, ce n’est pas un si grand calvaire que ça. Il est tellement plus simple de tout dupliquer et ainsi limiter ses problèmes. Oui, mais dupliquer un code, ce n’est jamais sain et cela a toujours des conséquences.

Less et Sass sont deux autres frameworks connus de longue date qui opèrent dans le même domaine. Leur approche est un peu différente car ils proposent une extension des possibilités de CSS non reconnues par CSS lui-même. C’est en appliquant un compilateur que ces extensions sont transformées en CSS compréhensible par les navigateurs.

Pour en savoir plus, lisez le tutorial sur Alsacréations ainsi que ce petit article tiré du blog de Raphaël Goetter qui rappelle l’importance d’avoir des feuilles CSS propres, ce qui n’est pas le cas sur la majorité des grands sites, y compris Facebook. Ce blog mérite d’ailleurs d’être lu car il aborde de nombreuses autres problématiques relatives à CSS.