Responsives Webdesign

Ideale Anpassung der Website an alle Screengrößen

  • Responsives Webdesign – Was ist das eigentlich genau?

Heutzutage ist es wichtig, dass dein Internetauftritt für viele unterschiedliche Monitore optimiert ist und sich leicht bedienen lässt.

 

Seit der Geburtsstunde des Internets, 1993 hat sich viel getan. Wenn Du heute deine Website planst gibt es viele Dinge zu beachten. 

 

Von qualitativen Inhalten, über nutzerfreundliche Bedienbarkeit zu schneller Performance und anpassungsfähigem Design. Letzteres werden wir heute etwas genauer betrachten. 

 

Die mobile Version

Oft ist die Rede, von einer mobilen Version, die du für deine Website anbieten solltest, weil es für deine Seitenbesucher angenehmer und für dein Suchmaschinenranking besser ist. Anfang 2015 gab es bei Google das Mobil friendly update, welches Seiten abstraft die keine Mobile Lösung anbieten. 

 

Eine gute Möglichkeit dies für alle Monitorgrößen gleichermaßen zu bewerkstelligen ist das Responsive Webdesign. 

 

Responsive = reagierend

Somit reagiert deine Website auf den ihr zugeteilten Raum. Was nichts anderes bedeutet, als das sich deine Website, durch bestimmte Parameter an die jeweilige Screengröße anpasst und immer den selben Inhalt ideal darstellt, ohne das du zoomen musst.

 

Warum Responsiv als Lösung

Um eine mobile Version bereit zu stellen gibt es unterschiedliche Methoden und Meinungen. Ich persönlich finde, dass es nicht reicht, nur eine weitere, vielleicht abgespeckte, Version anzubieten. 

 

Ich als Seitenbesucher möchte in meinem Smartphone den gleichen Inhalt finden, den ich auch am Desktop sehe. Doch meistens bieten die extra erstellten mobilen Versionen eine, vom Inhalt, reduzierte Ansicht der Website an. 

 

Ein weiterer Pluspunkt für responsives Design ist, dass sich die Website an jede denkbare Monitorgröße immer individuell anpasst ohne dass der Inhalt drunter leidet.

 

Mobil >< Desktop 

Grundsätzlich kannst du zwischen der Mobil- und Desktop-Ansicht unterscheiden. Aus diesem Grund ergeben sich zwei Herangehensweisen an die Mobile Version. 

 

Mobile First

Bei dieser Art startest du, mit der kleinsten Ansicht, dem Smartphone und beginnst den Content zu designen. Dann wirst du immer breiter und fügst größere Bilder oder Techniken hinzu bis du bei der Desktop Version angekommen bist.

 

Hier sei erwähnt, dass du heutzutage fast noch kleiner gehen musst und auch eine gute Ansicht für die Apple Watch anbieten solltest.

 

Desktop First

Hier startest du bei der größten Ansicht und wirst immer kleiner. Diese Vorgehensweise wird meistens verwendet, wenn eine bestehende Seite auf responsiv umgebaut wird. 

 

Breakpoints

Bei einer Responsiven Website passen sich alle Inhalte, Bilder und Elemente an ihre mögliche Breite im jeweiligen Screen ständig an. Dies erkennst du gut, wenn du dein Browserfenster auf und zu ziehst. 

 

Hierzu werden am besten alle Breiten und Größenangaben in % oder em angegeben. So bleibt alles flexibel und ist nicht an eine bestimmte Pixelbreite gebunden.

 

Um jeden Screen optimal zu nutzen müssen Elemente je nach Breite neu angeordnet werden. Dies erreichst du mit Hilfe von Breakpoints (Haltepunkt, Umbruch) die mit Hilfe von Media Queries gesetzt werden.

 

So gibt es zwei Arten von Breakpoints:

 

Feste, 

die für jedes Element zählen und meistens anhand eines Rasters festgelegt werden. Je nach Design und Elementen legst du 3 bis 5 Breakpoints fest, die du dann über CSS-Klassen an die Elemente übergeben kannst. Bootstraps bietet ein bereits fertiges Raster an, du kannst es dir aber auch selbst erstellen.

 

Elementbezogene,

die für jedes Element extra erstellt werden, um ein optimales einbinden in das Layout der Seite zu gewährleisten. Die Breakpoints schreibst du direkt auf die CSS-Klasse des jeweiligen Elements.

 

Am besten benutzt du beide Arten, um ein harmonisches, ausgewogenes Bild zu erhalten.

 

Media Queries

Ohne die Media Queries würde responsives Webdesign nicht funktionieren. Sie machen es erst möglich.

 

Mit dem Befehl:

 

(Mobil first)
@media screen and (min-width:40em) { }
(Desktop first)
@media screen and (max-width:40em) { }
(von bis)
@media screen and (min-width:40em) and (max-width:60em){ }

 

Gehen wir davon aus, wir erstellen eine Seite mit Mobil first. So gehe ich von der kleinsten Screenbreite aus und erstelle meine CSS-Eigenschaften. 

 

Danach werde ich immer Breiter und immer wenn ich etwas in der Anordnung oder im Design ändern möchte füge ich ein Media Querie ein und schreibe meine CSS-Angaben in die geschweiften Klammern. Auf diese Weise entsteht langsam meine Seite.

 

Viewport meta Tag

Damit Smartphones wie das iPhone auch funktionieren und dem Browser nicht vorgaukeln, eine normale Desktop Ansicht mit 980px zu sein, ist es wichtig das Viewport meta Tag einzusetzen.

 

Deshalb sollte dieser Satz, bei einer Responsiven Seite, immer in deinem Head stehen:

 

<meta name="viewport" content="width=device-width, initial-scale=1">

 

width=device-width

= Die Screenbreite = die echte Pixelbreite.

initial-scale=1

= So stellst du ein das deine Website mit 100% dargestellt wird.

 

Zusammenfassung

1. Mit Hilfe von Media Queries und daraus resultierenden Breakpoints erstelltet du ein sich anpassendes Layout deiner Internetseite.

 

2. Dabei ist zu beachten, dass du Breiten und Größen in %, em oder einer nicht fixen Größe wie Pixel angibst. 

 

3. Mit dem Viewport meta Tag im <head> Tag zwingst du Smartphones, die Website richtig darzustellen.

 

Jetzt bist du gefragt

Welche Erfahrungen hast du mit dem Thema gemacht? Hast du Anregungen, Ergänzungen oder Tips zum Thema? Ich freue mich auf deinen Kommentar.

 

Gerne kannst du den Beitrag auch weiterempfehlen.

Vielen Dank für Deine Unterstützung.

Einfach weitersagen!

Bild des Benutzers Sabrinita

Sabrina ist gelernte Grafik- und Webdesignerin und seit 2006 in diesem Bereich tätig. Seit 2013 ist sie selbstständig als Designerin tätig.

Neuen Kommentar schreiben

Meine Projekte

  • Link zu Einfach Kunst! unter galerie.sabrinita.de
  • Link zu Einfach anziehen! unter shop.sabrinita.de
  • Link zu Einfach aufallen! unter www.sabrinita.de
  • Link zur schlamuetz unter www.schlamuetz.de