Auf dieser Seite finden Sie Beispiele dafür, wie die im neuen Drupal verfügbaren Gestaltungselemente ("Paragraphs") nicht eingesetzt werden sollten oder welche Fehler durch neue Redakteure und Redakteurinnen häufig gemacht werden.
Es kann vorkommen, dass dass zentrale Webteam kleinere Fehler (fehlende Abstände, Überschriftenhierarchie) selbst korrigiert. Werden größere Baustellen auf Ihren Seiten identifiziert, werden Sie kontaktiert.
Diese Seite wird regelmäßig erweitert!
Schlecht: Wilder Mix von Elementen im Spaltenlayout
...insbesondere, wenn offensichtlich ist, dass das Element im Spaltenlayout nicht richtig dargestellt wird.
Beispiel
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
Infos
- Example 1
- Example 2
- Example 3
Kontakt
Bei Fragen wenden Sie sich bitte an...
Verboten: Nutzung von Tabellen zu Layout-Zwecken
... Tabellen sind nur zur Darstellung von Daten zu nutzen!
| Ansprechpartner | |
|---|---|
Max Mustermann Akademiestraße 6 Büro 3 | Zum Mitarbeiterprofil |
Max Mustermann Akademiestraße 6 Büro 3 | Zum Mitarbeiterprofil |
Schlecht: Elemente im Layout-Paragraph...
..., die nicht in der Höhe angeglichen sind.
Beispiel 2
Beispiel:
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. 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.
Besser:
Beispiel 2
Beispiel:
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. 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.
Verboten: Nutzung von Überschriften zur Formatierung
...und damit Nicht-Einhaltung der Überschriftenhierarchie!
--
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.
Schlecht: VERSALIEN
... in Überschriften, Buttons, Akkordeons, etc. sollte vermieden werden um Texte hervorzuheben.
BEISPIEL
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
Besser:
... normal schreiben für mehr Übersichtlichkeit.
Beispiel
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
Schlecht: Lange Fließtextseiten
... ohne jegliche Auflockerung oder keine Navigation woanders hin.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 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. 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. 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. 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. 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.
Besser: Mix verschiedener Elemente
... für eine bessere Übersichtichkeit.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
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. 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.
Beispiel 1
Beispiel 2
Schlecht: Zu viele Linien
Beantragung der Beurlaubung
Studierende können auf eigenen Antrag in der Regel bis Semesterbeginn aus wichtigem Grund vom Studium beurlaubt werden ...
Gründe für eine Beurlaubung
- Krankheit,
- Vorbereitung auf Wiederholungsprüfungen,
- Studienaufenthalt im Ausland, ...
Eine Beurlaubung ist unzulässig
- für das erste Fachsemester bzw. für das Fachsemester in das eine Einstufung bei Hochschul- oder Studiengangwechsel vorgenommen wurde sowie in der studienvorbereitenden Ausbildung, ausgenommen bei lang andauernder Krankheit oder bei Vorliegen der Mutterschutzfrist bzw. Elternzeit, ...
Dauer der Beurlaubung
- Die Dauer der Beurlaubung regelt § 20 Abs. 2 SächsHSFG und soll die Zeit von insgesamt zwei Semestern nicht überschreiten ...
Besser:
Beantragung der Beurlaubung
Studierende können auf eigenen Antrag in der Regel bis Semesterbeginn aus wichtigem Grund vom Studium beurlaubt werden ...
Gründe für eine Beurlaubung
- Krankheit,
- Vorbereitung auf Wiederholungsprüfungen,
- Studienaufenthalt im Ausland, ...
Eine Beurlaubung ist unzulässig
- für das erste Fachsemester bzw. für das Fachsemester in das eine Einstufung bei Hochschul- oder Studiengangwechsel vorgenommen wurde sowie in der studienvorbereitenden Ausbildung, ausgenommen bei lang andauernder Krankheit oder bei Vorliegen der Mutterschutzfrist bzw. Elternzeit, ...
Dauer der Beurlaubung
- Die Dauer der Beurlaubung regelt § 20 Abs. 2 SächsHSFG und soll die Zeit von insgesamt zwei Semestern nicht überschreiten ...
Schlecht: Fehlende Abstände zwischen Inhalten
...obwohl die Inhalte thematisch nicht zusammengehören.
Abteilung 1
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. 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.
Abteilung 2
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. 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.
Besser: Abstände einfügen
...um nicht zusammenhängende Inhalte voneinander zu trennen und so für bessere Übersichtlichkeit zu sorgen.
Abteilung 1
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. 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.
Abteilung 2
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. 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.
Schlecht: Nutzung von Tabellen zur Gliederung von Text (Tabellenzeilen als Zwischenüberschriften)
Praxisorientierung steht bei uns im Fokus, und dank unserer intensiven Kontakte in die Wirtschaft können unsere Studierenden Praktika oder Abschlussarbeiten bei führenden Unternehmen und Forschungspartnern absolvieren sowie Kontakte zu potenziellen Arbeitgebern knüpfen. Internationale Abkommen und Austauschprogramme fördern den Austausch von Studierenden aus aller Welt und bieten unseren Studierenden viele Möglichkeiten ins Ausland zu gehen. |
| Informieren, orientieren, entscheiden |
| Sich vor dem Studium zu informieren ist wichtig, um die richtige Studienwahl zu treffen. Um die TU Bergakademie Freiberg bereits im Vorfeld kennenzulernen, gibt es vielfältige Angebote, wie Studienmessen ganz in der Nähe Ihres Heimatorts, den TUBAF-Campustag, eine Studienberatung vor Ort in Freiberg oder eine Schüleruni-Woche in den Ferien. |
Schlecht: Wechsel Spalten-/Zeilenlayout nicht stimmig
Beantragung der Beurlaubung
Studierende können auf eigenen Antrag in der Regel bis Semesterbeginn aus wichtigem Grund vom Studium beurlaubt werden ...
Gründe für eine Beurlaubung
- Krankheit,
- Vorbereitung auf Wiederholungsprüfungen,
- Studienaufenthalt im Ausland, ...
Eine Beurlaubung ist unzulässig
- für das erste Fachsemester bzw. für das Fachsemester in das eine Einstufung bei Hochschul- oder Studiengangwechsel vorgenommen wurde ...
Dauer der Beurlaubung
- Die Dauer der Beurlaubung regelt § 20 Abs. 2 SächsHSFG und soll die Zeit von insgesamt zwei Semestern nicht überschreiten ...
Rechte und Pflichten
- Während der Zeit der Beurlaubung bleiben die Rechte und Pflichten des Studierenden, mit Ausnahme der Verpflichtung zum ordnungsgemäßen Studium, unberührt ...
Semesterbeitrag und Gebühren
- Vor der Beurlaubung muss die Rückmeldung - Zahlung des Semesterbeitrages- erfolgen ...
Besser: Einheitliches Layout
Beantragung der Beurlaubung
Studierende können auf eigenen Antrag in der Regel bis Semesterbeginn aus wichtigem Grund vom Studium beurlaubt werden.
Gründe für eine Beurlaubung
- Krankheit,
- Vorbereitung auf Wiederholungsprüfungen,
- Studienaufenthalt im Ausland, ...
Eine Beurlaubung ist unzulässig
- für das erste Fachsemester bzw. für das Fachsemester in das eine Einstufung bei Hochschul- oder Studiengangwechsel vorgenommen wurde ...
Dauer der Beurlaubung
- Die Dauer der Beurlaubung regelt § 20 Abs. 2 SächsHSFG und soll die Zeit von insgesamt zwei Semestern nicht überschreiten ...
...
Nicht-Nutzung der Funktion "Weiteren Eintrag hinzufügen"
... bei Akkordeons, Linklisten und Kacheln, da es zu uneinheitlichen Darstellungen führt.
Schlecht:
Besser:
Schlecht: Akkordeons ohne Inhalt/Nutzung als Linkliste
Schlecht: Download spärlich bezeichnet
Beispiel:
Hier findet man ein Dokument mit einer schlechten Beschreibung des Dateidownloads.
Besser: Genauere Beschriftung für Verständnis
Beispiel:
Hier findet man ein Dokument mit einer besseren Beschreibung des Dateidownloads.
Schlecht: Buttons ohne Link zur Hervorhebung von Text
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
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.
Schlecht: Buttons fett/kursiv nachformatieren
Schlecht: Buttons mit "Zum", "Hier geht es zu"... bezeichnen
Besser:
Schlecht: Bildkacheln als Visitenkarten
...u. a., da Text für Kontaktangaben keine Zeilenumbrüche erlaubt.
Dr. Sabine Schellbach
Besser: Bildkacheln nur als Link zum Profil
... sorgt für eine bessere Übersichtlichkeit.
Schlecht: Bildkachel ohne Link
... (Nutzung als "Foto mit Bildunterschrift") - nur temporär erlaubt, wenn Inhalte noch erstellt werden!
Negativbeispiele
Besser: Bildkachel mit Link
... zur Auflockerung und besseren Übersichtlichkeit der Seite.
Negativbeispiele
Schlecht: Dopplung bei Kachelüberschrift
Negativbeispiele
Besser: "Mehr erfahren" in Link-Text
Negativbeispiele
Besser: Button einsetzen
...über Text/Bild-Paragraph, Link setzen, Link markieren, Stil auswählen. Pfeil erscheint automatisch.
Besser: Ausgleich durch Buttons o.ä.
Schlecht: Verpixelte Bilder
..."Hauptsache, es ist erst einmal ein Bild da".
Schlecht: Text in Bildern
...kann von Screenreadern nicht ausgelesen werden. Ist nur zulässig, wenn direkt am Bild der Inhalt erläutert wird.
Schlecht: Nutzung Layout-Paragraph für Bilder
... Nutzung Layout-Paragraph, um Bilder "klein zu bekommen" sollte vermieden werden.
Besser: Text mit Bild
... Bildgröße kann hier einheitlich eingestellt werden (klein, mittel, groß).
Schlecht: Infoboxen für Kontaktdaten/Anfahrt
Career Center
Prüferstraße 2, Zi. 2.405 bis 2.407
09599 Freiberg
kontakt [at] cc [dot] tu-freiberg [dot] de
+49 3731 39-3303
Schlecht: Infoboxen für normalen Text
Unser Studienangebot umfasst eine Vielzahl von Bachelor-, Master- und Diplomstudiengängen, darunter einzigartige Studiengänge wie Angewandte Naturwissenschaft, Materialwissenschaft und Werkstofftechnologie, Robotik und Engineering.
Praxisorientierung steht bei uns im Fokus, und dank unserer intensiven Kontakte in die Wirtschaft können unsere Studierenden Praktika oder Abschlussarbeiten bei führenden Unternehmen und Forschungspartnern absolvieren sowie Kontakte zu potenziellen Arbeitgebern knüpfen.
Verboten: Nachbildung von Menüs
Navigation
Home (diese Seite)
Institut
- Prof. ...
- Publikationen
- Geschichte
Mitarbeiter
Forschung
- ...
- ...
- ...
Ausstattung
- ...
- ...
- ...
Schlecht: Infoboxen in Layouts
... da nicht bündig.
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.
At vero eos et accusam et justo duo dolores et ea rebum.
Besser:
... untereinander anordnen.
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.
At vero eos et accusam et justo duo dolores et ea rebum.
Weitere Negativbeispiele
(werden sukzessive noch mit Beispiel untersetzt bzw. nachgestellt)
Manuelles Einfügen von Leerzeilen (nicht barrierefrei, technische Umsetzung von Abstand vor Überschriften ist in Arbeit): Zentrale Universitätsverwaltung
reine Akkordeonseiten
Verlinkung auf Dokumente, die nicht als solche erkennbar ist
mehr als 7 Kontakte mit Bild --> tabellarische Übersicht bevorzugen
sehr kurze Einzelseiten
Teambilder im Hero (oft verpixelt, werden abgeschnitten)
Englische Seite wurde bei Änderungen auf deutscher Seite nicht mitgedacht: Beschäftigte/ Employees