Hello, I’m Vinch

And this is my website.

Votre design Web est-il « responsive » ?

06/13/11

This post is more than 5 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 !

Test des propriétés CSS extraordinaires de Safari !

07/26/08

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

Cela faisait un petit temps que je voulais tester -webkit-transform et -webkit-transition, deux propriétés CSS qui fonctionnent exclusivement avec Safari (et son moteur de rendu WebKit) mais qui augurent de bonnes choses pour l’avenir du Web.

Safari

Sans plus attendre, voyez l’exemple qui vous démontrera les extraordinaires capacités de ces deux propriétés CSS (je rappelle que ça ne fonctionne qu’avec les dernières versions de Safari).

La première propriété CSS utilisée est -webkit-transform. On peut la voir à l’oeuvre quand la souris passe sur la photo :

#kelly:hover {
	-webkit-transform: scale(1.5) rotate(360deg) skew(10deg);
}

* scale permet de zoomer sur la photo. Ici, on zoome à 150%.
* rotate permet de faire une rotation sur l’image. Ici, on fait une rotation de 360°, c’est à dire un tour complet.
* skew permet de biaiser l’image et prend un angle en argument (10° ici). En chipotant un peu, cela pourrait servir à faire de la 3D…

Je ne l’ai pas fait ici mais il est également possible de faire des translations via translate.

-webkit-transition permet d’animer tout ça :

#kelly {
	(...)
	-webkit-transition: all 0.5s ease-in;
}

Elle nécessite trois arguments :

* la propriété sur laquelle porte la transition. Ici, la transition porte sur toutes les propriétés mais j’aurais très bien pu remplacer all par -webkit-transform.
* la durée de la transition en secondes.
* le type de transition (linear, ease-in, etc.)

Inspirations :

* CSS Transforms sur Surfin’ Safari
* CSS Animation sur Surfin’ Safari

Quelle est votre convention de nommage de class et id pour XHTML et CSS ?

12/13/07

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

Un petit débat qui anime quelques collègues et moi en ce moment…

* #content-block ou .content-block
* #content\_block ou .content\_block
* #contentblock ou .contentblock
* #contentBlock ou .contentBlock

Moi je préfère la première notation… Et vous ? Et surtout : pourquoi ?

Pour info, on a trouvé ça sur le Web (via Ced) :

* http://www.phpied.com/css-coding-conventions/
* http://www.brownbatterystudios.com/sixthings/2006/11/21/forming-effective-css-classes-ids/

Autre chose, même si je ne veux pas vous influencer, les gourous du Web (Jeffrey Zeldman, Eric Meyer, Shaun Inman, Douglas Bowman, Molly E. Holzschlag, Dave Shea, Tristan Nitot, etc.) semblent alterner entre la première et la troisième notation.

PS : n’empêche, quand je vois le temps qu’on a passé à discuter à ce propos (et ce n’est pas fini), je commence à comprendre combien il doit être difficile de former un gouvernement pour un pays…