Was ? What ? Les chroniques d'un design ne vous rappellent rien ? C'est un en fait une série de billets consacrés à l'organisation et à la conception d'un design. Pour rattraper les épisodes ratés, voici le lien, garantis sans DRM et totalement gratuit!

Nous y sommes, la fin du bout est proche. Dans ma tête, le plus dur est certainement fait, mais le plus énervant reste à faire. Le design est prêt, nous avons un fichier regroupant tous les calques permettant de constituer le design que l'on va découper. La structure du design était déjà prise en considération précédemment, donc le codage sera beaucoup plus simple à faire que si l'on avait attendu le dernier moment pour faire des choix assez capitaux.

Le codage des sites webs s'effectue avec le langage HTML ou xHTML pour le contenu, et en utilisant des pincées de CSS pour la forme. Ces deux "langages" sont assez simples à acquérir, de nombreux sites variés et performants peuvent vous apprendre leurs bases. Néanmoins, notamment en CSS, de nombreuses techniques existent pour faciliter votre codage, celles-ci sont plus spécifiques à certaines conditions, et vous les retiendrez avec un peu d'habitude.

HTML...

Le codage du contenu est assez simple la plupart du temps, vous avez en tête les différents blocs à afficher, et vous savez pertinemment s'il faut utiliser une "id", ou une "class". Pour vous aider à faire cette étape, pour ma part, j'utilise souvent un croquis, sur lequel je positionne les blocs à afficher, leur imbrication. C'est un conseil qui peut souvent être utile lorsque vous codez de temps à autre, un rapide coup d'oeil sur la feuille et vous comprenez immédiatement le fonctionnement de la page. Ce croquis utilise de nombreuses couleurs, le rouge pour le nom de divisions, le vert pour les dimensions des divisions, et le noir/crayon pour certaines propriétés qui seraient utiles à retenir, ou l'emplacement du fond imagé.
A ce moment, n'hésitez pas à accorder à une réelle importance à la sémantique (c'est-à-dire au sens que vous accordez aux balises utilisés), et la propreté de votre code. Vous pouvez ensuite valider votre site par les validateurs W3C, ce qui est toujours utile, bien que être valide ne veut pas dire être sémantique.

Et CSS...

Visualiser votre site web, votre design est loin d'être en place, le contenu est bien présent mais il manque la forme. Les feuilles de styles en cascade sont très simples à utiliser, mais leur interprétation, qui diffère selon les navigateurs, gène terriblement les "apprentis" développeurs que nous sommes. En effet, les navigateurs assez anciens comme IE 6 ne prennent pas en compte de la même manière les propriétés que le fait Firefox, ou Opera. C'est assez inquiétant, heureusement, il existe divers méthodes pour contourner ces failles, mais il faut avouer que la durée du debuggage est souvent très relative à la complexité du design. Pour ma part, c'est le point à insister lors du développement, c'est malgré tout le minimum syndical que notre site soit lisible dans de bonnes conditions dans la plupart des navigateurs utilisés. Quelques conseils pour arriver à vos fins:

  • Si vous commencez une nouvelle page, vous pouvez utiliser des reset styles, pour éviter que des élements prennent en compte des propriétés qui n'étaient pas présentes sur la feuille de style. Encore une fois, le maitre mot est organisation, revenez au bon vieux papier crayon, tout est en votre disposition pour faire une bonne adaptation si vous êtes clairs dans votre tête.
  • Les hacks CSS sont un excellent moyen pour combler les différences d'interprétations des navigateurs, n'hésitez pas à les utiliser.
  • Des tableaux uniquement pour des informations tabulaires, et surtout pas pour coder votre page. Plusieurs avantages majeurs privilégient cette méthode, la sémantique est respectée et le poids de la page vous dit merci.
  • Enfin, informez-vous! Vous êtes peut-être en train de chercher une méthode pour faire des cadres en arrondis par exemple, recherchez sur internet ces techniques, elles sont nombreuses, et vous permettront d'économiser du temps, mais aussi de ne pas coder des designs trop longs à charger.

Tout un art

Le design est maintenant découpé, et adapté à votre contenu, vous avez pratiquement fini. Il vous reste à optimiser la page au maximum (tous les utilisateurs ne possèdent pas une superbe connexion), et à travailler encore plus votre contenu.

Et n'oubliez pas, le contenu est roi!

Dans le prochain et dernier épisode, vous verrez enfin, la séance d'autocritique, car après le travail, il faut savoir se remettre en cause pour mieux travailler.