Text und Medie

D perfekte Verbindig für d Content-Inszenierig

Sprechblase mit dem Wort Info

Um was geit's?
D’Kombination vo Text und Medieelement uf Websites bringt viu Vorteil: besseri Kommunikationsmöglichkeite, meh visuelli Attraktivität, e verbessereti Nutzererfahrig und e effizienteri Wiitergäb vo Informations.

Guet z’wüsse
Das Modul bietet viu verschideni Pflegemöglichkeite i TYPO3: vo de Textrichtige über d'Schriftgrössi bis zur Positionierig vo enem Bild, Video oder Audio-Datei.

Live-Demo

Da e Überschrift i XXL

Beispielhaft nur teilwiis fette Untörtitel 
mit Linieumbrüch i M

Für Artikel und längeri Text isch es am schönschte, es Text-Bild-Element z'bruuche. Das macht de Text e bitz lockerer. s'Bild wird uf em Handy über em Text azeigt. Wenn e Überschrift hinerlegt isch, denn wird sie über em Bild azeigt. D'Überschrift cha aber au wegglah werde.

Im Text es paar wichtige Punkt fett z'mache oder Aufzüeligs resp. nummerierti Lischti iizfüege isch e gueti Sach für d'Online-Leser. Links chönd au setzt werde. 

Nummerierti Lischt links usgrichtet

  1. nummerierti Lischt erschte Iitrag
  2. nummerierti Lischt no e weitere Iitrag

Ufzälig mitti usgrichtet:

  • Ufzälig Iitrag 1
  • Ufzälig Iitrag 2
  1. Ufzälig Iitrag 1 
    meh Infos noch ere fette Überschrift 
  2. Ufzälig Iitrag 2
     

Barrierefreiheite

Um d Barrierefreiheit nach WCAG 2.2 z gewährleiste, isch s nöt

  • 3.1.2
    einzelnä Textstellig chöi e redaktionell alternative Sprach zuewiese wärde. 
    So wird sichergstellt, dass dä Text bi dr Sprachausgab richtig usgschproche wird. Da es Bispil für e englischi Textstell: destination.base und e französischi Textstell: Champagner.
  • 3.1.4
    redaktionell Erklärige für Abkürzige chöi hinderlegt wärde. 
    Bspw. bi mouse over wird für dä unterstrichene Begriff d redaktionell pflegt Erklärung azeigt.

Das isch d Überschrift i XL

Das isch dr Untertitel i L

Überall di glychi alte Läit. S Layout isch fertig, aber dr Text laht uf sich warte. Damit s Layout nöd blutt do stoht und sich chle und läär vorgoht, spring ich i: dr Blindtext. Genau für dä Zweck gmacht, immer im Schatte vo mim grosse Bruder «Lorem Ipsum», freu ich mi jedes Mol, wenn du e paar Zile lisisch.
Zum dä Abschnitt es bitz interessanter z' mache, wird dr Text zwäispaltig uusgäh. Voraussetzung derfür isch e Spaltebriiti vo mindeschtens 384px.

Das isch e Zwüschetitel i L

[Translate to Schweizerdeutsch:] Hier der alternative Text
© Hier steht das copyright

Lueg, Webstandards sind d’Regle, wo üs d’Grundlaag fürs Ufboue vo Webseiten gäh. Es git also Regle für 

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

Begriffe, wo Du villech scho mol vo Dinem Entwickler ghört hesch. Die Standards sorged derfür, dass alli, wo dinä Website involviert sind, dr gröschte Nutzen derus zieh chönd. Im Unterscheid zu früeneren Websites mues mer hütt zum Bispiel nümme zwöi verschideni Webseiten für dr Internet Explorer und e andere Browser programmiere.

Dr Text bricht um, wenn er s’Bild erreicht. Wenn dr Text so lang isch, sött s’Bild rächts si, will s’äbe suscht nöd guet usegseht. D’Ansicht mit viel Text und Umbruch isch grad für längeri Artikel (Blog, News) sinnvoll. Für e inspiratiounsrichi Iiberblick mit viel Text sind mehri Text-Bild-Bühne sinnvoller. Denn cha d’Ansicht dur wechselndi links-/rächts-Bilder ufglockeret werde. Wenn mer nöd wott, dass dr Text umbricht, mues mer e zweispaltigi Bühne neh.

No e Überschrift i M

Landschaftsfoto mit einem See vor einem Bergpanorama und Wäldern
Urheberrecht sunt et officia ipsum Lorem fugiat. | CC-BY-NC-ND

Es git e einzigi Site, wo – korrekt ufgsetzt – sowohl i verschidene Browser im Netz funktioniert, aber grad so guet zum Drucke oder für d Darstellig ufem Handy passt.

  • Wohlgmerkt: Eini Site für alli Formate. Was für e Erliichterig.
  • Standards sparä Zyt bi de Entwickligskostä und sorged derfür, dass sich Websitä spöter eifacher pflege lah.

Natürlich nume denn, wenn sich alli a die Standards haled. Das gilt für Browser wie Firefox, Opera, Safari und s Internet Explorer genau so wie für d Darstellig uf Handys.

«Und was chasch du für Standards mache?»

Forder vo dine Designern und Programmierer eifach standardkonformi Websitä. Dis Budget wird dir uf d Dauer dankbar si. Und au ich möcht dir danke, dass du bis zum Änd durchgläse hesch.

Artikel-Container über volle Content-Briti

Animation eines Kolibris, der auf eine Blume zufliegt
© Hier steht das copyright

Dä Artikel-Container isch so konfiguriert, dass sini redaktionelli Inhalt über d ganze Inhaltsbriti azeigt wird. So isch er bündig mit de andere Inhaltselemente usgrichtet.
Zum die Darstellung z aktiviere, mues im TYPO3-Backend bim Inhaltselement „Artikel-Container“ d Option „Artikel-Container über volle Content-Briti“ gwählt sii.

Artikel-Container mit Standard-Briti

Animation eines Kolibris, der auf eine Blume zufliegt
© Hier steht das copyright

Dä Artikel-Container isch uf d Standardbräit begränzt und hebt sech drum optisch vo de andere Inhaltselement ab.
Im TYPO3-Backend isch d Option „Artikel-Container über volle Content-Breite“ nöd aktiviert worde.

Das isch dr Titel (Stil L)

Unterem Titel staht standardmässig de Untertitel (Stil M)

Dr Untertitel staht da obe über em Titel (Stil M) 

Das isch dr Titel (Stil L)

Dr Tausch vom Titel und Untertitel cha mit ere Option im TYPO3-Backend gmacht werde