Responsible Webdesign – ein erster Rohentwurf

Ich habe heute meinem Blog ein selbst erstelltes WordPress Template spendiert. Allerdings sei gesagt, dass ich noch einiges verbessern muss. Grund der Aktion ist, dass ich mich mit dem Thema „responsible Webdesign“ auseinander setze. Ein sehr interessantes Thema!

Mit Hilfe der sogenannten Media-Queries, die mit CSS3 eingeführt worden sind, ist es möglich eine Website – je nach verwendetem Endgerät – entsprechend „aufzubereiten“. Das geschieht vollkommen automatisch. Natürlich muss man aber entsprechende CSS Files „bauen“.

Das Ganze läuft im Endeffekt so ab, dass die CSS Datei(en) wie immer im Header der index.php eingebunden wird. Also so:

<link rel=“stylesheet“ type=“text/css“ media=“screen“ href=“http://www.pc-howto.com/wp-content/themes/design/style.css“ />

Die CSS Datei selbst untergliedert sich -je nach angesprochenem Endgerät – in unterschiedliche Bereiche. Die Formatierungen für den Standarddesktop werden ganz normal in der CSS Datei notiert:

/* ============================== */
/* ! Layout for desktop version   */
/* ============================== */
    * {margin:0;
       padding:0;
       font-size:100.01%;}

	body {
	background-image:url("images/back.jpg");
	background-repeat:repeat;}

 

Will man nun aber mobile Devices ansprechen muss man folgendes in die gleiche CSS Datei schreiben:

@media handheld, only screen and (max-width: 767px) {
	#wrapper {max-width:767px;}
	#header  img {margin-top:0px;}
	#content {float:none;
                  padding:25px;}

Der hier angegebene Inhalt der CSS (#wrapper, #header, #content etc.) ist nur zur Veranschaulichung. Wichtig ist, dass einleitende @media handheld, only screen and (max-width:767px) gefolgt von einer geschwungenen offenen Klammer. Danach kommt der normale CSS Inhalt. Am Ende der Datei muss dann noch eine schließende geschwungene Klammer stehen!

Wichtig ist ausserdem, dass die Angaben in diesem Abschnitt der CSS Datei, die Angaben der CSS Statements für den Desktop ergänzen bzw. überschreiben! Steht innerhalb der {..} des Handheldbereiches nichts, wird die Standard-CSS für den Desktop auch für Geräte verwendet, die einen schmalen Viewport haben!

Ein klärendes Beispiel

Annahme: In der Standard-CSS (für den Desktop) haben wir ein rechts floatendes Menü und links einen Contentbereich. Bei ausreichender Bildschirmgröße befindet sich das Menü also rechts vom Inhalt.

Nehmen wir weiters an, dass der DIV für das Menü folgenden Namen hat: #menu. Der Content-DIV hat den Namen #content.

Nun  wollen wir, dass – sobald der Viewport (also die Bildschirmbreite) < als 767px ist – dieses floating aufgehoben wird.

Wir schreiben also innerhalb des @media Handheldbereiches:

#menu {float: none;}

Dadurch wird ein eventuell im Desktopbereich der CSS angegebenes #menu {float:right;} aufgehoben und das Menü springt – je nach Design – ober oder unter den Contentbereich. Durch diese Vorgangsweise wird für den Content auf dem Handheld, Smartphone, Tablet etc. mehr Platz gemacht.

Abgesehen vom Floating kann man natürlich sämtliche andere Eigenschaften entsprechend Anpassen. So wäre es auch möglich den „aktiven“ Bereich von Links zu vergrößern, um die Bedienung mit einem Touchscreen zu erleichtern und vieles mehr.

Eine sehr spannende Sache also 😉

Browserunterstützung

Alle modernen Browser (der IE ab Version 8) unterstützen Mediaqueries. Natürlich ist der Begriff „modern“ sehr dehnbar. Browser die Probleme bei der Darstellung haben, wird per Javascript auf die Sprünge geholfen. Ich greife in meinem Tamplate auf das Script zurück, welches 1140 Grid System verwendet wird.