Améliorations graphiques du site

Le confinement m’aura permis de me consacrer à IMPAVIDE

J’ai investis pas mal de mon temps hier et aujourd’hui dans l’amélioration du CSS sur IMPAVIDE. Le thème Wordpres Twentysixteen qui a servi de base commence à moins se faire sentir. J’ai essentiellement modifié les espacements, typographies et procédé à l’ajout d’ombres afin d’apporter (je l’espère) une meilleure hiérarchie visuelle, un sens de lecture et de la profondeur.

J’ai également tenté d’attirer l’œil sur les call-to-action (« Donner mon avis », « Continuer la lecture ») en placant un ou plusieurs emojis. Vous aurez peut-être remarqué que devant chaque lien de ce site figure une emoji de planète terre. Il rappelle l’image du logo du site qui est une image du domaine public. Si vous êtes sur ordinateur, le curseur et la barre défilement ont également changé. Et enfin, pour gagner en accessibilité, j’ajoute un contour de pointillé sur les ‘focus’ et ‘active’ en CSS. Cela a pour effet de confirmer à l’utilisateur par un feedback visuel que le clic est pris en compte et que le site réagit et participe à l’amélioration de l’expérience utilisateur.

Sur cette capture, un emoji est placé après le lien afin d’attirer le regard et souligner le fait que cet élément soit cliquable.

L’apparence à été soignée en mobile puisque 70% du trafic sur ce site proviendrait d’un smartphone et ce nombre croît.

Insérer un emoji avant chaque lien en CSS

a::before {
  content: '📱';
}

Simple mais efficace. Inutile (je ne le pense pas) donc indispensable.

N’hésitez pas à me signaler le moindre problème.

Auteur : Dan

I'm working as a Developer / IT support agent. I sing, play bass and guitar. I write and aggregate content on impavide.be

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.