Grundlagen des Responsive Webdesign

Veröffentlicht von Tudor - 18. Januar 2018

Heutzutage wird eine Webseite von einer Vielzahl von Geräten besucht: Desktops mit großen Monitoren, mittelgroßen Laptops, Tablets, Smartphones und mehr. Um eine optimale Benutzererfahrung zu erzielen, sollte ein Webseiten Layout an verschiedene Geräte angepasst werden.

grundlage_responsive_design

Gründe für Responsive Design

Mit Responsive Design kann man ein Layout erstellen, das sich automatisch an die Bildschirmgröße eines Geräts anpasst. Dieser Ansatz bietet Vorteile:

  • Es spart Zeit und Geld, da keine separaten Websites für Desktops und Mobile verwalten werden müssen.
  • Responsive Design verbessert das Ranking bei Suchmaschinen
  • Responsive Designs sind einfacher zu pflegen.

Ein häufiges Missverständnis ist, dass Responsive Design neben HTML und CSS existiert und zusätzliche Software benötigt. Dabei basiert Responsive Design gerade auf diesen Techniken und wird durch einfache CSS-Regeln erreicht, welche nur für Geräte mit einer bestimmten Bildschirmgröße gültig sind. Man kann beispielsweise eine Regel definieren die nur gilt, wenn der Bildschirmgröße kleiner als 320 Pixel ist, und damit eine Seitenleiste ausblenden. Auch ist es möglich für große Bildschirme die Schriftgröße des Texts zu erhöhen und somit das Lesen zu erleichtern.

Wie kann ich überprüfen, ob meine Website „responsive“ ist?

Ein einfacher Trick um zu prüfen, ob eine Webseite responsiv ist, ist es eine Seite im Desktop-Browser zu öffnen und dann die Fenstergröße zu verändern. Wenn sich dann das Layout der Webseite mit verändert spricht man von einer responsiven Webseite. Ein gutes Tool dafür: http://www.responsive.cc/

Best Practice

Um eine responsive Website zu erstellen, sollte man die folgenden 3 Techniken kennen:

Fluid Grid

Es gibt eine flexible Breite. Wir verwenden keine pixelbasierten Größen, sondern den prozentuale Angaben im CSS. Dies hilft uns, das Design für verschiedene Bildschirmgrößen zu vereinfachen.

Flexible Bilder

Die Bilder werden entsprechend der Bildschirmauflösung / -größe skaliert. Die gebräuchlichste Lösung ist, in CSS die Breite des Bildes auf 100% zu setzen.

Media Queries (@media)

Media Queries werden verwendet, um CSS für bestimmte Situationen zu schreiben, wodurch man Stile, basierend auf den Informationen zur Geräteauflösung, anwenden kann. Beispiel:

@media only screen and (max-width: 480px) { … }

Und innerhalb der geschweiften Klammern kommt der CSS-Code. Neben den oben genannten Techniken ist es wichtig zu wissen welche Geräte eine Webseite besuchen. Oft werden die Geräte in die folgenden Klassen unterteilt:

  • Smartphones: 320px bis 480px
  • Tablets: 768px bis 1024px
  • Computer-Desktop: 1024px+

Das könnte Dich auch interessieren

Warum du dich für die Media Favoriten entscheiden solltest

Du bist auf der Suche nach einer neuen Herausforderung oder befindest dich noch im Studium? Zufällig bist du auf den Internet Halunken Blog gestoßen und du ke...

Ein Tag als Praktikant im Home Office Teil 4

Ein Praktikum am Schreibtisch oder Küchentisch zuhause, nicht so ganz das , was man sich unter einem Praxissemester vorstellt. Wie meine Praktikantenkollegen d...

Ordered List

Rey’s CSS Haxx: Wie man eine Ordered List stylt

Viele Leute fragen mich: "Rey, wie kann man eine Ordered List stylen?". Und ich freue mich dann immer und antworte voller Inbrunst und mit meiner besten Boromir...