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

Zielgruppen und Personas

Definition: Eine Zielgruppe definiert eine Ansammlung von Personen, die man mit seinen Marketingmaßnahmen erreichen möchte. Diese besteht aus potenziellen un...

Photoshop für Halunken – Composing für Anfänger

Lange ist es her, als ich meinen ersten Workshop für euch veranstalten durfte,

Wie baue ich eine Auswertung die für jeden verständlich ist?

Eine Auswertung sollte für jedermann verständlich sein, für Experten und für Laien. Aber wie macht man das am besten?