Webseite akutmag.ch

von

Tolle Texte, tolle Menschen, tolle Videos und tolle Bilder. All das braucht es, um Geschichten zu erzählen. Doch ein oft vergessener Punkt, um die Inhalte auch wirklich zur Geltung zu bringen, ist das Gefäss, in dem sie ausgespielt werden. Im Falle des Onlinemagazins www.akutmag.ch ist es eine Webseite.

Genau um diese Webseite habe ich mich in diesem Semester gekümmert.

Die grössten Learnings aus meiner Arbeit an einer grossen Webseite mit viel redaktionellem Inhalt habe ich hier festgehalten.

1 – Backend-Planung ist alles. Auch ich bin ein Mensch, der, falls er eine Idee hat, gerne einfach drauflosschiesst. Doch bei einer Webseite dieser Grösse darf man das eben nicht. Zuerst muss mit Papier und Stift gearbeitet und die Struktur des Backends sauber geplant werden.

2 – Sicherheit nicht vergessen. Bei grossen Webseiten darf der Sicherheitsaspekt nicht vergessen werden. Wenn bei dieser Webseite die Datenbank abschmiert, sind alle bisher geschriebenen Texte weg. In diesem Fall wäre das eine kleine Katastrophe. Regelmässige Datenbank-Updates, Schutz vor Brute-Force und saubere User*innen-Verwaltung muss bei einer grossen Webseite zwingend gewährleistet sein. Das Plugin All in One WP Security ist vermutlich das Beste und Einfachste, was momentan zu haben ist.

3 – JS-Struktur. Wenn mit grossen und langen JavaScript-Files gearbeitet wird (und das war hier ganz klar der Fall), verliert man schnell den Überblick. Um den Überblick nicht zu verlieren, sollte man schlaue Kommentare schreiben und Ordnung halten. Diesen Aufbau kann ich für grosse JS-Files empfehlen:

4 – SEO Open Graph. Für Redaktionelle Webseiten, die in Suchmaschinen gut gefunden werden sollen, ist eine schlaue SEO-Optimierung zwingend. Was nebst all dem, was mit Plugins wie Yoast SEO alles gemacht werden kann, jedoch genau so wichtig ist, ist das Setzen von OG-Tags. Diese OG-Tags werden z. B. von Facebook, Twitter oder aber auch beim Teilen einer Webseite per Whatsapp oder Slack benötigt. Die wichtigsten OG-Metatags findet ihr hier:

Testen, wie das Ganze danach geteilt aussieht, kann man auf der Webseite metatags.io.

Ich könnte natürlich noch x weitere Learnings notieren…

…aber diese vier sind die wichtigsten.

(ash)

Ich habe ziemlich viel Erfahrung mit der Entwicklung von Webseiten mit dem CMS WordPress. Für die Umsetzung dieser Webseite musste/durfte ich mir aber ziemlich viele neue Dinge beibringen. Durch die Grösse der Webseite, das eher komplexe Design und für mich neue Dinge wie eine schlaue Suchfunktion habe ich relativ viel profitiert. Hier versuche ich den Ablauf des Projekts zu skizzieren:

…und noch als wichtige Randnotiz: Die ganze Umsetzung wurde nicht auf einem vordefinierten Theme aufgebaut, das Theme wurde von Grund auf neu erstellt.

Kick-Off

  • Definieren des Aufbaus der Webseite
  • Termine besprechen
  • Besprechen des Designs, welches übrigens Lorena Lucek, auch MMP’lerin erstellt hat, und mega nice geworden ist!

Programmierung Runde 1

  • Aufsetzen des Backends
  • Erstellen der Backend-Struktur (Taxonomien, Post-Types, Benutzer*innen-Profile aufsetzen)
  • WordPress-API-Request auf der Startseite schreiben (für «load more»)
  • Navigationsstruktur erstellen
  • Erstellen von Shortcodes für Elemente die in Beiträgen genutzt werden
  • Grundaufbau CSS (nur Sturktur, sprich richtige Positionierungen)

Zwischenstand-Besprechung

Für mich ist es immer wichtig, nachdem der Grundaufbau der Webseite steht, eine Besprechung abzuhalten. So können Anpassungen am Aufbau noch gemacht werden, bevor schon zu viel Zeit in’s CSS investiert worden ist.

Programmierung Runde 2

  • Anpassungen der Webseiten-Struktur anhand Besprechung
  • Suchfunktion bauen und implementieren
  • Detailliertes CSS inkl. Responsive Optimierung
  • Diverse JavaScript Funktionen bauen für die Funktionalität der Webseite

Finale Besprechung

Eine zweite Sitzung finde ich immer wichtig nach der Erstellung des CSS. So kann das CSS abgenommen und final angepasst werden, bevor mit dem Feinschliff begonnen wird.

Programmieren Runde 3

  • Feinschliff Mobileoptimierung (anpassen auf verschiedene Geräte, sprich Android und IOS, deren Browser sehr verschieden funktionieren)
  • Implementieren von Sicherheits-Vorkehrungen (DB-Backups, Spam-Schutz, Bruteforce-Schutz)

Liveschaltung

  • Juhuu.

Mit diesem Projekt konnte ich meine Skills im WordPress-CMS nochmals massiv verbessern. Das ist schön. Plus ist das Endprodukt wirklich super geworden, weil nebst der Webseite auch die Inhalte qualitativ wirklich supergut sind. Ein rundum gelungenes Projekt, zu dem ich einen kleinen, aber wichtigen Beitrag leisten durfte 🙂