Conception de site web

La création et la conception de site web ou web design est la conception de l'interface web : l’architecture interactionnelle, l’organisation des pages, l’arborescence et la navigation dans un site web. La conception d'un design web tient compte des contraintes spécifiques du support Internet, notamment en matière d’ergonomie, d’utilisabilité et d’accessibilité.

Le web design réclame donc des compétences en programmation, en ergonomie et en interactivité, ainsi qu'une bonne connaissance des contraintes techniques liées à ce domaine. Ces contraintes techniques incluent la diversité des terminaux web et de leurs affichages, l'accessibilité, les spécificités des différents langages et processus, la portabilité, le respect des recommandations du W3C, etc.

Le web design d'un site se présente en premier temps sous forme de maquette fonctionnelle avec des spécifications techniques : ergonomie, charte graphique, identité visuelle, marketing, interactivité.

Un site web peut être constitué par une simple page statique 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 interactif avec des services programmés en Java, PHP ou autre langage serveur, des formulaires supposant un traitement en JavaScript, ou Ajax. Il peut reposer sur des technologies de base de données, par exemple MySQL ou MongoDB.

Histoire

Capture d'écran du navigateur World Wide Web

Le berceau du Web 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 par une équipe de chercheurs notamment sous l'impulsion de Tim Berners-Lee et son collaborateur Robert Cailliau, ainsi que d'autres chercheurs ayant à leur manière collaboré au projet initialement baptisé World Wide Web. À l'origine le projet World Wide Web fut conçu et développé "en combinant trois technologies qui sont les éléments de base du Web, c'est-à-dire, 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 permet 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 partager les informations utiles à leurs activités, tissant ainsi la première toile (en anglais : Web) sur le Net.

Les précurseurs de l'internet ne s'arrêtent pas aux bases combinatoires 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 mais rapidement rebaptisé Nexus pour éviter toutes confusions avec le nom World Wide Web qui lui s'écrit avec des espaces. Ils réunissent ainsi les éléments indispensables constituant le premier site Web accessible à un public utilisant 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 lui-même fut créé au CERN et était hébergé sur l'ordinateur NeXT de Tim Berners Lee, L'idée de base du projet World Wide Web était de combiner les technologies des ordinateurs personnels, des réseaux informatiques 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 navigateur WWW et décrivait les principales caractéristiques du web. Le site contenait des explications sur la manière d'accéder aux documents d’autres personnes, comment 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 informations sur la Toile, (voir tout premier site Web)... faisant de Tim Barners-Lee le premier concepteur de site Web sur internet.

Premiers pas

Au début, les sites internet étaient écrits en HTML basique, un langage qui donne aux sites internet une structure 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 communications préalables, les utilisateurs pouvaient facilement 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 "Hypertext Mark-up Language" ou HTML, devint plus fourni et flexible. Un nouvel élément, les tableaux, dans lesquels 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 utilisaient 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 dynamique, sans nécessiter de plug-in ou d'applications spécialisé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

En fonction du type de site, du contexte et des moyens disponibles 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 rentabilité, 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 attendus, principes de navigation
   • Choix d'une agence Web (dans le cas d'une sous-traitance du projet)
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, iziSpot) ou texte (exemples : Bluefish, Emacs, Notepad++...).
3. Conception :
   • Création et rédaction du cahier des charges
   • É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 systè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 (formulaire, services, etc.)
   • Tests unitaires
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é, inscription dans des annuaires...
   • La mise à jour : la mise à jour est une action fondamentale de la vie d’un site web. Elle consiste à actualiser, à modifier et à faire évoluer le contenu graphique, textuel, visuel et même la structure et les fonctionnalités du site web.
   • La sauvegarde : quel que soit le type de votre site web, statique ou dynamique, il est exposé à 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 données du site web (Base de données, contenus (documents, images, textes…) et tous les paramé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 consiste en général à s’assurer de son bon fonctionnement ; on peut distinguer quatre types de maintenances : La maintenance corrective, La maintenance préventive, La maintenance évolutive, La maintenance adaptative

L'accessibilité du site est une donnée à prendre en compte à chaque étape à partir de la mise au point de la structure des pages. Il en est de même du référencement dont la stratégie peut être mise en place dès la conception. Des principes du référencement sont également à prendre en compte lors de la création des gabarits, l'intégration des pages, la rédaction des contenus, le lancement du site, la maintenance.

L'ergonomie intervient également à toutes les étapes : conception, recette et audits, amélioration continue. Jakob Nielsen Ph.D est un pionnier dans le domaine de l'ergonomie informatique et de l'utilisabilité des sites web.

Constituants des pages

• La structure et le contenu, en HTML ou en XHTML
• La présentation avec les feuilles de style CSS.
• Le graphisme par découpage et intégration des images GIF, JPG, PNG, MNG.
• Le comportement en Javascript qui sera géré côté 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 .
• L'incorporation de multimédias.

Le dynamisme au niveau de la gestion de contenu se fera côté serveur avec des langages de développement de type PHP, Java, ASP, ... fonctionnant avec un serveur Web.

La plateforme Node.js permet la création de serveur web en Javascript, ainsi le dynamisme se fait en Javascript que ce soit côté client, ou serveur.

Le Web design dans les smartphones

Via les terminaux mobiles, on ne vise pas les mêmes objectifs en matière de Web design. Et cela peut pousser à refaire tout le processus de conception si l'on change de public (passage d'un site web vers le mobile)

Lorsque l'on met un site web, il faut d'abord s'assurer qu'il soit accessible sur un mobile, et de manière très rapide. Parmi la communauté des développeurs web, ceux qui visent le marché mobile vous diront que le temps de chargement d'une page est une contrainte très sévère et qui peut nuire à un site.

Pour aider à améliorer l'expérience, Google a publié un outil nommé Pagespeed Insights destinés aux développeurs qui souhaitent des conseils en matière de Web design sur mobile. L'avantage de cet outil c'est qu'il effectue des améliorations que le développeur pourra intégrer à 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 d'informations pour des plus grands terminaux.

La technologie du responsive design

Depuis quelques années, les logiciels et les programmes de site web ont bien évolué, plus besoin d'optimiser les performances et contenu pour la vitesse et l'accessibilité des smartphones.

Désormais, il existe la technologie responsive design qui est intégré dans des logiciels CMS et des templates responsive design. La technologie du responsive design permet de convertir automatiquement l'affichage d'un site web en version mobile, tablette ou PC. Cela sans intervenir sur le design et le contenu des pages web lors de la création du site. Ces techniques du Responsive et Adaptive Design ont fortement contribué à l'évolution du webdesign et du e-commerce ainsi qu'a l'utilisation du mobile.

Web design d'entreprise

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 validation 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.

• Site web e-commerce : l'objectif premier est de transformer les visites en ventes. Le premier KPI affecté au web design est la réduction du taux d'abandon du panier (63 % en moyenne).

• Landing page : l'objectif d'une atterripage est de capter un visiteur pour des sous objectifs diverses : alimenter une base de données mail de suspects, de 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 le visiteur et celui de la landing page dans un objectif d'avoir un maximum de trafic intéressé, adaptation du formulaire de saisie à la cible visée pour avoir un nombre minimal d'abandon de formulaires.

Formation

En France, le Web Design s'enseigne dans de nombreuses écoles de design publiques et privées dans un cursus dédié au graphisme et à la communication visuelle, généralement en 3 ou 5 ans. Au Québec, la conception de sites web s'enseigne dans les cégeps (Collèges d'enseignement général et professionnel), à travers le programme de Techniques d'intégration multimédia, qui se donne en 3 ans. Pour les étudiants adultes, il est aussi possible de se former à travers une attestation d'études collégiales (AEC) en design de sites web ou en médias interactifs, des programmes de formation plus courts, offerts à temps plein ou à temps partiel.

Il est également possible de suivre des formations octroyant une certification professionnelle. Ces formations peuvent se faire à distance par le biais de la formation en ligne ou en présentiel.

Festivals

Les festivals dédiés au web design sont appelés WebJam dont les plus connus sont les Vector Lounge qui se déroulent dans plusieurs villes du monde chaque année à Limoges avec le Webdesign International Festival, Chattanooga, Rouyn-Noranda, Paris avec le Web Flash festival, Annecy, Amsterdam. Ainsi Cre824, est une manifestation 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é).

Notes et références

• Cet article est partiellement ou en totalité issu de l'article intitulé « Web design » (voir la liste des auteurs).

Voir aussi

Bibliographie

• Deborah Mayhew, The usability engineering lifecycle: a practitioner’s handbook for user interface design, Morgan Kaufmann Publishers, San Francisco, 1999.
• Jakob Nielsen Usability Engineering, AP Professional, Cambridge, 1994.
• Jean-François Nogier (2008), du logiciel et design web : Le manuel des interfaces utilisateur, 4^e édition, Dunod.
• ISO 20282, Ease of operation of everyday products
• (en) Philippe de Baeck (dir.), Web Design Handbook, Mul, 2009 (ISBN 978-94-6065-004-8)
• Rob Ford (dir.) et Julius Wiedemann, The Internet Case Study Book, Cologne, Tashen, 2010, 382 p. (ISBN 978-3-8365-1999-1)
• Jennifer Niederst Robbins (trad. de l'anglais par Nathalie Nicoletis), Introduction au Design Web : guide d'introduction à (X)HTML, CSS et les images pour le Web, Paris/Cambridge/Cologne etc., O'Reilly Editions, 2007, 3^e éd., 465 p. (ISBN 978-2-84177-438-8)
• (fr + de) Julius Wiedemann (dir.), Web Design : E-Commerce, Cologne, Tashen, 2006, 191 p. (ISBN 978-3-8228-4055-9)
• (en + de + fr) Julius Wiedemann (dir.), Web Design : Best Studios, Cologne, Tashen, 2006 (ISBN 978-3-8228-4041-2)

Articles connexes

• Site web
• Page web
• Les technologies : CSS, HTML, XHTML, Javascript...
• Accessibilité du web
• Programmation web
• Webmaster
• Utilisabilité
• Ergonomie informatique
• Référencement
• Identificateur de fragment
• Développeur full stack

Liens externes

• Notices d'autorité :

  • BnF (données)
  • LCCN
  • Japon
  • Israël
  • Tchéquie