Der Leitfaden für Anfänger zum responsiven Webdesign (Code-Beispiele & Layout-Beispiele)

Mit einem Internet, auf das zunehmend über mobile Geräte zugegriffen wird, reicht es nicht mehr aus, eine statische Webseite zu entwerfen, die nur auf einem Computerbildschirm gut aussieht.

Ganz zu schweigen davon, dass du auch Tablets, 2-in-1-Laptops und verschiedene Smartphone-Modelle mit unterschiedlichen Bildschirmabmessungen berücksichtigen musst, wenn du ein Design entwirfst.

Deinen Inhalt in eine einzige Spalte zu packen und es aufzugeben, wird es also nicht bringen.

Mit einem responsiven Webdesign kannst du dafür sorgen, dass deine Webseite auf Handys, Tablets, Laptops und Desktop-Bildschirmen gut aussieht.

Und diese Verbesserung der Nutzererfahrung bedeutet höhere Conversions und Wachstum.

In diesem Leitfaden findest du alles, was du über responsives Webdesign wissen musst, einschließlich Definitionen, einer Schritt-für-Schritt-Anleitung, Beispielen und mehr.

Schau dir unseren Video-Leitfaden zum Responsive Webdesign an:

Was ist responsives Webdesign?

Responsive Design ist eine Herangehensweise an das Webdesign, bei der sich deine Webinhalte an die verschiedenen Bildschirm- und Fenstergrößen einer Vielzahl von Geräten anpassen.

Zum Beispiel könnten deine Inhalte auf Desktop-Bildschirmen in verschiedene Spalten aufgeteilt sein, weil sie breit genug sind, um sich diesem Design anzupassen.

Wenn du deine Inhalte auf einem mobilen Gerät in mehrere Spalten aufteilst, wird es für die Nutzer schwierig sein, sie zu lesen und mit ihnen zu interagieren.

Responsive Design macht es möglich, mehrere, separate Layouts deiner Inhalte und deines Designs je nach Bildschirmgröße auf verschiedene Geräte zu übertragen.

Responsives Webdesign vs. Adaptives Design

Der Unterschied zwischen responsive Design und adaptive Design ist, dass responsive Design die Darstellung einer einzelnen Seitenversion anpasst. Im Gegensatz dazu liefert das adaptive Design mehrere völlig unterschiedliche Versionen derselben Seite.

Beides sind entscheidende Webdesign-Trends, die den Webmachern helfen, das Aussehen ihrer Webseite auf verschiedenen Bildschirmen zu kontrollieren, aber der Ansatz ist unterschiedlich.

Bei responsivem Design greifen die Nutzer über ihren Browser auf die gleiche Basisdatei zu, unabhängig vom Gerät, aber der CSS-Code steuert das Layout und rendert es je nach Bildschirmgröße unterschiedlich. Beim adaptiven Design gibt es ein Skript, das die Bildschirmgröße überprüft und dann auf das für dieses Gerät entworfene Template zugreift.

Warum Responsive Design wichtig ist

Wenn du neu im Webdesign, in der Entwicklung oder im Bloggen bist, fragst du dich vielleicht, warum responsive Design überhaupt eine Rolle spielt.

Die Antwort ist einfach. Es reicht nicht mehr aus, für ein einziges Gerät zu entwerfen. Der mobile Web-Traffic hat den Desktop überholt und macht nun den Großteil des Website-Traffics aus, der mehr als 51% ausmacht.

Wenn mehr als die Hälfte deiner potentiellen Besucher mit einem mobilen Gerät im Internet surfen, kannst du ihnen nicht einfach eine für den Desktop konzipierte Seite anbieten. Es wäre schwer zu lesen und zu benutzen und würde zu einer schlechten Benutzererfahrung führen.

 

Aber das ist noch nicht alles. Benutzer auf mobilen Geräten machen auch die Mehrheit der Suchmaschinenbesuche aus.

Schließlich ist das Handy in den letzten Jahren zu einem der wichtigsten Werbekanäle geworden. Sogar in einem Markt nach einer Pandemie wachsen die Ausgaben für mobile Werbung um 4,8% auf 91,52 Milliarden Dollar.

Egal, ob du dich dafür entscheidest, in sozialen Medien zu werben oder einen organischen Ansatz wie YouTube SEO verwendest, der Großteil deines Traffics wird von mobilen Nutzern kommen.

Wenn deine Landingpages nicht für das Handy optimiert und einfach zu bedienen sind, kannst du den ROI deiner Marketingbemühungen nicht maximieren. Schlechte Konversionsraten werden zu weniger Leads und verschwendeten Werbeausgaben führen.

Sind WordPress Seiten responsive?

Ob WordPress Seiten responsive sind oder nicht, hängt von dem Theme deiner Webseite ab. Ein WordPress Theme ist das Äquivalent zu einem Template für eine statische Webseite und kontrolliert das Design und Layout deines Inhalts.

Wenn du ein standardmäßiges WordPress-Theme wie Twenty Twenty verwendest, ist das Design responsive, aber da es ein einspaltiges Design ist, merkst du es vielleicht nicht, wenn du es auf verschiedenen Bildschirmen betrachtest.

Wenn du ein anderes WordPress Theme verwendest, kannst du testen, ob es responsiv ist oder nicht, indem du vergleichst, wie es auf verschiedenen Geräten aussieht oder indem du Chrome Developer Tools verwendest.

Die Bausteine des responsiven Webdesigns

In diesem Abschnitt befassen wir uns mit den Grundlagen des Designs von responsiven Webseiten und seinen verschiedenen Bausteinen.

CSS und HTML

Die Grundlage des responsive Designs ist die Kombination von HTML und CSS, zwei Sprachen, die den Inhalt und das Layout einer Seite in jedem beliebigen Webbrowser steuern.

HTML kontrolliert hauptsächlich die Struktur, die Elemente und den Inhalt einer Webseite. Um zum Beispiel ein Bild zu einer Webseite hinzuzufügen, musst du einen HTML-Code wie diesen verwenden:

<img src="image.gif" alt="image" class=”full-width-img”>

Du kannst eine „class“ oder „id“ setzen, auf die du später mit CSS-Code zielen kannst.

Du könntest auch primäre Attribute wie Höhe und Breite innerhalb deines HTML-Codes kontrollieren, aber dies wird nicht mehr als Best Practice angesehen.

Stattdessen wird CSS verwendet, um das Design und Layout der Elemente, die du auf einer Seite mit HTML einbindest, zu bearbeiten. CSS-Code kann in einem <style> Abschnitt eines HTML-Dokuments oder als separate Stylesheet-Datei eingefügt werden.

Wir könnten zum Beispiel die Breite aller HTML-Bilder auf der Elementebene so bearbeiten:

img {
width: 100%;
}

Oder wir könnten auf die spezifische Klasse „full-width-img“ abzielen, indem wir einen Punkt davor setzen.

.full-width-img {
width: 100%;
}

Du kannst das Design auch über die Höhe, Breite und Farbe hinaus kontrollieren. Wenn du CSS so verwendest, machst du ein Design responsiv, wenn du es mit einer Technik kombinierst, die man Medienabfrage nennt.

Medien-Abfragen

Eine Medienabfrage ist ein grundlegender Teil von CSS3, mit dem du Inhalte rendern kannst, um sie an verschiedene Faktoren wie Bildschirmgröße oder Auflösung anzupassen.

Es funktioniert ähnlich wie eine „Wenn-Klausel“ in einigen Programmiersprachen, im Grunde prüft es, ob das Ansichtsfenster eines Bildschirms breit genug oder zu breit ist, bevor es den entsprechenden Code ausführt.

@media screen and (min-width: 780px) {
.full-width-img {
margin: auto;
width: 90%;
}

Wenn der Bildschirm mindestens 780 Pixel breit ist, nehmen Bilder der Klasse „full-width-img“ 90% des Bildschirms ein und werden automatisch mit gleich breiten Rändern zentriert.

Fluid Layouts

Ein fluides Layout ist ein wesentlicher Teil des modernen responsive Designs. In den guten alten Zeiten legte man für jedes HTML-Element einen statischen Wert fest, etwa 600 Pixel.

Ein flüssiges Layout stützt sich stattdessen auf dynamische Werte, wie z.B. einen Prozentsatz der Ansichtsfensterbreite.

 

Dieser Ansatz vergrößert oder verkleinert dynamisch die verschiedenen Container-Elementgrößen, je nach Größe des Bildschirms.

Flexbox Layout

Während ein prozentbasiertes Layout fließend ist, hatten viele Designer und Webentwickler das Gefühl, es sei nicht dynamisch oder flexibel genug. Flexbox ist ein CSS-Modul, das entwickelt wurde, um mehrere Elemente effizienter zu layouten, selbst wenn die Größe des Inhalts innerhalb des Containers unbekannt ist.

Ein Flexcontainer dehnt Gegenstände aus, um den verfügbaren freien Platz zu füllen, oder verkleinert sie, um ein Überlaufen zu verhindern. Diese Flex-Container haben eine Reihe von einzigartigen Eigenschaften, wie z.B. Justify-Inhalt, die man mit einem normalen HTML-Element nicht bearbeiten kann.

Es ist ein kompliziertes Thema, wenn du es also in deinem Design verwenden möchtest, solltest du die CSS Tricks Flexbox-Anleitung lesen.

Responsive Bilder

Die grundlegendste Iteration von responsive Bildern folgt dem gleichen Konzept wie ein flüssiges Layout, wobei eine dynamische Einheit verwendet wird, um die Breite oder Höhe zu kontrollieren. Der Beispiel-CSS-Code, den wir vorhin behandelt haben, erfüllt dies bereits:

img {
width: 100%;
}

Die %-Einheit entspricht ungefähr einem einzelnen Prozentsatz der Breite oder Höhe des Ansichtsfensters und stellt sicher, dass das Bild proportional zum Bildschirm bleibt.

Das Problem bei diesem Ansatz ist, dass jeder Benutzer das Bild in voller Größe herunterladen muss, auch auf dem Handy.

Um verschiedene, für verschiedene Geräte skalierte Versionen anbieten zu können, muss das HTML-Attribut srcset in den img-Tags verwendet werden, um mehr als eine Bildgröße zur Auswahl zu haben.

<img srcset="large-img.jpg 1024w,
middle-img.jpg 640w,
small-img.jpg  320w"
src="small.jpg"
/>

WordPress verwendet diese Funktionalität automatisch für Bilder, die in Beiträgen oder Seiten enthalten sind.

Geschwindigkeit

Wenn du versuchst, ein responsive Design für deine Webseite zu erstellen, sollte die Ladegeschwindigkeit oberste Priorität haben.

Seiten, die in 2 Sekunden geladen werden, haben eine durchschnittliche Absprungrate von 9 %, während Seiten, die 5 Sekunden dauern, zu einer Absprungrate von 38 % führen.

Deine Herangehensweise an die Responsivität darf das erste Rendern deiner Seite nicht mehr als nötig blockieren oder verzögern.

Es gibt mehrere Möglichkeiten, wie du deine Seiten schneller machen kannst. Das Optimieren deiner Bilder, die Implementierung von Caching, Minifikation, die Verwendung eines effizienteren CSS-Layouts, die Vermeidung von Render-Blockierung von JS und die Verbesserung deines kritischen Rendering-Pfades sind alles großartige Ideen, die du in Betracht ziehen solltest.

Kinsta-Kunden können dies schnell und einfach erreichen, indem sie die Code-Minifizierungsfunktion nutzen, die direkt in das Dashboard von MyKinsta integriert ist. So können Kunden die automatische CSS- und JavaScript-Minifizierung mit einem einfachen Klick aktivieren.

Du könntest auch versuchen, Google AMP für deine mobilen Seiten zu implementieren, aber in unserer Google AMP-Fallstudie sind unsere mobilen Leads um satte 59 % zurückgegangen.

Häufig verwendete Responsive Breakpoints

Um mit Medienabfragen zu arbeiten, musst du dich für die „responsive breakpoints“ oder Bildschirmgrößen-Haltepunkte entscheiden. Ein Breakpoint ist die Breite des Bildschirms, an dem du eine Medienabfrage benutzt, um neue CSS-Stile zu implementieren.

Gängige Bildschirmgrößen

• Mobil: 360 x 640
• Mobil: 375 x 667
• Mobil: 360 x 720
• iPhone X: 375 x 812
• Pixel 2: 411 x 731
• Tablette: 768 x 1024
• Laptop: 1366 x 768
• Laptop oder Desktop mit hoher Auflösung: 1920 x 1080

Wenn du dich für einen Mobile-First-Ansatz für das Design entscheidest, mit einer einzigen Spalte und kleineren Schriftgrößen als Grundlage, brauchst du keine mobilen Haltepunkte einzufügen – es sei denn, du willst das Design für bestimmte Modelle optimieren.

So kannst du ein grundlegendes responsive Design mit nur zwei Haltepunkten erstellen, einen für Tablets und einen für Laptops und Desktop-Computer.

Bootstrap’s Responsive Breakpoints sind

Als eines der ersten und beliebtesten, responsiven Frameworks führte Bootstrap den Angriff auf statisches Webdesign an und half dabei, Mobile-First-Design als Industriestandard zu etablieren.

Das Ergebnis ist, dass viele Designer bis zum heutigen Tag immer noch den Bootstrap-Haltepunkten für die Bildschirmbreite folgen.

Sie verwenden Medienabfragen, um Telefone im Querformat (576px), Tablets (768px), Laptops (992px) und extra große Desktop-Bildschirme (1200px) anzusprechen.

Wie man seine Webseite responsiv macht

Jetzt, wo du mit den Bausteinen vertraut bist, ist es an der Zeit, deine Webseite responsive zu machen.

Setze deine Medienabfragebereiche (Responsive Breakpoints)

Stellt eure Medienabfragebereiche basierend auf den einzigartigen Bedürfnissen eures Designs ein. Wenn wir zum Beispiel die Bootstrap-Standards für unser Design befolgen wollten, würden wir die folgenden Medienabfragen verwenden:

• 576px für Porträt-Handys
• 768px für Tablets.
• 992px für Laptops
• 1200px für große Geräte

Layout-Elemente mit Prozentwerten vergrößern oder ein CSS-Rasterlayout erstellen

Der erste und wichtigste Schritt ist es, verschiedene Größen für verschiedene Layout-Elemente einzurichten, je nach Medienabfrage oder Bildschirmhaltepunkt.

Die Anzahl der Layout-Container, die du hast, hängt vom Design ab, aber die meisten Webseiten konzentrieren sich auf die unten aufgeführten Elemente:

• Wrapper oder Container
• Kopfzeile
• Inhalt
• Sidebar
• Fußzeile

Mit einem „mobile-first“-Ansatz kannst du die wichtigsten Layout-Elemente so stylen (ohne Medienabfrage für die Grundstile für Mobiltelefone):

#wrapper {width:95%;  margin: 0 auto; }

#header {width:100%; }

#content {width:100%; }

#sidebar {width:100%; }

#footer {width:100%; }

// Small devices (landscape phones, 576px and up)

@media (min-width: 576px) {

// Medium devices (tablets, 768px and up)

@media (min-width: 768px) {

#wrapper {width:90%;  margin: 0 auto; }

#content {width:70%; float:left; }

#sidebar {width:30%; float:right; }

// Large devices (desktops, 992px and up)

@media (min-width: 992px) { ... }

}

// Extra large devices (large desktops, 1200px and up)

@media (min-width: 1200px) {

#wrapper {width:90%;  margin: 0 auto; }

}

Bei einem prozentualen Ansatz steuert das „Float“-Attribut, auf welcher Seite des Bildschirms ein Element erscheint, links oder rechts.

Wenn ihr über die Grundlagen hinausgehen und ein topaktuelles, responsives Design erstellen wollt, müsst ihr euch mit dem CSS-Flexbox-Layout und seinen Attributen wie Box-Size und Flex vertraut machen.

Responsive Bilder implementieren

Eine Möglichkeit, um sicherzustellen, dass deine Bilder nicht kaputt gehen, ist einfach nur einen dynamischen Wert für alle Bilder zu verwenden, wie wir bereits weiter oben besprochen haben.

img {
width: 100%;
}

Aber das wird die Belastung für deine mobilen Besucher nicht verringern, wenn sie auf deine Webseite zugreifen.

 

Achte darauf, dass du immer ein srcset mit verschiedenen Größen deines Fotos beifügst, wenn du Bilder zu deinen Seiten hinzufügst.

 

Dies manuell zu tun kann ziemlich zeitaufwendig sein, aber mit einem CMS wie WordPress geschieht es automatisch, wenn du Mediendateien hochlädst.

Responsive Typografie für den Text deiner Webseite

Das Hauptaugenmerk des responsive Webdesigns liegt auf der Responsivität der Layoutblöcke, Elemente und Medien. Text wird oft als ein nachträglicher Einfall behandelt.

Aber für ein wirklich responsives Design solltest du auch die Schriftgrößen entsprechend der Bildschirmgröße anpassen.

Am einfachsten ist es, einen statischen Wert für die Schriftgröße festzulegen, z.B. 22 px, und es bei jeder Medienabfrage anzupassen.

Du kannst mehrere Textelemente gleichzeitig ansprechen, indem du jedes einzelne durch ein Komma trennst.

@media (min-width: 992px) {

body, p, a, h4 {

font-size: 14px;

}

}

Responsivität testen

Zuerst willst du testen, ob deine Webseite mit Googles Mobile-Friendly-Test mobil-freundlich ist. Gib einfach die URL deiner Webseite ein und klicke auf die Schaltfläche „URL testen“, um die Ergebnisse zu erhalten.

Mach dir keine Sorgen, wenn es eine Weile dauert, deine Webseite zu laden. Das spiegelt nicht die Ladegeschwindigkeit deiner Seite wider.

Wenn du die in diesem Artikel beschriebenen Schritte befolgt hast, sollte es heißen, dass du eine handyfreundliche Webseite hast.

Dann solltest du deine Webseite auf verschiedenen Bildschirmgrößen mit einem Tool wie den Chrome-Entwickler-Tools testen.

Drücke STRG + Umschalt + I auf Windows-Computern oder Befehl + Option + I auf Macs, um die entsprechende Geräteansicht zu öffnen. Von hier aus kannst du das mobile Gerät oder Tablet deiner Wahl auswählen, um die Responsivität deines Designs zu testen.

Es gibt ein paar Fragen, die du beantworten müsstest, wenn du durch diesen Prozess gehst.

• Stellt sich das Layout auf die richtige Anzahl an Spalten ein?
• Passt der Inhalt gut in die Layout-Elemente und Container auf den verschiedenen Bildschirmen?
• Passen die Schriftgrößen auf jeden Bildschirm?

CSS-Einheiten und Werte für Responsive Design

CSS hat sowohl absolute als auch relative Maßeinheiten. Ein Beispiel für eine absolute Längeneinheit ist ein cm oder ein px. Relative Einheiten oder dynamische Werte hängen von der Größe und Auflösung des Bildschirms oder den Schriftgrößen des Wurzelelements ab.

PX vs EM vs REM vs Viewport Einheiten für responsive Design

• PX – ein einzelner Pixel
• EM – relative Einheit basierend auf der Schriftgröße des Elements.
• REM – relative Einheit, die auf der Schriftgröße des Elements basiert.
• VH, VW – % der Höhe oder Breite des Ansichtsfensters.
• % – der Prozentsatz des Elternelements.

Ein neuer Webdesigner oder -entwickler sollte sich wahrscheinlich an Pixel für Text halten, weil sie die einfachste Längeneinheit in CSS sind.

 

Aber wenn es darum geht, die Breite und maximale Breite von Bildern und anderen Elementen festzulegen, ist die Verwendung von % die beste Lösung. Dieser Ansatz stellt sicher, dass sich die Komponenten an die Bildschirmgröße jedes Geräts anpassen.

Responsive Design Beispiele

Im Folgenden werden wir ein paar Beispiele für responsives Webdesign aus verschiedenen Branchen behandeln – und daraus lernen, was sie richtig und falsch machen.

1. Online-Zeitung: New York Times

Auf dem Desktop erinnert das NYT-Layout an eine traditionelle Zeitung, voller Bilder und verschiedener Zeilen und Spalten mit Inhalten. Es scheint für jede Kategorie von Nachrichten eine eigene Spalte oder Zeile zu geben.

 

Auf dem Handy entspricht es dem einspaltigen Standard und passt auch das Menü an das Akkordeonformat an, um einfacher zu bedienen zu sein.

2. Blog: The Art of Non-Conformity

 

Der Blog von Chris Guillebeau „The Art of Non-Conformity“ ist seit über einem Jahrzehnt in vollem Gange. Auch wenn das Design nicht gerade auf dem neuesten Stand ist, so ist es doch responsive und passt die zweispaltige Sidebar und das Layout des Hauptinhalts an ein einspaltiges Design auf mobilen Geräten an.

3. Ecommerce: Amazon

Amazon ist nicht umsonst weltweit führend im E-Commerce, ihre Benutzeroberfläche ist auf allen Geräten perfekt und übersichtlich.

Ihr Tablet-Layout entfernt einfach einen Teil der weißen Fläche und fügt einen scrollbaren Abschnitt mit Icons hinzu, um mehr Inhalt in ein kleineres Paket zu packen.

Ihr Handy-Layout bringt es in eine einzige Spalte, wobei es sich auf das Wesentliche konzentriert, wie z.B. die jüngste Kaufhistorie, und nicht auf die verschiedenen Sektions-Link-Icons von ihrer Haupthomepage.

4. Video Webseite: YouTube

Der Kern des YouTube-Homepage-Designs ist ein flexibles Raster von Videos, die für jeden Nutzer relevant sind. Auf Tablets sinkt die Anzahl der Spalten in jeder Zeile auf drei. Auf dem Handy ist es auf ein einspaltiges Design reduziert.

Die mobile Version verschiebt auch das Hauptmenü an den unteren Rand des Bildschirms, näher an die Daumen der Smartphone-Benutzer. Diese einfache Bewegung verbessert die Navigation und UX.

5. Online-Magazin: Wired

Wired’s Ansatz für responsive Webdesign konzentriert sich darauf, ein einspaltiges Layout auf allen kleineren Bildschirmen zu implementieren, beginnend mit Tablets.

Es ist ein einfaches Layout, aber es macht es einfacher, die Aufmerksamkeit der Benutzer auf die Top Stories zu lenken und ihren CTA zu abonnieren.

Zusammenfassung

Es gibt eine Menge verschiedener Elemente, die in das responsive Webdesign einfließen. Ohne ein grundlegendes Verständnis von HTML und CSS kann es leicht sein, Fehler zu machen.

Aber indem du dich mit den verschiedenen Bausteinen vertraut machst, die Beispiele mit Webdeveloprogrammen analysierst und den Beispielcode testest, solltest du in der Lage sein, deine Webseite ohne größere Probleme responsive zu machen.

Wenn das zu viel verlangt ist, kannst du entweder einen WordPress-Entwickler einstellen oder einfach sicherstellen, dass dein Theme bereits responsive ist.