Wie funktioniert diese Seite eigentlich?

Technische Hintergründe

Da immer wieder Fragen aufkommen, was an individuellen Anpassungen möglich ist - oder wie ich auf dieser Präsenz einige Punkte gelöst habe, stelle ich hier einmal grob vor, wie sich meine eigene Webpräsenz zusammensetzt - und was dort eigentlich im Hintergrund passiert.

Inhaltsverwaltung: Das CMS

Als Webpräsenz eines Jimdo Experts läuft diese Webseite natürlich auf Basis von "Jimdo", dem Homepage-Baukasten aus Hamburg.

Diese Lösung ermöglicht es mir, schnell und einfach Inhalte zu erstellen und die einzelnen Unterseiten individuell zu strukturieren. Alles so wie es dann für Sie sichtbar ist.

Das Basis-Layout

Als Layout kommt dabei das Jimdo Design "Malaga" zum Einsatz, das die Basis für diese Webpräsenz bildet.

Rechts sehen Sie die Layout-Vorschau, wie sie in der Design-Auswahl bei Jimdo zu finden ist - mit den Demo-Inhalten und Blindtexten.

An diesem Layout habe ich diverse individuelle Anpassungen vorgenommen, damit die Darstellung so erfolgt, wie von mir gewünscht.

Angefangen bei Schriften und Farben über den "Jimdo Style-Modus" bis hin zu detaillierten Justagen mittels CSS und JavaScript.

Die Anpassungen

Einige Design-Anpassungen und Zusatzfunktionen sind direkt auf dieser Unterseite zu sehen, andere sind auf die jeweiligen Themenbereiche beschränkt. Nachfolgend stelle ich einige dieser Anpassungen kurz vor. So können Sie einen Einblick erhalten, was beispielsweise möglich ist.

Titelbilder ("Emotionhead")

Das Template "Malaga" hat im Normalfall kein Titelbild, sondern nur die Option, vollflächige Hintergrundbilder einzusetzen. Ich habe es entsprechend angepasst, so dass diese Bilder nun nur im oberen Bereich erscheinen.

Seitentitel

Um für jede Unterseite einen individuellen Seitentitel als Hauptüberschrift ("H1") vergeben zu können, habe ich diese aus dem eigentlichen Inhaltsbereich heraus und als Überlagerung des Titelbildes verschoben. Die Hintergrundfarbe des Balkens hängt dabei von der Thematik der jeweiligen Unterseite ab.

Überschriften & Sektionen

Innerhalb von Unterseiten besteht die Möglichkeit, weiter Überschriften als H2 in Blockdarstellung mit Hintergrundfarbe zu erstellen. Diese Blöcke können individuell über die Inhaltsbreite oder die volle Breite des Browsers dargestellt werden.

Der Inhaltsbereich kann weiterhin in einzelnen Sektionen aufgeteilt werden - erkennbar an der weißen Trennung des hellgrauen Hintergrundes.

So kann ich Unterseite besser strukturieren und lebendiger gestalten - bei gleichzeitigem stringenten Design über alle Unterseiten hinweg.

Google Maps im Seitenfuß

Im Footer dieser Webseite finden Sie eine GoogleMaps Karte, die sichtbar wird, sobald Sie ganz herunter scrollen. Diese Karte wird mittels JavaScript dem Quelltext der Seite nachträglich hinzugefügt, um individuelle Anpassungen wie Position, Größe und auch Farbüberlagung schaffen zu können.

Bild Overlay und Zoom im Portfolio

Auf der Seite Referenzen und Portfolio finden Sie diverse Screenshots und Grafiken von unterschiedlichen Projekten. Beim Überfahren mit der Maus (MouseOver / Hover) zoomen diese Bilder heran und erhalten ein Plus-Zeichen als Overlay-Effekt.

Farbverlauf in Navigationsleiste

Die Navigationsleiste ist mit einem leichten Farbverlauf zwischen zwei verschiedenen Blautönen versehen. Klicken Sie mal hier für einen Farbwechsel.
Dieser "Viewmode" wird in einem Cookie gespeichert. Ab jetzt passt sich die Navigation auf allen Unterseiten unterschiedlich farblich an. Wollen Sie diese bunte Darstellung wieder deaktivieren, klicken Sie einfach erneut. In der Fußzeile finden Sie ebenfalls einen entsprechend Link für mehr oder weniger Farbe. Die Umsetzung erfolgte mittels JavaScript / jQuery und CSS.