praegnanz.de Das private Weblog von Gerrit van Aaken tag:praegnanz.de,2005:b9374958e211727ae8ae76f7b6521d30 2017-08-20T00:00:00Z Gerrit van Aaken https://praegnanz.de/ Gerrit van Aaken 2017-08-20T00:00:00Z 2017-08-20T00:00:00Z Trends im Content Management tag:praegnanz.de,2017-08-20:574ed68c2108cfa96e3f90431d20a41c Ein 108-minütiger Videovortrag über fast alles, was ich über Content-Management-Systeme weiß. Oder zumindest, was wir als Agentur in den letzten Jahren ganz praxisnah darüber gelernt haben.

Audiotechnisch suboptimal mitgeschnitten bei der Vortragsreihe Technik & Zukunft der Typografischen Gesellschaft München (19. Juli 2017):

]]>
Gerrit van Aaken 2017-08-19T00:00:00Z 2017-08-19T00:00:00Z Wahlprogramm-Design-CheckUp 2017 tag:praegnanz.de,2017-08-19:d9eadf79d1b08b4ba071f7d387aee604 Es ist wieder soweit – die Wahlprogramme der Parteien zur Bundestagswahl müssen analysiert und verglichen werden. Allerdings selbstverständlich nicht inhaltlich, sondern nach typografischen Gesichtspunkten. Starten Sie Ihren PDF-Viewer und los geht’s!

Zunächst jedoch ein paar Aspekte, die ich im Vergleich zur 2004er-, 2005er- und 2009er-Edition dieses Artikels für erwähnenswert halte. Auch wenn alle Parteien nach wie vor ein Hauptdokument im PDF-Format anbieten, so existiert inzwischen eine Vielzahl von Darreichnungsformen, die dem realen Konsum der Inhalte sehr viel mehr entgegen komme als das sperrige 150-Seiten-Büchlein, das sich nur echte Idealisten und ungewöhnlich engagierte Sozialkundelehrer durchlesen werden. Es gibt Zusammenfassungen von 1 bis 10 Minuten Leselänge, Versionen in einfacher Sprache, EPUBs für E-Book-Reader, vorgelesene Audiodateien und natürlich hunderte von Sharepics mit den Kernthesen. Miniwebsites zum bequemen Navigieren machen den Einstieg in die Lieblings-Themen einfach. Endlich ist den Wahlkämpfern klar geworden, dass die Menschen heutzutage an Bildschirmen jeder Größe Inhalte lesen und bieten passende Formate an. Großes Lob für diese mediendiverse und Barrieren abbauenden Entscheidungen!

Dennoch wollte ich aus Gründen der Tradition und der Vergleichbarkeit nur das ungekürzte, vom Parteitag abgesegnete Dokument betrachten, und zwar von allen sechs Fraktionen, die eine realistische Chance auf 5% bei der Bundestagswahl im Herbst haben. Und ich sage es gleich dazu: Ja, ich halte die AfD aus inhaltlichen Gründen für einen echten Schandfleck in dieser Reihe! Ich werde dennoch ihren demokratisch erarbeiteten Erfolg respektieren, während ich gleichzeitig auf anderen Kanälen ihre Inhalte und Protagonisten mit voller Verve rhetorisch bekämpfe!


CDU/CSU

Download als PDF

Merkel strengt sich nicht einmal mehr an, so geht das Mantra der vergangenen Tage. Und das „Regierungsprogramm“ bzw. #fedidwgugl getaufte Wahlprogramm der CDU/CSU ist eine direkte Entsprechung dieser Geisteshaltung. Es hat noch nicht einmal für Doppelseiten gereicht. Das 76-seitige PDF kommt als DIN-A4-Einzelseiten-Textwüste daher, enthält nicht eine einzige Abbildung, dafür gelangweilte Standard-Formatvorlagen in der CDU-Hausschrift Kievit (immerhin nicht Arial). Das PDF wurde mit Word 2000 erstellt, wahrscheinlich auf dem virenbefallenen Windows-XP-Rechner des GF-Sekretärs. (Der letzte Halbsatz ist allerdings spekulativ.)

In seiner formatvorlagigen Schlichtheit sind keine allzu groben Fehler erkennbar: Abstände, Größenverhältnisse und Lesbarkeit passen soweit. Einzig der linke Einzug der zahlreichen Bullet-Points ist zu groß, und der vertikale Abstand zur Seitenzahl zu klein. Das Titelbild ist blau hinterlegt, im angedeuteten neuen Corporate Design der CDU, aber sehr gemäßigt – immerhin ist die bayerische CSU ja irgendwie zu einem Sechzehntel an diesem Dokument beteiligt.

Note 4–


SPD

Download als PDF

Die SPD hält auch nichts von Abbildungen im Innenteil Ihres optimistisch „Regierungsprogramm“ getauften Dokumentes, aber es ist etwas mehr Gestaltungswille vorhanden als bei der CDU. Die Sozen-Agentur nutzte InDesign CC 2017, wir erblicken Doppelseiten, und wir haben das rote Quadrat an verschiedenen Stellen: zum einen als Bullet-Points, zum anderen als neckisches Daumenkino rechts oben, wo es einen animierten Ladebalken oder Fortschrittsanzeiger mimt. Verstehste? Fortschritt! SPD! Da war mal was!

Warum die SPD nach Futura in den Neunzigern, TheSans in den Nuller- und Zehnerjahren nun auf die Neutralität der Neuen Helvetica setzt (und zwar konsequent), ist nicht ganz klar ersichtlich. Eine ironische Hipsternutzung dieser Schrift kann es irgendwie nicht sein. Ich verstehe es nicht: Die Helvetica hat nichts Kämpferisches oder Progressives, sie ist einfach nur Standard. Eine schwache Botschaft des Herausforderers! Immerhin wird im Fließtext der Blick auf fettgedruckte Schlagwörter gelenkt, die das Lesen auflockern.

Note 3


FDP

Download als PDF

Die FDP sieht sich gemäß ihres Wahlkampf-Designs als progressive „Kursiv“-Partei. Da Ungeduld die Tugend der Stunde ist, haben sie scheinbar keine Zeit für eine mega-sorgfältige und ausgewogene Gestaltung investiert, sondern rotzen ihre Kernaussagen und Claims dahin, von der Ungeduld getrieben, in den Basis-Druckfarben Magenta, Cyan und Gelb.

So soll es vielleicht ein bisschen wirken. Das Programm der Lindner-Partei ist in dieser modernen Rumpeligkeit gesetzt, die man nur mit viel Coolness hinbekommt. Der Fließtext mit zu engem Zeilenabstand in der Scheißdrauf-Calibri, die Einschübe in einer zu fetten DIN-Schrift in kursiv, nicht mal für die Lizenz einer feingeschliffenen DIN Next hat es gereicht. Das Dokument ist mit 158 DIN-A5-Seiten alles andere als kurz, wird aber durch einige Diagramme aufgelockert.

Aber: Es sieht halt leider geil aus! Lässig und kraftvoll, ein kleiner Affront gegen das Beständige und – in diesem Falle – die reine typografische Lehre. Zu verlieren hat die FDP bekanntlich nichts. Mit ihrer Kampagne und diesem Wahlprogramm kann sie punkten!

Note 1


Die Linke

Download als PDF

Müssen Sozialisten immer soviel schreiben? Die Linke gewinnt mit 480.000 Zeichen das Rennen um das ausführlichste bzw. geschwätzigste Wahlprogramm. Das Layout ist seit 2009 übrigens unverändert: eine schmale Corporate S – ach, diese Ironie! – in zwei engen Spalten, alles etwas zu gedrungen gesetzt. Dennoch insgesamt gut lesbar dank DIN-A5-Doppelseiten mit Flattersatz und guter Struktur. Die Bullet Points sind nicht mit einem Einzug versehen, was sie besser in den Text integriert. Ungewöhnlich, aber für diese Art von Texten wohl sinnvoll. Bei der CDU sieht man, dass es andersrum doof aussieht.

Auch die Linke verzichtet auf Abbildungen jeglicher Art. Die Titelseite könnte auch ein Plakat sein. Keine Überraschungen von links, die Konzentration auf den Inhalt sei ihnen gegönnt. Und der Kontrast zur FDP ist dieses Jahr mehr als deutlich. Eine Besonderheit: Nach dem Index finden sich jede Menge Call-To-Actions: Spendenaufrufe, Beitrittsformulare, SEPA-Antrag usw.

Note 2–


Die Grünen

Download als PDF

Die Grünen haben das Layout ihres Parteiprogramms seit 2005 nicht mehr geändert. Das sind inzwischen zwölf Jahre! Lediglich die Schrift wird anscheinend immer wieder der aktuellen Kampagne angeglichen, so haben wir es mit der Mac-Systemschrift PT Sans im Fließtext und dem Freefont Arvo in den Headlines zu tun.

Das Doppelseitenlayout wird von allen Seiten eingerahmt: Themenheadlines, Striche, graue Kästchen, insgesamt wirkt das leider etwas unruhig und der eigentliche Text kann sich nicht souverän ausbreiten. Der Blocksatz und der Verzicht auf Bullet-Points führt zu bemerkenswert gleichartigen Seitenansichten, über sage und schreibe 248 abbildungslose DIN-A5-Seiten. Einzig die grau hinterlegten Zusammenfassungen lenken den Blick, sind aber mit zu geringem Innenabstand keine Augenweide. Die angeblich so progressive Partei bleibt vom Layout her in den späten Neunzigern stecken. Hier wäre mit der richtigen Agentur wesentlich mehr drin gewesen!

Note 3–


Die AfD

Download als PDF

Die Wahl der fetten Futura als rumpeliger Hingucker für die AfD funktioniert stilistisch sehr gut, ist aber auch schrifthistorisch interessant. Einerseits klar: Futura = Zukunft, passt immer – war ja auch lange Zeit SPD-Hausschrift. Andererseits stammt die Futura aus dem Jahr 1927, und das finden die völkischen Spinner in den AfD-Reihen bestimmt ausgesprochen schicklich.

Die AfD hat sich für das ungewöhnliche Querformat entschieden, was das Durchblättern der gedruckten Fassung sperrig macht, aber auch einen selbstbewussten und hochglanzkatalogigen Touch hat. Die Powerpoint-Anmutung wird unter anderem auch durch die vollformatigen Thementrennerseiten verstärkt, die ich aber als Atempause ganz angenehm finde. Die Doppelspalten im Fließtextbereich sind dann wieder relativ standardisiert gestaltet: Georgia als blutleere Brotschrift, etwas unsouveräner Umgang mit den vertikalen Abständen, aber im Großen und Ganzen okay. Ein typografischer Kardinalfehler hingegen: Die AfD benutzt sowohl eine Leerzeile zwischen den Absätzen, als auch einen Einzug am Anfang jedes Absatzes. Es ist aber nur eine der beiden Maßnahmen sinnvoll, nie beide zusammen! Die großzügigen Weißflächen um die Textblöcke herum erfüllen ihren Zweck, wären auf der Doppelseite spiegelbildlich angeordnet noch schöner, täuschen aber auch nur unzureichend darüber hinweg, dass das Programm mit 140.000 Zeichen nur ein Viertel des Umfangs einnimmt, den die Linke oder die Grünen zu bieten haben.

Note 2–


Bemerkung

Auch wenn man die eine oder andere Tendenz zu erkennen glaubt – die Gestaltung der Wahlprogramme hat nichts mit der täglichen Arbeit der Parteien zu tun. Bitte wählt um Gottes Willen nicht auf Basis dieser kleinen scherzhaften Beurteilung!

Hinweis: ich bin seit fast zehn Jahren Mitglied der Grünen und habe 2009 aus Lust und Laune das Wahlprogramm der Piraten gestaltet.

]]>
Gerrit van Aaken 2017-06-26T00:00:00Z 2017-06-26T00:00:00Z Nur noch E-Zulassungen ab 2030? tag:praegnanz.de,2017-06-26:68551c4090546332cddfe72df6192a92 Wenn es nach der Grünen Bundestagsfraktion und dem Bundesrat geht, wird es in Deutschland ab 2030 keine neuen Zulassungen für Verbrenner-Autos mehr geben. Ist das überhaupt machbar oder bricht dann alles zusammen? Wie realistisch ist der Zeitplan? Ich gebe sachliche Antworten zu berechtigter Skepsis.

1. Tankstellen haben nicht genug Platz für ladende E-Fahrzeuge.

Wenn die jetzigen Tankstellen die einzigen Orte wären, an denen man Elektroautos aufladen kann, wäre das korrekt. De facto lassen sich aber überall Ladesäulen aufstellen, wo elektrischer Strom verfügbar ist – insbesondere an Orten, wo das Fahrzeug sowieso einige Zeit steht (Tiefgarage, Supermarkt, Arbeitsplatz oder die eigene Garage).

2. Lange Autobahnfahrten kosten viel Zeit.

Das ist korrekt. Wer auf der Autobahn schneller als 120 km/h fährt, verbraucht deutlich mehr Energie und muss häufiger aufladen, was mehr Zeit kostet als man durch die schnelle Fahrweise gespart hat. Autobahnfahrten über 200 Kilometern dauern mit E-Autos merklich länger. Wir müssen uns als Gesellschaft allerdings die Frage stellen, ob stundenlanges Rasen bei 160 km/h der Maßstab aller Dinge ist. Sollte nicht eine sichere und entspannte Reisegeschwindigkeit mit ausreichend langen Pausen das Ziel sein, ganz unabhängig von der Frage nach der Antriebsart der Fahrzeuge?

3. Die Rohstoffe für Batterien sind nicht unendlich verfügbar.

Es stimmt, dass die heutigen Li-Ion-Akkus auf seltene Erden und Lithium angewiesen sind. Dies betrifft auch die Batterien von Smartphones und Laptops, welche einen weit größeren Anteil an der weltweiten Gesamtkapazität halten. Mit den enormen Innovationen, die aktuell in der Batterieforschung stattfinden, wird die aktuelle Technologie jedoch in absehbarer Zeit durch nachhaltigere Lösungen ersetzt.

Quellen:

4. Es gibt keinen Plan für die Altbatterien.

Nicht richtig. Gebrauchte Fahrzeugbatterien mit nachlassender Kapazität können für Notstromaggregate, als Heimbatterie oder zum Ausgleich von Lastspitzen in Kraftwerken verwendet werden. Da erst seit 2010 Elektroautos in Serie hergestellt werden, ist diese „Second-Life“-Nutzung noch nicht in vollem Gange; Infrastruktur und Geschäftsmodelle sind aber vorbereitet.

Quellen:

5. Die CO2-Bilanz von E-Autos ist nicht besser als bei Verbrennern.

Kommt drauf an. Die Herstellung von großen Batterien erfordert tatsächlich viel elektrische Energie. Entscheidend ist der jeweilige Energiemix des Fertigungsstandorts. In Teslas Gigafactorys setzt man auf Solarstrom, andere Batterieproduktionen arbeiten noch mit Anteilen von Kohlestrom. Als Faustregel gilt: Wer sein Elektroauto mit 30-kWh-Akku größtenteils mit Ökostrom auflädt, fährt nach weniger als drei Jahren mit einem kleineren CO2-Fußabdruck als ein vergleichbarer Verbrennerfahrer. Öffentliche Ladesäulen werden übrigens sehr häufig mit erneuerbaren Energien betrieben.

Quellen:

6. Der Bedarf an Strom kann nicht zuverlässig gedeckt werden.

Von heute auf morgen ist ein Ausbau der Kapazitäten tatsächlich nicht zu schaffen. Es bleiben jedoch noch einige Jahre, in denen der Anteil an E-Fahrzeugen Schritt für Schritt ansteigt. Die Stromnetze werden seit Jahren intelligenter und dezentraler. Der heimische Ladevorgang könnte automatisch zu einer Zeit stattfinden, wenn das Netz weniger belastet und der Strom billig ist. Autarke Stromversorgung vor Ort ergänzt sich prima mit Autobatterien zur Kapazitäts- und Lastverteilung.

Quellen:

7. Elektroautos sind teurer als Verbrenner.

Das ist Stand 2017 natürlich richtig, wenn man nur den Anschaffungspreis betrachtet. Dieser entwickelt sich nach unten, wenn Batterien und elektrische Antriebsstränge in höheren Stückzahlen gefertigt werden, was seit einigen Jahren bereits geschieht. Die laufenden Fahrtkosten in Form von Strom und ggf. Batteriemiete hängen von sehr vielen Faktoren ab und müssen individuell betrachtet werden. Als grobe Faustregel zahlt man pro Kilometer etwa 50 % des Benzinpreis für den verbrauchten Strom. In Sachen Verschleiß und Wertverlust stehen Elektromobile sehr gut da. Eine echte Preisparität in Bezug auf die Total Cost Of Ownership wird – je nach Studie – für Anfang bis Mitte der Zwanziger Jahre erwartet.

Quellen:

Fazit

Es gibt viel zu tun. Nicht alle Kritikpunkte von E-Auto-Skeptikern sind als „dämlich“ von der Hand zu weisen. Die Politik und die Wirtschaft sind nun gefragt, richtungsweisende Entscheidungen zu treffen und Innovationskultur zu fördern – Lippenbekenntnisse, wie sie die alteingesessene Autoindustrie fast täglich in die Welt posaunt, reichen alleine nicht aus!

]]>
Gerrit van Aaken 2017-06-10T00:00:00Z 2017-06-10T00:00:00Z Richtige Gedankenstriche mit HTML – so geht’s! tag:praegnanz.de,2017-06-10:1318f67d83c8b45a32e2daf6ece99c14 Ein beliebtes Stilmittel für Autoren, Essayisten und Blogger ist der Gedankenstrich. Leser dieses Blogs, Word-Autokorrektur-Nichtausschalter und andere typografisch interessierte Personen wissen selbstverständlich, dass ein schnöder Trennstrich noch lange kein echter Gedankenstrich ist (Tipp: auf die Länge kommt es an). Doch es gibt noch mehr zu beachten, wenn man lesefreundlich mit diesem Sonderzeichen umgehen möchte.

Insbesondere stellt sich regelmäßig die Frage, wo der Gedankenstrich sich bei einem Zeilenumbruch eher zuhause fühlt: am Ende der oberen Zeile oder am Anfang der unteren Zeile? Diese Frage ist nicht komplett trivial zu beantworten, denn es gibt durchaus verschiedene Kontexte, in denen der Gedankenstrich verwendet wird:

  1. Der fragliche Gedankenstrich markiert den Beginn eines Einschubs, der einige Wörter später mit einem weiteren Gedankenstrich – hier haben wir ein treffliches Beispiel – wieder beendet wird, bevor der eigentliche Satz schließt. In diesem Falle wäre es schön, wenn beide Gedankenstriche sich ähnlich wie eine Klammer verhalten und jeweils am ersten und letzten Wort des Einschubs fixiert würden. Wir erreichen das in HTML natürlich über geschützte Leerzeichen, die mittels   maskiert werden. Auch hier ist – ohne jeden Zweifel – ein Beispiel sinnvoll!
  2. Die ähnliche, aber doch leicht anders gelagert Variante eines einzelnen Gedankenstrichs markiert eine Kunstpause und schließt den eigentlichen Satz meist grammatikalisch ab – um dann doch noch einen weiteren Gedanken an den Schluss zu hängen! In diesem Kontext wäre es schöner, wenn der Gedankenstrich gleichsam als Satzzeichen des ersten Teils fungierte und im Falle eines benötigten Zeilenumbruchs oben stünde. Dies verhindert, dass der Leser nach dem Zeilenwechsel überrascht ist vom plötzlichen Ende des ersten Satzteils. Somit setzen wir unser geschütztes Leerzeichen in diesem Falle vor den Gedankenstrich – ganz nach Art des typografischen Hauses!

Wer mag – und es nicht eh schon getan hat –, kann nun die Breite des Browserfensters kleiner und größer ziehen, um zu gucken, ob der van Aaken das auch alles richtig gemacht hat, denn natürlich ist auch das Setzen von geschützten Leerzeichen ein wichtiger Teil von Responsive Design: das Festlegen von Gestaltungsregel für eine unbekannte Bildschirmgröße! Ich kann nur hoffen, dass mich KirbyText die geschützen Leerzeichen auch wirklich machen lässt – sonst wäre das jammerschade!

Kleine Wiederholung: Mac-User setzen das geschützte Leerzeichen mit alt + <space>, Windows-User vertrauen auf alt + 0160. Weitere Sonderzeichen gibt’s in meinem Buch.

]]>
Gerrit van Aaken 2017-04-17T00:00:00Z 2017-04-17T00:00:00Z Ladesysteme im Überblick tag:praegnanz.de,2017-04-17:7b9d6dbb3b8a6614e96eb66854f82100 Ergänzend zu meinem 2016er Artikel über die Stecker- und Stromsituation bei Elektroautos habe ich nun eine kompakte Grafik gebastelt, die das ganze noch ein wenig besser verdeutlicht:

Diese Grafik darf gerne geteilt, verlinkt, verändert und kommerziell verwendet werden, sie steht unter einer entsprechenden CC-Lizenz.

Hier der etwas ältere Artikel mit Prosa

]]>
Gerrit van Aaken 2017-04-10T00:00:00Z 2017-04-10T00:00:00Z Und irgendwo er … tag:praegnanz.de,2017-04-10:166e193afda19de7f0f2a16c307b0e4f … lachend, in einem weiß getünchten Loft, die fernen Finger zärtlich auf dem Deck, das Gesicht von Tränen der Erleichterung überströmt.

]]>
Gerrit van Aaken 2017-04-03T00:00:00Z 2017-04-03T00:00:00Z Beyond 1280 tag:praegnanz.de,2017-04-03:1868ec4940c2aec1573dcd72c3ed491b Bei all dem Affentanz, der in den letzten fünf Jahren um das Mobile-First-Konzept betrieben wurde, blieb leider ein scheinbar exotisches Nutzungszenario auf der Strecke: Der gute alte große Bildschirm. Ein paar Ideen, wie man diesen sinnvoll bespielen könnte, möchte ich euch selbstverständlich nicht vorenthalten.

Wer Websites ganz oder teilweise im Browser entwirft und entwickelt, hat sich üblicherweise ein individuelles Bildschirm-Setup zurechtgelegt: Browser rechts – Texteditor links, Browser am Laptop – IDE auf dem großen stationären Monitor, oder etwas ganz anderes. Und auch außerhalb der Webdev-Szene kenne ich kaum jemanden, der seinen Browser auf eine Breite von mehr als 1440 (logischen) Pixeln zieht. Es gibt in aller Regel ja nicht viel Spannendes zu sehen an den Rändern links und rechts, wie beispielsweise Spiegel Online beweist:

Wäre es nicht sinnvoller, das Missverhältnis von Layoutbreite und Bildschirmbreite ein bisschen besser zu kaschieren, indem man zumindest erstere zentriert darstellt? Das machen die meisten anderen Kandidaten. Mal etwas lustlos, wie die BUNTE, welche zusätzlich den dunklen Headerbalken einfach über die komplette Breite zieht:

Oder etwas inspirierter, wie bei The Verge oder A List Apart, wo man mit interessanten Mustern oder typografischen Elementen versucht, den Weißraum außerhalb der Textspalte spannender zu inszenieren:

Man kann natürlich auch krass drauf sein, und das gesamte Layout mitsamt aller Schriftgrade gnadenlos proportional skalieren, bis man sich beim Augenoptiker wähnt. Aber wer macht sowas schon?

Fakt ist, dass niemand bei klarem Verstand auf die Idee kommt, die tatsächlichen Textspalten breiter als ca. 100 Anschläge zu gestalten, denn dann wäre die Lesbarkeit dahin. Insbesondere bei Publikationen, die sehr textlastig sind und bei denen Lesbarkeit an vorderster Stelle … Ach komm, wem mache ich hier was vor?

Wer hingegen ausschließlich Inhalte in Bildform zu bieten hat, kann gerne einmal mit der vollen Breite experimentieren, wie beispielsweise Fotografen:

Bei User Generated Content (ist dieses Wort arg 2004?) kommt es darauf an, ob man es den Minipublizisten selber überlassen möchte, wie Ihre Inhalte dargestellt werden sollten. Das aufgrund seiner guten Typografie weltbekannte Medium Medium macht das so. Normalerweise spielt der breite Bildschirm hier keine wichtige Rolle:

Aber gnade uns Gott, wenn ein Autor ein redaktionelles Bild im Text mit voller Breite einstellt:

Ihr seht – es gibt verschiedene Techniken, um mit dem Problem umzugehen, dass Kunden und Nutzer eben nicht nur kleinere Bildschirme einsetzen als wir bei der Entwicklung von Websites, sondern eben auch immer größere Exemplare. Letztere werden natürlich – wie alle Gadgets dieser Welt – immer billiger und immer größer, aber die unbedarften Gelegenheitsnutzer verändern ihr gelerntes Verhalten nicht analog dazu. Kaum ein Windows-Anwender nutzt die Möglichkeit, das Browserfenster auf eine vernünftige Dimension zu konfigurieren. Wie alle anderen Programme läuft der Browser selbstverständlich immer im Vollbild, weil das zu 1280px-Zeiten so üblich war und auch gerade noch knapp Sinn ergeben hat. Im Laufe der Jahrzehnte, angefangen von 640×480 über 800×600 und 1024×768 bis hin zu den 13-Zoll-Laptop-Größen wie 1280px und 1440px hat niemals jemand „Stopp“ gerufen und den irrationalen Vollbildwahn verhindert!

Da wir Webdesigner uns aber immer an der tatsächlich Realität orientieren müssen, ist es geboten, auch diese unerfahrenen Falschbenutzer (jaja, ich weiß!) mitzunehmen und ihnen ein Angebot zu machen, welches sie zumindest im Ansatz zufrieden stellt. Denkt euch etwas nettes für den Hintergrund aus, fügt noch eine Schriftgrad-Stufe mehr ein, experimentiert eventuell ein wenig mit Textspalten (Vorsicht – nicht in die diversen Scrolling-Fallen tappen!)

Habt ein Herz für unsere Breitschirmfreunde – auch wir müssten da bei dem einen oder anderen Kundenprojekt nochmal kritischer ran, das ist sicher.

]]>
Gerrit van Aaken 2017-02-20T00:00:00Z 2017-02-20T00:00:00Z praegnanz.de v7 – Kirby Edition tag:praegnanz.de,2017-02-20:b7d5eab052af3014eac435ae1844db8d Es ist eine alte Erkenntnis: Im Web und auch im Leben läuft alles in Wellen ab. Mal wird auf-, dann wieder abgerüstet, je nach Trend und persönlicher Situation. Für praegnanz.de heißt es nun gerade einmal wieder zurück zu den Wurzeln – mit einer klaren Fokussierung auf die Blogartikel und Kommentare. Hier sind einige Aspekte, die mir beim 2017er-Relauch wichtig waren.

vertraute Designelemente

Blogs brauchen keine Logos, aber ein (im weitesten Sinne) Designblog braucht zumindest eine deutliche Wiedererkennung, insbesondere wenn man da Wort Prägnanz im Namen trägt. Also führt kein Weg an der Nutzung des klassischen Grün vorbei: #009900ist mir zwar eigentlich etwas zu Dunkel und schwer geraten, aber jetzt geht’s auch nicht mehr anders.

Ebenso dabei: Der Schrägstrich, welcher Headline und Rubrik miteinander verbindet (diesmal in Form eines Non-Rectangular Headers), aber auch als Markierung von Zwischenüberschriften. Ich mag diese Anwendung des Schrägstriches. Wer mit mir bereits per Mail kommuniziert hat, kennt ihn auch von meiner Signatur:

Viele Grüße,
/Gerrit

neue Schrift

Zur hier verwendeten FF Tisa gibt’s eine kleine Geschichte zu erzählen. Als ich Ende 2012 das #webtypobuch geschrieben habe, war sie natürlich auch in der Liste der modernen Webfont-Klassiker vertreten. Aus reiner Schusseligkeit hat der Abschnitt mit dem Tisa-Miniportrait aber leider den Weg vom Manuskript in die Layout-Datei nicht mehr geschafft, und ich habe es zu spät gemerkt. Die Manuskript-Datei ist inzwischen irgendwie auch verschwunden, sonst hätte ich sie hier gerne zitiert :-(

Auf jeden Fall wollte ich schon sehr lange mit Tisa arbeiten, da sie so wahnsinnig freundlich-kraftvoll-warmherzig ist und sowohl in Headlines als auch im Fließtext fantastisch aussieht! Außerdem überträgt sie perfekt die Qualitäten der Georgia – die wahrhaft klassische praegnanz.de-Schrift – ins hochaufgelöste Webfont-Zeitalter.

Teaser auf der Übersichtsseite

Früher waren Blogs ja lediglich kurze Notizen über kleine Entdeckungen im World Wide Web, knapp kommentierte Linklisten, Web-Log-Bücher eben. Da diese Aufgabe längst von Twitter übernommen wurde, finden sich auf den meisten Blogs nurmehr längere Beiträge. Und von daher ist es selbstverständlich nicht mehr zeitgemäß, auf der Artikel-Übersichtsseite die einzelnen Artikel in voller Länge darzustellen, wie es bisher auf praegnanz.de der Fall war. Es ist 2017, und ich habe mir für ein Teasermodell entschieden! Die älteren Beiträge werden dabei automatisch gekürzt, aber bei den neuen Beträgen setze ich die Grenze selber.

neues CMS

Ja, es ist wahr: Textpattern ist nun auch an dieser Stelle offiziell Geschichte. Nach mehr als 13 Jahren der erfolgreichen und stressfreien Zusammenarbeit trennen sich unsere Wege. Das neue System musste selbstverständlich Kirby sein, auch wenn ich damit ein bisschen was riskiere. Wie viele wissen, ist Kirby ein dateibasiertes CMS ohne Datenbank, und damit relativ unorthodox; es ist daher noch nicht so richtig gut erprobt, wie sich das System mit über 2.000 Artikeln und fast 22.000 Kommentaren schlägt. Aber ich bin ja von guten Leuten umgeben: Freund des Hauses Bastian Allgeier ist Erfinder und Hauptentwickler des Systems, und das Kommentar-Plugin kommt von unserem Würzburger Mitstreiter Florian Pircher. Falls also Dinge schief gehen, weiß ich, was zu tun ist.

Pflege & Deployment

Selbstverständlich habe ich darüber nachgedacht, wie ich mit dem Erstellen von neuen Inhalten und dem Anpassen des Stylings verfahren soll. Da bei Kirby sowohl die Inhalte als auch die Templates und die Konfiguration im Filesystem enthalten sind, bietet es sich an, alles komplett über git versionszuverwalten und einen wie auch immer gearteten Workflow für das Deployment aufzusetzen. Immerhin habe selbst ich eine gewisse Nerdehre zu retten! Dabei habe ich bisher leider noch keine perfekte Lösung gefunden:

  • Unser selbstbetriebener Gitlab-Server ist schon gestresst genug und muss nicht noch mit 120 MB Binärdaten in Form von Bilddateien belastet werden.
  • Der cloudbasierte Gitlab.com-Server bietet zwar auch private Repos an, aber die dort frei verfügbaren Runner ließen sich nicht zu einem FTP-Sync auf meinem Shared Hosting bewegen.
  • Ein Dropbox-Workflow mittels Uberspace-Hosting hätte grundsätzlich funktioniert, aber leider macht der Linux-Filewatcher standardmäßig bei 10.000 Dateien Schluss, und ich habe über 50.000 Einzeldateien im Projekt.
  • Ein echter virtueller Server kommt für mich als Admin-Laien nicht in Frage.

Ich bin von daher für jegliche Vorschläge offen, wie ich meine Website cool und stressfrei pflegen, deployen und versionskontrollieren kann.

To-Do

Es fehlen noch ein paar Kleinigkeiten, insbesondere eine Volltextsuche, die ich wahrscheinlich über Google Custom Search abwickeln werde, sowie eine manuell gepflegte Liste mit Top-Artikeln, die in der linken Spalte platziert wird, auf eine Weise, die ich mir noch ausdenken muss. Und natürlich sind noch lange nicht alle Browser und Bildschirmgrößen hinreichend getestet. Hier bin ich natürlich auf eure Hilfe angewiesen mit sachdienlichen Hinweisen.

Ich hoffe, euch gefällt die Grundidee der neuen praegnanz.de-Seite! Ich für meinen Teil habe mich noch nicht satt gesehen und liebe das Schriftbild der Tisa heiß und innig. War ’ne gute Entscheidung!

]]>
Gerrit van Aaken 2017-02-16T00:00:00Z 2017-02-16T00:00:00Z Sechzehneinhalb Jahre tag:praegnanz.de,2017-02-16:f4678d7455f153dac06f63865401f7e0 Die Geschichte dieses Weblogs beginnt, irgendwie, Mitte Juni 2000, als ich das Gefühl hatte, ich könnte meinen Alltag als Designstudent und ein paar lockere Beobachtungen über aktuelles Webdesign auf einer Website festhalten – aufgeteilt in einzelne Artikel, die mit einem Datum versehen sind. Dass dieses Konzept „Weblog“ genannt wird und einige Jahre später das ganz heiße Ding wurde, ahnte natürlich niemand, ich am wenigsten.

Als Name diente der Einfachheit halber der Name meines alten Popmusik-Projektes: „Base-Box“, da hatte ich die Domain schon, und mit Dreamweaver konnte ich auch gar prächtige Designs zaubern.

Screenshot Base-Box 1.0

Von der zweiten Vorabversion dieses Weblogs ist nicht sonderlich viel an grafischem Material übrig geblieben. Es muss der 3. September 2003 gewesen sein, und als Software setzte ich von Anfang an (vielleicht aber auch erst im späteren Verlauf) Blogger.com ein. Natürlich mit selbsterstellten Vorlagen und dynamischen Template-Variablen! Hier auch bereits schön zu erkennen: mein Einheitsgrün (#090), von dem ich seither nicht mehr losgekommen bin.

Screenshot Base-Box 2.0

praegnanz.de v1

Ende April oder Anfang Mai 2004 (Die Wayback Machine lässt keine eindeutigen Rückschlüsse zu), startete dann endlich das richtige Weblog mit einer vernünftigen Blogsoftware. Also nicht etwa WordPress, das kannte man damals kaum, sondern natürlich das viel coolere Textpattern, das bis zum gestrigen Tage diese Seite zuverlässig ausgeliefert hat. Das Design im zeitgenössischen Dreispalter, reduziert und bereits mit erstem Wiedererkennungswert in Form der Farbe und des Logos. Der Markentransfer von Base-Box zu praegnanz.de war geschafft.

Screenshot von praegnanz.de v1

praegnanz.de v2 (Die Gras-Edition)

Das Gras war Kult – mein erstes Textpattern-Redesign, und vermutlich auch das Design, mit dem die meisten meiner alteingesessenen Leser erstmals auf meine Fachartikel aufmerksam geworden sind. Ich mag es bis heute, auch wenn alles natürlich brutal zeitgeistig und bis auf den Monat genau dem August 2004 zugewiesen werden kann, wenn man sich ein bisschen in der Webdesign-Historie auskennt: CSS-Sliding-Doors, Flickr-Fotostream und Pixel-Icons von Michael Preidel. Später habe ich ein WordPress-Theme mit diesem Design angeboten, das bis heute bei einigen Fußball- und Golfclubs in Verwendung ist.

Screenshot von praegnanz.de v2

praegnanz.de v2.5 (die Unveröffentlichte)

Nicht immer gelingt alles, und manche Entwürfe versanden auch komplett. Zum Glück habe ich dieses nette Mockup aber auf Flickr dokumentiert und bin neulich eher zufällig darauf gestoßen. Ich habe offenbar Weihnachten 2004 bis Ende Januar 2005 sporadisch dran gebaut, doch es ist kein echtes Template draus geworden:

Screenshot von praegnanz.de v2.5

praegnanz.de v3 (die Akkordeon-Hölle)

Regelrecht visionär ging es im April 2006 weiter. Da veröffentlichte ich ein Design, was heute unter Mobile-First-Gesichtspunkten total abräumen würde, doch tatsächlich gab es damals einen sehr kurzen Trend zu Einspaltern mit furchterregend großen Headlines, den ich natürlich nicht verpassen durfte. Die gesamten Meta-Informationen nur zum Aufklappen anzubieten hatte auch etwas sehr mobilehaftiges, wobei das iPhone ja erst ein Jahr später vorgestellt wurde.

Screenshot von praegnanz.de v3

praegnanz.de v4 (Windows-8-Edition)

Wie war das mit dem Metro-Design? Wer hat’s erfunden? Nun, sicher war ich nicht der erste, der mit quadratischen Kacheln versucht hat, ein Webdesign aufzubauen, aber ich war sicher einer der ersten, die verstanden haben, dass das im Grunde nicht funktioniert. Noch heute sehe ich viele Designagenturen damit bemüht, mehr schlecht als recht die konzeptionellen Schwierigkeiten zu bewältigen, die diese Layoutidee mit sich bringt. Bei mir hat es nur anderthalb Jahre gedauert (7. März 2008 bis Mitte 2009), bis diese Phase vorüber war. Besonders gut gefallen hat mir dieses Design tatsächlich nie, auch wenn es – ganz ohne Mediaqueries – bereits so etwas wie responsiv gewesen ist.

Screenshot von praegnanz.de v4

praegnanz.de v4.5 (die Unveröffentlichte II)

Hierzu gibt es nicht viel zu sagen. Der Versuch, der unpraktischen Kachelseite ein 08/15-Design hinterherzuschieben, ist zum Glück genau dabei geblieben – bei einem Versuch. Dennoch weise ich darauf hin, dass Serifenschrift, Schwarzweiß-Fotos und #090-Grün einfach dazu gehören, wenn praegnanz.de drauf stehen soll!

Screenshot von praegnanz.de v4.5

praegnanz.de v5

Nach zwei Jahren Selbstständigkeit war es am 27. Juli 2009 nun Zeit für eine Professionalisierung. Im Zentrum für die Layout-Idee war natürlich die geschickte Integration des Logo-Schriftzugs mit der Navigation. Die beiden Elemente werden eins, und diese Idee prägte auch die beiden noch folgenden Redesigns. Im Grunde stimmt hier alles: Wiedererkennbarkeit, Übersichtlichkeit, Blogcharakter. Es fehlt halt das letzte bisschen Prägnanz, sprich: ein aufsehenerregendes Designelement wie das Gras oder die Kacheln. Vielleicht ein bisschen zu glatt, aber hat immerhin über drei Jahre gehalten!

Screenshot von praegnanz.de v5

pragnanz.de v6 (GbR-Edition)

Aus eins mach zwei! Da praegnanz.de vier Jahre lang gleichzeitig mein Weblog und auch eine Zwei-Mann-Agentur gewesen ist, musste im August 2012 eine neue Website her, die das auch widerspiegelt. Gemeinsam mit Philip saß ich also viele Stunden im Büro und am Esstisch, damit die beiden Gesellschafter etwas vernünftiges zaubern konnten. Das bis gestern aktuelle Design wurde leider relativ stiefmütterlich behandelt, da es nur sehr wenig frischen Inhalt gab in den letzten Jahren. Traurig! Doch dafür kann das Design nichts. Es war responsiv (wenn auch nicht sehr hübsch, und außerdem nachträglich hinzugefügt), erneut eindeutig als praegnanz.de zu identifieren, und brachte zum ersten Mal echte Webfonts mit ins Spiel: Adelle für die Headlines und FacitWeb für den Fließtext. Da soll mal einer sagen! Und Textpattern läuft und läuft und läuft …

Screenshot von praegnanz.de v6

Abrundung

Sechzehneinhalb Jahre ins Internet schreiben – rund die Hälfte davon voller Gewissensbisse, dass man mal wieder bloggen müsste. Aber das gehört ja irgendwie dazu, sonst gäbe es Aktionen wie den Iron Blogger nicht. Ich werde in den nächsten Tagen noch ein paar Worte zum aktuellen Design und vor allem der aktuellen Technik verlieren – das dürfte für einige interessant werden. Ich für meinen Teil bin froh, dass ich hier alles unter einem Hut und meine Webtexte seit dem Jahr 2000 unter meiner eigenen Kontrolle habe. Mal sehen, wie es weitergeht – an Ideen mangelt es nicht, aber – oh Wunder! – an Zeit. Ihr kennt das.

]]>
Gerrit van Aaken 2016-11-11T00:00:00Z 2016-11-11T00:00:00Z BEM für Späteinsteiger tag:praegnanz.de,2016-11-11:9da0fe67e084cee5ede6c9d0fb96c8ca Es gibt bei uns eine gewisse Tradition, sich erst recht spät mit dem ganzen heißen Scheiß aus der WebDev-Hipster-Toolchain zu beschäftigen. Nachdem ich 2013 den staunenden Kollegen im Working-Draft-Podcast noch berichtete, dass wir außer jQuery quasi keine nennenswerten Frontend-Tools oder -Techniken verwenden, gab es in den letzten drei Jahren schon noch die eine oder andere Aufrüstungsmaßnahme in unserem Workflow. Aber es ist uns eben wichtig, nicht zuviel Energie in Lösungen zu stecken, die sich mittelfristig als Sackgasse erweisen. Gut abgehangene Technik schlägt jeden Hype.

Im Falle von BEM war es insbesondere die unfassbar schlechte Didaktik, mit der das System allerorts beworben wurde. Ich konnte schlicht keinen vernünftigen Fachartikel finden, der mich wirklich von den Vorzügen überzeugen konnte. Mit den nachfolgenden Zeilen kann ich diesen Zustand hoffentlich ein wenig verbessern!

Kurzer Hinweis

Ich werde hier aus Gründen auf die Bezeichnung „Element“ verzichten, wenn damit die nackten HTML-Strukturelemente wie <h1>Headline</h1> oder <img src="" alt="" /> gemeint sind. Ich nenne sie stattdessen Bausteine, um sie von den BEM-Elementen zu unterscheiden.

Das Problem

CSS ist zwar auf den ersten Blick kein sonderlich komplexes Styling-System, doch der Schein trügt: Jeder, der ein Projekt mit mehr als 2000 Zeilen CSS-Code gebaut hat oder gar vererbt bekommt, hat sich sicherlich schon darüber geärgert, dass es in CSS keine eingebaute, verpflichtende Systematik oder Architektur gibt, mit der sich große Projekte mit vielen unterschiedlichen, aber natürlich visuell verwandten Elementen besser organisieren lässt. Das einzige, was man sich üblicherweise zu Nutze macht, sind:

  • HTML: semantische, aber kurze Klassennamen, die irgendwie trotzdem das Styling erahnen lassen
  • HTML: multiple Klassen für unterschiedliche Stylings, die aus unterschiedlichen Kontexten geerbt werden können
  • CSS: lockere Gruppierung von irgendwie zusammengehörigen Selektoren
  • CSS: grobe Reihenfolge der Selektoren von allgemein zu speziell, von außen nach innen, und von oben nach unten
  • CSS: verschachtelte Selektoren mit zunehmender Spezifität – durch übersichtliche Einrückung in Präprozessoren verführerisch einfach!

Dies sind alles keine grundsätzlich schlechten Ideen, und die Fähigkeiten von CSS ermutigen uns ja auch, Dinge wie die Kaskade, die Hierarchie und die Spezifität auszunutzen. Jedoch stoßen viele der einstigen best practices schlichtweg an ihre Grenzen, wenn es um mehr gehen soll als nur das neue Blogdesign oder den One-Pager für den Friseurladen nebenan. Ganz speziell sind es drei Dinge, die auch mir als wirklich erfahrenen CSS-Artisten immer wieder Schwierigkeiten bereiten:

  1. Konsistentes Namenskonzept für Klassen
  2. Wiederverwendbarkeit von Styling-Regeln (in funktionierend)
  3. Überschreiben von Selektoren mit bereits zu starker Spezifität

Und genau bei diesen drei Dingen kann BEM uns behilflich sein. Es lohnt sich also, dranzubleiben!

Die Grundprinzipien

BEM ist eine freiwillige Konvention und eine Systematik, wie man Klassen in HTML vergibt und diese in CSS nutzt. Es ist eine Empfehlung und ein Vorschlag, aber kein festes Framework. Man könnte zwar theoretisch Software schreiben, die BEM irgendwie automatisch generiert, aber das ist alles Quatsch – wir nutzen BEM einfach als eine Möglichkeit, unseren CSS-Code gut zu organisieren, damit wir uns nicht mehr so oft an den Kopf greifen müssen.

Mit BEM vereinheitlichen und vereinfachen wir die Prinzipien von CSS noch stärker, so dass man von einer wirklich minimalistischen Struktur sprechen kann. Es wird auf so vieles verzichtet!

  • Alle(!) CSS-Selektoren bestehen aus lediglich je einer Klasse
  • Es gibt keine id-Selektoren (#header {}) und auch keine Baustein-Selektoren (h2 {})
  • Verschachtelungen jeglicher Art sind ebenfalls nicht erlaubt
  • Selbstredend ist auch !important kein Thema

Somit besitzt jeder Selektor die gleiche Spezifität und es entscheidet nunmehr ausschließlich die Reihenfolge im Quelltext, welche Regel greift. Peace of mind – die Spezifitätskriege sind vorbei!

Gleichzeitig hat dies aber zur Folge, dass jeder Baustein, welchen ich gezielt stylen möchte (also wirklich jeder!), mindestens eine Klasse erhalten muss, selbst wenn es sich um ein blödes a innerhalb eines li einer Navigation handelt. Das ist ganz schön hart! Es bläht den HTML-Code auf, macht ihn weniger gut lesbar und nimmt dem CSS-Code scheinbar seine Eleganz. Früher hätten wir beispielsweise so etwas geschrieben:

<ul class="navi">
    <li><a href="ueberuns.html">Über uns</a></li>
    <li><a href="vision.html">Vision</a></li>
    <li class="active"><a href="kontakt.html">Kontakt</a></li>
</ul>

ul.navi a {
    color: #090;
    text-decoration: none;
}

ul.navi .active > a {
    color: #000;
}

Mit BEM sieht das im Vergleich erstmal schlimm aus:

<ul class="navi">
    <li class="navi__item">
        <a class="navi__link" href="ueberuns.html">Über uns</a>
    </li>
    <li class="navi__item">
        <a class="navi__link"  href="vision.html">Vision</a>
    </li>
    <li class="navi__item navi__item--active">
        <a class="navi__link navi__link--active" href="kontakt.html">Kontakt</a>
    </li>
</ul>

.navi__link {
    color: #090;
    text-decoration: none;
}

.navi__link--active {
    color: #000;
}

Was stört uns intuitiv daran? Ich vermute, es ist zum einen die schiere Menge an langen, redundanten Klassen, und zum anderen die Klassennamen, die die Hierarchie des HTML-Konstruktes noch einmal doppeln. Warum nutzen wir nicht einfach die bereits vorhandene HTML-Hierarchie (ul als Container von li sowie li als Container von a) und machen damit sowohl das HTML als auch das CSS kürzer und eleganter?

Weil wir uns mit dieser „physischen“ Hierarchie jede Menge Ärger einhandeln, der am Anfang noch nicht als Ärger erkennbar ist, aber ab einer gewissen Projektgröße das Potenzial hat, den CSS-Code quasi unpflegbar zu machen. Auch wenn es ein Kernkonzept von CSS ist: Hierarchie auf Selektor-Ebene skaliert nicht. Deshalb verzichtet BEM darauf und bildet eine (vereinfachte) Hierarchie ausschließlich in den Klassennamen ab.

Die BEM-Klassennamen

Ich habe ganz bewusst darauf verzichtet, das Akronym BEM gleich am Anfang meines Textes zu erläutern, denn es verwirrt nur. (Genauso wie es keinen Sinn macht, die Cascade von CSS gleich am Anfang zu erläutern.) Doch nun ist der richtige Zeitpunkt gekommen! BEM steht für Block, Element und Modifier und beschreibt die Systematik, nach der die Klassennamen ausgedacht und vergeben werden. Keine große Sache.

Ein Block ist ein Container von grundsätzlich beliebiger Komplexität. Er enthält mehrere Elemente, die sinnvoll zum Block passen und diesen mit Leben füllen. Jeder Block und jedes Element kann außerdem einen optionalen Modifier haben, der das entsprechende Basis-Styling mit zusätzlichen CSS-Eigenschaften abwandelt und verfeinert, so dass es eben mehrere unterschiedliche Styling-Varianten dafür geben kann.

Die Schreibweise der BEM-Klassen ist zwar nicht platzsparend, aber einfach:

  • Blöcke haben ganz normale semantische Klassen: class="pagination"
  • darin enthaltene Elemente werden mit zwei Unterstrichen notiert: class="pagination__link"
  • Abwandlungen der Elemente erhalten, zusätzlich zur Originalklasse, eine mit Doppeltrennstrich ergänzte Variante: class="pagination__link pagination__link--active"
  • Aber auch Blöcke können direkt als Ganzes abgewandelt werden, insbesondere bei gewünschter Positionierung an anderer Stelle: class="pagination pagination--aside"

Übrigens: Styling-Varianten, die man im CSS über den Kontext eines im übergeordneten HTML-Bausteins realisiert, sind verboten, von daher kann es durchaus mal sein, dass man mehrere Elemente eines Blockes einzeln modifizieren muss, wie im oberen Beispiel mit dem --active-Modifier.

Übrigens 2: Natürlich zwingt euch niemand, absolut jeden Baustein mit einer Klasse zu versehen. Was ihr nicht stylen müsst, muss auch nicht verBEMt werden.

BEM als Parallel-„DOM“

Wichtig zu beachten ist, dass es im Verhältnis vom Block zu seinen Elementen nur eine einzige Hierarchie-Stufe gibt: alle Elemente eines Blocks sind – mit der BEM-Brille gesehen – auf einer Ebene, unabhängig davon, wie tief sie innerhalb des HTML tatsächlich verschachtelt sind. Somit bauen wir uns mit BEM im Grunde eine Parallel-Struktur auf, die sich auf zweierlei Arten vom HTML emanzipiert:

  1. Sie schafft eine eigene Hierarchie, die sich im Extremfall nur locker am vorhandenen HTML orientiert.
  2. Sie ist komplett „Tag-agnostisch“: Das Herumspielen mit h1- bis h6-Ebenen (SEO, anyone?) und das Anreichern mit HTML5-Semantik in Form von aside-, section- oder subhead-Tags hat keinerlei Auswirkungen auf das Styling. Ihr ahnt nicht, wie befreiend das ist!

Elemente, die gleichzeitig Blöcke sind

Ich schrieb oben, dass Blöcke eine grundsätzlich beliebige Hierarchie ausweisen können – und das stimmt auch. Denn wenn beispielsweise eine Gruppe von drei gleichartigen Teaserboxen nebeneinander dargestellt werden soll (für mobile natürlich untereinander), so habe ich ja zum einen das gesamte Teaserkonstrukt als Block, in dem die drei Teaser meine Elemente bilden. Zum anderen kann man sich aber auch jeden einzelnen Teaser als Block mit seinen unterschiedlichen Elementen wie Headline, Vorschaubild usw. vorstellen

Eine beispielhafte HTML-Struktur sähe nackt so aus:

<section>
    <article>
        <h3>Teaser 1</h3>
        <img src="" alt="" />
        <p>…</p>
    </article>
    <article>
        <h3>Teaser 2</h3>
        <img src="" alt="" />
        <p>…</p>
    </article>
    <article>
        <h3>Teaser 2</h3>
        <img src="" alt="" />
        <p>…</p>
    </article>
</section>

Unsere article-Bausteine könnten also Elemente der section sein, gleichzeitig aber als Blöcke für h3, img und p fungieren. Dies sähe in der Praxis dann so aus:

<section class="teasers">
    <article class="teasers__box box">
        <h3 class="box__headline">Teaser 1</h3>
        <img src="" alt="" class="box__image"  />
        <p class="box__intro">…</p>
    </article>
    <article class="teasers__box box box--highlight">
        <h3 class="box__headline">Teaser 2</h3>
        <img src="" alt="" class="box__image"  />
        <p class="box__intro">…</p>
    </article>
    <article class="teasers__box box">
        <h3 class="box__headline">Teaser 3</h3>
        <img src="" alt="" class="box__image"  />
        <p class="box__intro">…</p>
    </article>
</section>

Es hat sich als gute Konvention erwiesen, wenn der Name des untergeordneten Blocks identisch mit seinem Element-Anhängsel ist, in diesem Beispiel eben teasers__box und box. Somit macht man die Übergabe sichtbar. Es ist aber keine Pflicht.

Grundsätzlich lässt sich allerdings auch argumentieren, dass es hier keiner weiteren Block-Ebene bedarf. Man könnte auch den teasers-Block als Alleinherrscher walten lassen, etwa so:

<section class="teasers">
    <article class="teasers__box">
        <h3 class="teasers__headline">Teaser 1</h3>
        <img src="" alt="" class="teasers__image"  />
        <p class="teasers__intro">…</p>
    </article>
    <article class="teasers__box teasers__box--highlight">
        <h3 class="teasers__headline">Teaser 2</h3>
        <img src="" alt="" class="teasers__image"  />
        <p class="teasers__intro">…</p>
    </article>
    <article class="teasers__box">
        <h3 class="teasers__headline">Teaser 3</h3>
        <img src="" alt="" class="teasers__image"  />
        <p class="teasers__intro">…</p>
    </article>
</section>

Modularität auf Block-Ebene

Welches der obigen Beispiele euch besser gefällt, macht ihr am besten davon abhängig, wie komplex das Geschehen in den einzelnen Teasern sein soll, und ob man die Boxen auch evtl. einmal einzeln benötigt, ohne den teaser-Block drum herum.

Denn dies ist der Kern des Modularitäts-Versprechen von BEM: Wenn wir einen Baustein als Block ansehen, lässt er sich im HTML überallhin verpflanzen und sieht für sich genommen an jeder Stelle auch gleich aus. Sprechen wir hingegen den Baustein als untergeordnetes Element an, kann er von der Platzierung her mit ebenbürtigen Elementen interagieren – beispielsweise eine horizontale Reihe bilden, oder als Flexbox-Item noch viel interessanter im Kontext positioniert werden.

Ich nenne dies die duale Natur von BEM-Bausteinen: Sie können gleichzeitig Welle und Teilchen Block und Element sein. Oder, als CSS-Code formuliert:

.box { border: 1px solid #000; background: #ccc; }
.box--highlight { background: yellow; }
.teasers { display: table; }
.teasers__box { display: table-cell; }

BEM und Sass

Die unhandlichen Klassennamen von BEM-Projekten sind natürlich nicht nur im HTML ein visuelles Problem, sondern auch in handgeschriebenem CSS. Wer fuhrwerkt schon gerne in Code herum, der so aussieht:

.newsteaser {
    border: 1px solid #000;
    background: #ccc;
    padding: 1em;
}

.teasergroup {
    width: 80%;
    overflow: hidden;
}

.teasergroup__headline {
    font-size: 1.5em;
}

.teasergroup__newsteaser {
    float: left;
    width: 33%;
}

.teasergroup__newsteaser--emphasized {
    border-color: red;
}

Da viele von euch für das Schreiben von CSS sowieso einen Präprozessor verwenden, kann man beispielseise mit Sass die BEM-Hierarchie auch mit den entsprechenden Einrückungen abbilden:

.newsteaser {
    border: 1px solid #000;
    background: #ccc;
    padding: 1em;
}

.teasergroup {
    width: 80%;
    overflow: hidden;
    &__headline {
        font-size: 1.5em;
    }
    &__newsteaser {
        float: left;
        width: 33%;
        &--emphasized {
            border-color: red;
        }
    }
}

Wichtig dabei: Auch bei dieser scheinbar hierarchischen Verschachtelung verändert sich keineswegs die Spezifität der Selektoren. Alle Bausteine werden absolut gleichwertig angesprochen, lediglich die Reihenfolge entscheidet bei Konflikten, welche Regel gewinnt. Deshalb ist es auch sinnvolle Praxis, das für sich stehende Block-Styling eines dualen Bausteines zuerst zu behandeln, und erst im Anschluss daran die Platzierung und Anpassung im Kontext eine übergeordneten Blockes. Diese ist spezifischer und gehört von daher weiter nach hinten.

Fazit

Genau wie einige andere Ansätze (OOCSS oder SMACSS) versucht BEM, die negativen Erfahrungen, die jeder CSS-Entwickler in komplexen und sich agil entwickelnden Layouts unweigerlich macht, zu mindern. Dabei geht es nicht darum, eine Metasprache zu schaffen, wie es Sass tut. Sondern es geht darum, die vorhandenen Möglichkeiten von CSS sinnvoll zu nutzen sowie gefährliche Praktiken zu vermeiden.

CSS wurde, genau wie HTML, nicht von visuellen Designern erdacht, sondern von Informatikern. Trotzdem müssen wir heute Layouts damit umsetzen, die sehr wohl von Designern stammen. Manchmal sind es wir Designer selber, die mit CSS unsere Ideen umsetzen. Und die Projekte werden immer komplizierter, insbesondere in einem responsiven Web. Seien wir nicht traurig, dass wir superclever verschachtelte Child-Selektoren und mühsam erlernte Spezifitäten hinter uns lassen – sie haben sich einfach auf Dauer nicht bewährt und mehr Probleme aufgeworfen als gelöst.

Ich habe es selber ausprobiert und werde vorerst dabei bleiben; Ein Projekt mit BEM aufzubauen sorgt bei mir für gesunden Blutdruck und entspannte Gesichtszüge. Fast wie eine Wellness-Massage. Und das ist tatsächlich nur dezent übertrieben :-)

]]>