Archiv der Kategorie: Layoutoptimierung

Optimierte Veranstaltungsübersichten der RZ/STZ

Es gibt Neuerungen bei der Präsentation der Übersichten für Veranstaltungen der Regional- und Studienzentren.
Für Sie als Redakteurinnen und Redakteure unmerklich haben wir die Übersichten optimiert und so bezogen auf verschiedene Terminsituationen hoffentlich eine gute Lösung gefunden.
Das hat sich aktuell geändert:

1. Layout der Übersichten:

jede Veranstaltung bildet durch eine Trennlinie eine klarere Einheit; Wochentag und Termin sind farblich auffallend in orange abgetrennt; Veranstaltungstitel und Teaser ergänzen mit dem Link auf die jeweilige Seite wie bisher.

2. Veranstaltungen über mehrere Tage:

Anfangs- und Endtermine erscheinen auch in der Übersicht.

3. Veranstaltung fällt aus, wird verschoben:

Durch Ihre Anpassung in der Statusbox der Veranstaltungsdatei wird dieser Hinweis (verschoben, entfällt) AUTOMATISCH sowohl auf die Veranstaltungsseite, als auch mit in die Übersicht gesetzt.
Bildschirmfoto 2013-06-17 um 11.23.54
 

4. was verändert sich für Sie?

Nichts! Sie müssen ausschließlich den Status der Veranstaltung pflegen bzw. anpassen.
 
Bildschirmfoto 2013-06-17 um 11.30.26

5. Veranstaltungsreihen, ein Thema – viele Termine

Bildschirmfoto 2013-06-17 um 08.51.57
so bitte nicht!
 
Diese Situation haben wir häufig gesehen und möchten Sie dringend bitten, solche Termine nicht im Paket, wie auf dem Bildschirmfoto, sondern in der Termintabelle als einzelne Termine, also als separate Blöcke einzutragen.
Mit der Paketlösung blockieren Sie die Anzeige der Termine in Kürze und verfälschen so diese Terminabfolgen.

6. und wie geht es weiter?

im laufenden Sommersemester wird auch die Darstellung der einzelnen Veranstaltungsseite optimiert. Wir werden Sie rechtzeitig vor der Eingabe der WiSe-Termine über die Neuerungen informieren.

 

Ein Bild – viele Möglichkeiten

Erweiterungen beim Flexmodul Bild/Foto/Unterschrift

Das Flexmodul Bild/Foto/Unterschrift ist jetzt so ausgebaut, dass sich beim Seitenlayout mit einem Klick Bild und Text komfortabel und variantenreich kombinieren lassen.

Beispiele der Formatierung:

  • Bild/Foto in unterschiedlichen Größen (30%, 40%, 50%, 100%)
  • mit/ohne Rahmen
  • Text links-, rechtsbündig
  • Text umfließend, nicht umfließend
  • Abstände

Bildschirmfoto 2013-04-04 um 09.17.44

Probieren Sie es doch einfach mal aus!

Texten fürs Web

In der Praxis wird oft bereits bestehender Content der Einfachheit halber für den Webauftritt wiederverwertet. Warum ein Text, der als Print verfügbar ist, nicht – wie gerne praktiziert – 1:1 ins Web übernommen werden soll, erklärt sich jedoch durch das Leseverhalten am Bildschirm.

Das Lesen am Bildschirm unterscheidet sich stark vom Lesen von Printprodukten. Das besagt eine Studie von Jakob Nielsen (Usabilityexperte, Schriftsteller). Er hat herausgefunden, dass ein Großteil der Internet-Nutzer (79%) den Text einer neu geöffneten Seite lediglich scannen, anstatt Wort für Wort zu lesen.
Dass sich aus diesen Erkenntnissen (im Gegensatz zu Printprodukten) andere Anforderungen für das Texten von Webinhalten ergeben, liegt auf der Hand. Folgende Übersicht stellt wichtige Kriterien vor, die bei der Konzeption von Web-Texten zu beachten sind:

Aufbau: Nicht linear aufbauen

Im Print-Bereich (Zeitungen, Zeitschriften) werden Texte mit dem Ziel geschrieben linear, also von vorne nach hinten gelesen zu werden. Ein klassischer linearer Aufbau à la „Einleitung, Argumentation und Folgerung“ funktioniert im Web nicht. Die Leser haben es meist eilig und keine Zeit oder Geduld, langen Gedankengängen zu folgen, um erst am Ende des Textes mit der Message belohnt zu werden. Deshalb wird hier die Reihenfolge umgekehrt, der Web-Text soll mit der Message beginnen. Der Vorteil: Der interessierte Leser weiß sofort, um was es geht. Er kann selbst entscheiden, ob er weiter lesen möchte.

Darstellung: Strukturieren

Damit der Leser die für ihn relevanten Informationen im Text schneller findet, soll der Text gut strukturiert sein. Langer Fließtext erschwert die schnelle Informationsaufnahme. Durch die Unterteilung des Textes nach Themenblöcken in kurze Absätze und das Einfügen von untergeordneten Überschriften ist es dem Leser möglich, die Inhalte schneller zu erfassen.
Es ist erwiesen, dass das Lesen am Bildschirm für die Augen anstrengender ist als das Lesen auf Papier. Die Folge ist, dass der Lesefluss am Bildschirm um ein Viertel verlangsamt ist.
Länge: Kurz halten

Lesen am Bildschirm stellt eine Belastung für die Augen dar. Um den Leser nicht unnötig zu strapazieren, sollen Texte auf Websites daher nicht zu lang sein. Weniger ist also mehr. Sollte sich der Text nicht weiter kürzen lassen, bietet es sich an, ihn in einzelne Blöcke zu unterteilen und auf mehreren Seiten zu präsentieren. Eine Printversion sollte dem Leser zusätzlich zur Verfügung stehen.

Stil: Einfach und verständlich schreiben

Der Leser soll den Inhalt des Textes leicht und richtig verstehen können. Kurze, einfache Sätze, knappe Formulierungen und das Vermeiden von Fachjargon sind hier hilfreich. Kann der Einsatz einer fachspezifischen Terminologie nicht vermieden werden, ist es sinnvoll zusätzlich ein Glossar anzubieten.

Kontext: Mehrwert schaffen

Das Web bietet die Möglichkeit der Vernetzung von Inhalten. Für den Besucher einer Seite stellt es einen enormen Mehrwert dar, wenn er davon Gebrauch machen kann. Deshalb ist es wichtig durch geeignete Verlinkungen einen Kontext herzustellen. Der eigentliche Inhalt wird dadurch wertvoller. Durch das Herstellen interner Querverbindungen zwischen verschiedenen Inhalten oder durch den Verweis auf (qualitative) externe Inhalte wird vernetztes Denken unterstützt.

Allgemeine Class-Angaben

Über Ergänzungen durch Class-Angaben kann das Layout optimiert werden, das Aussehen von Tabellen und Listen, Abstände oder Positionierung von Bildern.

Class-Angaben können im Editorfenster von Imperia u?ber den Icon ID/Class (Bild 1) verwendet werden, direkt im gewünschten Bereich in den Quelltext (Bild 2) geschrieben werden aber auch, indem in den Eigenschaften (Bild 3) (Bilder, Tabellen,etc.) im Quelltext der gewu?nschte Bereich ergänzt wird.
Beispiele: <p> oder <table>

Beispiele zur Bild-Formatierung: das Bild soll 100% der Inhaltsfläche einnehmen

Bildschirmfoto 2013-02-19 um 14.38.54
Bild 1 (Editor, ID/Class)

Bildschirmfoto 2013-02-19 um 13.45.44
Bild 2 (im Quelltext)

Bildschirmfoto 2013-02-19 um 13.47.06
Bild 3 (über Bildeigenschaften)

Auswahl der Bereiche:

  • Flexible Bilder
  • Tabellen
  • Tabellenzellen
  • Überschriften und Texte
  • Trennlinien
  • Abstände zwischen den Bereichen
  • Breiten auf verschiedene Bereiche anwendbar
  • Listen

Flexible Bilder

<img>

  1. bild100 ? das Bild wird u?ber den gesamten Inhaltsbereich dargestellt
  2. bild50-links ? das Bild wird linksseitig zu 50% im Inhaltsbereich dargestellt
  3. bild50-rechts ? das Bild wird rechtsseitig zu 50% im Inhaltsbereich dargestellt
  4. bild30-rechts ? das Bild wird rechtssseitig zu 30% im Inhaltsbereich dargestellt
  5. bild30-links ? das Bild wird linksseitig zu 30% im Inhaltsbereich dargestellt

Tabellen

<table>

  1. tabelle100 ? die Tabelle wird u?ber den gesamten Inhaltbereich dargestellt
  2. tabelle-weiss ? die Tabelle hat weiße Zellen mit hellgrauen Trennlinien
  3. tabelle-weiss100 ? die weiße Tabelle wird u?ber den Inhaltsbereich dargestellt
  4. tabelle-grau ? die Tabelle hat graue Zellen mit weißen Trennlinien
  5. tabelle-grau100 ? die graue Tabelle wird u?ber den Inhaltsbereich dargestellt
  6. ohne-rahmen ? die Tabelle hat keine sichtbaren Trennlinien
  7. ohne-rahmen100 ? die Tabelle wirdu?ber den Inhaltsbereich dargestellt
  8. tabelle-zentriert ? der Text ist in der Tabelle zentriert
  9. tabelle-zentriert100 ? die zentrierte wird Tabelle u?ber den Inhaltsbereich dargestellt

Tabellenzellen

<td><th>

  1. rechtsbuendig ? Text rechtsbu?ndig
  2. linkssbuendig ? Text linksbu?ndig
  3. zentriert ? Text zentriert
  4. grau ? grauer Hintergrund
  5. halb ? Zellenbreite auf 50%
  6. drittel ? Zellenbreite auf 32%
  7. viertel ? Zellenbreite auf 25%

Überschriften und Texte

<h1><h2><h3><h4><h5><p>

  1. grau ? grauer Hintergrund
  2. unterstrich ? feine hellgraue Unterstreichung

Trennlinien

<hr>

  1. linie-grau ? 1px Zwischenlinie in hellgrau
  2. linie-blau ? 1px Zwischenlinie in blau
  3. linie-orange ? 1px Zwischenlinie in rot
  4. linie-grau-breiter ? 2px Zwischenlinie in hellgrau
  5. linie-blau-breiter ? 2px Zwischenlinie in blau
  6. 6. linie-orange-breiter ? 2px Zwischenlinie in rot

Abstände zwischen den Bereichen

  1. abstand-unten ? Abstand nach unten von 20px
  2. abstand-oben ? Abstand nach oben von 20px
  3. abstand-unten5 ? Abstand nach unten von 5px
  4. abstand-oben5 ? Abstand nach oben von 5px
  5. abstand-unten10 ?  Abstand nach unten von 10px
  6. abstand-oben10 ? bewirkt Abstand nach oben von 10px
  7. abstand-unten30 ? Abstand nach unten von 30px
  8. abstand-oben30 ?  Abstand nach oben von 30px
  9. abstand-unten40 ? Abstand nach unten von 40px
  10. abstand-oben 40 ?  Abstand nach oben von 40px
  11. abstand-unten50 ? Abstand nach unten von 50px
  12. abstand-oben 50 ? Abstand nach oben von 50px

Breiten auf verschiedene Bereiche anwendbar

z.B. Tabellen, Tabellenzellen, Textabschnitte, Bilder <table><th><td><p><img>

  1. breite100 ? Weite 100%
  2. breite50 ?  Weite 50%
  3. breite33 ? Weite 33%

Listen

<ul>

  1. pfeil ? Pfeil als Auflistungszeichen
  2. liste-ohne-bullet ? Liste ohne Vorzeichen
  3. buchstaben ? Buchstabenanordnung bei Aufzählung (ol)
  4. stz ? grauer Hintergrund