Success Story
"Diadem Déménagements"

cercle
1
1
Une refonte pour plus d'identité
et un référencement naturel optimal

Le débat sur l’industrialisation de la production de sites internet est souvent au coeur de nos
discussions chez Mydigicompany. Comment concevoir avec efficacité sans tomber dans la
répétition
, l’automatisme qui annihile notre créativité ? Comment rester force de proposition
et souple quand on doit reproduire des processus récurrents communs aux différents projets
? Pourquoi ne pas sombrer dans les limbes de la facilité et du recyclage ? Parce que le
sacro-saint SEO (référencement naturel) et le non moins indispensable UX (experience
utilisateur) sont sacrifiés en chemin…

oldHome
AVANT
newHome
APRÈS

Le mode « tout manuel » est forcément incompatible avec un rapport qualité-prix compétitif et des délais de livraison raisonnables.
Ce sont souvent des problématiques qui se présentent alors que nous sommes en charge d’un projet de refonte d’un site internet produit par une agence à forte capacité de production, comme PagesJaunes ou Orange, par exemple.
Déjà, petite précision, on ne leur veut rien de mal 😉 ce sont surtout deux modèles, deux philosophies qui s’opposent.

2
2
Man
vs. Machine
Diadem

Stéphane Le Roux, gérant de DiaDem Déménagements était à la veille de son
renouvellement lorsqu’il nous a confié son site internet.
Au rang de ses principaux griefs :
● Les difficultés à mettre à jour son site internet
Un manque d’identité
● Un référencement naturel peu optimal
Après une rapide analyse, nous détections que son site est conçu avec Bootstrap, un
framework qui facilite et optimise l’intégration aux moyens de thèmes pré-conçus.
Un fonctionnement assez similaire aux bien connus CMS comme WordPress, Drupal, Joomla et consorts. Ne crachons pas dans la soupe, nous sommes les premiers à vanter les mérites de WordPress. Il faut garder en tête que ce ne sont que des outils, libres à leurs utilisateurs (les agences, les freelances, nous) d’en faire bon usage. Aujourd’hui, installer un thème et personnaliser les contenus rédactionnels de ce modèle ne prend que quelques petites heures. C’est tentant, forcément. Le bât blesse dès que la volonté de pousser un peu plus loin la personnalisation pointe le bout de son nez. Le cadre est finalement assez restreint. Le thème impose ses limites et il faut se plier à ces dernières. C’est ici que naissent les deux premières difficultés de DiaDem Déménagements : chaque demande de mise à jour devient un casse-tête et au final, le site de l’entreprise finit par ressembler à tant d’autres…

3
3
Le diable
est dans les détails
Ca tient parfois à peu de choses. Prenons un instant pour analyser visuellement la page d’accueil de l’ancien site de Diadem.

C’est plutôt cohérent. Les couleurs du logo sont reprises, les mots « déménagements » et « gardes meubles » sont mis en avant. Toutefois, cette image d’un Paris nocturne étonne un peu. S’agit-il d’une visite de la Tour Eiffel ou d’un tour en hélicoptère au dessus de la capitale ? Par ailleurs, toutes ces nuances de vert… A y regarder de plus près, cela fait un peu mal aux yeux. Logique, rien que dans cette capture, il y a quatre verts différents ! Et aussi, ne dit-on pas « Un vert, ça va. Deux verts, … ». Pour les fans de Pantone, #70b275, #1f8573, #37b6a0 et #5cb85c sont présents. Le logo de DiaDem, quant à lui, ne comporte qu’un seul de ces verts. L’ensemble donne un aspect assez amateur qui impacte directement l’image de Diadem Déménagements. Débarquez habillé avec autant de verts sur vous lors d’un premier rencard, vous verrez si la soirée prend une bonne tournure. Et l’idée n’est pas de faire concurrence à Cetelem…
Nous avons donc opté pour une démarche bien plus directe.

oldHome
newHome

Les couleurs de Diadem sont plus assumées avec ce vert et ce orange très en avant. L’image du camion colle également à l’activité et renforce une sensation de mouvement et de professionnalisme.

Certaines pages de l’ancien site poussaient même à se demander si l’on était bien sur le site d’un déménageur.

Notre approche a été de saupoudrer, un peu partout sur le site, des éléments visuels rappelant l’univers de Diadem Déménagements.
Des cartons, un canapé qui a changé de lieu de vie et des camions bien rangés. C’est à la fois pragmatique et au coeur de la problématique du visiteur et futur client de DiaDem Déménagements. Plus qu’un Paris vu du ciel en noir et blanc…

new1

La page Contact, elle aussi, a fait l’objet de quelques attentions pour rendre l’ensemble du parcours utilisateur cohérent et agréable.
A travers le parcours utilisateur, c’est le sérieux et le professionnalisme de DiaDem Déménagements qui doit transparaître. Il ne faut jamais oublier qu’un site internet est aujourd’hui une véritable vitrine, et souvent la porte d’entrée pour vos leads. Et comme on a qu’une fois l’impression de faire bonne impression…

contactOLD
Avant
contactNEW
Après

Le secteur du déménagement est fortement concurrentiel. Internet devient la première ressource pour trouver l’entreprise à qui l’on va confier sa télé et ses slips. Il faut donc fournir à DiaDem Déménagements un site prêt à être très bien référencé sur Google et Bing. De prime abord, on peut penser que l’ancien site, si peu personnalisé, doit être un as sur le sujet. Son thème, ce squelette si contraignant, doit sans doute être d’une optimisation redoutable. Et bien, en réalité, ce n’est pas vraiment le cas. Car si l’ensemble des critères utilisés dans l’algorithme de Google pour effectuer son ranking (l’ordre d’affichage des réponses) restent secrets, nous avons en notre possession des outils pour contrôler la qualité des sites que nous allons soumettre aux bots de Google. Des outils qui se basent sur de nombreux critères et décortiquent les sites internet à la recherche de failles de vitesse, de conception ou encore de sécurité. L’un des plus efficaces d’entre eux est le « PageSpeed Score », qui mesure la rapidité de votre site à s’afficher aux yeux de vos visiteurs ébahis. Impatients aussi : Les internautes ne supportent plus d’attendre une seconde supplémentaire. Leboncoin, Wikipedia ou encore Amazon, avec leurs interfaces utilisateurs plutôt pauvres l’ont bien compris. Google aussi, est un modèle de sobriété graphique. CQFD, le DiaDem nouveau devra donc être plus rapide que l’ancien tout en étant plus riche visuellement.

4
4
Et le référencement
naturel dans
tout ça ?
Capture d’écran 2019 09 10 à 17.20.45
AVANT

En chiffres, le PageSpeed Score de l’ancien site n’était pas si mauvais avec une note à 75%, plutôt dans la moyenne des sites internet actuels.
On constate vite les mauvais points :
• Le code n’est pas optimisé
• Les images sont lourdes

Là encore, c’est le manque d’intervention humaine qui coince. Car fraîchement intégré, un site ne peut pas être miraculeusement optimisé. Il va falloir intervenir à différents endroits clés. Voici, sans trop dévoiler nos secrets les grandes étapes de notre optimisation technique :

    1. Optimisation du poids et des dimensions des photos pour les différents devices (photos responsives).
      Ainsi, chaque appareil affiche une version optimale de chaque média. A petit téléphone, petite image ; à grand écran, grande image.
    2. Gestion des redirections de l’ancien site internet vers les nouvelles pages.
      Afin que votre SEO ne s’effondre pas lors de la refonte de votre site web, il est important de « dire » à google ce que deviennent les anciennes pages. La tâche, bien que simple peut être fastidieuse. Il faut en effet, récupérer toutes les URL (les adresses) des anciennes pages – qui vont donc disparaître – et indiquer la nouvelle URL de remplacement. Oui (et pourtant nous voulions éviter les blagues laborieuses liées au déménagement), c’est assez proche d’un renvoi de courrier postal. Mais pour les sites web, il faut imaginer que vous possédez un nombre conséquent de maisons à Toulouse et que vous les déménagez toutes à Reims. Le tout en faisant en sorte qu’aucun courrier ne se perde et finisse dans la bonne nouvelle maison. Vous allez en passer du temps au bureau de poste…
Performance-Diadem
APRÈS
    1. Mise en place du certificat SSL / HTTPS
      Google est vigilant à un site internet sécurisé. E-commerce ou pas.
    2. Intégration d’un CDN (Cloudflare)
      Placez une multitude de serveurs entre vos visiteurs et l’espace d’hébergement de votre site internet. Chaque serveur contiendra une copie récente de votre site internet. Et c’est le serveur le plus disponible qui affichera le site internet à un visiteur. C’est comme transformer une seule caisse à la sortie d’un supermarché en un grand nombre de caisses. Un samedi après midi, c’est appréciable. Et Google aime ça, les caisses rapides.
      Encore mieux, un CDN va vous assurer un niveau certain de protection contre de multiples attaques et vous permettre d’afficher un copie fonctionnelle en cas de plantage de votre hébergement. Et oui, nous incluons ça dans tous nos projets.
    3. Intégration à Google Search console et Google Analytics
      Deux outils indispensables pour s’assurer que tout va bien.
    4. Mise en place de cache dynamique
      Le cache est devenu inévitable pour éviter à vos visiteurs de recharger les mêmes éléments de votre site internet lors de deux visites ou plus.
    5. Cache Leverage via Htaccess
      Le but est de mieux gérer les délais de péremption de certains fichiers du cache. Ca devient technique, désolé 😉
    1. Automatisation des sauvegardes niveau serveur et niveau local (notre NAS chez nous)
      Car on aurait pu rajouter un 4e « w » aux fameux « www » (pour World Wide Web = l’internet largement mondial) pour Wild (= sauvage). Les dangers sont un peu partout, sortons couverts.
    2. Minification HTML / CSS / JS
      Ce sont finalement les trois types de fichiers qui font tourner votre site internet. En fin de développement, nous les faisons passer au régime sec et les débarrassons de tout ce qui est superflu, inutile ou redondant.
    3. Lazy Load (chargement différé des images)
      Si un visiteur ne scrolle pas jusqu’en bas d’une page, pourquoi charger les éléments qu’il ne verra peut être même pas ?
    4. Async JS (chargement différé du Javascript)
      Vous ne voulez pas avoir un mal de tête, promis. Mais il existe des articles passionnants pour les plus téméraires (ou curieux).
    1. Hébergement local des google fonts et du script google Analytics Faire des appels vers des ressources de Google peut être coûteux en temps. C’est ainsi que fonctionnent nativement les (très) pratiques polices de caractères fournies par Google et son script permettant d’envoyer des données vers la plateforme Analytics. S’il vous manque du beurre pour faire un gâteau, aller en chercher chez le voisin n’est pas le plus efficace. Même si votre voisin est riche en beurre. Du coup, on a choisi de ramener le beurre de Google sur notre serveur et de regarder de temps en temps chez lui s’il a mis à jour sa baratte. Histoire d’avoir toujours la plaquette grasse la plus actuelle. Nous pensons que c’est la mort des métaphores…
    2. Génération du sitemap Les robots de Google sont parfois un peu feignants. Bien sûr, ils sont assez grands pour parcourir toutes les pages de votre site internet. Mais même si l’on peut visiter l’intégralité d’une maison, on aime bien en avoir un plan, non ? Voilà à quoi servent les sitemaps. Fournir un plan de la structure de votre site internet. Plus fort encore, on peut ainsi dire à Google quelles sont les pages les plus importantes du site internet. Histoire qu’il ne passe pas tout son temps dans les WC mais admire la déco de votre salon.
    3. Et du favicon C’est cette petite icône qui s’affiche dans les onglets de votre navigateur internet. C’est pas grand chose, mais souvenez-vous où se cache le diable…
Autant d’étapes qui doivent être gérées manuellement, une à une. Un travail d’artisan et qui pourra varier d’un site à un autre. Toutefois c’est à minima l’ensemble des étapes que nous imposons à nos conceptions. Donc non, il ne suffit pas d’appuyer sur un bouton (si votre petit cousin qui a commencé sa première année en développement web vous dit ça, il se trompe).
5
5
Tout ça
pour quoi ?

Il y a fort à parier que l’ancienne agence qui avait produit le site internet de Diadem Déménagements n’avait pas respecté ces étapes. Voilà comment s’explique cette note de 75% en PageSpeed.
Au final, au delà de la note qui peut sembler peu concrète, la page d’accueil de l’ancien site (celle avec la tour Eiffel, oui) nécessitait 1,6 secondes à s’afficher. C’est peu, certes, mais pour une page aussi basique, c’est long.
Comparons avec les résultats que nous avons obtenus après les multiples tâches citées plus haut. Les efforts en valaient-ils la peine ?

La réponse est finalement sans appel avec un score parfait de 100% et un chargement de la page en 1 seconde tout pile. Le tout pour un site plus moderne, s’adaptant mieux au milieu, avec un parcours utilisateur plus fluide et une meilleure représentation de l’image de DiaDem Déménagements.

Gabriel

Intégrateur Front
guillemets copy 1

J'ai voulu dormir, et j'ai fermé les yeux - Tal

Fraîchement arrivé de SupdeWeb Paris, Gabriel (#Gab) fait aujourd’hui partie de l’équipe MyDigiCompany en qualité d’intégrateur front. Entre un premier bachelor commercial puis un second en web design, Gabriel a pris une année qui n’a rien de sabbatique puisqu’il en a profité pour retrousser ses manches et apprendre les bases de son futur métier. A coup de tutos, de formations, de tests grandeur nature et de frustrations en tout genre, Gab s’est montré un autodidacte accompli, ce qui l’a conforté dans son choix. Ancien joueur de foot, cet adepte de musculation et de moto est persévérant. Pour peu qu’il soit convaincu d’un projet, il ne lâche rien ni personne. Têtu ? Non. Jusqu’au-boutiste ? Carrément !

Le gif préféré de Gabriel

Qui suis-je ?

Google ou Microsoft ?
Google

Thé ou café ?
Thé même l’été

PC ou MAC ?
PC

CAC40 ou startup ?
Startup

Beatles ou Stones ?
Kyo

Picasso ou Rembrandt ?
Tout dépend si on parle du peintre ou de la voiture

Réseau social préféré ?
Instagram

gabriel
#rizpates
#moto
#genoudoctogénaire
#hashtag

Rio

Chief Happiness Officer
guillemets copy 1

"Les chiens n'ont qu'un défaut : ils croient aux hommes" (Elian Finbert)

Rio a rejoint MyDigiCompany en mai 2020 en tant que chief Happiness Officer pour le plus grand bonheur de toute l’équipe… ou presque.
Fan d’écologie, il déteste la voiture et préfère les longues balades en forêt.

Le gif préféré de Rio

Qui suis-je ?

Google ou Microsoft ?
Microsoft comme son père

Thé ou café ?
Qu’est-ce que c’est ?

PC ou MAC ?
Pas fan des écrans, préfère les rapports canins

CAC40 ou startup ?
Startup

Beatles ou Stones ?
Nino Ferrer

Picasso ou Rembrandt ?
Edvard Munch

Réseau social préféré ?
Dogstagram

rio
#vomitenvoiture
#toutlemondemekiffesauflinda
#beaugoss
#jepueetalors

Clémence

Chef de projet
guillemets copy 1

"Fais de ta vie un rêve et d'un rêve une réalité"

Dès son plus jeune âge, Clémence entretient son goût pour l’international et son accent du sud des Etats-Unis est resté intact lorsqu’elle s’exprime dans la langue de Michael Moore. Une école de commerce et un Master dans le Marketing Digital en poche ont permis à Clémence de se frotter au monde de la publicité, dans une régie parisienne, en charge des programmes marketing online et offline. Sportive, guitariste de haute voltige, touche-à-tout, Clémence est spontanée et toujours de bonne humeur. Une bouffée d’oxygène qui fait du bien !

Le gif préféré de Clémence

gif-site-mdc

Qui suis-je ?

Google ou Microsoft ?
Google

Thé ou café ?
Bière

PC ou MAC ?
Mac

CAC40 ou startup ?
Startup

Beatles ou Stones ?
Beatles (mais sinon Taylor Swift)

Picasso ou Rembrandt ?
Cecilia Giménez

Réseau social préféré ?
skyblog

clemence 3
#minimoys
#chats
#frites
#mangerdemanieregénérale
#concentration
#musique

Nat

Directeur Associé / Expert Hubspot
guillemets copy 1

Ce qui ne te tue pas te rend moins mort.

Ceinture noire multi-disciplines, star d’UX (désolé), adepte d’Hubspot et addict aux fonctionnalités utiles, il passe plus de temps à regarder Netflix qu’à côtoyer de vrais humains. Toujours prêt à dégainer sa caméra ou ses bonnes idées.

Le gif préféré de Nat

GIFNat

Qui suis-je ?

Google ou Microsoft ?
Google

Thé ou café ?
Café (n’a jamais cru au thé, qui est finalement du jus d’herbe)

PC ou MAC ?
Anciennement MAC (et anciennement riche, donc)

CAC40 ou startup ?
Startup, parce qu’on dirait le nom d’un boys band

Beatles ou Stones ?
David Bowie

Picasso ou Rembrandt ?
Edward Hoper

Réseau social préféré ?
Tinder

nat
#netflix
#NBA
#hubspot
#domotique
#herniediscaledemerde

Cyril

Développeur Back-End
guillemets copy 1

Si les ouvriers construisaient les bâtiments comme les développeurs écrivent leurs programmes, le premier pic vert venu aurait détruit toute civilisation

Bayonnais d’origine, Cyril est un développeur infatigable. Piqué par le virus informatique depuis son plus jeune âge, il va jusqu’au bout des choses, prêt à sacrifier ses weekends et ses soirées pour que … ça marche. Programmé pour durer, Cyril est à l’écoute des clients, prêt à rendre service. Et quand il s’autorise une courte pause en dehors des écrans, c’est sur son vélo qu’on le trouve, ou sur le canapé, devant un match de foot !

Le gif préféré de Cyril

GIFCYRIL

Qui suis-je ?

Google ou Microsoft ?
Qwant

Thé ou café ?
Thé, café, bières, whisky (sans glaçons, c’est ca qui rend malade)

PC ou MAC ?
PC….Apple c’est le Mal

CAC40 ou startup ?
Startup

Beatles ou Stones ?
Beatles, Stones et surtout Septic Flesh

Picasso ou Rembrandt ?
Rembrandt

Réseau social préféré ?
La vie ;)

CyrilRond
#randovélo
#larzac
#rocker
#php
#jaimepasparis