Wofür das Produkt entwickelt wurde
Helfen Sie potenziellen Käufern, ein Immobilienportfolio zu verstehen, individuelle Entwicklungen zu erkunden und eine Anfrage mit nützlichem Kontext zu stellen.
Für wen es gedacht ist
Menschen, die Residenzen und Gewerbeimmobilien in Tétouan und Cabo Negro erkunden, sowie das Team, das ihre Anfragen entgegennimmt.
Das Produkterlebnis
Das Portfolio führt zu unterschiedlichen Entwicklungserfahrungen. Besucher können Galerien und einen auf Wahrzeichen basierenden Masterplan besichtigen, Wohnpräferenzen auswählen und diesen Kontext in Kontakt bringen. Französische und englische Strecken bedienen dasselbe zugrunde liegende Portfolio.
Die Technologie hinter dem Erlebnis
Gemeinsame Inhalte und Weiterleitung unterstützen die Website-Grundlage, während separate Kampagnenkomponenten jeder Hauptentwicklung ihre eigene Zusammensetzung verleihen. Responsive Medien und On-Demand-Filme sorgen für visuelles Gewicht. Validierung, private Anfrageaufzeichnungen und Quittungen unterstützen den Kontaktablauf; Weiterleitungen und Metadaten verbinden die Neuerstellung mit bekannten Legacy-URLs.
Ein Immobilienportfolio als zusammenhängendes digitales Erlebnis.
Mehr als eine neue Gestaltung
Der Auftrag für Moussa Real Estate umfasste eine vollständige Überarbeitung, geprägt von sechs Monaten Planung. Die neue Website soll das Unternehmen vorstellen, seine Immobilienprojekte unterscheiden und Interessenten zu einer aussagekräftigen Anfrage führen. Eine neue Startseite reicht dafür nicht: Inhalte, Navigation, Immobilienpräsentation, Medien und Anfragebearbeitung müssen zusammenarbeiten.
Der lokale Neuaufbau umfasst 16 Seiten in Französisch und Englisch, also 32 Seiten-Sprach-Kombinationen: Startseite, Portfolio, sieben Entwicklungen, Unternehmen, Kontakt, Gewerberäume, virtuelle Besichtigungen und rechtliche Seiten. Dieser Umfang erfordert Konsistenz, ohne den Hauptprojekten ihren eigenen Charakter zu nehmen.
Eine gemeinsame Grundlage, eigenständige Immobilienerlebnisse
Die Architektur verwendet Next.js, React und TypeScript mit gemeinsam genutzten Website-Inhalten und separaten Kampagnenkompositionen. Metropolis, River Residences und L’Olivier verfügen über unterschiedliche Farb-, Hierarchie-, Layout- und Bewegungsbehandlungen. Die Amina-Entwicklungen bleiben über das gemeinsame Portfolio zugänglich und verschwinden nicht hinter den Flaggschiff-Kampagnen.
Durch die Trennung von geteiltem Inhalt und Kampagnenpräsentation behält die Website eine kohärente Navigations- und Sprachstruktur bei und verleiht jeder Entwicklung eine spezifischere visuelle Geschichte. Das Inhaltsmodell enthält Projektfakten, zweisprachige Kopien und Kontaktdaten; Kampagnenmodule steuern die Kapitel und Interaktionen, die jede Seite anders machen.
Die Sprachverwaltung gehört zur Grundlage. Französisch behält die Stamm-URLs; Englisch nutzt /en. Arabisch bleibt zurückgestellt, bis geprüfte Inhalte vorliegen. So unterstützt die Website die dokumentierten Sprachen, ohne ungeprüfte Übersetzungen als fertige Kundenerfahrung darzustellen.
Interaktive Erkundung
Metropolis enthält einen illustrierten Masterplan mit auswählbaren Sehenswürdigkeiten und einem erweiterten Viewer. Besucher können das Bild über Zoom-, Schwenk- und Reset-Steuerelemente betrachten, während mobile Benutzer darunter grosse Markierungsschaltflächen haben. Der Masterplan ist eine Raster-Architekturillustration mit interaktiver Navigation, kein umlaufendes 3D-Modell oder eine zertifizierte Vermessung.
Die Galerie von River behandelt die Navigation als Teil des Browser-Erlebnisses. Durch die Auswahl eines Bildes wird der nummerierte URL-Status aktualisiert, die Aktion „Zurück“ stellt das vorherige Bild wieder her und Escape schliesst den Dialog. Dadurch wird eine Galerie von einer isolierten Überlagerung zu einer Reise, die erneut besucht und vorhersehbar navigiert werden kann.
Diese Interaktionen müssen auch zugänglich bleiben. Die dokumentierten Prüfungen umfassen das Schliessen der Galerien per Tastatur, die Rückkehr des Fokus und die Auswahl von Orientierungspunkten auf Mobilgeräten. So lässt sich die Erfahrung mit unterschiedlichen Eingabemethoden und Bildschirmgrössen nutzen.
Vom Interesse zur aussagekräftigen Anfrage
Die Kontaktreise trägt den Kontext weiter. Eine Wohnpräferenzsteuerung kann die ausgewählte Wohn- und Schlafzimmerpräferenz an das Anfrageformular senden, wodurch der Aufwand für erneute Erklärungen durch den Besucher verringert wird. Neben dem Formular stehen weiterhin direkte Telefon-, E-Mail- und WhatsApp-Alternativen zur Verfügung.
Das Formular validiert Daten im Browser und auf dem Server, speichert einen privaten Datensatz und gibt eine Bestätigung zurück. Der lokale Build enthält einen schreibgeschützten Anfrageeingang ausserhalb öffentlicher Dateien. Eine gekennzeichnete Testanfrage wurde während der dokumentierten Qualitätssicherung gesendet und dort geprüft.
Dieser Empfangsmechanismus funktioniert lokal. Automatische E-Mails und eine Live-CRM-Verbindung werden nicht als abgeschlossene Integrationen dargestellt. Der Produktionsbetrieb benötigt dauerhaften privaten Speicher und passende Konfiguration. Die Studie unterscheidet deshalb implementierte Anfragebearbeitung von noch anzubindenden Diensten.
Medien, Geschwindigkeit und Animation
Das Erzählen von Immobiliengeschichten basiert auf grossen Bildern und Filmen, daher ist die Bereitstellung von Vermögenswerten von Anfang an ein technisches Anliegen. Der Neuaufbau verwendet reaktionsfähige Bildableitungen, explizite Bildabmessungen, vorrangiges Laden für Heldenbilder und verzögertes Laden für sekundäre Medien. Filme werden bei Bedarf geladen und die mobile Homepage startet mit einem Porträtfoto, anstatt automatisch einen Hintergrundfilm zu laden.
Die Implementierung verwendet ausserdem selbst gehostete Typografie, Fallbacks mit reduzierter Bewegung und eine durch Sichtbarkeit gesteuerte Animationsschleife. Die Absicht besteht darin, die Atmosphäre der Entwicklung zu bewahren, ohne dass jedes Gerät jedes Bild gleichzeitig herunterladen und animieren muss.
Der lokale Lighthouse-Bericht vom 17. September zeigt mobile Performancewerte von 88 bis 93 auf vier repräsentativen Seiten ohne gemessene Layoutverschiebung. Das sind historische Labormessungen, keine aktuellen Felddaten oder Geschwindigkeitsgarantien für die Produktion. Der Bericht nennt zudem Potenzial bei mobilem Laden und Bildkomprimierung.
Die Website erneuern und ihre URLs erhalten
Die Migrationsarbeit ordnet bekannte Legacy-Pfade und WordPress-Seiten-IDs Ersatzzielen zu. Französische und englische Seiten verfügen über kanonische URLs und Sprachalternativen sowie Metadaten, soziale Karten, strukturierte Daten, eine Sitemap und Roboterverwaltung. Unbekannte Routen geben eine ordnungsgemässe 404-Antwort zurück.
Die aufgezeichneten Weiterleitungsprüfungen decken sechs Legacy-Pfade und eine repräsentative WordPress-ID ab. Hierbei handelt es sich um eine definierte Migrationsoberfläche und nicht um eine Behauptung, dass jede historische eingehende URL erkannt wurde. Eine Produktionsmigration erfordert weiterhin echten Datenverkehr oder Search Console-Exporte, um zusätzliche Aliase zu identifizieren, sowie eine Überprüfung des kanonischen Hosts und der Weiterleitungen nach der Bereitstellung.
Entwicklungsprozess und Prüfschritte
Sechs Monate Planung bestimmten die Richtung. Die Umsetzung überträgt sie in Inhaltsorganisation, gemeinsames Routing, projektspezifische Seiten, interaktive Erkundung, Anfragen und Migration. Gestaltung und Technik werden im Browser geprüft: Jede Seite muss auch übersetzt, auf dem Smartphone und per Tastatur verständlich und nutzbar bleiben. Die sechs Monate beziehen sich auf die Planung, nicht auf eine gemessene Programmierdauer.
Die Qualitätssicherungsaufzeichnung vom 17. September berichtet über bestandene Produktions- und TypeScript-Prüfungen, zwei Anfragetests und einen HTTP-Sweep, der 32 Seiten, 68 Assets und sieben repräsentative Weiterleitungen umfasst. Die Hauptprojektseiten wurden in neun Ansichtsfensterbreiten von 320 bis 1920 Pixel überprüft. Ein Eintrag vom 18. September dokumentiert die weitere Validierung der Neugestaltung der Kampagne. Hierbei handelt es sich um datierte Überprüfungskontrollpunkte, nicht um ein rekonstruiertes Startdatum oder eine Gesamtbaudauer.
Der hier beschriebene Auslieferungsumfang ist der lokale Rebuild. Öffentliche Bereitstellung, echte CRM-Integration, Tests physischer Geräte und Core Web Vitals vor Ort lagen ausserhalb der in diesen Berichten dokumentierten abgeschlossenen Prüfungen. Wenn diese Grenzen klar bleiben, wird die Entwicklungsgeschichte nützlicher: Sie zeigt, was gebaut wurde, was getestet wurde und was zur nächsten Release-Stufe gehört.
