Préparer la structure

Bien avant de procéder à l’installation de WordPress et de commencer à rédiger vos premières pages, prenez le temps de réfléchir sur papier et de poser les principales bases de votre projet web. Vous aurez ainsi l’assurance de construire un site solide, à la structure et à l’architecture correctement bâties.

Même si WordPress se prête particulièrement bien aux modifications rapides et à la construction d’un site web à la volée, par l’intermédiaire de son interface d’administration simple et intuitive, résistez à la tentation de foncer tête baissée dans votre projet. Vous courrez en effet le risque de partir sur de mauvaises bases et de voir les erreurs initiales s’amplifier avec le temps : avec une structure bancale, voire l’absence totale d’architecture, vos articles vont mal s’imbriquer et les thèmes n’apparaîtront pas clairement aux visiteurs. Rien de pire que de proposer un “patchwork“ de contenu : le Web s’accommode mal de ces éléments émiettés et l’engagement de vos utilisateurs, sans parler de votre référencement dans l’ensemble, risquent grandement d’en pâtir. Pour orchestrer au mieux votre projet et proposer un contenu autant fédérateur qu’original, armez-vous des deux outils principaux du web designer : le papier et un crayon. Rien de tel que de s’éloigner de l’écran l’espace d’un instant pour mieux réfléchir aux éléments indispensables de votre projet, avant d’y revenir pour les concrétiser dans un cycle de développement plus fluide et clair.

Les structures de WordPress

Même si nous vous avons recommandé de ne pas vous focaliser sur l’outil informatique lors de la préparation de votre projet web, il est toujours intéressant de connaître en amont les différents types de structures dont vous allez profiter. WordPress propose indifféremment le même éditeur de texte pour vos articles et vos pages : retenez toutefois que ces derniers correspondent généralement à du contenu statique, que vos visiteurs ne sont pas supposés commenter (même si c’est possible). À l’inverse, les articles sont des éléments de contenu dynamiques qui appellent des échanges entre les visiteurs : leur date de publication est également importante, et ils s’inscrivent dans la chronologie de votre site web et dans une ou plusieurs catégories. En clair, les mentions légales seront une page tandis que l’actualité de votre société sera décrite au jour le jour à travers des articles.

vous complétez les pages et articles à l’aide de widgets, de petits modules qui peuvent héberger du texte statique, une série de liens, un menu personnalisé ou une fonctionnalité issue d’une extension, par exemple. Les menus, à ce titre, peuvent contenir quatre types d’éléments : un lien vers une page, un lien vers un article, un lien vers une catégorie d’articles et un lien personnalisé (y compris externe).

Les outils de “mind mapping”, comme ici MindMup.com, vous permettent de noter les liens entre les idées que vous relevez lors du brainstorming initial.

Design tendance 1

Informez-vous des tendances actuelles pour choisir votre thème.

1 Pleine page

Maîtrisez les nouveaux codes du web design, comme ces sections en pleine page qui s’illustrent d’une photographie en haute définition.

2 Déclinaison

Multiples déclinaisons pour mobiles et tablettes.










3 Navigation

En identifiant et en structurant votre contenu en amont, vous aurez l’opportunité de développer des systèmes de navigation très originaux.





L’architecture modèle-vue-contrôleur

Puisque l’on évoque la notion de « cycle de développement » autant clarifier l’un de ses schémas les plus classiques, qui trouve tout son sens avec WordPress : l’architecture modèle-vue-contrôleur. Dans ce type de développement, on distingue nettement les trois facettes d’un site web. Le modèle correspond aux données à proprement parler, à savoir vos pages statiques et vos articles par exemple. La vue est le design de votre site web : sous WordPress, il s’agit du thème que vous avez choisi et personnalisé. Enfin, le contrôleur correspond à la « logique » qui puisse le contenu du modèle pour l’afficher dans la vue : c’est le liant opérationnel qui fait fonctionner votre site web. Toujours dans le cadre de WordPress, il s’agit en particulier des extensions que vous installez et configurez pour soutenir l’expérience de vos visiteurs. WordPress s’inscrit dans une telle architecture car,quel que soit le thème que vous appliquez, le contenu reste le même : il est inscrit dans la base de données de votre site web, et s’adaptera naturellement à la « vue » que vous lui imposerez. A ce titre, retenez que le Web oblige désormais à prendre en considération une multitude de vues différentes : de l’écran réduit des mobiles ou tablettes à celui, nettement plus imposant, des ordinateurs de bureau, vous ne pouvez pas présenter le contenu de la même manière et vous devrez ainsi réfléchir à une série de vues différentes pour améliorer la lisibilité sur chacun des supports. Il s’agit de la notion de web « responsive », où le contenu s’adapte à l’écran qui le parcourt, et WordPress va largement vous aider à déployer un tel site protéiforme.

L’intérêt d’une telle architecture est donc de séparer nettement les tâches : vous pouvez construire indépendamment le contenu et le design, et il vous sera également possible de changer radicalement de thème WordPress sans pour autant perdre ou réécrire vos articles  et vos pages. C’est d’ailleurs en partie pour cette raison que vous avez intérêt à commencer par plancher sur papier : vous vous affranchissez de tout élément parasite et vous pouvez réfléchir à la forme et au fond de votre site web en vous assurant ensuite qu’ils s’imbriquent comme les pièces d’un  puzzle. Dans un premier temps, essayez de structurer votre projet en réfléchissant au premier niveau de « l’architecture de l’information » : quels sont les thèmes principaux que vous souhaitez évoquer ? Quel est le message que vous désirez passer ? Dans le cas d’un site vitrine, par exemple, vous devez établir l’image et les informations que vous souhaitez véhiculer. S’agit-il essentiellement de présenter votre activité ? Le public vous connaît-il déjà ou ignore-t-il tout de vos services ? Dans un cas ou dans l’autre, les informations à transmettre en priorité seront différentes. Et à ce titre, pouvez-vous déjà identifier vos futurs visiteurs ? S’agira-t-il d’un groupe uniforme ou au contraire d’une audience bien plus large, composée d’experts comme de débutants ou de simples curieux ? La création d’un blog ou d’un magazine sur le Web obéit peu ou prou aux mêmes questions fondamentales. Quels sont les thèmes que vous souhaitez aborder ? Quels sont les groupes de visiteurs que vous serez susceptible de rencontrer ?

Dans un premier temps, accordez-vous une séance de brainstorming et notez sur de petites étiquettes toutes les sections et tous les thèmes que vous souhaitez aborder sans vous focaliser sur leur ordre et leur agencement. « Qui sommes-nous ? », « Contact », « Mentions légales », un bloc de connexion vers un compte personnel ou un diaporama d’images : sans vous limiter, définissez tous les éléments de contenu qui vont composer vos pages. Progressivement, toutes vos sections devraient ainsi se dégager de cette première réflexion. Mettez de côté tous les autres éléments pour lesquels vous n’avez pas encore trouvé de réelle utilité ;  ils pourront composer certaines parties de vos pages. Vous parvenez ainsi à distinguer les thèmes « parents’ des éléments qui participent à la structure de vos pages ou à l’expérience des utilisateurs. Dans le cas du site web d’un restaurant, par exemple, vous aurez identifié les sections « menu », « réservation », « presse », « contact » et « actualités », tandis que vous aurez réfléchi à l’intérêt d’afficher un diaporama d’images, une carte avec la localisation de l’établissement et un bloc avec les horaires d’ouverture. Pour un blog, vous affinerez la sélection des thèmes en hiérarchisant également des sous-sections : les thèmes parents doivent  être suffisamment larges pour s’ouvrir à d’autres sujets, qui s’y imbriqueront naturellement, si de nouvelles idées vous viennent par la suite ou si vous constatez un certain intérêt pour une autre thématique en consultant vos statistiques de fréquentation. En outre, vous aurez identifié des éléments connexes qui vont soutenir la navigation des utilisateurs, comme la possibilité de créer un compte personnel pour commenter vos articles ou l’affichage d’encarts publicitaires.

Design tendance 2

Informez-vous des tendances actuelles pour choisir votre thème.

1 Parallaxe

Les effets parallaxe habillent les longues pages et distinguent les différentes sections.







2 Elements connexes

En marge de l’organisation de votre contenu en catégories et sections, réfléchissez à tous les éléments connexes qui vont participer à l’architecture de votre site.





3 Responsive

Plus votre contenu est riche et varié et plus vous devrez consacrer du temps à le hiérarchiser, en réfléchissant aux répercussions pour les déclinaisons responsives.


Consolider l’architecture de votre site

Même si ce premier exercice peut vous paraître artificiel, ou tout du moins ne prendre que quelques dizaines de minutes tout au plus (en particulier si vous avez déjà une image assez précise de votre projet en tête ou s’il n’appelle pas un choix parmi d’innombrables solutions), il a le mérite de structurer votre contenu et de vous laisser entrevoir les étapes à venir. Les thèmes ainsi dégagés deviendront les catégories de vos articles, et les sections se transformeront en éléments du menu principal. La phase de configuration initiale ne vous accaparera que quelques minutes tout au plus. Tous les éléments connexes, en particulier les modules fonctionnels comme les annonces publicitaires, les éventuels systèmes de réservation ou les diaporamas, feront l’objet d’une recherche approfondie parmi les catalogues d’extensions gratuites ou payantes.

Passez à présent à l’ébauche des différentes vues de votre projet. Comme nous l’avons expliqué en préambule, vous vous adressez désormais à une grande variété d’appareils, dont l’écran présente une résolution radicalement différente.

Toujours sur papier, essayez d’esquisser les grandes lignes du design pour les trois familles principales de supports : les mobiles, les tablettes et les ordinateurs de bureau. En reprenant les étiquettes que vous aviez composées, hiérarchisez l’importance de chaque é ément : sur un mobile, par exemple, où l’espace est très réduit, vous pourrez vous dispenser des éléments de troisième niveau ou évincer la colonne latérale que vous prévoirez pour les écrans de plus grande définition. En parallèle, vous avez intérêt à vous familiariser avec les grandes tendances du webdesign en 2019. On distingue sept catégories principales, qui participentue parfois à soutenir certains éléments de votre site web ou qui définissent l’habillage de votre thème entier. Il ne s’agit pas ici de vous abrutir de termes techniques jetés pêle-mêle mais plutôt de vous exposer les principales caractéristiques des thèmes gratuits ou payants que vous trouverez sur les différents catalogues en ligne, afin de mieux comprendre leur intérêt.

Choisir et composer votre thème

Le long scrolling (ou one-page) correspond à un très long défilement vertical, où les éléments se superposent les uns au-dessus des autres. Dans le cas d’un site vitrine, on peut imaginer que des sections viendront « couper » ceuk gigantesque gratte-ciel et que le menu de navigation principal ne contiendra que des ancres vers ces différentes sections ; un script jQuery viendra animer le défilement (on parle de smooth scrolling) ou ramener le visiteur vers le haut de la page. Dans le cas d’un blog ou d’un portfolio, par exemple, cette longue page verticale se construira au fur et à mesure : lorsque le visiteur atteint ce qui lui semble être le bas ce la page, de nouveaux éléments se chargent et viennen: la compléter. On parle de lazy-loading pour désigner ce chargement asynchrone, qui intervient lorsque de nouveaux éléments s’apprêtent à être utiles : vous ne pénalisez pas les performances globales du site, en chargeant des centaines d’éléments visuels d’un seul tenant.

Les effets parallaxe ont également le vent en poupe. Concrètement, il s’agit d’animer à une vitesse différente l’arrière-plan d’une section et le texte qu’elle soutient, lorsque l’on fait défiler une page : un sentiment de profondeur s’en dégage ce qui donne, littéralement, du relief à votre contenu. Vous pouvez utiliser ce type d’effet pour habiller les différentes sections qui composent votre one-page par exemple. Toujours en matière d’éléments venant enrichir à moindres frais la navigation et soutenir le contenu, les grandes images ou les vidéos en guise d’arrière-plan sont également très populaires. Placées dans l’en-tête de votre page d’accueil avec un simple slogan accrocheur, elles s’intitulent des hero sections et viendront introduire de belle manière un site vitrine, par exemple. Eles sites vitrine profitent d’ailleurs de ces concepts pour miser sur le story telling, littéralement « raconter une histoire » : de bout en bout, vous pénétrez dans un univers, vous incarnez un rôle et vous devez mener des actions – le thème s’articule ainsi plus que jamais autour de larges images et de nombreux éléments visuels, avec des animations riches. C’est toutefois un concept à réserver aux projets les plus ambitieux, ou aux activités qui s’y prêtent particulièrement : rien de pire que de proposer une histoire bancale, à laquelle il est difficile d’adhérer. Il en va de même pour le principe de la gamification, c’est-à-dire l’introduction d’une forme de « jeu » au sein d’un site. Outre la pure intégration de jeux HTML qui viennent étayer la navigation ou communiquer un message, on peut penser aux sites web qui récompensent les utilisateurs qui participent le plus à l’aide de points ou d’un score à comparer avec les autres visiteurs. Là encore, n’entamez pas la création d’un tel système sans être sûr que la communauté va vous suivre derrière.

Exemples de menu hamburger

Enfin, puisque l’on a évoqué l’incontournable principe du responsive design, vous pouvez intégrer à vos prototypes d’habillage la notion de menu hamburger. D’ordinaire réservé aux déclinaisons d’un thème pour les mobiles et les tablettes, il doit son nom aux trois lignes horizontales qui le composent : les utilisateurs ont désormais bien compris qu’en tapant dessus, ils viendront dérouler un menu plus complet qui se superpose au contenu. Vous n’avez donc pas besoin de prévoir un large espace pour soutenir le système de navigation sur un mobile; de nombreux thèmes prêts à l’emploi sauront transformer le menu classique que vous composez pour WordPress en cette icône « hamburger ». Sachez par ailleurs qu’il est désormais possible de varier les typographies d’un site et de sortir des classiques polices Arial, Times New Roman ou Helvetica : on parle de « web fonts » pour désigner ces polices directement chargées en CSS depuis un service web, comme Google Fonts (https:// fonts.google.com). Avec tous ces éléments en tête, il vous sera plus facile de trouver un thème qui correspond à l’esquisse que vous avez réalisée sur papier. Si vous n’avez pas de budget particulier, commencez par parcourir le catalogue de thèmes gratuits : rendez-vous à l’adresse https://wordpress.org/themes et cliquez sur « Feature Filter » pour trier la liste en fonction de vos besoins. Parmi les détails des thèmes ainsi repérés, vous retrouverez certains des termes techniques que nous venons d’évoquer. Mais si vous disposez de 30 à 60 euros à consacrer à un thème, nous vous recommandons de vous rendre sur https://themeforest. net. Là encore, cliquez sur les mots-clés (« tags ») sur le volet gauche de l’écran pour affiner la sélection et consultez les démos pour vous familiariser avec les différentes possibilités.

Vous aimerez aussi...

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *