Zurück zum Portfolio
Die Startseite von TrailerHome: die Überschrift „Live your own space. Wherever you are.“, der zweite Satz in Rot, neben einem Mobilheim mit Glaswänden, Holzoptik-Verkleidung und Holzdeck unter Olivenbäumen, darunter ein roter Button zu den Modellen und ein umrandeter Telefon-Button.
trailerhome.gr in neuem Tab öffnen

TrailerHome by NIKITAS — Zweisprachige Website für einen Mobilheim-Hersteller

Überblick

Die NIKITAS COMPANY baut seit 1977 in Provatas bei Serres Werkstattausrüstung und Sonderkonstruktionen aus Stahl und exportiert seit 1981. TrailerHome ist ihre Mobilheim-Linie: vollständige kleine Häuser auf einem Anhängerfahrgestell aus Stahl, mit gedämmten Wänden und Dach, Fenstern, Elektrik, Sanitär, Küche und Bad, geliefert per Lkw und mit dem Kran aufgestellt, in Griechenland und im Ausland. Es gibt sie in drei Linien — Modern, Classic und Nature — oder ganz nach Kundenwunsch geplant. Die Website hat drei Aufgaben: diese Auswahl klar zeigen, Vertrauen in die Fabrik dahinter schaffen und Interesse in einen Anruf oder eine E-Mail verwandeln, denn es gibt weder Shop noch Online-Formular.

Griechisch ist die Standardsprache, Englisch eine vollständige zweite Ausgabe: dieselben vierzehn Seiten unter denselben Dateinamen. Die Startseite beginnt mit drei kurzen Filmen, einem für jede Linie, die ineinander überblenden. Dann folgt das Markenzeichen: Die Ansicht der Modern Line, nachgezeichnet nach einem Foto der echten Einheit, zeichnet sich beim Scrollen Linie für Linie selbst und macht dann diesem Foto Platz. Jede Linie hat eine eigene Seite mit Fotos, Video und Konstruktionsdetails; eine Vergleichstabelle, ein Ablauf in fünf Schritten, eine filterbare Galerie echter Einheiten und Lieferungen, eine Firmenchronik und FAQ zu Größen, Genehmigungen und Lieferung erledigen den Rest. Fotos und Videos stammen aus dem eigenen Archiv des Kunden, und kein Foto ist größer als 100 KB.

Herausforderungen

Der Kunde hatte starkes Material, aber keine Texte fürs Web: ein Handy-Archiv mit Fotos und Videos, zwei Flyer, eine Visitenkarte und den Flyer seiner alten Website. Alles musste nach Linien, Einsatzzwecken und Bauphasen geordnet und in zwei Sprachen neu geschrieben werden. Das Produkt verleitet außerdem zu leichten Versprechen — keine Genehmigung nötig, in wenigen Wochen fertig, ein fester Preis —, die nicht immer stimmen. Deshalb musste jeder Satz über Genehmigungen, Größen, Preise und Lieferzeiten vorsichtig sein, ohne ausweichend zu klingen. Und die Website musste ohne Shop, Preisliste oder Kontaktformular verkaufen und dabei mit einem Dutzend Videos auch bei schwachem Mobilfunk schnell bleiben, denn wer ein Grundstück auswählt, steht oft gerade darauf.

Lösungen

Jede Seite wird einmal als Quelldatei geschrieben und von einem kleinen Python-Skript in beide Sprachen gebaut: gemeinsamer Header, Menü und Footer, responsive Bilder mit ihren echten Maßen, und die Firmendaten — Telefonnummern, Adresse, Koordinaten der Fabrik — an einer Stelle gepflegt und von dort in die strukturierten Daten, den Kartenlink, die Sitemap und eine Volltextfassung für KI-Assistenten geschrieben. Vor jedem Deployment prüft ein Checker Links, Alt-Texte, Überschriftenfolge, Canonicals, hreflang, strukturierte Daten und das Budget von 100 KB pro Bild. Die Animationen laufen mit GSAP und ScrollTrigger und versagen sicher: Kommt das Skript nicht an oder bevorzugt der Besucher weniger Bewegung, wird einfach alles angezeigt. Die Content Security Policy erlaubt keine Inline-Styles und bindet das einzige Inline-Skript an seinen Hash. Barrierefreiheit wurde im Browser gemessen statt vorausgesetzt — 4.954 Textknoten auf allen Seiten in Smartphone- und Desktop-Breite, ohne einen einzigen Befund —, und jedes Produkt- und Liefervideo hat eine Textbeschreibung dessen, was es zeigt. Zu Genehmigungen gibt die FAQ die ehrliche Antwort: Es hängt von Nutzung, Bebauungsplan und Anschlüssen ab, also fragen Sie einen Ingenieur vor Ort.

Galerie

  • Die Startseite von TrailerHome: die Überschrift „Live your own space. Wherever you are.“, der zweite Satz in Rot, neben einem Mobilheim mit Glaswänden, Holzoptik-Verkleidung und Holzdeck unter Olivenbäumen, darunter ein roter Button zu den Modellen und ein umrandeter Telefon-Button.

    Eine Startseite, die mit den Häusern selbst beginnt

  • Eine weiße Strichzeichnung der Modern Line auf dunklem Raster, teilweise gezeichnet, mit nummerierten roten Markierungen an Öffnungen und Fahrgestell, darüber das Maß „Length built to order“ und darunter fünf nummerierte Merkmale.

    Das Markenzeichen: eine Ansicht, die sich beim Scrollen selbst zeichnet

  • Drei Karten unter der Überschrift „A home for every way of living“: eine Einheit mit weißen Paneelen und dunklem Rahmen auf einer Steinterrasse bei Sonnenuntergang für die Modern Line, eine weiße Einheit mit Tür und zwei Fenstern auf einer Wiese unter Bergen für die Classic Line und eine Einheit mit Glaswänden und Holzdeck für die Nature Line, jede mit einer kleinen Strichzeichnung über ihrem Namen.

    Eine Konstruktion, drei Charaktere

  • Eine Vergleichstabelle mit der Überschrift „Which line suits you?“, mit Spalten für die Linien Modern, Classic und Nature und Zeilen für Charakter, Außenseite, Öffnungen, Dach und beste Nutzung.

    Drei Linien, verglichen in fünf Zeilen

  • Die Seite der Modern Line: eine Brotkrumennavigation, der Name der Linie und eine kurze Beschreibung auf dunklem Grund, ein roter Button „Ask for a quote“ und ein umrandeter Button „Photos“, daneben eine Einheit mit dunklem Rahmen, weißen Paneelen und Rollläden auf ihrem Fahrgestell in einem Werkshof.

    Jede Linie hat ihre eigene Seite, und jede beginnt mit Film

  • Die Überschrift „From first conversation to the keys“ über nummerierten Schritten auf einer roten Zeitleiste — Your needs, Design & quote, Built in our factory — neben einem Video einer Einheit auf einem Lkw-Anhänger, beschriftet als Aufnahme einer Lieferung.

    Fünf Schritte, ein Hersteller, keine Zwischenhändler

  • Die Überschrift „Filter by line or stage“ mit Filterchips für Alle, die drei Linien, Innenräume, Transport und Zeichnungen, über einem Raster aus Fotos fertiger Einheiten.

    Echte Einheiten und Lieferungen, gefiltert nach Linie oder Phase

  • Karten mit der Adresse der Fabrik samt Link zur Wegbeschreibung und mit dem Instagram-Konto des Unternehmens, über einer Satellitenkarte mit roter Nadel auf der Fabrik an der Hauptstraße bei Provatas.

    Kein Formular: anrufen, schreiben oder zur Fabrik fahren

  • Die Startseite auf einem Tablet: ein Mobilheim mit dunklem Rahmen und Rollläden auf einer Steinterrasse über einem Hang bei Sonnenuntergang, darunter Überschrift und Buttons, auf dem Video ein Pause-Button.

    Der Hero zeigt die drei Linien nacheinander, mit Pause-Button

  • Der Abschnitt „White or wood-look“ auf einem Tablet: ein Foto einer weißen Einheit mit Tür und zwei Fenstern mit Läden auf ihrem Anhänger, darunter eine Überschrift zu den weißen Paneelen, eine kurze Beschreibung und eine Liste der Merkmale.

    Die Ausführungen der Classic Line, gezeigt an der echten Einheit

  • Der Abschnitt „See the home before it is built“ auf einem Tablet: ein kurzer Text und drei abgehakte Punkte über zwei Bildern, einer Ansichtszeichnung einer Einheit mit Pergola und einer 3D-Studie eines Ziegeldachs mit Maßen.

    Zeichnungen und 3D, bevor zugeschnitten wird

  • Eine Zeitleiste mit der Überschrift „Nearly half a century of making things“ und roten Jahreszahlen von 1977 bis heute: Gründung, erste Exporte, zwei Auszeichnungen, ISO 9002, ISO 9001 und TrailerHome.

    Fast ein halbes Jahrhundert Fertigung, auf einer Linie

  • Fragen und Antworten unter der Überschrift „The product“: die ersten beiden geöffnet, sie erklären, was ein TrailerHome-Mobilheim ist und worin sich die drei Linien unterscheiden, die übrigen geschlossen mit Pluszeichen, darunter die Überschrift „Permits & placement“.

    Die Fragen, die Menschen stellen, bevor sie anrufen

  • Die Startseite auf einem Smartphone: eine Einheit in Holzoptik mit rotem Satteldach an einem See bei Sonnenuntergang, darunter Überschrift, Einleitung und ein roter Button „See the models“.

    Dieselbe Geschichte, neu gebaut fürs Smartphone

  • Das geöffnete Menü auf einem Smartphone: Home in Rot als aktuelle Seite, Models mit den drei Linien eingerückt darunter, dann Custom builds, Uses, Projects, Company, FAQ und Contact, dazu ein Telefon-Button, ein E-Mail-Button und ein Link zur griechischen Ausgabe.

    Ein Vollbildmenü, das die Telefonnummer griffbereit hält

  • Der Abschnitt „Drawn on paper. Built in Serres.“ auf einem Smartphone: die Ansichtszeichnung über einem Foto der fertigen Einheit, eine Bildunterschrift und darunter die ersten Merkmale.

    Auf dem Smartphone läuft die Zeichnung einmal und bleibt dann auf dem Foto

  • Eine Karte der Modern Line auf einem Smartphone: ein Foto der Einheit auf einer Steinterrasse bei Sonnenuntergang, eine kleine Strichzeichnung, eine einzeilige Beschreibung, drei Merkmals-Tags und ein Link „Explore the line“.

    Jede Linie, vorgestellt auf einer einzigen Karte

  • Der Abschnitt „Holiday rentals & glamping“ auf einem Smartphone: eine Einheit in Holzoptik mit rotem Dach an einem See, das Label „Tourism“, ein kurzer Text und eine abgehakte Liste von Einsatzmöglichkeiten.

    Geschrieben für den Einsatz, nicht nur für das Produkt

  • Die Projektgalerie auf einem Smartphone: die Überschrift „Filter by line or stage“, Filterchips über drei Zeilen mit ausgewähltem „All“ und darunter die ersten Fotos der Einheiten.

    Sieben Filter, die trotzdem unter den Daumen passen

  • Kontaktkarten auf einem Smartphone: zwei Telefonnummern in großer Schrift, die E-Mail-Adresse mit dem Hinweis, Skizzen und Fotos des Grundstücks zu schicken, und der Anfang der Karte mit der Adresse der Fabrik.

    Zwei Nummern und eine E-Mail, in einer Schrift, die man antippen kann