Vous êtes sur Barbablog et tu kiffes jeune. Cherche sur ce blog...

Le webdesign en 3 couches

3 c’est mon chiffre fétiche. Ce doit être mon éducation judo-chrétienne. Toujours est-il que 3 est un chiffre qui s’applique parfaitement au webdesign.

Il y a quelques temps j’avais fait un billet sur les 3 couches du webdesign. Aujourd’hui, je persiste et je signe en exposant ma façon de travailler, laquelle, vous l’aurez deviné, se divise en 3 étapes.

Après avoir fait une belle maquette dans photoshop qui correspond aux desiderata de mon redac’ chef, du SRG, des journalistes, de la régie Pub, du DG, du DGA… Bref, lorsque tout le monde est d’accord et que nous nous prenons la main pour faire la farandole dans la joie et la bonne humeur en chantant Laisse-moi zoom zoom zang Dans ta Benz Benz Benz, là, j’abandonne ma casquette de graphiste, je chausse celle de webdesigner et je commence le boulot.

1. HTML basique et sémantique

Première étape : oublier la forme. Je crée mon gabarit html avec des tags sémantiques, des listes ul pour les menus, des div id="header" pour les entêtes de page, des blockquote pour les témoignages utilisateurs, des p, h1, h2, strong, em… J’utilise le maximum de tags sémantiques. En général je rajoute peu de div et jamais de span. Ici, je ne travaille qu’avec mon éditeur préféré (dreamweaver sur PC, PageSpinner sur Mac)

2. Habillage CSS

Là je reprend mon photoshop préféré, je me fais une sortie papier de la maquette et j’attaque le découpage de l’image. Je crée mes styles à partir des marqueurs créés dans l’étape 1 en collant au maximum à la maquette. Ici, je teste régulièrement avec IE et Firefox. J’ai en permanence Photoshop, Dreamweaver et 15 navigateurs d’ouverts.

3. DOM et javascriptt

Lorsqu’il y a des fonctionnalités un peu sympas définies dans le brief de départ (animations, scroll, chargements ajax, contrôles divers et variés, bref tout ce qu’on peut rajouter en terme d’interactivité côté client), il y a nécessairement une étape de développement javascript. Et là, miracle du webdesign moderne, je n’ai plus besoin de toucher à la page html. Je rajoute en entête les appels aux bibliothèques (l’excellente Yahoo User Interface par exemple), un appel à mon script perso <script language="javascript" src="js/monscript.js" type="text/javascript"></script> et je ne travaille plus que dans le fichier monscript.js.

Encore une fois, on voit ici toute l’importance de l’étape 1 : si on a correctement défini ses id, ses classes et ses tags, il est très facile de manipuler n’importe quel élément html sur la page avec le DOM et javascript sans rajouter de vieux bout de code tout moisi type onclick:"mafonction(mon paramètre);". Là, je travaille avec mon éditeur de texte préféré, l’indispensable Firefox et sa console javascript ainsi que que 14 autres navigateurs, dont Lynx, pour les tests d’utilisabilité [1].

Voilà mon boulot de webdesigner terminé. Je lâche le bébé à mes collègues développeurs qui se chargent de dynamiser tout ça et de connecter ce bout de html à notre CMS. Et là, une fois terminé, nous nous prenons la main pour faire la farandole dans la joie et la bonne humeur en chantant Laisse-moi zoom zoom zang Dans ta Benz Benz Benz, parce qu’on est comme ça chez CNET, on connaît les paroles de NTM par coeur.

  1. Dans cette dernière étape (et également dans les 2 autres) on ne doit surtout pas léser d’éventuels internautes farfelus qui n’auraient pas de javascript sur leur browser. On teste donc avec le plus basique de d’entre eux (les navigateurs, pas les internautes) : Lynx


Reagissez

Si ce billet vous a plu ou si vous voulez apporter des précisions, ou si vous n’êtes pas d’accord avec ce que je raconte, c’est ici qu’il faut vous manifester. Je me réserve toutefois le droit de supprimer toute contribution insultante ou qui n’aurait rien à voir avec la choucroute.

  1. J'apprends ajax en m'amusant - Barbablog - Webdesign et digressions

    […] webdesign moderne, de même qu’on sépare la présentation de la structure, on sépare […]

  2. Débat sur le process de design de pages web - Webdesign et digressions : Barbablog

    […] optimisée pour le référencement et même que si vous avez affaire à un bon il vous rajoutera une couche de javascript pour lui ajouter de l’interactivité (on est sur le web quand […]

Haut de la liste
Votre commentaire