Des solutions innovantes pour la refonte de manitou.com

Bérénice - 18/06/2015

Pour la refonte de son site web, le leader mondial du chariot élévateur a fait confiance à Escale pour s’occuper du design et de l’intégration de manitou.com. Un site web sorti le 28 mai dernier après un an de travail collaboratif entre Escale et trois startups locales.


page accueil manitou Escale

La nouvelle page d’accueil de manitou.com


Deux ans après le lancement de son dernier site web, qui a rapidement présenté de nombreux problèmes, Manitou a lancé un appel d’offre pour une nouvelle refonte de ce site. Avec un cahier des charges complexe, lié notamment à l’importance de sa base de données et son activité mondiale, Manitou décide de collaborer avec plusieurs entreprises locales : Escale pour l’ergonomie, le design et l’intégration, Prismic.io, via son représentant nantais, pour la gestion de contenus, Clever Cloud pour l’hébergement et SEO4Ajax pour des problématiques liées au référencement.

RAYONNEMENT INTERNATIONAL ET DUPLICATE CONTENT

L’entreprise familiale Manitou naît en 1958 avec le chariot MC5, et s’est développée constamment depuis pour être aujourd’hui n°1 mondial du chariot élévateur, avec un réseau de 1 300 concessionnaires indépendants et un chiffre d’affaire qui atteint un milliard d’euros par an, soit en moyenne 3 millions par jour.

Mais son rayonnement international implique de nombreuses contraintes dans le cahier des charges de son site Internet. Avec des normes qui varient d’un pays à l’autre, les produits se retrouvaient dupliqués sur le site web, dans les marchés d’un côté et dans les catégories de l’autre. On atteignait donc une base de données de 320 000 machines et 70 000 accessoires, contre un catalogue réel de 250 machines et une centaine d’accessoires.

Pour répondre à cette problématique, l’ancien site se structurait en 19 sous-sites, accessibles dans plusieurs langues. Conséquences de ce duplicate content (contenu dupliqué) : un mauvais référencement et des coûts importants déployés pour le développement de ces mini-sites, ainsi que leur maintenance. De plus, le site manitou.com n’était pas capable de gérer les surcharges de trafic, liées généralement à des apparitions dans les médias.

page accueil manitou

La page d’accueil de l’ancien manitou.com


UNE ARCHITECTURE WEB DÉPORTÉE

Pour pallier ces différentes problématiques et optimiser sa structure de coûts, Manitou a opté pour un hébergement propre à chaque type de contenu : Flickr pour les photos, Youtube pour les vidéos, Scribd pour les PDF, Sketchfab pour les fichiers 3D, Tumblr pour leurs actualités et Prismic.io pour l’ensemble des données produits.

Héberger les contenus sur des plateformes tierces permet au site de Manitou d’avoir une architecture déportée, scalable et économique ; mais il était nécessaire de trouver l’outil qui permette à l’utilisateur d’accéder à toutes les données via une page web unique. La réponse apportée fut donc l’utilisation de AngularJS, avec un développement front-end uniquement. AngularJS est un framework JavaScript open-source développé par Google qui permet à l’application web d’envoyer une requête à chacune des plateformes d’hébergement pour afficher le contenu sur le navigateur de l’utilisateur. Cet outil offre également de nombreuses possibilités pour l’internationalisation, avec par exemple la gestion d’un double système d’unités.

On aboutit ici à un site qui est en fait une « Single Page App » : application web accessible depuis une page web unique. On réduit donc le rôle du serveur au simple hébergement, c’est-à-dire la livraison d’une page et de ses dépendances (CSS et JavaScript).

formulaire documentation
Avant : un formulaire de demande de doc
documentation
Maintenant : une doc accessible en ligne

UN DESIGN HOMOGÈNE ET RESPONSIVE

Le design d’un système aussi complexe était donc un défi à relever pour Escale. Comment proposer un design simple et efficace pour un site avec un tel catalogue ? Une des exigences de Manitou était, par ailleurs, d’avoir un site responsive étant donné que 100 résolutions d’écran, dont 25 principales, accèdent à manitou.com. Du petit smartphone à l’écran full HD, et même 4K, il était indispensable que le site soit adapté à tous les types d’écran et à toutes les résolutions.

Troisième problématique concernant le design : Manitou a un marché mondial et son site devait donc répondre aux exigences des différents endroits du monde où sont distribués ses produits, c’est-à-dire être multisystèmes unitaires métrique et impérial et multilingue, tout en restant homogène. Il a donc fallu pour Escale trouver une police transversale aux typographies des 10 langues disponibles sur le site pour conserver une cohérence et une unité entre les différentes versions du site. La recommandation d’Escale fut donc l’utilisation de la Notofont, une police fraîchement lancée par Google et qui supporte quasiment toutes les langues dela planète.

notofont police google opensource notofont police google opensource

Notofont : une police open-source et multilingue


INTÉGRATION SOUS BOOTSTRAP

L’intégration du site manitou.com a été confiée à l’équipe d’ Escale, et nous avons décidé d’utiliser le framework Bootstrap pour réaliser cette mission. Bootstrap est un framework open-source, que nous utilisons depuis deux ans chez Escale, sur lequel nous avons développé une véritable expertise. Nous l’utilisons comme une boîte à outils du développeur front-end, que nous façonnons pour rendre l’expérience unique pour chaque nouveau projet. Avec Bootstrap et son langage de préprocessing principal LESS, nous avons pu aboutir à une homogénéisation des différents designs en utilisant la grille de base disponible sur Bootstrap, que nous avons personnalisée pour aboutir à un styleguide unique conçu pour Manitou.

Ce styleguide a été créé dans une démarche open-source, intégralement hébergé sur Github. Son code source est donc entièrement disponible et réutilisable par n’importe qui. Une démarche notable pour un groupe tel que Manitou, et en adéquation avec les valeurs défendues chez Escale.

responsive laptop responsive smartphone

Manitou.com : un site responsive (à gauche : laptop, à droite : smartphone)


Le coût total de refonte a été divisé par 2,2 par rapport à la refonte précédente, les coûts d’hébergement réduits de 85% et les coûts de licence du système de gestion de contenus de 95%.

En combinant notre savoir-faire avec celui de Clever Cloud, Prismic.io et SEO4Ajax, nous avons pu proposer un système web innovant à coûts réduits. La collaboration entre Escale et Manitou ne s’arrête pas là. Ils ont déjà fait appel à nous pour la réalisation de leur site expérience MLT-X, ainsi que d’autres projets en cours dont nous vous parlerons très bientôt.

À l'occasion du Web2day, TéléNantes a interviewé Yoann Grange, webmaster de manitou.com :


Et si on parlait de vous ?

Vous avez un projet de site web ? Une problématique technique à nous soumettre ?
Dites-nous en plus : nous sommes impatients de découvrir votre projet !

escale © 2017 | Startup Palace - 18 rue Scribe - 44000 Nantes France | Proudly built on GestionAIRMentions Légales