Ziel: Reparatur einer Webseite.
Zielgruppe: Webdesigner und die Webseiten-Inhaberin mit Friseur-Salon.
Motivation: Diese Webseite hatte ich ursprünglich 2014 neu erstellt. Vor zwei Jahren wollte ich diese Webseite erneuern mit einem frischeren modernen Aussehen und mit den neuesten Technologien ausstatten.
Doch hatte die Inhaberin der Webseite diesen Zuschlag schon jemanden gegeben. Das Ergebnis der neuen Webseite war leider verheerend.
- Kein Platz mehr im Google-Ranking
- Das Thema der Webseite verfehlt
- Webseite entsprach in keiner Weise der Benutzerfreundlichkeit
- Kunde und Produkt wurden zur Nebensache degradiert
Daraufhin hat die Inhaberin der Webseite mich um die Reparatur gebeten.
Inhaltsverzeichnis
Ziele der neuen Webseite
Eine Reparatur im Sinne von Ausbessern war nicht möglich, daher habe ich die Webseite komplett neu erstellt.
In erster Linie ging es darum im Google-Ranking zu erscheinen.
Zweitens sollte die Webseite für die Kundschaft des „Salon Silvia“ in Baden-Baden gestaltet werden.
Drittens sollte es eine individuelle Webseite werden.
Ergebnisse der neuen Webseite
Google-Suchbegriffe
Mit folgenden Suchbegriffen sollte „https://friseurin-silvia.de“ gefunden werden.
- naturfriseur baden
- naturfriseur baden-baden
- naturfriseurin baden
- naturfriseurin baden-baden
Mit allen diesen Begriffen ist die Webseite nun auf Platz 1 im Google-Ranking, Stand 15. August 2021.
Titelseite
Das neue statische Titelbild zeigt eine natürliche Frisur mit augenscheinlich sehr gesundem Haar. Also kein Gesicht oder andere ablenkende Elemente wie Slider oder Animationen, sondern lediglich das fertige „Produkt“ des Friseursalons.
Außerdem zeigt die Titelseite unter den Sofortkontakt-Möglichkeiten gleich die Öffnungszeiten.
Im Weiterem zeigt die Titelseite Auszüge der weiteren Seiten. Damit ist eine kundenfreundliche Navigation möglich, nämlich schnell und ohne Ablenkung.
Produkte darstellen
Die Produkte zur Haarbehandlung sind auf einer eigenen Seite „Produkte“ mit Vorder- und Rückansicht in so großem Format abgebildet, dass die Anwendung oder/und die Inhaltsstoffe gelesen werden können. Also größtmögliche Transparenz für die Kundschaft.
Preise
Die Preise für Leistungen anzugeben, ist die höchste Form von Vertrauen, dass die Kundschaft erwarten kann.
Individuelle Webseite
Folgende individuellen Elemente habe ich benutzt:
- Sofortkontakt per Telefon über mobile Geräte
- Sofortkontakt per E-Mail-Kontaktformular
- Sofortkontakte mit Hover-Effekt auf höheren Kontrast für sehbehinderte Personen
- Individuelle Seiten-Titelbilder, Fotos und selbst erstellte Grafiken
- Angepasstes CSS und HTML für individuelles Layout
- Eigene Logo-Farben mit Grün und Orange, als Grundfarben der Webseite
- Die vielen „Alleinstellungsmerkmale“ als eigene Seite
- Die Seiten „Haarpflege“, „Leistungsübersicht“, „Produkte“, „Team“, „Preise“ und „Alleinstellungsmerkmal“ sind mit eigenen Fotos und Dokumenten gefüllt
Besonderheiten
Die Webseite besitzt weitere folgende Eigenschaften.
- Ein weitgehendes spamsicheres Kontaktformular
- Ein Hintergrundbild, auch Wallpaper, das eine CSS-Zeichnung ist und somit wesentlich kleiner ist als jedes Grafikformat
- Die Produktwerbung „Powered by WordPress“ bleibt erhalten, ein Tribut an die Macher des CMS und außerdem scheint Google das WordPress zu lieben
- Nur wenige Plugins und damit eine hohe Sicherheit
- Nur das notwendigste Javascript, nämlich für das responsive Verhalten, ist integriert
- Keine Ablenkungen, wie animierte GIF-Bilder, Javascript-Slider oder nicht erwartetes Verhalten
Durch diese Eigenschaften ist die Webseite relativ schnell und sicher.
Bilder
Vorhandene Bilder wurden:
- Transformiert auf ein waagerechten und senkrechtes Gleichmaß
- Auf das wesentliche Zugeschnitten
- Teilweise freigestellt
- Aus mehreren Bildern zusammengesetzt, Collage
- Leicht farblich korrigiert
- Auf das kleinste und dennoch qualitativ ansprechendes Format abgespeichert, wie WEBP, PNG und JPG; JPEG XL wird leider von den heutigen Webbrowsern noch nicht vollumfänglich unterstützt
- Die Bilddarstellung wird von PHP 8.x für WordPress aufbereitet
Für Fotos und Pixel-Grafiken kam GIMP zum Einsatz und für die Vektor-Zeichnungen nutzte ich Inkscape.
Hier ein Beispiel einer eigenen skalierbaren Vektor-Grafik.
Wallpaper aus einer skalierbaren CSS-Zeichnung.
Das alte Logo sollte erhalten bleiben. Aber durch eine Überarbeitung wirkt es jetzt moderner. Ebenfalls eine Vektor-Grafik, damit ich es als Favicon, als Seiten-Logo, als Tab-Symbol und Lesezeichensymbol nutzen kann. Im Großformat erscheint es zusätzlich im Webseiten-Footer.
Das Titelbild mit dem Damen-Hinterkopf ist das einzige Fremdbild und von Pixabay.