1min30 > Définitions Web Design sur le Dictionnaire du Web

Domaine : Web Design

Termes et définitions dans le domaine de la conception graphique web (web design)

object(WP_Post)#12227 (24) {["ID"]=>int(83159)["post_author"]=>string(1) "1"["post_date"]=>string(19) "2014-05-03 08:33:22"["post_date_gmt"]=>string(19) "2014-05-03 07:33:22"["post_content"]=>string(1713) "

Définition

Un Call to Action (Appel à l'action) est un élément d'une page web dont l'objectif est d'inciter l'utilisateur à réaliser une action. Cet élément peut par exemple prendre la forme d'un bouton, d'une image ou d'un lien. Cette action peut être de plusieurs natures : ajout au panier, inscription à une newsletter, demande de devis...

Importance des Call To Action

[caption id="attachment_779" align="alignright" width="240"]Call To Action © thinglass - Fotolia.com[/caption]Contrairement à un simple site vitrine, les sites web qui incitent à l'action peuvent se révéler être de véritables support à l'activité de l'entreprise. Les call to action doivent être cohérents par rapport aux objectifs du site. Leur efficacité doit être mesurée, notamment via le taux de conversion.Facebook a récemment lancé des boutons d'appel à l'action intégrés aux publicité.

Où positionner les call to action ?

Chaque année, des ergonomes sortent une théorie contraire à celle de l'année d'avant. Une seule règle : faites des tests en utilisant les techniques de A/B Testing."["post_title"]=>string(14) "Call to Action"["post_excerpt"]=>string(0) ""["post_status"]=>string(7) "publish"["comment_status"]=>string(4) "open"["ping_status"]=>string(6) "closed"["post_password"]=>string(0) ""["post_name"]=>string(14) "call-to-action"["to_ping"]=>string(0) ""["pinged"]=>string(0) ""["post_modified"]=>string(19) "2014-05-03 08:33:22"["post_modified_gmt"]=>string(19) "2014-05-03 07:33:22"["post_content_filtered"]=>string(0) ""["post_parent"]=>int(0)["guid"]=>string(29) "https://www.1min30.com/?p=777"["menu_order"]=>int(0)["post_type"]=>string(19) "dictionnaire-du-web"["post_mime_type"]=>string(0) ""["comment_count"]=>string(1) "0"["filter"]=>string(3) "raw"}

Call to Action



Définition

Un Call to Action (Appel à l'action) est un élément d'une page web dont l'objectif est d'inciter l'utilisateur à réaliser une action. Cet élément peut par exemple prendre la forme d'un bouton, d'une image ou d'un lien. Cette action peut être de plusieurs natures : ajout au panier, inscription à une newsletter, demande de devis... (suite…)object(WP_Post)#11007 (24) {["ID"]=>int(83339)["post_author"]=>string(1) "1"["post_date"]=>string(19) "2014-12-23 09:55:44"["post_date_gmt"]=>string(19) "2014-12-23 08:55:44"["post_content"]=>string(2071) "

Définition

La charte graphique est un document qui regroupe l'ensemble des codes et des règles définissant l'identité visuelle d'une marque ou d'une organisation. Elle ne s'applique pas uniquement au web, mais à l'ensemble des supports de communication.

Que définit la charte graphique ?

[caption id="attachment_3545" align="alignnone" width="520"]Définition de la charte graphique Exemple : charte graphique de la FMSH.[/caption]La charte graphique définit notamment :
  • Les déclinaisons du Logotype : forme abrégée, couleurs...
  • La manière dont le logotype doit être utilisé : fond, zones d'exclusions...
  • Les typographies utilisées.
  • Le format des documents dans différents formats : papeterie, documents internes, site web...

Et sur le web ?

La charte graphique n'est pas spécifique au web, mais elle contient généralement les règles qui s'y appliquent. Les couleurs seront par exemple exprimées en code hexadécimal, et les typologies spécifiques au web seront précisées. Lorsqu'elle existe, elle est le document d'entrée du graphiste qui sera chargé de réaliser le travail d'infographie relatif au site web. La rédaction de la charte graphique fait partie de la mission des services communication et des agences. Il est cependant assez fréquents que les TPE et certaines PME ne possèdent pas de charte."["post_title"]=>string(16) "Charte graphique"["post_excerpt"]=>string(0) ""["post_status"]=>string(7) "publish"["comment_status"]=>string(4) "open"["ping_status"]=>string(6) "closed"["post_password"]=>string(0) ""["post_name"]=>string(16) "charte-graphique"["to_ping"]=>string(0) ""["pinged"]=>string(0) ""["post_modified"]=>string(19) "2018-02-06 08:56:15"["post_modified_gmt"]=>string(19) "2018-02-06 07:56:15"["post_content_filtered"]=>string(0) ""["post_parent"]=>int(0)["guid"]=>string(30) "https://www.1min30.com/?p=3544"["menu_order"]=>int(0)["post_type"]=>string(19) "dictionnaire-du-web"["post_mime_type"]=>string(0) ""["comment_count"]=>string(1) "0"["filter"]=>string(3) "raw"}

Charte graphique



Définition

La charte graphique est un document qui regroupe l'ensemble des codes et des règles définissant l'identité visuelle d'une marque ou d'une organisation. Elle ne s'applique pas uniquement au web, mais à l'ensemble des supports de communication. (suite…)object(WP_Post)#11003 (24) {["ID"]=>int(83061)["post_author"]=>string(1) "1"["post_date"]=>string(19) "2014-04-13 19:20:37"["post_date_gmt"]=>string(19) "2014-04-13 18:20:37"["post_content"]=>string(2764) "

Définition

CSS signifie "Cascading Style Sheets", ce qui peut se traduire par "feuilles de style en cascade" en français. Il s'agit de fichiers contenant des instructions relatives à la mise en forme des pages web. Ces fichiers sont munis d'une extension .css (d'où leur nom). Les CSS sont basés sur des standards définis par le W3C. La standard actuel est CSS3.

Liens avec le html

Comme nous l'avons vu dans cette définition du html, le html permet de structurer le contenu d'une page web en "balisant" ce dernier. Par exemple, le code html <h1>Mon titre</h1> signifie que "Mon titre" est le titre principal de la page.En revanche, cela ne dit pas au navigateur comment ce titre doit être mis en forme : taille de la police, présence d'une puce, espacement entre les caractères, marges, etc.En spécifiant, dans un fichier CSS, des instructions de mise en forme de "Mon titre", on va ainsi expliquer au navigateur comment "Mon titre" doit être affiché.

Exemple

Gardons l'exemple "Mon titre". Imaginons que la page d'accueil de mon site s'appelle "index.html"Le fichier index.html contiendra des lignes comme :
<head>...</head><body><h1>Mon titre</h1><h2>Sous-titre</h2>...</body>
On lui associe un fichier "Affichage.css" contenant l'instruction :
h1 {font-size:16px; font-weight:bold; color:red;}
ce qui reviendra à dire au navigateur : "pour afficher le titre principal de la page (h1), tu utiliseras une police de 16 pixels de haut, en gras et de couleur rouge".font-size, font-weight et color sont des propriétés. 16px, bold, et red sont des attributs.Il existe ainsi de nombreuses propriétés CSS permettant de définir l'apparence d'un site.

Où placer les fichiers CSS ?

Il existe plusieurs façons d'incorporer les fichiers CSS dans un site web :
  • Ils peuvent être "liés" dans l'entête de la page html. On ajoutera par exemple : <link rel="stylesheet" type="text/css" href="/Affichage.css" /> avant la fermeture de la balise </head>.
  • On peut incorporer les instructions CSS dans la page entre des balises <style>.
  • Il est également possible d'utiliser des instructions CSS directement dans un attribut style associé à une balise. Pour mettre en forme notre titre (voir ci-dessus), on écrira alors directement :
    • <h1 style="font-size:16px; font-weight:bold; color:red;">Mon titre</h1>
"["post_title"]=>string(3) "CSS"["post_excerpt"]=>string(0) ""["post_status"]=>string(7) "publish"["comment_status"]=>string(4) "open"["ping_status"]=>string(6) "closed"["post_password"]=>string(0) ""["post_name"]=>string(3) "css"["to_ping"]=>string(0) ""["pinged"]=>string(0) ""["post_modified"]=>string(19) "2014-04-13 19:20:37"["post_modified_gmt"]=>string(19) "2014-04-13 18:20:37"["post_content_filtered"]=>string(0) ""["post_parent"]=>int(0)["guid"]=>string(28) "https://www.1min30.com/?p=73"["menu_order"]=>int(0)["post_type"]=>string(19) "dictionnaire-du-web"["post_mime_type"]=>string(0) ""["comment_count"]=>string(1) "0"["filter"]=>string(3) "raw"}

CSS



Définition

CSS signifie "Cascading Style Sheets", ce qui peut se traduire par "feuilles de style en cascade" en français. Il s'agit de fichiers contenant des instructions relatives à la mise en forme des pages web. Ces fichiers sont munis d'une extension .css (d'où leur nom). Les CSS sont basés sur des standards définis par le W3C. La standard actuel est CSS3. (suite…)object(WP_Post)#11005 (24) {["ID"]=>int(83065)["post_author"]=>string(1) "1"["post_date"]=>string(19) "2014-04-13 19:28:33"["post_date_gmt"]=>string(19) "2014-04-13 18:28:33"["post_content"]=>string(2820) "

Définition

Le découpage CSS désigne l'étape qui consiste à convertir la maquette graphique d'un site web en fichiers html & CSS pouvant être affichés par un navigateur web.

Mieux comprendre

La réalisation d'un site web fait appel à des compétences très diverses, dans des mondes très différents.Le graphiste web (ou designer) est un peu l'artiste de la bande, même si beaucoup le contestent en affirmant que leur métier consiste avant tout à suivre des règle de design. Son rôle consiste à fournir des images. Ainsi, c'est lui qui va "dessiner" le site web sous la forme d'une maquette. Il peut parfois être également ergonome pour produire des pages qui offrent une expérience utilisateur de bonne qualité (on parle alors d'UX design). En revanche, les graphistes sont rarement intéressés par la partie technique des sites, le fameux "code".Hors, pour transformer une maquette graphique en site web, il faut d'une manière ou d'une autre transformer un dessin en une forme de "programme" fonctionnel. Il y a encore quelques années, des techniciens découpaient la maquette du graphiste en plusieurs images qu'ils positionnaient dans le site à l'aide d'un gabarit html et d'un ou plusieurs fichiers CSS. On parlait alors de découpage CSS. On découpait les éléments de la maquette afin de pouvoir séparer les parties statiques (le logo, le fond...) des éléments dynamiques (les puces, les polices, etc.). Cette étape était difficile à réaliser par des non techniciens. Il faut en effet bien connaître les contraintes des CSS pour effectuer un découpage efficace.

Les nouvelles techniques

De nos jours, plusieurs techniques viennent simplifier l'intégration graphique d'un site web :
  • Il existe des logiciels (par exemple Artisteer) qui réalise quasi-automatiquement le passage d'une maquette graphique à un template (cas des CMS) ou à un site classique. Il peut parfois aussi s'agir d'extension pour les logiciels comme Photoshop. Inconvénient : le code généré par ces logiciels est bien souvent de mauvaise qualité (c'est à dire peu optimisé).
  • De nombreux graphistes partent désormais de modèles pour développer un design à partir d'un existant, et limiter l'intervention technique à quelques modifications de forme.
  • Certains thèmes sont livrés avec des outils permettant de faciliter la création de sites personnalisés à l'aide de "builders".
"["post_title"]=>string(14) "Découpage CSS"["post_excerpt"]=>string(0) ""["post_status"]=>string(7) "publish"["comment_status"]=>string(4) "open"["ping_status"]=>string(6) "closed"["post_password"]=>string(0) ""["post_name"]=>string(13) "decoupage-css"["to_ping"]=>string(0) ""["pinged"]=>string(0) ""["post_modified"]=>string(19) "2014-04-13 19:28:33"["post_modified_gmt"]=>string(19) "2014-04-13 18:28:33"["post_content_filtered"]=>string(0) ""["post_parent"]=>int(0)["guid"]=>string(28) "https://www.1min30.com/?p=81"["menu_order"]=>int(0)["post_type"]=>string(19) "dictionnaire-du-web"["post_mime_type"]=>string(0) ""["comment_count"]=>string(1) "0"["filter"]=>string(3) "raw"}

Découpage CSS



Définition

Le découpage CSS désigne l'étape qui consiste à convertir la maquette graphique d'un site web en fichiers html & CSS pouvant être affichés par un navigateur web. (suite…)object(WP_Post)#11004 (24) {["ID"]=>int(83202)["post_author"]=>string(1) "1"["post_date"]=>string(19) "2014-06-24 08:29:18"["post_date_gmt"]=>string(19) "2014-06-24 07:29:18"["post_content"]=>string(1585) "

Définition

Dans le domaine du web, l'eye tracking est une science visant à étudier le mouvement de l’œil de l'internaute pour comprendre comment il se comporte, où il porte son regard en premier, et donc d'optimiser le site web cible en conséquence. Il s'agit d'une branche du neuromarketing.Le résultat d'une étude de eye tracking est une "heat map" qui va des zones rouges (les zones chaudes, les plus regardées) aux zones bleues (les zones froides, les moins regardées).[caption id="attachment_1614" align="alignnone" width="520"]Heat Map Eye Tracking Apparence d'une "Heat Map" lorsqu'on fait de l'Eye Tracking[/caption]

Applications du eye tracking

La première application de l'eye tracking est le positionnement des éléments d'une page web. On va ainsi essayer de placer les call to action au plus près des zones chaudes, et déplacer les liens de moindre importance vers les zones froides.On pourra également s'assurer que le message de la marque et/ou ses éléments d'image comme le logo soient bien positionnés et vus dans la page.

Comment faire de l'eye tracking ?

Cette technique nécessite de gros moyens pour pouvoir suivre le mouvement des yeux des utilisateurs. Il existe également des palliatifs qui proposent de suivre le mouvement de la souris des utilisateurs, arguant que cette information est liée à son regard. Cette affirmation est discutable."["post_title"]=>string(18) "Eye Tracking (web)"["post_excerpt"]=>string(0) ""["post_status"]=>string(7) "publish"["comment_status"]=>string(4) "open"["ping_status"]=>string(6) "closed"["post_password"]=>string(0) ""["post_name"]=>string(16) "eye-tracking-web"["to_ping"]=>string(0) ""["pinged"]=>string(0) ""["post_modified"]=>string(19) "2014-06-24 08:29:18"["post_modified_gmt"]=>string(19) "2014-06-24 07:29:18"["post_content_filtered"]=>string(0) ""["post_parent"]=>int(0)["guid"]=>string(30) "https://www.1min30.com/?p=1612"["menu_order"]=>int(0)["post_type"]=>string(19) "dictionnaire-du-web"["post_mime_type"]=>string(0) ""["comment_count"]=>string(1) "0"["filter"]=>string(3) "raw"}

Eye Tracking (web)



Définition

Dans le domaine du web, l'eye tracking est une science visant à étudier le mouvement de l’œil de l'internaute pour comprendre comment il se comporte, où il porte son regard en premier, et donc d'optimiser le site web cible en conséquence. Il s'agit d'une branche du neuromarketing. (suite…)object(WP_Post)#11000 (24) {["ID"]=>int(83069)["post_author"]=>string(1) "1"["post_date"]=>string(19) "2014-04-13 19:36:39"["post_date_gmt"]=>string(19) "2014-04-13 18:36:39"["post_content"]=>string(3423) "

Définition du fil d'Ariane

Le fil d'Ariane (breadcrumb en anglais) permet à l'internaute de savoir dans quelle partie d'un site Internet il se trouve. Il s'agit d'une série de liens cliquables retraçant tout le chemin parcouru vers un contenu, en partant de la racine du site (accueil).Sa structure est : Accueil > Rubrique 1 > ... > Contenu.Le fil d'Ariane est particulièrement utile dans les sites à fort contenu.

Exemple du dictionnaire du web

Le fil d'Ariane de cet article (situé sous le logo et le titre du site) est :

Vous êtes ici : Accueil Site web › Fil d'Ariane (breadcrumb)

Le choix de la catégorie "Site Web" pour le fil d'Ariane de cet article est d'ailleurs discutable: cet article fait en effet partie de plusieurs catégories, et le système en choisit une au hasard. On pourrait aussi utiliser le fil d'Ariane comme un chemin physique, dans le cas de contenus hiérarchisés.

Le fil d'ariane en SEO

L'utilisation d'un breadcrumb est recommandé par Google. Celui-ci fait d'ailleurs l'objet d'un rich snippets. Pour utiliser ce snippet, il faut donc baliser le fil d'ariane au format microdata ou RDFa. Voici le code du breadcrumb du dictionnaire du web (au format RDFa) :
<span prefix="v: http://rdf.data-vocabulary.org/#">   <span typeof="v:Breadcrumb">      <a property="v:title" rel="v:url" href="https://www.1min30.com">Accueil</a>   </span> &gt;    <span typeof="v:Breadcrumb">      <a property="v:title" rel="v:url" href="https://www.1min30.com/dictionnaire-du-web/rubrique/site-web-2/">Site web</a>   </span> &gt;    <span typeof="v:Breadcrumb"><strong property="v:title">Fil d’Ariane (breadcrumb)</strong></span></span>
Ce qui donnera dans les pages de résultat des moteurs de recherche :[caption id="attachment_3680" align="alignnone" width="554"]Fil d'ariane (breadcrumb) Apparence du fil d'ariane dans les SERP de Google[/caption]

Fil d'Ariane ou Miettes de Pain ?

Les anglo-saxons ne parlent pas de Fil d'Ariane mais de miettes de pain (breadcrumb). A chacun ses références culturelles : le Minotaure grec contre Hansel et Gretel, l'essentiel est de retrouver son chemin."["post_title"]=>string(25) "Fil d'Ariane (breadcrumb)"["post_excerpt"]=>string(0) ""["post_status"]=>string(7) "publish"["comment_status"]=>string(4) "open"["ping_status"]=>string(6) "closed"["post_password"]=>string(0) ""["post_name"]=>string(22) "fil-dariane-breadcrumb"["to_ping"]=>string(0) ""["pinged"]=>string(0) ""["post_modified"]=>string(19) "2018-02-01 13:39:45"["post_modified_gmt"]=>string(19) "2018-02-01 12:39:45"["post_content_filtered"]=>string(0) ""["post_parent"]=>int(0)["guid"]=>string(28) "https://www.1min30.com/?p=90"["menu_order"]=>int(0)["post_type"]=>string(19) "dictionnaire-du-web"["post_mime_type"]=>string(0) ""["comment_count"]=>string(1) "0"["filter"]=>string(3) "raw"}

Fil d’Ariane (breadcrumb)



Définition du fil d'Ariane

Le fil d'Ariane (breadcrumb en anglais) permet à l'internaute de savoir dans quelle partie d'un site Internet il se trouve. Il s'agit d'une série de liens cliquables retraçant tout le chemin parcouru vers un contenu, en partant de la racine du site (accueil). (suite…)object(WP_Post)#11002 (24) {["ID"]=>int(83276)["post_author"]=>string(1) "1"["post_date"]=>string(19) "2014-10-06 07:57:11"["post_date_gmt"]=>string(19) "2014-10-06 06:57:11"["post_content"]=>string(2903) "

Définition

Le Flat Design (design plat en français) désigne un mode de conception d'interfaces utilisateur. On le rencontre dans le domaine du webdesign (sites et applications web), mais aussi dans d'autres types de logiciels comme par exemple les systèmes d'exploitation ou les interfaces de TV connectées.[caption id="attachment_2815" align="alignnone" width="520"]Flat design : interface windows 8 Exemple de flat design : l'interface de Windows 8[/caption]

Principes du flat design

Le flat design se distingue par l'utilisation d'éléments simples et minimalistes pour réaliser les interfaces :
  • Les effets 3D, qui n'ont cessé d'envahir les écrans de manière croissante ces dernières années, sont abandonnés au profit de formes simples, sans ombres ni textures ou dégradés.
  • Les couleurs sont "plates" (c'est-à-dire unies), elles tranchent avec le reste du site pour faciliter le repérage par le cerveau humain. Elles sont issues de palettes chromatiques permettant de distinguer clairement les éléments afin de guider la navigation.
  • Les polices de caractères sont choisies pour leur lisibilité (voir des exemples de polices adaptées ici).

Avantages du flat design

Le flat design offre de nombreux avantages :
  • Il permet de faciliter le redimensionnement des interfaces sur différents écrans, à la manière du responsive design, mais avec moins de contraintes initiales, les blocs de contenus étant faciles à repositionner les uns par rapport aux autres.
  • Il produit des interfaces plus faciles à utiliser, plus efficaces et plus intuitives pour les utilisateurs.
  • Il allège le poids des fichiers des interfaces, rendant la navigation plus rapides et les temps de chargement plus faibles dans le cas des sites web.
  • Il résout les problèmes liés au changement de définition des écrans, en offrant par exemple un rendu net sur les écrans haute définition (HD).
"["post_title"]=>string(11) "Flat Design"["post_excerpt"]=>string(0) ""["post_status"]=>string(7) "publish"["comment_status"]=>string(4) "open"["ping_status"]=>string(6) "closed"["post_password"]=>string(0) ""["post_name"]=>string(11) "flat-design"["to_ping"]=>string(0) ""["pinged"]=>string(0) ""["post_modified"]=>string(19) "2018-01-30 07:36:56"["post_modified_gmt"]=>string(19) "2018-01-30 06:36:56"["post_content_filtered"]=>string(0) ""["post_parent"]=>int(0)["guid"]=>string(30) "https://www.1min30.com/?p=2811"["menu_order"]=>int(0)["post_type"]=>string(19) "dictionnaire-du-web"["post_mime_type"]=>string(0) ""["comment_count"]=>string(1) "0"["filter"]=>string(3) "raw"}

Flat Design



Définition

Le Flat Design (design plat en français) désigne un mode de conception d'interfaces utilisateur. On le rencontre dans le domaine du webdesign (sites et applications web), mais aussi dans d'autres types de logiciels comme par exemple les systèmes d'exploitation ou les interfaces de TV connectées. (suite…)object(WP_Post)#11001 (24) {["ID"]=>int(83171)["post_author"]=>string(1) "1"["post_date"]=>string(19) "2014-05-17 10:39:35"["post_date_gmt"]=>string(19) "2014-05-17 09:39:35"["post_content"]=>string(2282) "

Définition

Le terme infographie est utilisé alternativement pour désigner deux choses différentes :
  • On parle d'infographie pour désigner le travail d'un infographiste : charte graphique d'un site, plaquette réalisée par PAO, retouches photo... Il s'agit là du sens premier du terme, qui peut se comprendre par : graphisme réalisé par ordinateur.
  • Les spécialistes du webmarketing actuel l'utilisent souvent pour désigner la présentation visuelle d'un ensemble de données autour d'un concept (très utilisé sur les réseaux sociaux pour générer des interactions). La réalisation de ce type d'infographie permet également de travailler le référencement naturel des images dans les moteurs de recherche.

Graphiste, infographiste, infographies...

On peut disserter longtemps sur l'origine exacte de ces mots. Cependant, la signification des mots a tendance à se dissoudre dans l'usage. Il n'est pas rare d'entendre dans les couloirs des agences web des phrases comme "as-tu reçu le travail du graphiste ?" pour désigner en réalité le travail du concepteur d'une charte graphique, qui serait plutôt un infographiste au sens littéral du terme. Les graphistes qui réalisent encore des esquisses à la main deviennent rares de nos jours...

Exemple d'infographie

[caption id="attachment_765" align="alignnone" width="502"]Infographie sur l'Affiliation Exemple : infographie illustrant le principe de l'affiliation[/caption]

Outils de réalisation d'infographies

Il existe de nombreux outils permettant de réaliser des infographies quand on n'a pas de talent artistique. Citons Piktochart, Canva ou encore Visual.ly (la modeste réalisation ci-dessus a été réalisée avec Piktochart)."["post_title"]=>string(11) "Infographie"["post_excerpt"]=>string(0) ""["post_status"]=>string(7) "publish"["comment_status"]=>string(4) "open"["ping_status"]=>string(6) "closed"["post_password"]=>string(0) ""["post_name"]=>string(11) "infographie"["to_ping"]=>string(0) ""["pinged"]=>string(0) ""["post_modified"]=>string(19) "2014-05-17 10:39:35"["post_modified_gmt"]=>string(19) "2014-05-17 09:39:35"["post_content_filtered"]=>string(0) ""["post_parent"]=>int(0)["guid"]=>string(29) "https://www.1min30.com/?p=952"["menu_order"]=>int(0)["post_type"]=>string(19) "dictionnaire-du-web"["post_mime_type"]=>string(0) ""["comment_count"]=>string(1) "0"["filter"]=>string(3) "raw"}

Infographie



Définition

Le terme infographie est utilisé alternativement pour désigner deux choses différentes :
  • On parle d'infographie pour désigner le travail d'un infographiste : charte graphique d'un site, plaquette réalisée par PAO, retouches photo... Il s'agit là du sens premier du terme, qui peut se comprendre par : graphisme réalisé par ordinateur.
  • Les spécialistes du webmarketing actuel l'utilisent souvent pour désigner la présentation visuelle d'un ensemble de données autour d'un concept (très utilisé sur les réseaux sociaux pour générer des interactions). La réalisation de ce type d'infographie permet également de travailler le référencement naturel des images dans les moteurs de recherche.
(suite…)object(WP_Post)#10997 (24) {["ID"]=>int(83144)["post_author"]=>string(1) "1"["post_date"]=>string(19) "2014-04-23 14:20:28"["post_date_gmt"]=>string(19) "2014-04-23 13:20:28"["post_content"]=>string(2820) "

Définition

Les popups sont des fenêtres qui s'ouvrent dans un navigateur web lorsqu'un internaute consulte une page d'un site web. Ils contiennent généralement des messages publicitaires, des alertes, des propositions d'inscription à des newsletter ou tout autre type de contenus que les créateurs de sites veulent mettre en avant.

Blocage des popups

Les popups sont unanimement considérés comme insupportables. C'est pourquoi très vite, les navigateurs modernes se sont évertués à les bloquer. Il est cependant possible de désactiver ce blocage, qui peut parfois être gênant dans le cas où le popup résulte d'une action délibérée de l'utilisateur (par exemple la fenêtre de téléchargement d'une application).

Le popover, c'est surement mieux

Afin de contourner le blocage des navigateurs, des techniques alternatives ont été développées, comme par exemple le popover, qui a l'apparence d'un popup mais qui n'ouvre pas de nouvelle fenêtre : grâce à des outils comme AJAX, il ouvre une sorte de fenêtre virtuelle à l'intérieur même de la page. Les popovers sont ainsi totalement intégrés au site web et ne peuvent pas (encore) être bloqués.

Le site-under, c'est encore plus fort

Non content de vous gâcher la vie pendant votre surf sur un site, les spécialistes du webmarketing ont trouvé le moyen de vous placer une publicité après votre visite. C'est le principe du site under, qui confère au génie de la loi de l'intrusion maximale.

De l'efficacité marketing des popup / popover

Pour une raison incompréhensible, alors que tout le monde se plaint de ces polluants chroniques, l'ajout de ce type de fenêtre augmente factuellement et considérablement le taux de conversion de certaines actions, comme par exemple l'inscription à une Newsletter.Cela n'a pas empêché l'inventeur des Pop up de s'excuser publiquement pour le tort que sa création a fait."["post_title"]=>string(5) "Popup"["post_excerpt"]=>string(0) ""["post_status"]=>string(7) "publish"["comment_status"]=>string(4) "open"["ping_status"]=>string(6) "closed"["post_password"]=>string(0) ""["post_name"]=>string(5) "popup"["to_ping"]=>string(0) ""["pinged"]=>string(0) ""["post_modified"]=>string(19) "2014-04-23 14:20:28"["post_modified_gmt"]=>string(19) "2014-04-23 13:20:28"["post_content_filtered"]=>string(0) ""["post_parent"]=>int(0)["guid"]=>string(29) "https://www.1min30.com/?p=493"["menu_order"]=>int(0)["post_type"]=>string(19) "dictionnaire-du-web"["post_mime_type"]=>string(0) ""["comment_count"]=>string(1) "0"["filter"]=>string(3) "raw"}

Popup



Définition

Les popups sont des fenêtres qui s'ouvrent dans un navigateur web lorsqu'un internaute consulte une page d'un site web. Ils contiennent généralement des messages publicitaires, des alertes, des propositions d'inscription à des newsletter ou tout autre type de contenus que les créateurs de sites veulent mettre en avant. (suite…)object(WP_Post)#10999 (24) {["ID"]=>int(83101)["post_author"]=>string(1) "1"["post_date"]=>string(19) "2014-04-14 08:25:18"["post_date_gmt"]=>string(19) "2014-04-14 07:25:18"["post_content"]=>string(4695) "

Définition du responsive design

On dit d'un design de site web qu'il est responsive lorsqu'il adapte automatiquement la mise en page et l'apparence du site en fonction de la taille de la fenêtre d'affichage, et par conséquent du type d'appareil utilisé pour consulter le site (ordinateur, tablette ou smartphone).Pour visualiser le rendu d'un site web responsive sur un écran de smartphone, il suffit de redimensionner la fenêtre de son navigateur web jusqu'à simuler la taille de l'écran du mobile. Ce fonctionnement est différent des sites mobiles, qui se basent sur le "user agent", et donc le type d'appareil mobile utilisé, pour choisir quel apparence il va appliquer pour un utilisateur donné.

Avantages du design responsive

  • Le contenu du site est identique quel que soit le terminal utilisé par le client : cela évite de devoir gérer plusieurs contenus pour chaque type d'appareil cible.
  • Les coûts de développement sont inférieurs aux coûts de développement de solutions dédiées de type site mobile ou application mobile.

Inconvénients

  • Le responsive design ne permet pas de réaliser une version mobile totalement différente des versions ordinateur ou tablette. Dans certains cas, une ergonomie spécifique au mobile peut être un facteur clef de performance en lieu et place du responsive design.
  • Il reste assez compliqué à maintenir sur le plan technique : chaque intervention sur un élément du design doit être testé pour valider son apparence dans les tailles inférieures.

Comment fait-on un site responsive ?

Contrairement à un site mobile, les sites responsives utilisent les mêmes fichiers html / css, et ce quel que soit le terminal utilisé pour lire la page. Le concept de responsive design repose sur trois éléments principaux :
  • L'utilisation de grilles dites flexibles, qui, lors du redimensionnement de l'écran, viendront positionner les éléments de la page de manière adéquate. En clair, cela revient à positionner les éléments exclusivement avec des blocs <div>. On utilisera également beaucoup les valeurs relatives pour exprimer la taille de ces éléments (par exemple un pourcentage au lieu d'une largeur fixe en pixels).
  • Le redimensionnement adaptatif des médias pour qu'ils ne débordent pas de l'écran.
  • Les "media queries", qui permettent par exemple d'appliquer des instructions conditionnelles dans un fichier CSS, en fonction de la taille de l'écran.
Exemple de media query dans un fichier CSS :
@media screen and (min-width:800px) { body { background-color: black; }}
Ce bloc de code appliquera un fond noir à la page pour les terminaux dont la fenêtre de navigation dépassera 800 pixels en largeur.On notera également que le responsive design implique de ne jamais utiliser de tableaux html pour positionner les éléments : les colonnes de tels tableaux ne peuvent pas se repositionner l'une au dessous de l'autre en cas de redimensionnement.

Exemple

Pour voir si un site est responsive, il suffit de diminuer la taille de la fenêtre de votre navigateur Internet et d'observer les changements.

Apparence avec un écran large

Responsive Design : écran large

Apparence avec un écran de tablette

Responsive Design : tablette"["post_title"]=>string(17) "Responsive Design"["post_excerpt"]=>string(0) ""["post_status"]=>string(7) "publish"["comment_status"]=>string(4) "open"["ping_status"]=>string(6) "closed"["post_password"]=>string(0) ""["post_name"]=>string(17) "responsive-design"["to_ping"]=>string(0) ""["pinged"]=>string(0) ""["post_modified"]=>string(19) "2017-10-09 15:24:06"["post_modified_gmt"]=>string(19) "2017-10-09 13:24:06"["post_content_filtered"]=>string(0) ""["post_parent"]=>int(0)["guid"]=>string(29) "https://www.1min30.com/?p=161"["menu_order"]=>int(0)["post_type"]=>string(19) "dictionnaire-du-web"["post_mime_type"]=>string(0) ""["comment_count"]=>string(1) "0"["filter"]=>string(3) "raw"}

Responsive Design



Définition du responsive design

On dit d'un design de site web qu'il est responsive lorsqu'il adapte automatiquement la mise en page et l'apparence du site en fonction de la taille de la fenêtre d'affichage, et par conséquent du type d'appareil utilisé pour consulter le site (ordinateur, tablette ou smartphone). (suite…)object(WP_Post)#10998 (24) {["ID"]=>int(83134)["post_author"]=>string(1) "1"["post_date"]=>string(19) "2014-04-20 18:21:32"["post_date_gmt"]=>string(19) "2014-04-20 17:21:32"["post_content"]=>string(2678) "

Définition

On qualifie généralement un site web d'institutionnel lorsqu'il a pour principal but de promouvoir l'image d'une entreprise, d'une marque ou d'une organisation auprès du grand public, des médias, des clients potentiels, des fournisseurs, des actionnaires ou de tout autre partenaire potentiel. D'une certaine manière, on peut considérer un site institutionnel comme un site web vitrine. On entend parfois l'expression équivalente de "site corporate". Il s'oppose notamment à un site marchand dont l'objectif est de générer des demandes de nature commerciale.

Pourquoi faire un site corporate ?

Les grandes entreprises dissocient bien souvent leur site institutionnel des sites à vocation commerciale directe. En effet, à partir du moment où le public cible est différent, que les attentes sont différentes, et que les objectifs sont différents, il y a lieu de bien cloisonner les sites, en accord avec la stratégie digitale de l'entreprise.

Influence sur le design

Les sites institutionnels ne sont pas conçus pour vendre un produit ou un service, mais pour informer. Ils seront donc généralement dotés d'un design adapté à cet objectif. La conversion ne sera pas nécessairement le but recherché : sur le plan du web analytics, on cherchera surtout à évaluer l'adéquation entre les contenus proposés et l'intérêt des visiteurs.

Exemples de site institutionnel

Bouygues

L'Oréal

"["post_title"]=>string(19) "Site institutionnel"["post_excerpt"]=>string(0) ""["post_status"]=>string(7) "publish"["comment_status"]=>string(4) "open"["ping_status"]=>string(6) "closed"["post_password"]=>string(0) ""["post_name"]=>string(19) "site-institutionnel"["to_ping"]=>string(0) ""["pinged"]=>string(0) ""["post_modified"]=>string(19) "2018-02-09 07:29:12"["post_modified_gmt"]=>string(19) "2018-02-09 06:29:12"["post_content_filtered"]=>string(0) ""["post_parent"]=>int(0)["guid"]=>string(29) "https://www.1min30.com/?p=400"["menu_order"]=>int(0)["post_type"]=>string(19) "dictionnaire-du-web"["post_mime_type"]=>string(0) ""["comment_count"]=>string(1) "0"["filter"]=>string(3) "raw"}

Site institutionnel



Définition

On qualifie généralement un site web d'institutionnel lorsqu'il a pour principal but de promouvoir l'image d'une entreprise, d'une marque ou d'une organisation auprès du grand public, des médias, des clients potentiels, des fournisseurs, des actionnaires ou de tout autre partenaire potentiel. D'une certaine manière, on peut considérer un site institutionnel comme un site web vitrine. On entend parfois l'expression équivalente de "site corporate". Il s'oppose notamment à un site marchand dont l'objectif est de générer des demandes de nature commerciale. (suite…)object(WP_Post)#10994 (24) {["ID"]=>int(83152)["post_author"]=>string(1) "1"["post_date"]=>string(19) "2014-04-27 13:45:06"["post_date_gmt"]=>string(19) "2014-04-27 12:45:06"["post_content"]=>string(5209) "

Définition d'un site mobile

On appelle site mobile un site web dont le rendu, l'ergonomie et les fonctionnalités sont conçus pour être adapté au écran mobiles de petites tailles comme les smartphones (iPhone, Android, Windows Mobile, Blackberry...). Ce site web peut être totalement indépendant ou constituer la partie "optimisée pour mobile" d'un site web existant également en version "normale" (c'est à dire adapté aux écrans bureautique et éventuellement aux tablettes).

Différence entre un site responsive et un site mobile

Le responsive design s'adapte

Le responsive design est une alternative intéressante lorsqu'on souhaite concevoir un site de manière optimisée pour toutes les dimensions d'écrans. Dans ce cas, le modèle html et les fichiers CSS sont identiques quelle que soit la taille de l'écran. Ils contiennent en revanche des instructions permettant à l'affichage de s'adapter. Ainsi, pour voir si un site est responsive, vous pouvez vous amuser à redimensionner la fenêtre de votre navigateur, et vous allez constater que les éléments du site changent de position en conséquence.Si vous utilisez les CMS les plus connus du marché, vous trouverez de très nombreux thèmes responsives.

Le site mobile est différent

Détection basé sur le type d'appareil

Le site mobile, lui, est totalement différent. Il ne se base pas sur la taille de l'écran, mais sur ce qu'on appelle le "user agent" pour détecter s'il doit servir la version mobile du site ou la version "classique". Par exemple, si le user-agent est "iPhone", le site mobile s'affiche.

Fichiers html / css spécifiques

Une fois le type de site choisi (mobile ou classique), les fichiers envoyés par le serveur sont totalement différents. La version mobile a son propre modèle de page, et un CSS dédié. Ainsi, il est possible d'avoir une apparence totalement différente de l'un à l'autre, en supprimant également certains éléments inutiles sur mobile.Il est cependant possible d'utiliser une base de données commune contenant les contenus à afficher, mais ils seront rendus de manière différente.

Une plus grande complexité technique

L'utilisation d'un site mobile nécessite une compréhension plus fine des mécanismes de fonctionnement d'un site web. En effet, il va falloir aborder les notions de redirection dans le fichier .htaccess ou dans un virtual host, et gérer d'éventuels problèmes de cache, qui peuvent venir perturber le fonctionnement d'un site mobile.

Quelle solution choisir ?

Il n'y a pas de doctrine dominante sur le sujet. Certains affirment que les CSS responsive sont finalement autant, voire plus complexes à réaliser qu'un site mobile dédié. De plus, ils n'allègent pas la quantité de données pour les mobiles, ce qui peut pénaliser l'expérience utilisateur sur des terminaux dont la vitesse de connexion est faible.Cependant, pour les débutant, on privilégiera sans doute ce mode de fonctionnement, tant l'offre commerciale de thèmes responsive est répandue.

Site mobile et SEO : Google s'intéresse à l'ergonomie

Dans son test PageSpeed Insights, Google attribue une note pour l'expérience utilisateur mobile : ce n'est sans doute pas pour rien ! Et le résultat est plutôt bon avec un site mobile dédié (ce qui est le choix retenu pour le dictionnaire du web) :[caption id="attachment_648" align="alignnone" width="520"]Test de site mobile Google Résultat du test d'ergonomie mobile pour le dictionnaire du web.[/caption]> Faire le test pour votre siteAvec un CMS comme Wordpress, il existe des plugins qui vont automatiquement créer une version mobile du site."["post_title"]=>string(11) "Site mobile"["post_excerpt"]=>string(0) ""["post_status"]=>string(7) "publish"["comment_status"]=>string(4) "open"["ping_status"]=>string(6) "closed"["post_password"]=>string(0) ""["post_name"]=>string(11) "site-mobile"["to_ping"]=>string(0) ""["pinged"]=>string(0) ""["post_modified"]=>string(19) "2014-04-27 13:45:06"["post_modified_gmt"]=>string(19) "2014-04-27 12:45:06"["post_content_filtered"]=>string(0) ""["post_parent"]=>int(0)["guid"]=>string(29) "https://www.1min30.com/?p=633"["menu_order"]=>int(0)["post_type"]=>string(19) "dictionnaire-du-web"["post_mime_type"]=>string(0) ""["comment_count"]=>string(1) "0"["filter"]=>string(3) "raw"}

Site mobile



Définition d'un site mobile

On appelle site mobile un site web dont le rendu, l'ergonomie et les fonctionnalités sont conçus pour être adapté au écran mobiles de petites tailles comme les smartphones (iPhone, Android, Windows Mobile, Blackberry...). Ce site web peut être totalement indépendant ou constituer la partie "optimisée pour mobile" d'un site web existant également en version "normale" (c'est à dire adapté aux écrans bureautique et éventuellement aux tablettes). (suite…)object(WP_Post)#10996 (24) {["ID"]=>int(83266)["post_author"]=>string(1) "1"["post_date"]=>string(19) "2014-09-26 09:57:03"["post_date_gmt"]=>string(19) "2014-09-26 08:57:03"["post_content"]=>string(4288) "

Définition

Un site One Page est un site constitué d'une seule page web contenant l'ensemble des contenus d'un site web. Cette page est divisée en plusieurs parties, dont les différents contenus sont accessibles en scrollant horizontalement ou verticalement (ou à l'aide de liens internes ancrés).Définition du site One Page

Pourquoi faire du One Page Design ?

Le fait d'accéder aux contenus en scrollant (ou en cliquant sur des liens ancrés) offre de nombreuses possibilités en terme d'effets et de design, par exemple pour réaliser des transitions en utilisant des effets de parallaxe. Les sites à fort contenu graphique sont particulièrement adaptés à l'utilisation du One Page.

Exemple de One Page Design

L'exemple ci-dessous montre qu'un site simple, assimilable à un site vitrine, peut être rendu particulièrement attractif grâce au One Page Design. Ce sont ici les transitions entre les contenus qui apportent une touche dynamique à l'ensemble :[caption id="attachment_2696" align="alignnone" width="600"]Exemple One Page Design Exemple de One Page Design[/caption]

Inconvénients des sites One Page

Bien que les nouvelles technologies permettent de corriger en partie ces défauts, le choix d'un site One Page présente généralement quelques inconvénients :
  • L'ensemble du contenu est chargé d'un coup, ce qui entraîne très souvent des lenteurs, avec des temps de chargement initiaux de plusieurs secondes, un point particulièrement négatif en terme d'ergonomie. Avantage corrélé : une fois l'ensemble du contenu chargé, la navigation par scroll dans le site est fluide et rapide.
  • Les sites One Page ne peuvent pas être travaillés en référencement naturel de la même manière que les sites classiques. La règle habituelle, qui veut que chaque page soit optimisée pour une expression cible, ne peut pas être appliquée. Il faut donc veiller à structurer la page unique de manière à bien séparer les contenus dans une optique SEO. On peut cependant obtenir de bons résultats en optimisant la page.
  • L'évolutivité du site est rendue difficile par les limitations inhérentes au One Page Design. On trouve ainsi des sites qui utilisent une approche mixte, avec des contenus accessibles sur une seule page à la manière d'un site One Page, complétés par des pages complémentaires classiques. Voir l'exemple de Savoie Mont-Blanc.

Faire un site One Page avec un CMS

Par défaut, les CMS du marché sont plutôt conçus pour créer des sites web classiques avec des pages qui sont reliées entre elles par des liens hypertexte. Pour faire un site One Page avec ces CMS, il faut donc utiliser des thèmes. Il existe ainsi des centaines de thèmes Wordpress One Page gratuits ou commerciaux. Il existe également des CMS spécialisés dans le one page comme CMSUno."["post_title"]=>string(13) "Site One Page"["post_excerpt"]=>string(0) ""["post_status"]=>string(7) "publish"["comment_status"]=>string(4) "open"["ping_status"]=>string(6) "closed"["post_password"]=>string(0) ""["post_name"]=>string(13) "site-one-page"["to_ping"]=>string(0) ""["pinged"]=>string(0) ""["post_modified"]=>string(19) "2018-02-08 12:21:07"["post_modified_gmt"]=>string(19) "2018-02-08 11:21:07"["post_content_filtered"]=>string(0) ""["post_parent"]=>int(0)["guid"]=>string(30) "https://www.1min30.com/?p=2605"["menu_order"]=>int(0)["post_type"]=>string(19) "dictionnaire-du-web"["post_mime_type"]=>string(0) ""["comment_count"]=>string(1) "0"["filter"]=>string(3) "raw"}

Site One Page



Définition

Un site One Page est un site constitué d'une seule page web contenant l'ensemble des contenus d'un site web. Cette page est divisée en plusieurs parties, dont les différents contenus sont accessibles en scrollant horizontalement ou verticalement (ou à l'aide de liens internes ancrés).Définition du site One Page (suite…)object(WP_Post)#10995 (24) {["ID"]=>int(83120)["post_author"]=>string(1) "1"["post_date"]=>string(19) "2014-04-14 08:53:44"["post_date_gmt"]=>string(19) "2014-04-14 07:53:44"["post_content"]=>string(1227) "

Définition

On appelle couramment "slider" le module technique qui permet de faire défiler des "slides" dans un site web. Par slide, on entend généralement des bannières qui peuvent contenir des images, du texte, des liens, des animations ou des vidéos.

Utilisation

Les sliders sont principalement utilisés sur les pages d'accueil et de ventilation des sites web et des boutiques en ligne. Ils permettent de créer du mouvement sur les pages et de présenter plusieurs produits ou plusieurs offres dans le même espace.Les bonnes pratiques en la matière consistent à :
  • Offrir à l'utilisateur la possibilité de faire défiler lui-même les slides (par un système de numéros ou de flèches de navigation).
  • Éviter la surabondance inutiles de slides. Il est préférable de limiter leur usage aux 3 à 4 messages clefs que vous souhaitez mettre en avant.
  • Permettre à l'utilisateur qui a mal à la tête de stopper le défilement des slides.
Si les sliders ont eu leur heure de gloire, leur efficacité est désormais remise en question."["post_title"]=>string(6) "Slider"["post_excerpt"]=>string(0) ""["post_status"]=>string(7) "publish"["comment_status"]=>string(4) "open"["ping_status"]=>string(6) "closed"["post_password"]=>string(0) ""["post_name"]=>string(6) "slider"["to_ping"]=>string(0) ""["pinged"]=>string(0) ""["post_modified"]=>string(19) "2014-04-14 08:53:44"["post_modified_gmt"]=>string(19) "2014-04-14 07:53:44"["post_content_filtered"]=>string(0) ""["post_parent"]=>int(0)["guid"]=>string(29) "https://www.1min30.com/?p=209"["menu_order"]=>int(0)["post_type"]=>string(19) "dictionnaire-du-web"["post_mime_type"]=>string(0) ""["comment_count"]=>string(1) "0"["filter"]=>string(3) "raw"}

Slider



Définition

On appelle couramment "slider" le module technique qui permet de faire défiler des "slides" dans un site web. Par slide, on entend généralement des bannières qui peuvent contenir des images, du texte, des liens, des animations ou des vidéos. (suite…)object(WP_Post)#10991 (24) {["ID"]=>int(83351)["post_author"]=>string(1) "1"["post_date"]=>string(19) "2015-02-16 09:08:37"["post_date_gmt"]=>string(19) "2015-02-16 08:08:37"["post_content"]=>string(4778) "

Définition

Un template (parfois appelé layout) est une page web sans contenu dont les éléments statiques sont déjà positionnés et mis en forme. Leur fonctionnent est très similaire aux modèles de documents Word ou Powerpoint.En français, on parle plus volontiers de "gabarit" de page plutôt que de "modèle", mot qui est pourtant la traduction littérale de l'anglais. Nous utiliserons indifféremment ces trois termes dans la suite de cet article.

Que contient un gabarit ?

Comme indiqué plus haut, un template permet de pré-positionner des éléments statiques de la page. Le gabarit va notamment contenir :
  • La disposition des zones de la page (header, logo, colonnes, footer), directement issue du zoning du site.
  • L'emplacement du ou des menus de navigation.
  • Les polices et couleurs des textes, titres et liens.
  • L'alignement des textes.
  • Les éventuelles images décoratives (icônes, fonds, menus, etc.)
Un modèle est donc constitué basiquement d'un fichier html (cas d'un site statique) ou php (s'il s'agit d'un CMS php), et de fichiers de mise en forme CSS, auxquels on peut adjoindre du Javascript pour offrir des mises en pages et des effets avancés. Sur le plan technique, un template est une page web comme les autres, mais elle ne contient aucun contenu.Il peut y avoir plusieurs templates dans un site web : un pour la page d'accueil, un pour une page de contenu classique, un pour une fiche produit... C'est également la façon dont est conçu le (ou les) template qui déterminera si une page web est responsive ou non. Un site mobile aura, quant à lui, un template par type de contenu et par version (desktop ou mobile).

Pourquoi utiliser un template ?

Un site web est constitué de plusieurs pages. Toutes contiennent des contenus spécifiques, mais certains éléments doivent rester identiques partout pour permettre aux utilisateurs d'avoir des repères. On imagine mal, par exemple, un site web dont le menu de navigation changerait de place ou de forme en cours d'une page à l'autre. Le template permet de garder cette cohérence en répétant les éléments fixes d'une page à l'autre.

Sites statiques (html / css)

Pour un site statique, le template va servir de base pour la création d'une nouvelle page, évitant de ré-écrire l'ensemble du code pour ne se concentrer que sur le contenu à ajouter. Il ne s'agit ici que d'une forme de copier-coller.

Sites dynamiques (CMS)

Les templates sont au centre du fonctionnement des sites dynamiques : c'est eux qui vont indiquer au CMS où positionner les différents contenus issus de la base de données. Ce principe de séparation entre les contenus et leur mise en forme permettra ainsi de changer l'apparence d'un site entier en apportant des modifications uniquement au template.

Exemple : les templates dans Wordpress

Dans Wordpress, il est possible d'accéder et de modifier un modèle de page dans l'interface d'administration :Exemple de template WordpressCependant, il est déconseillé de modifier un template de cette manière : en cas de mise à jour du thème, les modifications seront perdues. Si vous devez quand même le faire, pensez à bien documenter les modifications pour pouvoir les ré-appliquer après une éventuelle mise à jour."["post_title"]=>string(19) "Template (page web)"["post_excerpt"]=>string(0) ""["post_status"]=>string(7) "publish"["comment_status"]=>string(4) "open"["ping_status"]=>string(6) "closed"["post_password"]=>string(0) ""["post_name"]=>string(17) "template-page-web"["to_ping"]=>string(0) ""["pinged"]=>string(0) ""["post_modified"]=>string(19) "2015-02-16 09:08:37"["post_modified_gmt"]=>string(19) "2015-02-16 08:08:37"["post_content_filtered"]=>string(0) ""["post_parent"]=>int(0)["guid"]=>string(30) "https://www.1min30.com/?p=3930"["menu_order"]=>int(0)["post_type"]=>string(19) "dictionnaire-du-web"["post_mime_type"]=>string(0) ""["comment_count"]=>string(1) "0"["filter"]=>string(3) "raw"}

Template (page web)



Définition

Un template (parfois appelé layout) est une page web sans contenu dont les éléments statiques sont déjà positionnés et mis en forme. Leur fonctionnent est très similaire aux modèles de documents Word ou Powerpoint.En français, on parle plus volontiers de "gabarit" de page plutôt que de "modèle", mot qui est pourtant la traduction littérale de l'anglais. Nous utiliserons indifféremment ces trois termes dans la suite de cet article. (suite…)object(WP_Post)#10993 (24) {["ID"]=>int(83142)["post_author"]=>string(1) "1"["post_date"]=>string(19) "2014-04-22 21:21:17"["post_date_gmt"]=>string(19) "2014-04-22 20:21:17"["post_content"]=>string(4233) "

Définition

Un thème Wordpress est un modèle de mise en forme graphique des contenus pour le CMS Wordpress. On peut comparer un thème à une "peau" de site web.Pour simplifier, il s'agit du même principe qu'avec un modèle de présentation PowerPoint : quel que soit celui que vous choisissez, vos données seront conservées et mises en forme selon le modèle.Les thèmes Wordpress sont des programmes informatiques qui donnent les instructions relatives à la mise en forme des contenus. Ils sont donc soumis, comme les plugins, à des mises à jours régulières, des bugs et des failles de sécurité.

Comment se procurer un thème Worpress ?

Il existe plusieurs façons d'obtenir un thème Wordpress. Certains sont disponibles gratuitement dans la bibliothèque de thèmes Wordpress. Pour les versions les plus récentes du CMS, il est également possible de recherche un thème directement à partir du back-office. Il existe également des places de marché proposant des thèmes réalisés par des designers professionnels. La plus connue d'entre elles est ThemeForest.

Contenu d'un thème Wordpress

Un thème définit par exemple :
  • Les polices de caractères utilisées, leur taille et leur graisse
  • Les éventuelles images de fond
  • La mise en forme des éléments du site : menu de navigation, boite de recherche, widgets, liens, bas de page (footer), etc.
  • L'emplacement des différents zones (layout ou zoning)
Les meilleurs thèmes Wordpress contiennent généralement plusieurs gabarits de pages appelés templates : page d'accueil, page contact, liste de produit (pour les template Wordpress E-commerce), etc.Certains d'entre eux incluent également des plugins Wordpress comme par exemple des systèmes de sliders qui peuvent s'intégrer dans les modèles de page.

Bien choisir son thème

Le choix d'un thème Wordpress est bien plus complexe et engageant qu'il n'y parait. En effet, dans leur course aux meilleurs ventes, certains designers n'hésitent pas à inclure dans les thèmes des fonctionnalités qui dépassent largement le simple cadre de l'apparence du site. Ils multiplient l'intégration de plugins tiers comme les sliders, le SEO ou encore des éditeurs simplifiés (les "builders"). Cela engendre de nombreux problèmes de maintenabilité et d'évolutivité, sans compter les incompatibilités avec des plugins spécialisés et des performances en baisse (lenteur).

Installer un thème Worpress

Pour installer un thème dans Wordpress, rien de plus simple : il suffit de récupérer le fichier .zip qui le contient et de le télécharger via le backoffice.Thème WordpressSi vous ne pouvez le faire pour des raisons de droit utilisateurs, dézipper le thème directement dans le répertoire "theme" de Wordpress via FTP.

Template ou framework ?

Du fait des difficultés d'obtenir des thèmes de qualité, à la fois en terme de design, mais aussi en terme de qualité du code, de nombreuses agences préfèrent utiliser des framework pour développer eux-même les sites de leurs clients. Ces derniers offrent la possibilité de réaliser facilement un site Wordpress à partir d'une maquette graphique sans ré-inventer la roue à chaque fois, tout en offrant une grande liberté au développeur."["post_title"]=>string(16) "Thème Wordpress"["post_excerpt"]=>string(0) ""["post_status"]=>string(7) "publish"["comment_status"]=>string(4) "open"["ping_status"]=>string(6) "closed"["post_password"]=>string(0) ""["post_name"]=>string(15) "theme-wordpress"["to_ping"]=>string(0) ""["pinged"]=>string(0) ""["post_modified"]=>string(19) "2014-04-22 21:21:17"["post_modified_gmt"]=>string(19) "2014-04-22 20:21:17"["post_content_filtered"]=>string(0) ""["post_parent"]=>int(0)["guid"]=>string(29) "https://www.1min30.com/?p=460"["menu_order"]=>int(0)["post_type"]=>string(19) "dictionnaire-du-web"["post_mime_type"]=>string(0) ""["comment_count"]=>string(1) "0"["filter"]=>string(3) "raw"}

Thème WordPress



Définition

Un thème Wordpress est un modèle de mise en forme graphique des contenus pour le CMS Wordpress. On peut comparer un thème à une "peau" de site web.Pour simplifier, il s'agit du même principe qu'avec un modèle de présentation PowerPoint : quel que soit celui que vous choisissez, vos données seront conservées et mises en forme selon le modèle. (suite…)object(WP_Post)#10992 (24) {["ID"]=>int(83186)["post_author"]=>string(1) "1"["post_date"]=>string(19) "2014-06-01 10:48:02"["post_date_gmt"]=>string(19) "2014-06-01 09:48:02"["post_content"]=>string(3881) "

Définition

Le UX design consiste à penser et à concevoir un site web de manière à ce que l'expérience utilisateur soit la meilleure possible. Reste à définir ce qu'est une bonne expérience utilisateur.

UX design et UI design

L'interface utilisateur (UI pour User Interface) est un élément important pour un site performant. La conception d'une bonne interface utilisateur est codifiée et est essentiellement liée au zoning des pages ainsi qu'à leur apparence graphique (contrairement aux idées reçues, le design web est méthodique, et très peu artistique). L'expérience utilisateur va au delà : l'interface utilisateur n'en est qu'une composante.

L'expérience utilisateur (UX), qu'est-ce que c'est ?

Pour définir ce qu'est une bonne expérience utilisateur, il suffit de se remémorer les mauvaises. Qui n'a pas pesté devant un site mal fichu où il est impossible de s'y retrouver dans les catégories ? Combien d'entre nous vont immédiatement voir ailleurs quand un message d'erreur apparaît ? Qui a envie de remplir 5 pages de formulaires pour passer une commande à 20 EUR ? Le UX design vise donc à penser un site web de manière à ce que l'utilisateur se sente bien, en confiance, et puisse trouver les informations qu'il cherche tout en ayant envie d'interagir avec le site.Parmi les éléments importants de l'expérience utilisateur, on trouve :
  1. L'apparence du site et son ergonomie (cohérence du design, placement des éléments...)
  2. Sa capacité à rassurer l'utilisateur sur sa crédibilité (pas d'erreurs, identification de l'entreprise, témoignages...)
  3. L'efficacité du site : on doit trouver intuitivement et facilement les informations recherchées (moteur de recherche interne, catégorisation des contenus...)
  4. Le référencement, qui doit permettre aux utilisateurs de trouver ou retrouver le site facilement depuis les moteurs de recherche
  5. La facilité d'utilisation : par exemple, un processus de commande fluide pour une boutique en ligne
  6. La capacité à s'adapter aux différents terminaux utilisés par les utilisateurs : mobile, tablette, portable, grands écrans...

Le UX design : un métier à part entière

Si le UX design a longtemps été intégré à la conception des sites web de manière parfois un peu empirique, on trouve désormais des offres d'emploi spécifiques à ce domaine, ce qui montre l'importance croissante de cette "science".Il est également à noter que les moteurs de recherche comme Google recommandent depuis toujours de concevoir des sites favorisant une bonne expérience utilisateur. Certains critères SEO sont d'ailleurs issus de cette recommandation (par exemple le fait de ne pas mettre de popup sur les sites).Si cet article vous a plu, je vous invite à télécharger notre livre blanc 11 commandements d'un site qui convertit vos visiteurs en clients et à contacter notre agence web."["post_title"]=>string(27) "UX Design (User eXperience)"["post_excerpt"]=>string(0) ""["post_status"]=>string(7) "publish"["comment_status"]=>string(4) "open"["ping_status"]=>string(6) "closed"["post_password"]=>string(0) ""["post_name"]=>string(25) "ux-design-user-experience"["to_ping"]=>string(0) ""["pinged"]=>string(0) ""["post_modified"]=>string(19) "2018-02-01 14:39:06"["post_modified_gmt"]=>string(19) "2018-02-01 13:39:06"["post_content_filtered"]=>string(0) ""["post_parent"]=>int(0)["guid"]=>string(30) "https://www.1min30.com/?p=1562"["menu_order"]=>int(0)["post_type"]=>string(19) "dictionnaire-du-web"["post_mime_type"]=>string(0) ""["comment_count"]=>string(1) "4"["filter"]=>string(3) "raw"}

UX Design (User eXperience)



Définition

Le UX design consiste à penser et à concevoir un site web de manière à ce que l'expérience utilisateur soit la meilleure possible. Reste à définir ce qu'est une bonne expérience utilisateur. (suite…)object(WP_Post)#10988 (24) {["ID"]=>int(83132)["post_author"]=>string(1) "1"["post_date"]=>string(19) "2014-04-14 09:27:00"["post_date_gmt"]=>string(19) "2014-04-14 08:27:00"["post_content"]=>string(2627) "

Définition

La conception d'un site web ou d'une application repose sur plusieurs étapes clefs. Avant d'appliquer une "peau graphique" à un site, on passe par une étape intermédiaire qui consiste à positionner les éléments de la page et à les dessiner de manière "brute" : la maquette. On peut ainsi se focaliser sur l'ergonomie et l'organisation des contenus avant de demander au designer d'habiller l'ensemble.La maquette est généralement réalisée en deux étapes :
  1. Le zoning d'un site web ou d'une application consiste à définir et positionner les différentes zones fonctionnelles (les blocs) dans la page web. On va ainsi placer le logo, la zone de menu, le contenu principal, les colonnes et les éventuels widgets.
  2. Le wireframe part du zoning et détaille certaines parties contenues dans les différents blocs : emplacement des boutons, nature des contenus (image, vidéo...)... A ce stade, aucun design n'est appliqué, on chercher seulement à valider l'aspect fonctionnel du futur site web. On parle parfois également de mockup pour désigner un wireframe.
Le maquettage (zoning et wireframe) est réalisé préalablement au design du site web ou de l'application. Il est théoriquement le point d'entrée du designer pour mettre en forme chaque page, dans un cadre bien défini et clair.

Exemple de wireframe d'une page Web

Exemple de wireframe d'un site web

Outils pour le zoning et de wireframing

Il existe de nombreux outils pour réaliser le zoning et le wireframing de page ou d'applications. Certains sont spécialisés, comme Mockflow, mais on peut tout à fait utiliser des outils de conception graphique vectoriel standard comme Inkscape."["post_title"]=>string(27) "Zoning, wireframe et mockup"["post_excerpt"]=>string(0) ""["post_status"]=>string(7) "publish"["comment_status"]=>string(4) "open"["ping_status"]=>string(6) "closed"["post_password"]=>string(0) ""["post_name"]=>string(6) "zoning"["to_ping"]=>string(0) ""["pinged"]=>string(0) ""["post_modified"]=>string(19) "2018-02-09 07:40:07"["post_modified_gmt"]=>string(19) "2018-02-09 06:40:07"["post_content_filtered"]=>string(0) ""["post_parent"]=>int(0)["guid"]=>string(29) "https://www.1min30.com/?p=238"["menu_order"]=>int(0)["post_type"]=>string(19) "dictionnaire-du-web"["post_mime_type"]=>string(0) ""["comment_count"]=>string(1) "0"["filter"]=>string(3) "raw"}

Zoning, wireframe et mockup



Définition

La conception d'un site web ou d'une application repose sur plusieurs étapes clefs. Avant d'appliquer une "peau graphique" à un site, on passe par une étape intermédiaire qui consiste à positionner les éléments de la page et à les dessiner de manière "brute" : la maquette. On peut ainsi se focaliser sur l'ergonomie et l'organisation des contenus avant de demander au designer d'habiller l'ensemble. (suite…)