Retour au portfolio
La page d'accueil de TrailerHome : le titre « Live your own space. Wherever you are. », sa deuxième phrase en rouge, à côté d'une maison mobile aux murs vitrés, au bardage aspect bois et à la terrasse en bois sous des oliviers, avec sous le texte un bouton rouge vers les modèles et un bouton téléphone détouré.
Ouvrir trailerhome.gr dans un nouvel onglet

TrailerHome by NIKITAS — Site Bilingue pour un Fabricant de Maisons Mobiles

Aperçu

Depuis 1977, NIKITAS COMPANY fabrique à Provatas, près de Serres, des équipements de garage et des constructions métalliques spéciales, et exporte depuis 1981. TrailerHome est sa gamme de maisons mobiles : de petites maisons complètes sur un châssis de remorque en acier, avec murs et toit isolés, menuiseries, électricité, plomberie, cuisine et salle de bain, livrées par camion et posées à la grue en Grèce comme à l'étranger. Elles existent en trois gammes — Modern, Classic et Nature — ou sont conçues de zéro avec le client. Le site a trois missions : montrer clairement cette offre, donner confiance dans l'usine qui la fabrique et transformer l'intérêt en appel ou en e-mail, puisqu'il n'y a ni boutique ni formulaire en ligne.

Le grec est la langue par défaut et l'anglais une seconde édition complète : les mêmes quatorze pages, sous les mêmes noms de fichiers. La page d'accueil s'ouvre sur trois courts films, un par gamme, qui se fondent l'un dans l'autre. Vient ensuite la signature : l'élévation de la Modern Line, relevée sur une photo de l'unité réelle, se dessine trait par trait au défilement puis cède la place à cette photo. Chaque gamme a sa page, avec photos, vidéo et détails de construction ; un tableau comparatif, un processus en cinq étapes, une galerie filtrable d'unités et de livraisons réelles, une chronologie de l'entreprise et une FAQ sur les dimensions, les autorisations et la livraison font le reste. Les photos et vidéos ont été préparées à partir des archives du client, et aucune photo ne dépasse 100 Ko.

Défis

Le client avait d'excellents supports mais aucun texte pour le web : des photos et vidéos prises au téléphone, deux dépliants, une carte de visite et le dépliant de son ancien site. Il a fallu tout classer par gammes, usages et étapes, puis tout écrire de zéro en deux langues. Le produit se prête aussi aux promesses faciles — pas besoin de permis, prêt en quelques semaines, prix fixe — qui ne sont pas toujours vraies : chaque phrase sur les autorisations, les dimensions, les prix et les délais devait être prudente sans paraître évasive. Enfin, le site devait vendre sans boutique, sans tarifs ni formulaire de contact, tout en restant rapide sur une connexion mobile faible avec une douzaine de vidéos, car ceux qui choisissent un terrain se tiennent souvent dessus.

Solutions

Chaque page est écrite une seule fois comme fichier source, puis construite dans les deux langues par un petit script Python : en-tête, menu et pied de page partagés, images responsives avec leurs vraies dimensions, et coordonnées de l'entreprise — téléphones, adresse, position de l'usine — gérées à un seul endroit puis reportées dans les données structurées, le lien de la carte, le sitemap et une version texte intégral pour les assistants IA. Avant chaque mise en ligne, un vérificateur contrôle liens, textes alternatifs, ordre des titres, canonicals, hreflang, données structurées et le budget de 100 Ko par image. Les animations reposent sur GSAP et ScrollTrigger et échouent en douceur : si le script n'arrive pas, ou si le visiteur préfère moins de mouvement, tout s'affiche simplement. La Content Security Policy n'autorise aucun style inline et verrouille l'unique script inline par son empreinte. L'accessibilité a été mesurée dans le navigateur plutôt que supposée — 4 954 nœuds de texte sur toutes les pages, en largeur mobile et ordinateur, sans aucun problème — et chaque vidéo de produit et de livraison est accompagnée d'une description textuelle de ce qu'elle montre. Sur les autorisations, la FAQ donne la réponse honnête : cela dépend de l'usage, du zonage et des raccordements, alors demandez à un ingénieur local.

Galerie

  • La page d'accueil de TrailerHome : le titre « Live your own space. Wherever you are. », sa deuxième phrase en rouge, à côté d'une maison mobile aux murs vitrés, au bardage aspect bois et à la terrasse en bois sous des oliviers, avec sous le texte un bouton rouge vers les modèles et un bouton téléphone détouré.

    Une page d'accueil qui s'ouvre sur les maisons elles-mêmes

  • Un dessin au trait blanc de la Modern Line sur une grille sombre, en partie tracé, avec des repères rouges numérotés sur les ouvertures et le châssis, la cote « Length built to order » au-dessus et cinq caractéristiques numérotées en dessous.

    La signature : une élévation qui se dessine au défilement

  • Trois cartes sous le titre « A home for every way of living » : une unité aux panneaux blancs et au cadre sombre sur une terrasse en pierre au coucher du soleil pour la Modern Line, une unité blanche avec une porte et deux fenêtres dans une prairie au pied des montagnes pour la Classic Line et une unité vitrée avec terrasse en bois pour la Nature Line, chacune avec un petit dessin au trait au-dessus de son nom.

    Une construction, trois caractères

  • Un tableau comparatif intitulé « Which line suits you? », avec des colonnes pour les gammes Modern, Classic et Nature et des lignes pour le caractère, l'extérieur, les ouvertures, le toit et l'usage idéal.

    Trois gammes comparées en cinq lignes

  • La page de la Modern Line : un fil d'Ariane, le nom de la gamme et une courte description sur fond sombre, un bouton rouge « Ask for a quote » et un bouton détouré « Photos », et à côté une unité à cadre sombre, panneaux blancs et volets roulants sur son châssis, dans une cour d'usine.

    Chaque gamme a sa page, qui s'ouvre sur un film

  • Le titre « From first conversation to the keys » au-dessus d'étapes numérotées sur une frise rouge — Your needs, Design & quote, Built in our factory — à côté d'une vidéo d'une unité sur la remorque d'un camion, légendée comme images d'une livraison.

    Cinq étapes, un fabricant, aucun intermédiaire

  • Le titre « Filter by line or stage » avec des filtres pour Tout, les trois gammes, Intérieurs, Transport et Dessins, au-dessus d'une grille de photos d'unités terminées.

    Des unités et des livraisons réelles, filtrées par gamme ou par étape

  • Des cartes avec l'adresse de l'usine, accompagnée d'un lien d'itinéraire, et avec le compte Instagram de l'entreprise, au-dessus d'une carte satellite avec une épingle rouge sur l'usine, au bord de la route principale à Provatas.

    Pas de formulaire : appelez, écrivez ou venez à l'usine

  • La page d'accueil sur tablette : une maison mobile à cadre sombre et volets sur une terrasse en pierre au-dessus d'une colline au coucher du soleil, le titre et les boutons empilés en dessous et un bouton pause sur la vidéo.

    Le bandeau montre les trois gammes tour à tour, avec un bouton pause

  • La section « White or wood-look » sur tablette : la photo d'une unité blanche avec une porte et deux fenêtres à volets sur sa remorque, puis un titre pour les panneaux blancs, une courte description et une liste de caractéristiques.

    Les finitions de la Classic Line, montrées sur l'unité réelle

  • La section « See the home before it is built » sur tablette : un court texte et trois points cochés au-dessus de deux images, un dessin d'élévation d'une unité avec pergola et une étude 3D d'un toit en tuiles avec ses cotes.

    Dessins et 3D avant la moindre découpe

  • Une chronologie intitulée « Nearly half a century of making things », avec des dates en rouge de 1977 à aujourd'hui : la fondation, les premières exportations, deux distinctions, ISO 9002, ISO 9001 et TrailerHome.

    Près d'un demi-siècle de fabrication, sur une seule ligne

  • Des questions-réponses sous le titre « The product » : les deux premières ouvertes, expliquant ce qu'est une maison mobile TrailerHome et ce qui distingue les trois gammes, les autres fermées avec des signes plus, et en dessous le titre « Permits & placement ».

    Les questions qu'on se pose avant d'appeler

  • La page d'accueil sur téléphone : une unité aspect bois au toit rouge à deux pans au bord d'un lac au coucher du soleil, puis le titre, l'introduction et un bouton rouge « See the models ».

    La même histoire, reconstruite pour le téléphone

  • Le menu ouvert sur téléphone : Home en rouge comme page en cours, Models avec ses trois gammes en retrait, puis Custom builds, Uses, Projects, Company, FAQ et Contact, avec un bouton téléphone, un bouton e-mail et un lien vers l'édition grecque.

    Un menu plein écran qui garde le numéro à portée de main

  • La section « Drawn on paper. Built in Serres. » sur téléphone : le dessin d'élévation posé sur une photo de l'unité terminée, une légende et les premières caractéristiques en dessous.

    Sur téléphone, le dessin se joue une fois puis reste sur la photo

  • Une carte de la Modern Line sur téléphone : une photo de l'unité sur une terrasse en pierre au coucher du soleil, un petit dessin au trait, une description d'une ligne, trois étiquettes de caractéristiques et un lien « Explore the line ».

    Chaque gamme présentée en une seule carte

  • La section « Holiday rentals & glamping » sur téléphone : une unité aspect bois au toit rouge au bord d'un lac, l'étiquette « Tourism », un court texte et une liste d'usages cochés.

    Écrit pour l'usage, pas seulement pour le produit

  • La galerie des projets sur téléphone : le titre « Filter by line or stage », des filtres répartis sur trois lignes avec « All » sélectionné, et les premières photos d'unités en dessous.

    Sept filtres qui tiennent encore sous le pouce

  • Des cartes de contact sur téléphone : deux numéros de téléphone en grands caractères, l'adresse e-mail avec une note invitant à envoyer croquis et photos du terrain, et le début de la carte avec l'adresse de l'usine.

    Deux numéros et un e-mail, en caractères faciles à toucher