Wenn Du auf "JA" klickst, stimmst Du der Speicherung von Cookies auf Deinem Gerät zu.
Datenschutzrichtlinie.

Responsive Design (Responsive Webdesign)

Webdesign
5 min
zum lesen

Responsive Design (Responsive Webdesign)

25.9.2022

Warum es wichtig ist, dass Deine Website im responsive Design funktioniert.

Was versteht man unter Responsive Webdesign Design?


Responsive Webdesign Design heisst grundsätzlich, dass sich das Layout der Website an die Breite vom Bildschirm des Betrachters anpasst, um die Benutzerfreundlichkeit zu gewährleisten.

Zusätzlich wird die Schriftgrösse der Website skaliert. Damit der Benutzer die Website unabhängig vom verwendeten Endgerät gut bedienen und nutzen kann.

Im responsive Webdesign wird der gleiche Inhalt in einem abgewandelten Design (Layout) für kleine Bildschirme dargestellt. Die vorhandenen Elemente werden umstrukturiert, so dass sie die Bildschirmbreite optimal nutzen und die Website übersichtlich bleibt.

Man spricht auch von mobile First oder mobile friendly Design. Wobei Mobile First auch berücksichtigt, dass die Besucherzahlen, die mit mobilen Endgeräten Deine Website besuchen, kontinuierlich steigt.


Eine Website muss heutzutage zwingend im responsive Webdesign aufgebaut sein. Sonst ist sie wirklich Schnee von gestern und sollte dringend erneuert werden.

Mobile First - Responsive Webdesign und Google SEO

Google hat bereits 2016 die Indexierung über eine responsive Website in deren Suchalgorithmen integriert und Dich mit einem höheren Rankingfaktor belohnt, wenn die Website dementsprechend angepasst war.


Das hat sich soweit weiterentwickelt, dass Google heutzutage nur noch die mobile Version einer Website durchsucht, um diese zu indexieren.
Das heisst knallhart, wenn Du keine auf mobile Endgeräte angepasste Website hast, Deine Website von Google schlichtweg nicht indexiert wird. Was einem Todesstoss gleichkommt. Du siehst responsive Webdesign spielt auch im online Marketing eine Rolle.

Dazu kommt, dass Google den Pagespeed das heisst wie lange es dauert, bis die Website geladen wird, sehr ernst nimmt. Aus diesem Grund reicht es nicht nur die Website vom Layout (Design) her anzupassen. Sondern auch Bilder in verschiedenen Grössen dem User auf mobilen Endgeräten auszuliefern.


Ich als kasan.ch Webagentur gestalte und setzte meine Websites in Webflow um und biete dem Benutzer je nach Bildschirmgrösse auch unterschiedliche Bildauflösungen. Jedes Bild ist in folgenden Bildgrössen: 2000px, 1600px, 1080px, 800px, and 500px auf dem Server vorhanden. Je nach Device bekommt der Benutzer das für ihn passende Bild ausgeliefert. Was die Ladezeiten der Website enorm verkürzt. So ist Google happy und rankt Deine Website weiter oben in deren Suchergebnissen.

Diese Varianten werden auf dem Webflow Server automatisch umgerechnet und das funktioniert auch mit Bildern, die meine Kunden selber hochladen, um deren Website zu aktualisieren. Das ist zusätzlich ein Grund, warum eine kasan.ch Website SEO-freundlich aufgebaut ist.

Für Mobile first ist es wichtig, dass Inhalte nicht gekürzt werden, lediglich dem Viewport  entsprechend angeordnet.

Hier noch ein interessantes Video von Google zu diesem Thema:

Hier zu einem Artikel von Google betreffend Mobile First Indexing.

Zu meinem Webdesign Angebot

Lediglich eine Version für responsive Websites

Wichtig zu verstehen ist, dass es von Deiner Website lediglich eine Version Deiner Website gibt und diese durch das CSS (Content Style Sheet) organisiert wird. Die Zeiten, verschiedene Websites für verschiedene Bildschirmgrössen bereitzustellen, ist schon sehr lange vorbei. Das Zauberwort heiss CSS. Genau dieses Stylesheet organisiert diese Darstellungsveränderungen je nach Device.

Responsive Webdesign und Fluid Webdesign kombiniert

Ich als kasan.ch Webflow Webagentur arbeite zusätzlich zum responsive Webdesign noch mit einem Fluid Design.

Zusätzlich arbeite ich mit einem Fluid Design, dass sich noch feiner an die Monitorgrösse anpasst. Die Desktopmonitore werden auch immer grösser und da muss sich der Inhalt der Website auch automatisch anpassen.

Mit Fluid und responsive Design verwöhne ich alle Besucher, egal wo die Website aufgerufen wird.

Es gibt nur noch Breakpoints, wo ich die Anordnung der Elemente anpasse oder ein grosser Schritt in Überschriften mache. Wie zum Beispiel aus zwei Spalten nur noch eine Spalte, wenn der darzustellende Bildschirm zu schmal ist.

Fluid Design, gekoppelt mit responsive Webdesign ist definitiv Finetuning. Denn Responsive Web Design beinhaltet grundsätzlich nur Breakpoints. So passe ich auch die Desktop-Version kontinuierlich an. Denn es gibt Monitore von Laptops und Desktop-PC-Monitore. Ultra Wide und 4K-Monitore und noch unendlich viele Formate (Seiten Verhältnisen). Da ist die Max-Width enorm unterschiedlich. Mit einem Normalen responsive Layout ohne Kombination mit Fluid Design kommt man da nicht mehr hinterher.

Natürlich benütze ich das Fluid Design auch auf den mobilen Geräten.

Du siehst für eine Kasan Webflow Website ist kein Bildschirm zu klein oder zu gross. Alles passt immer wunderbar auf die Bildschirmgrösse und bietet eine grossartige User Experience.

Zu meinem Webdesign Angebot

Ist meine Website schon im responsive Web Design?

Hier kannst Du Deine Website testen, ob sie den Anforderungen von Google betreffend Responsivität erfüllt.

https://search.google.com/test/mobile-friendly

Auch kannst das einfach testen, indem Du Dein Browserfenster in der Breite schmaler machst. Wenn Umbrüche und verschiedene Darstellungsmethoden vorkommen. Dann bist Du schon in der Welt vom responsive Design angekommen.

Zusammenfassung responsive Webdesign

Eine responsive Website wird über das CSS (Content Style Sheet) gesteuert. Dies bestimmt das Gestaltungsraster.

Eine responsive Website funktioniert auf allen Bildschirmgrössen inklusive Mobilen Geräten einwandfrei.

Zusätzlich zum responsive Webdesign kann mit Fluid Design gearbeitet werden. So kann man zwischen den Breakpoints feinere Anpassungen vornehmen.

Mobile First und Page Speed sind enorm wichtig für SEO, online Marketing und die erfolgreiche Indexierung bei Google. Nur responsive Webseiten haben Zukunft.

Auch auf der Desktop Version sollte zusätzlich mit Fluid Design für eine tolle User Experience gearbeitet werden.

Die Webentwicklung hat kein Ende und der HTML-Code entwickelt sich weiter und die technische Umsetzung sollte nicht im Weg stehen.

Die Benutzerfreundlichkeit steht im Vordergrund und die Displaygrössen ändern sich andauernd.

Technik

Für alle Technik interessierten hier noch einige gute Artikel betreffen responsive Design und Media Queries und CSS. Von W3 School über Responsive und wie das funktioniert.

Auch hier von selfhtml.org noch ein Artikel zum Thema. > https://wiki.selfhtml.org/wiki/Responsiv(es_Webdesign)

Und hier ein Artikel von Brad Frost zu diesem Thema.

No items found.

Ich würde mich freuen, für Dein nächstes Projekt Dein Webflow Webdesigner zu sein, um Dich aktiv zu unterstützen.

kasan.ch, die kleine, aber feine Webflow Webagentur in Oberglatt bei Zürich.

Hier kannst Du easy eine Onlineofferte anfragen oder Du kontaktierst mich mit dem unten stehenden Formular.
Falls Du keine Lust auf Formulare hast, ruf mich einfach an. 077 240 44 70.

Lass uns zusammen arbeiten

Danke der Nachricht.
OH - Da ist was schief gelaufen >>>>> Bitte nochmals versuchen.