REALISATION

En fonction du "concept" que vous aurez pris soin de définir clairement vous devez maintenant passer à la réalisation des pages qui constitueront votre site. Le type de site, portail, pages statiques, page dynamiques, catalogue online, etc...doit déjà avoir été défini dans votre concept. Les moyens techniques et la méthode à mettre en oeuvre dépend évidemment de ce paramètre, de la complexité du site. Vous pouvez opter pour un simple éditeur de texte, si vous connaisser les languages que vous allez utiliser (html, php, sql, javascript,...) ou un logiciel du type wyswyg (What You See is What You Get) qui vous permettent de créer vos pages de manière "interactive" (vous choisissez les paramètres (polices, couleurs, images, etc...) vous construisez vos page à la souris et au clavier et le logiciel génère le code.

Ces logiciels (Dreamweaver, WebExpert, Frontpage, CoffeCup,...) permette de travailler également directement sur le code, c'est en fait un très bon moyen de vous initier aux différents langages en observant la partie code. Si vous travaillez sur votre premier site internet nous vous recommandons vivement d'utiliser l'un des ces logiciels éditeurs ci-dessus, vous gagnerez beaucoup de temps et vous verrez qu'il sont très facile à utiliser.

Voici maintenant, dans l'ordre, quelques points à respecter pour que votre site aie l'air professionnel et pour faciliter son développement et les amélioration futures.

Choix du design et des couleurs

Deux possibilités s'offrent à vous, les kits graphiques tout prêts ou laisser cours à votre créativité pour fabriquer vous-même le graphisme de votre site.

Les kits, téléchargeables sur internet ou disponibles sur CD ROM (dans le rayon multimedia de votre magasin préféré) sont à cours terme le moyen le plus rapide d'obtenir une présentation propre, parfois évoluée, issue du travail de graphistes expérimentés. Par contre à moyen et à long terme il va falloir vous mettre à la hauteur de l'auteur du graphisme pour personnaliser certaines pages ou apporter des modifications sur le design, tout en conservant la cohérence du tout.

Si vous ne considérez pas votre tâche de webmaster comme une petite activité temporaire alors créer votre graphisme vous-même est une excellente initiative à moyen terme. Evidemment on ne s'improvise pas graphiste d'un jour à l'autre, mais en observant ce que font les gros sites professionnels vous pourrez assez rapidement aboutir à un résultat très satisfaisant.

Le choix des couleurs est important, il définit l'"ambiance" du site. Chaque couleur à un sens, vous devez accordez la signification des couleurs avec le sujet de vos pages. Voici un petit résumé des couleurs et de ce qu'elles inspirent:

BLEU: calme, sérénité, sérieux, eau, froid, confiance
VIOLET: passion, délicatesse, modestie, religion, mélancolie, tristesse
ROSE: Charme, femme, beauté, naïveté
ROUGE: amour, dynamisme, enthousiasme, colère, danger, urgence, interdit
ORANGE: plaisir, odeur, vitalité, feu, alerte
JAUNE: dignité, richesse, immortalité, égoïsme, orgueil
VERT: nature, végétaux, équilibre, foi, repos, télérance, espoir
BRUN: calme, terroir, philosophie, saleté
BLANC: pureté, propreté, innocence, fraîcheur, simplicité
GRIS: neutralité, respect, modération, sérieux
NOIR: sobriété, luxe, obscurité, interdit, tristesse

Votre bon sens et votre intuition suffisent à choisir la couleur dominante de votre site, que vous utilisiez un kit graphique ou que vous développiez vous-même le graphisme. Si vous avec choisi la deuxième option voici encore quelques conseils:

• Choisissez un maximum de trois couleurs, évitez les mélanges tout azimut.
• Plusieurs tons d'une même couleur est toujours une solution élégante
• Assurez-vous que le texte soit bien lisible (par exemple pas de rouge sur du bleu!)

Polices, styles

Prenez le temps de définir des feuilles de style css, c'est un petit effort initial, mais par la suite elles vous permettrons de gagner énormément de temps. Elle sont également la garantie d'une uniformité des styles à travers vos page. Mais leur principal atouts c'est de pouvoir, à l'avenir, modifier le style de vos pages (police, taille, couleur, alignement,...) très facilement par une simple mise à jour de la feuille de style.

Navigation

Choisissez une méthode de navigation qui permette au visiteur de se déplacer facilement à travers vos pages, tout en gardant une vue d'ensemble de la structure du site. Les outils de navigation sont nombreux, en voici quelques uns:

• Liens textes toujours visibles dans une colone à gauche ou à droite
• Liens textes dans une barre horizontale dans la partie supérieure de la page
• Liens images (avec éventuellement effets de survol)
• Fils d'ariane (home > section 1 > sous-section)
• Menu javascript (avec sections hiérarchisées)

Si votre menu contient beaucoup d'éléments vous avez intérêt à le séparer en un menu principal (vers les diverses sections du site) et un menu secondaire ( pour les liens du type "contacts", "conditions générales", "liens", "partenaires", etc...)

Pensez encore à faire un lien facilité vers la page d'acceuil, en général un clic sur le logo qui se trouve en haut à gauche renvoie vers la page principale du site.

Images

La qualité, la cohérence des propriétés ( tons, couleurs, tailles, bordures) des images est très importante, c'est un paramètre déterminant pour l'aspect général du site. Définissez quelques règles pour toutes les images que vous allez utiliser, ces règles peuvent concerner:

• le type: shéma (infographie, manuel, images de synthèse, photographies)
• le type de bordure
• la taille
• le positionnement des images sur la page
• le filtre appliqué
• les couleurs et tons

Affichez les images en taille réelle. Pour évitez des fichiers trop volumineux utilisez des images en jpg ou png.

Dimension des pages

Il s'agit ici d'un problème un peu plus délicat, pensez que votre site sera visualisé sur des écrans de différentes dimensions/résolutions. Une disposition élégante sur votre ordinateur de travail peut devenir désastreuse sur un écan un peu plus grand ou plus petit si vous n'avez pas soigneusement étudié la mise en page.

Pour les divers éléments d'une page (tableau, frames, iframes) vous avez en principe la possibilité de travailler soit en dimensions fixes (pixels) soit en dimensions relatives (%). Les dimensions relatives peuvent être tentantes, définir la largeur d'un tableau à 90% de la largeur de l'écran semble une solution raisonnable, cependant l'arrangement du contenu du tableau (texte, autres tableau, images) est difficilement contrôlable. Si vous choisissez cette option vous devez tester le résultat avec différentes résolutions d'écran avant de publier vos pages.

La solution la plus abordable pour votre premier site consite à travailler avec des tableaux de largeur fixe, de manière à ce que la page s'affiche en plein écran pour les "vieilles" résolution 800x600. Vous pouvez par exemple choisir une largeur de 750 pixels (ce qui laisse une petite marge même sur les écrans 800x600)

Une solution plus évoluée consite à tester la résolution de l'écran sur la page d'entrée puis de diriger le visiteur vers la partie du site adéquate. C'est un gros travail, pas conseillé pour un premier site!

Evolution de votre site

Pour faciliter les mises à jour et les évolutions du design vous devez penser à ne pas dupliquer les éléments répétitifs (en-tête, menu, fond de page,...) en utilisant par exemple la fonction "include" en php. Vous pouvez ainsi enregistrer un fichier "en-tete.php" qui contient un tableau avec la partie supérieur communes de vos pages (par ex. le logo avec une barre horizontale de menu). Toutes les pages appellerons alors cette partie avec une fonction "include". Une modification sur le menu se fera simplement dans le fichier "en-tete.php" et sera répercutée partout sur le site. Appliquez le même principe pour le fond de page ou pour des menus verticaux, etc...

A éviter...

• les gifs animées, ça fait vraiment pas pro!
• les frames, c'est démodé et c'est délicat pour le référencement
• les applets java, ça ralenti terriblement la navigation
• les couleurs flashy, ça aussi c'est démodé.... sauf pour les sites de jeux...