Responsives Webdesign

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

Letztes Update: 08.23 | Autor: Manuel

Was ist das Erste, das 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. (Okay, vielleicht zumindest im Bezug auf Handys.)

Die Zeit, in der es gereicht hat, eine Webseite statisch anzeigen zu lassen, ist längst vorbei. Der Aufruf von Webseiten mittels Browserfenster auf mobilen Endgeräten dominiert mehr denn 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) wurden bereits im Jahr 2021 57% aller Webseitenbesuche mit mobilen Endgeräten durchgeführt.

Inhaltsverzeichnis

Mobile Ansicht für Smartphone & Tablet

Was versteht man unter responsivem Webdesign?

Du hast dich schon oft 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 Fragen (hoffentlich nur im Bezug auf responsiven Webdesign) beantworten kann.

Beim responsiven Webdesign passt sich deine Website dynamisch an verschiedene Geräte an. Es passt das Layout deiner Website automatisch an, sodass es immer so aussieht, als wäre es speziell für den jeweiligen Bildschirm des Besuchers entworfen worden. Somit wird eine optimale Nutzererfahrung und Benutzerfreundlichkeit gewährleistet.

Darüber hinaus ermöglicht das responsive Design auch, dass deine Website oder Anwendung nahtlos für alle Endgeräte optimiert ist, vom Desktop-Computer über das 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 Riesenkracher 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, möchtest du es so schnell wie möglich hinter dich bringen.

Beim Betrachten der Website auf deinem iPhone Miniwini kannst du nicht nachvollziehen, was deine bessere Hälfte dir überhaupt mitteilen will, da du aufgrund der Größe deines Smartphones Inhalte über den Bildschirmrand angezeigt bekommst. Somit wären die Navigationen für die Fische, 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 glücklicherweise 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 Surfen nutzen (~5 Stunden pro Tag - Quelle review24), ist es, ob für Unternehmen oder privat, unumgänglich, nicht 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 die es noch werden wollen

Da Smartphone nicht gleich Smartphone ist, kann man mittels der Clamp-Funktion Schriftgrößen, 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 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 geachtet.

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äteunabhä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 Benutzers 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 S22 dargestellt wird. Somit ist die Website bestens für die Zukunft gerüstet, da die Ansicht skaliert.

Hier ein kleines Beispiel inklusive Erklärung, wie Media Queries aussehen:

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

Das Browserfenster muss mindestens 780 Pixel groß sein, damit die Website die Hintergrundfarbe Rot nicht anzeigt. Unter dieser Größe 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 Mobile First im Bezug auf die Indexierung von Webseiten eingeführt. 2021 sollte einen Schritt weiter gehen und nur noch die mobile Version der Website zur 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 2022 bestätigt, dass Google die Desktop Variante nur noch als Darstellung verwendet, jedoch nicht mehr als Ranking Faktor berücksichtigt

Mobile Website für jedermann

Zusammenfassung: 2023 sollte keine Website unresponsive 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 du mehr als nur Bahnhof verstehst, wenn nun vom responsiven Design gesprochen wird.

Kontakt aufnehmen