Responsiv Webdesign

Was ist Responsive Webdesign

Responsiv Webdesign ist in aller Munde. Jedenfalls wenn es um Webdesign geht. Doch was ist Responsiv Webdesign überhaupt? Ganz einfach gesagt: Damit wird die Website auf allen Endgeräten optimal dargestellt. Egal, ob Desktop, Tablet oder Smartphone – die Inhalte werden vom Besucher stets schnell erfasst. Die Bedienung ist einfach und richtet sich nach dem Endgerät.

Dafür werden das Layout, die Bild- und Schriftgrößen der Website flexibel gestaltet. Dieser Artikel soll nicht zu technisch werden. Aber ermöglicht wird das durch HTML5 und CSS3. Über sogenannte Media Queries (dt. Medienabfragen) wird die Darstellung anhand bestimmter Bedingungen angepasst. So wird für verschiede Geräte eine passende Version der Website bereitgestellt.

Du erfährst weiter unten im Artikel, was Media Queries sind.   

Die Bedeutung von „Responsive Webdesign“

Der Begriff Responsive Webdesign (kurz RWD) heißt übersetzt reagierende Webseitengestaltung. Okay, dass klingt ganz schön sperrig. Aber die Technik dahinter ist das genaue Gegenteil.

Alle Website-Elemente, wie die Struktur, die Navigation und der Inhalt passen sich der Bildschirmauflösung an. Besonders deutlich sieht man das bei mobilen Geräten. Hier wird anstelle der Hauptnavigation oft nur ein Hamburger-Menü-Symbol angezeigt. Das Symbol mit den drei oder vier waagerechten Linien, die zusammen wie ein vereinfachter Burger aussehen. Das spart auf kleinen Bildschirmen viel Platz.

 

 

Die Vorteile der „Mobile Website Optimierung“

Eigentlich fällt es schon gar nicht mehr auf. Weil es schon so normal geworden ist. Jeder hängt am Handy. Und die Entwicklung geht noch weiter. Der Trend zur Nutzung mobiler Endgeräte kennt nur eine Richtung: Nach oben.

Der immer weiter steigende Marktanteil von mobilen Nutzern via Smartphones und Tablets sorgt dafür, dass die Mobile Website Optimierung kein Vorteil mehr ist. Es ist zu einer Grundvoraussetzung geworden.

 

 

Auch Google hat das schon lange auf dem Schirm und hat darauf mit dem Mobile First Index reagiert. Seit 2016 vernachlässigt Google die bisherigen Websites für Desktop Computer zugunsten der mobilfreundlichen Websites.

Google erklärte es damals so:

„Die meisten Menschen suchen heutzutage über ein mobiles Gerät in Google. Unsere Ranking-Systeme überprüfen in der Regel zunächst die Desktops, um deren Relevanz für die User zu bewerten. Dies führt zu Problemen, wenn die mobile Webseite weniger Inhalte aufweist als die Desktop-Version. Denn unsere Algorithmen werten nicht die tatsächliche Seite aus, die einem mobilen Benutzer angezeigt wird.“

Warum Responsive Webdesign?

„Ja aber warum Responsive Webdesign?“ Diese Frage wird oft gestellt, wenn das Thema noch total unbekannt ist. Und gäbe es so wie früher keine verschiedenen Endgeräte, dann bräuchte man auch nur die Desktop Version einer Website.

 

 

Nach dem du (Die Vorteile der Mobile Website Optimierung) gelesen hast, kannst du die Antwort schon jedem beantworten.

Mit responsivem Design werden alle Nutzergruppen optimal bedient. Das schnell wachsende Interesse für mobile Endgeräte – wie Smartphones und Tablets – macht eine geräteunabhängige Kommunikation nötig. Für Website-Betreiber, Webdesign-Agenturen und Webdesigner stellt diese Lösung eine Grundvoraussetzung für erfolgreiches Webdesign dar.

Mit dieser Lösung werden die Bedürfnisse und technischen Gegebenheiten aller Nutzer berücksichtigt.

 

Responsive Webdesign Code

Du hast keine Lust auf langweilige Code-Zeilen? Dann überspringe diesen Punkt einfach. Wenn du aber wissen willst, wie der HTML Code und CSS Code für Responsive Webdesign aussieht und das Ganze funktioniert, dann lies weiter! Bevor wir den Code schreiben, ein paar Grundlagen vorab.

Ein Responsive Layout braucht relative Größenangaben

Im Webdesign wurden früher absolute Größen in Pixeln angegeben. Das betraf die Höhe / Breite des Layouts und die Bilder sowie Schriften.

Alle Bildschirme hatten damals ganz ähnliche Auflösungen. Daher hat das auch zu dieser Zeit wunderbar funktioniert. Bei der Bandbreite unterschiedlicher Anzeige-Geräte geht das natürlich nicht mehr.

Aus dem Grund gibt es beim Responsive Webdesign relative Größenangaben in Prozent, em oder rem. Weitere Informationen zu diesen Einheiten findest du in dem verlinkten Artikel.

Was sind Media Queries?

Die Media Queries sind Grundvoraussetzung für responsive Layouts. Sie ist eine CSS-Technik, die mit CSS3 eingeführt wurde. Einfach gesagt: Media Queries sind eine Medienabfrage, die anhand bestimmter Bedingungen das passende Layout bereitstellt. Bedingungen sind z.B. der Medientyp, die Ausrichtung des Displays oder die Bildschirmauflösung.

Die Abfrage beginnt mit dem CSS-Ausdruck @media. Danach folgt gleich die Bedingung, wie zum Beispiel der maximalen Breite des Bildschirms.

Jetzt schreiben wir den Media Queries Code:

/* — Smartphone (Hochformat und Querformat) –*/
@media only screen and (min-device-width: 320px) and (max-device-width: 480px)
{/∗ — Hier folgen die CSS-Anweisungen für Bildschirme mit mindestens 320px und höchstens 480px Breite — ∗/
}

/* — iPad (Hochformat und Querforma) –*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px)
{/∗ — Hier folgen die CSS-Anweisungen für Bildschirme mit mindestens 768px und höchstens 1024px Breite — ∗/
}

/* — Desktop and Laptop –*/
@media only screen and (min-width: 1224px)
{/∗ — Hier folgen die CSS-Anweisungen für Bildschirme mit mindestens 1224px Breite — ∗/
}

/* — Sehr große Bildschirme –*/
@media only screen and (min-width: 1824px)
{/∗ — Hier folgen die CSS-Anweisungen für Bildschirme mit mindestens 1824px — ∗/

}

Was sind Breakpoints?

Breakpoints sind die die Grenzen zwischen den Bereichen, die in einer Media Query festgelegt werden.

Oft werden diese gängigen Breiten für Breakpoints verwendet:

• 480 Pixel
• 800 Pixel
• 1024 Pixel
• 1280 Pixel

 

Zusammenfassung

Die Zukunft ist mobil. Immer mehr Geräte kommen dazu und Websites werden in Zukunft noch mehr an Bedeutung gewinnen. Responsive Webdesign ist die technische Antwort, um die Darstellung und Erreichbarkeit auf allen Geräten sicher zu stellen. Darüber hinaus empfiehlt Google (als Marktführer) ausdrücklich Responsive Webdesign und bevorzugt diese Seiten in der Sichtbarkeit.