Website-Builder: WordPress ist nicht wegzudenken

Dass WordPress beliebt ist, weiß man: Rund ein Drittel aller Websites basiert auf dem 2004 erstmals gelaunchten Open-Source-Content-Management-System. Der Kundenstamm reicht von gro­ßen Brands wie Microsoft und Sony über »Time Magazine« bis zu kleinen Marken wie PAGE und nicht kommer­ziellen Projekten wie dem Medienkunstarchiv von Julia Stoschek.

Vom Blogsystem zum Blockeditor

Auch 99 Prozent der von Creative-Developerin Cyd Stumple erstellten Kundenwebsites laufen auf Word­Press. Obwohl ihre benutzerdefinierten Themen wir­ken, als seien sie mit komplexen JavaScript-Frameworks realisiert, umgehen sie elegant die für Kun­den typischen Schwierigkeiten: Bei einer ent­kop­pel­­ten oder einer Headless-CMS-Architektur sind Front- und Back­end strikt getrennt. Bei der Verwendung eines Frameworks mit einem CMS werden alle Texte und Bilder via API aus dem Backend ins Frontend-Template geladen. »Das hat zwar Performancevorteile, kann aber Probleme verursachen, die den Kunden schwer zu erklären sind, und als freiberufliche Entwicklerin stelle ich meine Kunden an erste Stelle«, sagt Cyd Stumple, die zusätzlich zu jeder Website ein kurzes Handbuch mitliefert, das zur eigen­stän­di­gen Wartung der Website auch die komplizierteren Funk­tio­nen im Backend erklärt.

Cyd Stumple arbeitet mit den Ende 2021 in WordPress eingeführten Gutenberg-Blöcken, einem neuen Editor, der alle In­halte in einzelne Interface-Kompo­nenten wie Text, Bild und Buttons zerlegt, sowie dem WordPress-Plug-in Advanced Custom Fields. Mit ihm kann man JavaScripts einbinden, was es auch Stumples Kunden sehr leicht macht, die Blöcke auf deren Website nach Belieben anzuordnen.

»Die Transitions setze ich per Highway.js um und das Smooth Scrolling mit Lokomotive-Scroll«, verrät Cyd Stumple ihre kleinen Tricks. Beide Java­Script-Libraries arbeiten reibungslos mit WordPress und er­öffnen kreative Freiräume bei der Seitengestaltung. Einen weiteren Vorteil der Open-Source-Lösung sieht sie in der großen, enorm heterogenen Nutze­r:in­nen­­schaft und der Entwicklercommunity: »Dank der vielen User ist WordPress gut gepflegt und einfach zu debuggen, was es zu einem sicheren und verläss­li­chen CMS macht. Bei einem Problem genügt häufig schon eine Google-Suche.«

Dreidimensionales Helix-Portfolio

Cyd Stumple nutzt die Plattform auch für ihr eige­nes Portfolio. Es fasziniert mit einer dreidimensionalen, wabernden Sphäre und einer um diese rotierenden Bildergalerie. Um die Kugel und die Krümmung der Fotos zu erzeugen, nutzt Stumple WebGL in Verbindung mit der Java­Script-3D-Library Three.js. Mit ihr zu programmieren, hatte sie vorher noch nicht ausprobiert. »Ich hatte das WebGL-Experiment von @0xmarkov auf Twitter gesehen und fand diese drehende Helixform für die Präsentation eines Portfolios super geeignet. Ich begann, eine Website zu skizzieren, hatte aber keine Ahnung, mit welchem Tool ich sie umsetzen sollte.«

Stumple begann zu recherchieren, sah sich Tutorials zu WebGL und Three.js an und fand schließlich ein CSS-3D-Beispiel für eine Helixform in WebGL. »Aber für gekrümmte Bilder, wie ich sie wollte, funk­tionierte das noch nicht.« Einen ganzen Tag hatte sie an der dreidimensionalen Kugel zu knacken. In ei­nem Trial-and-Error-Prozess und mit den Three.js-Tutorials von Bruno Simon und Yuri Artiukh gelang ihr am Ende die Umsetzung mit WebGL und Word­Press. »Beim Lernen von neuen Anwendungen geht es am allermeisten darum, nicht aufzugeben und sich durch Ausprobieren an das Ergebnis heranzutas­ten«, so die Creative-Developerin.

Experimentierfreudigen Webdesigner:innen stellt sie auf GitHub eine Open-Source-Software zur Verfügung, mit der sich eigene Custom Themes in WordPress schneller bauen lassen. Denn Stumple ist überzeugt von der Lösung und stolz auf zahlreiche Kundenprojekte, die sie damit bereits umgesetzt hat.

So entstanden in Kollaboration mit monopo London und monopo NYC zum Beispiel die Websites für die Venture-Capital-Unternehmen Presight Part­ners und Robust sowie eine neue Website für die Krea­tivagentur Moan. Ob dabei eine maßgeschnei­derte Cursorfunktion, ein dezen­ter Back­groundeffekt oder witzig animierte Buttons ent­stehen – Word­Press setzt Cyd Stumples Kreativität dabei jedenfalls keine Grenzen.

Beim Lernen von neuen Anwendungen geht es am allermeisten darum, nicht aufzugeben und sich durch Ausprobieren an das Ergebnis heran­zutasten

Dieser Artikel ist Teil der Titelgeschichte “Website-Builder: aus ready-made wird customized” aus PAGE 10.2022. Die Ausgabe können Sie hier runterladen.

PDF-Download: PAGE 10.2022

Produkt-Details anzeigen

Website-Builder: Aus ready-made wird customized ++ Futures Design: Praxis & Cases ++ ENGLISH SPECIAL J.S. Weis ++ Boom: Design für Reinigungsmittel ++ Kartendesign: Dos and Don’ts ++ Plakate per Buchdruck: Dafi Kühne ++ Neue DIN mit Variable-First-Ansatz ++ Förderungen für Kreative ++ EXTRA: Top 20 CD/CI-Agenturen

9,90 €

AGB