Eigene Homepage

Selbstveränderndes Design

Wahrscheinlich hast Du es schon bemerkt: ich habe diese Seite so verändert, dass Sie auf einem Smartphone oder Tablet anders aussehen. Die Startseite dieses Webauftrittes ist das radikalste Beispiel, sie sieht auf dem kleinen Display eines Telefons völlig anders aus. Auf allen anderen Seiten verschwindet lediglich das Menü und lässt mehr Platz für den eigentlichen Inhalt.

Man nennt dieses Verhalten von Webseiten "responsives" = "reagierendes" Design: je nach Bildschirmgröße bzw. Anforderung des darstellenden Gerätes reagiert das Design und ändert seine Darstellung. So kann man vergelichsweise "große" Seiten auch auf kleinen Bildschirmen ordentlich lesen.

Wie geht das?

Zuerst mal braucht man eine Zeile im der HTML-Datei mit dem folgenden Inhalt:

Das ist die Anweisung an den Browser im darstellenden Gerät, die Seitenbreite an die Bildschirmbreite anzupassen. Und das funktioniert unmittelbar: rufst Du die Seite im Portraitmodus auf, siehst Du: Seitenbreite= Bildschirmbreite. Drehst Du das Gerät auf Waagerecht, stimmt das immer noch. Je nachdem, wie Dein Browser eingestellt ist, kannst Du immer noch in die Seite zoomen, aber weiter raus geht nicht.

Das war schon alles, was man mit der HTML-Datei machen muss. Vorausgesetzt, es stehen wirklich alle Stil-Anweisungen in der zuständigen CSS-Datei.

Genau diese Datei erledigt die eigentliche Arbeit: es gibt dort mindestens zwei Zeilen, die Anweisungen für eben mindestens 2 unterschiedliche Bildschirmgrößen enthält:

Vor die erste Zeile schreibt man alle Anweisungen hin, die immer gelten sollen.

Zwischen die beiden Klammern schreibt man die speziellen Anweisungen für Bildschirme mit - hier - mehr als 900 Pixeln Breite ...

... und hier stehen dann natürlich die speziellen Anweisungen für kleinere Displays

Für diese Seite stehen unter "mehr als 900 px" die Anweisungen, das Logo links oben darzustellen und das Menü, weswegen der Dateikopf und der Inhaltskasten 230 Pixel vom linken Rand entfernt sein müssen.

Für Bildschirme mit weniger als 900px gibt es Anweisungen, das Logo nicht darzustellen und das Menü auf minus 250 nach links zu rücken, wobei der Dateikopf und der Inhaltskasten am linken Rand stehen sollen. Das Menü steht jetzt virtuell links neben dem Bildschirm und ist dadurch natürlich nicht zu sehen. Es ist Bildschirmfläche frei geworden, die jetzt den Inhalt darstellen kann, wodurch sich die Lesbarkeit verbessert. Hoffe ich doch ...

Wie kommt man jetzt an das Menü heran? Dazu gibt es jetzt einen Menüknopf, der extra für kleine Bildschirme jetzt oben zugänglich ist und wenn man drauf drückt, passiert was. Für diese Aktion gibt es unzählige Javascript-Lösungen. Ich habe die allereinfachste Lösung genommen, die ohne Javascript auskommt.

Der Menüknopf oben hat schon einen Link zur "navigation" und dann gibt es in CSS das nette Feature namens "target". Damit kann man einen Link zu irgendetwas anderem umleiten und eine Aktion auslösen. Diese Aktion ist in diesem Fall: schiebe das Menü von Links auf den Bildschirm". Damit kann man eine neue Seite auswählen und "target" ist wieder inaktiv, das Menü ist wieder weg.

Rechts siehst Du eine dunkle Glübirne (opacity = 0.2) und links sind zwei Schalter. Drück auf den linken und die Birne "leuchtet" (opacity -> 1), weil der Link :target auf "aktiv" setzt und das die Durchsichtigkeit verändert. Drück auf den rechten Schalter: den Link gibt es nicht, er zeigt ins Leere und :target wird inaktiv.

Wenn Du diesen Effekt brauchen kannst, dann sieh Dir den Quelltext und die Stildatei "demo.css" an. Viel Spaß damit ...

Eine nette Kleinigkeit hab ich noch: die Animation! Heutige Browser sind in der Lage, alle möglichen Veränderungen zur Laufzeit selbst zu berechnen. Im Fall dieser Seite ist das: schiebe das Menü langsam von links auf den Bildschirm. Dazu braucht man in der CSS-Datei die Beschreibung einer Animation:

@keyframes myAnimation {
	0%		{ margin-left: -250px; }
	25%		{ margin-left: -220px;}
 	/*... noch mehr Zwischenschritte? */ 
	75%		{ margin-left: 30px; }   
	100%		{ margin-left: 0px; }
}

Die Defininition von Schritten erlaubt, eigene Kreativität umzusetzen. In diesem Fall ist das wenig Bewegung am Anfang und am Ende, was nach fließender Bewegung aussehen soll. Langsam beschleunigen, langsam zum Stillstand, dazwischen schnell. Hier kann man auch mehr Veränderungen eintragen: außer margin-left könnte sich die Schrift vergrößern und der Hintergrund verfärben oder ...

Aber: sowas haben heutige Browser schon eingebaut: es gibt die Anweisung "transition", die dafür sorgt, dass sich etwas ändert, dazu kann man zwei Zeitspannen eintragen und die Art der Bewegung. In der Praxis sieht das so aus:

#demo {
  transition-property: width;
  transition-duration: 2s;
  transition-timing-function: linear;
  transition-delay: 1s;
}

Und das übertragen in das Beispiel oben und für diese Webseite passend und außerdem in einer Zeile:

Bei "transition" sind 3 der 4 Zeilen zusammengefasst: es soll "margin-left" geändert werden in einer Sekunde und in der Art und Weise "ease". Letzteres bedeutet: die Bewegung verläuft "natürlich", wie die Bewegung eines Fahrzeugs - langsam anfangen, schneller werden, und langsam abbremsen. Dahinter steht, was überhaupt gemacht werden soll.

Das reicht völlig aus: ich habe auf Mausklick/Fingertipp ein Menü, dass langsam von links ins Bild kommt und das wieder verschwindet, wenn ich einen Menüpunkt auswähle. Ganz ohne Javascript! Auch hier kann man mehr Anweisungen hinter transition schreiben.

Viel Spaß beim Nachmachen ...