Πίσω στο Portfolio
Η αρχική σελίδα της TrailerHome: ο τίτλος «Ζήσε το δικό σου χώρο. Όπου κι αν είσαι.», με τη δεύτερη πρόταση σε κόκκινο, δίπλα σε μια τροχοβίλα με γυάλινους τοίχους, επένδυση με όψη ξύλου και ξύλινο deck κάτω από ελιές, και από κάτω ένα κόκκινο κουμπί για τα μοντέλα και ένα περιγραμμένο κουμπί τηλεφώνου.
Άνοιγμα του trailerhome.gr σε νέα καρτέλα

TrailerHome by NIKITAS — Δίγλωσση Ιστοσελίδα για Κατασκευαστή Τροχοβιλών

Επισκόπηση

Η NIKITAS COMPANY κατασκευάζει εξοπλισμό συνεργείων και ειδικές μεταλλικές κατασκευές στον Προβατά Σερρών από το 1977 και εξάγει από το 1981. Η TrailerHome είναι η σειρά τροχοβιλών της: ολοκληρωμένα μικρά σπίτια πάνω σε χαλύβδινο σασί τρέιλερ, με μονωμένους τοίχους και οροφή, κουφώματα, ηλεκτρολογικά, υδραυλικά, κουζίνα και μπάνιο, που παραδίδονται με φορτηγό και τοποθετούνται με γερανό σε όλη την Ελλάδα και στο εξωτερικό. Διατίθενται σε τρεις σειρές — Modern, Classic και Nature — ή σχεδιάζονται από την αρχή μαζί με τον πελάτη. Η ιστοσελίδα έχει τρεις δουλειές: να δείχνει καθαρά αυτή τη γκάμα, να χτίζει εμπιστοσύνη στο εργοστάσιο που βρίσκεται πίσω της και να μετατρέπει το ενδιαφέρον σε τηλεφώνημα ή email, αφού δεν υπάρχει ηλεκτρονικό κατάστημα ούτε φόρμα επικοινωνίας.

Τα ελληνικά είναι η προεπιλογή και τα αγγλικά μια πλήρης δεύτερη έκδοση: οι ίδιες δεκατέσσερις σελίδες με τα ίδια ονόματα αρχείων. Η αρχική σελίδα ανοίγει με τρία σύντομα φιλμ, ένα για κάθε σειρά, που διαδέχονται το ένα το άλλο. Ακολουθεί το χαρακτηριστικό της: η όψη της Modern Line, αποτυπωμένη από φωτογραφία της πραγματικής μονάδας, σχεδιάζεται γραμμή γραμμή καθώς κάνετε κύλιση και δίνει τη θέση της σε εκείνη τη φωτογραφία. Κάθε σειρά έχει τη δική της σελίδα με φωτογραφίες, βίντεο και κατασκευαστικές λεπτομέρειες, και τα υπόλοιπα τα αναλαμβάνουν ένας πίνακας σύγκρισης, μια διαδικασία πέντε βημάτων, μια γκαλερί πραγματικών μονάδων και παραδόσεων με φίλτρα, ένα χρονολόγιο της εταιρείας και συχνές ερωτήσεις για διαστάσεις, άδειες και παράδοση. Οι φωτογραφίες και τα βίντεο προετοιμάστηκαν από το αρχείο του ίδιου του πελάτη, και καμία φωτογραφία δεν ξεπερνά τα 100 KB.

Προκλήσεις

Ο πελάτης είχε δυνατό υλικό αλλά καθόλου κείμενα για το διαδίκτυο: ένα αρχείο φωτογραφιών και βίντεο από το κινητό, δύο φυλλάδια, μια επαγγελματική κάρτα και το φυλλάδιο της παλιάς του ιστοσελίδας. Όλα έπρεπε να οργανωθούν σε σειρές, χρήσεις και στάδια και να γραφτούν από την αρχή σε δύο γλώσσες. Το προϊόν προσφέρεται επίσης για εύκολες υποσχέσεις — δεν χρειάζεται άδεια, έτοιμο σε λίγες εβδομάδες, σταθερή τιμή — που δεν ισχύουν πάντα, οπότε κάθε πρόταση για άδειες, διαστάσεις, τιμές και χρόνους παράδοσης έπρεπε να είναι προσεκτική χωρίς να ακούγεται υπεκφυγή. Και η ιστοσελίδα έπρεπε να πουλάει χωρίς κατάστημα, τιμοκατάλογο ή φόρμα επικοινωνίας, μένοντας γρήγορη σε αδύναμη σύνδεση κινητού με δώδεκα βίντεο, γιατί όποιος διαλέγει οικόπεδο συχνά στέκεται ήδη πάνω του.

Λύσεις

Κάθε σελίδα γράφεται μία φορά ως αρχείο πηγής και ένα μικρό script σε Python τη χτίζει και στις δύο γλώσσες: κοινή κεφαλίδα, μενού και υποσέλιδο, responsive εικόνες με τις πραγματικές τους διαστάσεις, και τα στοιχεία της επιχείρησης — τηλέφωνα, διεύθυνση, συντεταγμένες εργοστασίου — σε ένα σημείο, από όπου γράφονται στα δομημένα δεδομένα, στον σύνδεσμο του χάρτη, στο sitemap και σε μια έκδοση πλήρους κειμένου για βοηθούς AI. Ένας ελεγκτής εξετάζει συνδέσμους, εναλλακτικά κείμενα, σειρά επικεφαλίδων, canonical, hreflang, δομημένα δεδομένα και το όριο των 100 KB ανά εικόνα πριν από κάθε δημοσίευση. Τα εφέ κίνησης βασίζονται σε GSAP και ScrollTrigger και αποτυγχάνουν με ασφάλεια: αν το script δεν φτάσει ή ο επισκέπτης προτιμά λιγότερη κίνηση, όλα απλώς εμφανίζονται. Η Πολιτική Ασφάλειας Περιεχομένου (CSP) δεν επιτρέπει inline styles και κλειδώνει το μοναδικό inline script με το hash του. Η προσβασιμότητα μετρήθηκε στον browser αντί να θεωρηθεί δεδομένη — 4.954 κόμβοι κειμένου σε όλες τις σελίδες, σε πλάτος κινητού και υπολογιστή, με μηδέν προβλήματα — και κάθε βίντεο προϊόντος και παράδοσης συνοδεύεται από κείμενο που περιγράφει τι δείχνει. Για τις άδειες, οι συχνές ερωτήσεις δίνουν την ειλικρινή απάντηση: εξαρτάται από τη χρήση, τις χρήσεις γης και τις συνδέσεις, γι' αυτό ρωτήστε έναν τοπικό μηχανικό.

Γκαλερί

  • Η αρχική σελίδα της TrailerHome: ο τίτλος «Ζήσε το δικό σου χώρο. Όπου κι αν είσαι.», με τη δεύτερη πρόταση σε κόκκινο, δίπλα σε μια τροχοβίλα με γυάλινους τοίχους, επένδυση με όψη ξύλου και ξύλινο deck κάτω από ελιές, και από κάτω ένα κόκκινο κουμπί για τα μοντέλα και ένα περιγραμμένο κουμπί τηλεφώνου.

    Μια αρχική σελίδα που ανοίγει με τα ίδια τα σπίτια

  • Λευκό γραμμικό σχέδιο της Modern Line σε σκούρο κάνναβο, σχεδιασμένο εν μέρει, με αριθμημένους κόκκινους δείκτες στα ανοίγματα και στο σασί, την ένδειξη διάστασης «ΜΗΚΟΣ ΚΑΤΑ ΠΑΡΑΓΓΕΛΙΑ» από πάνω και πέντε αριθμημένα χαρακτηριστικά από κάτω.

    Το χαρακτηριστικό: μια όψη που σχεδιάζεται καθώς κάνετε κύλιση

  • Τρεις κάρτες κάτω από τον τίτλο «Ένα σπίτι για κάθε τρόπο ζωής»: μια μονάδα με λευκά πάνελ και σκούρο πλαίσιο σε πέτρινη πλατεία στο ηλιοβασίλεμα για τη Modern Line, μια λευκή μονάδα με πόρτα και δύο παράθυρα σε λιβάδι κάτω από βουνά για τη Classic Line και μια μονάδα με γυάλινους τοίχους και ξύλινο deck για τη Nature Line, η καθεμία με ένα μικρό γραμμικό σχέδιο πάνω από το όνομά της.

    Μία κατασκευή, τρεις χαρακτήρες

  • Πίνακας σύγκρισης με τίτλο «Ποια σειρά σας ταιριάζει;», με στήλες για τις σειρές Modern, Classic και Nature και γραμμές για χαρακτήρα, εξωτερικό, ανοίγματα, στέγη και ιδανική χρήση.

    Τρεις σειρές, συγκριμένες σε πέντε γραμμές

  • Η σελίδα της Modern Line: διαδρομή πλοήγησης, το όνομα της σειράς και μια σύντομη περιγραφή σε σκούρο φόντο, ένα κόκκινο κουμπί για προσφορά και ένα περιγραμμένο κουμπί για φωτογραφίες, και δίπλα τους μια μονάδα με σκούρο πλαίσιο, λευκά πάνελ και ρολά πάνω στο σασί της σε αυλή εργοστασίου.

    Κάθε σειρά έχει τη δική της σελίδα, που ανοίγει με βίντεο

  • Ο τίτλος «Από την πρώτη κουβέντα ως τα κλειδιά» πάνω από αριθμημένα βήματα σε μια κόκκινη χρονογραμμή — οι ανάγκες σας, σχεδιασμός και προσφορά, κατασκευή στο εργοστάσιο — δίπλα σε βίντεο μιας μονάδας πάνω σε τρέιλερ φορτηγού, με λεζάντα ότι πρόκειται για πλάνα παράδοσης.

    Πέντε βήματα, ένας κατασκευαστής, κανένας μεσάζων

  • Ο τίτλος «Φιλτράρετε ανά σειρά ή στάδιο» με κουμπιά φίλτρων για όλα, τις τρεις σειρές, εσωτερικά, μεταφορά και σχέδια, πάνω από ένα πλέγμα φωτογραφιών ολοκληρωμένων μονάδων.

    Αληθινές μονάδες και παραδόσεις, ανά σειρά ή στάδιο

  • Κάρτες με τη διεύθυνση του εργοστασίου, με σύνδεσμο για οδηγίες, και με τον λογαριασμό Instagram της εταιρείας, πάνω από δορυφορικό χάρτη με κόκκινη πινέζα στο εργοστάσιο δίπλα στον κεντρικό δρόμο στον Προβατά.

    Χωρίς φόρμα: τηλεφωνήστε, γράψτε ή ελάτε στο εργοστάσιο

  • Η αρχική σελίδα σε tablet: μια τροχοβίλα με σκούρο πλαίσιο και ρολά σε πέτρινη πλατεία πάνω από πλαγιά στο ηλιοβασίλεμα, με τον τίτλο και τα κουμπιά από κάτω και ένα κουμπί παύσης πάνω στο βίντεο.

    Το hero δείχνει τις τρεις σειρές με τη σειρά, με κουμπί παύσης

  • Η ενότητα «Λευκό ή όψη ξύλου» σε tablet: φωτογραφία μιας λευκής μονάδας με πόρτα και δύο παράθυρα με παντζούρια πάνω στο τρέιλερ της, και από κάτω ένας τίτλος για τα λευκά πάνελ, μια σύντομη περιγραφή και μια λίστα χαρακτηριστικών.

    Τα φινιρίσματα της Classic Line, πάνω στην πραγματική μονάδα

  • Η ενότητα «Βλέπετε το σπίτι πριν χτιστεί» σε tablet: ένα σύντομο κείμενο και τρία τσεκαρισμένα σημεία πάνω από δύο εικόνες, ένα σχέδιο όψης μονάδας με πέργκολα και μια τρισδιάστατη μελέτη κεραμοσκεπής με διαστάσεις.

    Σχέδια και 3D πριν κοπεί οτιδήποτε

  • Χρονολόγιο με τίτλο «Σχεδόν μισός αιώνας κατασκευής», με κόκκινες χρονολογίες από το 1977 ως σήμερα: η ίδρυση, οι πρώτες εξαγωγές, δύο βραβεία, ISO 9002, ISO 9001 και η TrailerHome.

    Σχεδόν μισός αιώνας κατασκευής, σε μία γραμμή

  • Ερωτήσεις και απαντήσεις κάτω από τον τίτλο «Το προϊόν»: οι δύο πρώτες ανοιχτές, εξηγούν τι είναι μια τροχοβίλα TrailerHome και σε τι διαφέρουν οι τρεις σειρές, οι υπόλοιπες κλειστές με σύμβολα συν, και από κάτω ο τίτλος «Άδειες & τοποθέτηση».

    Οι ερωτήσεις που κάνει ο κόσμος πριν τηλεφωνήσει

  • Η αρχική σελίδα σε κινητό: μια μονάδα με όψη ξύλου και κόκκινη δίρριχτη στέγη δίπλα σε λίμνη στο ηλιοβασίλεμα, και μετά ο τίτλος, η εισαγωγή και ένα κόκκινο κουμπί για τα μοντέλα.

    Η ίδια ιστορία, ξαναχτισμένη για το κινητό

  • Το μενού ανοιχτό σε κινητό: η Αρχική σε κόκκινο ως τρέχουσα σελίδα, τα Μοντέλα με τις τρεις σειρές σε εσοχή από κάτω, μετά κατασκευές κατά παραγγελία, χρήσεις, έργα, εταιρεία, συχνές ερωτήσεις και επικοινωνία, με κουμπί τηλεφώνου, κουμπί email και σύνδεσμο για την ελληνική έκδοση.

    Ένα μενού πλήρους οθόνης που κρατά το τηλέφωνο κοντά

  • Η ενότητα «Σχεδιάζεται στο χαρτί. Χτίζεται στις Σέρρες.» σε κινητό: το σχέδιο όψης πάνω σε φωτογραφία της ολοκληρωμένης μονάδας, μια λεζάντα και τα πρώτα χαρακτηριστικά από κάτω.

    Στο κινητό το σχέδιο παίζει μία φορά και μένει πάνω στη φωτογραφία

  • Κάρτα της Modern Line σε κινητό: φωτογραφία της μονάδας σε πέτρινη πλατεία στο ηλιοβασίλεμα, ένα μικρό γραμμικό σχέδιο, περιγραφή μίας γραμμής, τρεις ετικέτες χαρακτηριστικών και ένας σύνδεσμος για τη σειρά.

    Κάθε σειρά συστήνεται σε μία κάρτα

  • Η ενότητα «Ενοικιαζόμενα καταλύματα & glamping» σε κινητό: μια μονάδα με όψη ξύλου και κόκκινη στέγη δίπλα σε λίμνη, η ετικέτα «Τουρισμός», ένα σύντομο κείμενο και μια τσεκαρισμένη λίστα χρήσεων.

    Γραμμένο για τη χρήση, όχι μόνο για το προϊόν

  • Η γκαλερί έργων σε κινητό: ο τίτλος «Φιλτράρετε ανά σειρά ή στάδιο», κουμπιά φίλτρων σε τρεις σειρές με επιλεγμένο το «Όλα» και οι πρώτες φωτογραφίες μονάδων από κάτω.

    Επτά φίλτρα που χωράνε κάτω από τον αντίχειρα

  • Κάρτες επικοινωνίας σε κινητό: δύο αριθμοί τηλεφώνου με μεγάλα γράμματα, η διεύθυνση email με σημείωση που προσκαλεί σκίτσα και φωτογραφίες του οικοπέδου, και η αρχή της κάρτας με τη διεύθυνση του εργοστασίου.

    Δύο αριθμοί και ένα email, σε γράμματα που πατιούνται εύκολα