Inhalt
In diesem Artikel wollen wir Dir zeigen, wie unsere Website eigentlich entstanden ist. Vom Konzept über die Entwicklung bis hin zum Hosting. Wir nehmen Dich mal „Behind the scenes“ und zeigen Dir, was dabei alles so passiert.
Website Konzept und Wireframes
Zunächst steht bei jeder neuen Entwicklung einer Website oder auch bei einem Relaunch das Konzept als Grundlage. Wir überlegen uns also, was sind eigentlich die Ziele, wer soll angesprochen werden und welchen Inhalt wollen wir daher auf die Website bringen.
Das Ganze startet mit einer Sitemap, einer strukturierten und im besten Fall visuellen Übersicht der gesamten Site.
Hierbei ist der Ansatz, dass die Struktur dem Inhalt folgt. Heißt, wir überlegen uns zunächst, was inhaltlich auf die Website soll und draus ergibt sich der Aufbau. Das ist zuerst immer ein erster schlechter Entwurf, der überarbeitet werden muss. Solange bis Inhalt als auch die Struktur der Website ein Level erreicht haben, welches zur Erreichung der Websiteziele führen sollte.
Zu einem späteren Zeitpunkt können sich hier natürlich immer noch Änderungen ergeben. Das ist aber nicht schlimm und in der Regel auch nicht zu vermeiden. Es ist fast nicht möglich, alles auf Anhieb perfekt zu planen.
Wireframes und Prototype
Nachdem die Struktur und damit auch der Inhalt stehen, geht es weiter mit dem Teil, den viele unter „Webdesign“ kennen. Mit verschiedenen Tools, darunter Figma, werden Wireframes erstellt. Das sind grafische Vorlagen, die zunächst recht oberflächlich auch auf dem Papier gemacht werden können und später dann immer detaillierter werden.
Im folgenden Bild siehst Du einen Ausschnitt aus den High-Fidelity Wireframes, also den sehr detaillierten Vorlagen, unserer neuen Website
Aus diesen Vorlagen kann nun ein sogenannter Prototype erstellt werden. Dieser dient dann zur Visualisierung von Interaktionen. Also Website Klicks, Formular Eintragungen oder allgemeinen Animationen.
Ein Prototyp ist vor allem bei größeren Projekten wichtig, um schon zu diesem Zeitpunkt das Verhalten von Nutzern und Nutzerinnen auf der Website zu testen oder dynamische Abläufe dazustellen.
Entwicklungsphase
Struktur steht, Vorlage steht, dass heißt, wir können mit der Entwicklung beginnen. Das ganze passiert bei uns parallel, lokal auf dem Rechner, als auch schon online bei unserem Hoster Mittwald.
Wir nutzen die Möglichkeit einer Entwicklungsumgebung, heißt wir installieren dort bereits unser CMS WordPress und konfigurieren alles direkt online.
Als Basis Theme nutzen wir dafür in der Regel GeneratePress, welches sehr leichtgewichtig und super verständlich aufgebaut ist. Der ganze Code ist verständlich und die dazugehörige Dokumentation der Entwickler sehr ausführlich. Damit können wir arbeiten und entsprechend individuell eingreifen, wenn wir etwas anpassen möchten.
Wie in jedem unserer Projekte, die WordPress nutzen, arbeiten wir aber nicht direkt mit dem Theme, sondern setzen ein sogenanntes Child-Theme ein. Darin passiert alles, was wir anpassen und individuell entwickeln.
Lokale Entwicklung
Um lokal und vor allem zusammenzuarbeiten, nutzen wir Docker, Git und GitHub. Mit Hilfe von Docker ist es uns möglich, jederzeit innerhalb von einigen Minuten eine exakte Kopie der Website zu erstellen, um daran lokal zu arbeiten.
Git und GitHub setzen wir ein, um sowohl zusammen am Code zu entwickeln, als auch letztendlich die Website nach Änderungen, automatisiert zu aktualisieren.
Sobald wir also etwas ändern, können wir es lokal testen und wenige Minuten später schon online sehen. Das funktioniert sowohl während der Entwicklung als auch später, wenn Änderungen an einer Live Website gemacht werden müssen.
Inhalte erstellen – der etwas andere Weg
Wir nutzen für unsere Website und den Großteil der Inhalte nicht wie üblich den internen WordPress Editor „Gutenberg“. Wir schreiben unsere Inhalte direkt per HTML bzw. PHP. Das ist für uns einfacher, aber nicht der übliche Weg.
Durch die vielfältigen Möglichkeiten die WordPress mitbringt, können wir für jeder unserer Webseiten ein eigenständige PHP Datei anlegen, indem wir unsere Inhalte erstellen.
In der Datenbank wird lediglich noch die entsprechende Seite benötigt, um darüber dann die Inhalte anzuzeigen. Konkret heißt das, dass wir eine Datei „corporate-website.php“ haben und innerhalb von WordPress eine entsprechende Seite mit dem Slug „corporate-website“.
Vorteile von diesem Vorgehen, ist eine bessere Kontrolle über das Design, da wir nicht innerhalb des Gutenberg Editors arbeiten müssen. Wir können sogenannte Template Parts, also wiederkehrende Elemente, gezielt und individuell einsetzen. Hinzu kommt, dass wir ein klein wenig an Website Performance, also Ladegeschwindigkeit, gewinnen, da wir keine extra Datenbankabfragen brauchen, um solche Webseiten anzuzeigen.
Custom Post Types und Custom Fields
Mit Hilfe von Custom Post Types (CPTs) und Custom Fields (CFs) sind der WordPress Entwicklung eigentlich kaum Grenzen gesetzt. Wir setzen CPTs zum Beispiel für unsere Case Studies ein.
Individuell erstellt und angepasst an unsere Anforderungen haben wir die Möglichkeit unsere Case Studies anzulegen. Dabei nutzen wir die internen WordPress Funktionen, wie Thumbnail und Textauszug. Darüber hinaus aber auch CFs für die Farbauswahl des Thumbnail Hintergrunds oder für den Link direkt zur Website, welche vorgestellt wird.
Hosting und weitere Tools
Mittwald als Hoster
Wie schon zuvor angesprochen, nutzen wir Mittwald als unseren Hoster. Dieser bietet uns nicht nur eine extrem gute Performance, sondern auch zahlreiche Möglichkeiten, die uns das Leben deutlich erleichtern.
So können wir über individuell eingerichtete Zugänge unser Deployment, also die Auslieferung unserer Website nach Änderungen, ganz einfach mit Hilfe von GitHub Actions realisieren.
Darüber hinaus haben wir jederzeit die Möglichkeit eine Staging Umgebung einzurichten, also eine 1:1 Onlinekopie der aktuellen Website, um Tests durchzuführen.
Je nach monatlichem Website Traffic, also der Anzahl der Aufrufe, können wir unseren gebuchten Tarif bei Mittwald jederzeit erhöhen oder senken. Wir bekommen somit immer die bestmögliche Performance.
Nebenbei können wir ruhig schlafen, da Mittwald ein tägliches Update der Website vornimmt und einen absolut empfehlenswerten Support bietet, falls dann doch mal etwas nicht ganz rund laufen sollte.
eRecht24
Unser Impressum sowie die Datenschutzerklärung haben wir über eRecht24 erstellt. Hier sind wir nicht nur selbst Nutzer, sondern können diesen Service auch für unsere Kunden einsetzen.
Der Vorteil ist die Aktualität der Rechtstexte und somit die Sicherheit, dass hier alles korrekt angegeben wird. Mit Hilfe von Textgeneratoren und einer Schnittstelle zur Website kann hier alles erstellt werden und ggf. sehr schnell auch geändert werden.
Zudem bietet eRecht24 zusammen mit Usercentrics ein Cookie Consent Tool, welches wir ebenfalls einsetzen und Du beim ersten Aufruf unserer Website auch gesehen haben solltest.
SEO mit RankMath und Search Console
Für die SEO spezifischen Einstellungen und alles, was mit Suchmaschinenoptimierung allgemein zu tun hat, setzen wir das WordPress Plugin RankMath ein, sowie ein Must-Use Tool von Google, die Search Console.
Beide Tools für sich, sind ein eigener Artikel wert, daher nur ganz kurz ein Überblick.
Mit Hilfe von RankMath lassen sich recht unkompliziert alle technischen SEO Maßnahmen für die gesamte Website einrichten. Dazu gehören zum Beispiel Meta Tags, aber auch ggf. Weiterleitungen von Webseiten, falls nötig.
Darüber hinaus lassen sich für alle Seiten individuell SEO Anpassungen vornehmen und optimieren. Hierbei unterstützt RankMath mit Tipps und Vorschlägen. Diesen sollten aber nicht immer einfach gefolgt werden. SEO Wissen ist hier auf jeden Fall noch nötig.
Die Search Console sollte generell für jede Website eingerichtet werden. Hier kann unter anderem ausgewertet werden, zu welchen Suchbegriffen Deine Website eigentlich in den Suchergebnissen ausgespielt wurde und vieles mehr.
Sicherheit!
Eine Schwachstelle bei WordPress ist, wie auch bei allen anderen Softwaretools bei denen man sich anmelden kann, der Login. Und hier ist per se nicht der Login das Problem, sondern meist ein schlechtes Passwort.
Wir lösen das Problem, indem wir zunächst mal ein starkes Passwort nutzen und zusätzlich eine Zwei-Faktor-Authentifizierung mit Hilfe des Login Security Plugins von Wordfence eingerichtet haben.
Wie Du das bei Dir auch nutzen kannst, erfährst Du in diesem Artikel von uns.
Das war im Schnelldurchgang ein Überblick, wie wir unsere neue Website entwickelt haben und welche Tools wir so einsetzen. Wenn du Fragen dazu hast, lasse gerne einen Kommentar da oder schreib uns per Mail.
