Onlineshop Redesign für Hautsinn

Analyse der Seite

• Unserer technische Analyse ergab eine sehr langsame Ladegeschwindigkeit
• ein paar Plugins waren nach Empfehlungen gut recherchierter Quellen nicht DSVGO konform.
• Hochgeladene Bilder waren zu groß und beschäftigten den Browser.

Welche Ansprüche hatten wir an den neuen Onlineshop?[ps2id id='anker-anspruch' target=''/]

Modernes Design

Den ursprünglichen Slider wollten wir durch eine schöne Standbild Animation ersetzen, die zwar etwas Ladezeit kostet, aber ein echter Hingucker ist.

Informationen schnell erhalten und Gesuchtes finden

Wichtig war auch das schnelle Auffinden von wichtigen Infos, zB. wo die Produkte noch außer im Onlineshop bezogen werden können. Auch soll klar vermittelt werden, welche Ideologie hinter der Produktion von Hautsinn-Produkten steht.
Eine einladende Vorschau auf den Onlineshop soll gegeben sein und mit einer Schnellansicht sollte man wichtige Infos zum Produkt erfahren können, ohne gleich auf eine Unterseite geschickt zu werden.
Eine einfache Produktsuche sollte es auch geben, gerade für jene Kunden, die beim Besuch des Onlineshops schon wissen, welches Produkt sie kaufen möchten.

Wiedererkennung

Wiederkehrende Kunden sollten nicht durch eine komplett neue Optik verwirrt werden. Ein komplett neuer Look könnte zu Vertrauensverlust führen, da ein neuer Look auch die Frage aufwirft, ob ich noch das bekomme, was es vorher gegeben hat? Oder, wurde Hautsinn von jemand anderen übernommen? Genau sowas sollte nicht passieren.

Welche Plugins nutzen wir für die Gestaltung und die technische Umsetzung des Webshops?[ps2id id='anker-plugins' target=''/]

WordPress Website Transfer Tool

Wir stehen immer wieder vor der Situation, WordPress Websites von einem Host zu einem anderen zu transferieren oder offline eine Website zu gestalten um sie danach online zu stellen. Für diese Problemstellung haben wir uns auf die Suche nach einem verlässlichen "Ein-Knopf-Druck" Plugin gemacht. Unsere Suche hat uns auf All-in-One WP Migration gebracht. Die Gratis Version lässt Websites bis 500 MB problemlos transferieren, ab 500 MB benötigt man eine Lizenz, die wir uns zugelegt haben, da wir immer wieder auch größere Websiten (bis zu 2 GB) kopieren oder verschieben.

MAMP

Mamp nützen wir immer dann, wenn wir auf unseren Rechnern einen Webserver simulieren möchten, wenn wir also eine Website für ein Redesign vorbereiten und herum tüfteln.

Neues Theme - Beaver Builder

Schon für unserer eigene Website sind wir auf Beaver Builder umgestiegen. Wir bleiben bei der Meinung: Beaver Builder ist ein unglaublich tolles Webdesign Werkzeug, dass auch noch flott und einfach zu bedienen ist. Man arbeitet direkt auf der Starseite und zieht sich die jeweils benötigten Module in sein Seitenlayout hinein. Man kann Farben, Abstände, Schriften ändern und auch Animationen der einzelnen Elemente machen.
Weiters gibt es zusätzliche Plugin-Sets, die das Layouten noch verfeinern. Aber dazu ein anderes Mal.

WooPack

Diese Plugin ist mit dem Beaver Builder verflochten, es fügt sich in das modulare Layout-System ein und man kann damit die Produktseiten nach seinen Vorstellungen anpassen, ganz ohne programmieren zu können. Ok. Alles ist nicht möglich, aber man kann sich ausserhalb der WooCommerce Standards bewegen und schon sieht der Shop etwas anders als andere WooCommerce Shops aus und doch ähnlich, damit man sich auch orientieren kann.

Bilddaten reduzieren

Um die Datenmenge der hochgeladenen Produktfotos  in einem Aufwaschen und in Zukunft zu reduzieren, haben wir das Plugin EWWW Image Optimizer eingesetzt. Damit kann man alle Bilder aus der Mediathek in einem Schritt verkleinern. Man kann auch Einstellungen tätigen um Bilder, die man in Zukunft hochlädt, gleich in verringerter Dateigröße zu optimieren, wenn man dafür keine Bildbearbeitungssoftware nützt.

Anpassen an die DSGVO (technische Unterstützung - wir sind keine Anwälte!)

Die Datenschutzgrundverordnung ist in aller Munde und macht EPUs echt Angst. Es drohen hohe Strafen bei Datenschutz Verletzungen. Was Websites betrifft muss das Bewusstsein geschaffen werden, dass man mit Kontaktformularen, Newsletter-Ameldungen, Social-Media Plugins, Google Tracking Codes und so manchen nützlichen Plugins personenbezogene Daten sammelt, manchmal aus Unwissenheit oder ohne klare Vorstellung, was man denn mit diesen Daten mal machen will.

Grundsätzlich ist einfach empfohlen zu hinterfragen, welche Daten ich sammle und welche Daten benötige ich wirklich um meine Aufträge zu erfüllen?

Natürlich muss man Kontaktdaten bei einer Produktbestellung aufnehmen und diese auch für die Buchhaltung aufheben. Doch sollte man darauf achten, wie lange diese Daten zB. in der Datenbank der eigenen Website gelagert werden.

Für Kontaktformulare sollten mit Check-Boxen versehen werden, die eine aktive Zustimmung seitens der User zur Datenverarbeitung verlangt.

Beim Tracking mit Google-Analytics sollte man nicht vergessen, die IP zu anonymisieren und einen Datenverarbeitungsvertrag mit Google abzuschließen.

Der Cookie-Hinweis Balken ist im Moment nicht verpflichtend, ich setze ihn trotzdem ein, denn ich denke im Moment ist es ganz gut, wenn man nach außen signalisiert, ich setze mich mit dem Thema Datenschutz auseinander.

Kleiner Tipp:

Um zu überprüfen welche Cookies auf der jeweiligen Website aktiv ist, gibt es ein AddOn für Google Chrome mit dem Namen Ghostery. Damit kann man schauen, was die eigene Seite für Cookies setzt. Wenn man diese wirklich braucht, muss man diese unbedingt in seinen Datenschutzbestimmungen erwähnen.

Website Geschwindigkeit erhöhen

Dazu nützen wir das Plugin W3 Total Cache, wobei wir hier unbedingt ein Backup im Vorfeld empfehlen, wir hatten schon mal das Problem - auf einer anderen Website - dass wir damit die Datenbank etwas, naja nennen wir es "verwirrt" haben.
Und unbedingt bei den "Generel Settings" den "Preview Mode" aktivieren, denn dann ist eben nicht alles "verwirrt"

Wir sind noch ein wenig vorsichtig mit den Einstellungen und lassen automatisches "Minify" nicht darüber laufen, da uns das schon die eine oder andere ungewünschte Layout-Veränderung brachte - zum Glück wieder revidierbar, durch die "Preview mode" Einstellung. Wir können im Moment keine Einstellungsempfehlungen geben, da wir selbst lieber die Seite beobachten bei jeder Einstellung.

Zum Schluss

Wir haben uns sehr über das Vertrauen von Roya gefreut, die uns komplett freie Hand ließ und sich darauf verlassen hat, dass wir das mit besten Gewissen und Gespür hinbekommen. Ihr Vertrauen schlug sich auch in den geringen Stunden, die wir brauchten, nieder, denn es gab einfach keine Diskussionen, wo was hin solle. Wirklich ein super Chance mit einem - wie wir alle finden - schönen Ergebnis. Hier zur Website von Hautsinn

Unsere Kundin war von uns soweit vorbereitet, dass sie selbst Layout-Änderungen machen kann und uns nicht für jeden kleinen Handgriff braucht. Aber zur Not stehen wir ihr zur Seite. Die beste Lösung für alle Beteiligten.

Hier noch ein Artikel über die Neugestaltung unserer eigenen Webseite