Ελιά & Προζύμι

Επισκόπηση

Το Ελιά & Προζύμι είναι ένα site-concept για φούρνο της γειτονιάς, φτιαγμένο για να δείξει τι κερδίζει μια μικρή επιχείρηση εστίασης από ένα απλό, προσεγμένο website. Οι περισσότεροι φούρνοι και τα καφέ χρειάζονται online τα ίδια τέσσερα πράγματα: τι πουλάνε, πότε είναι ανοιχτά, πού βρίσκονται και πώς παραγγέλνεις. Στόχος ήταν μία σελίδα που απαντά και στα τέσσερα σε λιγότερο από ένα λεπτό, στα ελληνικά και στα αγγλικά.

Η πρόκληση

• Κατάλογος, ωράριο, τοποθεσία και παραγγελίες σε μία σελίδα, χωρίς να φαίνεται φορτωμένη.
• Οι πελάτες της γειτονιάς να διαβάζουν ελληνικά και οι επισκέπτες αγγλικά, χωρίς δύο ξεχωριστά sites.
• Παραγγελίες για εκδηλώσεις χωρίς server, βάση δεδομένων ή μηνιαίο κόστος.
• Εύκολη επαναχρησιμοποίηση: ένα αρχείο που αλλάζει όψη για τον επόμενο πελάτη.

Σχεδιασμός

Η αισθητική είναι ζεστή και απλή: φόντο στο χρώμα του αλευριού, τερακότα για έμφαση και σκούρο καφέ για τα κείμενα. Οι τίτλοι είναι σε Literata, μια serif με πλήρη υποστήριξη ελληνικών, και τα κείμενα σε Inter. Αντί για φωτογραφία από stock, η αρχική ενότητα έχει ένα σχεδιασμένο καρβέλι μέσα σε τοξωτό πλαίσιο, έτοιμο να αντικατασταθεί από φωτογραφία του πραγματικού καταστήματος. Οι τιμές γράφονται στην ελληνική μορφή (4,50 €) και οι ώρες σε 24ωρο.

Λειτουργίες

• Εναλλαγή ελληνικά/αγγλικά: όλα τα κείμενα, ο τίτλος της σελίδας και η φόρμα αλλάζουν γλώσσα, και η επιλογή θυμάται στην επόμενη επίσκεψη.
• Φόρμα παραγγελίας για εκδηλώσεις: όνομα, τηλέφωνο, ημερομηνία παραλαβής (οι παρελθούσες ημερομηνίες δεν επιτρέπονται) και περιγραφή, που στέλνονται ως έτοιμο email, με μήνυμα επιβεβαίωσης στο τέλος.
• Κλήση με ένα άγγιγμα: το κουμπί στην κορυφή καλεί απευθείας από κινητό· σε υπολογιστή εμφανίζει τον αριθμό και τον αντιγράφει.
• Κατάλογος, κριτικές και επίσκεψη: έξι προϊόντα με τιμές, σχόλια πελατών, ωράριο και σύνδεσμος για τον χάρτη.

Για κάθε οθόνη

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

Ταχύτητα και SEO

Όλο το site είναι ένα αρχείο HTML με ενσωματωμένο CSS και λίγες γραμμές vanilla JavaScript: χωρίς framework, χωρίς build και χωρίς βιβλιοθήκες προς φόρτωση. Έχει meta description, σωστή δήλωση γλώσσας για ελληνικά και αγγλικά και favicon σε SVG. Το μόνο εξωτερικό αίτημα είναι οι γραμματοσειρές από το Google Fonts.

Τεχνολογίες

HTML, CSS, vanilla JavaScript, Google Fonts (Literata, Inter).