Jefaisvotresite.com Aller à la navigation
Photo du projet Geulin-TP

Geulin-TP
Voir le site internet

Geulin-TP est une entreprise de travaux publics et d’assainissement des eaux à Epreville près de Fécamp. Ensemble nous avons créé un site une page facilement administrable.

Avant de démarrer : travailler le contenu

Pour chacun des projets que je fais, il est important de se mettre à la place du visiteur, de s’imaginer avoir fait une recherche et cliqué sur le résultat de notre site. Cette mise en situation n’est pas facile pour tous les clients : l’envie de tout montrer prend parfois le dessus.

Or une page d’accueil, et les 30 premières secondes passées (voir moins) sur le site vont établir l’image que le visiteur se fait de celui-ci, de sa qualité et de sa pertinence.
Même si il est vrai que cette première impression est basée sur les émotions liées au design du site, elle repose aussi sur la pertinence du contenu par rapport au contexte de la navigation (une recherche dans notre cas de mise en situation).

C’est donc une étape très importante que de définir le contenu et de se représenter une hiérarchie du site. J’accompagne tous mes clients en ce sens et Geulin-TP n’y a pas échappé. Avec peu de contenu, il nous a semblé évident qu’un site "une page" était la meilleure solution en faisant une distinction entre les services aux particuliers et la location de matériel aux professionnels.

Création du design

Le design est la partie qui doit rendre service à votre visiteur, non pas celle qui doit vous plaire. Pourquoi ? Parce que vous n’êtes pas le visiteur.

Un visiteur ne vient pas sur votre site parce qu’il est joli, un visiteur vient avant tout sur votre site pour son contenu. Le design est le facteur qui fait le visiteur se sentir à l’aise et efficient dans la tâche qu’il exécute (rechercher de l’information).
Le design est donc là pour rendre service au visiteur en l’aidant à identifier les contenus, les liens, les sections de texte etc.

Geulin-TP m’a laissé carte blanche pour créer un design dans les tons bleus (bleu étant la couleur de leur logo).

Un immense fond avec un halo de lumière au centre tente de diriger le regard vers le contenu du site tout en établissant une couleur dominante. Vous voyez l’arrière-plan de ce texte, c’est exactement ça !

Le reste des couleurs a été décliné sur la base du bleu de fond et ont été rendues plus claires pour bien contraster avec ce dernier.

Choix typographiques

Toujours dans cette démarche de faciliter l’identification des contenus, le choix des polices utilisées est très important.

Geulin TP étant une entreprise assez âgée avec des services solides et biens ancrés dans le manuel, j’imaginais mal utiliser une police trop discrète ou trop moderne. Ce postulat éloignait pour mois les polices sans empattement, "sans serif".

Ayant l’habitude de travailler avec Google Webfont, j’ai recherché ce qui me semblait le plus adapté et je me suis arrêté sur Droid Serif pour tous les titrages.
En plus de ses empattements fins et légèrement arrondis, elle possédait une alternative sans empattement (sans serif donc) que je pourrais utiliser pour le texte afin de garder une harmonie entre les deux polices.

PNG - 45.1 ko
Droid Serif
Aperçu de Droid Serif
PNG - 42.5 ko
Droid Sans
Aperçu de Droid Sans

Une fois ce choix fait, il faut se focaliser sur la micro-typographie, la gestion des espacements, des interlignes, des marges, des alignements etc.
Cette étape est assez longue si on veut obtenir des des résultats optimaux tout en ayant des contenus bien distincts.

Optimisation des performances

C’est un point qu’on oublie trop souvent et il est d’autant plus important qu’on est dans le cadre d’une page "unique" où tout doit être chargé en une fois.

Pour accélérer le chargement de la page chacun des scripts Javascript est chargé via un CDN (CDNJS ou Bootstrap CDN). Le CSS lui est chargé via Boostrap CDN aussi et les polices via Google Web Font.
Le passage par des sites externes permet aux navigateur de paralléliser plus de requêtes en même temps et par conséquent dans la plupart des cas, de raccourcir le temps de chargement de la page.

Le CSS a été réduit au maximum grâce à Prepros. Cet outil se charge de compiler votre langage "préprocesseur" et de supprimer tous les espaces et caractères superflus pour réduire au maximum le poids du fichier.

Chacune des images a aussi été optimisée pour réduire le poids général de la page et j’ai ajouté le .htaccess de l’HTML5 Boiler Plate pour faire les dernières optimisations côté serveur (ETags, la compression des ressources texte, l’optimisation des en-têtes d’expiration, etc...).

Optimisation pour mobiles & tablettes

Une fois tous les éléments textuels et graphiques organisés, on peut tester l’affichage sur un écran d’ordinateur, sur une tablette ou un smartphone.

Dès le départ, et puisque nous avions bien organisé le contenu la version mobile "coulait de source" et se composait d’elle-même.
Une fois les derniers réglages fins effectués, le site est consultable sur tous les types d’écrans, on appelle ça être responsive.

Cette étape clôture les différents aspects dont j’ai tenu compte pour la création de ce site internet !

Partager sur Twitter Voir un autre projet Partager sur Facebook