Hello, I’m Vinch

And this is my website.

Votre design Web est-il « responsive » ?

06/13/11

This post is more than 6 years old. It might not reflect my current skills and convictions.

Depuis quelques années, le Web n’est plus uniquement consultable via un ordinateur personnel. En effet, l’apparition des netbooks, des smartphones et des tablettes a fait en sorte que votre site Web peut être vu par des écrans de dimensions totalement différentes ! S’assurer que votre site ne dépasse pas les 1000 pixels de large n’est plus suffisant en 2011 !

Pendant longtemps, l’unique parade a été de réaliser des sites Web spécifiques pour les smartphones avec une détection assez hasardeuse des appareils ciblés. En effet, il m’est arrivé très souvent d’obtenir la version iPhone d’un site Web sur mon iPad alors que la version « normale » serait plus opportune. En plus de souffrir de ces problèmes de détection, le travail à abattre pour réaliser ces sites Web alternatifs est assez colossal ! La logique à mettre en place est très pointilleuse, il faut faire en sorte que tous les liens fonctionnent encore et mènent vers les bonnes pages, etc.

La solution ? Rendre votre design Web responsive !

Responsive Web Design

En mai 2010, Ethan Marcotte écrivait sur ALA l’article qui jetait les bases du responsive Web design et expliquait les solutions techniques pour le mettre en place.

La technique est finalement relativement simple. Il suffit en effet d’utiliser ce qu’on appelle les media queries, apparues avec CSS3. Vous connaissez sans doute déjà les media types qui permettent, entre autres, de cibler l’écran (screen) ou l’impression (print) et d’appeler la CSS correspondante. Les media queries vont plus loin et permettent d’appliquer des régles encore plus précises.

Par exemple, si nous souhaitons cibler les devices dont la largeur d’écran est inférieure à 480 pixels, voici à quoi va rassembler l’appel de notre fichier CSS :

<link rel="stylesheet" type="text/css"
  media="screen and (max-device-width: 480px)"
  href="narrow.css" />

En combinant plusieurs appels de ce type, vous pouvez au final obtenir un design Web qui s’adaptera naturellement à la taille du navigateur du device que vous utilisez.

L’avantage par rapport aux solutions critiquées en début d’article est que nous ne touchons pas au contenu, aux URLs et à la logique générale du site Web. Seuls les fichiers CSS changent !

Quelques exemples inspirants se trouvent sur le site Media Queries (qui n’est pas un site espagnol). J’en ai retenu quelques uns :

Pour voir l’effet des media queries sur ces sites, vous pouvez réduire la largeur de la fenêtre de votre navigateur. Magique, n’est-ce pas ?

Si vous voulez aller plus loin, notre ami Ethan Marcotte vient de sortir un bouquin consacré uniquement au sujet de ce blog post ! J’achète assez rarement des bouquins techniques mais je vais sans doute faire une exception pour celui-ci :-)

Prochaine étape : rendre ce blog responsive ! Après avoir été le premier blog belge en HTML5 (oui, j’en suis fier), est-ce qu’il sera également le premier à avoir un design responsive ? Rien n’est moins sûr !

La programmation devient sociale !

06/05/11

This post is more than 6 years old. It might not reflect my current skills and convictions.

Je brise mon silence pour vous parler de deux services auxquels je m’étais inscrit il y a relativement longtemps, mais que je commence seulement à utiliser intensivement depuis quelques semaines.

Ils ont tout les deux en commun de faire de la programmation une activité sociale, même pour un développeur freelance qui ne sort jamais de chez lui.

Le premier s’appelle Forrst et on peut considérer que c’est l’équivalent de Dribbble pour les développeurs. A vrai dire, Forrst est à destination aussi bien des designers que des développeurs mais c’est évidemment ce dernier aspect qui m’intéresse le plus. Forrst permet de partager des snippets (c’est-à-dire des petits morceaux de code — mais il n’existe pas vraiment de traduction française pour ce terme) afin de les mettre à disposition de la communauté.

Au départ, j’étais réticent et je me disais que c’était sans doute un outil uniquement destiné à faire de l’autopromotion et de la branlette collective à grands coups de « Amazing work » et de « You rock » (à l’image de Dribbble → ceci est un troll) mais je me trompais. En effet, dès mes premiers posts, force fut de constater que la communauté est très active et qu’elle n’hésite pas à vous corriger si vous faites une erreur ou si vous ne faites pas une chose de la façon la plus simple et la plus efficace possible. J’ai trouvé ces échanges très enrichissants, et je les ai d’autant plus apprécié que j’ai appris de nombreuses choses grâce aux conseils et commentaires avisés des membres de Forrst. Je vous invite fortement à m’y rejoindre !

L’autre outil dont je vais vous parler, vous le connaissez sans doute déjà, et vous l’utilisez sans doute déjà depuis longtemps. Il s’agit de GitHub, la célèbre plate-forme d’hébergement et de gestion de développement de logiciels. Comme son nom l’indique, GitHub est basé sur Git, le logiciel de gestion de versions inventé par Linus Torvald, un équivalent (mais sans doute en mieux) de SVN ou MercurialJ’ai l’impression que le devéloppeur de 2011 est presque obligé d’être sur GitHub. La plupart des projets open source, qu’on pouvait autrefois trouver sur SourceForge ou Google Code, semblent désormais avoir trouvé leur place sur GitHub. Cette plate-forme dispose en effet d’un aspect social que je trouve très intéressant. En effet, outre observer (watch) des projets et suivre (follow) des programmeurs, la fonctionnalité la plus intéressante de GitHub consiste à pouvoir « forker » un projet, c’est-à-dire en créer une branche (pour améliorer un aspect du code ou pour corriger un bug) qui pourra ensuite être fusionnée avec le projet principal (je vulgarise à peine, n’hésitez pas à corriger mes propos).

A noter que GitHub peut également servir à héberger des projets propriétaires de façon sécurisée, moyennant paiement. Via Gist, il permet également de partager des snippets avec vos amis programmeurs (plus ou moins de la même façon que Forrst). Une dernière fonctionnalité que je trouve également relativement intéressante est Pages qui vous donne la possibilité d’héberger les pages Web de vos projets directement sur GitHub (via un sous-domaine).

Vous trouverez mes modestes premiers projets GitHub par ici. Je vous invite aussi (surtout) à aller voir les projets de Fabien Potencier (l’homme à l’origine du framework PHP Symfony), qui m’a indirectement motivé à utiliser plus intensivement GitHub. Ses lignes de code sont de la pure poésie et vont sans doute en réconcilier plus d’un avec le PHP !