Découpage CSS

Définition

Le découpage CSS désigne l’étape qui consiste à convertir la maquette graphique d’un site web en fichiers html & CSS pouvant être affichés par un navigateur web.

Mieux comprendre

La réalisation d’un site web fait appel à des compétences très diverses, dans des mondes très différents tels que le développement web et mobile. Le graphiste web (ou designer) est un peu l’artiste de la bande, même si beaucoup le contestent en affirmant que leur métier consiste avant tout à suivre des règle de design. Son rôle consiste à fournir des images. Ainsi, c’est lui qui va « dessiner » le site web sous la forme d’une maquette. Il peut parfois être également ergonome pour produire des pages qui offrent une expérience utilisateur de bonne qualité (on parle alors d’UX design). En revanche, les graphistes sont rarement intéressés par la partie technique des sites, le fameux « code ».Hors, pour transformer une maquette graphique en site web, il faut d’une manière ou d’une autre transformer un dessin en une forme de « programme » fonctionnel. Il y a encore quelques années, des techniciens découpaient la maquette du graphiste en plusieurs images qu’ils positionnaient dans le site à l’aide d’un gabarit html et d’un ou plusieurs fichiers CSS. On parlait alors de découpage CSS. On découpait les éléments de la maquette afin de pouvoir séparer les parties statiques (le logo, le fond…) des éléments dynamiques (les puces, les polices, etc.). Cette étape était difficile à réaliser par des non techniciens. Il faut en effet bien connaître les contraintes des CSS pour effectuer un découpage efficace.

Les nouvelles techniques

De nos jours, plusieurs techniques viennent simplifier l’intégration graphique d’un site web :

• Il existe des logiciels (par exemple Artisteer) qui réalise quasi-automatiquement le passage d’une maquette graphique à un template (cas des CMS) ou à un site classique. Il peut parfois aussi s’agir d’extension pour les logiciels comme Photoshop. Inconvénient : le code généré par ces logiciels est bien souvent de mauvaise qualité (c’est à dire peu optimisé).
• De nombreux graphistes partent désormais de modèles pour développer un design à partir d’un existant, et limiter l’intervention technique à quelques modifications de forme.
• Certains thèmes sont livrés avec des outils permettant de faciliter la création de sites personnalisés à l’aide de « builders ».

Pour aller plus loin, nous vous invitons à découvrir notre agence developpement web et à télécharger notre livre blanc « Les 11 commandements d’un site internet qui convertit vos visiteurs en clients »