Websites
Raviel Prime Market: Redesign eines Lebensmittelladens
Ein komplettes Redesign für einen Quartierladen in Labason, Philippinen: tiefes Meerblau, ein Rand in den Farben eines Vinta-Segels und der Katalog als Preistafel mit grossen, klaren Preisen. Die neue Startseite lädt ausserdem 1.60 MB statt 47.78 MB.
- Kontext
- Raviel Prime Market, ein Quartierladen für Lebensmittel in Labason, Zamboanga del Norte, Philippinen.
- Meine Rolle
- Design, Frontend-Entwicklung und Bildproduktion
- Jahr
- 2026
Mein Redesign: vorher und nachher
Die alte Website neben meinem Design, in derselben Bildschirmgrösse.
Startseite
Aus einer blassen Willkommenskarte wurde ein kräftiger erster Bildschirm: ein hoher, schmaler Titel über Kisten mit Obst und Gemüse auf einem Boot auf dem Meer, zwei klare Knöpfe und ein gestreifter Rand in den Farben eines Vinta-Segels.
Produkte
Aus einem Raster kleiner Produktkarten wurde «Today's board»: eine Preisliste in den Gruppen Frisch, Vorrat sowie Getränke und Haushalt, mit grossen Preisen, Bestand und Knopf in jeder Zeile.
Rechtliche Hinweise
Aus hellen Karten wurde ein hellblaues Band mit einer kurzen Zusammenfassung und einem Link zu jedem vollständigen Text.
Auf dem Handy
Titel und zwei breite Knöpfe liegen über der Bootsszene, der Korb bleibt immer im Kopfbereich.
Überblick
Raviel Prime Market verkauft in Labason, Zamboanga del Norte, frische Ware, Vorräte und Haushaltsartikel. Die neue Website nimmt ihr Aussehen von der Küste rund um die Stadt: Meerblau, gestreifte Segel und eine Markttafel, die man auf einen Blick lesen kann.
Das Problem
Die alte Startseite lud bei jedem Besuch 47.78 MB, davon 47.44 MB Bilder, was bei simulierten 10 Mbit/s 38.6 Sekunden dauerte. Schriften und Icons kamen von drei externen Hosts, und mit der Kartenvorlage liessen sich fünfzehn Alltagsprodukte nur mühsam vergleichen.
Die Lösung
Ein Neubau ohne Framework in tiefem Blau und Weiss mit einer hohen, schmalen Titelschrift und einem gestreiften Rand in Vinta-Segel-Farben. Der Katalog wird zur Preistafel in drei Gruppen, sodass sich Preise Zeile für Zeile vergleichen lassen, und die Kundenzitate stehen unter «Sabi ng mga suki». 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.
Screenshots
Aufgenommen an der echten, live geschalteten Website.
Mein Beitrag
Die neue Website gestaltet und gebaut, die Bilder erstellt und für das Web komprimiert, Korb und Bestellseite neu aufgebaut und die alte und neue Version mit demselben Skript gemessen.
Funktionen
- Katalog als Preistafel in drei Gruppen: Frisch, Vorrat sowie Getränke und Haushalt
- Grosse Preise mit Einheit, Restbestand und Knopf in jeder Zeile
- Gestreifter Rand in Vinta-Segel-Farben, der sich durch die ganze Seite zieht
- Kundenzitate unter der Tagalog-Überschrift «Sabi ng mga suki»
- Korb mit Mengensteuerung und dem Hinweis, dass noch nichts zu bezahlen ist
- Bestellung als vorausgefüllte E-Mail, die die Kundschaft selbst abschickt, das Team bestätigt zuerst Artikel und Lieferung
- Prüfung der Felder auf der Bestellseite, einschliesslich philippinischer Handynummern
- Hinweis auf der Tafel, dass die Fotos Illustrationen sind und die Verpackung abweichen kann
- Änderungen im Korb werden Screenreadern angesagt, Unterstützung für reduzierte Bewegung und strukturierte Daten vom Typ GroceryStore
Technische Herausforderungen
Eine Preisliste statt einer Galerie
Lebensmittel kauft man nach Preis. Als Zeilen einer Tafel stehen alle Preise in derselben Spalte und gross genug, um sie auf einen Blick zu lesen, während das Bild neben jeder Gruppe verhindert, dass die Seite wie eine Tabelle wirkt.
Bestellen ohne Backend
Die Website ist statisch und kann deshalb selbst keine Bestellung auslösen. Die Bestellseite prüft die Angaben und öffnet eine vollständige, vorausgefüllte E-Mail, die die Kundschaft abschickt. Sie erklärt auch, dass das Team zuerst bestätigt.
Ein grosses Titelbild, das am Handy leicht bleibt
Die Bootsszene ist das grösste Bild der Seite. Handys erhalten eine eigene, kleinere Version, und die übrigen Bilder laden erst beim Scrollen, so bleibt die Startseite am Handy bei 0.59 MB beim Laden.
Verifizierter Stack
- HTML
- CSS
- JavaScript
- WebP
- JSON-LD structured data
Fakten aus dem Code
- Gewicht der Startseite beim Laden
- 47.78 → 1.60 MB
- Beim Laden am Handy
- 47.78 → 0.59 MB
- Nach Scrollen der ganzen Seite
- 47.78 → 1.66 MB
- Vollständig geladen (simuliert, 10 Mbit/s)
- 38.6 → 0.67 s
- Drittanbieter-Hosts beim Laden
- 3 → 0
- Produkte im Katalog
- 15
Ergebnisse
- Live unter ravielmarket.site.
- Mit demselben Skript gemessen: Die Startseite lädt am Desktop 1.60 MB statt 47.78 MB, am Handy 0.59 MB.
- Während des Aufnahmelaufs keine fehlgeschlagenen Anfragen und keine Konsolenfehler auf der neuen Website.
Erkenntnisse
- Bei Alltagsware ist eine leicht vergleichbare Liste besser als ein Raster aus Karten.
- Ein lokaler Farbbezug kann eine ganze visuelle Identität tragen.
- Wenn Bilder Illustrationen sind, gehört das auf die Seite.
Zu dieser Fallstudie
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 Produkt- und Szenenbilder sind generierte Illustrationen mit neutraler Verpackung und keine Fotos des Ladens, worauf die Website hinweist. Produkttexte, Angebote und Kundenzitate auf der Website stammen von der alten Website. Der Name der Gründerperson im Screenshot der alten Startseite ist unkenntlich gemacht.
Planen Sie eine neue Website, oder ist Ihre heutige zu langsam?
Beschreiben Sie Ihr Vorhaben in ein paar Sätzen. Innerhalb von zwei Arbeitstagen erhalten Sie Rückfragen, einen groben Lösungsansatz und eine Preisspanne in CHF.