Informationen

Jede Seite variert

Auf jeder Seite ist ein anderes Bild im oberen Bereich zu sehen. Das schafft Abwechslung und Struktur. Zum Beispiel hier auf Primus (index1.html) oder auf Secundus (index2.html).

Template

Dieses Template heißt ' Standing On The Shore '. Die Font-Icons für das Telefon und das Handy sind hier mal extra-groß. Klar, mit dem Ziel, das Sie angerufen werden. Die Farben in dieser Vorlage pendeln zwischen Wassertönen und Erd-Tönen, hier insbesondere Beige als Strandfarbe. Wenn Sie die verlinkten sieben Seiten 'Home' (diese Seite) bis Septimus durchklicken, erkennen Sie anhand der wechselnden Bilder im oberen Bereich sehr schön die Farbharmonie "Blau-Beige" , sprich die Assoziation "-Wasser-Strand" oder "Urlaub-Natur-Entspannung".

Die Technik

Das Menü

Das Menü ist effektvoll rechts unten abgerundet und ist bei allen Auflösungen vertikal angeordnet. Es schaltet bei kleinen Auflösungen NICHT zu einem Toggle-Menü um.

Lightbox

Wir haben in diesem Template die bekannte und beliebte 'Lightbox' Foto-Gallerie eingebaut. Und zwar finden Sie die Gallery auf gleich auf dieser Seite (home - index.html). Klicken Sie bitte dazu auf die Fotos. Auf den Unterseiten haben wir auch jeweils eine unterschiedliche Anzahl von Fotos im Inhaltsbereich eingebaut, aber hier als Variation ohne die Lightbox-Gallery. Zum Beispiel hier die Seiten Tertius (index3.html) oder Quintus (index5.html). Gerne können Sie natürlich die Lightbox-Gallery auch auf die Fotos der Unterseiten legen, wenn Sie möchten.

Was macht die Lightbox?

Nach Klick auf ein Foto öffnet sich ein neues Fenster mit dem Foto sowie einer Bildunterschrift und einer Anzeige (Bild 1 von X), gleichzeitig dunkelt sich die komplette Webseite im Hintergrund ab. Wenn mehrere Fotos in einer Gruppe zusammengefaßt sind, ergibt sich folgendes tolle Feature: Fahren Sie mit der Maus über die rechte oder linke Fotohälfte. Es erscheint dann ein Pfeil, welcher Sie durch Klick auf diesen immer weiter zum nächsten Foto führt. In diesem Fenster lässt sich also eine ganze Bildkollektion durchsehen.

Die Original-Lightbox

Hier einmal der Link zur originalen Lightbox-Gallery . Dort finden Sie bei Bedarf auch unter 'Options' noch verschiedene Möglichkeiten der Einstellung. Anhand der guten, weil einfachen Beispiele (Examples), erkennen Sie sehr schnell das Prinzip der Gallerie. Außerdem können Sie somit auch besser nachvollziehen, wie wir die Fotos bei unserer Gallerie responsive angelegt haben, denn diese responsive Anordnung ist ja nicht automatisch im genannten Script der Lightbox enthalten.

Einbau der Bilder

Bei den Fotos im Inhaltsbereich haben wir uns für die CSS-Technik mit 'display:inline-block' entschieden. Wir beschreiben es Ihnen hier in einem Tutorial auf der Seite Quartus (index4.html)

Responsive Webdesign

Responsive Webdesign

Responsive Webdesign (RWD) ermöglicht eine Anpassung bzw. Optimierung der unterschiedlichen Bildschirmgrößen von Smartphone, Tablet, Notebook, Laptop und Desktop-PC innerhalb einer einzigen Webseite. Dazu werden per CSS-Media Queries die verschiedenen Bildschirmgrössen abgefragt. Somit kann man auch auf das Hoch- oder Querformat eines mobilen Gerätes reagieren. Außerdem wird beim Layout verstärkt mit Angaben in Prozent gearbeitet.

So testen Sie

Hier auf der Seite Primus (index1.html) nennen wir Ihnen gute Möglichkeiten ein Responsive-Layout in verschiedenen Auflösungen zu testen, denn nicht jeder hat ja diverse Smartphones und Tablets zu Hause.