Bearbeiter Stand

Stefan Schabenberger, Tallence GmbH 31. August 2015

1

Inhalt

Inhalt

1.Eine kurze Einführung

2.Content planen

Kriterien zur Veröffentlichung eines Inhaltes

Wie man Texte aufbaut

Dachzeilen

Überschriften

Vorlauftexte

Mengentexte

Teasertexte

Wie man passend für die Zielgruppen schreibt

3. Content überarbeiten

Wie der existierende Inhalt sinnvoll überarbeitet und strukturiert wird

Wann lösche ich bestehende Inhalte?

Wie fasse ich sinnvoll zusammen?

Contentüberarbeitung anhand von Beispielen URL-

Vorgaben

Suchmaschinenoptimierung, intern und extern

Suche über Google & Co.

Suche auf der IHK Website

4. Seitenaufbau

Die Hauptspalte

Die Marginalspalte

Bilder

5. Navigationskonzept

Zielgruppeneinstiege

Suche

Hauptnavigation

Servicenavigation

Footer

6. Templates

Mögliche Verlinkungen der Templates

Startseite

Startseite für eingeloggte Mitglieder (Extranetz)

Mash-Up Seite

Themenübersichtsseite

Die Artikelübersichtsseite

Die Artikelseite

Die Veranstaltungsdetailseite

Veranstaltungsanmeldung

Veranstaltungssuche

2

Suchergebnisseite Volltextsuche

A-Z Liste

Dokumentenliste

Login-Seite

Umfrageseite

Newsletter

Formularseite

Die Werbung

7.Module

Teaser Karussell mit Bild

Teaser Veranstaltungsliste

Teaser Headline-Text

Teaser Bild-Headline-Text

Teaser Headline-Link

Teaser Bild-Headline-Link

Bild- / Videomodul

Bildergalerie

Kontaktmodul

Veranstaltungsmodul

Ankerlinks (Sprungmarken)

Ausklappliste

Linkliste

Linkliste mit Beschreibung Download-

Liste

Content-Tab Modul

Highchart-Grafik

Tabelle

iFrame

8.Impressum

3

1. Eine kurze Einführung

Im Zuge des Relaunches der IHK24-Auftritte macht die Überarbeitung der bestehenden Inhalte und

Seitenstrukturen einen wichtigen Teil des neuen Konzeptes aus. Der hier verfasste Content-Styleguide

dient dabei als Leitfaden für eine effiziente und benutzerfreundliche Überarbeitung der Inhalte sowie für die

Verwendung der neuen Seitentemplates und Module.

Zusammen mit dem neuen Design und dem unter Usability-Gesichtspunkten entwickelten Konzept führt

ein aufgeräumter und strukturierter Content zu einem service- und kundenfreundlichen Informationsportal,

auf das der User gerne wiederkommt.

Dabei ist dieser Content-Styleguide wie auch der zukünftige Internetauftritt der IHK24 kein

festgeschriebenes, sondern ein lebendiges Medium. Überarbeitungen, Anpassungen und Erweiterungen

sind ebenso wichtig wie erforderlich, um mit der strukturellen und technologischen Entwicklung im Netz

Schritt zu halten.

4

2. Content planen

Kriterien zur Veröffentlichung eines Inhaltes

Wann ist eine Veröffentlichung auf IHK24 sinnvoll und wie lange muss die Information zur

Verfügung stehen.

Eine Veröffentlichung auf der Internetseite der Industrie- und Handelskammer ist dann sinnvoll, wenn der

Inhalt für die Zielgruppen relevant ist, aktuell oder aufgrund des gesetzlichen Auftrages der IHKs

veröffentlicht werden muss. Dabei muss für die Zielgruppenrelevanz und die Aktualität gewährleistet sein,

dass die Informationen einzig für die Kunden und Mitglieder der Industrie- und Handelskammern bestimmt

sind. Informationen aus eigenem Interesse, dem Interesse von bspw. Kollegen, Vorgesetzten oder

Hauptgeschäftsführern sowie allgemeine Informationen aus den Medien sind nicht zu veröffentlichen,

wenn sie keine eindeutige Relevanz für die Zielgruppen der IHKs haben.

Insgesamt gilt dabei für alle Veröffentlichungen auf den IHK24-Seiten: Weniger ist mehr.

Beispiel für die Zielgruppenrelevanz:

Zu der Einführung des Mindestlohnes in Deutschland am 01. Januar 2015 gab es sehr viele Informationen

und Veröffentlichungen von unterschiedlichen Quellen (Bundesregierung, private Institutionen, Presse).

Die Aufgabe für die IHK24-Auftritte ist es nicht, alle diese Informationen zu sammeln und im eigenen

Auftritt zu veröffentlichen. Dies beinhaltet keinen Service für den User und wird von Seiten wie Google

oder Spiegel Online weitaus besser und effizienter erledigt.

Der Service besteht in der Auswertung der Informationen für die Zielgruppen der IHKs. Dazu gehört die

Zusammenfassung der wichtigsten Fakten zum Thema „Mindestlohn“, die Aufbereitung der Informationen,

die für die Kunden von besonderer Bedeutung sind (bspw. die Ausnahmeregelungen für bestimmte

Branchen oder bei bestimmten Arbeitnehmern) und ggf. die Entwicklung und Bereitstellung von

Handlungsempfehlungen.

Zusätzlich können weitere, detaillierte Informationen zu dem Thema in Form von Gesetzestexten oder

Broschüren über Verlinkungen in der Seitenspalte angeboten werden.

Kriterien für die Aktualität:

● Neuigkeiten sind nach einem Monat nicht mehr aktuell und sollten gelöscht werden.

● Veranstaltungen sind nur solange aktuell, wie sie stattfinden.

● Informationen sind solange relevant, wie sie aufgerufen werden: Bei weniger als 20 Aufrufen in

den letzten 12 Monaten sollten diese gelöscht werden.

● Eine Ankündigung zu einer Gesetzesänderung ist nur solange aktuell, solange die Änderung nicht

in Kraft tritt. Danach sollte sie gelöscht werden.

● Ein Gesetz ist solange aktuell wie es gültig ist. Es ist darauf zu achten, keine zeitlichen

Definitionen wie „neu“, „jetzt“, „am …“, etc.. zu verwenden.

5

Wie man Texte aufbaut

Dachzeilen

Dachzeilen können helfen, Inhalte zu strukturieren. Sie können aber auch schnell redundant werden und

die Seite inhaltlich und optisch überfrachten, deshalb ist ihr Einsatz auf IHK24 optional. Die optionale

Aktivierung betrifft das ganze Angebot der jeweiligen IHK und kann zum Beispiel nicht für einen Bereich

verwendet werden und für einen anderen Bereich nicht.

Regeln:

● Die Dachzeile hilft, einen Artikel thematisch einzuordnen, wenn dies aus dem

Gesamtzusammenhang nicht ersichtlich wird.

● Wenn eine IHK sich für den Einsatz von Dachzeilen entscheidet, muss jede Dachzeile redaktionell

und inhaltlich sinnvoll befüllt werden.

● Die Dachzeile darf nie länger als die Überschrift sein.

Überschriften

Überschriften geben das Thema einer Strukturseite, den Inhalt eines Artikels oder einer Veranstaltung

wider und tauchen als Navigationspunkte in der Seitennavigation und als Ergebnisse der

Suchergebnisseiten auf. Die Überschrift ist einer der wichtigsten Textbausteine und entscheidet darüber,

ob der User weiterliest oder nicht.

Regeln:

● Überschriften sollen nicht länger als 2 Zeilen sein (ca. 45 Zeichen). Wenn eine Überschrift länger

ist, muss sie gekürzt werden. Auf Artikelseiten oder Veranstaltungsseiten kann die

Zwischenüberschrift (h2) als Subline für weitere Informationen genutzt werden. Dies ist besonders

wichtig, wenn es um die Überschrift einer Veranstaltung geht, da diese ebenfalls im

Veranstaltungsmodul und in der Veranstaltungssuche mit ausgespielt werden.

● Überschriften müssen präzise, einfach und schnell den Inhalt von Artikeln, Dokumenten,

Strukturseiten oder Veranstaltungen widergeben.

● Überschriften, die in der Navigation verwendet werden, sollten einzeilig sein und aus ca. 25

Zeichen bestehen.

● In der Überschrift sind keine Abkürzungen, Paragrafen oder Klammern erlaubt.

Vorlauftexte

Vorlauftexte (h3) können auf Mash-Up-, Themenübersichts-, Artikelübersichtsseiten, Dokumentenlisten

und Artikelseiten eingesetzt werden und geben kurze Beschreibung des Inhaltes wieder oder dienen der

Einleitung. Der Vorlauftext ist in der Regel auch der Text, der in einem Teaser angezeigt wird.

Regeln:

● Der Vorlauftext sollte nicht mehr als 4 Zeilen haben. Das sind ca. 260 Zeichen.

6

Mengentexte

Mengentexte kommen auf den meisten Contentseiten wie bspw. Artikeln und Veranstaltungsseiten vor.

Daher ist es umso wichtiger, dass diese Seiten übersichtlich, klar und logisch aufgebaut sind und der User

selbst bei langen Texten nicht die Lust am Weiterlesen verliert. Hierzu gibt es mehrere unterschiedliche

Module, die dabei helfen, Inhalte übersichtlich aufzubereiten. (Mehr zu den einzelnen Modulen findet sich

im Kapitel „Module“).

Regeln:

● Textwüsten sind zu vermeiden. Stattdessen sollten auflockernde Elemente wie Absätze, Bilder im

Text und Einschübe verwendet werden.

● Ab einer Länge von 30 Zeilen sollten Texte mindestens eine Zwischenüberschrift haben.

● Lange Texte sollten mit einem Inhaltsverzeichnis beginnen, welches mit Sprungmarken unterlegt

ist. So kann der Nutzer direkt an die gewünschte Textstelle springen.

● Verlinkte Begriffe im Text sollten eindeutig den verlinkten Inhalt beschreiben und dürfen nur auf

interne Seite verlinken.

● Keine Mini-Texte anlegen, die auf ein PDF hinweisen. Stattdessen das PDF in einen Artikel

umschreiben.

● Highchart-Grafiken sind Tabellen vorzuziehen.

● Listen mit Detailinformationen sind am Ende zu platzieren.

Teasertexte

Der Teaser soll das Interesse des Lesers wecken und das entsprechende Thema kurz anreißen

(„anteasern“). Dabei ist es üblich, die Dachzeile (optional), Überschrift und den Vorlauftext des Artikels für

den Teaser zu verwenden.

Regeln:

● Lange Überschriften sind für den Leser auf den ersten Blick deutlich schwerer zu erfassen als

kurze Überschriften. Überschriften sollten deshalb maximal nur zwei Zeilen haben. Das sind ca. 45

Zeichen.

● Ist eine Überschrift länger, muss sie für den Teaser gekürzt werden. Das gilt auch für

Veranstaltungsteaser.

● Kontext-Links sind weiterführende Links zu ähnlichen Themen. Es ist max. ein Kontext-Link pro

Teaser möglich. Kontext-Links Überschriften sollten ebenfalls max. zwei Zeilen lang sein.

● Die Länge der Teaser-Copy sollte bei 6- und 8-spaltigen Teasern nicht mehr als 6 Zeilen und bei

4-spaltigen Teasern nicht mehr als 8 Zeilen haben. Das sind ca. 345 Zeichen.

7

Wie man passend für die Zielgruppen schreibt

● IHK-interne Begriffe durch Begriffe ersetzen, die die Leser verstehen oder entsprechend erweitern.

Das betrifft auch Begriffe des DIHK-Marketingkonzepts. Der Begriff „Standortpolitik“ beispielsweise

ist nicht selbsterklärend und wird von der Mehrzahl der Zielgruppen nicht verstanden.

● Oft ist aus Überschrift, Indextext und Textanfang nicht ersichtlich, wer die angesprochene

Zielgruppe ist. Es ist hilfreich, wenn im Teasertext kurz erwähnt wird, für welche Personengruppe

der Text relevant ist. Dabei sollte die Zielgruppe so detailliert wie möglich beschrieben werden (z.

B. GmbH-Geschäftsführer).

● Alle Texte auf den IHK-Webseiten müssen eine einheitliche und einfache Sprache haben. Dabei

muss jeder Fachbereich beim Erstellen der Texte davon ausgehen, dass der Leser keine

Vorkenntnisse hat. Notwendige Fachbegriffe und Abkürzungen müssen im Text erläutert werden.

● Die Überschrift eines Teasers muß direkt und schnell das Thema kommunizieren. Dabei darf

gerne abgekürzt werden, um auf der eigentlichen Artikelseite die ausführlichere Version der

Überschrift zu verwenden. Abkürzungen und Paragrafennennungen dürfen im Teaser-Titel nicht

auftauchen.

8

3. Content überarbeiten

Wie der existierende Inhalt sinnvoll überarbeitet und strukturiert wird

Für die neue Contentstruktur haben wir eine Einteilung in 6 frei definierbare Hauptbereiche

(Hauptnavigation). Diese müssen in der Priorisierung, im Wording und in der Einteilung der Unterthemen

nach Userinteressen ausgerichtet sein. Dabei ist zu beachten, dass wir gegenüber dem User immer von

Themen sprechen und nicht von Geschäftsbereichen.

Regeln:

● Es gibt maximal 3 vorgegebene Metanavigationspunkte (Sprache, Kontakt, Login), maximal 5 frei

definierbare Servicenavigationspunkte und maximal 6 frei definierbare Hauptnavigationspunkte

● Die Tiefe der neuen Struktur beinhaltet max. 6 Ebenen (inklusive der Startseite) und besteht aus

einer stringenten und für den User nachvollziehbaren Gliederung der Unterthemen

● Eine konsistente Seitenstruktur hilft dem User, intuitiv zu erlernen, wie die Seite aufgebaut ist: Der

Mix aus Struktur- und Contentseiten auf einer Navigationsebene ist zu vermeiden

● Inhalte müssen sinnvoll zusammengefasst werden

● Inhalte müssen eine aktuelle und inhaltliche Relevanz haben

● Die Benennung der Inhalte sollte einfach und verständlich sein

● Vermeidung von Downloadobjekten oder externen Links als Navigationspunkte

Downloadobjekte in der Navigation sind 6 Monate nach Relaunch nicht mehr möglich!

● Bilder haben einen inhaltlichen Bezug

● Keine inhaltlichen Doppelungen in einem Pfad

● Teaser sind immer mit Artikeln verlinkt

● Ständige Überwachung des Contents

Für die Überarbeitung des existierenden Contents hat sich folgendes Vorgehen bewährt:

1. Aufsetzen der bestehen Seitenstruktur eines Bereiches in Form einer Sitemap (bspw. mithilfe von

slickplan.com oder MS Visio).

2. Den einzelnen Seiten den Seitentyp (Strukturseiten, Contentseiten, Formularseiten) zuordnen.

3. Erste Notizen über etwaige Auffälligkeiten, Doppellungen, Wordings und Zusammenlegungen

machen.

4. Eine zweite Version der festgehaltenen Seitenstruktur als Überarbeitungsgrundlage speichern.

5. Mit der Neustrukturierung beginnen: Löschen, Zusammenlegen und sinnvolles Ordnen der Inhalte.

Dabei nach Userinteressen vorgehen.

6. Überarbeitete Seitenstruktur als Blaupause für die neue Gliederung zum Relaunch verwenden.

7. Überarbeitung der bestehenden Inhalte auf den einzelnen Seiten mithilfe der neuen Module.

Wann lösche ich bestehende Inhalte?

In vielen Fällen macht die Löschung bestehender Inhalte Sinn, da die bestehenden IHK24-Auftritte

inhaltlich und strukturell überfrachtet sind und den User überfordern.

Regeln:

● Informationen, die für die Zielgruppen keine inhaltliche Relevanz haben, können gelöscht werden.

● Informationen, die keine aktuelle Relevanz haben und veraltet sind, können gelöscht werden.

● Informationen mit weniger als 20 Aufrufen in den letzten 12 Monaten, können gelöscht werden.

● Informationen, die mehrfach in einem Bereich verortet sind, können gelöscht werden.

9

● Archive sind zu vermeiden. Wenn nicht anders möglich, dann deutlich als Archiv zu benennen.

Wie fasse ich sinnvoll zusammen?

Viele Informationen können übersichtlicher aufbereitet werden, indem sie inhaltlich mithilfe der neuen

Module wie z.B. Content-Tab, Ausklapplisten oder Downloadlisten sinnvoll in einem Artikel

zusammengefasst werden können. Zur Zeit sind zu viele Teilinformationen ein- und desselben Themas auf

unterschiedlichen Artikelseiten verortet. Das führt zu einer hohen Seitenanzahl und zu einer schlechten

Bedienbarkeit, da der User die Informationen zusammensuchen muss.

Regeln:

● Unterschiedliche Inhalte zu einem Thema wie z. B. PDF-Dokumente, Formulare und Videos auf

der Artikelseite des Themas in der Hauptspalte verorten

● Reine PDF-Dokumente zu einer passenden Artikelseite verorten oder in einen Artikel umwandeln

● Unterrubriken mit weniger als 3 Artikeln auflösen und anderen Rubriken zuordnen

● Kleine Themenbereiche zusammenfassen

10

Contentüberarbeitung anhand von Beispielen Beispiel 1: Der Bereich „Taxen- und Mietwagenverkehr“ der HK Hamburg

11

12

Beispiel 2: Gesetzestext Urlaubsregelungen der IHK Stuttgart

Alter Seitenaufbau

Das Inhaltsverzeichnis des Gesetzartikels „Rund um den Urlaub“ beinhaltet 27 (!) Sprungmarken und

nimmt den gesamten sichtbaren Browserbereich ein. Der Artikel selbst ist 14 (!) DINA 4 Seiten lang. Das

sind für jeden User zu viele Informationen auf einmal.

ansehen

13

Neuer Seitenaufbau

Im Inhaltsverzeichnis werden nur noch die Hauptpunkte ausgespielt. Dadurch reduziert sich das

Inhaltsverzeichnis um mehr als die Hälfte auf 11 Sprungmarken.

14

Die Texte wiederum werden jetzt mithilfe von Content-Tab Modulen aufbereitet. Ein Content-Tab Modul für

jeden Hauptpunkt. Die Unterpunkte eines jeden Hauptpunktes sind in dem jeweiligen Content-Tab Modul

verlinkt. Die Seite wird dadurch insgesamt viel übersichtlicher und in der Länge um ⅔ (!) kürzer.

15

Beispiel 3: Wahl der Vollversammlung IHK Rhein-Neckar

Alter Seitenaufbau

Momentan werden direkt auf der ersten Seite alle amtierenden Mitglieder in einer Tabelle mit Namen und

zugehörigem Wahlkreis sowie der Wahlgruppe ausgespielt. Der User wird somit für ihn irrelevanten

Informationen (alle Wahlkreise, alle amtierenden Mitgliedern) konfrontiert und dadurch schnell überfordert.

Gleichzeitig ist die Seite unübersichtlich.

GrLink wurde wegen Ungültigkeit nachträglich entfernt.

16

Auf Klick einer Branche werden alle amtierenden Mitglieder mit Foto und Firmenkontaktdaten dieser

Wahlgruppe in einer Tabelle angezeigt. Dies führt zu einer endlos langen Seite und der User muß sich zu

seinem Wahlkreis scrollen. Gleichzeitig wird die Trennung zwischen den Wahlkreisen sehr klein

aufgezeigt.

Grafik und Link wurde wegen Ungültigkeit nachträglich entfernt.

17

Neuer Seitenaufbau

Auf der ersten Seite gliedern wir die amtierenden Mitglieder mithilfe von einer Linkliste nur nach den

Wahlgruppen. Der User kann somit die für ihn relevante Gruppe auswählen und findet sich sofort zurecht.

18

Mithilfe des Moduls Ausklappliste sortieren wir dann die amtieren Mitglieder einer Wahlgruppe nach

Wahlkreis und Namen. Alle amtierenden Mitglieder einer Wahlgruppe sind übersichtlich nach den

Wahlkreisen aufgelistet. Möchte der User nun weitere Informationen zu einem Mitglied haben, klickt er auf

den jeweiligen Namen und das Portrait sowie die Firmenkontaktdaten werden angezeigt.

Name Funktion Firma Straße PLZ Ort

19

URL-Vorgaben

Wie URLs auf IHK24 verwendet und formatiert werden.

URLs müssen User- und SEO-freundlich aufbereitet werden. Das heißt:

● URLs müssen klar, eindeutig, einfach zu lesen, einfach zu tippen und einfach zu teilen sein.

● URLs müssen kleingeschrieben werden.

● URLs sollten aus ganzen Wörter und keinen Abkürzungen bestehen.

● Trennstriche werden dazu verwendet Wörter zu trennen und damit eine einfache Lesbarkeit zu

gewährleisten (z.B. anmeldung-meisterprüfung-2016).

● Artikel sollten vermieden werden (ja: anleitung-selbstständigkeit / nein: eine-anleitung-zur-

selbstständigkeit).

Suchmaschinenoptimierung, intern und extern Suche über Google & Co.

Zwei Drittel der Nutzer kommen über eine Suchmaschine auf die Website. Damit sie möglichst direkt bei

dem gesuchten Dokument/Inhalt landen gilt Folgendes zu beachten:

● Schon beim Schreiben des Artikels überlegen, welche Suchbegriffe später verwendet werden um

den Artikel zu finden.

● Diese Begriffe mehrmals im Text einbauen, am besten schon im Artikelnamen, der Überschrift,

dem Indextext und den ersten Textzeilen.

● Was Bei den Suchmaschinen in der Trefferliste angezeigt wird, kann beeinflusst werden: Auf dem

Reiter SEO-Optionen können eine Überschrift und eine Kurzbeschreibung vergeben werden.

● Suchmaschinen bewerten Verlinkungen im Text zu thematisch verwandten Inhalten positiv. Weil

diese Links aber den Lesefluss erschweren, sollten nicht zu viele Links hintereinander gesetzt

werden.

Suche auf der IHK Website

Aufgrund der Komplexität und Fülle der Inhalte wird oft die Suchfunktion zum Auffinden von Inhalten

verwendet. Deshalb ist für die interne Suche das Pflegen von Schlagworten besonders wichtig. Durch das

Eingeben von Schlagworten können wichtige Suchwörter, die nicht in den Überschriften oder dem Text

vorkommen, ergänzt werden. Auch eine Wiederholung von Worten aus den Überschriften und dem Text

kann in den Schlagworten vorgenommen werden um die Gewichtung zu erhöhen.

20

4. Seitenaufbau

Die Hauptspalte

Informationen, die direkt mit einem bestimmten Inhalt zu tun haben, sind immer in der Hauptspalte

darzustellen. Nur Kontext bezogene und weiterführende Inhalte (wie Ansprechpartner, verwandte Themen)

finden sich in der Seitenspalte. Diese beiden Ebenen dürfen nicht vermischt werden.

Die Marginalspalte

In der Marginalspalte (Seitenspalte) können kontextbezogene/weiterführende Themen angeteasert

werden. Im Contentbereich selbst sollten Linklisten und andere weiter verlinkende Module nicht dafür

verwendet werden kontextbezogene/weiterführende Inhalte zu verlinken.

Regeln

● Eine Marginalspalte darf nicht leer sein.

● Eine Marginalspalte sollte nicht länger als der Contentbereich sein.

● Maximal 5 Verlinkungen (interne Links, externe Links, Download-Links) sind in der Linkliste

erlaubt.

Bilder

In welcher Größe und welchem Format Bilder verwendet werden sollen

Die Bildformate auf IHK24 sind im 3:2-Format angelegt, weil dies das digitale Standardformat ist. Bilder

sollten eine Mindestgröße von 1240 x 826 px haben um auch auf retina-fähigen Geräten scharf dargestellt

werden zu können. Mit diesem Format kann ein Bild optimal als Contentspalte-füllendes Artikelbild

(Maximalformat) und in allen anderen Formaten, wie Teaser, eingebaut werden. Diese Auflösung reicht

auch für die Darstellung in der Bildergalerie sowie als Bild in der Bildergalerie für Retinaauflösungen.

Welche Bilder die richtigen für IHK24 sind

Das Design ist so ausgelegt, dass es auch mit wenigen Bildern gut aussieht. Daher ist bei der Auswahl der

Bilder auf Qualität vor Quantität zu achten. Auf IHK24-Webseiten publizierte Bilder sollten authentisch

wirken und einen inhaltlichen Bezug zum Text haben. Der Aufbau der Bilder soll plakativ und klar sein.

Bildmotive dienen zur Hervorhebung des Themas, nicht der Dekoration. Wenn möglich, werden Menschen

gezeigt.

Regeln

● Die Bilder sind authentisch (Schärfe / Unschärfe) und haben eine realistische Lichtstimmung.

● Der inhaltliche Bezug zum Textinhalt ist eindeutig gegeben.

● Der Bildaufbau ist plakativ und klar.

● Die Bildmotive dienen der Hervorhebung eines Themas und sind keine Dekoration.

● Wenn möglich, zeigen wir Menschen.

21

Bildbeispiele für Ausbildung

Bildbeispiele für Industrie

22

Bildbeispiele für Tourismus

Bildbeispiele für Wirtschaft

23

5. Navigationskonzept

Zielgruppeneinstiege

Der Zielgruppeneinstieg bildet den Ersteinstieg für die wichtigsten Zielgruppen der IHK und sollen deshalb

prominent platziert werden. Sie führen jeweils auf eine sog. Mash-up-Seite, auf welcher Inhalte aus

verschiedenen Ebenen bzw. Navigationspfaden für die Zielgruppe zusammengestellt werden. Auf den

Zielgruppen-Mash-Up-Seiten gibt es einen redaktionell bespielten Bereich sowie einen Bereich, in

welchem die meist geklickten relevanten Inhalte für die Zielgruppe ausgespielt werden.

● Die optimale Belegung der Zielgruppeneinstiege sind 3.

● Alternativ besteht die Möglichkeit, 4 Zielgruppeneinstiege zu wählen. Auch vor dem Hintergrund

der mobilen Darstellung wird die Nutzung von drei Zielgruppeneinstiegen empfohlen.

● In den Zielgruppeneinstiegen sollen die Zielgruppen der Prioritäten 1 und 2 (Ausbilder,

Auszubildende, Unternehmer und Existenzgründer) angesprochen werden.

● Die Zielgruppen können von jeder IHK selbst bestimmt werden.

● Die Ausspielung der automatisch generierten Inhalte auf den Mash-Up-Seiten erfolgt ohne Bild.

24

Suche

Die Suche auf der Startseite ist direkt unter den Zielgruppeneinstiegen platziert. Im Suchfeld können

kombiniert Suchbegriffe, Seitenummern oder Veranstaltungsnummern eingegeben werden. Neben dem

Suchfenster ist ein Link, der dem User die Option bietet, die IHK direkt zu fragen. Der Link öffnet eine Seite

mit Kontaktinformationen und einem Formular, über das man seine Frage stellen kann.

Auf den Unterseiten befindet sich die Suche im Bereich der Metanavigation, die beim Runterscrollen fest

am oberen Browserrand verankert ist.

25

Hauptnavigation

Die Navigation ist aufgrund der Vielzahl an Themen linear aufgebaut und in der Benutzerführung stark

reduziert. Vorherrschendes Prinzip dabei ist „Mobile First“: Die Bedienung ähnelt von der Einfachheit der

einer App und stellt die unterschiedlichsten Inhaltsverschachtelungen übersichtlich dar. Folgende Regeln

gelten für die Navigation:

● Inhalte und Navigationspunkte können sortiert auf derselben Ebene stehen

● Übersichtseiten dürfen nicht mit Übersichtseiten des selben Seitentyps verlinkt werden

(Bsp.: Eine Themenübersichtsseite darf nicht auf eine andere Themenübersichtsseite verlinken)

● Downloadobjekte werden in einem Übergangszeitraum von 6 Monaten weiterhin in der Navigation

angezeigt

● Technische Begrenzung der Ebenentiefe auf 6 Ebenen

● Die Anzahl der Hauptnavigationspunkte ist auf 6 begrenzt

● Auf der letzten Ebene eines Navigationspfades dürfen nur noch Contentseiten ausgespielt werden.

26

Funktionsprinzip der Navigation:

Ebene 1

Mit Klick auf den Navigationspunkt „Recht & Steuern“ landet der User auf der Themenübersichtsseite.

Die Unternavigation ist in der linken Seitenspalte ausgeklappt.

27

Ebene 2

Klickt der User auf einen Unternavigationspunkt, fahren die dazugehörenden Themen rechts in einer

weiteren Spalte über den bestehenden Content aus.

28

Ebene 3

Bei weiteren Unterthemen ziehen sich die Navigationsspalten links zusammen. Es kann dabei jederzeit

direkt zwischen den unterschiedlichen Navigationsebenen mit einem Klick gewechselt werden. Seiten des

gleichen typs werden immer untereinander ausgespielt und sind durch Trennstriche von anderen

Seitentypen getrennt. Unterschiedliche Icons an den Navigationspunkten zeigen dem User auf, um welche

Seitentypen es sich handelt. Navigationspunkte ohne Icon sind immer Artikelübersichtsseiten oder

Contentseiten (Artikel, Dokumentenliste, A-Z Liste).

29

Ebene 4

Erst auf der Seite, auf der sich Content befindet, ändern sich die Inhalte im Contentbereich. Jetzt wird der

Artikel über die ganze Breite angezeigt und die Navigationsspalten verschwinden.

Die Reihenfolge der Navigationsinhalte ist dabei folgende:

1. Navigationspunkte

2. Seiten mit Inhalten (Artikelübersichtseiten, Artikel, Dokumentenlisten, etc.)

3. Dokumente (pdf, xls, doc, etc.) – begrenzt auf 6 Monate

4. Externe links

Navigationspunkte in der Seitennavigation sollten nicht länger als 1 Zeile (ca. 25 Zeichen) sein.

30

Servicenavigation

● Es gibt maximal 5 Servicenavigationspunkte

● Die Servicenavigationspunkte sind frei definierbar

● Stärkere Überarbeitung und Reduktion ist erforderlich

● Die Themenübersichtsseite mit eigener Navigation darf eingesetzt werden

● Max. Tiefe von 4 Ebenen

31

Footer

● Der Footer besteht aus 2 Teilen: Der Content-bezogene Footer und der globale Footer.

● Im Content-bezogenen Footer werden dem User Interaktionsmöglichkeiten angeboten, die sich

direkt auf die darüber liegenden Inhalte beziehen („Diese Seite drucken“ und „Als PDF speichern“)

● Im globalen Footer, der auf jeder Seite zu finden ist, wird die Hauptnavigation, 8 frei definierbare

Imnhalte und Kontakdaten verlinkt. Im unteren Beriech können verlinkte Logos von anderen IHK-

Verbänden und weitere Kanäle (z.B. Twitter) eingebaut werden. Den Abschluss bildet der

Copyright, Datenschutz und Haftungshinweis.

32

6. Templates Es gibt insgesamt 18 Templates, die sich in folgende drei Seitentypen gliedern:

Strukturseiten

● Startseite

● Mash-Up Seite

● Themenübersichtsseite

● Artikelübersichtsseite

● A-Z Liste

● Dokumentenliste

Contentseiten

● Artikelseite

● Bildergalerie

● Veranstaltungsseite

● Newsletter

● Umfrageergebnisseite

Funktionsseiten

● Veranstaltungsanmeldung

● Veranstaltungssuche

● Suchergebnisseite

● Login

● Umfrage

● Formular

● Newsletteranmeldung

Übersicht: http://dev-www.tallence.com/ihk

33

Mögliche Verlinkungen der Templates

34

Startseite

ansehen

Beschreibung

Die Startseite ist die Seite, auf die der Besucher landet, wenn er die Home-URL der jeweiligen IHK eingibt.

Die Startseite wird nur 1x eingesetzt. Sie dient dazu dem User einen schnellen Überblick und Einstieg in

die Themen der jeweiligen IHK zu geben.

Aufbau und Inhalt

Die Startseite ist so angelegt, dass sie unterschiedlichste Themen flexibel aufnehmen kann. Der

Headerbereich besteht aus der Metanavigation, Servicenavigation, den Zielgruppeneinstiegen, der Suche

und der Hauptnavigation.

Im Contentbereich können unterschiedliche Teaser angeordnet werden, je nach Bedürfnis der IHK und der

zu kommunizierenden Themen.

Regeln

● Teaser dürfen nur in einer Reihe mit vordefinierten Teasertypen stehen, damit ein ein

gleichmäßiges Erscheinungsbild gewährleistet ist.

● Bei allen Teasern ist auf eine gleichmäßige Befüllung zu achten, so dass z.B. nie ein sehr langer

Teaser neben einem zu kurzem Teaser steht.

● Es können 3 x 4-spaltige Teaser in einer Reihe angeordnet werden

35

● Es können 2 x 6-spaltige Teaser in einer Reihe werden

● Teaser mit Bild müssen neben Teasern mit Bild oder Linkteasern mit Bild stehen.

● Teaser ohne Bild müssen neben Teasern ohne Bild oder Link-Teasern ohne Bild stehen.

● Eine Veranstaltungsliste kann nur neben einem 6-spaltigen Teaser stehen, dieser kann ein Teaser

mit Bild sein, aber auch ein Teaser ohne Bild (auf ausgewogene Inhaltslänge achten).

Startseite für eingeloggte Mitglieder (Extranetz)

ansehen

Beschreibung

Die Startseite für eingeloggte Mitglieder entspricht dem Template „Startseite“ mit dem zusätzlichem

Infofenster über dem Contentbereich.

Aufbau und Inhalt

Im Infofenster sind die persönlichen Mitgliedsdaten und Links zu exklusiven Mitgliederinformationen.

Regeln

Wie Startseite.

36

Mash-Up Seite

ansehen

Beschreibung

Eine Mashup-Seite dient dazu, Themen für eine jeweilige Zielgruppe zu präsentieren. Sie besteht aus

einem manuell befüllten und einem automatisch befüllten Bereich. Die Mashup-Seite dient ausschließlich

als Landingpage für die jeweiligen Zielgruppeneinstiege.

Aufbau und Inhalt

Die Themenseite besteht aus einem Header mit Metanavigation, Servicenavigation und Hauptnavigation.

Der 12-spaltige Contentbereich besteht aus einer optionalen Dachzeile, Headline, Vorlauftext und einem

Teaserbereich. Der Teaserbereich besteht aus einem redaktionell und automatisch befüllten Bereich, hier

sind 4- und 6-spaltige Teaser möglich. Der automatisch befüllte Bereich wird nach bestimmten Regeln

(Zielgruppe, Aktualität) bestückt, diese Teaser bleiben ohne Bild. Am Ende der Seite kann optional ein

Ansprechpartner-Modul gesetzt werden.

Regeln

● Teaser dürfen nur in einer Reihe mit vordefinierten Teasertypen stehen, damit ein gleichmäßiges

Erscheinungsbild gewährleistet ist.

● Bei allen Teasern ist auf eine gleichmäßige Befüllung zu achten, so dass z.B. nie ein sehr langer

Teaser neben einem zu kurzem Teaser steht.

● Es können 3 x 4-spaltige Teaser in einer Reihe angeordnet werden.

● Es können 2 x 6-spaltige Teaser in einer Reihe werden.

● Teaser mit Bild müssen neben Teasern mit Bild oder Linkteasern mit Bild stehen.

● Teaser ohne Bild müssen neben Teasern ohne Bild oder Link-Teasern ohne Bild stehen.

● Eine Veranstaltungsliste kann nur neben einem 6-spaltigen Teaser stehen, dieser kann ein Teaser

mit Bild sein, aber auch ein Teaser ohne Bild.

37

Themenübersichtsseite

ansehen

Beschreibung

Die Hauptthemen der IHK finden sich in der Hauptnavigation, hinter diesen Hauptnavigationspunkten steht

eine Themenseite, die einen Einstieg und Überblick in das jeweilige Themengebiet gibt.

Aufbau und Inhalt

Die Themenübersichtsseite besteht aus einem Header mit Metanavigation, Servicenavigation und

Hauptnavigation.

In der linken Seitenspalte befindet sich die 4-spaltige Subnavigation mit den Inhalten zu dem jeweiligen

Thema.

Der 8-spaltige Contentbereich besteht aus einer optionalen Dachzeile, einer Headline und einen

Vorlauftext. Darunter stehen Teaser, Veranstaltungsmodul (optional), Ansprechpartner (optional) und

Linklisten (optional).

Regeln

● Themenübersichtseiten dürfen nur jeweils für einen Hauptnavigationspunkt oder

Servicenavigationspunkt stehen.

● Sie dürfen nicht in tieferen Ebene stehen.

● Von Themenseite kann auf alle anderen Seitentypen verlinkt werden.

● Bei allen Teasern ist auf eine gleichmäßige Befüllung zu achten, so dass z.B. nie ein sehr langer

Teaser neben einem zu kurzem Teaser steht.

38

● Es können 1 x 8-spaltige Teaser in einer Reihe angeordnet werden

● Es können 2 x 6-spaltige Teaser in einer Reihe werden

● Teaser mit Bild müssen neben Teasern mit Bild oder Linkteasern mit Bild stehen.

● Teaser ohne Bild müssen neben Teasern ohne Bild oder Link-Teasern ohne Bild stehen.

Die Artikelübersichtsseite

ansehen

Beschreibung

Die Artikelübersichtsseite ist die letzte Strukturseite. Nach der Artikelübersichtsseite kommen direkt Inhalte

in Form von Artikeln, Dokumenten etc.

Aufbau und Inhalt

Die Artikelübersichtsseite besteht aus einem Header mit Metanavigation, Servicenavigation und

Hauptnavigation.

Der 12-spaltige Contentbereich besteht aus einer optionalen Dachzeile, einer Headline und einen

Vorlauftext. Darunter stehen Teaser und ein Ansprechpartner-Modul (optional).

Regeln

● Insgesamt sollten nie mehr als 15 Artikel auf einer Artikelübersichtsseite ausgespielt werden.

● Ein Teaser der Artikelübersichtseite darf niemals auf eine andere Artikelübersichtseite verlinken.

● Die Teaser können nur auf Artikelseiten verlinken.

● Bei allen Teasern ist auf eine gleichmäßige Befüllung zu achten, so dass z.B. nie ein sehr langer

Teaser neben einem zu kurzem Teaser steht.

● Es können ausschließlich 3 x 4-spaltige Teaser in einer Reihe angeordnet werden

● Teaser mit Bild müssen neben Teasern mit Bild oder Linkteasern mit Bild stehen.

● Teaser ohne Bild müssen neben Teasern ohne Bild oder Link-Teasern ohne Bild stehen.

39

Die Artikelseite

ansehen

Beschreibung

Auf einer Artikelseite können Informationen in unterschiedlichster Weise aufbereitet werden. Eine

Artikelseite ist das „Ziel“ für den Nutzer, wo er die von ihm gesuchte Information übersichtlich aufbereitet

vorfindet.

Aufbau und Inhalt

Die Artikelseite besteht aus einem Header mit Metanavigation, Servicenavigation und Hauptnavigation.

Die Seite besteht aus einem 8-spaltigen Contenbereich und einer 4-spaltigen Marginalspalte (rechts).

Der einführende Bereich des 8-spaltige Contentbereich besteht aus einer optionalen Dachzeile, einer

Headline und einem Inhaltsverzeichnis (optional), der auf darunter liegende Inhalte verlinkt. Die darunter

liegenden Inhalte können vielfältig aufgebaut sein und aus Headline, Vorlauftext, Mengentext,

eingebetteten Bild- und Videomaterial, Zitateinschüben, Highcharts, Aufzählungen, Content-Tabs,

Tabellen, Veranstaltungsmodulen und Listen bestehen.

Regeln

● Im Contentbereich dürfen keine Teaser eingebaut werden.

● Im Contentbereich darf kein Kontaktmodul eingebaut werden, dafür ist auf Artikelseiten die

Marginalspalte vorgesehen.

40

Die Veranstaltungsdetailseite

ansehen

Beschreibung

Die Veranstaltungsdetailseite informiert über eine Veranstaltung oder Veranstaltungsreihe und bietet die

Möglichkeit, eine Veranstaltung zu buchen.

Aufbau und Inhalte

Die Veranstaltungsseite besteht aus einem Header mit Metanavigation, Servicenavigation und

Hauptnavigation.

Die Seite besteht aus einem 8-spaltigen Contentbereich und einer 4-spaltigen Marginalspalte (rechts).

Der einführende Bereich des 8-spaltige Contentbereich besteht aus einer optionalen Dachzeile, einer

einzeiligen Headline und einem Index (optional), der auf darunter liegende Inhalte verlinkt. Bei einer

zweizeiligen Headline bitte H2 verwenden. Darunter kann die Veranstaltung mit Überschrift, Mengentext

und Bildern beschrieben werden. Unter dem Beschreibungstext finden sich das Terminmodul, ein Content-

Tab Modul (optional) mit weiteren Informationen, Listen mit weiterführenden Informationen (optional) und

das Veranstaltermodul (optional).

Regeln

Damit die Anzahl der alternativen Veranstaltungstermine nicht zu lang wird, darf die max. Anzahl der

alternativen Termine 10 Veranstaltungen nicht überschreiten.

● Bei einer größeren Anzahl von Terminen zu einer Veranstaltung wird die Aufteilung durch eine

Splittung der Veranstaltungsreihen erreicht (bspw. nach Quartalen): Für die Veranstaltungsreihe

„Existenzgründung“ gibt es jede Woche einen Termin. Für die Aufteilung empfiehlt sich die

41

Veranstaltung in „Existenzgründungsseminare Frühjahr“, „Existenzgründungsseminare Sommer“,

etc.. aufzuteilen.

● Ansprechpartner müssen in der Marginalspalte verortet werden.

● Das Veranstaltermodul muss im Contentbereich verortet werden und ist immer automatisch

eingeklappt.

Veranstaltungsanmeldung

ansehen ansehen ansehen

Beschreibung

Die Veranstaltungsanmeldung ermöglicht dem User sich online für eine Veranstaltung zu registrieren.

Aufbau und Inhalt

Die Veranstaltungsanmeldung besteht aus einem Header mit Metanavigation, Servicenavigation und

Hauptnavigation.

Die Seite besteht aus einem 8-spaltigen Contentbereich und einer 4-spaltigen Marginalspalte (rechts). Die

Marginalspalte beinhaltet Die rechtlich vorgeschriebenen Links „Kundeninformation“.

Der einführende Bereich des 8-spaltige Contentbereich besteht aus einer optionalen Dachzeile, einer

Headline und einem Link zur jeweiligen Veranstaltungsdetailseite. Ein darunter liegendes Formular ist in

die 3 Schritte 1. Dateneingabe, 2. Anmeldung, 3. Bestätigung aufgeteilt.

Dateneingabe: Dieser Schritt dient zur Erfassung der Kundendaten, die Bestückung kann je nach Bedarf

festgelegt werden. Ein weiterführender Button leitet zum nächsten Schritt.

Anmeldung: Hier werden die vorher angegebenen Daten noch mal zur Überprüfung für den Kunden

übersichtlich dargestellt. Nach Beantworten der Sicherheitsfrage und Zustimmung zu den AGBs und

Widerrufsbelehrung wird die Veranstaltung durch Klick auf einen Button zahlungspflichtig gebucht und der

User wird zum dritten Schritt weiter geleitet.

42

Bestätigung: Bei erfolgreicher Anmeldung erscheint ein Bestätigungstext. Darunter kann optional ein

Veranstaltungsmodul mit weiteren Veranstaltungen angezeigt werden.

Regeln

● Die Marginalspalte ist ausschließlich für die Kundeninformationen vorbehalten

Veranstaltungssuche

ansehen

Beschreibung

Die Veranstaltungssuche sucht ausschließlich im Bereich Veranstaltungen. Durch Eingabe eines

Suchbegriffes/Veranstaltungsnummer werden passende Veranstaltungen ausgespielt. Bei Aufruf der Seite

wird standardmäßig eine Liste mit allen Veranstaltungen als „Trefferliste“ angezeigt.

Aufbau und Inhalt

Die Veranstaltungssuche besteht aus einem Header mit Metanavigation, Servicenavigation und

Hauptnavigation.

Die Seite besteht aus einem 8-spaltigen Contentbereich und einer 4-spaltigen Marginalspalte (rechts).

An oberster Stelle des Contentbereiches steht ein prominentes Suchfeld mit dem zuvor eingegebenen

Suchbegriff. Ein darunter liegender Link ermöglicht den Wechsel zu einer Detailsuche mit der Möglichkeit

Veranstaltungen nach den Kriterien Zeitraum, Ort und Rubriken zu suchen. Darunter folgt die Anzahl der Suchergebnisse als Überschrift mit einer Auflistung der Suchergebnisse.

43

Die Suchergebnisliste ist zur besseren Übersichtlichkeit auf verschiedene Seiten aufgeteilt. Am Ende der

Liste findet sich die Paginierung.

Regeln

● Die Anzahl der ausgespielten Trefferergebnisse bevor die Paginierung startet, wird in der

Backend-Entwicklung festgelegt.

Suchergebnisseite Volltextsuche

ansehen

Beschreibung

Die Suchergebnisseite dient zur übersichtlichen Darstellung der Suchergebnisse zu einem vom User

eingegebenen Suchbegriff. Man gelangt zu dieser Seite in dem man auf einer anderen Seite eine Suche

ausführt.

Aufbau und Inhalt

Die Suchergebnisseite besteht aus einem Header mit Metanavigation, Servicenavigation und

Hauptnavigation.

Die Seite besteht aus einem 8-spaltigen Contentbereich und einer 4-spaltigen Marginalspalte (rechts).

An oberster Stelle des Contentbereiches steht ein prominentes Suchfeld mit dem zuvor eingegebenen

Suchbegriff. Ein darunter liegender ausklappbarer Filter ermöglicht die Eingrenzung der Suchergebnisse. Darunter folgt die Anzahl der Suchergebnisse als Überschrift mit einer Auflistung der Suchergebnisse.

44

Die Suchergebnisse sind in Einzeltreffer und Treffer in Kategorien aufgeteilt. Nach 6 Einzeltreffern folgen

die Kategorien (diese können Veranstaltungen, Shop und Listen sein, sofern dazu Datenbanken

vorhanden sind).

Die Suchergebnisliste ist zur besseren Übersichtlichkeit auf verschiedene Seiten aufgeteilt. Am Ende der

Liste findet sich die Paginierung.

Regeln

● Es werden maximal 2 Treffer in den Kategorie-Einschüben ausgespielt

● Die Anzahl der ausgespielten Trefferergebnisse bevor die Paginierung startet, wird in der

Backend-Entwicklung festgelegt.

A-Z Liste

standard mit Beschreibung

ansehen ansehen

45

Links Links + Beschreibung

ansehen ansehen

Beschreibung

Mit den unterschiedlichen A-Z-Listentemplates können Informationen alphabetisch sortiert und für den

User übersichtlich aufbereitet werden. Über ein darüber liegenden Index kann direkt der gewünschte

Anfangsbuchstaben aufgerufen werden.

Aufbau und Inhalt

Die Seite besteht aus einem 8-spaltigen Contentbereich und einer 4-spaltigen Marginalspalte (rechts).

Die Liste „Standard“ beinhaltet Schlagworte/Themen mit Ausklappfunktion. Bei Klick öffnet sich der

darunter liegende Inhalt.

Die Liste „Beschreibung“ beinhaltet Schlagworte/Themen mit direkt darunter liegender Beschreibung. Die

Inhalte sind nicht verlinkt.

Die Liste „Links“ enthält Links (ohne Aufklappfunktion) zu internen, externen und Download-Objekten.

Die Liste „Links mit Beschreibung“ enthält direkte Links (wie oben) mit einem darunter stehendem, kurzen

Beschreibungstext.

Regeln

● Die Ausklappinhalte der Liste „Standard“ dürfen nicht zu lang sein um die Übersichtlichkeit für den

User nicht zu beeinträchtigen.

● Der Charakter einer Liste muss gewahrt werden, d.h. hier dürfen nur Inhalte dargestellt werden für

die eine alphabetische Sortierung Sinn macht (z.B. Ansprechpartner, Glossar usw.).

● Es sollten mindestens 30 unterschiedliche Inhalte vorhanden sein, damit eine A-Z Liste Sinn

macht.

46

Dokumentenliste

ansehen

Beschreibung

Die Dokumentenliste dient dazu dem User eine Inhaltssammlung (Links, Downloads) zu einem bestimmten

Thema anzubieten.

Aufbau und Inhalt

Die Seite besteht aus einem 8-spaltigen Contentbereich und einer 4-spaltigen Marginalspalte (rechts).

Eine Dokumentenliste beinhaltet eine optionale Dachzeile, Headline und Vorlauftext, die das Thema der

Liste beschreibt. Darunter sind Verlinkungen aufgelistet, die frei zusammengestellt werden können. Diese

Verlinkungen können sein:

● Schlagwort/Thema + Beschreibungstext

● Schlagwort/Thema + Beschreibungstext + Bild

● Schlagwort/Thema + Download

Regeln

● Die Inhalte einer Dokumentenliste müssen in einem inhaltlichen Bezug stehen.

● Die Beschreibungstexte der einzelnen Dokumente muss kurz und prägnant sein.

47

● Bildmaterial zur Illustration von Dokumenten darf nicht generisch sein.

Login-Seite

ansehen

Beschreibung

Auf der Login-Seite können sich Mitlieder von IHK24 in den geschützten Mitliederbereich einloggen.

Aufbau und Inhalt

Die Seite besteht aus einem 8-spaltigen Contenbereich und einer 4-spaltigen Marginalspalte (rechts).

Der 8-spaltige Contentbereich besteht aus einer optionalen Dachzeile, einer Headline und einem

optionalen Beschreibungstext. Darunter befindet sich das Einlog-Formular. Im unteren Bereich der Seite

können noch zusätzliche Informationen aufgelistet werden.

In der Marginalspalte ist der/die passende(n) Ansprechpartner aufgelistet.

Regel

48

● Die Marginalspalte der Login-Seite ist ausschließlich für Ansprechpartner vorgesehen.

● Der optionale Beschreibungstext sollte so kurz wie möglich gehalten sein, um das wichtigste

Element, das Login-Formular, nicht aus dem sichtbaren Bereich zu verdrängen.

● Der unter dem Login-Formular liegende optionale Text soll so knapp und informativ wie möglich

sein.

Umfrageseite

Umfrage Umfrageergebnis

ansehen ansehen

Beschreibung

Auf der Umfrageseite können einfache Umfragen mit einer Frage durchgeführt werden. Nach der

Beantwortung der Frage wird dem User das Ergebnis/der Zwischenstand direkt angezeigt. Es gibt auch die

Möglichkeit eine erweiterte Umfrage auszuführen, bei der 2 Fragen beantwortet werden müssen und das

Ergebnis dann gewichtet dargestellt wird (z.B. Sind die Unternehmer ja/nein, das Umfrageergebnis wird

dann in die Gruppen Unternehmer/Kein Unternehmer aufgeteilt).

Aufbau und Inhalt

Die Seite besteht aus einem 8-spaltigen Contentbereich und einer 4-spaltigen Marginalspalte (rechts).

Der 8-spaltige Contentbereich besteht aus einer optionalen Dachzeile, einer Headline, einem optionalen

Beschreibungstext und der Frage, die dem User gestellt wird. In einem Formularfeld hat er die Möglichkeit

aus verschiedene Antwortmöglichkeiten auszuwählen. Bei Klick auf den „Abstimmen-Button“ wird er

automatisch zur Umfrageergebnis-Seite weitergleitet. Der Aufbau der Umfrageergebnisseite ist gleich dem

49

der Umfrageseite, mit dem Unterschied, dass anstatt des Frageformulars das Ergebnis grafisch aufbereitet

dargestellt wird.

Regeln

● Es kann nur eine Frage pro Umfrage gestellt werden bzw. 2 Fragen bei der erweiterten Umfrage

● Es sollten nicht mehr als 5 Antwortmöglichkeiten gegeben werden.

● Es gibt für den Usern nur die Möglichkeit, eine Antwort pro Frage zu geben (Radiobuttons).

● Die Umfrageseite dient nicht zur Ausführung komplexer Umfragen, sondern nur um die schnelle

Erstellung eines Meinungsbildes.

Newsletter

ansehen

Beschreibung

Das Newsletter-Template bietet die Möglichkeit eine Themenauswahl anzuteasern und dann zur

weiterführenden Seite auf der IHK-Website zu verlinken. Der Newsletter gibt einen kurzen

Themenüberblick, ist aber nicht dafür gedacht, tief in die Inhalte einzusteigen, das geschieht dann auf der

Webseite.

Aufbau und Inhalt

Der Newsletter hat ein 8-spaltiges Raster. Der Header besteht aus der Bild-Wortmarke der jeweiligen IHK

und der Newsletter-Ausgabe mit Datum. Im Bereich darunter erfolgt die persönliche Ansprache. Eine

optionale Dachzeile und Headline geben das Überthema des Newsletters vor. Die Indexierung, die sich

aus h2 ergibt, ist auch optional. Die darunter liegenden Teaser können folgende Formate haben:

● 8-spaltig Bild-Headline-Text

50

● 8-spaltig Headline-Text

● 4-spaltig Bild-Headline-Text

● 4-spaltig Headline-Text

Den Abschluss bilden die Links zur Newsletterverwaltung und das Impressum.

Regeln

● 4-spaltige Bild-Headline-Text-Teaser können nur neben einem anderen 4-spaltigen Bild-Headline-

Text-Teaser stehen.

● 4-spaltige Headline-Text-Teaser können nur neben einem anderen 4-spaltigen Headline-Headline-

Teaser stehen.

Formularseite

ansehen

Beschreibung

Auf der Formularseite können alle gängigen Formularelemente dargestellt werden. Beispielanwendungen

sind Umfragen, Registrierungsseiten u.ä.

Aufbau und Inhalt

Die Seite besteht aus einem 8-spaltigen Contentbereich und einer 4-spaltigen Marginalspalte (rechts).

Der 8-spaltige Contentbereich besteht aus einer optionalen Dachzeile, einer Headline und einem

optionalen Beschreibungstext. Im Bereich darunter können beliebige Formularelemente angeordnet

werden.

51

Die Werbung

Wallpaper

ansehen

Scyscraper

52

Medium Rectangle

ansehen

ansehen

Beschreibung

Es gibt die Möglichkeit 3 Werbeformate einzubinden: Wallpaper, Skyscraper und Medium Rectangle.

Skysraper und Wallpaper werden nur angezeigt, wenn das Browserfenter eine Mindestbreite von 1200px

beträgt. Das Medium Rectangle wird immer ausgespielt.

Regeln

● Werbebanner sollten nur dann eingesetzt werden, wenn ihr Nutzen als größer angesehen wird als

der Grad der Störung, den sie bei den Nutzern verursachen.

53

7. Module

Teaser Karussell mit Bild

Beschreibung

Der Teaser wird an oberster Stelle im Content der Startseite eingesetzt, um prominent Themen zu

kommunizieren. Den Teaser gibt es ausschließlich auf der Startseite bzw. der Startseite für eingeloggte

Mitglieder. Er besteht aus einer optionalen Dachzeile, Headline, Beschreibungstext und Bild.

Der Teaser ist immer 12-spaltig.

Regeln

● Der Teaser kann mit 1-3 Inhalten bestückt werden.

● Es können nur interne Verlinkungen gesetzt werden (keine externen Links, keine Downloadlinks)

● Textlängenvorgaben siehe Kapitel „Teaser“

54

Teaser Veranstaltungsliste

Beschreibung

Der Teaser zeigt eine Auswahl an Veranstaltungen, die Auswahl wird manuell festgelegt (z.B. nächste

Veranstaltungen/neuste Veranstaltungen, Veranstaltungen die gezielt beworben werden sollen etc.). Er

besteht aus einer Headline, den einzelnen Veranstaltungen mit Datumsicon, einem Button, der zur

Veranstaltungssuchergebnisseite mit den aktuell anstehenden Veranstaltungen führt.

Den Teaser gibt es 4- und 8-spaltig.

Regeln

● Die Länge des 4-spaltigen Teaser sollte an die Länge des nebenstehenden Elements angepasst

werden.

● Die Anzahl der Veranstaltungen darf 5 nicht überschreiten.

● Textlängenvorgaben siehe Kapitel „Überschriften“

55

Teaser Headline-Text

Beschreibung

Der Teaser besteht aus einer optionalen Dachzeile, Headline und Beschreibungstext.

Der Teaser kann einen untenstehenden Kontextlink beinhalten. Dieser verweist auf einen anderen

thematisch verwandten Inhalt und besteht lediglich aus optionaler Dachzeile und Headline.

Den Teaser gibt es 4- und 6-spaltig.

Regeln

● Textlängenvorgaben siehe Kapitel „Teaser“

56

Teaser Bild-Headline-Text

Beschreibung

Der Teaser besteht aus einer optionalen Dachzeile, Headline, Beschreibungstext und Bild.

Der Teaser kann einen untenstehenden Kontextlink beinhalten. Dieser verweist auf einen anderen

thematisch verwandten Inhalt und besteht lediglich aus optionaler Dachzeile und Headline.

Den Teaser gibt es 4- und 6-spaltig.

Regeln

● Das Bild zur Illustration der Inhalte darf nicht generisch sein.

● Textlängenvorgaben siehe Kapitel „Teaser“

57

Teaser Headline-Link

Beschreibung

Der Teaser kann mit internen Links, externen Links und Downloadlinks bestückt werden. Er besteht aus

einer optionalen Dachzeile, Headline und Links. Die Listeneinträge bestehen aus einem Icon, dass die Art

des Links darstellt (intern, extern, Mitgliederbereich, Download) und der Headline (ohne Dachzeile).

Regeln

● Empfohlen wird die durchgehende Bestückung nur eines Linktyps (z.B. nur Downloadlinks) um ein

einheitliches und ruhiges Erscheinungsbild zu gewährleisten.

● Die Anzahl der Links sollte abhängig vom nebenstehenden Element gemacht werden, um ein

einheitliches Layout zu gewährleisten.

● Textlängenvorgaben siehe Kapitel „Teaser“.

● Bevor ein externer Link und Downloadlinks im Teaser gesetzt wird sollte geprüft werden, ob dieser

Inhalt auch irgendwo anders kommuniziert werden kann.

58

Teaser Bild-Headline-Link

Beschreibung

Der Teaser kann mit internen Links, externen Links und Downloadlinks bestückt werden. Er besteht aus

einer optionalen Dachzeile, Headline, Links und Bild.

Den Teaser gibt es 4- 6-spaltig.

Regeln

● Das Bild zur Illustration der Inhalte darf nicht generisch sein.

● Empfohlen wird die durchgehende Bestückung nur eines Linktyps (z.B. nur Downloadlinks) um ein

einheitliches und ruhiges Erscheinungsbild zu gewährleisten.

● Die Anzahl der Links sollte abhängig vom nebenstehenden Element gemacht werden, um ein

einheitliches Layout zu gewährleisten.

● Textlängenvorgaben siehe Kapitel „Teaser“.

● Bevor ein externer Link und Downloadlinks im Teaser gesetzt wird sollte geprüft werden, ob dieser

Inhalt auch irgendwo anders kommuniziert werden kann.

59

Bild- / Videomodul

Beschreibung

Mit dem Bild- /Videomodul können Bilder und Videos auf Artikelseiten eingebettet werden. Beide können

mit einem optionalen Beschreibungstext versehen werden. Durch Klick auf das Bildmodul wird in einem

Layer eine vergrößerte Version des Bildes dargestellt, bei Klick auf das Videomodul wird das Video in

einem Layer abgespielt. Beide Module besitzen eine Quellenangabe.

Regeln

● Es muss immer eine Quellenangabe angegeben werden.

● Die Bilder sollten mindestens eine Größe von 1240 x 826 px haben, um eine optimale Ausspielung

zu gewährleisten.

60

Bildergalerie

Beschreibung

Der Aufbau der Bildergalerie ist der gleiche wie beim Bild-Modul, zusätzlich zeigt ein Icon in der rechten

oberen Ecke die Anzahl der Bilder in der Galerie an. Bei Klick auf das Bild öffnet sich ein Layer mit dem

Aufmacherbild im Großformat (sofern vorhanden). Der User kann nacheinander durch die Bilder vor- und

zurückblättern.

Regeln

● Es muss immer eine Quellenangabe angegeben werden.

● Die Bilder sollten mindestens eine Größe von 1240 x 826 px (Querformat) oder eine Höhe von

mindestens 826 Px (Hochformat) haben, um eine optimale Ausspielung zu gewährleisten.

61

Kontaktmodul

Beschreibung

Das Kontaktmodul gibt es als 4-spaltige Version (für die Marginalspalte) und 8-spaltige Version (für den

Contentbereich. Das Kontaktmodul gibt es in folgenden Bestückungen:

● 1 Ansprechpartner mit Bild

● 1 Ansprechpartner ohne Bild

● Mehrere Ansprechpartner

Das Kontaktmodul kann, wenn mehr als 1 Ansprechpartner existiert, default mit erstem Ansprechpartner

ausgeklappt, oder mit allen Ansprechpartnern eingeklappt, dargestellt werden.

Das Bild kann ein beliebiges Format haben, es wird aber ein Querformat empfohlen um eine optimale

Platzausnutzung in der Marginalspalte zu gewährleisten.

Regeln

● Es können maximal 6 Ansprechpartner im Kontaktmodul gelistet werden.

● Es darf nur 1 Kontaktmodul pro Seite verwendet werden (sowohl im Content als auch in der

Marginalspalte).

● Neben den Kontaktdaten können maximal 3 weitere Zusatzinformationen ausgespielt werden (z.B.

Standort, Abteilung, Funktion).

62

Veranstaltungsmodul

Beschreibung

Das Veranstalter-Modul gibt es in einer 8-spaltigen Version, es wird ausschließlich auf der

Veranstaltungsdetailseite verwendet um Kontaktdetails über den Veranstalter anzubieten. Der Aufbau ist

derselbe wie beim 8-spaltigen Kontaktmodul. Es gelten die gleichen Regeln. Der einzige Unterschied

besteht darin, dass das Veranstaltermodul automatisch immer im eingeklappten Zustand ausgespielt wird.

Als Bildmotiv empfiehlt sich das Logo des Veranstalters.

63

Ankerlinks (Sprungmarken)

Beschreibung

Ankerlinks dienen dazu Content innerhalb der Seite strukturiert darzustellen (Inhaltsangabe) und direkt

aufrufbar zu machen.

Regeln

● Ankerlinks können nur zu Beginn einer Artikelseite und einer Veranstaltungsdetailseite stehen.

● Die Beschriftung generiert sich automatisch aus den Überschriften im darunter liegenden Content.

64

Ausklappliste

Beschreibung

Mit Hilfe einer Ausklappliste kann Content übersichtlich zusammengefasst werden. Beim Klick auf den

Beschreibungstext/das Stichwort öffnet sich der darunter liegende Inhalt.

Regeln

● Die Ausklappinhalte der Liste dürfen nicht zu lang sein um die Übersichtlichkeit für den User nicht

zu beeinträchtigen.

● Der Beschreibungstext/das Stichwort muss kurz und prägnant sein.

65

Linkliste

Beschreibung

In einer Linkliste werden Links untereinander dargestellt. Diese Links können auf interne, externe und

Download-Quellen verweisen und sind mit einem dementsprechenden Icon versehen.

Regeln

● Die Linktexte sollten kurz und prägnant sein.

66

Linkliste mit Beschreibung

Beschreibung

In einer Linkliste mit Beschreibung werden Links untereinander dargestellt sind zusätzlich mit einem

Beschreibungstext versehen. Diese Links können auf interne, externe und Download-Quellen verweisen

und sind mit einem dementsprechenden Icon versehen.

Regeln

● Die Linktexte sollten kurz und prägnant sein.

Die Beschreibungstexte sollten kurz und prägnant sein und untereinander eine ähnliche Länge haben.

67

●

Download-Liste

Beschreibung

In einer Downloadliste können Download-Objekte untereinander dargestellt werden. Ein Listeneintrag

besteht aus dem Icon, das die Art des Objektes anzeigt, einer optionale Dachzeile mit Headline, einem

optionalen Beschreibungstext und der Dateigröße.

Regeln

● Die Dateigrößen der Download-Objekte sollten so klein wie möglich sein.

68

Content-Tab Modul

Beschreibung

Das Content-Tab Modul dient dazu, komplexe Inhalte in Schritte aufzuteilen und platzsparend in den

Content einzubinden. Es besteht aus einer Headline, dem Inhalt, einem Index (der aus den einzelnen

Schritten besteht) und einen „Weiter“-Button.

Regeln

● Die einzelnen Inhaltsblöcke sollten in der Länge nicht zu unterschiedlich sein, um beim

Durchblättern die Seitenlänge nicht zu sehr zu variieren und die Übersichtlichkeit für den User zu

gewährleisten.

● Nur Inhalte, für die eine Schritt- für-Schritt-Aufteilung Sinn macht, dürfen in das Content-Tab Modul

aufgenommen werden.

69

Highchart-Grafik

Beschreibung

Das Highchart-Modul dient zur Darstellung von Diagrammen, es kann optional mit einem

Beschreibungstext versehen werden. Welche Arten von Diagrammen verwendet werden können, ist auf

highcharts.com ersichtlich.

70

A A1

B B1

C C1

A A2

B B2

C C2

A B C

A1 B1 B1

A2 B2 B2

Tabelle

Beschreibung

Eine Tabelle dient zur strukturierten Darstellung von Inhalten.

Regeln

● Tabellen dürfen nur dazu verwendet werden Daten darzustellen.

● Bevor eine Tabelle verwendet wird, sollte geprüft werden, ob zum Beispiel eine Liste oder

Highchart-Grafik den gleichen Zweck erfüllt.

● Zellen dürfen nicht verbunden werden.

● Tabellen müssen eine Kopfzeile enthalten um die Darstellung im kleineren Größen zu

gewährleisten.

➔

71

iFrame

Beschreibung

Ein iFrame dient dazu andere Webinhalte als selbstständige Dokumente innerhalb einer Artikelseite

darzustellen, z.B. die Suchmaske eine ÖPNV-Anbieters. Regeln

● Die im iFrame eingebetteten Inhalte müssen responsive sein.

72

8. Impressum

Verfasser:

Stefan Schabenberger und Johannes Widmer

Tallence GmbH

Neue Gröningerstraße 13

20457 Hamburg

Deutschland

Tel.: +49 40 360935-100

Fax: +49 40 360935-200 E-Mail: info@tallence.com

Internet: www.tallence.com

Dieses Dokument ist ausschließlich für den persönlichen Gebrauch der Mitarbeiter der IHK24 e.V.-

Mitgliedskammern bestimmt. Die Inhalte und Ausführungen sind nach bestem Gewissen erarbeitet worden.

Dennoch übernimmt die Tallence GmbH keine Haftung für inhaltliche Fehler in diesem Dokument.

Sämtliche im Rahmen dieses Leitfaden verwandten Firmennamen, Logos, Marken, Markenzeichen,

eingetragenen Markenzeichen sowie Produkte und Warenzeichen sind alleiniges Eigentum der

entsprechenden Firmen und dienen rein zu illustrativen Zwecken.

© Tallence GmbH, Hamburg 2015

Alle Rechte vorbehalten. Alle Angaben ohne Gewähr.