Internetdokumentation

Das Webdesign der Handwerkskammern bietet eine Vielzahl an Gestaltungs- und Gliederungsmöglichkeiten. Die technische Basis stellt Bootstrap dar.

Ein großzügiger Umgang mit Weißraum und Bildmaterial sind stilbildend. Zahlreiche Navigationsmöglichkeiten weisen einen übersichtlichen Weg durch die Seiten – geräteunabhängig.

Bevor Sie starten, schauen Sie sich den Demo-Bereich mit exemplarischen Seitentypen an. Hier bekommen Sie einen guten Eindruck, wie sich das neue Webdesign der Handwerkskammern anfühlt und wie Inhalte darin gestaltet werden können.

Um mit der Programmierung zu starten, stehen alle notwendigen Dateien zum Download für Sie bereit.

basis_download

Download 1.0.1

Alle notwendigen Dateien.
CSS, HTML und JS, Beispielseiten und Icon-Font

Download ohne Beispielbilder

Alle Versionen

basis_demo

Demo

Alle Seitentypen im Überblick.
Startseite, Inhalt, Suche, Formulare

Webfonts

Das Design benutzt den Webfont The Sans in den Schnitten Regular und Bold. Dieser Font ist zur Zeit noch nicht auf dem freien Markt verfügbar und muss von Lucasfonts telefonisch oder schriftlich lizenziert werden. www.lucasfonts.com sales@lucasfonts.com +49 (0)30 78718567

Die Icons der Seiten werden über einen eigenen Webfont integriert. Dieser Font ist in dem Download-Paket enthalten.

Neutrale Version

Download neutrale Version

Download 1.0.1

Alle notwendigen Dateien.
CSS, HTML und JS, Beispielseiten und Icon-Font

Download ohne Beispielbilder

Alle neutrale Versionen

Demo neutrale Version

Demo

Alle Seitentypen im Überblick.
Startseite, Inhalt, Suche, Formulare

Layout

Dem Webdesign der Handwerkskammern liegt ein zwölfspaltiges responsives Raster zugrunde. Zeilenweise bauen sich in diesem Raster die Inhalte auf. Jede Zeile kann unterschiedliche Spaltenanzahlen enthalten.

Mehr Informationen zu den Variationsmöglichkeiten finden Sie unter dem Menüpunkt:

Layout

HWK_BAS_SCH_Manual_S2_Grafik1

Je nach Größe des Endgeräts passt sich der Inhalt in der Verteilung auf die Spalten an, so dass auf jedem Gerät eine optimale Lesbarkeit gewährleistet werden kann.

Navigation

HWK_BAS_SCH_Manual_S8_Grafik1

Ein Haupt- und ein Sekundärmenü führen den Benutzer durch die Seite. Umfangreiche Themen können durch weitere Navigationselemente sinnvoll gegliedert und übersichtlich dargestellt werden.

Hauptmenü

  • beinhaltet in fünf Menüpunkten (1) alle relevante Themen für den Handwerker
  • die zweite Hierarchie-Ebene (2) klappt sich unter dem Menüpunkt aus
HWK_BAS_SCH_Manual_S2_Seite8-neu

Sekundärmenü

  • beinhaltet Informationen (1) zur Institution Handwerkskammer, Pressemitteilungen, Kontaktmöglichkeiten und Links in die Socialmedia-Angebote
  • die zweite Hierarchie-Ebene (2) klappt sich unter dem Menüpunkt aus
HWK_BAS_SCH_Manual_S2_Seite8-neu2

Themennavigation
(3. Hierarchieebene)

  • bei umfassenden Themen kann auf der 3. Hierarchieebene (1) ein weiteres Menü im Inhalt eingesetzt werden, um weitere themenbezogene Seiten zu verlinken
HWK_BAS_SCH_Manual_S9_Grafik1

Fliegendes Menü

  • um lange Seiten besser gliedern zu können, wird das fliegende Menü (1) eingesetzt
  • es „klebt“ am rechten Rand und scrollt nicht mit dem Inhalt mit
  • Menüpunkte springen zu Textankern (Kapitel) innerhalb der Seite
  • in der Smartphone-Ansicht ist die Seite nach der Einleitung auf das Menü reduziert dargestellt – per Tipp klappt der zugehörige Inhalt aus
HWK_BAS_SCH_Manual_S9_Grafik2

Tabs

  • Filterungen innerhalb einer Seite können als Tabs dargestellt werden.
  • können in der Smartphone-Ansicht nicht alle Tabs dargestellt werden, lässt sich dieser Bereich schieben
HWK_BAS_SCH_Manual_S9_Grafik3

Technische Hinweise

Wenn Sie das Paket mit den Dokumenten heruntergeladen haben, steht Ihnen alles zur Verfügung, was Sie für die Umsetzung der Seite benötigen. Allerdings gibt es noch ein bis zwei Dinge zu beachten bevor Sie anfangen.

Server Redirect einrichten

Damit die Bilder richtig angezeigt werden, ist es unbedingt notwendig einen Server Redirect einzurichten. Nähere Hinweise hierzu sowie die Erklärung, warum diese Einrichtung notwendig ist und was sich für nützliche Funktionen dahinter verbergen, finden Sie unter der Dokumentation der Bilder.

Upload Ordner

Die Bilder im Upload Ordner dienen nur zur Demonstration der Beispielseiten und können gelöscht werden.

Bootstrap Update

Sollte einmal ein Update der Bootstrap-Dateien notwendig werden, ist dem Paket die für HWK angepaßte variable.less Datei hinzugefügt und eine Ordnerstruktur, die die Zusammenführung erleichtert. In dem „_bootstrap“ Ordner müßte dann nur der „bootstrap“ Ordner ausgetauscht werden. Die daraus neu berechnete Datei ersetzt dann die bootstrap.min.css im css Order.