Responsive Webdesign für Einsteiger

Zuletzt aktualisiert am 23. Dezember 2023 von Lars

Webseiten werden zunehmend über Smartphones aufgerufen. Wenn diese auf den kleinen Geräten nicht angemessen dargestellt werden, ist das besonders frustrierend. Dies ist nicht nur für die Nutzerinnen und Nutzer ärgerlich, sondern auch für die Seitenbetreiberinnen und -betreiber, denn sie haben weniger zufriedene Homepage-Besucherinnen und -Besucher, als es möglich wäre.

Daher müssen Webseiten speziell angepasst und ausgeliefert werden. Eine Möglichkeit hierfür ist das responsive Webdesign (kurz RWD). Dabei werden die Inhalte flexibel gestaltet, sodass sie unabhängig von der Größe des Bildschirms des jeweiligen Betrachters oder der Betrachterin stets passend angezeigt werden. Die Webseite besteht dabei immer aus 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. Zum Beispiel 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 muss.

Mobile oder Desktop First?

Früher wurden Websites immer für den Desktop-PC angepasst und dann diverse Layoutanpassungen für die kleinen Helferlein via CSS "dazugewerkelt". Einige Designer sind dagegen 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.

Den Einstieg finden

Wer den Einstieg sucht, findet viele gute Seiten bereits im Internet. Ein tolles Tutorial gibt es unter Lingulo.com. Es erscheint mir für einen allerersten Kontakt doch etwas ü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!

In der Vergangenheit wurden zum Teil sogenannte Browserweichen verwendet, die dann dem PC

www.seite.de

und dem Mobil-Device

m.seite.de

ausliefern.

Diese Vorgehensweise hat zwei entscheidende Nachteile:

  • Ich muss zwei verschiedene Seiten pflegen.
  • Die Seiten sind nicht wirklich responsive, sondern nur für eine typische Smartphone oder eine typische Desktop-Auflösung gemacht. Wird noch eine Tablet-Auflösung hinzugenommen, benötige ich sogar drei Seiten.

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, eigne dir diese bitte erst an. Dazu findest du mehr in HTML 5 Einsteiger Tutorial.

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:

  • Der Benutzer der Seite kann so nicht mehr ohne weiteres zwischen beiden Versionen umschalten.

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&quot>

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.

Typische Bildgrössen

Leider entspricht der "viewport" nicht automatisch der physikalischen Grösse eines Geräts. Moderne Smartphone haben eine sehr hohe Auflösung, damit das Display entsprechend scharf ist.

Ein iPhone 11 mit einer physikalischen Auflösung von 1.242 x 2.688 Pixel gibt eine "viewport"-Aufläsung von 412x719 Pixeln. Hintergrund ist hier, dass eine dreifach höhere Pixeldichte verwendet wird wie bei PC-Monitore.

Eine Liste mit den gängingen physikalischen Auflösungen findest du hier: screensiz.es.

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 du sicher gehen willst, ob auch Google der Meinung ist, dass Ihre Webseite für Mobilgeräte optimiert ist, dann nutze 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 in der Regel eine feste Grösse, die nicht mit skaliert. Aber es geht doch. Hier die Realisierung bei einer alten Website:

<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:

Du willst meine Arbeit unterstützen? Dann freue ich mich über eine kleine Spende!

Kommentar hinterlassen

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