Einfach zum Responsive Webdesign

Wer sich etwas mit Webdesign beschäftigt, wird sicher einmal auf das Thema "Responsive Webdesign" gestoßen sein – heutzutage ein unumgängliches Thema, neben CSS3 und HTML5. Nicht zuletzt, da sicherlich jeder zweite ein internetfähiges Smartphone oder einen Tablet PC besitzt, mit dem ganz bequem im Netz gesurft werden kann. Auf diesen Trend müssen Webdesigner reagieren, denn die Darstellung normaler Websites ist auf z.B. Smartphones nicht so optimal.

Aber bevor ich hier weiter ins Detail gehe, möchte ich kurz erläutern, worum es hier eigentlich geht. Eine Website hat in den meisten Fällen immer eine feste Breite zugewiesen bekommen, beispielsweise eine Breite von 1000 Pixeln. Schaut man sich diese Site auf einem heute normal großen Desktop (PC mit Bildschirm) an, dann sehen die Seiten genau so aus, wie sie aussehen sollen. Meistens ist am Rand links und rechts sogar noch etwas Platz zu erkennen.

Doch wenn ich mir die gleiche Seite auf einem Smartphone ansehe, dann ist die gesamte Site meistens so winzig klein, dass man kaum etwas erkennt, geschweigedenn lesen kann. Hier ein Beispiel anhand meines Blogs:

Die Ursache dafür sind die beiden unterschiedlich großen "Anzeigeflächen". Ein normaler Bildschirm ist von den Maßen her wesentlich größer als ein kleines Smartphone-Gerät. Daher werden 1000 Pixel auf dem Bildschirm "normal" groß angezeigt, während auf dem Smartphone alles verkleinert dargestellt wird. Diese 1000 Pixel passen bei einer 100%-Ansicht nicht voll auf die Fläche. Daher wird gezoomt, was alle Seiten verkleinert. Jetzt könnte der Smartphone-Benutzer einfach mit dem Fingern wieder ranzoomen, muss dann aber, um auch den Text am rechten Rand lesen zu können, immer hin und her wischen, damit alles auf einem Blick zu lesen ist. Aber diese Lösung ist nicht optimal und vor allem nicht sehr benutzerfreundlich. Deshalb benötigen wir hier responsive Webdesign.

Responsive Webdesign heißt wörtlich "reagierendes" Webdesign. Das Layout und das Design reagieren auf die Größe des Bildschirms. Wird eine Website auf einem kleinen Smartphone aufgerufen, dann erkennt die Website dieses und reagiert dementsprechend. Bereiche werden verkleinert, unwichtiges wird ausgeblendet, Schriften werden vergrößert uvm. – da gibt es keine Grenzen. Natürlich stellt sich hier die Frage, ob es überhaupt Sinn macht, eine Website "reagieren" zu lassen, oder ob nicht gleich eine eigenständige mobile Website erstellt werden sollte – man hat also zwei unabhängig voneinander laufende Versionen. Nun, alles hat seine Vor- und Nachteile. Für große Online-Shops macht eine richtige App sicherlich am meisten Sinn, da responsive Webdesign nicht die Benutzerfreundlichkeit wiedergibt wie eine individuell erstellte App. Aber für uns kleine Bloggger ist eine reagierende Website vorteilhafter, da z.B. Inhalte nur einmal gepflegt werden müssen. Abgesehen davon empfehlen Suchmaschinen für eine Website auch nur eine URL zu verwenden, also z.B. traumfinsternis.de (siehe dazu auch "Bedeutung des www in Top-Level-Domains") – würde ich eine abgekoppelte mobile Version erstellen, hieße die mobile Domain z.B. mobile.traumfinsternis.de – diese beiden Domains sind eigenständig und verschieden, beinhalten aber die gleichen Texte und Bilder, was für die Suchmaschinenoptimierung (SEO) sehr nachteilig ist! Deshalb bleiben wir nur bei einer Website-Version, lassen sie aber auf verschiedene Bildschirmgrößen anders optisch reagieren.

Grundsätzlich bedeutet es immer viel mehr Arbeit, wenn man eine vorhandene Website mobiltauglich umgestalten möchte, als wenn eine neue Website von vornerein als Desktop- und Mobile-Version gestaltet, programmiert und/oder umgesetzt wird. Zudem gibt es mittlerweile sicherlich viele Lösungsansätze und Konzepte. Hier möchte ich euch ein paar Tipps und Kniffe erklären, wie euer vorhandener Blog oder eure vorhandene Website relativ einfach "responsive" werden kann.

Ich benutze hierfür einfach Media Queries, die vielleicht schon durch CSS etwas bekannter sein könnten. Mit Hilfe von Media Queries kann man z.B. festlegen, welche CSS Datei für die Anzeige einer Website am Bildschirm verwendet werden soll und welcher CSS Datei benutzt werden soll, wenn man eine Seite ausdruckt. Das gleiche Prinzip funktioniert auch mit Bildschirm-Größen. Ihr definiert also CSS Styles, die nur bei bestimmten Bildschirmgrößen greifen sollen. So könnt ihr beispielsweise definieren, dass eine Box bei einem großen Bildschirm 1000 Pixel breit ist und bei einem Smartphone 100%, wodurch sich die Box-Breite dann an die maximale Breite des Smartphone-"Bildschirmes" richtet.

Nehmt auch als erstes eure Website vor Augen (auf dem Bildschirm, ausgedruckt oder als Skizze) und geht durch, welche Bereiche, welche Boxen, welche Objekte usw. überhaupt auf mobile Endgeräte erscheinen sollen. Super große Hintergrundbilder machen hier z.B. eher weniger Sinn, da dies nur unnötigen Datentransfer kostet (mobiles Internet ist nicht immer günstig). Auf meinem Blog habe ich mich dazu entschieden, dass ich lediglich den breiten Header-Slider im Kopfbereich ausgeblendet haben möchte. Der Rest soll bei mir angepasst werden.

Es gibt nun drei Möglichkeiten, wie ihr euren CSS Style auf eurer Website einbinden könnt.

1. durch das Einbinden einer "mobile.css"-Datei im Head-Bereich einer Seite, wobei unter "media" definiert wird, ab welcher Bildschirm-Größe diese Datei greifen soll; für jede Bildschirm-Größe muss dann also eine neue CSS Datei erstellt werden
2. durch Media Queries, mit denen ihr CSS-Code-Blöcke pro Bildschirmgröße definiert, diese können sich in der vorhandenen CSS-Datei befinden
3. durch eine Kombination aus beidem, indem eine normale "mobile.css"-Datei immer eingebunden wird (egal bei welcher Bildschirmgröße bzw. -auflösung) und in der Datei die Media Queries ins Spiel kommen (dadurch benötigt man nur eine mobile CSS-Datei)

Der Code zum Einbinden von zwei CSS Dateien im Head-Bereich:

Der Code zu den Media Queries im CSS:

@media screen and (max-width: 480px) { /* Smartphone */	
	.vorhandene_css_klasse {
		width: 100%;
		uvm...
	}
}
  

Ich habe auf meinem Blog die dritte Option gewählt und umgesetzt. Ich habe eine neue CSS-Datei erstellt, die "mobile.css" heißt und dann meine CSS Styles in den Media Queries definiert.

Da es noch weitere mobile Geräte als Smartphones gibt (z.B. Tablets), könnte man eine Website in verschiedene "Break-Points" einteilen. Der erste responsive CSS-Block greift ab 900 Pixeln Bildschirmbreite und der zweite bei 480 Pixeln. Dadurch kann man definieren, wie sich die Website bei Tablets und Smartphones verhalten soll. Der „Bildschirm“ bei Tablets ist ja wesentlich größer als der bei Smartphones. Hier auf meinem Blog wollte ich es aber so definieren, dass alles ab 900 Pixeln variabel mit 100% dargestellt wird. Das heißt, dass die ausgewählten Breiten von Elementen bei 900 Pixeln und auch bei 480 Pixeln über die gesamte „Bildschirm“-Breite gehen. Im Prinzip füllen diese Elemente immer die komplette Breite aus, egal wie groß der Bildschirm oder das mobile Endgerät ist. Vorteil hier ist, dass man nur einmal das Website-Layout „umbauen“ muss. Der Nachteil ist natürlich, dass schon bei einer Bildschirm-Breite ab 900 Pixeln die meisten Breiten auf 100% gehen, was vielleicht nicht immer so vorteilhaft ist.

Lass uns langsam mit dem Code beginnen. Im Head-Bereich meiner Seiten steht nun:

Die CSS Datei „mobile.css“ sieht folgendermaßen aus (greift ab 900px Breite):

@media screen and (max-width: 900px) {
	.vorhandene_css_klasse {
		width: 100%;
		uvm...
	}
}
  

Alles, was zwischen der ersten und der letzten geschwungenen Klammer { und } steht, ist der Bereich, in dem man den neuen CSS Code schreiben kann. Dafür werden nur CSS Klassen und IDs verwendet, die schon vorhanden sind und in der normalen style.css Datei definiert wurden! Es können keine neuen sogenannten Bezeichner erstellt werden! Wir haben beispielsweise folgenden Layout-Aufbau auf unserer Website:

Die index.html-Datei mit dem HTML-Gerüst sieht dann so aus: (ihr könnt euch Testweise den Code auch vollständig kopieren und als eine HTML-Datei abspeichern und anschließend zur Ansicht in eurem Browser öffnen)

<html>
<head>
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <link type="text/css" rel="stylesheet" media="screen" href="css/style.css" />
 <link type="text/css" rel="stylesheet" media="screen" href="css/mobile.css" />
</head>
<body>
<div id="wrapper">
 <div id="header">Header</div>
 <div id="navigation">Navigation</div>
 <div id="content">Content</div>
 <div id="footer">Footer</div>
</div>
</body>
</html>
  

Die Syntax-Highlights funktionierten hier leider nicht.

Die style.css-Datei könnte so aussehen (sie ist im gleichen Ordner wie die index.html-Datei abgespeichert):

#wrapper {
	width: 900px;
	margin: 0 auto;
}
#header {
	width: 900px;
	height: 100px;
	margin: 0 0 20px 0;
	background: #00c; 
	color: #fff;
}
#content {
	width: 660px;
	min-height: 400px;
	float: left;
	margin: 0 0 20px 0;
	background: #900;
	color: #fff;
}
#navigation {
	width: 200px;
	min-height: 400px;
	float: right;
	margin: 0 0 20px 0;
	background: #393;
	color: #fff;
}
#footer {
	width: 900px;
	height: 50px;
	clear: both;
	background: #c60;
	color: #fff;
}
  

Tipp: Die Reihenfolge der Div-Container ist hier entscheidend. Habt ihr eine vertikale Navigation auf der rechten Seite (wie hier im Beispiel), solltet ihr trotzdem als erstes den Div-Container für die Navigation (mit float: right) und dann erst den Container für den Content (mit float: left) definieren. Vom logischen Aufbau her, wäre eine umgekehrte Reihenfolge sinnvoller. Aber wenn die Seite für mobile Geräte angepasst wird, dann kann man die Reihenfolge der Elemente nicht mehr beeinflusse, das heißt, die Navigation wäre dann auf Smartphones unter dem Content. Daher sollte der Navigation-Div vor dem Content sein, auch wenn das Menü auf einem normal großen Desktop hinter dem Content liegt. Dies ist einfach benutzerfreundlicher. Natürlich kann man die Navigation bei mobilen Endgeräten auch absichtlich ganz nach unten setzen. Da stellt sich immer die Frage, was man selbst möchte.

Um diese Seite nun für mobile Endgeräte flexibel werden zu lassen, müssen wir den verschiedenen Div-Containern nur sagen, wie sie sich verhalten sollen, in diesem Fall sollen alle Divs ab 900 Pixeln Breite eine eigene Breite von 100% besitzen. Zurzeit würde der Wrapper-Div mit 900 Pixeln Breite bei kleinen Geräten viel zu breit sein. Außerdem sollen der Content- und der Navigations-Bereich nicht mehr nebeneinander, sondern untereinander stehen, also nicht mehr "floaten". Der Body allgemein soll 5 Pixel Padding aufweisen, damit die Container nicht am Rand "kleben".

Der CSS-Code für die mobile.css-Datei sieht folgendermaßen aus (sie ist im gleichen Ordner wie die index.html-Datei abgespeichert):

@media screen and (max-width: 900px) {
	body {
		padding: 5px;
	}
	#wrapper,
	#header,
	#footer {
		width: 100%;
	}
	#content,
	#navigation {
		width: 100%;
		float: none;
	}
}
  

Nach diesem Prinzip werden alle Elemente behandelt.

Mein Blog sieht nun so aus:

Responsive Images

Damit auch alle Bilder, vor allem, wenn sie die gesamte Content-Breite beanspruchen, nicht zu groß dargestellt werden und ebenso "responsive" werden, hilft folgender Trick im CSS (mobile.css):

@media screen and (max-width: 900px) {
	body {
		padding: 5px;
	}
	#wrapper,
	#header,
	#footer {
		width: 100%;
	}
	#content,
	#navigation {
		width: 100%;
		float: none;
	}
	#content img {
		max-width: 100%;
	}
}
  

Somit werden alle Bilder, die sich im Content-Div befinden, maximal eine Breite von 100% (max-width) besitzen. Es ist zwar keine elegante Lösung, da das Bild nicht in "echt" heruntergerechnet wird, aber es funktioniert, und vor allem ziemlich unkompliziert.

Als ich dies auf meinem Blog umsetzen wollte, bin ich auf ein Problem gestoßen. Die Bilder wurden bei mobilen Geräten verzerrt dargestellt. Dies habe ich behoben, indem ich zusätzlich die Höhe der Bilder auf 100% gesetzt habe, also height: 100%

Responsive Navigation

Habt ihr eine (sehr) große Navigation, könnten die Menüpunkte auf dem Smartphone schon fast erschlagend wirken, da sie viel Platz beanspruchen. In der Regel werden Menüpunkte auf dem mobilen Endgerät in 100% Breite untereinander angezeigt, denn so kann man sie mit dem Finger (Touch) besser anwählen. Damit diese Menü-Liste aber nicht unendlich lang wird, kann man sie verkürzen, indem man eine Überschrift hinzufügt, die per "Klick" alle Navigationspunkte einblendet. Das Prinzip ist folgendermaßen: alle Menüpunkte werden auf einem Desktop-Bildschirm nebeneinander als eine Liste angezeigt. Verkleinert sich der Bildschirm, dann werden automatisch alle Menüpunkte versteckt und ein zusätzlicher Punkt eingefügt, der die Klick-Funktion enthält.

Ich möchte an dieser Stelle auf dieses Tutorial verweisen: www.hongkiat.com/blog/responsive-web-nav/

Auf dieser Seite wird gut erklärt, wie ihr euch dieses repsonsive Menü selbst erstellen könnt. Ich kann nur empfehlen, die Codes herunterzuladen und dann selbst einfach mal zu testen. So sieht es jetzt final auf Traumfinsternis aus:

Hover-Effekte anpassen

Vergesst nicht, dass bei mobilen Endgeräten ein Hover (Mouseover) Effekt nicht möglich ist. Man kann nur etwas auswählen (mit dem Finger "klicken"). Das heißt, dass z.B. Menüs mit einem Submenü, welches nur beim Hover sichtbar wird, umkonzipiert werden müssen. Entweder sollten dann alle Menüpunkte immer oder durch einen Klick sichtbar werden anstatt durch Mouseover.

Danke nochmal an chrissi für diesen Nachtrag :-)

Testen

Besitzt ihr kein mobiles Endgerät, könnt ihr eure mobile Website auch testen, indem ihr euer Browserfenster verkleinert. Dies ist nicht die eleganteste Lösung, aber besser als es gar nicht testen zu können :)

Ähnliches zu "Einfach zum Responsive Webdesign":

• Neuerungen CSS3
• Top Bands von Last.fm einbinden
• Festival-Packliste
• Bilderlabyrinth
• Sehenswerte Filme