Layout-Test

Hier zunächst ein erster Absatz ohne weitere Headline. Der Abstand zum oberen grauen Balken ist OK. Die Elemente rechts (Kategorien, Letzte Beiträge, etc.) stehen jedoch nicht bündig mit diesem Absatz, sondern sind zu weit nach unten gerutscht geändert für H2 (möglicherweise dadurch bedingt, dass wir in einer vorherigen Anpassung den Abstand vor einer h3 vergrößert haben?). Gleichzeitig fällt auf, dass die rot/graue Haarlinie zu weit von der jeweiligen Überschrift weg ist geändert bzw. zu nah an den nachfolgenden Elementen klebt.

Jetzt ein zweiter Absatz. Der Abstand zwischen Absätzen des Fließtext ist OK. Das oben erwähnte Problem, dass die Kategorien in der rechten Spalte nach unten verrutscht sind, gilt überigens auch für die Headlines im grauen Balken unten. Fixed 11-07-2013. Allerdings sind die Inhalte jetzt nicht mehr Linksbündig mit der Überschrift

Test der Haarlinie

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Headline h2

Der Abstand einer Headline h2 zum vorangegangenen Text ist OK, jedoch klebt uns diese Headline zu dicht am nachfolgenden Text. Geschätzt etwa +6 Pixel täten hier gut geändert… Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat.

Überschrift h3

Der Abstand einer Überschrift h3 zum vorangegangenen Text ist uns zu groß. Gleichzeitig ist wie auch bei der Headline h2 der Abstand zum nachfolgenden Text zu klein Fixed!… Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Überschrift h3

Hier nochmal ein Absatz zu einer Überschrift h3, um zu beaurteilen, wie die Abstände im Gesamtbild dann aussehen. Nachfolgend einige Links mit Icons im Fließtext. Die Abstände zum Text sehen gut aus. Hier stellen sich jedoch 2 Fragen: 1. Wie kriegen wir die Icons in einem dezenteren Grau hin und 2. Warum sind die Links hier rot im Gegensatz zu Links, die im Fließtext eingebettet sind?

Tssss… ich bin irritiert

  Link auf eine interne Seite
  Link auf eine externe Seite in neuem Fenster
  Dies ist eine Veranstaltung
  Und dies ist ein Dokument zum Download

Ein anderes Phänomen ergibt sich, wenn die Icons Teil des Links sind. Dann wird der Link plötzlich blau, genauso wie der Icon? (Wobei wir mit diesen beiden Möglichkeiten durchaus gut leben können – lediglich graue Icons für die obige Variante hätten wir gern :-) Oh – und interessant auch, dass die zweite Variante einen geringfügig (aber optisch deutlichen) größeren Zeilenabstand hat und damit (bei gleicher Versalhöhe) etwas luftiger wirkt ???

  Link auf eine interne Seite
  Link auf eine externe Seite in neuem Fenster
  Dies ist eine Veranstaltung
  Und dies ist ein Dokument zum Download

Überschrift h3 nochmal

Kommt eine Überschrift h3 nach Links mit Icons, so ist der Abstand davor in diesem Fall eigentlich OK. Für den Abstand zum nachfolgenden Text siehe oben. Wir wollen jetzt aber mal eine Bullet-Point-Liste testen:

  • Bullet Points sind
  • ein ganz feine Sache um
  • Auflistungen zu machen!

Und wie sieht der Abstand zum Text aus? Sowohl davor als auch danach sieht das soweit gut aus! Jetzt die Bullet-Points nochmal mit einer nachfolgenden Überschrift h2:

  • Bullet Points sind
  • ein ganz feine Sache um
  • Auflistungen zu machen!

Headline h2 nochmal

Auch hier sieht der Abstand der Headline h2 zur vorangegangenen Bullet-Point-Liste gut aus. Für den anschließenden Text gilt wieder, dass er zu nah dran hängt (aber das hatten wir ja schon oben erwähnt).

Dies ist eine Content-Box nur mit Text. Der Abstand zum vorangehenden Fließtext ist OK, ebenso wie die Innenabstände des Texts zur Box. Als Test hier auch nochmal ein Link innerhalb des Textes. Der Abstand nach einer Content-Box zu einer nachfolgenden Box ist jedoch zu groß! Jetzt kleiner:

Überschrift Zweiter Klasse

Die Überschrift h2 innerhalb einer Content-Box hat hier einen guten Abstand zum nachfolgenden Text (so stellen wir uns das auch im Fließtext vor!). Frage wäre, ob man Headlines in einer Content-Box noch ein wenig grauer ja macht, damit sie besser mit dem enthaltenen Text harmonieren?

So besser? Ja!

Jetzt zu Bullet-Point-Listen innerhalb der Content-Box. Hier fällt zum einen auf, dass sie sich vom Abstand her nicht so sehr absetzen wie im Fließtext. Ist soweit auch OK, lediglich der Abstand vor der Bullet-Point-Liste könnte einen Hauch größer sein (Im Fließtext stehen die Listen quasi mittig zwischen vorangehendem und nachfolgendem Text, hier hängen sie etwas oben dran):

  • Lorem ipsum dolor sit amet
  • Consectetur adipisici elit
  • Sed eiusmod tempor incidunt ut labore

Ferner fällt auf, dass der Text der Bullet-Point Listen in einer Content-Box identisch mit Bullet-Points im normalen Fließtext ist und damit größer und dunkler als der umgebende Text in der Content-Box. Dies sollten wir auch irgendwie harmonisieren. Endet eine Content-Box mit einer Bullet-Point-List, so ist ferner der innere Abstand unten vielleicht noch etwas zu groß.

  • Lorem ipsum dolor sit amet
  • Consectetur adipisici elit
  • Sed eiusmod tempor incidunt ut labore

Hier jetzt ein Text zwischen 2 Content-Boxes. Auch hier ist der Abstand nach der vorhergehenden Box und dem Fließtext zu groß. (liegt also wohl generell an dem Abstand nach einer Content-Box – siehe oben). Nachfolgend eine Content-Box nur mit Überschrift h2 und einer Liste. Hier sind Bullet-Points und Headline in sich stimmig, da es keinen kleineren, grauen Text in der Box ansonsten gibt. Wie kriegen wir das mit den vorangegangenen Beispielen zusammen?

Unsere Leistungen

  • BPM/SOA-Einführungsworkshop
  • Analyse und Optimierung bestehender Geschäftsprozesse
  • Beratung beim Design Serviceorientierter Architekturen
  • Coaching und Training: BPMN, UML, SOA
  • Unterstützung bei der Softwareauswahl
  • Umfassende Einführung von BPM und SOA in Ihrem Unternehmen
  • Technische Umsetzung automatisierter Prozesse
  • Etablierung einer BPM/SOA Governance
  • Organizational Change Management zur Verankerung einer BPM/SOA-Strategie

Hier jetzt eine Box mit einer Liste von Links, die einzeln mit verschiedenen Icons aufgebaut ist…

  Link auf eine andere Seite
  Dies ist eine Veranstaltung
  Und dies ist ein Dokument zum Download

Die Abstände zum umgebenden Text sehen gut aus, aber auch hier greifen wieder die Styles des Fließtextes, sodass die Links mit Icons wider gegenüber dem umgebenden Text herausstechen.

Überschift 2 nach Box

Und jetzt wollen wir nachfolgend testen, wie es aussieht, wenn Bullet-Point-Lists durch Überschriften h3 strukturiert werden. Typisches Anwendungspeispiel sind Produktdefinitionen, z.B. wenn zu verschiedenen Themengebieten die einzelnen Inhalte ausfgelistet werden:

Technologie- und Softwareauswahl

  • Technologische Auswahl von Application Server, ESB, Repositories
  • Business Process Engine / Workflow Engine und ggf. Rule-Engine
  • Modellierungswerkzeug
  • Entwicklungsumgebung

Erarbeiten eines Architektur-Blueprints

  • Entwicklung und Etablierung der IT-Strategie
  • Bebauungsplan der Facharchitektur
  • Definition der Zielvorgaben

Jetzt Bullet-Points als Links

Überschrift 2 wieder…

  • Direkte Wertschöpfung durch ersten produktiven Prozess
  • Funktionsfähige Basisarchitektur und -infrastruktur für weitere Prozesse
  • Überblick über die Prozesslandschaft durch Prozess- und Service-Portfolio
  • KPIs, Monitoring und Reporting als Grundlage der Prozessoptimierung

Tab-Reiter unten…

Generell finden wir, dass der Abstand von den Tab-Reitern zum nachfolgenden Inhalt ein wenig kleiner sein dürfte ;-)

Mehr zum Thema

Hier haben wir typischerweise immer Links mit Icons. Warum sind diese jetzt im Unterschied zum Fließtext hier blau? Auch die Schrift ist jetzt hier wieder kleiner geworden. Hier könnten wir uns durchaus die rote Variante (wie oben im Fließtext) vorstellen. Und natürlich ebenso mit grauen Icons.

Ansprechpartner

Wenn die Bezeichnung der Ansprechpartner umbricht (z.B. „Leitung Geschäftsfeld Plumpaquatsch“), dann scheint uns der Zeilenabstand ein wenig eng. Die zweite Zeile klebt an der vorherigen.

Produkte

Analog „mehr zum Thema“ – siehe oben…

Artikel

Icons sind mutiert, Text ist nicht mehr oben bündig. (Evtl. können wir hier darüber nachdenken, diese Links weder blau noch rot zu machen, sondern so wie ganz zu Beginn einfach grau?). Siehe auch im Hauptmenü „Blog“…

Sonstiges

  • Teaser-Einblendungen Startseite: Text in den Boxen hängt zu weit oben dran
  • Rechte Spalte: „Alle Veranstaltungen ansehen“ ist in einer anderen Schriftart als alles andere
  • Buttons: sind noch recht Magenta, sollte unser Rot sein
  • Buttons: Abstände an Beispielen verproben?
  • Bereich „Veranstaltungen“ reviewen – hier ist typographisch noch einiges anders
  • Bereich „Publikationen“ an Beispielen gegen das Layout verproben
Roman Schlömmer

Roman Schlömmer

Leitung Geschäftsfeld BPM/SOA
Email senden
Jo Ehm

Jo Ehm

Leitung Geschäftsfeld BPM/SOA
Email senden

Neueste Artikel

CamundaCon 2023: Automatisierung und KI im Fokus 

11. Oktober 2023 - 13:22 pm
Am 27. und 28. September 2023 fand die diesjährige CamundaCon statt, zum ersten Mal in Nordamerika, im Herzen von New York City. Ein heiß diskutiertes Thema auf der Konferenz: die Integration generativer KI in der Prozessautomation mit Camunda. ...

Konferenzen, Camps und Co.: Diese Veranstaltungen stehen 2023 an

15. Februar 2023 - 11:36 am
Ab über den Tellerrand hinaus: Auf Konferenzen, Barcamps und Workshops finden und setzen wir neue Impulse, können uns mit anderen austauschen und unseren Horizont erweitern. Um euch bei der Vielzahl an Veranstaltungen einen Überblick zu verschaffen, haben wir gesammelt, was ...
Holisticon AG — Teile diesen Artikel