A cosa serve il prodotto
Aiuta i potenziali acquirenti a comprendere un portafoglio immobiliare, a esplorare i singoli sviluppi e a fare una richiesta con un contesto utile.
A chi si rivolge
Persone che esplorano residenze e proprietà commerciali a Tétouan e Cabo Negro, oltre al team che riceve le loro richieste.
L’esperienza del prodotto
Il portfolio conduce a distinte esperienze di sviluppo. I visitatori possono ispezionare le gallerie e un piano generale basato sui punti di riferimento, selezionare le preferenze di residenza e mettere in contatto quel contesto. Le rotte francesi e inglesi servono lo stesso portafoglio sottostante.
La tecnologia dietro l’esperienza
Il contenuto condiviso e il routing supportano le fondamenta del sito, mentre i componenti separati della campagna conferiscono a ogni sviluppo principale la propria composizione. I media reattivi e i film on-demand gestiscono il peso visivo. Convalida, registrazioni di richieste private e ricevute supportano il flusso di contatti; reindirizzamenti e metadati collegano la ricostruzione a URL legacy noti.
Un portafoglio immobiliare ripensato come esperienza digitale coerente.
Oltre il rinnovo visivo
L’incarico per Moussa Real Estate prevedeva un rinnovo completo, definito da sei mesi di pianificazione. Il sito deve presentare l’azienda, distinguere gli sviluppi immobiliari e guidare l’acquirente dall’interesse a una richiesta utile. Una nuova homepage non basta: contenuti, navigazione, immobili, media e gestione delle richieste devono funzionare insieme.
La ricostruzione locale comprende 16 pagine in francese e inglese: 32 combinazioni di pagina e lingua. Include homepage, portafoglio, sette sviluppi, azienda, contatti, locali commerciali, visite virtuali e pagine legali. Questa ampiezza richiede coerenza, lasciando ai progetti principali il proprio carattere.
Una base comune, esperienze immobiliari distinte
L'architettura utilizza Next.js, React e TypeScript, con contenuti del sito condivisi e composizioni di campagne separate. Metropolis, River Residences e L’Olivier hanno trattamenti di colore, gerarchia, disposizione e movimento distinti. Gli sviluppi di Amina rimangono accessibili attraverso il portafoglio condiviso anziché perdersi dietro le campagne di punta.
Separare i contenuti condivisi dalla presentazione della campagna consente al sito di mantenere una navigazione e una struttura linguistica coerenti, conferendo a ogni sviluppo una storia visiva più specifica. Il modello di contenuto contiene informazioni sul progetto, copia bilingue e dettagli di contatto; i moduli della campagna controllano i capitoli e le interazioni che rendono ogni pagina diversa.
La gestione linguistica fa parte della base. Il francese mantiene gli URL principali e l’inglese usa /en. L’arabo resta in attesa di contenuti revisionati. Il sito supporta così le lingue documentate senza presentare traduzioni non verificate come un’esperienza conclusa.
Esplorare in modo interattivo
Metropolis include un piano generale illustrato con punti di riferimento selezionabili e un visualizzatore ampliato. I visitatori possono ispezionare l'immagine tramite i controlli di zoom, panoramica e ripristino, mentre gli utenti mobili hanno sotto di essa grandi pulsanti di riferimento. Il masterplan è un'illustrazione architettonica raster con navigazione interattiva, non un modello 3D orbitabile o un rilievo certificato.
La galleria di River tratta la navigazione come parte dell'esperienza del browser. Selezionando un'immagine si aggiorna lo stato dell'URL numerato, l'azione Indietro ripristina l'immagine precedente e Escape chiude la finestra di dialogo. Ciò trasforma una galleria da una sovrapposizione isolata in un viaggio che può essere rivisitato e navigato in modo prevedibile.
Queste interazioni devono anche essere accessibili. Le verifiche documentate coprono la chiusura delle gallerie da tastiera, il ritorno del focus e la selezione dei punti di riferimento su mobile. Questi dettagli supportano metodi di input e schermi diversi.
Dall’interesse a una richiesta con contesto
Il percorso di contatto porta avanti il contesto. Un controllo delle preferenze di residenza può inviare lo sviluppo selezionato e la preferenza della camera da letto nel modulo di richiesta, riducendo la quantità di tempo che un visitatore deve spiegare nuovamente. Le alternative di telefono diretto, e-mail e WhatsApp rimangono disponibili insieme al modulo.
Il modulo valida i dati nel browser e sul server, salva un record privato e restituisce una ricevuta. La versione locale include una casella richieste in sola lettura, fuori dai file pubblici. Durante le verifiche documentate è stata inviata e controllata una richiesta contrassegnata come test.
Questo meccanismo funziona localmente. E-mail automatiche e collegamento CRM reale non sono presentati come integrazioni concluse. La produzione richiede archiviazione privata persistente e configurazione adeguata. Lo studio distingue quindi ciò che è implementato dai servizi ancora da collegare.
Media, velocità e animazione
La narrazione della proprietà si basa su immagini e filmati di grandi dimensioni, quindi la consegna delle risorse è una preoccupazione ingegneristica fin dall'inizio. La ricostruzione utilizza derivati dell'immagine reattivi, dimensioni esplicite dell'immagine, caricamento prioritario per le immagini degli eroi e caricamento lento per i media secondari. I film vengono caricati su richiesta e la home page mobile inizia con un ritratto fermo anziché caricare automaticamente un film di sfondo.
L'implementazione utilizza anche la tipografia self-hosted, fallback a movimento ridotto e un ciclo di animazione controllato dalla visibilità. L'intenzione è quella di preservare l'atmosfera dello sviluppo senza dover scaricare e animare ogni immagine contemporaneamente su ogni dispositivo.
Il rapporto Lighthouse locale del 17 settembre registra punteggi mobili da 88 a 93 su quattro pagine rappresentative, senza spostamenti di layout misurati. Sono risultati storici di laboratorio, non dati reali attuali né garanzie di velocità in produzione. Il rapporto segnala anche opportunità per caricamento mobile e compressione immagini.
Rinnovare il sito mantenendo gli URL
Il lavoro di migrazione mappa i percorsi legacy noti e gli ID delle pagine WordPress alle destinazioni sostitutive. Le pagine francese e inglese hanno URL canonici e lingue alternative, oltre a metadati, social card, dati strutturati, una mappa del sito e gestione dei robot. I percorsi sconosciuti restituiscono una risposta 404 corretta.
I controlli di reindirizzamento registrati coprono sei percorsi legacy e un ID WordPress rappresentativo. Si tratta di una superficie di migrazione definita, non di un'affermazione secondo cui ogni URL in entrata storico è stato scoperto. Una migrazione di produzione necessita ancora di traffico reale o di esportazioni di Search Console per identificare alias aggiuntivi e un controllo post-distribuzione dell'host canonico e dei reindirizzamenti.
Processo di sviluppo e verifiche
Sei mesi di pianificazione hanno definito la direzione. L’implementazione la traduce in contenuti, routing condiviso, pagine per sviluppo, esplorazione interattiva, richieste e migrazione. Design e verifiche tecniche si incontrano nel browser: ogni pagina deve funzionare tradotta, su mobile e con tastiera. I sei mesi riguardano la pianificazione, non una durata di programmazione misurata.
Il record di QA del 17 settembre riporta il superamento dei controlli di produzione e TypeScript, di due test di richiesta e di uno sweep HTTP che copre 32 pagine, 68 risorse e sette reindirizzamenti rappresentativi. Le pagine principali del progetto sono state esaminate su nove larghezze del viewport da 320 a 1920 pixel. Una voce del 18 settembre documenta un'ulteriore convalida della riprogettazione della campagna. Si tratta di checkpoint di verifica datati, non di una data di inizio ricostruita o della durata totale della costruzione.
L'ambito fornito qui descritto è la ricostruzione locale. L'implementazione pubblica, l'integrazione CRM reale, i test dei dispositivi fisici e i Core Web Vitals sul campo non rientravano nei controlli completati documentati in tali report. Mantenere chiari questi confini rende la storia dello sviluppo più utile: mostra cosa è stato costruito, cosa è stato testato e cosa appartiene alla fase di rilascio successiva.
