CHAPITRE 1 DE LA CONCEPTION À LA PUBLICATION Réussir l ergonomie générale d un site... 17 Créer la charte graphique... 19 Les clés d un bon site web... 21 15
Avant de vous lancer sur votre souris et votre clavier pour créer votre page web, il est important de réfléchir à la conception de votre futur site pour éviter les aléas du webmaster trop pressé et obligé de recommencer indéfiniment la même page. 1.1. Réussir l ergonomie générale d un site Combien de pages composeront votre site web? Quelles seront les fréquences des mises à our? Menu simple ou menu hiérarchique? Quel type de navigation choisir? Autant de questions à se poser avant de foncer tête baissée dans un logiciel de création de site web. Pour définir la structure de votre site, rien ne vaut la page blanche et le crayon. Même s il s agit d un site simple réunissant une dizaine de pages tout au plus, cette étape préparatoire vous aidera à anticiper les problèmes éventuels et vous fera gagner un temps précieux. Les qualités d un bon site web Après une mûre réflexion, vous serez à même de créer un site web ergonomique, respectant plusieurs critères de qualité. Parmi les éléments les plus importants, on peut notamment citer : La sobriété : le site doit être épuré, avec une navigation simple. Le débutant est tenté de mettre immédiatement en pratique tous les artifices technologiques appris, des boutons animés et images clignotantes. Mais mieux vaut les réserver à un usage bien précis, pour mettre en valeur un logo ou une nouveauté notamment, pour ne pas noyer le regard de l internaute qui ne saura plus distinguer les informations importantes des autres. La clarté, c est-à-dire la bonne organisation des informations, structurées et mises en forme de façon lisible par tous. Lors de l insertion de texte, il faut donc veiller à créer des paragraphes distincts, à utiliser titres et sous-titres et à faire appel aux styles de caractères (gras, italique..) pour mettre en valeur les éléments qui doivent ressortir. La facilité de navigation, point essentiel qui sera détaillé plus loin dans ce chapitre. On entend par navigation le passage d une page à l autre d un site à l aide de liens hypertextes, symbolisés généralement par un ou plusieurs mots de couleur bleue et soulignés. Pour une navigation efficace, il faut respecter la règle des trois clics, 1.1. Réussir l ergonomie générale d un site 17
ce qui signifie que toute information du site doit être accessible en moins de trois clics. Le temps de chargement doit être rapide et inférieur à une vingtaine de secondes, quelle que soit la vitesse de connexion de l internaute. Au-delà, il yadefortes chances qu il quitte votre site avant même que la première page soit affichée. Même si parler "de poids maximum" pour une page web n a plus le même sens qu il y a quelques années, en raison de l explosion des connexions haut débit, il est important d éviter d alourdir inutilement les pages d un site. L interactivité, qui correspond aux interactions mises en place entre l internaute et le site web : e-mail de contact, forum, formulaire. Il est important de recueillir les impressions et critiques de vos visiteurs pour améliorer et adapter votre site web. L accessibilité, c est-à-dire la possibilité de visualiser le site web sur le plus grand nombre d ordinateurs par tout type de public, quelle que soit la configuration. Navigateurs, résolutions d écran, systèmes d exploitation, plug-ins éventuels sont autant de paramètres qu il vous faudra prendre en compte avant de publier une page web pour vous assurer que votre site sera visible par tous. Une navigation simple et efficace La navigation est le cœur de votre site. Une navigation mal pensée et un site peu accessible peuvent remettre totalement en cause le succès de vos pages web, même si elles sont esthétiques et riches en informations. Rien de pire en effet qu un site brouillon avec de longues pages sans liens et l impossibilité de revenir facilement à la page d accueil. Dès la conception du site web, il est primordial de le structurer en menus et sous-menus pour s assurer de la logique de la navigation utilisée. Voici quelques conseils pour une navigation réussie : À tout moment, l internaute doit pouvoir revenir à la page d accueil et aux principales rubriques grâce à une barre de navigation. Les pages d introduction, avec animations en Flash ou images animées, préambules à la page d accueil, sont inutiles et ont tendance à énerver l internaute, qui perdra inutilement du temps lors du chargement, sans accéder aux informations souhaitées. 18 1. De la conception à la publication
Afin que l internaute puisse se repérer facilement, il est conseillé de placer systématiquement la barre de navigation au même endroit sur chacune des pages du site, avec une présentation identique. Si votre site comporte un logo, celui-ci doit être placé au même endroit sur chaque page. Il est courant de placer sur le logo un lien vers la page d accueil du site. Pour un repérage aisé, vous pouvez créer au sein de votre site web un plan qui le décrit. Il s agit de mettre à plat, sur une page HTML, toutes les rubriques et sous-rubriques de votre site avec des liens HTML. Le plan permettra à l internaute éventuellement perdu d accéder rapidement à la page choisie. 1.2. Créer la charte graphique On appelle charte graphique le "look" des pages d un site. Couleur, mise en page, choix de la police, styles, sont autant de paramètres importants qui donneront immédiatement à l internaute l envie, ou non, d aller plus loin dans sa visite. Kits graphiques ou création personnelle? Si vous n êtes pas expert en HTML et que l idée de vous plonger dans un éditeur web vous donne envie d abandonner votre proet, les kits graphiques sont sans nul doute la solution qu il vous faut. Les kits graphiques sont des interfaces web, payantes ou gratuites, qui permettent de proposer rapidement un site esthétique généralement réalisé par un graphiste professionnel pour un moindre coût. Selon le kit graphique choisi, il pourra être utilisé à des fins personnelles ou commerciales. Cadres, tableaux HTML ou CSS? Au début de l ère Internet, les cadres HTML (également appelés "frames") insérés dans les sites web étaient très à la mode. On divisait la page principale en trois ou quatre sections au maximum, chacune correspondant à une page HTML distincte. Ainsi, une page d accueil divisée en trois colonnes incluait un cadre HTML pour le menu, un autre pour la zone centrale et un dernier pour l en-tête. Le découpage en cadres est auourd hui fortement déconseillé. On lui préfère une structure en tableau HTML. Le principal inconvénient des 1.2. Créer la charte graphique 19
cadres est l aspect "page perso", qui enlève toute crédibilité au site, même si son contenu est de qualité. À cela s aoutent des problèmes de référencement, qui constituent un gros frein à la visibilité des pages web. Contrairement aux cadres, les tableaux offrent une entière liberté dans la mise en page d un site et ne posent aucun souci de référencement. Ils permettent de structurer précisément l information et sont fiables quel que soit le navigateur. Ainsi, vous évitez les mauvaises surprises de mise en page selon les versions utilisées par les internautes. Auourd hui, de plus en plus de webmasters privilégient les feuilles de styles dont l utilisation s avère toute aussi efficace que les tableaux. Les outils de mise en page tels que Dreamweaver proposent pour la plupart un panneau dédié aux feuilles de styles afin de faciliter leur intégration au sein d une page web. Pour plus d informations sur la création de tableaux, reportezvous au chapitre 4 Aller plus loin avec Dreamweaver. La mise en forme du texte Pour proposer un site compatible avec la plupart des plateformes, il est important de sélectionner des polices visibles par tous et de respecter quelques principes de mise en page pour une lecture aisée : Il est conseillé de privilégier une police prise en charge par défaut par tous les navigateurs. Parmi les plus courantes, Arial, Tahoma ou Verdana sont adaptées à la lecture sur Internet. N hésitez pas à traquer les fautes d orthographe, qui enlèvent toute crédibilité à un site si celles-ci se répètent trop souvent. Faites attention aux tailles de texte élevées. Utilisez la mise en forme (gras, italique ) uniquement si nécessaire, sans exagération. De préférence, n utilisez que trois polices différentes au maximum pour conserver une mise en page homogène. Conservez une présentation identique sur toutes les pages. Appliquez les couleurs de façon harmonieuse pour ne pas agresser l œil de l internaute. Par exemple, évitez un texte bleu sur un fond noir, qui risque de gêner la lecture. 20 1. De la conception à la publication
Évitez également les couleurs criardes ou fluorescentes, ainsi que les couleurs sombres sur fonds foncés pour conserver une lisibilité optimale. Un affichage optimisé pour tous Il est important d optimiser vos pages web pour qu elles soient affichées correctement sur le plus grand nombre d écrans, quelle que soit leur résolution. Celle-ci varie selon la carte graphique et la taille de l écran utilisé. Résolution d écran La résolution d écran correspond au nombre de points ou pixels que peut afficher une carte graphique. Elle est définie par la multiplication du nombre de points sur l axe horizontal par le nombre de points sur l axe vertical. La plus courante actuellement est 1 280 1024, présente sur les écrans 19 pouces. Compte tenu du parc informatique actuel, optimisez votre site pour une résolution de 1 280 1024 pixels ou plus. Cette valeur représente la maorité des écrans utilisés auourd hui. Veillez à ce que la largeur de vos pages et de vos tableaux ne dépassent pas 1 200 pixels afin que l internaute n ait pas besoin d utiliser les barres de défilement. Si vous souhaitez que votre site soit accessible facilement depuis des terminaux mobiles, vous devrez proposer une version qui s adaptera à une taille d écran plus petite pour éviter la multiplication des barres de défilement. Si votre site fait appel à la technologie Flash, intègre vidéos ou contenus audio, proposez un lien vers le site de l éditeur afin que l internaute puisse télécharger au besoin le plug-in nécessaire à une bonne visualisation. 1.3. Les clés d un bon site web Si vous suivez les conseils d ergonomie énoncés précédemment, vous éviterez bon nombre des erreurs les plus courantes. Pour faire la différence, il reste maintenant à s attacher au fond. Vous devez proposer un contenu riche, apportant une réelle plus-value par rapport aux autres sites, et régulièrement actualiser vos pages pour donner aux internautes l envie d y revenir. 1.3. Les clés d un bon site web 21
Aouter de l interactivité Pour les diaporamas photo, les ournaux en ligne, les forums, les sites d actualité, HTML reste indispensable mais n est pas touours suffisant. Il est facile d insérer un script JavaScript prêt à l emploi et disponible sur Internet, pour afficher la date, ou encore une applet Java, pour intégrer un eu en ligne, voire un forum fondé sur une base de données et le langage PHP, sans pour autant maîtriser ces différents langages. Pour être moins perdu face aux nombreux termes que vous ne manquerez pas de croiser lors de la création de votre site web, voici un petit point sur les principales technologies utilisées et leurs applications pratiques : JavaScript : langage souvent utilisé dans les pages web pour créer de petits scripts qui insèrent l heure et la date, ouvrent une nouvelle fenêtre, introduisent des effets spéciaux sur des images, etc. Applet Java : également appelées "appliquettes". Il s agit de petits programmes (principalement des eux ou des modules de chat) utilisés dans les pages web et qui peuvent être téléchargés et interprétés par un navigateur Internet tel que Firefox ou Internet Explorer. PHP : langage exécuté par le serveur web, qui permet d aouter des fonctions avancées à un site Internet, de créer des applications plus ou moins complexes, telles que forums, modules de newsletter ou livres d or. Pour utiliser PHP, il est indispensable que cette technologie soit reconnue par le serveur web. Figure 1.1 : Le site Commentcamarche définit simplement de nombreux termes informatiques 22 1. De la conception à la publication
Décrypter le argon Internet Si vous êtes perdu face aux multiples termes qui alonnent la création de sites web, consultez le site Web Commentcamarche, à l adresse www.commentcamarche.net. Ce site dispose d une section consacrée aux débutants en informatique afin de les aider à décrypter les principaux termes que vous serez susceptible de rencontrer sur Internet. Le vocabulaire est accessible à tous. Choisir un bon hébergeur L hébergeur est la société chargée d administrer les serveurs sur lesquels seront publiées vos pages web pour être visibles sur Internet. Après avoir travaillé sur votre site depuis votre ordinateur, vous devrez l envoyer sur un serveur. Pour choisir un hébergeur, prenez en compte plusieurs critères : Adresse web : certains hébergeurs proposent la réservation de noms de domaines, d autres offrent des adresses plus difficiles à retenir, du type http://identifiant.nomhebregeur.com. Avant tout, réfléchissez à l adresse que vous souhaitez donner à votre site web. Pour une image sérieuse et professionnelle, une adresse du type www.monsite.com est conseillée et sera également plus facile à mémoriser. Espace disque disponible : exprimé généralement en mégaoctets ou gigaoctets. Pour vous donner un point de repère, sachez qu une vidéo pèse entre 1 et 5 Mo et qu une dizaine d images nécessitent un espace disque d environ 1 Mo. Si vous souhaitez privilégier le texte, vous n aurez pas besoin d un espace disque important, et inversement si vous comptez proposer beaucoup de contenu multimédia. Scripts et technologie : PHP, CGI, ASP, etc. Si vous souhaitez utiliser des scripts, il est important d être attentif aux technologies supportées par votre hébergeur. Même si vous ne connaissez pas ces langages, vous serez susceptible de les utiliser via de nombreux scripts prêts à l emploi. Privilégiez les serveurs web prenant en charge PHP et éventuellement la base de données MySQL pour intégrer facilement, par la suite, de nouvelles fonctions à vos pages web. 1.3. Les clés d un bon site web 23
Pour plus d informations sur le choix d un hébergement, reportezvous au chapitre 8 Publier et promouvoir son site web. Adresse e-mail : certains hébergeurs fournissent une adresse e-mail et stockent les messages au sein du serveur web, tandis que d autres proposent un simple renvoi vers votre adresse e-mail. Réserver un nom de domaine Un nom de domaine correspond à l adresse d un site Internet. Par exemple, dans www.yahoo.fr, yahoo.fr représente le nom de domaine. Il existe de multiples extensions (.com,.fr,.net,.biz ) que vous pourrez choisir selon la nature de votre site (personnel, associatif, commercial ). S il s agit d un site commercial,.com et.fr s imposent. Pour un site associatif, vous pourrez opter pour.org (diminutif d "organisation"). De plus, selon l extension souhaitée, le prix peut être plus ou moins élevé. Actuellement, les extensions.com et.fr sont les plus demandées donc les plus chères. Néanmoins, acheter un nom de domaine est simple et reste à la portée de toutes les bourses (à partir de 6 euros par an). De plus, il s agit d un achat qui sera vite rentabilisé si vous avez choisi la bonne adresse, courte, facile à orthographier et à retenir. Pour acheter un nom de domaine, il n existe aucune règle particulière, si ce n est que le premier arrivé est touours le premier servi. Ainsi, si vous souhaitez créer un site web consacré à James Dean, rien ne vous empêche d acheter le nom JamesDean.com dans la mesure où celui-ci est touours disponible, ou de tenter votre chance avec d autres extensions le cas échéant (.net,.org ). Notez qu un nom de domaine ne contient amais d espace. Auourd hui, de nombreux hébergeurs proposent également un pack incluant l achat d un nom de domaine. Les formalités de mise en service en sont facilitées. Aussi n hésitez pas à profiter d un pack hébergement + nom de domaine, accessible à un prix plus intéressant. Pour plus d informations sur la réservation de noms de domaines, reportez-vous au chapitre 8 Publier et promouvoir son site web. 24 1. De la conception à la publication