Neuaufbau der WordPress-Webseite
abatjour-hummel

Abat-Jour Hummel präsentiert sich im neuen Licht

Die Website von Marina Hummel wurde modernisiert, um ihre handgefertigten Lampenschirme und Dienstleistungen besser zu präsentieren. Eine ansprechende Bildergalerie und eine optimierte Präsentation der Leistungen wurden integriert.

Direkt zur Projektrezension von abatjour-hummel
Desktop mockup der startseite von abat jour hummel

Erreichte Meilensteine

  • Eine strukturierte neue Seite mit leicht zu bedienenden Überpunkten.
  • Bildergalerie, die als Lightbox im All-E-Builder integriert und manuell per Drag-and-Drop austauschbar ist.
  • Implementierung eines dynamischen FAQ-Systems.
  • Verwaltung des Contents über Gutenberg, ohne den Page Builder zu verwenden.
  • Einfaches Posten von Ausstellungen mit Custom Fields.
  • Schnellere Ladegeschwindigkeit beim gleichen Hoster durch Verwendung lokaler Fonts, Webbilder und einer reduzierten DOM-Struktur.

Konzeption

Konzeption und Design – Warm und einladend

Das Design und die Konzeption wurden von Grund auf neu entwickelt, da es in der Lampenschirm-Manufaktur in Deutschland nur wenige Anbieter gibt. Die Seite sollte nicht zu modern wirken, sondern eine warme und heimische Atmosphäre schaffen.

Hauptfarbe und Farbpalette

  • Die Hauptfarbe des Hintergrunds ist ein sanftes Beige, das eine gemütliche und einladende Atmosphäre erzeugt.
  • Eine ergänzende helle Cremefarbe wird verwendet, um das Design aufzulockern und eine harmonische Balance zu schaffen.
  • Links und Icons sind in einem warmen Orange gehalten, um einen sanften, aber auffälligen Akzent zu setzen, ohne zu aufdringlich zu wirken.

Flexibilität durch ACSS

  • ACSS ermöglicht schnelle Anpassungen der Farben, transparenten Hintergründe und anderer Designelemente auf der gesamten Seite.
  • Durch ACSS wird das Design flexibel und leicht anpassbar, um den Bedürfnissen des Projekts gerecht zu werden.

Responsivität und Zielgruppenorientierung

  • Das Design wurde responsiv gestaltet, sodass es auf verschiedenen Geräten optimal angezeigt wird.
  • Die Farbwahl und das Design wurden zurückhaltend gewählt, um der Zielgruppe, die tendenziell älter ist, gerecht zu werden.
Lightbox ansicht der bildergalerie der lampemschirme von abat jour hummel
Die Bilder in der Galerie können in einer ansprechenden Lightbox angezeigt werden, die es ermöglicht, die Details jedes Lampenschirms in Ruhe zu betrachten. Im Backend lässt sich die Reihenfolge der Bilder ganz einfach per Drag-and-Drop anpassen, sodass die Präsentation jederzeit nach Wunsch verändert werden kann. Die Handhabung ist intuitiv und erfordert keine technischen Vorkenntnisse.

SEO & Performance

Optimiert für schnellere Ladezeiten

Die SEO- und Performance-Optimierung wurde gezielt umgesetzt, um die Ladegeschwindigkeit zu verbessern und die Sichtbarkeit der Website zu steigern.

SEO-Optimierungen

  • Meta-Titles und -Descriptions wurden für die wichtigsten Seiten erstellt, um die Indexierung zu verbessern.
  • Die Seitenstruktur wurde für eine bessere Auffindbarkeit in Suchmaschinen optimiert.

Performance-Optimierungen

  • CSS und JS wurden minimiert, und WebP-Format sowie lokale Fonts wurden implementiert.
  • Unnötige JS-Dateien wurden entfernt, und alle Schriften sowie Icons werden lokal gehostet.
  • Compress X wandelt Bilder automatisch in WebP um, um die Ladegeschwindigkeit zu erhöhen.
  • 6Strukturierte Seiten erstellt

    Der Besucher der Seite findet sich besser zurecht.

  • 1Custom Post Type(s) angelegt

    Künftige Veranstaltungen zu posten wurde leichter gemacht.

  • 90%Mobiler Durchschnittswert (Lighthouse)

    Die Ladegeschwindigkeit wurde mehr als verdoppelt.

Barrierefreiheit

Benutzerfreundlich und inklusiver gestaltet

Die Website wurde mit dem Ziel entwickelt, dass Besucher der Lampenschirm-Manufaktur die Inhalte problemlos erreichen können – unabhängig von ihren individuellen Bedürfnissen oder technischen Hilfsmitteln.

Optimierungen für eine bessere Zugänglichkeit

  • Alle Links im Body sind unterstrichen und haben sprechende URLs für eine klare Navigation.
  • Alle Bilder (außer denen in der Galerie) sind mit Alt-Texten versehen, um sie für Screenreader verständlicher zu machen.
  • Das Menü im Header-Bereich verfügt über einen „Skip to Main“-Link, um die Navigation zu erleichtern.
  • Der Fokus ist bei der Tab-Navigation klar erkennbar, und es gibt keine Barrieren, die die Navigation erschweren.

Strukturierte Inhalte für einfache Nutzung

  • Wiederkehrende Inhalte wie Veranstaltungen oder Services wurden als Listen strukturiert, um eine bessere Bedienbarkeit durch Screenreader zu gewährleisten.
  • Das Formular enthält klare Labels und eine gut strukturierte Hierarchie der Headings, um eine einfache Bedienung zu ermöglichen.
Erklärung zur Barrierefreiheit von abatjour-hummel
Haeufig gestellte fragen ueber der fusszeile vonabat jour hummel
Im Backend können Fragen und Antworten ganz einfach eingegeben und mit der jeweiligen Seite verbunden werden. Sollte es für eine Seite keine Fragen geben, wird der Bereich für häufig gestellte Fragen nicht angezeigt. Über Drag-and-Drop kann die Reihenfolge der Fragen problemlos geändert werden, was eine flexible Anpassung ermöglicht – ganz ohne technische Vorkenntnisse.
Laptop mockup der kontaktseite von abat jour hummel
Tablet mockup der startseite und bilder galerie von abat jour hummel
Mobile mockup der dienstleistungen von abat jour hummel

Technische Struktur

Von Grund auf neu

Die Website wurde auf einer veralteten WordPress-Installation betrieben. Sie wurde neu aufgesetzt, die Datenbank aktualisiert und PHP auf eine neuere Version umgestellt, um die Performance zu steigern.

Optimierungen und Anpassungen

  • PHP wurde auf eine aktuelle Version umgestellt, um die Sicherheit und Leistung zu verbessern.
  • Eine klare Sitemap wurde erstellt, ohne unnötigen Clutter.
  • Veranstaltungen und Inhalte werden regelmäßig aktualisiert, um die Seite aktuell zu halten.
Dienstleistungsseitein tablet ansicht von abat jour hummel
Die Seite für die Dienstleistungen ist sehr klar und strukturiert aufgebaut. Über Goodenbricks können Texte und Bilder ganz einfach ausgetauscht werden, ohne dass sich das Layout der Seite verändert. So bleibt die Seite stets flexibel und anpassbar, während das Design immer erhalten bleibt.

Plugins & Integrationen

Effizient und flexibel

  • Compress X sorgt dafür, dass Bilder wie JPG und PNG automatisch in WebP umgewandelt werden.
  • Happy Files Pro optimiert die Bildorganisation im WordPress-Dashboard.
  • MetaBox AIO ermöglicht die Erstellung und Verwaltung von Custom Fields für Events und FAQs.
  • Slim SEO hilft, Meta-Titles und -Descriptions zu verwalten und die Indexierung zu steuern.
  • BricksBuilder und Goodenbricks sorgen für flexibles Design und einfach editierbaren Content im Backend, ohne das Layout zu gefährden.
Ausstellungs und veranstaltungsseite von abat jour hummel
Für zukünftige Ausstellungen wurde ein spezieller Custom Post Type erstellt. Dadurch können neue Ausstellungen ganz einfach mit den relevanten Daten hinzugefügt werden, und die aktuellste Ausstellung erscheint immer automatisch ganz oben. Diese Lösung ermöglicht eine einfache Verwaltung und sorgt dafür, dass Besucher immer die neuesten Informationen zuerst sehen.

Projektrezension

Ich hatte ganz genaue Vorstellungen von meiner Website, und Timo hat es geschafft, diese perfekt umzusetzen. Die intensive Zusammenarbeit war immer angenehm und zielgerichtet – er hat sich viel Zeit für meine Ideen genommen. Dank seiner Unterstützung habe ich nun eine Website, die meine Produkte und meinen Service optimal präsentiert.

Marina Hummel Profil Image For Testimonails
Abat-Jour Hummel

Marina Hummel
Inhaberin & Geschäftsführerin

Timo Wessels

"Bereit, deine WordPress Webseite voranzubringen?"

Wenn dir mein Ansatz der neuen Seite gefällt, kontaktiere mich! Ich spezialisiere mich auf schnellere, barrierearme und leichter verwaltbare Webseiten. Ob Optimierung oder neues Projekt – ich freue mich darauf, mit dir zusammenzuarbeiten!
+49 176 22833482

oder schreibe mir eine E-Mail:
timo@dynamic-homepages.com

Timo wessels zeigt auf den kontakt bereich