Die erste eigene Webseite mit WordPress bauen

Wie ich die ProXLab-Webseite gebaut habe.

Als wissenschaftlicher Mitarbeiter am ProXLab gehörte es zu meinen Hauptaufgaben das neue Webportal des Projektes mitzugestalten. Dadurch hatte ich die Möglichkeit meine erste Webseite mit WordPress zu bauen und konnte ein paar Erfahrungen sammeln. Was ich dabei gelernt habe, möchte ich jetzt gerne in diesem kurzen Post mit euch teilen. Allerdings bin ich kein Profi und für jedes Feedback in den Kommentaren dankbar. 😊 Worauf ich nicht eingehen werde, ist das Hosting und Aufsetzen der WordPress-Seite. Dazu gibt es aber ausreichend Tutorials im Internet. 😉Hier also ein paar meiner Learnings.

Kenne deine Ziele.

Bevor du mit der konzeptionellen Arbeit beginnst, solltest du dir über deine Ziele bewusst sein und diese in geeigneter Form dokumentieren. Sonst kann es passieren, dass man sich schnell in Details oder Features verliert, die sich später ggf. als wertlos herausstellen. Da du deine Webseite wahrscheinlich nicht nur für dich selbst erstellst, gibt es also immer mindestens eine Zielgruppe, an der sich eben diese Ziele orientieren sollten. Je konkreter diese formuliert sind, desto nützlicher sind sie später bei der Erstellung der Webseite. Ein Hilfsmittel dafür die Anforderungen aus der Sicht der späteren NutzerInnen zu betrachten sind beispielsweise User-Stories. Diese können auch als Anforderungen gelesen und Stück für Stück abgearbeitet werden. Das hilft sehr dabei auf dem richtigen Weg zu bleiben und nicht an den Kundenwünschen „vorbeizudesignen“. Allerdings kann man sich da auch nur sicher sein, solange diese auch mal mit echten KundInnen validiert wurden. Also nicht scheuen auch bei einem groben Entwurf mal Feedback einzuholen.

Wähle das richtige Theme.

In WordPress gibt es über 5.000 verschiedene Themes, also vorgefertigte Designs für deine Webseite. Dabei ändern diese nicht nur das optische Design der Webseite, sondern sind oftmals auch mit sehr hilfreichen Funktionserweiterungen ausgestattet. Tatsächlich würde ich hier sogar den Hauptfokus legen, denn Farben, Schriften und so weiter kannst du später sowieso wieder verändern. Beispielsweise bringen einige gleich einen Header- und Footerbuilder mit, der es deutlich entspannter macht sich einen schönen Header oder Footer zusammen zu klicken. Da sich die Themes in ihren Ausstattungen stark unterscheiden, empfehle ich dir, diese genauer anzuschauen und solange du noch nicht viel gebaut hast, einfach mal ein paar auszuprobieren. Ein späterer Wechsel ist nämlich nicht ohne weiteres möglich und ggf. mit einigen Kopfschmerzen verbunden.

Plug-Ins sind echt wertvoll.

Ebenso können die Funktionalitäten von WordPress durch zahlreiche Plug-Ins erweitert werden. Dabei ist es ganz davon abhängig was du vor hast. Das ProXLab bietet beispielsweise auch Veranstaltungen an. Um diese zu managen und leicht auf der Seite zu integrieren habe ich das Plug-In „Modern Events Calendar Lite“ genutzt. Die meisten Plug-Ins finanzieren sich durch ein Freemium-Modell. Das bedeutet den vollen Funktionsumfang bekommt man nur für etwas Geld, allerdings tun es die kostenlosen Varianten in der Regel auch. Weitere Plug-Ins, die wahrscheinlich für die meisten Webseiten interessant sind:

Elementor: Ersetzt den klassischen Gutenberg-Editor von WordPress durch einen mit deutlich mehr Funktionen – auch schon in der kostenfreien Version. Für ~50€ pro Jahr gibt es dann den vollen Funktionsumfang.
WP Forms: Bietet die Möglichkeit per Drag & Drop Kontaktformulare zu erstellen und diese einfach auf deiner Seite zu integrieren. Die ausgefüllten Formulare kannst du dir dann bspw. auf deine E-Mail schicken lassen.
Yoast SEO: Gibt wertvolle Tipps, um deine Webseite besser für Suchmaschinen lesbar und dadurch bei entsprechenden Suchwörtern weiter oben auf der Ergebnisseite anzuzeigen.
Matomo Analytics: Lässt dich DSGVO-Konform Nutzerdaten erfassen. Diese kannst du dann nutzen, um herauszufinden welche Seiten deine NutzerInnen besonders mögen oder welche Inhalte doch nicht so relevant scheinen.

Für jede dieser Plug-Ins gibt es auch Alternativen. Schau dich einfach mal um, und entscheide dann was am besten zu deinem Vorhaben passt.

Vorsehen ist besser als Nachsehen – Responsive Design.

Das habe ich auf die harte Tour gelernt. Wenn du möchtest, dass deine Webseite nicht nur auf einem Desktop-PC sondern auch auf Handys oder Tablets wunderschön aussieht, solltest du ein paar Dinge am besten von Beginn an beachten.

Verwende keine absoluten Einheiten (Pixel) als Größen oder Abstandsmaße, es sei denn die Größe des Elements soll sich unabhängig vom Bildschirm niemals ändern. Nutze stattdessen em, rem, % (Prozent), vw (viewport width) oder vh (viewport height). Schau dir zu den Unterschieden am besten mal folgenden Artikel an: https://publishing.blog/pixel-em-rem-vw-vh-was-ist-der-unterschied/
Im Editor (auch bei Elementor) hast du die Möglichkeit, dir dein Ergebnis auf verschiedenen Endgeräten bzw. Bildschirmgrößen simulieren zu lassen
Zumindest mit Elementor kannst du einzelne Elemente nur für bestimmte Endgeräte sichtbar bzw. unsichtbar machen. So kannst du bspw. ein Element, dass dir dein Design auf dem Handy kaputt macht ausblenden und ggf. duplizieren, anpassen und dann nur auf dem Handy sichtbar machen.

Bonus: Hat nicht viel mit Responsive Design zutun, allerdings kannst du auch früh anfangen Templates zu nutzen, um Blöcke und Container die du wahrscheinlich wiederholt nutzen möchtest, abzuspeichern. Das spart erstens eine Menge Zeit und stellt zweitens sicher, dass deine Seiten untereinander auch ähnlich aussehen. Spätestens wenn du merkst, dass du gerade ein Element das zweite Mal nachbaust, speichere es dir direkt als Template ab. 😊

Gute Ressourcen für Web-Design.

Abschließend möchte ich dir noch ein paar Ressourcen mit auf den Weg geben, die mir sehr geholfen haben.

Google Fonts: Eine große Datenbank an verschiedensten Schriftarten.
Figma: Zum Erstellen von Wireframes.
Coolors: Kann dir dabei helfen coole Farbkombinationen samt Farbcodes für dein Design zu entdecken.
Placeholder: Falls du mal einen Platzhalter für ein Bild brauchst.
Pixabay: Hier findest du lizenzfreie (und kostenpflichtige) Fotos, Musik, Videos und mehr.
Unsplash: Für lizenzfreie Bilder.
Thenounproject: Finde Frei nutzbare Icons und Bilder.
Flaticon: Finde Icons und Sticker.
Lorem Ipsum: Generiere dir einfach Beispieltext.

Mein Vorschlag für einen Fahrplan.

Zielgruppen definieren und Anforderungen erheben
Ein geeignetes Theme auswählen, dass dich anspricht
Besorge dir die Plug-Ins, von denen du ggf. jetzt schon weißt, dass du sie nutzen möchtest bzw. schaue dich einfach mal um
Eine Seitenstruktur konzipieren und in WordPress umsetzen, indem du einfach erstmal leere Seiten mit Überschriften erstellst und über den Reiter Design à Menüs diese dann in Haupt- und Unterseiten gliederst
Seiten und Unterseiten gerne auch erstmal auf Papier aufmalen und die Inhalte zuordnen
Anfangen die Seiten und Unterseiten in WordPress zu bauen, dabei vom groben ins Feine. Erstmal mit Blöcken und Platzhaltertext (Lorem Ipsum) das Konzept aufbauen und wirken lassen.
Hier kannst du auch ggf. schonmal erste NutzerInnen oder Freunde befragen was sie von dem Aufbau halten, bevor du in die Details springst
Wenn du mit dem Konzept zufrieden bist, kannst du die Seite mit Leben, also echten Texten füllen und dich in die Details vertiefen. Vergiss nicht Templates zu nutzen, um sich wiederholende Elemente auf anderen Seiten schnell duplizieren zu können.
Wenn deine Webseite fertig ist, mach dir ein schönes Getränk auf und erzähle allen von deiner Schöpfung. 😉