Responsives Webdesign

Was ist responsives Webdesign? Warum ist die mobile Ansicht für 2023 wichtiger den je?

Letztes Update: 01.23 | Autor: Manuel

Was ist das Erste, dass dein Kleinkind am Wochenende in der Früh nach dem Aufstehen haben möchte? Im besten Fall ein Küsschen. Die Realität sieht jedoch ganz anders aus … natürlich das Smartphone.

Selbst bei den Kleinsten der Kleinen lässt sich die Evolution nicht aufhalten. (ok vielleicht zumindest im Bezug auf Handys)

Die Zeit wo es gereicht hat eine Webseite statisch anzeigen zu lassen, ist längst vorbei. Der Aufruf von Webseiten mittels Browserfensters auf mobilen Endgeräten dominiert mehr den je.

Genau deswegen ist responsives Webdesign für 2023 unumgänglich und sollte nicht mehr außer Acht gelassen werden.

Laut einer Studie (statista.com) wurde bereits im Jahr 2021 57% aller Webseiten-besuche mit mobilen Endgeräte durchgeführt.

Inhaltsverzeichnis

Mobile Ansicht für Smartphone & Tablet

Was versteht man unter responsivem Webdesign?

Du hast dich schon öfters gefragt was eine responsive Website überhaupt bedeutet und gehörst auch zu der Gruppe von Menschen, die am Besten alles mit Beispielen verstehen? Heute ist dein Glückstag da ich deine Befriedigung (hoffentlich nur im Bezug auf responsiven Webdesign) stillen kann..

Beim responsive Webdesign ermöglicht es deiner Website, sich dynamisch an verschiedene Geräte anzupassen. Es passt automatisch das Layout deiner Website an, sodass es immer so aussieht, als wäre es nur für den jeweiligen Bildschirm des Besuchers entworfen worden. Somit wird eine optimale Nutzererfahrung und Benutzer Freundlichkeit gewährleistet.

Weiters ermöglicht das responsive Design auch, dass deine Website oder Anwendung nahtlos für alle Endgeräte optimiert ist, vom Desktop-Computer über Tablet bis zum Mobiltelefon. Es hilft auch bei der Suchmaschinenoptimierung, da Google responsive Websites auf seinen Suchmaschinen-Ergebnisseiten höher einordnet, wenn sie gut codiert sind.

Mithilfe von Media Queries wird die Auflösung an die jeweilige Bildschirmgröße angepasst. Diese werden nicht mit HTML oder Javascript erstellt, sondern mithilfe von CSS (Cascading Style Sheets).

Je nach Bildschirmgröße und mittels Media-Queries passt sich das Layout einer Website automatisch an.

Beispiele für responsives Webdesign

Responsives Webdesign einfach erklärt

Stell dir vor deine bessere Hälfte sendet dir von ihrem Samsung Riesenpracker eine Website mit dem nächsten Urlaubsziel, um einen genauen Ablauf mit dir planen zu können.

Da sich deine Freude sowie Motivation bereits in Grenzen hält, willst du es so schnell wie möglich hinter dich bringen.

Beim Website betrachten auf deinem Iphone Miniwini kannst du nicht nachvollziehen, was deine bessere Hälfte dir überhaupt mitteilen will, da du aufgrund deines Smartphone Größe Inhalte über den Bildschirmrand angezeigt bekommst. Somit wären die Navigationen für die Fisch da der Inhalt nur schwer zu lesen ist.

Auf die Größe kommt es also trotzdem an. Zumindest für Webdesigner. Traurig musst du deswegen dennoch nicht sein, da es gottseidank Möglichkeiten gibt, dass deine Website auf verschiedenen mobilen Geräten dennoch gut aussieht.

Gute Gründe für einen Umstieg

Warum responsives Webdesign?

Wir befinden uns im Zeitalter des Mobil-First-Designs. Dennoch wird sich beim Entwerfen einer Website im Allgemeinen auf die Desktop-Ansicht konzentriert und die mobile Ansicht rückt in den Hintergrund.

Gemeint ist damit die adaptive Ansicht auf Mobilgeräte (Smartphones und Tablets - Hochformat & Querformat)

Da wie bereits erwähnt immer mehr Menschen das Smartphone zum Süchteln nutzen (~5 Stunden pro Tag - Quelle review24), ist es ob Unternehmen oder privat, unumgänglich auf responsives Webdesign zu verzichten und den Fokus auch darauf zu verlagern, anstatt den Besuchern zuzumuten ihre Zeit mit zoomen oder verkleinern zu verschwenden.

Tipps am Rande für Profis des Webdesigns und dies noch werden wollen

Da Smartphone nicht gleich Smartphone ist kann man mittels der Clamp Funktion Schriftgrößen, Texte oder auch Fonts genannt, sowie Abstände ( Margin & Padding ) Viewport (Ansichtsfenster) abhängig definieren und an ein responsives Design anpassen (CSS-Code, nicht zu verwechseln mit einem HTML-Code).

Bis auf den Retro Internet Explorer wird diese Funktion von allen gängigen Browsern unterstützt (Chrome, Firefox, Edge, Safari,...).

Dies garantiert einen fließenden Wechsel zwischen den Fonts / Abständen und ist somit für eine Vielzahl von Geräten geeignet. Auf die Breite des Bildschirms oder auch die Breite des Browserfensters wird hier besonders acht gelegt.

clamp (minimaler Wert, bevorzugter Wert, maximaler Wert)

Ein Beispiel:

clamp (12px,3vw,36px);

12px ist der kleinste Wert, der angezeigt wird.
3vw(View Width > responsiver Wert) zeigt den optimalen Wert an.
36px ist der maximale Wert, der angezeigt wird.

Um den optimalen Wert zu bekommen, am besten den Pixel zu View With Rechner benutzen.

Clamp Funktion für Überschriften sowie Texte inkl. Fallback.

Nutzen von der mobilen Ansicht

Vorteile von responsivem Webdesign

Das Design ist Endgerät unabhängig

Da sich das Layout / Template / Design deinem Bildschirmen automatisch anpasst, musst du dir keine Gedanken darüber machen, ob ein Besucher deine Website vor dem Computer ansehen will (Desktop-Version) oder von unterwegs am Smartphone. Selbst bei kleineren Bildschirmen bleibt die Navigation kinderleicht.

Dadurch haben selbst bei Sitzungen, sei es beruflich oder am WC, Besucher immer die bestmögliche Nutzererfahrung (User experience - UX), da den technischen und gestalterischen Umsetzungen keine Grenzen gesetzt sind.

Somit wird die Größe des Bildschirms optimal genutzt, da die Größe des Inhalts perfekt angezeigt wird. (Inhalt nicht breit genug oder zu breit)

Der Touchscreen deines Gerätes wird es dir danken, dass du nicht wie ein Wilder darauf hämmerst, um den zur Verfügung stehenden Platz erzwingen zu wollen.

Anpassung der Darstellung mittels Media Query.

Zukunftssicher

Egal ob optimiert für ein Smartphone von 2015 oder für eines aus 2022. Dank der Anpassung des Benutzen mittels CSS / CSS3 Codes (Media Query), welche Breakpoints / Viewport abhängig ist, macht es keinen Unterschied, ob die Website auf einem iPhone 4 oder Samsung Galaxy S 22 dargestellt wird. Somit ist die Website bestens für die Zukunft gerüstet, da die Ansicht skaliert.

Kleines Beispiel inklusive Erklärung, wie Media Queries aussehen:

@media only screen and (max-width: 780px)
{background-color:red }
}

Mindestens 780 Pixel muss das Browserfenster groß sein, dass die Website nicht die Hintergrundfarbe rot anzeigt. Darunter wird der "Code ausgeführt" und die Hintergrundfarbe ändert sich.

Vereinfachte Pflege des Inhalts (Content)

Neue Inhalte müssen nicht doppelt gepflegt werden. Wo es in der Vergangenheit noch unterschiedliche Versionen (Desktop sowie mobil) gegeben hat, fällt dies heutzutage dank Responsivität weg.

Auszug Google Search Console

Von Google bevorzugt (Mobil First)

2018 wurde bei Google Mobil First im Bezug auf die Indexierung von Webseiten eingeführt. 2021 sollte noch einen Schritt weiter gehen und nur mehr die mobile Version der Website zu Indexierung herangezogen werden. Ein Jahr verspätet ist dieses Vorhaben 2022 nun umgesetzt worden.

John Mueller (Senior Web Master von Google) hat nun offiziell in den SEO Office Hours vom 04. März bestätigt, dass Google die Desktop Variante nur mehr als Darstellung werdet, jedoch nicht mehr als Ranking Faktor berücksichtigt.

Mobile Website für jedermann

Zusammenfassung: 2023 sollte keine Website nicht Responsiv sein

Wer heute noch einen Webauftritt besitzt und dieser nicht responsiv dargestellt wird, dem kann nicht mehr geholfen werden. Zu Groß wäre die Blöße, wenn Mitbewerber dich aufgrund dessen überholen. Spätestens jetzt solltest du dir Gedanken machen uns zu kontaktieren um dieser Peinlichkeit ein Ende zu setzen.

Ich hoffe, dass wenn nun vom responsivem Design gesprochen wird, dass du mehr als nur Bahnhof verstehst.

Kontakt aufnehmen