Text und Medien

Die perfekte Verbindung für Content-Inszenierung

Worum geht's?
Die Text-Media-Kombination auf Websites bietet viele Vorteile, darunter eine bessere Kommunikation, erhöhte visuelle Attraktivität, verbesserte Benutzererfahrung und eine effektivere Vermittlung von Informationen.

Gut zu wissen
Dieses Modul bietet vielfältige Pflegemöglichkeiten in TYPO3: von Textausrichtung über Schriftgrößen bis hin zur Platzierung eines Bildes, Videos oder Audiodatei.

Hier eine Überschrift in XXL

Beispielhafter nur teilweise gefetteter Untertitel 
mit Zeilenumbruch in M

Für Artikel und längere Texte ist es am schönsten, ein Text-Bild-Element zu nutzen. Das lockert den Text auf. Das Bild erscheint mobil über dem Text. Wenn eine Überschrift hinterlegt ist, dann erscheint sie über dem Bild. Die Überschrift kann aber auch weggelassen werden.

Innerhalb des Textes wichtige Punkte zu fetten oder Aufzählungen bzw. nummerierte Listen einzufügen ist auch gut für die Online-Leser. Links können ebenfalls gesetzt werden. 

Nummerierte Liste links ausgerichtet

  1. nummerierte Liste erster Eintrag
  2. nummerierte Liste ein weiterer Eintrag

Aufzählung mittig ausgerichtet:

  • Aufzählung Eintrag 1
  • Aufzählung Eintrag 2
  1. Aufzählung Eintrag 1 
    weitere Informationen nach einer bold Überschrift 
  2. Aufzählung Eintrag 2
     

Barrierefreiheit

Um die Barrierefreiheit gemäß WCAG 2.2 zu gewährleisten, ist es erforderlich

  • 3.1.2
    einzelnen Textstellen eine redaktionell alternative Sprache zuweisen zu können. 
    So wird sichergestellt, dass der Text bei der Sprachausgabe korrekt ausgesprochen wird. Hier ein Beispiel für eine englische Textstelle: destination.base und eine französische Textstelle: Champagner.
  • 3.1.4
    redaktionell Erklärungen für Abkürzungen hinterlegen zu können. 
    Bspw. bei mouse over wird für den unterstrichenen Begriff die redaktionell gepflegte Erklärung angezeigt.

 

Dies ist die Überschrift in XL

Dies ist der Untertitel in L

Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext. Genau zu diesem Zwecke erschaffen, immer im Schatten meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen.

Dies ist eine Zwischenüberschrift in L

Hier der alternative Text
© Hier steht das copyright

Sehen Sie, Webstandards sind das Regelwerk, auf dem Webseiten aufbauen. So gibt es Regeln für 

  • HTML,
  • CSS,
  • JavaScript oder auch XML; 

Worte, die Sie vielleicht schon einmal von Ihrem Entwickler gehört haben. Diese Standards sorgen dafür, dass alle Beteiligten aus einer Webseite den größten Nutzen ziehen. Im Gegensatz zu früheren Webseiten müssen wir zum Beispiel nicht mehr zwei verschiedene Webseiten für den Internet Explorer und einen anderen Browser programmieren.

Der Text bricht um, wenn er das Bild erreicht. Wenn der Text so lang ist, sollte das Bild rechts sein, da der Umbruch sonst nicht gut aussieht. Die Ansicht mit viel Text und Umbruch ist gerade für längere Artikel (Blog, News) sinnvoll. Für eine inpirationelle Übersicht mit viel Text sind mehrere Text-Bild-Bühnen sinnvoller. Dann kann die Ansicht durch wechselnde Links/Rechts-Bilder aufgelockert werden. Wenn man nicht möchte, dass der Text umbricht, muss eine zweispaltige Bühne genutzt werden.

Noch eine Überschrift in M

Alternativer Text
CC-BY-NC-ND Laborum ex Lorem enim reprehenderit. Veniam officia velit sunt et officia ipsum Lorem fugiat.

Es reicht eine Seite, die - richtig angelegt - sowohl auf verschiedenen Browsern im Netz funktioniert, aber ebenso gut für den Ausdruck oder die Darstellung auf einem Handy geeignet ist.

  • Wohlgemerkt: Eine Seite für alle Formate. Was für eine Erleichterung.
  • Standards sparen Zeit bei den Entwicklungskosten und sorgen dafür, dass sich Webseiten später leichter pflegen lassen.

Natürlich nur dann, wenn sich alle an diese Standards halten. Das gilt für Browser wie Firefox, Opera, Safari und den Internet Explorer ebenso wie für die Darstellung in Handys.

 

"Und was können Sie für Standards tun?"

Fordern Sie von Ihren Designern und Programmieren einfach standardkonforme Webseiten. Ihr Budget wird es Ihnen auf Dauer danken. Ebenso möchte ich Ihnen dafür danken, dass Sie mich bin zum Ende gelesen haben.

Dies ist der Titel (Stil L)

Unter dem Titel steht per Default der Untertitel (Stil M)

Der Untertitel steht hier oberhalb des Titels (Stil M) 

Dies ist der Titel (Stil L)

Der Tausch von Titel und Untertitel ist durch eine Option im TYPO3 Backend möglich

Beispiel A

Einzelnes Bild

Alternativer Text
CC-BY-NC-ND Laborum ex Lorem enim reprehenderit. Veniam officia velit sunt et officia ipsum Lorem fugiat.

Beispiel B

Einzelnes Video

Beispiel C

Einzelne Audiodatei

00:00