procedo-personalservice.de 
Formate-test Fließtextelemente
FLIEßTEXTELEMENTE
Fließtext Elemente um einfach nur Text auf die Seite zu bringen
Benutzen Sie Text-Elemente, um einfachen textlichen Inhalt einzupflegen. Verwenden Sie bitte für jeden neuen Gedanken (beispielsweise eine Zwischenüberschrift) ein neues Element. Achten Sie dabei und generell bei allen eingesetzten Elementen mit Überschrift immer auf eine korrekte Überschriftenhierarchie.
Eine semantische Gliederung der Texte bzw. der Inhalte auf einzelnen Webseiten eines Auftritts muss zwingend eingehalten werden. Auf eine h1 darf keine h3 oder geringer folgen. Einzelne Webseiten eines Auftritts sind in diesem Zusammenhang ähnlich einem Aufsatz. Die h1-Überschrift ist der Aufsatztitel. Alle weiteren Überschriften (ab h2-Überschriften) gliedern dann den restlichen Inhalt einer Seite semantisch sinnvoll. Stellen Sie sich den Inhalt/Text einer einzelnen Webseite Ihres Auftritts als Gliederung vor – was sind Unterpunkte? Was ist die Hauptüberschrift? – und stellen Sie die Überschriften entsprechend ein.
Überschriften können Zusatzzeilen haben
Jede Überschrift kann optional immer auch eine Zusatzzeile haben. Diese Zusatzzeile ist als nähere Beschreibung zur Überschrift zu verstehen und nicht dazu gedacht, dort Fließtext bzw. generell längere Texte einzupflegen. Bitte pflegen Sie Fließtext immer in den Textbereich (Text-/Editor-Feld) eines Elements ein. Achten Sie auf Grammatik und Zeichensetzung und lesen Sie nochmal Korrektur, bevor Sie einen Text veröffentlichen. Die User werden es Ihnen danken, wenn sie sich nicht durch Tippfehler und grammatikalisch sinnlose Sätze quälen müssen.
Aufzählungen sind manchmal sinnvoll
Sie können sowohl ungeordnete Aufzählungen (einfache Listenpunkte) als auch geordnete Aufzählungen (1., 2., 3.) erstellen. Das ist manchmal sinnvoll, um eine Zusammenfassung von kurzen Punkten leicht erfassbar darzustellen. Es ist aber nicht dazu geeignet, den gesamten Inhalt der Seite zu bestreiten.
Bitte überlegen Sie, ob die Aufzählung wirklich eine Aufzählung im klassischen Sinne ist oder ob Sie nicht vielleicht doch besser ein paar Sätze dazu schreiben. Aufzählungen können das Erfassen des Inhalts erleichtern oder erschweren. Sie haben es in der Hand.
Aufzählungen sollten immer einen kurzen, die Aufzählung einleitenden Satz voran gestellt haben; also nicht einfach direkt nach der Überschrift die Aufzählung beginnen, sondern nach der Überschrift einen einleitenden Satz und dann die Aufzählung.
Hier folgt zuerst eine sortierte Liste/Aufzählung:
- Punkt (sortierte Liste)
- Punkt
- Punkt
dann eine unsortierte Liste/Aufzählung:
- Punkt (unsortierte Liste)
- Punkt
- Punkt
Eine besondere Stellung hat die Definitionsliste
Die Definitionsliste kann nur im Quellcode eingebaut werden. Wenn Sie eine solche brauchen, dann wenden Sie sich bitte an die Koordination Web. Wir stellen Ihnen die Grundstruktur der Definitionsliste bereit. Im Anschluss können Sie die Liste ihrem Inhalt nach gestalten.
- Definitionsliste
- Eine Definitionsliste ist eine Liste von Begriffen, die näher beschrieben oder erklärt werden sollen. Man verwendet eine solche Liste beispielsweise für ein Glossar.
- Erst der zu definierende Begriff
- Dann die Erklärung des Begriffs in der zweiten Zeile
- Erst mit Return eine neue Zeile machen
- Danach können Sie mit der Tabulator-Taste umstellen, ob die Zeile den zu definierenden Begriff darstellt (wird im Editor gefettet) oder die Begriffserklärung ist
- Glossar
- Ein Glossar ist eine der Anwendungsfälle einer Definitionsliste. Hier kann man ungebräuchliche oder potenziell unbekannte Begriffe erklären.
- Bitte nicht!
- Verwenden Sie die Definitionsliste keinesfalls für Ansprechpartner, Termine oder andere Inhalte die keine Begriffsdefinition sind. Dafür gibt es andere, besser geeignete Elemente.
Dies ist eine Überschrift fünfter Ordnung H5
Es wird sehr selten passieren, dass Sie einen Text bis zu einer h5 bzw. bis zu einer fünften Hierarchieebene herunter gliedern müssen. Dafür müsste der Text schon sehr lang geraten sein, um das zu erfordern. Wenn Sie feststellen, dass Sie häufiger die h4 und h5 benötigen, dann sollten Sie ggf. über eine weitere Inhaltsseite nachdenken. Wenn Sie unsicher sind: Fragen Sie gerne im Marketing oder in der Koordination Web nach, was hier für den User sinnvoller sein könnte.
Generell ist es gut, wenn auf der Seite alle Informationen zum Thema übersichtlich dargestellt werden. Achten Sie dabei darauf, dass Sie die wichtigen Informationen an den Anfang stellen, damit diese sofort ersichtlich sind. Zusätzliche oder nachrangige Informationen sollten weiter unten platziert werden. Die Aufmerksamkeitsspanne des Lesers kann nachlassen. Daher sollten die Sachen, die nicht ganz so wichtig sind, weiter unten sein.
PS: Sie können Überschriften natürlich auch ohne Zusatzzeile einsetzen, wenn Sie keine benötigen. Die Zusatzzeile ist IMMER optional und hier nur deshalb nahezu überall vorhanden, damit wir testen können, ob es auch überall funktioniert.
Verlinkungen im Text
Achten Sie bei Verlinkungen bitte darauf, immer auch einen Linktitel zu vergeben. Dazu befüllen Sie beim Anlegen einer Verlinkung mit dem Dialog „Linkbrowser“ das dortige und bei jeder Linkart vorhandene Feld „Titel“. Ist ein Linktitel für eine Verlinkung korrekt gesetzt, erscheint, wenn mit dem Mauszeiger auf die fertige Verlinkung gefahren wird, der eingetragene Linktitel.
Achten Sie bei Verlinkungen darauf, nie die Wörter „hier“, „da”, „dort“ als Linktext (der anklickbare Text) zu verwenden. Nutzen Sie auch niemals die blanke Webadresse als Linktext (also nie „https://www.beispiel.de“ als Linktext).
Zwar werden die Linkicons – die kleinen Grafiken/Icons vor den Linktexten – im Normalfall automatisch gesetzt, es gibt aber Elemente (vgl. das Element „Verlinkte Liste“ mit externen Verlinkungen) bei denen händisch das entsprechende Linkicon gesetzt werden muss. Verlinkungen im Editor-Feld erhalten automatisch das korrekte Linkicon.
Verlinkungen zu Sprungmarken
Um einen Link auf eine händisch eingefügte Sprungmarke zu setzen – Sprungmarken können im Normalfall nur von der Qualitätssicherung oder Administratoren gesetzt werden –, muss man folgendermaßen vorgehen:
- Man setzt zuerst nur einen Link auf die Seite, auf der die anzuspringende Sprungmarke liegt. Das sieht dann im HTML-Quellcode so aus: <a title="Interner Link zur Seite „Formate-Test“" href="t3://page?uid=4">Formate-Test</a>
Anschließend muss dieser Link nochmal händisch angeglichen werden, damit er nicht nur auf die Seite (in diesem Fall die Seite mit der uID 4), sondern auch zur dort hinterlegten Sprungmarke führt.
- Das geht im Editor-Feld eines Inhaltselements nur, wenn mit der Editor-Schaltfläche „Quellcode“ in die HTML-Darstellung gewechselt wird.
- Bei Links, wie bei denen in Verlinkten Listen, kann die Auge+Kette-Schaltfläche genutzt werden, um den eingetragenen Seitenlink weiter zu bearbeiten.
Damit der Link zur Sprungmarke auf der verlinkten Seite führt, muss mit einem Hashtag die jeweilige ID der Sprungmarke angehängt werden (beispielsweise „#toGallery“).
- Aus <a title="Interner Link zur Seite „Formate-Test“" href="t3://page?uid=4">Formate-Test</a>
- wird <a title="Interner Link zur Seite „Formate-Test“" href="t3://page?uid=4#toGallery">Formate-Test</a>
Metadaten bei Bilddateien
Die Metadaten von Bildern (und PDFs) pflegen Sie bitte immer direkt im Modul „Dateiliste“. Metadaten bei Bildern sind sowohl für die Suchmaschinenoptimierung (SEO) als auch für die Barrierefreiheit Ihres Webauftritts von Bedeutung.
Bei den Metadaten von Bildern sind zwei Felder besonders wichtig:
- das Feld „Titel“ / „Title“ und
- das Feld „Alternativer Text“.
Im Feld „Alternativer Text“ muss eine kurze und der Barrierefreiheit dienende Bildbeschreibung eingepflegt werden. Personen, die sich wegen einer Einschränkung die Webseite vorlesen lassen, sollten mit dem Eintrag im Feld „Alternativer Text“ verstehen können, was auf dem Bild zu sehen ist und/oder welche Funktion das Bild auf der Webseite erfüllt.
Im Feld „Titel“ (erscheint, wenn der Mauszeiger auf einem Bild ruht) darf nicht der Dateiname wiederholt werden, sondern es muss ein knapper und möglichst SEO-relevanter Text eingetragen sein. Dieser Text kann einer kurzen Bildunterschrift ähneln.
Das Metadatenfeld „Beschreibung“ wird auf unseren Auftritten für Bildunterschriften herangezogen (abhängig vom Inhaltselement des Auftritts). Ein hier eingetragener Text sollte also als Bildunterschrift verwendbar sein. Tragen Sie im Feld „Beschreibung“ aber nur dann etwas ein, wenn eine Bildunterschrift notwendig wird; ansonsten lassen Sie das Feld bitte leer.
Die Dateinamen der im Modul „Dateiliste“ abgelegten Bilder (und PDFs) sollten ebenfalls mit Blick auf SEO möglichst kurz aber aussagekräftig/sprechend/lesbar gestaltet sein. Das heißt: Keine kryptischen Kürzel oder Zahlenkolonnen bei Dateinamen verwenden.
Aber nicht nur Bilder, auch PDFs (hier ist ein Eintrag im Feld „Titel“ ausreichend), News-Artikel und die einzelnen Seiten Ihres Webauftritts freuen sich – wie auch Suchmaschinen (Google & Co) – über die Pflege der je zugehörigen Metadaten. Gut gepflegte Metadaten beeinflussen die Auffindbarkeit und das Ranking Ihres Webauftritts äußerst positiv. Sind die Metadaten nicht gepflegt, wird ihr Auftritt von Suchmaschinen abgewertet.
Fließtext mit Bild (Bild rechts)
Diese Elemente sind dazu gedacht, rechts oder links neben dem Text ein Bild anzuzeigen, um den Inhalt zu verdeutlichen und/oder die Seite lockerer und ansprechender zu gestalten. Sehr lange Fließtexte ohne Abwechslung führen bei Usern leicht zu Ermüdung der Augen und fördern den Unwillen weiter zu lesen. Wenn hingegen immer wieder Abstände zwischen den Textblöcken sind und auch mal Bilder erscheinen, bieten Sie den Usern die Gelegenheit die Augen kurz auszuruhen und die Bereitschaft weiteren Text zu lesen bleibt erhalten.
Besonderheit: Diese Bilder können mit oder ohne Bildunterschrift angezeigt werden. Es muss zur Entwicklungszeit entschieden werden, wie groß die Bilder durchgängig sein sollen. Denn für Bilder mit Bildunterschrift ist eine festgelegte Bildbreite technisch notwendig. Aus Gründen der Stringenz sollte diese Bildgröße dann auch für alle anderen Bilder verwendet werden.
Die Standardeinstellungen sind:
- 465px Breite für Bilder in „Box mit Bild“
- 400px Breite für „Box mit Bild – klein“
Diese Werte können nach Ihren Präferenzen von der Koordination Web programmatisch angepasst werden, sind dann aber nicht mehr variabel.
Fließtext mit Bild (Bild links)
In diesem Element sieht man, wie das Bild mit Bildunterschrift aussehen würde. Natürlich ist die Bildunterschrift hier übertrieben lang. Dies um sicher zustellen, dass auch bei sehr langen Bildunterschriften das Ganze nicht zerbricht und in allen Größen funktionieren wird. Selbstverständlich kann man sich auch dazu entscheiden, immer auf Bildunterschriften zu verzichten. Dann wird nur das Bild angezeigt und dann wäre die Größe frei wählbar.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Wenn gewünscht, können hier auch Linkbuttons eingesetzt werden, um zu anderen Seiten zu springen. Um einen Linkbutton zu erzeugen, legen Sie zuerst eine einfache Textverlinkung in einem eigenen Absatz an. Dies ist dies dann der letzte Absatz des Elements. Anschließend weisen Sie der Verlinkung mit dem DropDown-Menü „Stil“ im Editor den Stil „a.btn_more“ („Button Mehr“) zu.
Fließtext mit Bild klein (Bild links)
Dieses schmale Layout des Text & Bild-Elements läuft in der selben Breite wie die reinen Textelemente. Sie kann darunter oder dazwischen eingefügt werden, um Textabschnitte aufzulockern. Das Element bringt einen unveränderlichen Abstand oben und unten von jeweils 120px mit sich. Dieser Abstand ist absichtlich und mit Bedacht so gewählt. Es hilft, die Seite „luftiger“ zu halten und den Usern eine klare Gliederung der Texte zu bieten. Durch die Abstände erscheint ein längerer Text nicht so mächtig und überwältigend. So werden die Textblöcke in der Darstellung in kleinere und damit leichter erfassbare Häppchen aufgeteilt.
Fließtext mit Bild klein (Bild rechts)
Hier dasselbe Element nochmal mit dem Bild auf der anderen Seite und einer (viel zu langen) Bildunterschrift.
In diesen Elementen kann übrigens je nach Bedarf auch verlinkt werden. Es können normale „Textlinks“ im Fließtext gesetzt werden oder auch Linkbuttons unter dem Text eingefügt werden. Beim Verlinken bitte immer darauf achten, den Linktitel auszufüllen und im Falle von externen Links ggf. die CSS-Klasse „lnk_extern“ zu verwenden, damit die korrekten Icons angezeigt werden.
Aufzählungen können nur in Elementen mit dem Bild auf der rechten Seite verwendet werden.
- Das ist technisch
- leider nicht
- anders möglich.