CSS Grid und Gutenberg: Da kommt einiges auf uns zu!

Gerade habe ich mir einen Vortrag von Morten Rand Hendriksen (Mor10) über CSS Grid angeschaut und bin wie elektrisiert. Das klingt so einfach und genial, dass ich am liebsten gleich loslegen möchte!

Mein Webdesign-Weg

Natürlich ist es immer wieder spannend, mitzuerleben, wie sich das Webdesign weiterentwickelt. Wenn ich an meine Anfänge zurück denke (*hust* Websites mit Word gebaut *hust*), an solche Sachen wie Netscape Composer und was es da nicht alles für monströsen Quelltext produzierende Dinger gab… Dann meine Erleuchtung mit den Little Boxes von Peter Müller und die ersten Schritte mit validem HTML, CSS und Accessibility.

Nie, NIE wieder wollte ich was anderes nutzen als meine heiligen handgeschriebenen Websites. Und solange die nur statisch und nicht zu komplex waren, war das ja auch okay. Aber die float-Probleme nervten, genau wie das Gewurschtel um Browserkompatiblitäten (ich sag nur Internet Explorer). Und da dachte noch kaum einer an mobile Geräte!

Als dann endlich WordPress auf meinem Radar erschien, fand ich das zwar einerseits nett, dass mir das Layouten zum größten Teil abgenommen wurde. Andererseits konnte ich es mir aber nie verkneifen, doch noch an den Themes herumzuschrauben, sei es mit CSS via Child-Theme oder mit HTML im zweiten Reiter des Editors oder in Text-Widgets. Inzwischen kann man davon viel über den Customizer und das Modul für zusätzliches CSS erledigen und braucht nicht mehr unbedingt ein Child-Theme. Damit und einem kurzen Astecher in Sachen Markdown war ich bisher so beschäftigt, dass ich solche Sachen wie Flexboxes oder die Weiterentwicklungen von HTML und CSS nur am Rande mitverfolgt habe. Und spätestens seit ich den Pagebuilder Elementor nutze, bin ich da eher noch fauler geworden. Klar kommt man mit Elementor in den erweiterten Einstelllungen auch nur weiter, wenn man Grundkenntnisse in in HTML/CSS hat. Aber so wirklich dringend benötigt man das nicht mehr, um damit arbeiten zu können. Schade eigentlich. Denn das Tüfteln im Quelltext bzw. Stylesheet hat mir immer besonderen Spaß gemacht.

Nun sind da aber gleich zwei Weiterentwicklungen auf dem Weg, die mir den Spaß am Tüfteln zurückbringen könnten: Gutenberg und CSS Grid.

Gutenberg: WordPress goes WYSIWYG

Das Projekt Gutenberg soll WordPress in drei Schritten revolutionieren:

1. Editor – Im Editor soll künftig mit Blöcken gearbeitet werden. Für jede Art von Inhalt gibt es einen Block: Für einen Textabschnitt, für ein Bild, für ein Zitat usw. (mit einem Plugin kann man jetzt schon in die Entwicklung hineinschauen und mittesten).
2. Pagebuilder – Mit diesen Blöcken kann man dann ganze Seiten bauen, da diese z.B. auch für Widgets benutzt werden können.
3. Sitebuilding – Von da an ist es nicht mehr weit zum Bauen ganzer Websites, wenn auch noch header, footer und andere Elemente, die über die ganze Website verwendet werden, angepasst werden können.

Auch dazu gibt es einen aufschlussreichen Vortrag von Mor10, in dem er  u.a. erklärt, warum diese Veränderungen nötig sind: Zum einen muss sich WordPress den Nutzerbedürfnissen anpassen und die verlangen nach einem echten What-you-see-is-what-you-get-System à la jimdo und Konsorten – nur eben besser. Zum anderen wird es nicht bei den bisher bekannten Ausgabegeräten bleiben. Allein durch Augmented und Virtual Reality werden schon Änderungen im Denken von Websites nötig. Was passiert erst, wenn die Darstellung von Websites völlig unabhängig von Bildschirmen wird?

CSS Grid: Websites per Gitternetz designen

Unabhängig von Gutenberg in WordPress gilt es sich auf eine weitere Entwicklung vorzubereiten, die man allerdings jetzt schon nutzen kann (zumindest in allen modernen Browsern): Mit CSS-Grid wird das Web nun doch fast wie auf Papier gestaltbar, d.h. das „Einwickeln“ mittels Containern,Wrappern und Co. wird überflüssig. Statt dessen teilt man den Canvas mit einem Grid, also mit Gitternetzlinien in Felder ein, die man dann pro media query individuell bestücken kann.

Damit kann man dann z.B. in der Desktop-Darstellung Spalten ohne Floatdramen ineinander verschachteln, die sich mobil je nach Bildschirmgröße immer weiter untereinander sortieren. Klingt nach Flexbox, sieht aber von Mor10s Demo her wesentlich einfacher aus: Die einzelnen Bereiche haben Namen, die Namen werden je nach media query bestimmten Bereichen im Gitternetz zugeordnet.

Weiterführende Artikel/Websites:

• http://mor10.com/wceu2017/
• https://blog.kulturbanause.de/2013/12/css-grid-layout-module/
• https://css-tricks.com/snippets/css/complete-guide-grid/

Laut Mor10 macht das Kombinieren von Flexboxes mit CSS Grid erst richtig Spaß, aber dafür kenne ich mich da noch zu wenig aus. Aber meine Neugier ist geweckt und ich kann es nicht erwarten, das alles auszuprobieren!

Danke sagen

Mein Dank geht an dieser Stelle noch an Peter Müller, der mich durch unsere Arbeit an seinen WordPress-Büchern und dem gemeinsamen CSS-Geschraube an unseren Websites erst darauf gebracht hat, mich mit diesen Neuerungen zu beschäftigen. Dank je wel, Peter! Ich hoffe, wir werden noch lange weiter zusammen testen und tüfteln! Das macht riesigen Spaß!

Titelbild: Screenshot aus dem Vortrag von Morten Rand Hendriksen