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.

4 Kommentare

  1. Hallo,

    kann man responsible webdesign auch für die Facebook Unternehmensseite anwenden, sodass der mobile Facebook-Auftritt die gleiche Qualität hat, wie die Desktop Darstellung?

    vielen Dank für Antworten.

    Lg,
    Veri

    1. Hallo,
      ich kann nicht beurteilen, in wie weit man die FB Unternehmensseite mit eigenem CSS beeinflussen kann. Sollte das möglich sein, kann man hier auf jeden Fall ein mobiles Design erstellen.

  2. Hi,

    das Template ist anders als ich es machen würde, aber so solls ja auch sein.

    Kleinigkeiten die mir aufgefallen sind, vielleicht bringst dir was:

    Mei mir Firefox 14 wird ein horizontaler Scrallbalken angezeigt.

    Der Effekt mit dem ausgerissenen Papier ist nicht ganz weiß und es entsteht zum Weiß eine Kante. Vielleicht ein Farbverlauf, bzw. wischen oder so?

    Dann bleibt mir nurnoch zu sagen, dass ich sau respekt vor der Arbeit habe, da ich selber mich noch nie dran gemacht habe eins selber zu entwerfen und deins wirklich rund aussieht.

    Grüße

    Thoys

    1. Hallo,
      danke für deinen Kommentar. Das mit der grauen Kante hab ich gar nicht bemerkt. Bei genauerem Hinsehen seh ichs jetzt aber auch :-).

      Wann bekommst du denn den Scrollbalken, das kann ich hier nicht „provozieren“.

      LG
      Daniel

Kommentar hinterlassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

* Zustimmung zur Datenspeicherung lt. DSGVO

*

Ich bin damit einverstanden

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.