Die wichtigsten Begriffe im responsive Webdesign
Immer mehr Menschen greifen mit ihren mobilen Geräten auf Websites zu. Eine für mobile Geräte optimierte Website führt zu niedrigeren Absprungraten und höheren Konversionsraten. "Responsive" Webdesign ist eine Technik zur Erstellung von Websites, bei der sich das Layout und Design der Website automatisch an die Bildschirmgröße und die Geräteausrichtung des Besuchers anpasst. Das bedeutet, dass die Website auf verschiedenen Geräten wie Desktops, Tablets und Smartphones optimal dargestellt wird. Folgende Bildschirmgrößen sind dabei typischerweise zu berücksichtigen:
- Desktop-Computer: typischerweise zwischen 1280px und 1920px Breite
- Laptop: typischerweise zwischen 1366px und 1440px Breite
- Tablet: typischerweise zwischen 768px und 1024px Breite
- Smartphone (Portrait-Modus): typischerweise zwischen 320px und 480px Breite
- Smartphone (Landscape-Modus): typischerweise zwischen 480px und 768px Breite
Responsive kommt nie aus der Mode! Denn es gibt immer mehr Bildschirmgrößen, an die sich eine Website anpassen muss. Waren es zuletzt Desktop, Tablet und Smartphone, kommen nun immer mehr kleinere Bildschirme hinzu. Zu den sogenannten Wearables gehören Smartwatches, Smart Glasses und Smart Headsets. Die Produktpalette wird ständig erweitert.
If you think responsive’s simple, I feel bad for you son. We got 99 viewports, but the iPhone’s just one.
Responsive Design vs. Mobile First: was ist der Unterschied?
Es gibt zwei Ansätze für die Gestaltung von Websites, die für die Nutzung auf mobilen Geräten optimiert sind. Der Unterschied zwischen den beiden Konzepten wird hier erklärt:
Responsive Design ist eine Methode, bei der eine Website so gestaltet wird, dass sie auf verschiedenen Bildschirmgrößen und Geräten funktioniert und gut aussieht. Dabei wird die Website so programmiert, dass sie sich automatisch an die Bildschirmgröße des jeweiligen Geräts anpasst.
Mobile First (auch Mobile Friendly) hingegen ist ein Designansatz, bei dem eine Website speziell für die Nutzung auf mobilen Geräten optimiert wird. Dahinter steht die Idee, dass die meisten Menschen heutzutage eher mit mobilen Geräten online gehen und eine Website daher in erster Linie für die mobile Nutzung konzipiert werden sollte. Anschließend kann das Design für größere Bildschirme und Desktop-Computer angepasst werden.
Responsive Images
Responsive Images beschreibt eine Kombination von Techniken, die es Browsern ermöglichen, das für die aktuelle Bildschirmgröße und den Gerätetyp am besten geeignete Bild zur Anzeige auszuwählen. Die Implementierung responsiver Bilder ist zu einem Standard in der Onpage-Optimierung von Webseiten geworden, da es diese benutzerfreundlicher, inklusiver und oft leistungsfähiger macht. Um ein responsive Image unabhängig vom verwendeten Gerät optimal darzustellen, wird eine Kombination aus Methoden wie Größenanpassung, Zuschnitt, CSS-Medienabfragen, JavaScript-Bibliotheken und die in HTML eingebetteten Attribute srcset und sizes verwendet. Über das <source> HTML Element können dem Browser darüber hinaus für das Web optimierte Formate wie WebP oder AVIF zur Verfügung gestellt werden, wodurch sich die Ladezeit der Webseite weiter verkürzt.
Responsiveness: Mobile First!
Mobile-First-Indexierung bedeutet, dass Google die mobile Version einer Website bevorzugt und als primäre Quelle für Inhalte und Rankingfaktoren verwendet. Die Mobile-First-Indexierung gehört bei Google seit 2021 zum Standard. Der Tech-Riese hat seine Strategie zugunsten der steigenden Anzahl von Smartphone-Nutzer:innen angepasst. Früher indizierte Google vor allem die Desktop-Versionen von Websites und passte sie für Suchanfragen auf mobilen Geräten an.
Die Absprungrate verringert sich, wenn Benutzer:innen auf jedem Gerät, einschließlich Desktops, Laptops, Tablets und Smartphones, problemlos auf einer Website navigieren können.
Was ist der Unterschied zwischen Responsive Design und Adaptive Design?
Responsive Design und Adaptive Design sind beides Ansätze zur Erstellung anpassungsfähiger Websites. Der Hauptunterschied liegt in der Art und Weise, wie dieses Ziel erreicht wird. Responsive Design basiert auf flexiblen Layouts und Styles, welche mittels CSS Media Queries für verschiedene Bildschirmgrößen definiert und vom Browser dargestellt werden.
Adaptives Design hingegen stellt speziell angepasste Layouts und Stylesheets für verschiedene Gerätegruppen wie Desktop, Tablet, Smartphone oder zunehmend auch Wearables bereit. Mittels Device Detection bzw. Browser Sniffing wird hierbei beim Aufruf einer Seite serverseitig identifiziert, auf welchem Gerät diese aufgerufen wird und dementsprechend das passende Layout bzw. Stylesheet ausgeliefert. Dieser Ansatz wird tendenziell bei sehr umfangreichen Enterprise-Anwendungen verwendet, um die Auslieferung "unnötiger" Stylesheets zu vermeiden.
Der Vorteil von Responsive Design gegenüber Adaptive Design ist, dass es flexibler ist und eine höhere Anpassungsfähigkeit an verschiedene Geräte bietet. Adaptive Design hingegen ermöglicht spezifischere und für verschiedene Geräte optimierte Designs. Die Entscheidung für Responsive oder Adaptive Design hängt in der Regel von der Zielgruppe und deren individuellen Bedürfnissen ab.
HTML5 und CSS3 im responsive Webdesign
HTML5 und CSS3 sind die Grundbausteine für responsives Webdesign. HTML5 ist die aktuelle Version der Hypertext Markup Language, die zur Strukturierung von Webseiteninhalten verwendet wird. CSS3 ist die aktuelle Version der Cascading Style Sheets und dient der Formatierung von HTML-Dokumenten.
Im Zusammenhang mit responsivem Webdesign ermöglicht HTML5 die Verwendung semantischer Elemente wie <header>, <nav> und <section>. Diese helfen, die Struktur der Website zu definieren. CSS3 bietet erweiterte Layout- und Designmöglichkeiten wie flexible Raster, Medienabfragen und animierte Übergänge, um das visuelle Erscheinungsbild der Website auf verschiedenen Geräten und Bildschirmgrößen anzupassen.
Durch die Kombination von HTML5 und CSS3 wird eine Website so gestaltet, dass sie sich automatisch an die Größe und das Seitenverhältnis des jeweiligen Geräts anpasst. So können beispielsweise mit CSS3-Medienabfragen bestimmte Stile nur auf bestimmte Geräte angewendet werden.
Beispiel:
Im folgenden Beispiel wird ein Container-Element erstellt, um den Inhalt der Website zu begrenzen und zu zentrieren. Das Header-Element enthält den Titel und das Navigationsmenü der Website. Das Section-Element enthält den Hauptinhalt der Website.
CSS wird verwendet, um verschiedene Stile zu definieren, die das Aussehen der Website bestimmen. Media Queries dienen dazu, das Layout und den Stil der Website an verschiedene Bildschirmgrößen anzupassen. In diesem Beispiel verwenden wir das Flexbox-Layout und die Größenanpassung, um das Navigationsmenü auf kleineren Bildschirmen korrekt anzuzeigen.
HTML:
<div class="container">
<header>
<h1>Meine Webseite</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Über uns</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</nav>
</header>
<section>
<h2>Willkommen auf unserer Webseite!</h2>
<p>Hier finden Sie alle Informationen, die Sie benötigen.</p>
</section>
</div>CSS:
/* Basis-Styles */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
/* Container-Styles */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* Header-Styles */
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 0;
}
nav ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
margin: 0 10px;
}
nav ul li a {
color: #333;
text-decoration: none;
transition: color 0.2s ease-in-out;
}
nav ul li a:hover {
color: #666;
}
/* Section-Styles */
section {
padding: 20px 0;
}
/* Media Queries */
@media screen and (max-width: 768px) {
header {
flex-direction: column;
text-align: center;
}
nav ul {
margin-top: 10px;
}
nav ul li {
margin: 0 5px;
}
section {
font-size: 16px;
}
}
@media screen and (max-width: 480px) {
nav {
flex-direction: column;
}
nav ul {
margin-top: 0;
}
nav ul li {
margin: 5px 0;
}
}Responsive Table mit HTML and CSS erstellen
Eine responsive Tabelle wird mit einer Kombination aus HTML und CSS geschrieben:
<div class="table-wrapper">
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
<td>Row 1, Column 3</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 2, Column 3</td>
</tr>
<tr>
<td>Row 3, Column 1</td>
<td>Row 3, Column 2</td>
<td>Row 3, Column 3</td>
</tr>
</tbody>
</table>
</div>Im obigen Beispiel haben wir eine einfache Tabelle mit drei Spalten und drei Zeilen. Um diese Tabelle responsiv zu gestalten, legen wir per CSS eine maximale Breite für die Tabelle fest und verwenden für kleinere Bildschirme das Scrolling "overflow-x". Hier ist das CSS:
.table-wrapper {
max-width: 100%;
overflow-x: auto;
}
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}In diesem CSS legen wir eine maximale Breite von 100% für den Table Wrapper fest. Die Tabelle nimmt dadurch die gesamte Breite des Containers ein. Außerdem setzen wir overflow-x auf auto. Das bedeutet, horizontales Scrollen wird aktiviert, sobald die Tabelle breiter als ihr Container wird.
Dann setzen wir die Breite der Tabelle auf 100% und border-collapse auf collapse, wodurch die Ränder zwischen den Tabellenzellen entfernt werden. Außerdem legen wir einige grundlegende Stile für die Tabellenzellen fest, einschließlich eines festen Rahmens von 1px und eines Abstands von 8px. Schließlich wird der Tabellenüberschrift eine hellgraue Hintergrundfarbe zugewiesen, um sie von den Tabellendaten zu unterscheiden.
Wie prüfe ich, ob meine Website responsive ist?
Sie sollten regelmäßig überprüfen, ob Ihre Website auf dem Smartphone oder Tablet (oder sogar auf der Smartwatch) noch funktioniert und gut aussieht, denn ständig kommen neue Geräteklassen auf den Markt.
Ist Ihre Seite nicht für mobile Endgeräte optimiert, springen potentielle Kund:innen ab, beispielsweise wenn die Seite zu lange lädt oder unübersichtlich ist. Das wiederum führt zu Umsatzeinbußen. Es gibt verschiedene Möglichkeiten, Ihre Website zu überprüfen:
Manuelle Überprüfung
Öffnen Sie die Website auf verschiedenen Geräten wie Desktop, Tablet und Smartphone und überprüfen Sie, ob die Website auf allen Geräten korrekt angezeigt wird und sich das Layout an die Bildschirmgröße anpasst.
Überprüfung mittels Entwicklerwerkzeuge
Fast alle Webbrowser verfügen über integrierte Entwicklerwerkzeuge, mit denen Sie Ihre Website auf verschiedenen Geräten simulieren und testen können. Öffnen Sie den Entwicklermodus des Browsers (in der Regel mit F12 oder Strg+Shift+I) und klicken Sie auf das Symbol "Symbolleiste für Geräte". Dort können Sie verschiedene Gerätegrößen auswählen. Die jeweilige Version wird in der entsprechenden Bildschirmgröße angezeigt.
Unter dem Reiter "Lighthouse" im Chrome-Browser können Sie verschiedene Metriken zur Performance Ihrer Website einsehen.
Google Mobile-Friendly Test
Der Google Mobile-Friendly Test ist ein kostenloses Online-Tool von Google. Der Test analysiert die Website und gibt eine Rückmeldung darüber, ob sie für die Nutzung mit mobilen Endgeräten geeignet ist oder nicht.
Bei robole setzen wir auf Responsive Design und verfolgen wenn möglich den Mobile First Ansatz.
Sie möchten eine responsive Website erstellen lassen oder benötigen Unterstützung bei der Anpassung & Optimierung Ihrer bestehenden?Sprechen Sie uns an.