Ohne Ziel ist jeder Weg der richtige!
Wie vorgehen, um die gesteckten Ziele mit der eigenen Website zu verwirklichen? Welche technischen Restriktionen sind zu beachten? Wie wird das eigene Corporate Image am besten im Internet, von Website bis zu Social Media Kanälen, umgesetzt?
Grundlagen
In einem ersten Schritt erstelle ich Ihnen ein Webkonzept, denn die Anforderungen an eine Website können ganz unterschiedlich sein: Präsentieren Sie sich, Ihre Leistungen bzw. Ihr Unternehmen oder steht der Verkauf, d. h. E-Commerce bzw. ein Shop im Vordergrund?
Neben Gewinnung von Neukunden im Falle eines Dienstleisters kann z. B. für eine Arztpraxis die Entlastung im Arbeitsalltag durch die Website ein Ziel sein. Eine Checkliste für den Start, mit deren Hilfe Sie ein wenig mehr über sich erfahren werden, finden Sie hier.
Gliederung
Welches sind die Kerninhalte, die Sie auf der Website vermitteln möchten? Wie werden wir diese so aufbereiten, dass Besucher:innen sich intuitiv zurechtfinden und mit maximal zwei bis drei Klicks zu den gewünschten Inhalten kommen?
In aller Regel bietet sich für die Navigation eine Kopfzeile im Header oder eine Fläche links mit den wichtigsten Punkten an (z. B. Leistungen, Portfolio, Referenzen etc.). In der Fußzeile im Footer werden beispielsweise Lage und Anfahrt, Suche, Inhaltsverzeichnis (die sogenannte Sitemap) sowie Impressum und die für jede Website obligatorischen Hinweise zum Datenschutz sowie ggf. zur Verwendung von Cookies untergebracht. Dabei ist unbedingt zu beachten, dass die letzten drei Punkte immer sichtbar und zugänglich sein müssen und nicht durch Banner o. ä. verdeckt sein dürfen.
Umsetzung
Auf der technischen Seite bildet WordPress mit nahezu überwiegendem deutschsprachigem Administrationsbereich die Basis als Redaktions- bzw. Content-Management-System. Die Mediathek (umfasst alle Bilder und Medien); Beiträge (Kategorien und Artikel in den einzelnen Kategorien z. B. Werk, Vita, News etc.); Seiten (alle statischen Seiten u. a. Kontakt, Impressum und Datenschutz). Strikte Trennung von Inhalten (Texte sowie Bilder) und Navigation (Datenbank) vom Design (Templates), dadurch schnelle Anpassungen (zusätzliche Inhalte oder Seiten, die ggf. auch nur vorübergehend entfallen).
Der Aufbau sollte übersichtlich und klar strukturiert sein, ohne technische Spielereien um ihrer selbst willen. Navigation(-sleisten) u. ä. sind funktional, aber halten sich zurück. Zwecks Lesbarkeit am Bildschirm empfehle ich serifenlose Schriften für Texte, optional mit Serifen für Überschriften, ggf. Bildunterschriften, technischen Angaben oder Informationen (z. B. Roboto, Assistant oder vergleichbar). Ein responsives Layout, d. h. anpassbar an jedes beliebige Endgerät (Mobiltelefon, Tablet, Laptop, Desktop, Kernbereich 280 bis 1920 Pixel) ist für mich eine Selbstverständlichkeit.
Im Zentrum steht die Benutzerfreundlichkeit, egal wie nüchtern oder verspielt der Webauftritt wird. Jede Seite erhält im Body Tag die Klasse no-js, die durch js ersetzt wird, falls JavaScript nutzerseitig aktiviert ist, ansonsten werden Inhalte über no-js deaktiviert bzw. nicht angezeigt. Dies gewährleistet die volle Funktionsfähigkeit der Site, jedoch ggf. eine optisch leicht andere Darstellung. Optional die Weiterempfehlung auf Social Media, mit der datenschutzkonformen Shariff Lösung sowie der Ausdruck der Seiten über Browser ohne den Druck störender Element, mit Zuweisung eines eignen Stylesheets.
Die eigentliche Abwicklung des Projekts umfasst die Programmierung eines eigenen Themes für WordPress bzw. individueller Templates offline auf einer lokalen Entwicklungsumgebung. Erstellung aller Seiten und Beiträge auf Basis der bereitgestellten Texte und Bilder incl. automatisierter Bildoptimierung (umfangreichere, manuelle Bearbeitungen gerne gegen Aufpreis auf Anfrage). Permanente Einbindung des Auftragsgebers, Fortschrittskontrolle und Freigabe ggf. über Screenshots bzw. Projektwebsite erreichbar unter einer Domain aus meinem Portfolio d. h. ggf. Transfer auf einen meinen Serverplätze (passwortgeschützt) bis Fertigstellung und Freigabe durch Auftraggeber:in.
Zum Abschluss Änderung der Pfade etc. und Transfer auf einen passenden vorhandenen Serverplatz: Webspace und Datenbank erstellen, WordPress einrichten, SFTP Zugang angelegten; SSL Zertifikat der Domain zuweisen und ggf. SSL erzwingen (permanente Umleitung 301) sowie PHP (min. Version 8) einstellen; Datenbank von Projektseite einspielen; alle Daten per File Transfer Protocol aufspielen, WordPress an Serverumgebung bzw. -pfade anpassen; Test Website und ggf. Formulare. Eintrag in Google Search Console und Bing Webmaster Tools, um die Indizierung zu beschleunigen.
Optimierung
Von Beginn an lege ich Wert auf Optimierung der Website auch im Hinblick auf die Auswahl passenderer bzw. nötiger Ergänzungen für eine erfolgreiche, schnelle und sichere Website. Für Suchmaschinenoptimierung (SEO) erfolgt standardmäßig die Installation des Plugin Yoast Seo in der kostenfreien Version sowie dessen Einrichtung. Dieses hat sich im Alltag bewährt und unterstützt Sie mittels Ampelsystem und Vorschau bei der Optimierung.
Die Ladegeschwindigkeit zählt schon seit geraumer Zeit zu den wichtigsten Stellschrauben. Nicht nur Besucher, sondern auch Suchmaschinen ziehen die Zeit, die beim Aufruf einer Seite ins Land streicht, als wichtiges Bewertungskriterium heran. Ein schlanker und komprimierter Code sowie der Einsatz von Caching-Mechanismen zählen ebenso zu den erprobten Lösungsansätzen für eine schnelle Webpräsenz wie die Verwendung komprimierter Bilder.
Daher sollten Bilder nicht nur in passendem Format (Höhe x Breite) passend zum Endgerät des Nutzers bereitgestellt werden, sondern auch neuere Dateiformate berücksichtigt werden. Ein einmalig zu installierendes Tool liefert automatisch generierte WebP-Bilder an Browser aus, die WebP unterstützen, ältere Browser erhalten die gewohnten Formate sowie natives Lazy Loading von Bildern, sofern möglich.
Weitere Maßnahmen zur Beschleunigung des Seitenaufbaus sind u. a. asynchrones Laden von Skripten und Schriften wann immer möglich; Minifizierung des Quelltextes, der Stylesheets und Javascripten; Vorladen von Schriften; Laden von Skripten und Styles (z. B. Karten, Formulare etc.) nur dann, wenn diese benötigt werden, ansonsten werden diese nicht geladen; Caching um Datenbankabfragen zu reduzieren. Die im Cache vorgehaltenen Seiten aktualisieren sich automatisch z. B. nach dreißig Tagen oder bei einer Änderung eines Beitrags bzw. eine Seite. Ressourcen, die das erstmalige Rendern einer Seite blockieren, werden in der Reihenfolge des Ladens über H2PushResource nach hinten verschoben.
Erstellung
Programmierung eines individuellen, maßgeschneiderten Layout, dem Template bzw. Theme für WordPress statt von der Stange auf Basis von underscores.me bzw. getbootstrap.com mit PHP, SASS, CSS und JavaScript. Einrichtung von Datenbank und WordPress.
Javascript sowie alle Schriften werden auf dem Server (ggf. innerhalb des Themes gehostet) und nicht von dritter Seite bezogen, ebenso falls erforderlich Fontawsome für Symbole. Anlegen von Kategorien und Seiten incl. Suchmaschinenoptimierung durch Einfügen von Zusammenfassung und Snippets. Bereitstellung auf o.g. Projektserver bzw. Veröffentlichung. Optional: incl. Hosting d. h. Domainübernahme, Konnektierung im Nameserver, Web- und Maileinrichtung.
Erweiterungen
Je weniger Plugins, desto besser, daher beschränke ich mich immer auf das Mindestmaß, das ganz individuell für die Website benötigt wird. Generell werden nur Dinge geladen, die auch gebraucht werden, d. h. z. B. Scripten und Styles für Formulare, Tabellen, Bildergalerien bzw. Slideshows u. ä. kommen nur zum Einsatz, wenn man auf der passenden Seite ist.
Zum Betrieb der Website in aller Regel erforderlich sind Contactform 7 und Honeypot für Contactform 7 für die zentrale Erstellung und Bereitstellung der Kontaktformulare. Bildergalerie(n) je nach gewünschten Funktionalitäten, d. h. beispielsweise abhängig ob als Slideshow, als einfache Galerie oder unter Verwendung von Masonry und Photoswipe als Lightbox. Optionale Plugins und Erweiterungen je nach Anforderungen beispielsweise TablePress zur plattformübergreifenden Darstellung von sortierbaren, komplexen Tabellen oder ein Kalender für Veranstaltungen und Events.
Für die Wartung der Website setze ich gerne BackupWP zum manuellen Erstellen eines Backups bestehend aus Datenbank, Plugins und Theme bzw. Layout ein. Optimize Database after Deleting Revisions zum Bereinigen, sodass sich die Datenbank nicht übermäßig aufbläht. Ddadurch ist diese gleichzeitig schneller.
Zur Optimierung der Website bewährt hat sich Hyper Cache zum Caching der Webseiten, Reduzierung der Abfragen an die Datenbank und Verringerung der Ladezeiten. WebP Express übernimmt die Umwandlung und Bereitstellung von Bildern in neueren Bildformaten, sodass auch die Ladezeit verbessert wird. Yoast SEO dient beim Einstellen und Überarbeiten der Optimierung für Suchmaschinen.
Zwecks Analyse der Website ist für mich Statify als sehr kompakte, anwendungsfreundliche Übersicht über die Anzahl der Seitenaufrufe ohne Cookies erste Wahl. Möchte man es komplexer, so kann man bei entsprechender Konfiguration und lokalem Hosting Matomo datenschutzkonform einsetzen.
Weiterentwicklung
Die inhaltliche und technische Optimierung sowie regelmäßige Wartung und Weiterentwicklung einer Website, egal ob unter WordPress oder nicht, gehören zu den wichtigen Faktoren einer sicheren, langfristig erfolgreichen Homepage. Auch hierfür biete ich Ihnen eine Checkliste sowie meine Unterstützung, wenn Sie diese benötigen statt zu starren Zeiten. Auf Wunsch auch am Wochenende oder außerhalb von Öffnungs- und Sprechzeiten.
Sie möchten mehr erfahren oder Ihnen ist das alles zu viel und Sie benötigen jemanden, der einen partnerschaftlichen Umgang ohne Tech-Sprech pflegt und Ihnen all dies abnimmt? Dann sind Sie bei mir genau richtig!
Kostenfreie Erstberatung gibt es hier: