Conception de site web

Un site web peut être constitué par une simple page sta-
Cet article ne cite pas suffisamment ses sources tique au format HTML éventuellement mise en forme
ou enrichie de CSS incluant des images et des liens vers
d'autres contenus, ou constitué de contenus dynamiques
ou l'on peut greffer des fonctionnalités pour le rendre in-
teractif avec des services programmés en Java, PHP ou
autre langage serveur, des formulaires supposant un trai-
tement en JavaScript, ou Ajax. Il peut reposer sur des
technologies de base de données, par exemple MySQL
ou MongoDB.

Ce modèle est-il pertinent ? Cliquez pour en voir d'autres.
(mai 2016).
Si vous disposez d'ouvrages ou d'articles de référence ou
si vous connaissez des sites web de qualité traitant du
thème abordé ici, merci de compléter l'article en don-
nant les références utiles à sa vérifiabilité et en les liant
à la section « Notes et références » (modifier l'article,
comment ajouter mes sources ?).
La création et la conception de sites ou web design est la
conception de l'interface web : l’architecture interaction-
nelle, l’organisation des pages, l’arborescence et la navi-
gation dans un site web. La conception d'un design web
tient compte des contraintes spécifiques du support Inter-
net, notamment en termes d’ergonomie, d’utilisabilité et
d’accessibilité.
Le web design réclame donc des compétences variées :
en programmation, en ergonomie et en interactivité, ain-
si qu'une bonne connaissance des contraintes techniques
liées à ce domaine : diversité des terminaux web et de
leurs affichages, accessibilité, spécificités des différents
langages et processus, portabilité, respect des recomman-
dations du W3C.
Le webdesign d'un site se présente en premier temps
sous forme de maquette fonctionnelle avec des spécifica-
tions techniques : ergonomie, charte graphique, identité
visuelle, marketing, interactivité.
1 Histoire
Le berceau du Web[1] se situe au CERN (Organisation
Européenne pour la Recherche Nucléaire). C'est au sein
de cette organisation que le Web fut inventé en 1989[2]
par une équipe de chercheurs notamment sous l'impulsion
de Tim Berners-Lee et son collaborateur Robert Cailliau,
ainsi que d'autres chercheurs[3] ayant à leur manière col-
laborée au projet initialement baptisé World Wide Web.
À l'origine le projet World Wide Web fut conçu et déve-
loppé “en combinant trois technologies qui sont les élé-
ments de base du Web, c-a-d, l'adressage web par URL
qui indique la localisation de la ressource sur l'internet,
le protocole de transfert HTTP qui indique la méthode
d'accès, et le Hypertexte Markup langage HTML qui per-
met de structurer des ressources” afin que les personnes
travaillant dans les universités et les instituts du monde
entier puissent librement échanger des documents et par-
tager les informations utiles à leurs activités, tissant ainsi
la première toile Web sur le Net.
Les précurseurs de l'internet ne s’arrêtent pas aux bases
combinatiores des technologies de communication du
web, en 1990 ils développent également le premier
serveur HTTP sur l'environnement NeXTSTEP, et le
client web développés en Objective-C, un navigateur
combiné à un éditeur dénommé WorldWideWeb[4] mais
rapidement rebaptisé Nexus pour éviter toutes confu-
sions avec le nom World Wide Web qui lui s’écrit avec
des espaces. Réunissant ainsi les éléments indispensables
constituant le premier site Web accessible à un public uti-
lisant le principe de disponibilité de type serveur/client
apte à favoriser la mise en commun généralisée dans un
espace créatif.
Le premier site web destiné au projet World Wide
Web[5] lui-même fut créé au CERN et était hébergé
sur l'ordinateur NeXT[6] de Tim Barnes Lee, L'idée de
base du projet World Wide Web était de combiner les

1
2 2
technologies des ordinateurs personnels, des réseaux in-
formatiques et de l'hypertexte pour créer un système
d'information mondial, puissant et facile à utiliser.
Le site Web fit ses premiers pas hors du CERN en 1991,
celui-ci comportait des informations relatives au naviga-
teur WWW et décrivait les principales caractéristiques
du web. Le site contenait des explications sur la ma-
nière d'accéder aux documents d’autres personnes, com-
ment configurer son propre serveur, des enseignements
sur l'hypertexte et les notions de lien hypertexte, des dé-
tails techniques pour créer une page Web personnelle et
des explications sur la manière de rechercher des infor-
mations sur la Toile. (voir tout premier site Web)... fai-
sant de Tim Barners-Lee le premier concepteur de site
Web sur internet.
1.1 Premiers pas
Au début, les sites internet étaient écrits en HTML ba-
sique, un langage qui donne aux sites internet une struc-
ture de base (titres et paragraphes), ainsi que la possibilité
d'utiliser des liens hypertextes. C'était une nouveauté et
c'était fondamentalement différent des formes de com-
munications préalables, les utilisateurs pouvaient facile-
ment ouvrir d'autres pages.
Au fur et à mesure que l'Internet et la conception de site
progressèrent, le langage qui formait les pages, le “Hy-
pertext Mark-up Language” ou HTML, devint plus four-
ni et flexible. Un nouvel élément, les tableaux, dans les-
quels on peut afficher des données, furent vite détournés
de leur objectif initial et furent utilisés comme moyen de
mise en page. Avec l'apparition du CSS et des feuilles de
styles, la mise en page avec les tableaux fut vite considé-
rée comme obsolète. Les technologies modernes qui uti-
lisaient des bases de données, ou le codage côté serveur
(voir CGI, PHP, ASP.NET, ASP, JSP, et ColdFusion),
ainsi que les normes de conception comme le CSS se sont
encore davantage améliorées et ont diversifié les outils de
conception de site.
L'apparition de Flash, développé par Macromedia, qui
permet de réaliser des animations ainsi que de diffuser
du son et de la vidéo, a également changé l'apparence du
web, en offrant de nouvelles cartes aux concepteurs de
sites. Toutefois, Flash est beaucoup plus restrictif que le
HTML car c'est un format protégé par Macromedia, et il
nécessite un plug-in pour être affiché.
Une technique assez récente appelée le codage à distance
a permis une utilisation d'Internet de façon plus dyna-
mique, sans nécessiter de plug-in ou d'applications spécia-
lisées. Le chef de file de ces technologies est AJAX, mais
ce n'est pas la seule technologie existante. Par ailleurs,
AJAX n'a pas encore accédé au statut de norme.
ÉTAPES DE LA CRÉATION
2 Étapes de la création
En fonction du type de site, du contexte et des moyens dis-
ponibles pour le mettre en œuvre, certaines de ces étapes
sont optionnelles voire inutiles. À chacune de ces étapes
correspondent des compétences spécialisées (ergonomie,
architecture de l'information, référencement, rédaction
Web, etc.).
1. Projet :
• Réflexion sur l'objectif du site, sa cible, sa ren-
tabilité, les moyens financiers à engager...
• Réflexion sur l'autonomie souhaitée et le type
de moyens humains pour faire la mise à jour.
• Réflexion sur le contenu : pages, services at-
tendus, principes de navigation
2. Mise en œuvre :
• Dépôt d'un nom de domaine.
• Choix d'un hébergeur.
• Choix et installation d'un Système de gestion
de contenu (exemples : SPIP, TYPO3, Drupal,
Joomla, Wiki, Wordpress,...) ou d'un éditeur
de site Web de type WYSIWYG (exemples :
Adobe Dreamweaver, phpDesigner, Microsoft
FrontPage, NVU, KompoZer, Webself, iziS-
pot) ou texte (exemples : Bluefish, Emacs,
Notepad++...).
3. Conception :
• Établissement d'une structure de pages HTML
ou XHTML.
• Définition d'une arborescence
• Mise au point d'une charte graphique
• Mise au point d'une charte éditoriale.
4. Réalisation :
• Création de pages via le Système de gestion
de contenu ou l'éditeur. Les pages peuvent être
créées individuellement ou reposer sur un sys-
tème de gabarits.
• Mise en place de la charte graphique. Pour
bien séparer la structure de la présentation, les
feuilles de styles CSS sont utilisées.
• Éventuels développements dynamiques (for-
mulaire, services, etc.)
5. Suivi :
• Recette du site une fois prêt.
• Lancement du site : mise en ligne.
• Annonce. Faire connaître le site peut se faire
par plusieurs leviers : annonce, publicité, ins-
cription dans des annuaires...
 3

• La mise à jour : la mise à jour est une ac- • L'incorporation de multimédias.

tion fondamentale de la vie d’un site web. Elle
consiste à actualiser, à modifier et à faire évo-
Le dynamisme au niveau de la gestion de contenu se fera
luer le contenu graphique, textuel, visuel et
coté serveur avec des langages de développement de type
même la structure et les fonctionnalités du site
PHP, Java, ASP,... fonctionnant avec un serveur Web.
web.
La plateforme Node.js permet la création de serveur web
• La sauvegarde : quel que soit le type de votre
en Javascript, ainsi le dynamisme se fait en Javascript que
site web, statique ou dynamique, il est exposé
ce soit côté client, ou serveur.
à plusieurs menaces : crache de serveur web,
piratage, les virus, les bugs…, alors pour des
mesures de sécurité, il est très important de
faire des sauvegardes régulières pour les don- 4 Programmation des services
nées du site web (Base de données, contenus
(documents, images, textes…) et tous les para- Article détaillé : Programmation web.
métrages de votre hébergement, après chaque
mise à jour afin d’éviter la perte des données
et de garantir la continuité de vos services sur
le web.
• Maintenance : la maintenance d’un site web
5 Le Web design dans les smart-
consiste en général à s’assurer de son bon fonc- phones
tionnement ; on peut distinguer quatre types de
maintenances : La maintenance corrective, La Via les terminaux mobiles, on ne vise pas les mêmes ob-
maintenance préventive, La maintenance évo- jectifs en matière de Web design. Et cela peut pousser à
lutive, La maintenance adaptative refaire tout le processus de conception si l'on change de
public (passage d'un site web vers le mobile)
L'accessibilité du site est une donnée à prendre en compte
Lorsque l'on met un site web, il faut d'abord s’assurer qu'il
à chaque étape à partir de la mise au point de la structure
soit accessible sur un mobile, et de manière très rapide.
des pages. Il en est de même du référencement dont la
Parmi la communauté des développeurs web, ceux qui
stratégie peut être mise en place dès la conception. Des
visent le marché mobile vous diront que le temps de char-
principes du référencement sont également à prendre en
gement d'une page est une contrainte très sévère et qui
compte lors de la création des gabarits, l'intégration des
peut nuire à un site.
pages, la rédaction des contenus, le lancement du site, la
maintenance. Pour aider à améliorer l'expérience, Google a publié un
outil nommé Pagespeed Insights destinés aux dévelop-
L'ergonomie intervient également à toutes les étapes :
peurs qui souhaitent des conseils en matière de Web desi-
conception, recette et audits, amélioration continue.
gn sur mobile. L'avantage de cette outil c'est qu'il effec-
Jakob Nielsen Ph.D est un pionnier dans le domaine de
tue des améliorations que le développeur pourra intégrer
l'ergonomie informatique et de l'utilisabilité des sites web.
à son site, mais ces outils ont des limites.
Le web designer doit alors privilégier les performances
et le contenu important sur mobile, puis étoffer la page
3 Constituants des pages d'informations pour des plus grands terminaux.

• La structure et le contenu, en HTML ou en XHTML

• La présentation avec les feuilles de style CSS. 6 Web design d'entreprise

• Le graphisme par découpage et intégration des
images GIF, JPG, PNG, MNG.
• Le comportement en Javascript qui sera géré coté
client par le navigateur.
• La navigation et l'échange de données par
l'intermédiaire du protocole HTTP et l'utilisation
de Web Service ou d'AJAX.
• L'animation en Flash ou en SVG, et depuis fin 2014,
avec certains attributs du CSS3 ainsi que l'utilisation
du Canvas avec le Javascript .
Dans le cadre d'un site web d'entreprise, le web design est
défini selon les objectifs qui lui sont fixés :
• Site web corporate : l'objectif premier est de dé-
velopper la visibilité de l'offre et de la marque.
Les sous-objectifs fixés au web design sont la va-
lidation de la lisibilité de l'identité de la société,
l'amélioration de la qualité du trafic (plus profond),
la facilitation de création d'un capital relationnel
entre les visiteurs et le site web (donc l'entreprise,
optimiser les temps de réponses des pages.
4 10 VOIR AUSSI

• Site web e-commerce : l'objectif premier est de [7] Étude Keyrus-Hybris 2012
transformer les visites en ventes. Le premier KPI
affecté au web design est la réduction du taux • Cet article est partiellement ou en totalité issu de
d'abandon du panier (63 % en moyenne[7] ). l'article intitulé « Web design » (voir la liste des au-
teurs).
• Landing page : l'objectif d'une atterripage est de
capter un visiteur pour des sous objectifs diverses :
alimenter une base de donnée mail de suspects, de 10 Voir aussi
prospects, de demande de contact pré-qualifiées...
trois tâches sont affectées au web design : temps
d'accès, cohérence du message entre celui qui capte 10.1 Bibliographie
le visiteur et celui de la landing page dans un objectif
• Deborah Mayhew, The usability engineering life-
d'avoir un maximum de trafic intéressé, adaptation
cycle : a practitioner’s handbook for user interface
du formulaire de saisie à la cible visée pour avoir un
design, Morgan Kaufmann Publishers, San Francis-
nombre minimal d'abandon de formulaires.
co, 1999.

• Jakob Nielsen Usability Engineering, AP Professio-

7 Formation nal, Cambridge, 1994.

• Jean-François Nogier (2008), du logiciel et design

Le Web Design s’enseigne dans de nombreuses écoles
de design, publiques (ex : Estienne, EPSAA) et pri-
vées (Esam Design, Créapole, MJM, CIFACOM, EEMI,
IESA, École de design Nantes Atlantique) dans un cur-
sus dédié au graphisme et à la communication visuelle,
généralement en 3 ou 5 ans.
web : Le manuel des interfaces utilisateur, 4e édition,
Dunod.
• ISO 20282, Ease of operation of everyday products
• (en) Philippe de Baeck (dir.), Web Design Hand-
book, Mul, 2009 (ISBN 978-9460650048)

• Rob Ford, Julius Wiedemann (dir.), The Internet

8 Festivals
Les festivals dédiés au web design sont appelés Web-
Jam dont les plus connus sont les Vector Lounge qui
se déroulent dans plusieurs villes du monde chaque an-
née à Limoges avec le Webdesign International Festival,
Chattanooga, Rouyn-Noranda, Paris avec le Web Flash
festival, Annecy, Amsterdam. Ainsi Cre824, est une ma-
nifestation américaine de création de site web en 24 h 00
non-stop organisée un peu partout aux États-Unis.
De plus en plus de petits événements apparaissent et se
développent à l'image de MYB “Move-Your-<body>" le
concours Troyen du Web Design depuis deux ans ou de
Paris Web (cycle de conférences sur le Design, Qualité,
Accessibilité).
9 Notes et références
Case Study Book, Cologne, Tashen, 2010 (ISBN
978-3-8365-1999-1)
• Jennifer Niederst Robbins (trad. Nathalie Nicole-
tis), Introduction au Design Web, O'Reilly Editions,
2007, 3e éd. (ISBN 978-2841774388)
• (de) (fr) Julius Wiedemann (dir.), Web Design :
E-Commerce, Cologne, Tashen, 2006 (ISBN 978-3-
8228-4055-9)
• (en) (de) (fr) Julius Wiedemann (dir.), Web Desi-
gn : Best Studios, Cologne, Tashen, 2006 (ISBN 978-
3822840412)
10.2 Articles connexes
• Site web
• Page web

[1] CERN - Berceau du Web • Les technologies : CSS, HTML, XHTML,

Javascript...
[2] CERN - 1989 naissance du Web
• Conception de sites web
[3] CERN - Collaborateurs du projet World Wide Web
• Accessibilité du web
[4] CERN - Vue du Navigateur WWW (WorldWideWeb)
• Programmation web
[5] CERN - Le premier site Web destiné au projet World
Wide Web lui-même • Webmaster

[6] CERN - Ordinateur NeXT de TBL • Utilisabilité

10.3 Liens externes 5

• Ergonomie informatique

• Référencement
• Identificateur de fragment

10.3 Liens externes

• Définition du webdesigner Portail gouvernemental
des métiers du web

• Portail de la programmation informatique

• Portail d’Internet
6 11 SOURCES, CONTRIBUTEURS ET LICENCES DU TEXTE ET DE L’IMAGE

11 Sources, contributeurs et licences du texte et de l’image

11.1 Texte
• Conception de site web Source : https://fr.wikipedia.org/wiki/Conception_de_site_web?oldid=133675827 Contributeurs : Céréales Killer,
Delorme, P-e, Tomdesp, JB, Domsau2, Sebism, Romainhk, ~Pyb, Foxandpotatoes, Hbbk, Darkoneko, Popo le Chien, Poulos, Padawane,
David Berardan, Lgd, Neustradamus, Draky, Ico, Marsu15, Tetue, Mutatis mutandis, Shawn, H2Ok3.14, Boretti, Louperivois, Ségala,
Pautard, ObiWan Kenobi, Xofc, Cyril5555, Bécarre, Manu1400, Moumousse13, Tibauk, Descartes, Liquid-aim-bot, Zyxwvut-Bot, PieR-
RoBoT, Hakili, Legrocha, Chaoborus, DorianM, Rémih, Sub, Pj44300, Starus, Cecidit, Tejgad, Salebot, Akeron, LPLT, Chicobot, Fluti,
Fmondolfo, Thibault Vinchent, Gz260, Lysosome, Hellotheworld, JLM, Kyro, Udufruduhu, Hercule, DumZiBoT, Ir4ubot, Sardur, Rina-
ku, HerculeBot, GrandCelinien, Elfix, MammouthLand, Lgd test, JackPotte, Usabilis, Nissone, Toopixel, Weshganesh, Jack-cnv, Nouill,
Chaojoker, AnneJea, Vincent.vaquin, Yann.lemene, Coyote du 57, Sergeitokus, Lomita, Orlodrim, Bebelsan, Frakir, Rehtse, Ediacara,
Kilith, Artfisa, Renommé 20150211, Franz53sda, Topeil, Trocjack, Marc-André Beauchamp, Bottine, Jules78120, Imlouli, Nebkacrea,
Clicwebdesign, Utilisateur disparu, OrlodrimBot, Gbmmanagement, AvenirWeb, Mcasassus, Mimmo D.DN, Hawk-Eye, Poingweb, Ori-
kriBot, Benji7600, Addbot, KLWeb, Similia, Spanishsahara2, Megzari manal, Mengarajoel, Joelmengara, EPSAA Arts graphiques, Do
not follow, Belychie84, Fugitron, Celousco, LABIDIKamel, Gzen92Bot, Jack7574, Nitscorms210, Louisphilippes et Anonyme : 85

11.2 Images
• Fichier:Applications-internet.svg Source : https://upload.wikimedia.org/wikipedia/commons/7/70/Applications-internet.svg Licence :
Public domain Contributeurs : The Tango ! Desktop Project Artiste d’origine : The people from the Tango ! project
• Fichier:Info_Simple.svg Source : https://upload.wikimedia.org/wikipedia/commons/3/38/Info_Simple.svg Licence : Public domain
Contributeurs : Travail personnel Artiste d’origine : Amada44
• Fichier:Nuvola_apps_kcmsystem.svg Source : https://upload.wikimedia.org/wikipedia/commons/7/7a/Nuvola_apps_kcmsystem.svg
Licence : LGPL Contributeurs : Own work based on Image:Nuvola apps kcmsystem.png by Alphax originally from [1] Artiste d’origine :
MesserWoland
• Fichier:Question_book-4.svg Source : https://upload.wikimedia.org/wikipedia/commons/6/64/Question_book-4.svg Licence : CC-BY-
SA-3.0 Contributeurs : Created from scratch in Adobe Illustrator. Originally based on Image:Question book.png created by User:Equazcion.
Artiste d’origine : Tkgd2007

11.3 Licence du contenu

• Creative Commons Attribution-Share Alike 3.0