P. Jentschura - Neue Kunden dank schneller, responsiver Website

Die Aufgabe

Die bisherige Website der Marke P. Jentschura war nicht für Mobilgeräte und Tablets geeignet und somit mussten Benutzer unschön auf der Seite umherscrollen und zoomen. Zudem waren Informationen oftmals unübersichtlich und schwer zu finden, da der Seitenumfang über die Jahre stark gewachsen ist.

Die optische Umsetzung entsprach auch nicht mehr dem aktuellen Corporate Design und benötigte somit eine Aktualisierung.

Es galt eine neue, moderne und responsive Website zu erstellen welche die Interaktion mit den Besuchern der Seite erhöhen sollte. Gleichzeitig musste die hohe Masse an qualitativen Informationen für alle Besucher schnell und einfach zu erfassen und auffindbar sein.

Weiterhin sollten automatisierte Prozesse eingeführt werden, da oft Anfragen zu Bezugsquellen für die Produkte oder Anfragen für Produktproben per E-Mail aufliefen und dies erhebliche Aufwände bei der Bearbeitung bedeutete.

Eine sehr hohe Priorität hatte auch die Einführung einer Messbarkeit für Aktionen. Somit kann ausgewertet werden, wie effektiv bestimmte Maßnahmen wie Anzeigen oder Kontaktanfragen waren.

Das eingesetzte CMS war in einer veralteten Version installiert und durch viele Anpassungen unübersichtlich und langsam.

Die Jentschura International GmbH

einer unserer langjährigen Kunden, beauftragte uns mit dem Relaunch für die Website ihrer Marke „P. Jentschura“.

Das Sortiment umfasst basische Körperpflegeprodukte, basenüberschüssige Lebensmittel und regenerative Sauerstoffanwendungen.

Die Jentschura International GmbH ist ein international agierendes Unternehmen mit Dependancen in der Schweiz und in Mexiko.

Entwicklung eines Konzepts für den Relaunch

Zum Start wurde ein über 40-seitiges Konzept erstellt, in welchem die Zielgruppe der Seite und die strategischen Ziele verankert sind.

Wir entwickelten eine neue optimierte Seitenstruktur und ein neues Navigationskonzept. Für jeden Seitentyp definierten wir, welche Inhalte und Felder vorkommen und welche besonderen Funktionen zum Einsatz kommen.

Das neue CMS ist aktuell, zukunftssicher und leicht zu aktualisieren. Es wurden viele spezielle Funktionen und eigene Felder im CMS eingebaut. Aus diesem Grund kommt unser Lieblings-CMS, welches auch von unseren Kunden geliebt wird, ProcessWire zum Einsatz.

Lesenswert dazu ist unser Artikel „Warum ProcessWire das beste CMS für Ihre Website ist“.

Die finale Website wird in mehreren Sprachen präsentiert, um den internationalen Kundenstamm zu bedienen und kann bei Bedarf um weitere Sprachen erweitert werden.

Entwicklung einer responsiven Darstellung

Bei der neu gelaunchten Website wurde eine responsive Darstellung ermöglicht, welche auf allen Geräten optimal dargestellt wird. Zusätzlich kommen responsive Bilder zum Einsatz, die für die jeweilige Auflösung berechnet werden, und nur geladen werden, wenn sie im sichtbaren Bereich der Website sind. Somit wird wertvolle Ladezeit gespart und die Besucher sehen die Inhalte schneller.

Für verschiedene Seiten wie zum Beispiel die Produktübersicht wurden mehrere Breakpoints gesetzt, so dass bei unterschiedlichen Auflösungen auch unterschiedliche Darstellungsweisen erscheinen.

Das Layout der Seite wurde größtenteils im Haus Jentschura erstellt und in enger Abstimmung mit uns optimiert. Die Gestaltung für kleine Auflösungen (Mobilgeräte) wurde größtenteils durch uns vorgenommen.

Besonderheiten

Einfache Seitengestaltung im CMS durch modulare Inhaltsblöcke (Sektionen)

Die Autoren bei P. Jentschura können auf diversen Seiten selbst beliebig viele Sektionen anlegen und dabei kreativ entscheiden, wie die Sektionen dargestellt werden.
Sie haben die Wahlmöglichkeit einer Sektion folgende Attribute zu geben:

Aktivitätsstream

Auf der Startseite gibt es einen Aktivitätsstream – er zeigt in chronologischer Reihenfolge, was auf der Website passiert ist, zum Beispiel wenn neue News, Rezepte, Produkte oder Termine hinzugefügt worden sind.

Voting für Rezepte

Um die Userinteraktion zu erhöhen und um einen Indikator zu bekommen, welche Rezepte bei der Community besonders beliebt sind, haben wir ein Voting für die Rezeptideen integriert.

Die Alternative zum Hamburger-Menü: Priority +

Das Priority + pattern bietet eine bessere Alternative zum Hamburger Menü.

Das Hamburger Menü ist in den meisten Fällen eine schlechte Darstellungsart für eine Navigation, da sie nicht intuitiv ist und zu schnell Menüpunkte verbirgt. Meistens wird unter einer bestimmten Auflösung einfach die Navigation ausgeblendet und statt dessen das Hamburger Icon angezeigt. Die Besucher der Website sehen somit also erst durch einen zusätzlichen Klick, welche Navigationsmöglichkeiten sie haben.

Weiterhin wird für das Hamburger Menü oft nur ein Icon mit drei horizontalen Strichen dargestellt (daher der Name Hamburger). Dies ist nicht wirklich intuitiv da Icons leicht missverstanden werden können. Daher ist es besser zusätzlich oder als Ersatz einen Begriff wie "Menü" oder "Mehr" zu schreiben.

Weitere Gründe die gegen den Einsatz eines Hamburger-Menüs sprechen, kann man zum Beispiel unter "The hamburger menu doesn’t work" nachlesen.

Daher entwickelten wir eine sogenannte Priority+ Navigation, welche immer die maximal möglich anzeigbaren Menüpunkte darstellt. Menüpunkte die nicht mehr in die Hauptnavigation passen, werden automatisch in ein Untermenü (dem Hamburger-Menü ähnlich) verschoben. Diese Navigation bietet die folgenden Vorteile:

Vollbild Live-Suche

Die Vollbild Live-Suche legt den Fokus komplett auf die Suchmaske und die Suchergebnisse, indem der Rest der Seite überlagert wird. Somit gelangen Seitenbesucher schnell zu den gewünschten Informationen.

Prozessautomatisierung

Wir integrierten diverse Techniken um Benutzereingaben automatisiert weiterzuverarbeiten. Durch diesen Schritt entfallen viele manuelle Tätigkeiten und somit werden Zeit und Kosten eingespart.

Produkte schnell und einfach sortieren und filtern

Produkte, News, Downloads, Rezepte und Themenwelten können gefiltert und/oder sortiert werden ohne die Seite neu zu laden. So ist eine schnelle Navigation und ein schnelles finden der gewünschten Informationen möglich.

Händlersuche. Wo sind die Produkte erhältlich?

Die Produkte von P. Jentschura sind bei über 5000 Händlern weltweit erhältlich. Um den Interessenten den Kauf zu erleichtern, wurde eine Karte eingebaut, welche alle Standorte gleichzeitig darstellt.

Der Interessent kann seinen Standort automatisch bestimmen lassen, oder eine Adresse, eine Stadt oder ein Land eingeben und erhält automatisch die Adressen und Standpunkte der Händler die in der Nähe liegen.

Durch Klick auf den "Route" Link kann er sich eine Wegbeschreibung bei Google Maps ausgeben lassen.

Schnelle Auslieferung der Website: Cachen der Inhalte

Damit bei einem erneutem Aufruf der Website Bilder, CSS und JavaScripts nicht jedes Mal neu abgerufen werden müssen, wurde eine Zwischenspeicherung (Caching) eingerichtet.

Das Caching des Browsers liefert dann die Datei aus dem lokalen Speicher, statt sie über das Internet erneut abzurufen.

Zusätzlich werden statische Seiten gespeichert. Dadurch müssen Datenbankabfragen nicht bei jedem Aufruf der Seite erfolgen, was enorme Geschwindigkeitsvorteile mit sich bringt.

Anzeigenkampagnen mit Kurz-URLs

Um die Effektivität einer Anzeige in Printmedien zu messen, wurden in den Printanzeigen sogenannte Kurz-URLs veröffentlicht, nach dem Muster https://www.p-jentschura.com/anzeige1.

Wenn Leser der Anzeige diese Internetadresse eingeben, können Sie zum Beispiel Produktproben erhalten oder es könnten Vergünstigungen für einen Produktkauf möglich sein.

Zusätzlich ermöglicht diese Technik eine Auswertung der Zugriffszahlen, sodass die Effektivität einer Anzeige besser kontrolliert werden kann.

Automatische Verlinkung von Produktnamen

Produktnamen werden automatisch vom CMS verlinkt und brauchen somit nicht von Hand verlinkt werden. Dies spart eine Menge Zeit und Arbeit.

Unterschiedliche Bildausschnitte für Übersichtsseiten und Detailseiten

Eine Anforderung war es, dass für die News-Übersichtsseite ein eigener Bildausschnitt gewählt werden kann.
Hierzu haben wir eine Möglichkeit geschaffen, dass unser Kunde selbst einen Bildausschnitt für diese Bilder wählen kann. Dieses Feature wurde später in der ProcessWire Core eingebaut, sodass wir auf die native Art von umsteigen konnten.

Eingesetzte Werkzeuge

Folgende Tools wurden zur Umsetzung eingesetzt

Weitere Referenzen: