Logo medicalweb

Fallstudie: Zahnarztpraxis Dr. med. Jörg Naumann

Meine eigene Praxis-Website existiert seit 2007. Ich arbeite jedoch ständig an der Optimierung – vor allem, um die Ladezeiten zu verringern, aber auch die mobile Navigation, die auf einem Smartphone einen Großteil des Bildschirms einnahm, zu ändern.

Screenshot Website Zahnarztpraxis Dr. med. Jörg Naumann auf verschiedenen Geräten
Screenshot frühere Version Website Zahnarztpraxis Dr. med. Jörg Naumann auf verschiedenen Geräten

Die Suche nach einer Website wird ganz wesentlich von deren Ladezeit beeinflusst. So wirkt sich beispielsweise eine hohe Performance positiv auf das Google-Ranking, also die Reihenfolge der bei der Benutzung der Suchmaschine ermittelten Ergebnisse, aus.

Eine Lösung bestand zunächst darin, eine Übersicht über einige Parameter zu verschaffen sowie verschiedenen Geschwindigkeitstests vorzunehmen; denn Bilder benötigen oft den meisten Speicherplatz – d. h., größere Bilddateien benötigen höhere Ladezeiten.

Screenshot Testauswertung alte Startseite. (Quelle: Zahnarztpraxis Dr. Naumann. Startseite, frühere Version. testmysite.withgoogle.com/intl/de-de. Zugegriffen 17.07.2018. Google und das Google-Logo sind eingetragene Marken von Google Inc., Verwendung mit Genehmigung)

Je größer eine Bilddatei, desto länger wird sie geladen.

Die Bilder wurden deshalb durch einen Online Bild-Optimierer (z. B. https://compressjpeg.com/de oder https://imagecompressor.com/de) bearbeitet, der sie komprimiert, jedoch das erforderliche Qualitätsniveau beibehält.

Blick auf die Rezeption

Eine weitere Aufgabe bestand darin, unterschiedliche Bildgrößen für unterschiedliche Ausgabegeräte zu generieren. Das dafür erforderliche Hochladen der Bilder erfolgte mit dem Tool "Responsive Image Breakpoint Generator" mit dem Ergebnis, dass die zu den eigenen Design-Anforderungen passende Bilddimensionen und sog. Breakpoints (Bruchstellen) erzeugt wurden.

Blick auf die Rezeption in verschieden großen Bilddimensionen (Quelle: "Responsive Image Breakpoint Generator". Zugegriffen 20.10.2018.

In der Regel erfolgt die Navigation auf großen Bildschirmen horizontal und vertikal. Wie jedoch geht man damit auf kleinen Bildschirmen um? Der amerikanische Webdesigner Brad Frost stellt dazu in seinem Artikel "responsive design patterns" verschiedene Lösungsansätze vor. In meinem Fall entschied ich mich für die sog. Footer-Navigation mit Anker. Sie besteht darin, dass man auf kleinen Bildschirmen von einem Menü-Link zu einem festen Punkt im Fußbereich der Webseite springt, wo sich die entsprechenden Menüpunkte befinden.

Screenshot Testauswertung Startseite. (Quelle: Zahnarztpraxis Dr. Naumann. Startseite. testmysite.withgoogle.com/intl/de-de. Zugegriffen 17.07.2018. Google und das Google-Logo sind eingetragene Marken von Google Inc., Verwendung mit Genehmigung)
Screenshot Website Zahnarztpraxis Dr. med. Jörg Naumann auf verschiedenen Geräten
Website Zahnarztpraxis Dr. Naumann anschauen