Responsive Webdesign: Der ultimative Guide
Verica Rosic, 23. August 2022· Präsentationsdesign
Wir begegnen Responsive Webdesign tagtäglich unzählige Male, ohne es zu merken. Die eigene Website, der Email-Client für die Arbeit und die News-App auf dem Smartphone sind nur einige Beispiele. Wie man eine Responsive Website erstellt und was du dabei beachten solltest, das sind Fragen, auf die wir als Webdesignagentur in diesem Blogbeitrag eingehen wollen.
Inhalt
Was versteht man unter Responsive Webdesign?
Responsive Webdesign ist eine Technik, um eine Website, eine App oder andere Software auf allen Endgeräten ansprechend aussehen zu lassen. Die verschiedenen Bildschirmgrössen werden mit Responsive Webdesign miteinbezogen und ein einheitliches Auftreten für alle Nutzerinnen und Nutzer gesichert, damit deine Marke immer und überall wiedererkannt wird.
Im Gegensatz zum Adaptive Webdesign reagiert Responsive Webdesign auf Veränderungen, was mehr Komplexität aber auch Abdeckung mit sich bringt. Genaueres zum Unterschied zwischen Adaptive und Responsive Webdesign gehen wir später ein.
Warum ist Responsive Design wichtig?
Smartphones, Tablets, Laptops, Desktop-Bildschirme, Hoch- und Querformat es gibt unzählige Dimensionen von Endgeräten, die deine Website oder App bedienen muss, damit du den optimalen Erfolg erzielen kannst. Responsive Design ist der Schlüssel, damit dein Design in allen Dimensionen funktioniert und überzeugt.
Die User sind aber nur ein Aspekt, denn eine Website oder App, die mit responsive Design gestaltet wurde, wird auch im Bereich SEO belohnt. Die Suchmaschinen-Crawler sollen sich wie Menschen verhalten und wenn ein Design bricht, also alles verschoben und überlappend wird, dann haben wir also auch der Crawler Mühe beim Verstehen, um was es geht.
Optimierung für den mobilen Einsatz
Etwa 60 Prozent der Internetbesucher und -Besucherinnen nutzen ein Smartphone. Das bedeutet, dass du mehr als die Hälfte deiner potentiellen Kundinnen und Kunden nicht ansprichst, wenn du auf ein responsive Design verzichtest.
Achte also darauf, dass deine Website für Smartphones optimiert ist und die Besucherinnen und Besucher ungehindert mit deiner Website interagieren können.
Nutzen von Responsive Design
Der Nutzen von Responsive Webdesign liegt klar im Usererlebnis deiner Website. Du willst allen Usern dasselbe Erlebnis bieten, um maximalen Erfolg zu erzielen. Dafür brauchst du eine Website, die genau das bietet – und dazu brauchst du responsive Design. Responsive Webdesign ist ein Trend, der nicht mehr verfliegen wird und daher sollte er auch nicht ignoriert werden.
Wann gilt eine Website als responsive?
Wir sprechen von einer responsive Website, sobald sich die einzelnen Elemente der Website oder die Struktur im Allgemeinen mit der Bildschirmgrösse verändern. Ein Bild, das zuerst neben dem Text und dann darüber erscheint oder auch eine zusammenklappbare Navigationsleiste gehören zu den klassischen Beispielen.
Wie erstellt man eine responsive Website?
Bei der Frage nach Responsive Webdesign und wie man es korrekt in der eigenen Website einbaut, hängt stark damit zusammen, wie die Website aufgesetzt ist. Arbeitest du mit einem CMS, einem Website-Tool wie WordPress oder Wix oder hast du deine Website ganz selbst gecodet? Je nach Tool oder Technik ist eine responsive Website näher oder ferner.
Arbeitest du mit einem Tool wie WordPress oder Wix, dann machst du dir das Leben leicht. Diese Website-Baukasten haben eingebaute Funktionen, die deine Website auf allen Bildschirmen gut aussehen lassen. Du musst selbst noch definieren, wie es genau aussehen soll, aber den technischen Aspekt kannst du voll und ganz abschieben. Willst du nicht bei jeder Bild-Text-Kombination die Reihenfolge für kleine Bildschirme wie die von Smartphones festlegen, dann kannst du mit Vorlagen arbeiten. Die Vorlagen geben dir Strukturen für alle Endgeräte vor, damit du dich nur noch um das Design kümmern musst.
Legst du selbst Hand an, dann wird deine responsive Website mehr Arbeit abverlangen. Der erste Tipp ist, immer mit einem Mobile First Approach zu arbeiten. Kreiere deine Website also zuerst einmal für Smartphone-Nutzerinnen und -Nutzer. Sobald du das hast, startest du mit der Optimierung für grössere Bildschirme. Hast du dich für diese Variante entschieden, dann wird das CSS Framework dein ständiger Begleiter sein, denn damit kannst du alles zum Thema Responsive Webdesign abdecken. Trotzdem gibt es noch ein paar allgemeine Fehlerquellen, die du beachten solltest:
Nutze kein Flash
Der Flash Player wurde Ende 2020 von den bekannten Browsern abgestellt, da Adobe, wie angekündigt, den Support für den Flash Player einstellte. Achte dich also, dass du mit der Zeit gehst und keine veralteten Systeme einbaust.
Festgelegte Breiten
Für Bilder oder andere grafische Elemente musst du ein Auge fürs Detail beweisen. Soll eine Grafik 90 oder 85 Prozent der Bildschirmbreite ausmachen? Ab wann ist es nicht mehr leserlich? Hast du das im Griff, dann werden es dir deine Nutzerinnen und Nutzer danken. Was du aber mit Sicherheit auslassen musst, das sind festgelegte Breiten. Sagst du, dass ein Bild genau 500 Pixel breit sein soll, dann wird das der Browser auch genau so machen. Für Smartphones ist eine breite zwischen 360 und 414 Pixeln üblich. Vielleicht merkst du schon, wo das Problem entsteht: Der genutzte Browser zeigt jetzt ein 500 Pixel breites Bild auf einem 414 Pixel breiten Smartphone an, was dazu führt, dass ein Teil des Bildes nicht zu sehen ist.
Die Grössenunterschiede bedienen
Codest du deine Website selbst, dann kannst du mit verschiedenen Techniken alle Bildschirmgrössen bedienen und so deinen Auftritt sichern. Es ist wichtig, dass deine Website für alle Nutzerinnen und Nutzer dieselbe Funktionalität und Übersicht bietet, um nicht potentielle Kundinnen und Kunden zu verlieren.
Die erste Technik befasst sich mit der Grösse von Objekten. Hier sprechen wir nicht nur von Bildern und Grafiken, sondern auch von Containern für Texte oder Überschriften. Alles muss klar definiert sein und diese Definition sollte im Rahmen von Responsive Webdesign auch geschickt gewählt werden. So sollte die Grösse der Bildschirmbreite und -Höhe angepasst werden, also sich dynamisch mitvergrössern oder -verkleinern.
Ein weitere Technik betrifft den Einsatz von Tabellen. Wir meinen hier keine Excel-Tabelle, sondern eine Tabellen-Struktur für deine Website. Du teilst also deine gesamte Seite in Zellen ein, damit du schlussendlich eine übersichtliche Seite hast. Einmal in Zellen aufgeteilt passiert die Anpassung an verschiedene Bildschirmgrössen schon fast automatisch. Mit der Zeit haben sich Frameworks wie “flexbox” und “grid” als besonders effektiv und intuitiv herausgestellt.
Die mit Abstand wichtigste Technik ist das Testen deiner responsiven Websites. Nutze dafür verschiedene Geräte mit unterschiedlichen Bildschirmgrössen, um maximale Abdeckung zu erreichen. Dein Ziel ist es, die Fehler und Probleme, die nach dem Live schalten meist auftreten, zu minimieren.
Fluid Images zum Einsatz bringen
Fluid Images sind eine sehr nützliche Entdeckung, die das Leben einiger Entwicklerinnen und Entwickler vereinfacht hat. Mit einem Fluid Image bezeichnen wir dynamische Bilder. Wie schon vorher besprochen, sollten die Zellen, aus denen deine Website besteht, sich der Bildschirmgrösse des Endgerätes anpassen. In der heutigen Zeit kann das aber auch bedeuten, dass deine Website auf einem ultra-wide Monitor mit 3840 Pixeln breite aufgerufen wird. Das bringt einige Designs an ihre Grenzen, weil sie nicht für eine solche Breite ausgelegt wurden. Der Trick hier ist es, entweder ein Design zu wählen, dass mit diesen Breiten fertig wird oder aber eine maximale Breite festzulegen, die nicht überschritten werden kann. Dann würde nicht der ganze ultra-wide Monitor genutzt werden, aber dafür bleibt alles übersichtlich.
Zurück zu den dynamischen Bildern: Dieses setzen von maximalen oder auch minimalen Breiten oder Höhen wird bei Bildern und Grafiken häufig eingesetzt. Damit kannst du verhindern, dass ein Bild zu gross wird, wenn die Qualität an ihr Limit kommt, oder du kannst verhindern, dass eine Grafik zu klein wird und der Inhalt nicht mehr lesbar oder erkennbar wird.
Media Queries nutzen
Auch wenn jedes Jahr neue Smartphones mit neuen Grössen erscheinen, so gibt es doch eine klare Aufteilung der Bildschirmgrössen. Hierbei sprechen wir immer von der Breite, da diese entscheidend für das Design ist. Die Höhe ist auch relevant, aber sie ist eben mittels scrollen und swipen unbegrenzt vergrösserbar:
360 bis 480 Pixel: Smartphones
481 bis 768 Pixel: Tablets
769 bis 1024 Pixel: Kleine Laptop-Bildschirme
1025 bis 1600 Pixel: Desktop Bildschirme
1601 und mehr Pixel: Ultra-wide Monitore, HD Monitore und Smart-TVs
Diese Aufteilung ist für Entwicklerinnen und Entwickler hilfreich, denn damit können sie sogenannte Breakpoints definieren und ihr responsives Design für diese Anpassen. Ein Breakpoint ist eine bestimmte Bildschirmgrösse, bei der die Website einen Strukturwandel durchmachen muss. Zum Beispiel gibt es einen allgemein genutzten Breakpoint bei 480 Pixel. Das heisst, dass die Website für eine Breite von unter 480 Pixeln anders aussieht als für eine Breite von mehr als 480 Pixel. Mit diesen Breakpoints kannst du sicherstellen, dass du alle gängigen Bildschirmgrössen abdecken kannst.
Adaptive und responsive Design
Im Kontext von Responsive Webdesign kommt auch manchmal der Begriff Adaptive Webdesign vor. Wir wollen uns jetzt anschauen, wo der Unterschied liegt.
Wie wir schon besprochen haben, reagiert responsive Design auf Veränderungen. Das stellen wir sicher, indem wir bei der Erstellung der Website, genauer bei den Grössen unserer Objekte, mit den Bildschirmgrössen des Endgerätes zusammenarbeiten. So passt sich unsere Website kontinuierlich an und mit den Breakpoints ändern wir die Struktur, um die unterschiedlichen Geräte zu bedienen.
Jetzt zum adaptive Design. Adaptive Webdesign reagiert nicht, sondern passt sich an. Das bedeutet, dass wir mit einem adaptive Design keine kontinuierliche Veränderungen anstreben, sondern einige spezifische Grössen auswählen und unsere Website für diese Grössen optimieren. Dieses Optimieren funktioniert so, dass wir für jede Grösse eine eigene Version unserer Website gestalten und kommt ein Nutzer oder eine Nutzerin auf unsere Website, wird die Version geladen, die der Bildschirmgrösse des genutzten Endgerätes entspricht. Klassisch wird im Adaptive Webdesign mit drei Varianten gearbeitet: Mobile, Tablet und Desktop. Mit diesen wird die grosse Mehrheit der Endgeräte abgedeckt und als Entwicklerin oder Entwickler kannst du drei statische, festgelegte Versionen erstellen, anstelle von einer Version, die für jede Veränderung neu getestet werden muss.
Adaptive Webdesign war vor allem in den jungen Jahren des Internets und dem Beginn von Smartphones der absolute Favorit. Aber mit der Zeit und neuen Technologien kam die Möglichkeit des Responsive Webdesigns auf. Schnell wurde Adaptive Webdesign überholt und heute findet man dieses nur noch extrem selten. Das Problem mit Adaptive Webdesign ist, dass mit immer neuen Geräten und Bildschirmgrössen musst du auch immer deine Versionen anpassen, denn ein kleines Tablet bekommt vielleicht die Smartphone-Version deiner Website oder ein grosses Smartphone landet auf der Tablet-Version. In beiden Fällen wird das Erlebnis gestört und die potentielle Kundschaft geht verloren. Responsive Webdesign bringt viel mehr Komplexität mit sich, aber mittlerweile unterstützen uns die Frameworks und anderweitigen Tools ohne Ende, sodass die Komplexität wieder wegfällt.
Musst du dich beim Erstellen deiner Website entscheiden, dann tendieren wir immer zu responsivem Design.
Beispiele für responsive Design
Responsive Webdesign ist überall zu finden. Auch diese Seite hier, auf der du den Blog-Eintrag liest, reagiert auf die Bildschirmgrösse. Wenn du am Computer sitzt, dann kannst du das Browserfenster schmaler und breiter machen und schauen, was passiert.
Allgemein kannst und solltest du, sofern du am Computer bist, die Websites, die du besuchst, mal untersuchen. Mach das Fenster breiter und schmaler oder tiefer und höher und finde heraus, was sich verändert.
Der absolute Klassiker für Responsive Webdesign ist das Burger-Menu. Auf jeder guten Website gibt es oben eine Navigationsleiste, mit der wir auf der Website navigieren können. Unter Umständen können in dieser Navigationsleiste viele Unterseiten, Kategorien oder Themen aufgelistet sein. Kommt jemand mit einer kleinen Bildschirmgrösse, dann müsste diese Leiste vielleicht 4 oder fünf Zeilen hoch sein, was der Übersicht nicht gut tut, denn wir wollen den Inhalt der Website sehen und doch immer die Möglichkeit haben, auf eine andere Seite zu navigieren. Hier kommt das Burger-Menu ins Spiel. Auf kleinen Bildschirmen wir die Navigationsleiste nämlich zusammengeklappt und wir sehen nur noch einen Balken mit einem Symbol mit drei waagrechten Strichen übereinander. Tippen wir auf dieses Symbol, dann öffnet sich die Navigationsleiste und wir sehen wieder alles. Bist du mit dem Smartphone auf dieser Seite, dann siehst du das Burger-Menu schon. Bist du am Computer, dann mach das Browserfenster schmaler, um das Burger-Menu erscheinen zu lassen. Wieso Burger-Menu? Die drei waagerechten Striche übereinander erinnern an den simpelsten Burger: Brötchen-Burger-Brötchen.
Responsive Design – Zusammenfassung
Responsive Webdesign wird bleiben, solange es unterschiedliche und neue Bildschirmgrössen gibt. Das heisst, dass es in der nahen Zukunft nicht weg zu denken ist. Was sich aber ändern kann, ist der Zugang. Neue Tools und Frameworks arbeiten ständig daran, uns Arbeit abzunehmen und unser Leben zu vereinfachen.
Egal also, ob du deine Website, deine App oder deine Software selbst codest oder mit Entwickler-Tools oder CMS arbeitest, behalte das responsive Design immer im Hinterkopf.Im Beitrag haben wir oft über Bilder und Grafiken gesprochen, die übersichtlich bleiben müssen und sollen. Davon sind aber auch Videos betroffen. Du willst, dass deine Besucherinnen und Besucher ohne Probleme auf deine Inhalte zugreifen können. Wir arbeiten bei E-Learnings genau nach diesem Prinzip und liefern für alle Endgeräte die optimale Erfahrung.