Petit dictionnaire des termes techniques.
Nous allons parler de WebDesign, car c’est lui qui nous importe le plus dans la partie graphique de nos projets.
Le métier
Pas Graphiste mais WebDesigner
Pour un projet web, vous n’avez pas besoin d’un graphiste, mais d’un WebDesigner car tout ce qui est visuel doit pouvoir s’adapter en fonction des capacités du navigateur et de la largeur de l’écran sur lequel vous le regardez. Dans le cas d’un navigateur ne supportant pas une fonctionnalité globalement supportée, on doit prévoir quelque chose de fonctionnel. On dit que l’on prévoit la “dégradation” de l’interface (pour les tailles d’écran aussi).
Le graphiste qui vient du monde de l’impression (le print) n’aura tout simplement pas connaissance de comment fonctionne le code d’un site. Il prendra donc tout simplement les mécanismes qu’il utilise habituellement et tentera de les transposer pour le web.
Graphiquement, son travail sera très joli, mais impossible à respecter. Ce travail, entraînera de nombreux contretemps et problèmes de validations par rapport aux contenus (pour les soucis les moins graves).
Plus d'informations
Par exemple :
Des structurations de contenus qui sont contradictoires entre affichages pour PC et mobile ou qui brisent le balisage sémantique du contenu (si important pour le référencement).
Les tailles seront probablement dans des unités de mesures du print qui rendent différemment entre PC et Mac.
En cas de respect des tailles de polices, vous aurez probablement des titres qui dépassent de l’écran sur mobile pour les problèmes les moins graves.
Admettons que l’on utilise une calculette et qu’on convertisse dans une unité de mesure équivalente entre PC et Mac en choisissant le gagnant, utiliser ces tailles pour le site sera probablement loin d’être joli. En effet, la méconnaissance du métier fait que les tailles choisies rendent le graphisme joli si on zoom ou dézoom dessus, mais comme les largeurs du design et du corps du design ne correspondent probablement à aucun standard, les transposer les éléments en respectant les tailles de polices d’écriture sera catastrophique visuellement.
Perdre du temps pour les adapter entraînera d’autres pertes de temps plus tard car des éléments du visuel du site ne rendront plus aussi bien que le graphisme (pour des tonnes de raisons différentes sur des tonnes de points différents, facteur du nombre de contenus dans le produit)…
Employer un graphiste pour un projet web, c’est créer un affrontement entre deux mondes.
Méfiez-vous de ces graphistes “qui font du web”.
WebDesigner pas Graphiste
Le WebDesigner produit un travail graphique qui permet de produire un design, pas un graphisme (si personne ne vous a mis en garde, vous ne saviez pas qu’il y a une différence et vous cherchiez probablement un graphiste).
Un WebDesigner demandera quels sont les paramètres qu’il doit respecter par rapport à la future intégration (fait d’ajouter le design sur les contenus du site) de son travail.
Il aura peut-être même les compétences nécessaires pour faire lui-même des intégrations.
En tout cas, il ne fera aucune faute de structure de contenu, aucune incohérence dans l’adaptation visuelle de l'articulation visuelle des contenus et de leurs structures des uns avec les autres entre les différentes largeurs de design pour support mobile, tablette, PC portable, etc.
Il prendra en compte le CMS (Content Management System) et l’environnement utilisé avec ce dernier par l’Agence Web pour que son Design ne pose aucun problème. Il ne passera pas de nombreuses heures à refaire ce qu’il aurait mal fait.
Les méthodes
Responsive Web Design
Pour chaque site web responsive, il faut concevoir comment le design va se transformer entre les différentes largeurs d’écran en utilisant ce qui s’appelle des points de rupture (seuils) pour lesquels des changements visuels devront être réalisés. Le concept est ensuite réalisé à l’aide de HTML5 (structuration du contenu) et de CSS (stylisation visuelle). Le concept a été inventé par Ethan Marcotte.
Adaptive Web Design
Le concepteur de ce principe nous vient de Aaron Gustafson. mais bien qu’il ait un but similaire au Web Design Responsive, nous ne l'utilisons jamais puisqu'il repose sur un concept qui a démontré de nombreuses fois ses limites. Le browser Sniffing qui consiste à déterminer le système d’exploitation, le navigateur web et leurs versions afin de générer un contenu différent côté serveur et/ou exécuter du Javascript différent dans le navigateur en question. Il est évident que le parc de navigateurs et de systèmes d’exploitation évolue (leurs versions aussi). Une solution basée sur ce concept est donc vouée à l’échec en plus d’être un casse-tête à maintenir en bon état.
Mobile First Design
Par opposition avec le Desktop First Design, il s’agit (pour simplifier) d’utiliser une approche qui va partir d'une version de design pour le mobile et la transformer en une interface pour un écran de bureau (et toutes versions pour les points de rupture intermédiaires).
Progressive Enhancement (Amélioration Progressive)
Les navigateurs supportent régulièrement de nouvelles fonctionnalités (ou malheureusement pour certains comme le très coutumier du fait qu’est microsoft, rendent disponible l’appel à ces fonctionnalités sans qu’elles soient présentes).
Pour connaître la couverture de chaque fonctionnalité par les principaux navigateurs, nous consultons des recueils officiels. Si la fonctionnalité n’est pas complètement supportée depuis très longtemps, nous partons du principe qu’il faut utiliser l'amélioration progressive.
Cela consiste à faire dans un premier temps le produit comme si la fonctionnalité n’était pas présente. Toutefois, on utilise “du code” qui va détecter l'absence ou la présence de cette fonctionnalité. Puis après toutes les détections effectuées, ces indications vont être utilisées pour améliorer différents aspects du produit. Que ce soit en utilisant des fonctionnalités présentes (ou en l'absence de ces dernières, un palliatif si cela est viable).
Plus d'informations
Le problème est complexifié car beaucoup de personnes continuent à utiliser le navigateur “abandonné” par Microsoft (Internet Explorer dernière version sortie en 2013) qu’il a remplacé par Edge (déjà 9 versions de ce dernier au moment de rédaction de l’article) et qui est normalement aussi installé avec ces derniers systèmes d’exploitation. En conclusion, beaucoup de fonctionnalités pourraient être considérées comme globalement supportées si la fracture numérique n’était pas si importante en France et ce même dans les entreprises. Nous conseillons le plus possible de limiter l’amélioration progressive à un rôle d’amélioration par l’utilisation de fonctionnalités présentes et non pas par l’utilisation de palliatifs qui présentent toujours un risque futur.
La conception
Croquis
Première partie de la conception d’un design après le recueil des besoins, cette étape est primordiale. Peu coûteuse en ressources, elle permet de rapidement mettre en place les éléments principaux du site et leurs futures articulations entre les différents supports (mobile, tablette, etc). Dans le meilleur des cas, ils sont réalisés en présence du client lors de la première rencontre ou via un outil de partage d’écran par exemple.
Grey Boxes vs. WireFrames
Cette étape de conception est là pour concevoir tous les types de pages et leur structuration visuelle sur les différents supports. Cette étape se passe de toute personnalisation visuelle du produit, seule une gamme de gris ou une couleur unique est utilisée en fonction de la solution retenue.
WireFrame
La grosseur du projet et son budget, motiveront l’utilisation de WireFrames haute ou basse définition. Il s’agit de réalisation statique souvent en niveaux de gris qui donnent un aperçu du positionnement de tous les éléments d’une page. Le désavantage est que nous réaliserons donc un fichier pour chaque combinaison type de page plus type de support.
Grey Boxes
Semblable aux WireFrame visuellement, la différence est que dans le cas présent, le système utilisé nous donnera la possibilité de créer les adaptations pour chaque support lors de la création de chaque page type. Le système permet alors une présentation dynamique.
Style Tile
Il s’agit de définir d’une page sur laquelle tout l’univers graphique du futur design sera défini et l’apparence de certains éléments. Le plus fréquemment, ce sera : les couleurs, patterns graphiques (motifs), les webfonts (polices web), les tailles, les titres, sous-titres, les liens et les boutons et le logo.
Page Prototype vs. Assemblage Graphique
Pour un petit projet, cette étape est parfois sautée pour ce lancer directement dans la réalisation (dans ce cas-là, il suffit d’améliorer la précision de la Tile Layer validée en ajoutant des éléments plus précis qui pourraient être graphiquement plus sensibles).
Un prototype de page sera réalisé en assemblant les informations graphiques de la Style Tile avec la structure d’une Grey Box. Le résultat sera donc dynamique.
L’assemblage quant à lui s’obtient en combinant la Style Tile avec la structure d’un WireFrame. Le résultat est donc statique.
Une solution intermédiaire peut exister en combinant des exports statiques de la Grey Box avec la Style Tile.
La réalisation (intégration)
L’intégration d’un design (pour le web ou non) est la phase finale du design pour des projets informatiques.
Dans le cas d’un site web ou d’une application web, les éléments suivants interviennent :
- un langage serveur qui va générer une page HTML,
- la structure du HTML interprétée par le navigateur va structurer vos contenus,
- la feuille de style CSS interprété par le navigateur va “décorer” vos structures et contenus,
- éventuellement du JavaScript va permettre certaines actions comme la détection de fonctionnalités navigateurs (toutes doivent avoir comme but principal, d’améliorer l’expérience utilisateur).