Home » Web » Responsive Webdesign
- Anzeige -
Software Asset Management beim Fachmann

Responsive Webdesign - Die 1001ste Einführung

Webseiten werden immer häufiger über Smartphones aufgerufen. Werden diese auf den kleinen Geräten nicht vernünftig dargestellt, ist das besonders ärgerlich. Nicht nur für die Benutzer, sondern auch für den Seitenbetreiber, denn der hat weniger zufriedene Homepage-Benutzer, als möglich.

Webseiten müssen also speziell angepasst ausgeliefert werden. Eine Möglichkeit ist das responsive Webdesign (kurz RWD). Dabei werden die Inhalte frei skalierbar gemacht. Egal, wie gross der Bildschirm des jeweiligen Betrachters ist, der Inhalt passt immer. Die Seite besteht dabei immer aus ein- und derselben Vorlage, es wird also nicht etwa eine separate Webseite für mobile Geräte erstellt.

Responsive Webdesign - Die 1001ste Einführung

Eine Alternative ist das adaptive Webdesign. Hierbei wird je nach Displaygrösse mit einer festen Anzahl an fixen Layouts gearbeitet. Aber auch responsive Webdesign benötigt die sog. Breakpoints. Z.B. wird ab einer bestimmten Displaygrösse entschieden, dass das Layout zweispaltig und darunter einspaltig erscheint. Dazwischen bewegen sich die Elemente aber vollkommen flüssig.

Der Wikipedia-Artikel Responsive Webdesign erklärt diese Zusammenhänge ganz gut.

Auch an den Grafiker oder Designer, der das Webdesign entwirft, stellt das responsive Webdesign neue Herausforderungen. Ein Umdenken von der festen Papier- bzw. Display-Grösse zu der dynamischen ist angesagt. Hier hilft es aber sicherlich, wenn erst einmal die Layouts der einzelnen Breakpoints entworfen werden.

Der Webdesigner muss weg von den statischen (Pixel-)Werten zu prozentualen.

Ob man noch auf Maximalwerte setzen will, ist Ansichtssache. Viele Befürworter argumentieren mit den immer grösser werdenden Bildschirmen. Ich persönlich finde auch bei einer Bildschirmbreite von 1920 Pixeln eine auf 1024 Pixel "optimierte" Seite akzeptabel. Häufig wird der Aufwand einfach zu gross (und das Design oft auch zu komplex), wenn auch noch für grössere Auflösungen mitgeplant werden mus.

Mobile oder Desktop First?

Ich selbst habe das responsive Design bisher sehr stiefmütterlich behandelt. Bisher wurde die Seite immer für den Desktop-PC angepasst und dann diverse Layoutanpassungen für die kleinen Helferlein via CSS "dazugewerkelt". Einige Designer sind daher für die Herangehensweise "Mobile First". Soll heissen, die Seite wird zunächst mal für die mobile Devices entwickelt und dann die Anpassung an den Desktop gemacht. Ein Beispiel hierzu ist sicher die Seite daydeal.ch. Sie kommt sehr "touchmässig" daher. Wer Daydeal nicht kennt, hier wird um 9:00 Uhr immer ein günstiger Artikel eingestellt. Hier ist man sicherlich darauf angewiesen, dass die Benutzer (die vielleicht auf der Arbeit daydeal.ch gesperrt haben), einfach und schnell via Smartphone zuschlagen können. Auf einem grossen Bildschirm sieht die Seite aber meiner persönlichen Meinung nach doch sehr verloren aus. Hier hätte ich eine maximale Breite schöner gefunden. Bei meinen nächsten Projekten werde ich die Mobile First Herangehensweise aber sicherlich testen.

Den Einstieg finden

Wer den Einstieg sucht, findet viele gute Seiten bereits im Internet. Das Ober-Tutorial ist sicher Christoph Anastasiades Tutorial bei Lingulo.com. Es erscheint mir für einen allerersten Kontakt doch zusehr mit diversen Effekten überlagert, so dass ich hier für Ausbildungszwecke nach einer einfacheren Variante gesucht habe. Gefunden habe ich es bei dem Tutorial des Kanadiers Nick La auf webdesignerwall.com. Ich habe es für die ersten Schritte erst einmal weitgehend übernommen und nur dezent aufgepeppt.

Aber erst noch einmal ein bisschen Background...

Browserweichen sind out!

Zum Teil werden Browserweichen verwendet, die dann dem PC

www.seite.de

und dem Mobil-Device

m.seite.de

ausliefern.

Diese Vorgehensweise hat zwei entscheidende Nachteile:

Die Lösung ist zunächst einmal recht einfach. Man benutzt die Media-Queries von CSS. Damit kann man, abhängig von der Auflösung, entsprechende Formatierungen setzen. Um das folgende zu verstehen, sollten Sie ordentliche CSS-Kenntnisse haben. Wenn nicht, bitte erst diese aneignen.

Beispiel:

/* for 980px or less */
@media screen and (max-width: 980px) {
	

	#content {
		width: 63%;
	}
	#side {
		width: 34.5%;
	}


}

/* for 700px or less */
@media screen and (max-width: 700px) {

	#content {
		width: auto;
		float: none;
	}
	#side {
		width: auto;
		float: none;
	}
}

Das ganze lässt sich also sogar innerhalb ein und derselben CSS-Datei unterbringen.

Im Beispiel sind keine fixen Breiten, sondern nur prozentuale Angaben angegeben. Damit erreichen wir das eigentliche responsive Design, dass den Inhalt dynamisch mit der Bildschirmgrösse skaliert. Nichtsdestotrotz müssen wir aber i. d. R. fixe Breakpoints definieren, ab denen, z.B. die zwei nebeneinanderstehenden DIV-Boxen untereinander angezeigt oder das horizontale Menü in ein vertikales überführt wird.

Ein Nachteil hat diese Vorgehensweise allerdings auch:

Allein durch relative Angaben und Media-Queries im CSS wird "Responsive" nur leider nicht klappen: Die Seite erscheint zwar auf dem Smartphone gut leserlich, wird dann aber wie von Zauberhand ins unleserliche skaliert. Wichtig ist daher zusätzlich die folgende Anweisung im Header der html-Datei:

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

Der Viewport definiert die Anzeigenbreite. Bei mobilen Geräte ist diese praktisch immer deutlich grösser als die tatsächliche Auflösung. Dies wurde gemacht, damit herkömmliche Webseiten komplett angezeigt werden, der Benutzer muss aber dann manuell reinzoomen. Genau deshalb passiert der oben genannte Effekt. Mit der View-Port-Anweisung im Header erreichen wir, dass die Anzeigenbreite auf die real vorhandene Breite gesetzt wird und zwar mit dem Skalierungsfaktor 1.

Übrigens dürfen wir ein paar weitere Zeilen im Header nicht vergessen.

<!-- css3-mediaqueries.js for IE8 or older -->
	<!--[if lt IE 9]>
		<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
	<![endif]-->

Ältere Versionen des Microsoft Internet Explorers 8 zieren sich mal wieder mit den Media-Queries. Dieses Script rüstet die Media-Queries auch für diese Browser nach.

Bauen wir uns eine responsive Webseite

Das folgende Beispiel orientiert sich an der englischen Anleitung Responsive Design in 3 Steps auf Webdesignerwall und baut dies aber auch gleich ein wenig aus.

Werfen wir erst einmal ein Bild auf das Ergebnis. Je nach Auflösung sieht es so...

Responsive Webdesign - Die 1001ste Einführung

...oder z.B. so...

Responsive Webdesign - Die 1001ste Einführung

...aus. Gewinnt sicher kein Design-Preis, aber auch nicht wirklich ganz doof, oder?

Schauen wir uns nun die Dateien an. Erst einmal die index.html.

<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8" />

<!-- viewport meta to reset smart-device inital scale -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Responsive Webdesign</title>

<!-- css3-mediaqueries.js for IE8 or older -->
<!--[if lt IE 9]>
	<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>

<body>

<div id="pagewrap">

	<div id="header">
		<h1>Responsive Webseite</h1>
		<p>Originalartikel (englisch) auf <a href="http://webdesignerwall.com/tutorials/responsive-design-in-3-steps">webdesignerwall.com.</a></p>		
		<div id="navcontainer">
			<ul>
				<li><a href="index.htm" title="Home">Home</a></li>
				<li><a href="technik.htm" title="Technik">Technik</a></li>				
				<li><a href="blog.htm" title="Blog">Blog</a></li>
				<li><a href="uebermich.htm" title="Uber">Über mich</a></li>
				<li><a href="impressum.htm" title="Impressum">Impressum</a></li>
			</ul>
		 </div>
	</div>

	<div id="mainpart">
		<div id="content">
			<h2>Content</h2>
			<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
			<div class="textbild">
				<img src="bild.png" alt="Ein Bild" />
			</div>
			<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet.</p>
		</div> <!--Content-->	
		
		
		<div id="sidebar">
			<ul>
				<li>Punkt 1</li>
				<li>Punkt 2</li>
				<li>Punkt 3</li>
				<li>Punkt 4</li>
				<li>Punkt 5</li>
			</ul>
		</div> <!--Sidebar-->

	</div> <!--mainpart-->



	<div id="footer">
		<h4>Dies ist meine tolle responsive Webseite.</h4>
	</div>
		
</div>

</body>
</html>

Als nächstes das zugehörige CSS.

body {
font-family: Helvetica,sans-serif;
}
a {
color: #669;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}



/************************************************************************************
Bild
Das Bild im Text wird relativ skaliert (80%). 
Wir benötigen aber die Angabe einer maximalen Breite, damit es unser Maximal-Layout 
auf einem grossen Bildschirm nicht "verreist".
*************************************************************************************/
.textbild {
text-align: center;
max-width: 900px;
}

.textbild img{
width: 80%;
}

/************************************************************************************
Menü
Hier wird erst einmal die Navigation - eigentlich eine Aufzählungsliste
in die horizontale Ebene gebracht (display:inline)
*************************************************************************************/

#navcontainer 
{
width: 100%;
margin: auto;
border: 1px solid black;
}

#navcontainer ul
{
border: 1px solid black;
margin: 0px; /*setzen an den äussersten Rand*/
padding: 0px; /*setzen an den äussersten Rand*/
list-style-type: none;
color: white;
background-color: black;
}

#navcontainer ul li
{
display: inline; /*besser als float - gefloatete Listen bekommt man mit CSS nicht an den äussersten Rand*/
}

#navcontainer ul li a
{
text-decoration: none;
padding: .2em 1em;
color: white;
}

#navcontainer ul li a:hover
{
background-color: white;
width: 100%;
color: black;
}


/************************************************************************************
Rahmen
Dies sind die Rahmen um unsere Elemente
*************************************************************************************/
#content {
background: #f8f8f8;
}
#sidebar {
background: #f0efef;
}
#header, #content, #sidebar {
margin-bottom: 5px;
}
#pagewrap, #header, #content, #sidebar, #footer {
border: solid 1px #ccc;
}

/************************************************************************************
Struktur
*************************************************************************************/

/* pagewrap ist unsere "Aussenhülle". Für sie legen wir eine maximale Grösse von 
960 px fest */
#pagewrap {
padding: 5px;
width: 960px;
margin: 20px auto;
}
#header {
height: auto;
}
#content {
/* Das mit den 32768px ist die Problematik mit den gleich hohe floatenden DIVs.
Siehe hierzu http://webstylez.net/Floatende-Divs-gleich-hoch-machen */
width: 600px;
float: left;
padding: 5px;
padding-bottom: 32768px;
margin-bottom: -32768px;
}
#sidebar {
width: 340px;
float: right;
padding-bottom: 32768px;
margin-bottom: -32768px;
}
#footer {
clear: both;
padding: 5px;
}

#mainpart
{
overflow: hidden;
height: 100%; /* for IE6 */
}


/************************************************************************************
Media queries
*************************************************************************************/
/* for 980px or less */
@media screen and (max-width: 980px) {

/* Hier fängt die Magic an... Alles wird in Prozentwerten angegeben */ 
#pagewrap {
width: 94%;
}
#content {
width: 63%;
}
#sidebar {
width: 34.5%;
}

}

/* for 700px or less */
@media screen and (max-width: 700px) {

/* Hier fängt die Magic an... Immer noch Prozente, aber der Content und der Box-Bereich
werden übereinander gestapelt (float:none) und gleich breit gemacht (width: auto) 
Auch das Navigationsmenü wird übereinander (display: block) gestapelt */ 

#content {
width: auto;
float: none;
}
#sidebar {
width: auto;
float: none;
}
#navcontainer ul li
{
display: block; 
width: auto;
} 

#navcontainer ul li a
{
width: auto;
display: block;
}

}

/* for 480px or less */
@media screen and (max-width: 480px) {
/* Für ganz kleine Displays machen wir die H1-Überschrift noch kleiner */ 
h1 {
font-size: 24px;
}

}

Das meiste wird hier hoffentlich aus den Kommentaren klar. Wir haben drei Breakpoints. Einmal 980 Pixel Bildschirmbreite, ab der die Inhalte weitgehend prozentual verkleinert werden. Bei 700 Pixel werden die Menüpunkte sowie der Content-Bereich und der Sidebar-Bereich übereinandergestapelt. Bei 480 Pixel wird die H1-Überschrift, die jetzt zu gross ist, zusätzlich noch verkleinert.

Zum Testen braucht es nicht unbedingt immer gleich ein Smartphone, sie können auch einfach den Browser vergrössern und verkleinern.

Wenn Sie sicher gehen wollen, ob auch Google der Meinung ist, dass Ihre Webseite für Mobilgeräte optimiert ist, dann nutzen Sie das Tool hier von Google.

Und wie baue ich Videos in responsive Webseiten ein?

Leider stolpert man schnell über weitere Probleme. Ein häufiges Problem sind eingebundene Videos. Diese haben i. d. R. eine feste Grösse, die nicht mit skaliert. Aber es geht doch. Hier die Realisierung bei windows-server-2012-r2.com:

<div class="video-container">
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/zicWtMX8ohc" 
frameborder="0" allowfullscreen></iframe>
</div>

Der Standard-Youtube-Code wird also einfach in ein DIV mit einer entsprechenden Klasse gepackt. Das zugehörige CSS sieht dann so aus:

.video-container 
{ 
position: relative; /* keeps the aspect ratio */ 
padding-bottom: 56.25%; /* fine tunes the video positioning */ 
overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed 
{ 
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%;
}

Diese Lösung findet sich im Internet an vielen Stellen (z.B. stackoverflow), so dass ich den ursprünglichen Autor nicht mehr angeben kann.

Und was ist mit Tabellen in responsive Webseites?

Auch Tabellen können dem Webdesigner heftiges Kopfzerbrechen bescheren. Gernerell sollte man meines Erachtens beim Erstellen von Webseiten versuchen, so weit wie möglich auf Tabellen zu verzichten. Geht das nicht, gibt es verschiedene Ansätze, die häufig sehr komplex sind. Einen sehr einfacher Ansatz ist, diese bei Bedarf mit Scrollbalken zu versehen:

<div class="tablewrap">
  <table>
  <thead>
     <tr>
     :
     :
     </tr>
     </tbody>
   </table>
</div>
.tablewrap
 
{
     overflow-y: auto;
     display: block;
   }

Diese Lösung mag anspruchsvollen Designs eventuell nicht genügen. Umgekehrt haben mir viele der "professionellen" Lösung sehr missfallen. Eine gängige Lösung ist das Umsortieren bzw. Umbbrechen von Zeilen und Spalten mit einigem "Javascript und CSS-Magic". Hierbei wird jedoch der Charakter der jeweiligen Tabelle häufig komplett zerstört. Eine der besten Zusammenstellung findet man in dem Artikel "Tabellen im Responsive Webdesign" auf blog.kulturbanause.de.

Quellen - Weitere Infos:



War der Artikel hilfreich? Ich freue mich sehr über Likes, Shares oder Links von Deiner Website darauf. Danke Dir.

it-zeugs.de ist auch auf Facebook...

Schreibe einen Kommentar - aber kein SPAM - der wird zuverlässig gefiltert!

  • Erforderliche Felder sind markiert mit *.

If you have trouble reading the code, click on the code itself to generate a new random code.