{"id":38770,"date":"2020-10-01T03:09:08","date_gmt":"2020-10-01T10:09:08","guid":{"rendered":"https:\/\/kinqsta.com\/?p=78861&preview=true&preview_id=78861"},"modified":"2023-08-25T09:17:30","modified_gmt":"2023-08-25T08:17:30","slug":"responsiven-webdesign","status":"publish","type":"post","link":"https:\/\/kinqsta.com\/de\/blog\/responsiven-webdesign\/","title":{"rendered":"Der Leitfaden f\u00fcr Anf\u00e4nger zum responsiven Webdesign (Code-Beispiele & Layout-Beispiele)"},"content":{"rendered":"

Mit einem Internet, auf das zunehmend \u00fcber mobile Ger\u00e4te zugegriffen wird, reicht es nicht mehr aus, eine statische Webseite<\/a> zu entwerfen, die nur auf einem Computerbildschirm gut aussieht.<\/p>\n

Ganz zu schweigen davon, dass du auch Tablets, 2-in-1-Laptops und verschiedene Smartphone-Modelle mit unterschiedlichen Bildschirmabmessungen ber\u00fccksichtigen musst, wenn du ein Design entwirfst.<\/p>\n

Deinen Inhalt<\/a> in eine einzige Spalte zu packen und es aufzugeben, wird es also nicht bringen.<\/p>\n

Mit einem responsiven Webdesign<\/a> kannst du daf\u00fcr sorgen, dass deine Webseite auf Handys, Tablets, Laptops und Desktop-Bildschirmen gut aussieht.<\/p>\n

Und diese Verbesserung der Nutzererfahrung bedeutet h\u00f6here Conversions und Wachstum.<\/p>\n

In diesem Leitfaden findest du alles, was du \u00fcber responsives Webdesign wissen musst, einschlie\u00dflich Definitionen, einer Schritt-f\u00fcr-Schritt-Anleitung, Beispielen und mehr.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Schau dir unseren Video-Leitfaden zum Responsive Webdesign an:<\/h3>\n<\/kinsta-video>\n

Was ist responsives Webdesign?<\/h2>\n

Responsive Design ist eine Herangehensweise an das Webdesign, bei der sich deine Webinhalte an die verschiedenen Bildschirm- und Fenstergr\u00f6\u00dfen einer Vielzahl von Ger\u00e4ten anpassen.<\/p>\n

Zum Beispiel k\u00f6nnten deine Inhalte auf Desktop-Bildschirmen in verschiedene Spalten aufgeteilt sein, weil sie breit genug sind, um sich diesem Design anzupassen.<\/p>\n

Wenn du deine Inhalte auf einem mobilen Ger\u00e4t in mehrere Spalten aufteilst, wird es f\u00fcr die Nutzer schwierig sein, sie zu lesen und mit ihnen zu interagieren.<\/p>\n

Responsive Design<\/a> macht es m\u00f6glich, mehrere, separate Layouts deiner Inhalte und deines Designs je nach Bildschirmgr\u00f6\u00dfe auf verschiedene Ger\u00e4te zu \u00fcbertragen.<\/p>\n\n

Responsives Webdesign vs. Adaptives Design<\/h2>\n

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\u00f6llig unterschiedliche Versionen derselben Seite.<\/p>\n

\"responsive
Responsive vs adaptive design<\/figcaption><\/figure>\n

Beides sind entscheidende Webdesign-Trends<\/a>, die den Webmachern helfen, das Aussehen ihrer Webseite auf verschiedenen Bildschirmen zu kontrollieren, aber der Ansatz ist unterschiedlich.<\/p>\n

Bei responsivem Design greifen die Nutzer \u00fcber ihren Browser auf die gleiche Basisdatei zu, unabh\u00e4ngig vom Ger\u00e4t, aber der CSS-Code<\/a> steuert das Layout und rendert es je nach Bildschirmgr\u00f6\u00dfe unterschiedlich. Beim adaptiven Design gibt es ein Skript, das die Bildschirmgr\u00f6\u00dfe \u00fcberpr\u00fcft und dann auf das f\u00fcr dieses Ger\u00e4t entworfene Template zugreift.<\/p>\n

Warum Responsive Design wichtig ist<\/h2>\n

Wenn du neu im Webdesign, in der Entwicklung<\/a> oder im Bloggen<\/a> bist, fragst du dich vielleicht, warum responsive Design \u00fcberhaupt eine Rolle spielt.<\/p>\n

Die Antwort ist einfach. Es reicht nicht mehr aus, f\u00fcr ein einziges Ger\u00e4t zu entwerfen. Der mobile Web-Traffic hat den Desktop \u00fcberholt und macht nun den Gro\u00dfteil des Website-Traffics<\/a> aus, der mehr als 51%<\/a> ausmacht.<\/p>\n

\"Handy,
Handy, Tablet, Desktop Marktanteil<\/figcaption><\/figure>\n

Wenn mehr als die H\u00e4lfte deiner potentiellen Besucher mit einem mobilen Ger\u00e4t im Internet surfen, kannst du ihnen nicht einfach eine f\u00fcr den Desktop konzipierte Seite anbieten. Es w\u00e4re schwer zu lesen und zu benutzen und w\u00fcrde zu einer schlechten Benutzererfahrung f\u00fchren.<\/p>\n

\u00a0<\/p>\n

Aber das ist noch nicht alles. Benutzer auf mobilen Ger\u00e4ten machen auch die Mehrheit der Suchmaschinenbesuche<\/a> aus.<\/p>\n

\"Mobile
Mobile Suche Traffic<\/figcaption><\/figure>\n

Schlie\u00dflich ist das Handy in den letzten Jahren zu einem der wichtigsten Werbekan\u00e4le geworden. Sogar in einem Markt nach einer Pandemie wachsen die Ausgaben<\/a> f\u00fcr mobile Werbung um 4,8% auf 91,52 Milliarden Dollar.<\/p>\n

Egal, ob du dich daf\u00fcr entscheidest, in sozialen Medien zu werben<\/a> oder einen organischen Ansatz wie YouTube SEO<\/a> verwendest, der Gro\u00dfteil deines Traffics wird von mobilen Nutzern kommen.<\/p>\n

Wenn deine Landingpages<\/a> nicht f\u00fcr das Handy optimiert und einfach zu bedienen sind, kannst du den ROI deiner Marketingbem\u00fchungen nicht maximieren. Schlechte Konversionsraten<\/a> werden zu weniger Leads und verschwendeten Werbeausgaben f\u00fchren.<\/p>\n

Sind WordPress Seiten responsive?<\/h2>\n

Ob WordPress Seiten responsive sind oder nicht, h\u00e4ngt von dem Theme deiner Webseite ab. Ein WordPress Theme<\/a> ist das \u00c4quivalent zu einem Template f\u00fcr eine statische Webseite und kontrolliert das Design und Layout deines Inhalts.<\/p>\n

Wenn du ein standardm\u00e4\u00dfiges WordPress-Theme wie Twenty Twenty<\/a> verwendest, ist das Design responsive, aber da es ein einspaltiges Design ist, merkst du es vielleicht nicht, wenn du es auf verschiedenen Bildschirmen betrachtest.<\/p>\n

Wenn du ein anderes WordPress Theme verwendest, kannst du testen, ob es responsiv ist oder nicht, indem du vergleichst, wie es auf verschiedenen Ger\u00e4ten aussieht oder indem du Chrome Developer Tools verwendest.<\/p>\n

Die Bausteine des responsiven Webdesigns<\/h2>\n

In diesem Abschnitt befassen wir uns mit den Grundlagen des Designs von responsiven Webseiten und seinen verschiedenen Bausteinen.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

CSS und HTML<\/h3>\n

Die Grundlage des responsive Designs ist die Kombination von HTML und CSS<\/a>, zwei Sprachen, die den Inhalt und das Layout einer Seite in jedem beliebigen Webbrowser steuern.<\/p>\n

\"html
HTML vs CSS (Bildquelle: codingdojo.com)<\/figcaption><\/figure>\n

HTML kontrolliert haupts\u00e4chlich die Struktur, die Elemente und den Inhalt einer Webseite. Um zum Beispiel ein Bild zu einer Webseite<\/a> hinzuzuf\u00fcgen, musst du einen HTML-Code wie diesen verwenden:<\/p>\n

<img src=\"image.gif\" alt=\"image\" class=\u201dfull-width-img\u201d><\/code><\/pre>\n
Du kannst eine „class“ oder „id“ setzen, auf die du sp\u00e4ter mit CSS-Code<\/a> zielen kannst.<\/p>\n
Du k\u00f6nntest auch prim\u00e4re Attribute wie H\u00f6he und Breite innerhalb deines HTML-Codes kontrollieren, aber dies wird nicht mehr als Best Practice angesehen.<\/p>\n
Stattdessen wird CSS<\/a> verwendet, um das Design und Layout der Elemente, die du auf einer Seite mit HTML einbindest, zu bearbeiten. CSS-Code kann in einem <style><\/code> Abschnitt eines HTML-Dokuments oder als separate Stylesheet-Datei<\/a> eingef\u00fcgt werden.<\/p>\n
Wir k\u00f6nnten zum Beispiel die Breite aller HTML-Bilder auf der Elementebene so bearbeiten:<\/p>\n
img {\nwidth: 100%;\n}<\/code><\/pre>\n
Oder wir k\u00f6nnten auf die spezifische Klasse „full-width-img“ abzielen, indem wir einen Punkt davor setzen.<\/p>\n
.full-width-img {\nwidth: 100%;\n}<\/code><\/pre>\n
Du kannst das Design auch \u00fcber die H\u00f6he, Breite und Farbe<\/a> hinaus kontrollieren. Wenn du CSS so verwendest, machst du ein Design responsiv, wenn du es mit einer Technik kombinierst, die man Medienabfrage nennt.<\/p>\n
Medien-Abfragen<\/h3>\n
Eine Medienabfrage<\/a> ist ein grundlegender Teil von CSS3, mit dem du Inhalte rendern kannst, um sie an verschiedene Faktoren wie Bildschirmgr\u00f6\u00dfe oder Aufl\u00f6sung anzupassen.<\/p>\n
\"Medienabfragen
Medienabfragen f\u00fcr Desktop, Tablet, Smartphone<\/figcaption><\/figure>\n
Es funktioniert \u00e4hnlich wie eine „Wenn-Klausel“ in einigen Programmiersprachen<\/a>, im Grunde pr\u00fcft es, ob das Ansichtsfenster eines Bildschirms breit genug oder zu breit ist, bevor es den entsprechenden Code ausf\u00fchrt.<\/p>\n
@media screen and (min-width: 780px) {\n.full-width-img {\nmargin: auto;\nwidth: 90%;\n}<\/code><\/pre>\n
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\u00e4ndern zentriert.<\/p>\n
Fluid Layouts<\/h3>\n
Ein fluides Layout ist ein wesentlicher Teil des modernen responsive Designs. In den guten alten Zeiten legte man f\u00fcr jedes HTML-Element einen statischen Wert fest, etwa 600 Pixel.<\/p>\n
Ein fl\u00fcssiges Layout st\u00fctzt sich stattdessen auf dynamische Werte, wie z.B. einen Prozentsatz der Ansichtsfensterbreite.<\/p>\n
\"Beispiel
Beispiel eines fluiden Layouts<\/figcaption><\/figure>\n
\u00a0<\/p>\n
Dieser Ansatz vergr\u00f6\u00dfert oder verkleinert dynamisch die verschiedenen Container-Elementgr\u00f6\u00dfen, je nach Gr\u00f6\u00dfe des Bildschirms.<\/p>\n
Flexbox Layout<\/h3>\n
W\u00e4hrend ein prozentbasiertes Layout flie\u00dfend ist, hatten viele Designer und Webentwickler das Gef\u00fchl, 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\u00f6\u00dfe des Inhalts innerhalb des Containers unbekannt ist.<\/p>\n
Ein Flexcontainer dehnt Gegenst\u00e4nde aus, um den verf\u00fcgbaren freien Platz zu f\u00fcllen, oder verkleinert sie, um ein \u00dcberlaufen 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.<\/p>\n
\"flexbox
Flexbox container<\/figcaption><\/figure>\n
Es ist ein kompliziertes Thema, wenn du es also in deinem Design verwenden m\u00f6chtest, solltest du die CSS Tricks Flexbox-Anleitung lesen<\/a>.<\/p>\n
Responsive Bilder<\/h3>\n
Die grundlegendste Iteration von responsive Bildern folgt dem gleichen Konzept wie ein fl\u00fcssiges Layout, wobei eine dynamische Einheit verwendet wird, um die Breite oder H\u00f6he zu kontrollieren. Der Beispiel-CSS-Code, den wir vorhin behandelt haben, erf\u00fcllt dies bereits:<\/p>\n
img {\nwidth: 100%;\n}<\/code><\/pre>\n
Die %-Einheit entspricht ungef\u00e4hr einem einzelnen Prozentsatz der Breite oder H\u00f6he des Ansichtsfensters und stellt sicher, dass das Bild proportional zum Bildschirm bleibt.<\/p>\n
Das Problem bei diesem Ansatz ist, dass jeder Benutzer das Bild in voller Gr\u00f6\u00dfe herunterladen muss, auch auf dem Handy.<\/p>\n
Um verschiedene, f\u00fcr verschiedene Ger\u00e4te skalierte Versionen anbieten zu k\u00f6nnen, muss das HTML-Attribut srcset<\/code> in den img-Tags verwendet werden, um mehr als eine Bildgr\u00f6\u00dfe zur Auswahl zu haben.<\/p>\n
<img srcset=\"large-img.jpg 1024w,\nmiddle-img.jpg 640w,\nsmall-img.jpg \u00a0320w\"\nsrc=\"small.jpg\"\n\/><\/code><\/pre>\n
WordPress verwendet diese Funktionalit\u00e4t automatisch f\u00fcr Bilder, die in Beitr\u00e4gen oder Seiten enthalten sind.<\/p>\n
Geschwindigkeit<\/h3>\n
Wenn du versuchst, ein responsive Design f\u00fcr deine Webseite zu erstellen, sollte die Ladegeschwindigkeit oberste Priorit\u00e4t<\/a> haben.<\/p>\n
Seiten, die in 2 Sekunden geladen werden, haben eine durchschnittliche Absprungrate von 9 %<\/a>, w\u00e4hrend Seiten, die 5 Sekunden dauern, zu einer Absprungrate von 38 % f\u00fchren.<\/p>\n
Deine Herangehensweise an die Responsivit\u00e4t darf das erste Rendern deiner Seite nicht mehr als n\u00f6tig blockieren oder verz\u00f6gern.<\/p>\n
Es gibt mehrere M\u00f6glichkeiten, wie du deine Seiten schneller machen kannst. Das Optimieren deiner Bilder<\/a>, die Implementierung von Caching<\/a>, Minifikation, die Verwendung eines effizienteren CSS-Layouts, die Vermeidung von Render-Blockierung von JS<\/a> und die Verbesserung deines kritischen Rendering-Pfades<\/a> sind alles gro\u00dfartige Ideen, die du in Betracht ziehen solltest.<\/p>\n
Kinsta-Kunden<\/a> k\u00f6nnen dies schnell und einfach erreichen, indem sie die Code-Minifizierungsfunktion<\/a> nutzen, die direkt in das Dashboard von MyKinsta<\/a> integriert ist. So k\u00f6nnen Kunden die automatische CSS- und JavaScript-Minifizierung mit einem einfachen Klick aktivieren.<\/p>\n
Du k\u00f6nntest auch versuchen, Google AMP f\u00fcr deine mobilen Seiten zu implementieren, aber in unserer Google AMP-Fallstudie<\/a> sind unsere mobilen Leads um satte 59 % zur\u00fcckgegangen.<\/p>\n
H\u00e4ufig verwendete Responsive Breakpoints<\/h2>\n
Um mit Medienabfragen zu arbeiten, musst du dich f\u00fcr die „responsive breakpoints“ oder Bildschirmgr\u00f6\u00dfen-Haltepunkte entscheiden. Ein Breakpoint ist die Breite des Bildschirms, an dem du eine Medienabfrage benutzt, um neue CSS-Stile zu implementieren.<\/p>\n
G\u00e4ngige Bildschirmgr\u00f6\u00dfen<\/h3>\n