Le design d’un site web directement dans le navigateur

Jean Gougeon – 24 avril 2014

C’est une tendance qui prend de plus en plus d’ampleur. Pour certaines demandes web, de petite ampleur et peu complexes, avec des contraintes de temps et de budget, il est parfois plus rapide de concevoir la page web directement dans le navigateur, sans passer par les étapes sur Photoshop.

Avec cette méthode, on peut lier plusieurs pages conçues en HTML à un seul fichier CSS. Ainsi, si votre client désire changer la taille de ses titres H1, la couleur de ses titres H2 ou l’interligne de ses balises <p>, les marges ou les espacements… il suffit simplement de changer quelques lignes de codes dans le fichier CSS, et c’est fait! Dans Photoshop, ce procédé demande un peu plus de temps puisqu’il faut ajuster une multitude de calques.

Concevoir ainsi le design d’un site web directement dans le navigateur n’est pas possible si le designer web n’est pas à l’aise avec le code HTML, le CSS et les éditeurs de code. Ces compétences d’intégration sont primordiales pour utiliser cette approche. La connaissance des « media query breakpoints » est aussi essentielle aujourd’hui pour adapter le CSS aux exigences du design « responsive ».

Bien que moins important, savoir utiliser les bibliothèques javascript comme le jQuery peut être utile, de manière à ajouter de l’interactivité et des animations à votre design, comme des effets accordéons ou des effets de scrolling. Un niveau plus avancé en codage est nécessaire, mais cela peut ajouter une touche intéressante à une présentation autrement statique. Et cela ne peut être fait dans un document Photoshop.

Bien entendu, Photoshop reste mon outil préféré. J’ai toujours une fenêtre avec le logiciel ouvert parce qu’il sera toujours nécessaire de redimensionner ou rogner des images et des logos. Aussi, les éléments de design plus complexes sont impossibles à concevoir avec seulement du CSS, Photoshop demeure donc un partenaire de design fiable pour tous les projets.

Le grand avantage de concevoir directement dans le navigateur, c’est la possibilité d’une production rapide dans un délai serré. Votre client aura aussi un meilleur aperçu de l’interaction avec le site à la place de la présentation statique d’un document PSD.

Si cette approche n’est pas adaptée à tous les projets, elle doit être réservée pour les petits sites web, peu complexes ou même des campagnes de courriel de masse. Surtout, cette méthode s’avère utile pour ces projets qui doivent être livrés… hier!

Archives du blogue

Des articles qui pourraient vous intéresser ?

Un bon site Web B2B en 2023, ça c’est du sport! 

Tout le monde et son voisin a un site Web aujourd’hui (ou presque), ce qui augmente la compétition pour les… Read More...

Site Web B2B : pourquoi l’améliorer?

À l'aube de l'année 2023, il est important que les entreprises B2B examinent attentivement leur site Web et se demandent… Read More...

Un site one page pour votre entreprise B2B, oui ou non?

De nombreux sites Web (et consultants) consacrés au marketing numérique présentent le site one page comme l'outil le plus efficace… Read More...