Responsive Webdesign (1) DEMO

Teil 1: Ein flexibles Webseitenlayout erstellen

Responsives Webdesign Fließendes LayoutResponsiv bedeutet aktiv, sich anpassend, mitgehend – und genauso passt sich responsives Webdesign den Größen des Bildschirms bei Desktop-Computer, Laptops, Netbooks, Smartphones, TV-Geräte und zukünftiger Ausgabegeräte an.

Genauer betrachtet ist ein anpassungsfähiges Webseiten-Layout keine wirklich neue Technik, denn eigentlich war es schon immer möglich, Webseiten mit einer variablen Breite zu erstellen. Dank CSS3 stehen jetzt allerdings viele zusätzliche Feinabstimmungen zur Verfügung, um das Aussehen einer Webseite noch besser auf verschiedene Bildschirmbreiten abzustimmen.

Das Ende fixer Pixelangaben?

In dieser Anleitung erstellen wir ein „fließendes“ Webseitenlayout, das zum Leidwesen mancher Webdesigner auf eines verzichten wird: fixe Pixelbreiten. Doch keine Angst, auch exakte Photoshop-Zeichnungen lassen sich dennoch relativ einfach in ein gefälliges Webdesign umsetzen, weil durch CSS3 nun auch automatisch skalierende Bilder realisiert werden können.

Aller Anfang ist leicht: Ein flexibles Seitenlayout

Beginnen wir mit einem einfachen Seitenlayout, dessen Breiten nun in Prozent statt in Pixel festgelegt werden. Dabei gilt es zu beachten, dass sich nun die Breiten relativ zum umschließenden Container verhalten.

In meinem Beispiel wähle ich einen einfachen Seitenaufbau, der beispielsweise für WordPress-Themes verwendet werden kann.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE HTML>
<html dir="ltr" lang="de-DE">
	<head>
		<meta charset="UTF-8" />
		<title>Testseite Responsives Webdesign</title>
	</head>
	<body style="margin:0; padding:0;">
		<div id="page">
			<div id="header" style="background-color:#FF6;">
				<h1>Testseite Responsives Webdesign</h1>
			</div><!-- #header -->
			<div id="content" style="width:70%; float:left; background-color:#DFF;">
				<h2>Beitrag Responsive Web</h2>
				<p>Dies ist eine Demoseite zu meiner Beitragsserie Responsive Webdesign. Verkleinere die Größe des Browser-Fensters, um das Verhalten der Webseite bei kleinen Bildschirmen zu sehen.</p>
			</div><!-- #content -->
			<div id="sidebar" style="width:30%; float:right; background-color:#FDD;">
				<h3>Über mich</h3>
				<p>Hier teste ich das responsive Webdesign</p>
			</div><!-- #sidebar -->		
			<div id="footer" style="clear:both; background-color:#DDD;">
				Copyright by Michael Punzenberger
			</div><!-- #footer -->
		</div><!-- #page -->
	</body>
</html>

Diese Webseite (► DEMO) wird noch keinen Design-Wettbewerb gewinnen, zeigt aber schon bei Verkleinern der Browserbreite ihr flexibles Verhalten.

Ein Seitenlayout mit festen Pixelbreiten auf Prozentwerte umstellen

Will man nun eine fertige Vorlage mit vorgegebenen Pixelbreiten in ein „fließendes“ Layout umwandeln, rechnet man die Pixelangaben in Prozentwerte um. Dabei gilt es zu beachten, dass sich die Prozentwerte für die Breiten immer auf den darüberliegenden Container beziehen.

Beispielsweise nehmen wir eine Vorlage mit 960px Breite, deren Content 593 Pixel und deren Sidebar 367 Pixel breit ist (die seltsamen Werte entstehen, wenn man die Breite von 960 mit dem „Goldenen Schnitt“ teilen möchte. ► lemats.net/tech/tools/goldener-schnitt-berechnen/).

Die Umrechnung erfolgt nach der Formel:

( INHALTSBREITE / CONTAINERBREITE ) x 100

In unserem Beispiel ergibt das:

Content: ( 593 / 960 ) x 100 = 61.770833333 Prozent
Sidebar: ( 367 / 960 ) x 100 = 38.229166667 Prozent

Somit können wir obigen Beispielcode an unsere fiktive Vorlage anpassen:

  • Den Container „page“ in Zeile 8 begrenzen wir mit der CSS3-Anweisung „max-width:960px;“ und zentrieren ihn zusätzlich mit „margin:0 auto;“.
  • Das div „content“ in Zeile 12 erhält die Breite „width:61.770833333%;“. Beachte dabei, dass in CSS das Koma wie in der englischen Sprache mit einem Punkt geschrieben wird.
  • Die „sidebar“ wird mit „width:38.229166667%;“ versehen.

Dadurch ergibt sich jetzt folgender Quellcode:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE HTML>
<html dir="ltr" lang="de-DE">
	<head>
		<meta charset="UTF-8" />
		<title>Testseite Responsives Webdesign</title>
	</head>
	<body style="margin:0; padding:0;">
		<div id="page" style="max-width:960px; margin:0 auto;">
			<div id="header" style="background-color:#FF6;">
				<h1>Testseite Responsives Webdesign</h1>
			</div><!-- #header -->
			<div id="content" style="width:61.770833333%; float:left; background-color:#DFF;">
				<h2>Beitrag Responsive Web</h2>
				<p>Dies ist eine Demoseite zu meiner Beitragsserie Responsive Webdesign. Verkleinere die Größe des Browser-Fensters, um das Verhalten der Webseite bei kleinen Bildschirmen zu sehen.</p>
			</div><!-- #content -->
			<div id="sidebar" style="width:38.229166667%; float:right; background-color:#FDD;">
				<h3>Über mich</h3>
				<p>Hier teste ich das responsive Webdesign</p>
			</div><!-- #sidebar -->		
			<div id="footer" style="clear:both; background-color:#DDD;">
				Copyright by Michael Punzenberger
			</div><!-- #footer -->
		</div><!-- #page -->
	</body>
</html>

► Demo des geänderten Quelltextes

Um nun ein halbwegs ansehnliches Seitenlayout zu erhalten, werden wir unsere Testseite noch mit Seitenabständen versehen:

Padding und Margin mit Prozent-Angaben

Analog zu den Breiten der einzelnen DIVs sorgen auch bei „Margin“ und „Padding“ erst Prozent-Wertangaben für ein fehlerfreies fließendes Seitenlayout. In unserem Testbeispiel werden die Bereiche „header“, „content“, „sidebar“ und „footer“ vom gemeinsamen Container „page“ eingeschlossen, der somit zu unserer Bezugsgröße für die Werte der Seitenabstände wird.

Möchten wir beispielsweise in jedem dieser Bereiche ein Padding von 30px, so wird dieser Wert in Relation zu 960 Pixel (Vorgabenbreite des „page“-Containers) berechnet:

( PADDINGBREITE / CONTAINERBREITE ) x 100
Padding: ( 30 / 960 ) x 100 = 3.125 Prozent

Da die Bereiche „content“ und „sidebar“ schon Breitenangaben enthalten, müssen nun diese Werte um die Padding-Werte reduziert werden:

Content: 593 Pixel – 2 x 30 Pixel = 533 Pixel
( 533 / 960 ) x 100 = 55.52083333 Prozent
Sidebar: 367 Pixel – 2 x 30 Pixel = 307 Pixel
( 307 / 960 ) x 100 = 31.979166667 Prozent

Alle Änderungen führen wir in unserem Quellcode durch, der nun wie folgt aussieht:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE HTML>
<html dir="ltr" lang="de-DE">
	<head>
		<meta charset="UTF-8" />
		<title>Testseite Responsives Webdesign</title>
	</head>
	<body style="margin:0; padding:0;">
		<div id="page" style="max-width:960px; margin:0 auto;">
			<div id="header" style="padding:0 3.125%; background-color:#FF6;">
				<h1>Testseite Responsives Webdesign</h1>
			</div><!-- #header -->
			<div id="content" style="width:55.52083333%; padding:0 3.125%; float:left; background-color:#DFF;">
				<h2>Beitrag Responsive Web</h2>
				<p>Dies ist eine Demoseite zu meiner Beitragsserie Responsive Webdesign. Verkleinere die Größe des Browser-Fensters, um das Verhalten der Webseite bei kleinen Bildschirmen zu sehen.</p>
			</div><!-- #content -->
			<div id="sidebar" style="width:31.979166667%; padding:0 3.125%; float:right; background-color:#FDD;">
				<h3>Über mich</h3>
				<p>Hier teste ich das responsive Webdesign</p>
			</div><!-- #sidebar -->		
			<div id="footer" style="clear:both; padding:0 3.125%; background-color:#DDD;">
				Copyright by Michael Punzenberger
			</div><!-- #footer -->
		</div><!-- #page -->
	</body>
</html>

Das endgültige Ergebnis dieses ersten Teils der Beitragsserie „Responsives Webdesign“ siehst du ► HIER .

Und das funktioniert in jedem Browser?

Natürlich nicht, denn sonst könnte ja jeder Webdesigner werden :-) . Über 100 Besucher täglich betrachten unsere Webseiten mit dem Internet Explorer 7 von Microsoft und einige wenige verwenden dazu sogar noch Version 6 dieses Problem-Browsers. Während wir die Anpassung für IE6 eingestellt haben, werden wir die Fehler des IE7 nicht unbeachtet lassen.

Der Internet Explorer 7 behandelt die CSS-Anweisung „max-width“ schon richtig, hat aber ein Problem mit der Berechnung der Werte für die Breite bei verschiedenen Browser-Größen. Beispielsweise wird bei 953 Pixel Browserbreite unser Quellcode nicht mehr richtig „gefloatet”, die Sidebar rutscht unter den Content.

Dass einige Browser wohl eher zum Kartoffelschälen als zum Betrachten von Webseiten entworfen wurden, merkt man auch bei der fehlerhaften Umsetzung unseres Quellcodes in den Browsern Chrome, Safari und Opera. Die beiden Bereiche Content und Sidebar sollten ohne Zwischenraum „zusammenkleben“, was jedoch nur im Firefox und – oh Wunder – auch im Internet Explorer ab Version 8 wirklich funktioniert. Bei Chrome, Safari und Opera bildet sich je nach Browserbreite ein unterschiedlich großer Spalt.

Was hilft gegen diese Browser-Fehler?

Diese Darstellungsfehler entstehen durch Rundungsfehler, wenn mehrere Bereiche mit „float“ nebeneinander angezeigt werden und Paddings oder Margins enthalten. Abhilfe schaffen Prozentwerte für die Breite, die in Summe unter 100% bleiben oder der Verzicht auf Paddings oder Margins.

Berücksichtigen kann man diese Probleme schon beim Entwurf einer Webseite, indem man beispielsweise einen einheitlichen Hintergrund verwendet. Von aufwendigen pixelgenauen Verzierungen sollte man sich bei responsiven Webdesigns ohnedies verabschieden, weil sich derzeit die Anzahl von internetfähigen Endgeräten ständig erhöht. So hat mittlerweile fast jedes neue Fernsehgerät einen Netzwerkzugang und einen Internetbrowser an Board.

Beitragsserie: Responsives Webddesign

Webwork
10. September 2011
4 Kommentare

4 Kommentare zu:
Responsive Webdesign (1)

Kommentar schreiben