Chrivelle Velvet Gallery: Redesign eines Heimtextil-Geschäfts

Chrivelle Velvet Gallery verkauft in Dasmariñas City, Cavite, Samtstoffe, Vorhänge, Bezüge und Heimtextilien und übernimmt Polsterarbeiten nach Mass sowie Dekorationen für Anlässe. Die neue Website dreht sich um das Material selbst: Samt, den man fast anfassen kann.

Die alte Startseite lud bei jedem Besuch 99.52 MB, was bei simulierten 10 Mbit/s 80.1 Sekunden dauerte. Auf einem 390 px breiten Handybildschirm war das Layout 780 px breit, ein Teil des Textes war gelb auf Mauve und kaum lesbar, die Seite forderte Bilder an, die es nicht gab, und Schriften und Icons kamen von drei externen Hosts. Ausserdem nannte sie eine Firmenregistrierung und eine Mehrwertsteuer-Referenz, die niemand bestätigt hatte, garantierte Handwerksqualität und Kartenzahlung, die das Geschäft nicht anbietet.

Ein Neubau ohne Framework in Mauve, Pflaume und Creme mit Messing-Akzenten, mit einer Buch-Serifenschrift und einer weichen serifenlosen Schrift. Im Titelbereich streicht der Mauszeiger oder ein seitliches Wischen auf dem Handy über den Samtflor, und die Spur legt sich langsam wieder; bei reduzierter Bewegung erscheint stattdessen ein ruhender Strich. Das Titelfoto hängt an einem Messingdraht, und jede Karte hat eine gezackte Samtkante, die beim Darüberfahren den Glanz wechselt, und ein kleines Messingschild. Das Sortiment ist in Stoffe und Heimtextilien sowie Massanfertigungen auf Pflaumensamt aufgeteilt. Die Bilder sind komprimierte WebP-Dateien, die erst beim Scrollen laden, und die Schriften werden mit der Website ausgeliefert, sodass die Startseite ohne Anfragen an Dritte auskommt.

Die neue Website gestaltet und gebaut, die Bilder erstellt und für das Web komprimiert, den streichbaren Samt entwickelt, Warenkorb und Bestellseite samt Leistungsanfragen neu aufgebaut, unbestätigte Aussagen entfernt und die alte und neue Version mit demselben Skript gemessen.

• Samt-Titelbereich, dessen Flor man mit Mauszeiger oder Wischen streichen kann, mit ruhender Version bei reduzierter Bewegung
• Titelfoto an einem Messingdraht
• Karten mit gezackter Samtkante, die beim Darüberfahren den Glanz wechselt, und Messingschild
• Zwei Gruppen: Stoffe und Heimtextilien sowie Massanfertigungen
• Produkte mit Etiketten aus dem Namen des Geschäfts, ohne Marken Dritter
• Unbestätigte Registrierungs- und Mehrwertsteuer-Angaben, eine Qualitätsgarantie und Kartenzahlung entfernt, nur noch die Steuernummer wird gezeigt
• Bestellung als vorausgefüllte E-Mail, die die Kundschaft selbst abschickt; Leistungen werden nach Bestätigung terminiert, mit Massnehmen vor Ort
• Prüfung der Felder auf der Bestellseite, einschliesslich philippinischer Handynummern
• Die drei ursprünglichen Kundenzitate wörtlich übernommen

• HTML
• CSS
• JavaScript
• Canvas
• WebP
• JSON-LD structured data

Gewicht der Startseite beim Laden

99.52 → 0.80 MB

Beim Laden am Handy

99.51 → 0.58 MB

Nach Scrollen der ganzen Seite

99.52 → 1.07 MB

Vollständig geladen (simuliert, 10 Mbit/s)

80.1 → 0.49 s

Layoutbreite am Handy (390-px-Bildschirm)

780 → 390 px

Produkte und Leistungen

15

• →Live unter chrivellevelvet.site.
• →Mit demselben Skript gemessen: Die Startseite lädt am Desktop 0.80 MB statt 99.52 MB, am Handy 0.58 MB.
• →Während des Aufnahmelaufs keine fehlgeschlagenen Anfragen, keine Konsolenfehler und keine Anfragen an Dritte auf der neuen Website.

• Wenn das Produkt ein Material ist, sollen Besucher damit spielen können.
• Aussagen entfernen, die das Geschäft nicht belegen kann.
• Wenn Bilder Illustrationen sind, gehört das auf die Seite.

Kunden-Website, mit Namen gezeigt. Screenshots und Messwerte stammen aus einem Aufnahmeskript, das auf der alten und der neuen Website lief, auf einem lokalen Server. Der Wert bei 10 Mbit/s beruht auf einer simulierten Verbindung und nicht auf Daten echter Besucher. Die Bilder sind generierte Illustrationen in mauve- und pflaumenfarbenem Samt mit Etiketten aus dem Namen des Geschäfts und ohne Personen, keine Fotos seiner Ware, worauf der Shop hinweist. Produkttexte, Öffnungszeiten und die drei Kundenzitate stammen von der alten Website. In den Screenshots der neuen Startseite sind Strassenadresse und Telefonnummer unkenntlich gemacht.