Site réalisé avec un CMS

: Mis à jour le 24 mars 2014

Si vous utilisez un CMS, c’est votre niveau de compétences qui décidera de ce que vous pouvez vous permettre.

Comme le contenu et l’apparence sont bien séparés, la mise en place d’un nouveau design est relativement simple. Il suffira généralement de placer un ensemble de fichiers dans un répertoire précis de votre CMS sur votre hébergement, et d’effectuer une manipulation à partir du panneau d’administration du site pour que le nouvel habillage soit automatiquement mis en place. La plupart des CMS proposent même d’effectuer cette opération de transfert de fichiers depuis votre disque dur vers votre hébergement à partir du panneau d’administration.

1- Utilisation de design clé en main

Vous trouverez sur le Web, pour le CMS que vous utilisez, de très nombreux design « tout faits » à télécharger, gratuits ou payants. Rendez-vous sur le site officiel de votre CMS ou sur l'un de ses forums pour trouver des liens vers des sites proposant ces design. Les tutoriels de votre CMS vous indiqueront également la procédure à suivre pour leur installation.

Niveau : confirmé

2- Créer son propre design

Si vous désirez créer vous-même votre propre design, vous avez plusieurs solutions.

Vous pouvez partir d’un design existant, se rapprochant de ce que vous souhaitez obtenir, et modifier le code HTML et CSS pour le personnaliser. Certains navigateurs, comme Firefox et Opera, sont pourvus ou peuvent être pourvus d’outils de développement permettant de le faire relativement aisément (Firebug à ajouter à Firefox et Dragonfly en natif pour Opera). Leur principe est le suivant. Lorsque vous êtes sur une page de votre site, ils vous proposent deux fenêtres, l’une avec le code HTML, l’autre avec le code CSS. Vous pouvez éditer le contenu de ces fenêtres et voir immédiatement le résultat des modifications opérées dans la fenêtre de navigation. Les modifications ne sont pas faites dans les fichiers de votre site, mais uniquement en interne dans le navigateur. Si vous voulez conserver ces modifications, il vous faudra le faire manuellement au sein des fichiers de votre site (le nom des fichiers est indiqué par ces outils).

Firefox avec l'outil de développement Web Firebug

Avec certains CMS on peut trouver des designs de base, de structure simple et faciles à modifier, afin de permettre la création plus aisée d’un design personnalisé.

Vous pouvez enfin créer de A à Z votre propre design en respectant les règles imposées par votre CMS.

Niveau : expert

3- Logiciel de création de design

Certains sites proposent des outils interactifs permettant de générer le code HTML et CSS d'un design pour certains CMS. Selon les sites cela se fait de façon plus ou moins intuitive ou visuelle. Pour trouver de tels sites, tapez les mots clés suivants: "générateur" "template" ainsi que le nom de votre CMS. N'attendez toutefois pas de miracle de tels outils qu'il vous faudra de toute façon apprendre à maîtriser pour un résultat qui ne vous laissera pas toute liberté. De plus certains d'entre eux sont payants pour une durée d'utilisation limitée. Il me semble plus simple de partir d'un design de base dont la structure s'approche de ce que l'on désire obtenir, pour le modifier à l'aide des outils de développement Web proposés par votre navigateur.

Signalons enfin l’existence d’un outil logiciel permettant de créer très facilement et visuellement des designs pour certains CMS, Artisteer. Son utilisation est très ludique. Il faudra cependant apprendre à bien l’utiliser pour obtenir un degré de personnalisation qui s’éloigne des modèles pré-formatés proposés. Il n’est pas gratuit, mais son prix d’achat n’est pas élevé au regard de ce que peut coûter le recours à un professionnel. Vous pourrez avoir un aperçu du logiciel sur le site de sa société éditrice, à l’adresse http://www.artisteer-france.fr/.

Une solution qui peut être intéressante pour les moins expérimentés. Les autres trouveront le prix trop élevé pour un logiciel non pérenne : les CMS évoluant rapidement, il est fort probable qu’il devienne incompatible avec de nouvelles versions, et donc inutilisable.

Aperçu du logiciel Artisteer