Vous êtes sur la page 1sur 20

Architecture d'un site Web

1. Lignes de force 1.1. Publication papier Avant de se lancer dans une publication Web, il est difficile d'viter la comparaison avec la publication papier. La plupart des concepts pour structurer l'information s'appuient sur l'organisation de livres, brochures, priodiques ou catalogues qui sont dvelopps autour de la publication imprime. Culturellement, il est impossible (voire dangereux car vous risquez de dcontenancer votre interlocuteur) de passer outre des sicles de rgles et de conventions. Mais force est de constater que la publication sur Internet comporte ses propres spcificits. Sans vouloir tre exhaustif, soulignons en quelques-unes. L'internaute n'a pas la sensation physique du livre et risque d'tre rapidement perdu dans le ddale d'crans qui se prsentent lui. Il faut plus que jamais structurer l'expos et offrir des outils de navigation pour lui permettre de se mouvoir ou mme de le guider dans le site. Autant pour les yeux que pour l'esprit, l'auteur devra communiquer en terme d'cran et non plus en terme de feuille de papier d'un format dtermin. En Html, le langage informatique utilis pour crire les publications Web, vous n'avez pas la matrise de votre document comme dans une feuille de traitement de texte qui sort de votre imprimante. Un visiteur visionnera peut-tre votre site avec une police de caractres plus grande, une grandeur d'cran diffrente ou une qualit d'image moindre... L'internaute a une dmarche active vers l'information qu'il recherche. Sauf quelques "contemplatifs" du Web, l'internaute moyen lira vos pages en diagonales, dans un ordre dispers, qui sera tout sauf celui souhait par l'auteur, jusqu' l'information recherche. Une fois "son" information trouve, votre site sera alors gnial. Mais se souviendra-t-il de vos mises en pages et autres graphiques travaills, retravaills, bichonnes pendant de heures voire des semaines ?... La publication Web offre un rapport "prix / audience / dlai" dfiant toute concurrence vis vis de ldition traditionnelle. Le cot des moyens techniques est accessoire sinon drisoire au vu de ceux de la production d'un livre ou d'une revue. La barre des 100 000 lecteurs est quelque chose d'accessible sur le Web, mme pour un site personnel. Le dlai des corrections, actualisations et autres mises jour sera celui de votre propre crativit. Par contre, la publication Web est exigeante en travail et donc en temps y consacrer. La diffrence essentielle est cependant l'interactivit qu'apporte la publication Web. Prenons simplement les e-mails de vos visiteurs [1 2% en moyenne], qui vous communiquent en temps rel, encouragements, critiques ou suggestions. Quelle mine d'or incomparable pour vos mises jour ou les dveloppements ultrieurs de votre uvre ! 1.2. Schma global Avant de se lancer dans la ralisation d'un site Web, il faut prendre le temps d'une rflexion pralable dont voici les lignes de force.

Le pourquoi de votre dmarche (objectifs) engendrera le public que vous visez. La connaissance de votre public dterminera alors trois composantes : le contenu rdactionnel et la prsentation visuelle de votre publication qui devront, l'un et l'autre, tenir compte des particularits de fonctionnement de ce nouvel outil de communication qu'est Internet. En outre, votre site une fois sur le rseau, l'interactivit et prcisment les e-mails de vos visiteurs vous permettront de mieux connatre "votre" public et d'affiner, lors de vos mises jour, le prcieux schma de rflexion de votre site : objectifs public contenu, visuel et fonctionnel.

"Un site Web est donc trois composantes qui s'adressent chacune une fraction de votre public. Ceux qui n'ont jamais visit votre site, les passants, apprcieront sa clart et sa prsentation visuelle harmonieuse. Ceux qui y reviennent une ou deux fois, les curieux, seront convaincus par la qualit du contenu. Enfin les habitus des lieux, les fidles, vous tmoigneront une infinie gratitude si, en plus, le tlchargement de vos pages est rapide." (Philippe Monteiro da Rocha) 1.3. Objectifs Sans objectifs, pas de cohrence. Sans cohrence, pas de public non plus ! La premire tape dans la conception d'un site Web est la dfinition des objectifs que vous poursuivez dans la cration d'un site. Ces objectifs formeront la "colonne vertbrale" de votre communication qui apportera la cohrence indispensable votre site. Ces objectifs fourniront galement un outil d'valuation de votre site, au combien utile pour ventuellement corriger le tir ou vous guider dans ses dveloppements ultrieurs. Ces objectifs peuvent prendre des formes multiples : tre prsent sur le Web. Objectif minimaliste, il faudra dans ce cas veiller la densit du contenu. faire des visiteurs ou du trafic. Ici le visuel risque d'tre prpondrant mais n'esprez pas forcment une clientle fidlise. faire un site de liens. Le fonctionnel vous invitera vrifier rgulirement la validit de ces mmes liens. faire un site de promotion d'une association ou d'une marque commerciale. Un mariage harmonieux du contenu et du visuel sera votre priorit absolue et fera alors votre succs. faire un site commercial. Remplacez dans ce qui suit les mots "contenu pertinent" par "service probant". faire un site acadmique. Il faudra penser allger le poids du contenu par un visuel adapt et une facilit de navigation quasi intuitive. informer ou distraire. En deux mots, voil deux programmes bien diffrents. etc.

1.4. Public vis Connatre son public pour communiquer avec lui. L'tape suivante dans le processus d'laboration d'un site sera d'identifier les utilisateurs potentiels de votre site afin dadapter votre communication leurs besoins et leurs attentes. Outre la densit du contenu et la sophistication du visuel, cette connaissance du public influencera galement la structure ou l'aspect fonctionnel de votre site. Les internautes novices souhaitent une structure claire voire dirigiste tandis que les internautes expriments ont plutt horreur d'une structure trop lourde qui leur donne l'impression d'tre chapeaut et de freiner leur accs l'information. Les internautes novices et visiteurs occasionnels. Ces internautes novices sont demandeurs d'une structure claire et d'un aperu qui illustre comment l'information est arrange dans le site. Un menu textuel trop dtaill les dcontenancera. Ainsi prfreront-ils un menu, idalement agrment d'une touche graphique, de 4 6 sujets. Pour ces internautes novices, une page d'accueil au visuel attractif et la mise en page soigne sera souvent dcisive [attention, ils n'utilisent que trs peu le dfilement vertical]. Les visiteurs occasionnels apprcieront un plan du site, des pages d'aperu et des petites icnes qui leur rappellent o se situe l'information dans le site. Un dictionnaire des termes techniques, acronymes et abrviations ainsi qu'une FAQ ["Frequently Asked Questions" ou Foire Aux Questions] peuvent tre trs utiles ces visiteurs d'un jour. Les internautes experts et visiteurs fidles. Ces internautes expriments utiliseront votre site pour obtenir rapidement une information prcise et pertinente. Ils se rvlent assez impatients lorsqu'ils sont confronts des petits menus en cascade de 4 6 choix et les fioritures graphiques leur importent peu. Ils ont gnralement un but spcifique en tte et ils apprcieront les menus textuels dtaills, les outils de navigation clairs la symbolique lgre qui permettent une recherche rapide jusqu l'information souhaite. En fait, ils ne feront que traverser votre site jusqu' la bride du contenu qui les intresse. Le fin du fin en terme de structure d'un site tant celle qui est capable de sadapter plusieurs profils d'utilisateurs. 1.5. Contenu rdactionnel Le Web est par essence textuel. Le Web est une formidable source d'informations. Mais la diffrence de la tlvision par exemple, l'internaute doit adopter une dmarche active car il doit aller chercher cette information. Dans cette recherche, il s'attend trouver de l'information utile et un contenu pertinent et actualis. Dans le cas contraire, l'internaute s'en ira frustr et on peut parier qu'il ne remettra jamais les pieds dans votre site. N'oubliez pas non plus que le Web est un march trs concurrenc et que la plupart des sujets dinformations sont ou seront traits de multiples reprises. La diffrence se fera sur la qualit et le dtail du contenu. L'internaute moyen aprs avoir longuement vagabond dans tous les sens sur la toile, se limite trs souvent, aprs quelques mois, une vingtaine de sites qui correspondent ses centres d'intrt et qu'il revisite intervalle rgulier. Ces sites ainsi "lus" le sont non pas pour le graphisme puisqu'il le connat par cur et ne le regarde mme plus, non pas pour la facilit de navigation puisqu'il loublie tellement il y est l'aise, mais pour le contenu et surtout son actualisation rgulire. Le contenu est le meilleur moyen pour fidliser votre public. Faire venir le visiteur sur votre site, c'est bien, le faire revenir cest assurment la plus belle russite.

Par exprience, on remarque que ce n'est pas tant ceux qui n'ont rien dire qui n'hsitent pas publier sur le Web mais ceux qui, comptent dans une sphre d'activit, veulent tout prix viser l'excellence. Le Web est large et les publics varis. De la vulgarisation l'expertise, chaque niveau a sa place pourvu que le sujet soit trait de faon cohrente. Il est parfois plaisant d'avoir une explication claire et simple sur un sujet dtermin sans devoir entrer dans des dveloppements pointus mais compliqus. Rien n'empche alors de prciser dentre les limites de votre site. Bien que l'auteur ne soit pas un champion en la matire, des fautes d'orthographe "naurmes et trop nombreuse" non seulement agacent votre lecteur mais surtout dprcient la crdibilit de votre contenu et l'image de votre site. De grce, il existe des correcteurs d'orthographe et des bons samaritains de la langue franaise pour vous relire ! [promis, je ferai des efforts...] 1.6. Prsentation visuelle Sans le graphisme, le Web ne serait pas ce qu'il est. A n'en pas douter le Web a vritablement dcoll grce son ct visuel. Par visuel, nous entendons non seulement les images et autres lments graphiques mais galement les animations que permettent les dveloppements technologiques rcents comme le Java, le Javascript et le Dhtml. Dans les 30 secondes qui vous sont accordes pour convaincre un internaute entrer dans votre site, le visuel prend toute son importance. Un aperu du contenu veillera assurment son intrt mais c'est le visuel qui entranera le clic "gagnant" vers l'intrieur de votre site. Il ne faut cependant pas en conclure qu'il est indispensable d'tre un infographiste de gnie pour faire un site. L'important est bien que le visuel soit adapt votre public...Et puis n'oubliez pas qu'un visuel sobre, net et attrayant suffit dans la plupart des cas. Soulignons aussi que le visuel doit garder le visiteur sur le contenu et non le distraire de celui-ci. Le visuel est aussi (ou surtout ?) une autre faon de communiquer le contenu votre visiteur. En aucun cas, il ne sera une occasion pour vous faire plaisir ou taler gratuitement vos talents graphiques. Enfin, noubliez pas que les internautes comportent, comme dans la vie de tous les jours, leur lot de myopes, presbytes et autres daltoniens. Pensez eux avec des couleurs nettes et des images vraiment informatives. Le visuel est aussi fort utile pour structurer votre propos et agrmenter votre mise en page. On veillera crer tout au long des pages d'un site une identit et/ou une cohrence visuelle qui guidera l'internaute tout au long de sa visite. On prtera une attention particulire cette identit visuelle lorsque plusieurs personnes participent l'laboration du site. Cet aspect visuel doit imprativement tenir compte de l'aspect fonctionnel de la publication sur Internet et tout spcialement du temps de chargement des images et du temps de rponse des animations (Java et dans une mesure moindre le Dhtml). Mis part les sites caractre pornographique, le dlai de premption de la patience de l'internaute moyen est vite puis... A ce stade de dveloppement d'Internet et des tlcommunications, le visuel et spcialement la taille des images sont encore toujours une question de compromis. On oublie trop vite quun site se juge en ligne partir du rseau et non partir de son disque dur ! Notons pour terminer que le visuel d'un site vieillira bien plus vite que le contenu. La Web a ses modes (mais oui, mais oui...) et il faudra penser rafrachir rgulirement le visuel de votre site.

1.7. Aspect fonctionnel Comprendre le fonctionnement du Web et le comportement des internautes. L'cran de votre visiteur et surtout le Web sera le support de votre publication. Ce nouveau moyen de communication a non seulement ses spcificits techniques mais aussi dj ses "us et coutumes". Si dans la publication papier, il suffit de tourner la feuille, sur le Web il faudra composer avec le temps de chargement de la page. Commenons par le texte. Une page de 15 30 K ne posera pas de problmes c--d l'quivalent d'une feuille A4 maximum. Au-del, le temps de chargement devient pnalisant surtout si en plus cette page comporte de nombreux tableaux imbriqus qui ralentissent le chargement. Mais n'oubliez pas qu'en Html, toutes les images sont des fichiers spars qu'il faudra charger ensuite. Un total d'images de 30 50 K semble tre dans la norme. Au del des 80 K pour une image, le dlai d'attente devient pour le capital patience de certains quelque chose de prohibitif surtout pour une page d'accueil. N'oubliez pas qu'une image qui a dj t charge, reste dans le "cache" de votre navigateur et qu'il ne la rechargera plus partir du rseau mais de votre disque dur ce qui entrane un chargement immdiat. Ce qui permet d'user et d'abuser des boutons, puces, tirets de sparations et autres bannires qui se retrouvent de pages en pages et qui agrmentent votre mise en page et forment l'identit visuelle d'un site. Ces diffrentes (petites) pages doivent tre structures de faon logique afin que l'internaute puisse naviguer efficacement dans votre site. Nous consacrons plus loin dans le site un chapitre particulier sur les diffrentes structures d'un site Web. Il faudra aussi prvoir de petites icnes pour que l'internaute puisse utiliser aisment cette structure et se retrouver tout moment dans l'exploration de votre site. Les matres du Web conseillent de prvoir pour chaque page une possibilit de retour la page d'accueil. Ces petites icnes de navigation devront tre d'un graphique simple et d'une symbolique intuitive. L'essence du Web est la notion d'interactivit. Interactivit entre les pages de votre site, interactivit entre votre site et les autres sites prsents sur le Web, interactivit entre le Web et les autres outils disponibles sur Internet (qu'il s'agisse des moteurs de recherche, des e-mails, des listes de diffusion, des forums, des fichiers tlcharger, etc.). Interactivit, enfin, entre vos visiteurs et l'auteur. Tout concepteur d'un site Web doit toujours veiller crer cette interactivit que ce soit simplement par de adresses e-mail cliquables, des formulaires (livres d'or) caractre plus "officiels", Pour ma part, je n'ai jamais, pour visiter un site, tlcharg un plugin, chang de browser, modifi la rsolution d'cran ou le nombre de couleurs de mon ordinateur. Et je ne crois pas tre le seul ! Un site s'il peut tre optimis pour une configuration dtermine, doit rester compatible quel que soit le visiteur. Juste retour aux sources de l'esprit d'universalit du Html et du Web.

2. Architecture d'un site 2.1. Dcoupe de l'information Au royaume de l'hypertexte, la page est reine. 2.1.1. Raisons La raison essentielle de la dcoupe du contenu en petites pages de dimension rduite rside dans un temps de chargement raisonnable pour le confort de linternaute. Et n'oubliez pas que ce fameux temps de chargement comprend non seulement le texte de la page mais aussi les images voire autres animations du style Java, Javascript ou Dhtml. Avec un total de 45 ko, vous serez dans une zone idale tandis quune page de 70 80 ko est considrer comme un maximum pour un temps de chargement acceptable. Des petits morceaux d'information sont plus adapts la lecture sur un cran d'ordinateur que la vision partielle d'un long document. La mmoire immdiate et la synthse instantane de l'esprit humain tant ce qu'elles sont, des pages Web trs longues sont dstabilisantes car elles ncessitent le dfilement vertical et l'obligation de se rappeler les informations ainsi disparues de l'cran. Selon certaines tudes psychologiques, la mmoire court terme comprend entre 4 ou 7 petits lments d'information. En outre, cette dcoupe de l'information en petites units logiques, associe une structure rationnelle, facilite grandement la navigation et la recherche de l'information souhaite. Pour fixer un ordre de grandeur, cette dcoupe de l'information correspondra 2 ou 3 crans soit environ 1/2 1 feuille A4 sans mise en forme ou alors 2 3 feuilles A4 d'une mise en page particulirement are.

2.1.2. Utilit Le dcoupage de l'information en petits morceaux, organiss de faon uniforme est particulirement adapt aux prsentations Web car : peu d'utilisateurs passeront leur temps lire de longs passages de texte sur l'cran. A la lecture en ligne, on prfrera souvent enregistrer les longs documents ou mme les imprimer. le dcoupage de l'information en petites units et le systme hypertexte font bon mnage. En effet, en cliquant sur un lien, linternaute s'attend gnralement trouver un autre morceau d'information lie et complmentaire la prcdente et non un livre complet. Mais ne subdivisez pas trop votre information. Cliquer un lien pour ne trouver que quelques mots ou un petit paragraphe peut se rvler frustrant pour lutilisateur et le distraire du vritable contenu. On utilisera alors plutt (mais sans en abuser) les petites fentres pop-up du Javascript. une forme uniformise du dcoupage et de la prsentation cre une identit votre site. Cette cohrence permettra trs vite vos visiteurs d'acqurir une certaines exprience pour leurs recherches et autres explorations, voire mme de prvoir comment une nouvelle section de votre site sera organise. Vous aurez alors cr "un site o on se sent l'aise", ce qui est une des cls essentielles d'un bon site.

l'essence de la navigation sur le World Wide Web n'est-elle pas l'acquisition d'un savoir partir de multiples morceaux d'information acquis de faon non squentielle ? Ce concept de dcoupage de l'information doit cependant tre flexible et adapt au sujet trait ainsi qu la logique d'organisation de votre site et au confort de votre visiteur. C'est la nature du contenu qui suggrera le meilleur moyen de subdiviser et d'organiser l'information. Ainsi, dans certains cas, des pages plus longues seront nanmoins ncessaires pour traiter compltement un sujet sans distraire le visiteur par une dcoupe intempestive de celui-ci. C'est particulirement vrai lorsque l'on souhaite que l'utilisateur puisse imprimer ou enregistrer un sujet dtermin en une seule tape. 2.2. Structure Sans une structure fonctionnelle, votre site sera un chec mme si le contenu en est pertinent et bien rdig. "La chose la plus importante considrer lorsqu'on prpare le design d'un site Web, c'est la satisfaction des utilisateurs. La facilit avec laquelle ils trouveront ce quils recherchent dterminera la frquence avec laquelle ils reviendront sur le site. Eviter de frustrer les internautes est l'objectif principal du design. Et au bout du compte, savoir structurer l'information qu'on prsente est la base fondamentale d'une exprience russie sur le Web." (Valrie Casey, professeur de Web Design l'Universit de San Francisco) Le but est de fournir l'usager l'information qu'il souhaite en un minimum d'tapes et donc un minimum de temps. Pour autant que des normes strictes existent en la matire, on parle de la "rgle des 3 clics" selon laquelle toute information de votre site doit tre disponible en maximum 3 clics de souris. Il faut donc hirarchiser l'information selon une structure efficiente pour minimiser la navigation vers l'information. 2.2.1. Structure squentielle Le moyen le plus simple d'organiser l'information est la faon squentielle C'est en quelque sorte le retour au livre avec sa narration linaire : chapitre 1, chapitre 2, chapitre 3...

Les narrations, les lignes du temps ou autres exposs ncessitant un ordre logique se prtent ce genre de structure ainsi que les thmes progressant du gnral au particulier. La structure squentielle est aussi particulirement adapte aux sites d'apprentissage ou tutoriaux o le passage une page suivante requiert des pr-requis exposs la page prcdente. Cependant, cette structure squentielle ne sera utilise que pour des petits sites (ou des parties de sites plus grands) car de longues squences narratives ou explicatives ncessiteront souvent une structure plus sophistique pour rester comprhensives. 2.2.2. Structure hirarchise La structure hirarchise est une des meilleures faons d'organiser des blocs d'information complexes. Ce schma d'organisation s'adapte particulirement bien au site Web car les diffrents thmes dpendent ainsi d'une seule et unique page soit la page d'index ou page d'accueil [homepage]. En outre les utilisateurs sont souvent familiariss avec les diagrammes hirarchiss comme les organigrammes et trouveront la mtaphore facilement comprhensible pour les aider dans leur navigation.

Cette organisation hirarchise en blocs d'information indpendants ncessite cependant un gros travail d'analyse pralable de votre contenu (notions pr-requises, doublons d'information...) car cette structure hirarchise ne sera efficiente que si vous avez soigneusement organis l'information disponible. 2.2.3. Structure en rseau Ces mini Webs fonctionnent bien pour des petits sites destins des utilisateurs hautement qualifis en qute denrichissement ou de perfectionnement plutt qu' la comprhension basique d'un sujet. On travaillera ici les associations dides et le libre cours de la pense. Chaque visiteur parcourra votre site de faon unique selon ses propres intrts et sa propre dmarche vers linformation sans avoir limpression dtre dirig. Ce type de structure exploite la pleine puissance des liens vers des informations lintrieur du site et vers des informations situe dans dautres sites de la toile.

Cette structure en rseau se rvle cependant ardue mettre en place et finalement peu pratique surtout pour les internautes novices dans le sujet trait. Ceux-ci auront alors lide dun site confus, difficilement exploitable. 2.2.4. En pratique Rares sont cependant les visiteurs qui suivront la lettre le schma de votre structure et ils retrouveront bien vite leurs habitudes de navigation propres au Web soit de faon libre et non-linaire. Paradoxalement, ce "surf" sur les diffrentes informations ne se rvle efficace qu'avec une structure bien organise qui complte les lignes de force de la conception de votre site. 2.2.5. Structure en volution Pour les sites qui connaissent une croissance rapide et de nombreux dveloppements, l'objectif sera de garder un quilibre entre les diffrents blocs d'informations. Et ce n'est pas toujours une chose aise... Le feedback de vos utilisateurs et une analyse personnelle critique de votre site vous aideront dterminer si certains passages ne sont que pauvrement structurs ou mme si votre structure initiale est devenue, avec les diffrentes ajoutes, compltement obsolte.

L'objectif sera de maintenir une hirarchisation quilibre qui aidera l'accs rapide l'information et une comprhension intuitive de la faon dont les lments sont organiss. Exemple dune structure quilibre

2.2.6. Sources Le contenu de cette page consacre la structure dun site Web est fortement inspir de lexcellent site Web Style Guide qui fait rfrence en la matire. Les graphiques de cette page sont issus de la mme source. Copyright Lynch & Horton, 1997. Yale University. http://info.med.yale.edu/caim/manual/

2.3. Outils de navigation Un visiteur qui se perd est un visiteur qui ne reviendra plus. Votre structure en place, il faut encore fournir vos visiteurs, les outils de navigation indispensables pour une exploration aise de votre site. Ces outils de navigations sont aussi indispensables la circulation dans votre site que les panneaux de circulation du rseau routier. Ces outils de navigation se prsentent par des liens sous forme de texte ou seront plus agrablement conus sous forme de petites images, boutons, icnes ou barres dinformation. On veillera alors un graphique simple et la symbolique intuitive car ils se doivent dtre efficaces mais aussi de rester discrets par rapport au contenu et au visuel proprement dit. Ces outils de navigation qui se retrouvent de pages en pages contribuent aussi crer lidentit graphique de site. Quelques principes gnralement adopts par tous les concepteurs de site semblent se dgager. Les utilisateurs dun site doivent toujours tre capables de revenir tout moment vers la page daccueil [Home ou Index] ou vers les principaux points de navigation. Chaque page dun site comporte donc un lien vers cette page daccueil ou la page servant de dispatching. De plus, si le sens du contenu global y invite, on prvoira des possibilits de retour la page prcdente ou davancement la page suivante.

Les barres qui proposent de multiples choix dans un espace rduit ont de nombreux adeptes car elles peuvent ainsi servir den-tte de page et donner une forte cohrence visuelle au site. Mais dautres prfreront lusage de frames ou de tableaux (voir plus loin dans le site).

La tendance actuelle sur le Web est de proposer plusieurs outils de navigation. Le premier sera celui qui vous guidera lutilisateur dans la navigation du site selon les directives de l'auteur. Les autres donnent pleine libert dexploration au visiteur. 2.4. Page d'accueil Pas une couverture mais plutt un sommaire visuel et informatif. Lorsque l'internaute clique sur votre site partir d'un moteur de recherche ou encode directement votre adresse au clavier, c'est sur cette page qu'il aboutit. Il vous reste alors 30 secondes pour le convaincre de parcourir les pages de votre uvre et vous rcompenser ainsi de toutes vos heures de travail. C'est dire toute l'importance que l'on accordera la conception et ralisation de cette premire page. Cette page d'entre de votre site prend le nom de page d'index (en rfrence l'adresse index.htm), de "homepage" ou de page d'accueil. Pour les sites structure hirarchise, cette page est tout naturellement celle qui est au sommet de la hirarchie et vers laquelle on pourra revenir partir de toutes les pages du site. Les usages (ou le bon sens) dictent les lments constitutifs de celle-ci : le nom ou le titre de votre site qui en reprendra l'objet. un sommaire (dtaill ou synthtique) qui donnera une vue d'ensemble du contenu et amorcera les outils de navigation. un lment visuel (logo, image, icne symbolique) pour l'aspect attractif. un court texte qui reprend le descriptif fourni aux moteurs de recherche (excellent pour le rfrencement et le classement). le nom de l'auteur et un lien vers l'adresse lectronique de celui-ci. la date de ralisation ou de la dernire mise jour. etc. On vitera dans la page d'accueil : toute forme de publicit mensongre quant au contenu. Il m'arrive de remercier par e-mail des auteurs de site qui ont l'amabilit (ou l'honntet) de dire en termes lgants "Ce site n'est pas ..." et pargner ainsi aux internautes toute navigation et perte de temps inutile. des liens externes vers d'autres sites. C'est assurment sympa de votre part mais pourquoi risquer de perdre un visiteur potentiel avant mme qu'il ait dcouvert vos pages. de devoir utiliser les barres de dfilement vertical. Au-del de 2 crans, votre page d'accueil risque d'tre beaucoup trop dtaille et donc pas assez attractive. A la limite, toute l'information importante devrait tre concentre sur le premier cran.

10

un temps de chargement prohibitif car la tentation sera grande pour un site inconnu de cliquez le bouton "Prcdent" et de retourner aux sites concurrents proposs par le moteur de recherche. une page d'accueil avec des frames car cela en complique grandement le rfrencement et le classement auprs de certains moteurs de recherche.

La page daccueil est la page la plus importante de votre site. Cest elle, et elle seule, qui par son attrait dclenchera le clic "gagnant" du visiteur hsitant vers votre uvre. Faites votre exprience personnelle sur la toile, comparez, cogitez et laissez parler votre crativit. Sans perdre de vue que votre stratgie pour sa conception retiendra toutes les lignes de force de votre rflexion pralable et rejoindra autant en contenu, visuel et fonctionnalit les objectifs et le public vis de votre site. 3. Rgles de l'art Crer un site Web est une technique jeune qui nexiste que depuis quelques annes. Toujours en plein dveloppement, il n'existe pas encore de vritables "rgles de l'art" mais je n'ai pas pu rsister la tentation de rassembler ci-aprs quelques rgles ou normes qui, dfaut d'tre toujours explicables, sont gnralement respectes en matire de publication sur le Web. La rgle des trois clics. Toute information dans un site doit tre accessible en 3 clics de souris maximum partir de la page d'accueil. La rgle des trois crans. La longueur d'une page ne doit pas dpasser 3 5 crans (grand maximum) pour limiter le dfilement vertical. Le premier cran d'un page doit rassembler le maximum de l'information et inviter en poursuivre la dcouverte. Un pourcentage important des internautes n'utilisent pas ou peu le dfilement vertical. Le dfilement horizontal de la page est viter (sinon proscrire) quelle que soit la rsolution d'cran de votre visiteur. Dbrouillez-vous... Un cran ne doit tre rempli qu' 50% de texte et de graphiques. Le reste est consacr au fond d'cran. Quels que soient vos gots en matire artistique, le texte doit toujours rester lisible par rapport au fond d'cran. Comme dans la vie de tous les jours, le Web comporte son lot de mal voyants. Pensez-y. Prvoir une possibilit de retour la page d'accueil chaque page du site. Un visiteur perdu est un visiteur du. Ecrire des phrases courtes la construction simple. N'oubliez pas de communiquer... La lecture de texte sur cran se rvle vite fatiguante. Des lignes de texte de 60 90 caractres maximum semblent tre un bon compromis surtout si on sait que la tendance est aux rsolution d'cran de 800 x 600 et 1024 x 768 ... Si aprs les 10 secondes (*) suivant un clic, il ne se passe rien, l'internaute sinquite, s'ennuie, s'impatiente ou quitte la page. [* adapter selon votre capital de patience]. Tous les liens seront dment vrifis et valides. A ce stade de dveloppement de la publication Internet, un lien non valide devient (presque) inadmissible. Sans oublier tout de ceci, soyez toujours vous-mme et si possible cratif.

11

4. En particulier 4.1 La rsolution d'cran Les concepteurs dbutants posent souvent la (mauvaise) question : "Pour quelle rsolution d'cran doit-on concevoir un site ?". C'est une mauvaise question car vous ne connatrez jamais la rsolution d'cran de votre visiteur. Et une annotation du genre "site optimis en 800 x 600" est assez illusoire car les internautes qui changeront leur rsolution uniquement pour voir votre site sont rarissimes. Il existe cependant certaines solutions pour rendre votre site esthtiquement compatible avec n'importe quelle rsolution d'cran. 4.1.1. Prsentation Beaucoup de gens pensent que la rsolution d'cran (ou "espace du bureau" selon Microsoft) dpend de la taille de l'cran. Ce qui est faux. On peut avoir un cran de 14 pouces et avoir une haute rsolution ou avoir un cran de 21 pouces et n'avoir qu'une rsolution d'cran de seulement 640 x 480. 640 signifie 640 pixels de faon horizontale et 480 pour 480 pixels de faon verticale.

La plupart des moniteurs peuvent afficher diffrentes rsolutions d'cran. C'est la carte graphique qui dtermine les diffrentes rsolutions d'cran possibles pour un ordinateur donn. Ainsi, il y a quelques annes, avec les cartes graphiques de 1 mga, la norme tait en 640 x 480, ce qui tait confortable pour les applications bureautiques. Avec l'volution de ces cartes, le 800 x 600 est apparu. Et avec l'introduction sinon la gnralisation des cartes graphiques 4 mgas de mmoire, les rsolutions 1024 x 768 ou mme 1280 x 1024 sont possibles dfaut d'tre frquentes. Les internautes suivent bien entendu cette volution technologique et la rsolution 640 x 480 qui tait la norme il y a encore quelques annes, est en voie de disparition au profit de rsolutions plus hautes. Avec toutes les prcautions d'usage quant la prcision des chiffres suivants et aprs recoupement de plusieurs sources, on peut ( fin 1999) se rfrer au tableau suivant qui donne une ide de la rpartition des diffrentes rsolutions utilises pour le Web. Rsolution 640x480 800x600 1024x768 1280x1024 autres Pourcentage 15 % 55 % 24 % 2% 4%

Comme vous voyez, la moyenne des utilisateurs du Web utilisent une rsolution d'cran de 800x600 [et en 65.536 couleurs]. Mais crire pour la moyenne n'est pas tout... Il reste les 45 % autres internautes pour qui votre site risque d'tre une vritable catastrophe.

12

4.1.2. Illustration du problme Le premier exemple montre une page avec un image reprenant les lettres de lalphabet. Avec une rsolution 800x600, cette image sadapte parfaitement lcran. Par contre, cette mme page, vue en 640x480 est dj beaucoup moins sympathique. Lutilisateur devra non seulement faire appel au dfilement vertical pour voir lentiret des lettres mais galement au dfilement horizontal car les lettres K et L ont disparue de lcran. Si le dfilement vertical est acceptable car finalement indispensable ds quune page est dune certaine consistance (et encore mfiez vous des novices du Web qui ne lutilisent que trs peu), le dfilement horizontal est bannir car trop inconfortable pour votre visiteur.
Rsolution 800x600 Rsolution 640x480

Le second exemple tente d'illustrer les diffrences de mise en page et surtout la longueur des lignes de texte dune rsolution lautre. Si une page reprend principalement du texte, plus la rsolution est haute, plus la ligne de texte sera longue et donc plus la lecture de ce texte lcran sera fastidieuse. Lire du texte sur un cran en 1280x1024 reviendrait lire un journal o le texte serait imprim dun bord lautre - sans colonnes Pas pratique du tout et il faut avoir de bons yeux !
Rsolution 800x600 Rsolution 640x480

4.1.3. Quelques solutions Il faut bien admettre quen 640, le composition de la page est un peu trique. Avec des rsolutions plus hautes, on peut concevoir des pages plus ares et aux proportions plus quilibres. En outre, cette largeur supplmentaire permet gnralement de prvoir des menus de navigation omniprsents sur chaque page du site. Passons en revue quelques solutions pour garder une certaine compatibilit par rapport aux diffrentes rsolutions possibles.

13

On limitera la largeur des images environ 600 pixels mme pour les sites idalement conus en 800x600 ou en rsolution plus grande encore afin dviter de devoir utiliser les barres de dfilement horizontales, sous des rsolutions infrieures. Cette limitation vaut aussi pour les tableaux et les frames labors avec une largeur fixe en pixels. On pensera inclure les longs passages de texte dans des tableaux ( bordure invisible) denviron 600 pixels maximum. On obtiendra ainsi des lignes de texte de 60 90 caractres, ce qui semble tre une norme acceptable pour un confort de lecture lcran. On se mfiera des arrire-plans sous forme dune fine bande horizontale. Il faut les prvoir dentre avec une largeur de 1280 pixels afin quils sadaptent toutes les rsolutions possibles sans devoir se rpter horizontalement, ce qui entrane gnralement des effets non dsirs et dsastreux (raccord). Comme toujours pour la cration de sites Web, testez, testez encore et testez toujours. Finalement (voir les remarques sur les images et le texte), on rencontre de plus en plus de sites qui sont conus en 600 pixels de large pour tre vus en 800x600 ou plus. Le reste de la largeur tant un arrire-plan neutre. La page reste alors toujours bien lisible quelque soit la rsolution.
Rsolution 640x480 Rsolution 800x600

4.1.4 Remarque finale Avec le Javascript 1.2, on peut maintenant dtecter (sans pouvoir la modifier cependant) la rsolution d'cran de linternaute et le rediriger automatiquement vers une page spcialement conue pour cette rsolution [screen width et screen.height]. Intressant srement mais cela quivaut alors crire quasiment un site pour chaque rsolution. Mais quel boulot ! 4.2. La zone de scurit En fonction de ces diffrentes rsolutions dcran possibles et des modifications quils apporteront votre site, est n dans la pratique de la publication Web, le concept de la zone de scurit. Celle-ci est une zone qui, quelle que soit la rsolution dcran, le systme dexploitation ou le navigateur utilis, sera vue parfaitement par linternaute. Cest aussi la partie de la page Web qui apparatra en premier lil de votre visiteur et dans laquelle on regroupera le maximum dinformations littraires ou graphiques (vritable synthse de la page) qui linciteront utiliser le dfilement vertical pour poursuivre lexploration de la page. Pour une rsolution dcran toujours possible de 640x480, la largeur est denviron 600 pixels car il faut tenir compte des marges et de la barre de dfilement. La hauteur, compte tenu des diffrentes barres doutils et barres dtat du navigateur, sera quant elle denviron 350 pixels.

14

Zone de scurit du navigateur

On souhaite parfois que le visiteur puisse imprimer une page. Fort de votre exprience dinternaute, vous ntes pas sans ignorer que limpression dune page Web nest pas sans surprises, spcialement lorsque la page comporte des images. Notons tout dabord que le langage Html na pas t conu pour limpression. Cest le navigateur qui recompose la page Web de la largeur de lcran la largeur (plus petite) dune feuille A4. Si la page a t conue avec du texte avec retour automatique du chariot ou avec des tableaux exprims en pourcentage de la fentre, cette recomposition seffectue sans problmes. Par contre, si la page comporte des images qui dpassent une largeur de 530 pixels ou si des tableaux avec une largeur exprime qui excde les 530 pixels, le risque est grand que certains lments de limage ou du tableau napparaissent pas limpression. Surtout si la page destine tre imprime comporte des images, la zone sre dimpression devient 530 pixels de largeur pour 710 pixels de hauteur. Selon limportance attache au document, il nest pas inutile de tester cette impression avec diffrents types dimprimante. Il est dans certains cas plus sr de recourir un document tlcharger du type PDF (Adobe Acrobat) qui est universel et vraiment conu pour limpression.
Zone de scurit pour limpression

15

4.3. La mise en page Classique ou "dlire" ? Livresque ou audiovisuel ? Comment allez vous prsenter votre information sur ce mdium particulier quest lcran de votre visiteur reli la toile ? Dun faon classique, quasiment livresque ou, profitant des dernires technologies en matire de publication sur le Web, puiserez-vous votre inspiration dans les crations audiovisuelles comme la tlvision et spcialement ses bandes annonces ou ses spots publicitaires ? Le point de vue du classique La transmission dun savoir se fait, autant pour lauteur que pour le lecteur, dune faon structure et claire. On ne peut passer outre lhritage culturel de sicles ddition au risque de dcontenancer le visiteur. Titres, chapitres, sous-chapitres, ventuellement en-tte et pieds de page apportent une hirarchie du contenu qui permettra tout au long de lexpos daller du principal au particulier et qui induira ainsi une structuration de la connaissance. Clart et nettet de la mise en page restent et resteront le matre mot de votre expression. Les animations et autres effets visuels ou dynamiques ne font que distraire le lecteur du vritable contenu et crer la longue un sentiment d'inconsistance pour finalement le lasser de votre site. Le Web restera avant tout un formidable rservoir dinformations mme si certains veulent en faire un parc de loisirs. Il importera devant cette profusion dinformations, qui ira nen pas douter de faon croissante, dapporter une information pertinente, dtaille, actualise et surtout facilement accessible. La vritable dynamique du Web ne rside pas dans ces animations que lon dit rvolutionnaires, mais dans la dmarche active de linternaute vers linformation quil souhaite trouver. Cest cette information quil faut lui donner, pas des "mots qui bougent"... Au royaume du Web, plus que jamais le contenu sera roi. Le point de vue du "dlire" Avec les derniers dveloppements du Javascript, du Dhtml voire de Flash, la mise en page des sites Web sera profondment bouleverse. Les diverses animations sur le texte ou les images, pour autant qu'elles ne soient pas inutilement gratuites, viennent renforcer la transmission de l'information. Le livre n'est pas le seul moyen de communication. Il y a aussi l'audiovisuel et les prsentations multimdia. Les publicitaires l'ont bien compris et leurs spots la tlvision ne font plus que raconter leur histoire de la faon la plus convaincante possible mais par des effets dynamiques attirent le regard et l'esprit pour tantt faire ressortir un mot ou un logo ou tantt synthtiser un message. Il est vident que le contenu ne suffit plus et que c'est le message qui sera transmis de la faon la plus performante qui l'emportera. Les gens ne lisent plus ou trs peu... par contre ils passent des heures regarder de faon consciente ou non leur poste de tlvision. Consciemment ou non, ils s'attendent retrouver lors de leur exploration du Web, la mme forme d'expression et le mme environnement visuel. Le langage Html et ses dveloppements annexes possdent maintenant tous les outils pour mettre en place son propre mode d'expression, cratif et dynamique. En conclusion Bien au-del d'un exercice de style, ces deux points de vue ne sont pourtant pas inconciliables. La mise en page sera dicte par la densit du contenu et surtout par le public vis. N'oubliez cependant jamais que cette mise en page doit tre au service de la transmission de l'information et rester claire, nette et efficace. Et si on se posait la question de savoir quoi ressemblera la mise en page d'un site Web d'ici 5 ou 10 ans...

16

4.4. Frames ou tableaux Les frames [cadres] permettent de diviser l'cran en 2 ou plusieurs fentres et d'afficher dans chacune de celle-ci des documents Html distincts. Ce systme offre une alternative puissante pour la conception visuelle et l'organisation de la navigation d'une publication Web. Les frames, introduits sous Netscape 3, n'tait alors (1996) pas reconnus par les autres navigateurs et donc d'un emploi limit pour peu que l'on souhaitait que le site soit visible par le plus grand nombre. Adopts par Microsoft partir d'Internet Explorer 3 et ses dclinaisons suivantes ainsi que par d'autres navigateurs rcents, on peut affirmer qu' l'aube de l'an 2000, il n'existe quasiment plus de raisons de compatibilit l'utilisation des frames dans un site. En outre la migration vers une rsolution d'cran plus grande (800x600 au lieu de 640x480) arrange visuellement bien les choses. Pourtant les frames gardent leur part de dtracteurs qui prfrent garder les prsentations sous forme de tableaux. AVANTAGES FRAMES Simplicit du code. Menu toujours prsent l'cran. Riches possibilits en Javascript. Code moins visible pour les dbutants. Bien que les frames ne soient pas implants directement dans certains diteurs Html, leur criture est simple. Cette simplicit du code se paie par une grande rigueur au niveau des attributs des balises. Les frames restent, pour les concepteurs dbutants, un des meilleurs moyens pour "semmler les pinceaux". Avec la division de l'cran en fentres, la tentation est grande d'en rserver une pour y mettre le menu (complet) des points abords dans le site et offrir ainsi un outil de navigation qui sera toujours prsent sous les yeux de l'internaute. Ce genre de frame spcialement apprci pour les sites dont le contenu est appel se dvelopper frquemment car il suffira alors de modifier le seul fichier qui apparat dans cette frame. Pour les concepteurs experts, les frames et surtout les frames invisibles, prsentent de multiples possibilits - pour passer des valeurs d'une page l'autre (en Javascript). - pour masquer des donnes juges confidentielles (compteurs, statistiques). - pour prcharger des images dans le cache. - etc. Bien que lastuce ne fera pas long feu, laccs au code des pages incluses dans les frames est un peu moins ais pour les internautes dbutants. INCONVENIENTS FRAMES Rfrencement dlicat sur certains moteurs de recherche (Hotbot). Barre de dfilement pas trs esthtique. Manipulations plus difficiles pour les dbutants. Non compatible avec certains (rares) navigateurs texte. Le rfrencement auprs de certains moteurs de recherche, spcialement ceux qui scannent le texte de la page, se rvle une opration prilleuse voire impossible car la page initiale de frames ne comporte que quelques lignes de code Html. On ne se lancera dans une page d'accueil avec des frames qu'avec une connaissance pointue des balises "Meta" et des trucs et astuces de rfrencement.

17

La barre de dfilement introduites par dfaut, et par ailleurs bien pratique, est souvent d'une esthtique douteuse dans l'ensemble visuel de votre page. Bien entendu, il est possible de la faire disparatre [border=0 frameborder=no framespacing=0] mais si cela fonctionne visuellement trs bien sous une rsolution d'cran dtermine (exemple 800x600), il est quasi certain qu'une partie de votre menu, par exemple, sera inaccessible et donc impossible consulter, sous une rsolution infrieure (640x480). L'impression et l'enregistrement de la page sont rendus plus dlicats voire impossibles pour les internautes dbutants. Quelques rares navigateurs ne reconnaissent pas encore les frames mais avec Netscape, Internet Explorer et Opra qui reconnaissent les frames, on doit quand mme couvrir 95% des navigateurs utiliss sur le Web. AVANTAGES TABLEAUX Prsentation excellente. Compatible avec tous navigateurs. Vritable BABA du langage Html, les tableaux sont bien repris par les diffrents diteurs du march. Et cest tant mieux car ils sont trs utiles pour la mise en page, pour "dessiner" une page Web au millimtre prs. Jai lhabitude de dire "En publication Html, tout est tableaux". Que ce soit pour crer un alignement, une composition de page ou un menu de navigation, les tableaux offrent toujours une prsentation impeccable et compatible avec (vraiment) tous les navigateurs. INCONVENIENTS TABLEAUX Code entier rpter pour chaque page crer. Lourdeur du code tlcharger avec certains navigateurs. Encore quelques diffrences entre Netscape et Internet Explorer. Construire un menu de navigation qui se retrouve sur chacune des pages d'un site peut se rvler fastidieux car il faudra rpter pour chaque page le code entier. Heureusement qu'il y a le copier/coller. Plus embtant cependant, c'est lorsque le site connat de frquentes mises jour ou ajoutes. Il vous faudra alors modifier ce menu de navigation dans toutes les pages du site alors qu'avec un menu de navigation dans une frame, il suffit d'ajouter quelques lignes dans le fichier en question. Le navigateur compose les tableaux de la page partir des balises du langage Html. Si votre page comporte un grand tableau avec de nombreuses lignes et colonnes, si ce tableau initial comporte de nombreux autres tableaux imbriqus, l'opration de composition de la page peut prendre un certain temps et allonger le temps de chargement. On vitera donc les trs grands tableaux bien compliqus. La solution consiste diviser ces grands tableaux en plusieurs tableaux plus petits. Il subsiste encore quelques diffrences dinterprtation des balises des tableaux entre les navigateurs Netscape et Internet Explorer. Mais cest une (triste) habitude. 4.5. Typographie Il faut bien admettre quen publication Web, ce nest pas vident de composer avec les polices de caractres... Et cest peut-tre finalement trs bien ainsi ! En langage Html, on peut utiliser nimporte quelle police de caractre mais la condition que celle-ci soit installe sur lordinateur de votre visiteur. Ainsi, si vous crivez tout votre site avec la police Amelia et si cette police nest pas installe sur le poste de votre visiteur, celui-ci verra votre site dans la police par dfaut de son navigateur soit gnralement en Times New Roman.

18

La solution la plus utilise ce jour consiste mettre certains mots comme les titres dans une police diffrente et de les capturer sous forme dimage. Mais ce nest pas la solution miracle spcialement en ce qui concerne le rfrencement par les moteurs de recherche et pour le temps de chargement. Une solution consiste employer les polices par dfaut du systme dexploitation, polices que tout utilisateur est sens avoir sur sa machine. Mais on ne peut pas dire quelles apportent grand chose de plus que les classique Times New Roman ou Arial.
Polices par dfaut pour Windows 95 et Macintosh

source : Web Style Guide http://info.med.yale.edu/caim/manual/

Dans ce chapitre consacr aux polices, il me semble intressant de relever que le rendu des polices est diffrent selon le systme dexploitation. En effet, avec les navigateurs sous Windows, les caractres (dune mme police) apparaissent un peu plus grand que sous Macintosh. Quand je vous disais quen langage Html, on na jamais le contrle absolu du document !
Taille de certaines polices sous Windows et Macintosh

19

source : Web Style Guide http://info.med.yale.edu/caim/manual/

La vritable solution pour que votre site dispose de polices un peu originales existe mais est ce jour [fin 1999] encore dun emploi rare et rserv aux sites Hi-Tech. Cette solution sappelle PFR (Portable Font Resource) ou encore Dynamic Fonts. La police que vous souhaitez utiliser pour votre page ou votre site est dabord traite par un programme spcifique pour en faire un fichier tlchargeable, compact, qui prendra lextension pfr. Lors du chargement de la page par votre visiteur, ce fichier est appel tout comme un fichier dimage gif ou jpeg. Cest la solution davenir mais encore au stade exprimental. Elle est pour linstant freine par leur implmentation diffrente sous Netscape et Internet Explorer [comme par hasard...] et le fait que les programmes pour crer ces fichiers pfr sont des programmes propritaires et donc payants (ex : HexWeb Typograph de HexMac Software Systems). Mais on sort un peu du cadre de cette partie consacre larchitecture dun site Web. Finalement, la seule solution raliste et compatible consiste utiliser les polices par dfaut. En outre, le langage Html ne vous propose que 7 tailles de police. On ne peut pas dire que les possibilits soient plthoriques. Cette limitation (qui rappelle bien lessence textuelle du Web) sadapte finalement bien un contenu de qualit et une mise en page sobre. Les nuances ou les effets de la communication sont chercher ailleurs.

Architecture d'un site Web www.ccim.be/ccim328/archi/index.htm copyright 1999 Vanlancker.Luc@ccim.be

Un mot d'encouragement ou un compliment fait toujours plaisir. Critiques et suggestions seront aussi examines avec attention.

20