Responsive Design mit Dreamweaver: CSS-Stile organisieren

Multiscreen-Vorschau eines Responsive Designs

Wer CSS-basierte Webseitendesigns erstellen möchte, die nicht nur mit den herkömmlichen Desktop-PC-Browsern einen guten Eindruck hinterlassen sollen, sondern zusätzlich auch alternativen Endgeräten wie Tablet-Computern oder Smartphones eine angepasste Designvariante liefern müssen, erhält ab der Dreamweaver-Version CS4 die wohl bestmögliche visuelle Unterstützung :: diverse interne Vorschaumöglichkeiten wie “Multiscreen” (s.o) oder “Device Central” (simulierte Darstellung der aktuellen Seite auf einer Vielzahl von Tablets oder Smartphones) machen die optische Kontrolle zum Kinderspiel.

Diese auch als Responsive Design bekannte Praxis erfordert hinsichtlich der gerätespezifischen “Zuordnung” der jeweiligen CSS-Stile allerdings diverse organisatorische Vorüberlegungen, welche meiner Erfahrung nach besonders dem Einsteiger in diese Materie traditionell einiges an “wo fange ich überhaupt an…” Kopfzerbrechen bereitet.

Keine Sorge, ich werde im Folgenden nicht explizit auf jedes technische Detail eingehen — worum es mir hier geht, ist, dem geneigten Leser primär einige HTML- und CSS Codeschnipsel an die Hand zu geben, mit denen er die Grundlagen seines responsiven Designs herstellen kann.

1.  der HEAD-Bereich des Dokuments

<meta name="viewport" content="width=device-width, initial-scale=1" />

<!-- Allgemeine Stilvorgaben (geräteunabhängig) -->
<link href="styles_allgemein.css" rel="stylesheet" type="text/css" media="screen" />

<!-- Tablet Computer (768 px bis 959 px) -->
<link href="tablet.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 768px) and (max-width: 959px)" />

<!-- Smartphones (321 px bis 767 px) -->
<link href="mobile.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 321px) and (max-width: 767px)" />

Ich denke, dass sich die ungefähre Bedeutung des obigen Code-Schnipsel weitgehend von selber erklärt, aber hier dennoch einige Anmerkungen:

a) die CSS-Datei mit den allgemeinen Stilvorgaben sollte quasi das “volle Programm” beinhalten und wird nicht nur von IE-Browserversionen geladen, welche – bis einschließlich der Version 8 – die sog. CSS3 Media Queries ignorieren, sondern ebenfalls von den Browsern der Tablets bzw. Smartphones.

b) die für die Tablets bzw. Smartphones zuständigen CSS-Dateien benötigen i.d.R. für eine CSS-Klasse X nur Stildefinitionen, welche von denen in der primären “styles_allgemein.css” – Datei deklarierten Definitionen abweichen sollen.

Ein Beispiel: wenn “styles_allgemein.css” für die CSS-Klasse container eine Breite von 960 Pixeln bestimmt (width: 960px;), würde ein Smartphone diesen Wert zuerst einmal übernehmen. Da dies natürlich nicht im Sinne des Erfinders sein kann, muss in der Datei “mobile.css” für die gleichnamige CSS-Klasse ein abweichernder Wert definiert werden (width: 400px;), welcher für den Smartphone-Browser sozusagen Priorität erhält. Im Umkehrschluss bedeutet dies natürlich auch, dass CSS-Stile wie z.B. die Seitenhintergrundfarbe, die ggf. auf allen Ausgabegeräten identisch sein soll, in der Datei “mobile.css” nicht extra deklariert werden zu braucht.

2.  unterschiedliche Viewports ansprechen

Besonders innerhalb der Datei “mobile.css”, welche ja gemäß der o.g. Media Query – Bedingung (min-width: 321px) and (max-width: 767px) dazu bestimmt ist, unterschiedlich breite Browserfenster-Viewports der gängigen Smartphone-Marken zu berücksichtigen, bietet es sich an, diese mittels mehrerer “interner” Media Query – Bedingungen unabhängig bedienen zu können. Die Struktur einer derartig vorbereiteten “mobile.css” – Datei könnte wie folgt aussehen:

/* allgemeine Regeln für alle Smartphone - Viewports: */
input, textarea {
	width:300px;
}

/* für Viewport-Breiten von 321px bis 479px: */
@media (min-width: 321px) and (max-width: 479px) {
#container {
	width: 300px;
}

}

/* für Viewport-Breiten von 480px bis 767px: */
@media (min-width: 480px) and (max-width: 767px) {
#container {
	width: 420px;
}

}

OK, und eigentlich war´s das auch schon, denn viel mehr als ein brauchbares Grundgerüst, auf welchem man mühelos aufbauen kann, wollte ich in diesem Zusammenhang nicht liefern.

Viel Spaß bei der Entwicklung von Responsive Designs :-)

Dieser Beitrag wurde unter Design abgelegt und mit , verschlagwortet. Setze ein Lesezeichen auf den Permalink.

2 Antworten auf Responsive Design mit Dreamweaver: CSS-Stile organisieren

  1. Angga sagt:

    hey beautiful blog site and web theme. I hope I’m not aninoyng you I just wanted to inquire precisely what wordpress plugin you utilize to show the most recent comments on your blog? I really want to do something along the same lines for my free iphone 4 website but I cant acquire the plugin or widget for it. Thank you for your time :)

    • Günter Schenk sagt:

      @Angga: this feature has been available without the need to install a plugin or widget, so it´s apparently integrated into the default WordPress distribution. For further questions you´d better check the WordPress documentation or any other “official” sources such as WP forums.