Dossier : Lexique du Webdesign

Partager.

Non, je ne te propose pas un lexique du Webdesign parce que cela va te permettre de briller en soirée. Nope.

Par contre, je pense que tout le monde ne se passionne pas pour la “technique” qui se cache derrière un site internet, et c’est bien normal.

Mais le savoir, c’est le pouvoir.

C’est en tout cas ce que j’explique régulièrement à mes clientes depuis que l’une d’entre-elle m’a raconté que son ancienne prestataire lui facturait 170€/an pour une prestation apparemment “très complexe” mais qui, dans les faits, consistait à cliquer sur un bouton…

Si tu n’y connais pas grand chose en site internet mais que tu en as un, ou que tu envisages d’en avoir un, cet article te sera utile pour :

  • mieux l’utiliser
  • mieux communiquer, que ce soit avec tes prestataires ou tes clients
  • ne pas te faire arnaquer par un prestataire indélicat…

A comme...

Accessibilité

L’accessibilité est un ensemble de bonnes pratiques qui permet de rendre les sites web utilisables par toutes les personnes, quelles que soient leurs capacités ou leurs handicaps.

Si tu veux en savoir plus, tu peux lire mon article sur le sujet : 6 clés pour améliorer l’accessibilité de ton site internet

API (Interface de Programmation d’Application)

Une API est un ensemble d’outils et de définitions qui permettent à différents logiciels de communiquer entre eux.

Sur WordPress, par exemple, on utilise des “Clés API” pour connecter un site avec système de mailing, un formulaire, une passerelle de paiement…

Alt Texte (Texte alternatif)

Un texte alternatif est un texte de ton choix, utilisé pour décrire une image sur ton site. Il est indispensable pour ton référencement (SEO) mais aussi pour les utilisateurs malvoyants qui utilisent des lecteurs d’écran.

Animation

Une animation est l’ajout de mouvements aux éléments d’une page web : texte qui apparait, zoom d’une image au passage de la souris, carrousel de logos ou de photos…

Elle rendent un site plus “vivant” et dynamique.

Mal utilisées, les animations peuvent dégrader l’expérience utilisateur en ralentissant le chargement des pages, perturber la navigation…

Archive

Une archive est une page de ton site qui regroupe plusieurs éléments d’un même groupe : 

  • Produits de ta boutique
  • Articles de blog
  • Portfolio clients…

 

Une archive peut être complète ou filtrée par catégorie, attributs…

Avec Elementor, tu peux personnaliser l’affichage (listes, cartes avec images, boutons, auteur…) Par défaut, les éléments qui la composent sont classés par date de création ou alphabétiquement

Lexique du webdesign - les archives

B comme...

Back-end

Le back-end, c’est l’arrière boutique de ton site.

Les utilisateurs ne la voient pas, c’est l’endroit où se gère ton site (par toi ou ton presta) : mises à jour, rédaction des articles, gestion de la base de données…

Balise

En HTML, une balise est un élément de code qui indique comment une partie du contenu doit être affichée et interprétée par les moteurs de recherche.

On les utilise pour les titres, les images, et tout un tas d’éléments de tes pages.

Balise Titre

C’est une balise HTML utilisée pour définir le titre d’une page web. Elle est affichée dans les résultats des moteurs de recherche et les onglets des navigateurs.

Breakpoints (Points de rupture)

Créer des pages qui s’adaptent en fonction des différentes tailles d’écran (le Responsive), ne se fait pas au hasard.

Les formats d’écrans sont définis par des “points de rupture” (breakpoints), les plus utilisés sont :

  • 649 : Mobiles
  • 768 px : Tablettes en mode portrait
  • 1024 px : Tablettes en mode paysage et petits écrans d’ordinateurs portables
  • 1280 px : Écrans d’ordinateurs de bureau
Lexique du webdesign - Breakpoints

C comme...

Cache

Toutes mes clientes m’ont entendu dire au moins 100 fois : “je vide le cache et je vérifie”.

Le cache est mécanisme de stockage temporaire qui permet de charger plus rapidement les pages web en sauvegardant certaines données localement.

Lorsque tu fais une modification sur ton site et que celle-ci n’est pas visible immédiatement, c’est probablement parce que le “cache” de ton site ne te permet pas de voir la dernière version de ta page. 

Il te suffit de “vider” cette mémoire en cliquant sur un bouton (grâce à un plugin ou un code que j’ai implémenté sur ton site).

Call to Action (CTA ou Appel à l'Action)

Le CTA est très important pour ton site car il incite les utilisateurs à effectuer une action spécifique : ton objectif à toi.

Il s’agit généralement d’un bouton ou d’un lien, comme “Ajouter au panier” ou “Me contacter”, “S’inscrire”…

D’ailleurs, si tu veux discuter d’un projet de site…

CMS (Système de Gestion de Contenu)

Le CMS est l’application utilisée pour créer et gérer ton site. Chez Paulette, tu l’auras compris, le CMS, c’est WordPress !

Constructeur de Pages

Un constructeur de pages est un plugin qui permet de créer des mises en page de site web par glisser-déposer, sans avoir besoin de coder. 

J’ai choisi d’utiliser Elementor pour sa souplesse et sa facilité de prise en main par mes clientes.

CSS (Cascading Style Sheets ou Feuilles de Style en Cascade)

Le CSS est un langage utilisé pour décrire l’apparence et la mise en page des documents HTML, dont les pages de ton site.

Si WordPress et Elementor sont des outils “no-code”, il n’est pas rare que j’ajoute quelques lignes de CSS pour adapter parfaitement chacune de tes pages à ton identité visuelle.

D comme...

Domaine

C’est le nom unique qui identifie un site web, son adresse sur internet.

Il est composé de deux parties :

  • le nom 
  • l’extension de domaine (.fr .com .bzh…)

C’est pour cela que tu peux avoir plusieurs domaines, comme paulettefactory.fr et paulettefactory.com par exemple.
Si tu as plusieurs domaines dont seules les extensions sont différentes (pour t’assurer que personne ne pourra te les “voler”), tu peux effectuer des redirections des domaines secondaires vers le principal ou avoir des sites totalement distincts.

Si tu hésites pour le tien, tu peux aller consulter cet article : Comment bien choisir son nom de domaine

E comme...

Eco-Conception

L’éco-conception est une forme de conception de site qui se développe de plus en plus ces dernières années. Si l’écologie est un sujet qui me tient à coeur, je regrette qu’elle soit devenue un argument de vente, voire du greenwashing…

Si tu souhaites en savoir plus, tu peux consulter mon article sur le sujet.

Erreur

Sur le web, les codes statuts HTTP sont classés en plusieurs catégories :

  • Les codes 2xx qui indiquent que la demande a été reçue et traitée avec succès
  • Les codes 3xx qui indiquent une redirection (temporaire ou définitive) 
  • Les codes 4xx qui concernent les erreurs coté “client”
  • Les codes 5xx qui relèvent d’erreurs coté “serveur”

L’erreur 404 est probablement la plus fréquente et pourtant la plus simple à corriger.
Elle indique que la ressource demandée, ta page Web, n’a pas été trouvée.
Si tu as modifié l’URL de ta page, il te suffit de faire une redirection de l’ancienne vers la nouvelle. 
Et pour éviter que tes visiteurs tombent sur une page d’erreur générique (et moche), n’oublie pas de créer une page d’erreur 404 personnalisée à ton identité visuelle !

F comme...

Favicon

Le Favicon, c’est un tout petit élément de personnalisation de ton site qui fait pourtant la différence : associé à ton site web, cet icône s’affiche dans l’onglet du navigateur et permet à tes visiteurs de l’identifier en un coup d’oeil.

Footer

Le footer, c’est le pied de page.

Comme le header, son intérêt est qu’il s’agit d’un modèle unique qui est appliqué à l’ensemble de tes pages, pas besoin de modifier chaque page en cas de changement d’adresse, par exemple ! Bien entendu, rien ne t’empêche d’en créer plusieurs et de les utiliser selon tes besoins.

On y place généralement des infos d’importance secondaire :

  • Mentions légales
  • Conditions générales
  • Politiques de confidentialité et de cookies
  • Tes horaires d’ouverture
  • Ton adresse…
lexique webdesign footer

Front-end

Si tu as lu tout ce qui précède, tu sais que le Back-end, c’est la partie immergée de ton site. Le Front-end, c’est la partie visible, celle avec laquelle tes utilisateurs interagissent.

I comme...

Indexation

L’indexation, c’est le moment où tes pages sont référencées, celui où elles pourront apparaitre dans les résultats de recherche et être découvertes par tes visiteurs.

Une étape très importante pour toi. Mais au risque de te décevoir, Google n’attend pa la mise en ligne de ton site pour le propulser en tête de ses résultats.

Nope.
Il y a près de 2 milliards de site dans le monde.

Ses robots de crawl passeront sur ton site de temps à autre et tes pages seront indexées (référencées).

Bonne nouvelle, tu peux gagner du temps en demandant l’indexation de chacune de tes pages et articles (sur la Google Search Console et/ou Bing Webmaster Tools).
Et recommencer à chaque modification/ajout de page.

H comme...

Header (en-tête)

C’est ce qui se trouve tout en haut de ta page.
On y place généralement le logo du site, le menu principal et un bouton d’Appel à l’action.

Hébergement

L’hébergement est un service auquel tu dois souscrire (pour quelques dizaines d’euros/an avec le nom de domaine) pour stocker et faire fonctionner ton site. Il existe de nombreux hébergeurs mais, à l’heure où j’écris ces lignes, ma préférence va pour o2switch.

Hero

Un Hero sur une page web est la première chose que voient tes visiteurs. Il occupe généralement une grande partie de l’écran et doit permettre à tes visiteurs de comprendre, en quelques secondes, ce que tu leur proposes.

Savoir qu’ils sont au bon endroit.

Pour cela, tu peux suivre un plan simple :

  • Ton “Pourquoi”
  • Ta baseline
  • Un CTA
  • Un visuel
  • Sans oublier ton menu pour la navigation
lexique webdesign hero

Hiérarchie

La hiérarchie est très importante pour ton site, tes visiteurs et ton référencement.

Visuellement, elle facilite la lecture et permet de mettre en avant ce qui te semble important : 

  • Couleurs
  • Contraste
  • Typographies
  • Espace

 

Mais la hiérarchie est aussi “invisible”. En utilisant des balises de titres HTML (<h1>, <h2>, <h3>…) pour structurer tes contenus, tu améliores leur compréhension par les moteurs de recherche.

Lexique du webdesign - Hiérarchie

HTML (HyperText Markup Language)

C’est le langage de balisage standard utilisé pour créer des pages web.

Heureusement, grâce à des CMS comme WordPress, il n’est plus nécessaire de le connaître pour créer un site (même si en connaître les bases permet de dépasser les limites de certains plugins).

HTTPS (Hyper Text Transfer Protocol Secure)

Le protocole https (la version sécurisée du http) protège les données qui transitent depuis et vers ton site en les chiffrant.

Il s’obtient avec un certificat SSL, qui peut s’installer en 3 clics et gratuitement chez la plupart des hébergeurs.

S’il rassure tes visiteurs, il ne protège ni ton site, ni les données qu’il contient.

K comme...

Keyword (Mot-clé)

Un mot clé est un généralement un mot ou une expression utilisée pour optimiser le référencement (SEO) de tes pages sur les moteurs de recherche.

Plus le mot clé est long (on l’appelle alors “de longue traine”) plus la recherche sera réduite et précise.

Donc plus efficace pour toi ET ton visiteur (qui trouvera exactement ce qu’il recherche). Win-win !

Lexique du webdesign - Mot-clé

L comme...

Loader

Un loader est indicateur visuel montrant qu’un contenu est en cours de chargement.

Lazy loading

Un terme technique, oui.

Mais qui repose sur une nécessité : avoir un site rapide et performant.

Le lazy loading est une technique de chargement différé des images et des vidéos qui est désormais intégrée à de nombreux constructeurs de pages.

Pour faire simple, elles ne se chargent sur tes pages qu’au moment où ton visiteur est sur le point de les voir.
Si ton visiteur clique sur le menu de ton site sans voir toute ta page d’accueil, ce qui se trouve hors de son écran ne sera pas chargé.
Ces données “économisées”, améliorent le temps de chargement de tes pages (donc les performances de ton site)

M comme...

Maillage Interne

Le maillage consiste à créer des liens entre différentes pages et/ou articles de ton site web. Il a pour but de faciliter la navigation et d’améliorer son référencement.

Mockup

Un mockup est une maquette digitale utilisée pour prévisualiser le design final d’un site web, d’un document ou d’une application.

N comme...

Navigation

De l’organisation de tes pages au maillage interne, la navigation doit toujours être facile et fluide pour tes visiteurs.

Elle est réalisée grâce à tous les éléments mis à la disposition de tes utilisateurs pour évoluer au gré des pages de ton site :

  • Menus
  • Liens
  • Boutons
  • Flèches… 
Lexique du webdesign - Navigation

O comme...

Open Source

Un logiciel Open Source est un logiciel dont le code source est librement disponible pour être utilisé, modifié et distribué.

C’est le cas de WordPress.

P comme...

Plugin (Extension)

Une extension, aussi appelée Plugin, est un module complémentaire que l’on installe sur WordPress pour lui ajouter des fonctionnalités à ton site. Cela peut être une extension de boutique en ligne, de prise de rendez-vous, de sauvegarde, de sécurité… La liste est longue !

R comme...

Redirection

Tu seras certainement amenée, au cours de la vie de ton site, à modifier, supprimer ou remplacer certaines pages.

Malheureusement, si cela entraine une Erreur 404 pour tes visiteurs, en plus d’être désagréable pour eux, cela peut aussi pénaliser ton référencement.

Il existe pourtant une solution très simple qui consiste à mettre en place des redirections d’une URL à une autre. Comme un suivi de courrier, cette redirection peut être temporaire ou permanente (mais totalement gratuite avec un plugin dédié)

 

Responsive Design

Le Responsive design consiste à créer un site qui soit adapté à la navigation sur tous types d’appareils : desktop, tablette, smartphone…

Si les formats d’écrans, délimités par les Breakpoints, sont importants, le responsive doit également tenir compte des conditions de navigation dont la vitesse du réseau.

Tu dois te focaliser sur les informations essentielles, alléger tes pages du superflu (animations, images décoratives…) et adapter ton design (tailles de polices, format des images…)

Lexique du webdesign - responsive

S comme...

SEO (Search Engine Optimization ou Référencement)

C’est un ensemble de bonnes pratiques visant à optimiser ton site web pour les moteurs de recherche.

Il permet afin d’améliorer son référencement et sa visibilité :

  • Avoir un mot clé par page
  • Utiliser les balises et meta descriptions
  • Avoir un titre H1 (et des Hn dans tes contenus)
  • Optimiser les images (poids, format, texte alt)
  • Travailler le maillage interne/externe
  • Choisir la bonne URL

Mais c’est aussi :

  • Avoir un sitemap
  • Indexer ton site
  • Avoir un site rapide
  • Apporter de la valeur,
  • Faire vivre ton site…

Shortcode (Code court)

Si beaucoup de plugins sont intégrés aux constructeurs de pages comme Elementor avec des  widgets , certains ne proposent que des Shortcodes. 

Ces “Codes courts” se présentent sous la forme d’une séquence entre [ ] et permettent d’ajouter à tes pages de nombreuses fonctionnalités très simplement : un flux Instagram, un formulaire, une système de réservation externe, un calendrier de prise de rdv…

Sitemap

Un sitemap est un fichier XML qui liste toutes les pages d’un site web. Il est utilisé par les moteurs de recherche pour explorer et indexer le site.

Il peut-être créé manuellement avec un éditeur de texte, ou automatiquement par un plugin dédié eu SEO comme Rank Math ou Yoast.

Tu dois absolument l’envoyer via la Google Search Console pour gagner du temps sur l’indexation de tes pages.

Slug

C’est la partie d’une URL qui identifie une page spécifique de manière lisible par l’homme. Par exemple, dans https://monsite.fr/blog/mon-article, “mon-article” est le slug.

SSL (Secure Sockets Layer)

Le SSL est un protocole de sécurité qui chiffre les données échangées entre ton site internet et ses utilisateurs.

C’est en installant un certificat SSL sur ton site (gratuitement depuis ton hébergement) que tu lui permets de passer de http à https.

SVG (Scalable Vector Graphics)

C’est un format d’image vectorielle qui permet un redimensionnement sans perte de qualité. Il est utilisé pour les icônes, les logos, les transitions…

T comme...

Thème

Imagine WordPress comme la base de ta maison : les fondations, les murs, le toit.

Le thème, correspond à la distribution de tes pièces. Un site WordPress doit avoir un thème pour fonctionner.

Bonne nouvelle, il en existe de toutes sortes !
Du plus minimalise dans lequel tout est possible avec un peu d’imagination et de travail, au plus spécialisé clé en main (orienté eCommerce, ou Porfolio, par exemple).

U comme...

UI (Interface Utilisateur)

L’Interface Utilisateur est l’ensemble des éléments graphiques et les mises en page que les utilisateurs voient et avec lesquels ils interagissent sur ton site web : identité visuelle, choix des couleurs, typographies, et leur disposition.

URL (Uniform Resource Locator)

L’adresse d’une ressource en ligne, comme une page web. Par exemple, https://monsite.fr

URL canonique

Il peut arriver, dans le cas d’une boutique ou d’un blog, qu’une même page ait deux URL. Par exemple :
https://monsite.fr/produit123
https://monsite.fr/categorie/produit123

Tu peux, si tu le souhaites, définir la page la plus représentative, comme URL canonique.

Si tu ne le fais pas, Google choisira pour toi.

UX (Expérience Utilisateur)

L’UX, c’est la qualité de l’interaction d’un utilisateur avec ton site web.

Il englobe l’UI mais pas seulement. Qualité de l’interface, facilité de navigation, lisibilité, performances, pertinence des contenus, parcours d’achat… Tout ce qui lui donnera envie de revenir sur ton site… Ou pas !

V comme...

Viewport

Le viewport, c’est la partie visible d’une page web sur un ordinateur ou un smartphone. Il dépend de la taille de l’écran, mais aussi du navigateur.

W comme...

WebP

WebP est l’un des formats d’image “next-gen” (avec le format AVIF) préconisé par Google pour tes images et visuels sur le web. Il gère la transparence et supporte les animations mais c’est surtout un format très léger (25 à 30% de gain par rapport aux formats JPEG et PNG) qui améliorera les performances de ton site.

Widget

Un widget est un élément graphique interactif qui peut être ajouté à une page web pour lui ajouter une fonctionnalité spécifique. Cela peut être un calendrier, un formulaire de contact, une FAQ, un accordéon…

Z comme...

Z-index

Le z-index est une propriété CSS qui détermine l’ordre de superposition des éléments sur une page web. C’est grâce à elle que tu peux avoir un texte qui chevauche une image, un menu toujours visible sur une page ou créer un effet parallaxe.

Conclusion

Voilà, j’espère que ce petit lexique du webdesign t’aura appris quelques petites choses !

N’hésite pas à repasser régulièrement, j’y ajouterai des termes au fil de l’eau.
D’ailleurs, si tu veux que j’y ajoute un ou plusieurs mots, n’hésite pas à me contacter sur insta.

Et si tu veux me parler de ton projet de site, tu peux le faire juste ici.

Sur le même thème