Wann hast du das letzte Mal deine Website gelesen? Laut und deutlich in der Lobby eines Starbucks an einem Wochentagnachmittag, am Telefon deinen Eltern vorgelesen oder vielleicht sogar als Gute-Nacht-Geschichte für deine Kinder.
Keine Sorge, das ist keine Fangfrage oder so etwas – nur ein Bauchgefühl.
Wenn es nur eine Sache gibt, die Sie tun können, um Ihre Website zu verbessern, dann könnten Sie eine ganze Menge schlechteres tun, als sich etwas Zeit zu nehmen, sie zu lesen. Ernsthaft, tun Sie mehr, als nur die Worte anzusehen – *lesen* Sie sie und nehmen Sie alles auf, was von oben bis unten gesagt wird. Und nehmen Sie sich wirklich Zeit dafür. Ich spreche davon, alles in der Navigation zu öffnen, Akkordeons zu erweitern, Modals zu öffnen und alles aufzunehmen. Lesen Sie sie so, wie Wendy's ihre Burger macht: ohne Abstriche.
Inhalt: Hoch lebe der... König?
Ich höre seit Jahren, dass Inhalt König ist – mit großem K und großem I auf der großen W-ebseite. Aus meiner persönlichen Erfahrung sehe ich Inhalte jedoch routinemäßig eher als Bettler in Projekten behandelt; die unterste Sprosse der Web-Leiter, die als nachträglicher Gedanke für den Fall aufbewahrt wird, dass alles andere erledigt ist. FPO überall. Es liegt nicht so sehr daran, dass sich niemand darum kümmert, was die Website sagt, sondern dass viel Aufmerksamkeit und Mühe auf Design und Architektur (unter anderem natürlich) gelegt wird, sodass wenig bis keine Zeit bleibt, eine effektive Strategie für Inhalte zu entwickeln.
Aber auch das ist nur meine Erfahrung, und es gab sicherlich Ausnahmen von dieser Regel.
Das Problem ist meiner Meinung nach, dass wir genau wissen, wie effektiv gute Inhalte sind, aber oft zuversichtliche Haltung, Werkzeuge und sogar ein klares Verständnis der Rolle von Inhalten im Web fehlen.
Inhalt ist Problemlösung
Wenn Inhalte sorgfältig ausgearbeitet sind, werden sie zu viel mehr als nur Textzeilen. Das liegt daran, dass Inhalte mehr sind als das, was wir im Frontend sehen. Sie stecken in den alt-Attributen, die wir schreiben. Sie sind auch die strukturierten Daten im Dokument <head>. Sogar, wir generieren sie manchmal in der CSS-Eigenschaft content.
Wir beginnen, die Kraft von Inhalten zu erkennen, wenn wir unser Verständnis dessen erweitern, was es ist, was es tut und wo es verwendet wird. Das könnte Inhalte zu einem der erweiterungsfähigsten Problemlösungswerkzeuge in Ihrem metaphorischen Werkzeugschuppen machen – es macht Websites zugänglicher, extrahiert Google-optimierende Superkräfte, generiert Verkäufe und schafft Wege für Benutzer, das zu erreichen, was sie tun müssen.
Inhalt möchte gesehen werden
Inhalte sind wie meine fünfjährige Tochter: sie hasst es, im Dunkeln zu sein. Ich würde argumentieren, dass wenig anderes Inhalte mehr besiegt als sie zu verstecken. Erinnern Sie sich an unseren metaphorischen Werkzeugschuppen? Inhalte können keine Probleme lösen, wenn sie außer Sicht sind. Inhalte sind dieses coole Studentenwohnheimposter, das Sie sofort aufhängen wollten, sobald Sie den Campus betraten – zeigen Sie es her, lassen Sie es seine Arbeit tun.
So wie ich es sehe, wenn etwas wichtig genug ist, um es zu tippen, ist es wahrscheinlich wichtig genug, um es auch zu zeigen. Das bedeutet, alles zu vermeiden, was es vor der Sicht des Benutzers verbergen könnte, wie zum Beispiel gegen einen Hintergrund mit schlechtem Kontrast oder Inhalte, die einen Container überlaufen lassen. Inhalte sind nur so gut, wie sie präsentiert werden. Ihre Website könnte die größte Wortakrobatik aller Zeiten aufweisen, aber das nützt nichts, wenn sie versteckt ist. Inhalte wollen gesehen werden.
Gibt es Zeiten, in denen es legitim in Ordnung ist, dass Inhalte ungesehen bleiben? Aber sicher doch. Skip-to-content-Links zum Beispiel. Ich gehöre nicht zu den Schreibtischdesignern (moment, sind nicht *alle* Designer in irgendeiner Art von Stuhl?), die Ihnen sagen werden, dass bestimmte UI-Elemente – wie Modals, Akkordeons und Karussells – böse sind. Es geht vielmehr darum, die beste Art und Weise zu kennen, Inhalte zu präsentieren, und manchmal ist die Einbettung in ein zusammengeklapptes <details>/<summary>-Element die beste Wahl.
Aber bitte, um der gesamten virtuellen Menschheit willen, verwenden Sie Elemente, um Inhalte zu verbessern, nicht um deren Probleme zu maskieren.
Inhalt ist effizient
Man sagt, ein Bild sagt mehr als tausend Worte, oder? Ich meine, das ist cool, schätze ich. Aber *was* genau sind diese Worte und *wer* entscheidet, was sie sind? Der Endbenutzer natürlich! Bilder sind meistens subjektiv, was sie zu einer großartigen Ergänzung für Inhalte macht. Aber Bilder als vollständiger Inhalt Ersatz? Ich stelle mir vor, dass es viel öfter effektiver ist, Inhalte mit Bildern zu kombinieren, als ein Bild allein zu verwenden.
Es kommt natürlich darauf an.
Etwas, worauf wir uns alle einigen können, ist, dass Inhalte weitaus effizienter sind als die meisten Bilder. Erstens gibt es weniger Raum für Mehrdeutigkeit, wodurch Inhalte effizienter sind, um einen Punkt zu vermitteln. Wer braucht die Darstellung von tausend Worten, wenn wir dasselbe genauso effektiv in ein paar getippten Worten kommunizieren können?
Dann gibt es jede Menge Zugänglichkeitsaspekte zu berücksichtigen, wenn es um Bilder geht. Ein Hintergrundbild kann einem Screenreader keine Idee vermitteln; das heißt, es sei denn, wir binden es direkt ein, setzen das alt-Attribut und verwenden eine geschickte CSS-Positionierung, um eine Art gefälschten Hintergrund zu erstellen ("Faukground"?). Selbst dann befassen wir uns bereits mit dem alt-Attribut, also könnten wir es genauso gut für den echten Gebrauch verwenden und es anzeigen! Das ist weitaus effizienter, als darum herum zu programmieren.
Wir haben noch nicht einmal darüber gesprochen, wie viel größer die Kilobytes und Megabytes einer Bilddatei im Vergleich zu Inhaltsbytes sind, selbst in einem Artikel, der so voller Inhalte steckt wie dieser. Und ja, das verdient eine große Einschränkung in Form von Webfonts und den Auswirkungen, die diese auf die Leistung haben können, aber so ist das Leben.
Inhalt und Design arbeiten besser zusammen
Nur weil ich zuvor gesagt habe, dass Inhalte König sind, bedeutet das nicht, dass ich glaube, dass sie über allem anderen herrschen. Tatsächlich finde ich, dass Inhalte genauso auf Design angewiesen sind wie Design auf Inhalte. Es gibt keinen Käfigkampf, bei dem einer gegen den anderen um Leben und Tod antritt.
Die beiden arbeiten Hand in Hand. Ich würde sogar so weit gehen zu sagen, dass ein Großteil des Designs darin besteht, das, was auf einer Seite kommuniziert wird, zu verbessern. Keines der beiden überstrahlt das andere. Denken Sie an Inhalte und Design als unterstützend zueinander, wobei die Summe beider zu einem überzeugenden Call-to-Action, einem langen Beitrag, einem Heldenbanner und so weiter führt. Wir denken oft an Muster in einem Designsystem als eine Sammlung von Komponenten, die zusammengenäht werden, um etwas Neues zu schaffen. Die Paarung von Inhalten und Design funktioniert ganz ähnlich.
Warum lesen Sie das also?
Gehen Sie und lesen Sie Ihre Website... jetzt sofort. Lesen Sie sie laut vor. Bringen Sie sie ans Licht und lassen Sie sie gesehen und gehört werden. Dafür ist sie da. Sie ist Ihr Freund, um eine bessere Website zu erstellen – sei es, um sie zugänglicher, profitabler, performanter, auffindbarer und persönlicher zu machen. Sie bringt Benutzer von Punkt A nach Punkt B. Sie ist, wie wir uns im Web bewegen und wie das Web untrennbar miteinander verbunden ist.
Und bitte, bitte, bitte nehmen Sie sich auf, wie Sie Ihre Website laut vorlesen. Wie cool wäre es, wenn die Kommentare in diesem Beitrag eine lebendige Sammlung wären, die Inhalte feiert und sie hörbar macht!
Also habe ich die DevTools geöffnet, um zu sehen, wie die roten/orangen Ränder am Ende des Artikels erstellt wurden.
Können Sie bitte mehr darüber erzählen? Es scheint WordPress-Blockgruppen (von denen ich nichts wusste) und auch generierte CSS-Klassen (ticss-90777846, ticss-4a503671, ...) zu nutzen.
Danke