Responsives Webdesign, was ist damit gemeint?

Responsives Webdesign, was ist damit gemeint?

Posted by ariesprodesign in HTML5, Programmierung, Webdesign 11 Jul 2014

Heute können Nutzer von verschiedenen Medien aus, auf unserer Websites oder online-Shops zugreifen: ein Desktop, ein Mobiltelefon, ein Tablett etc. Eins ist uns allen klar, wir sollten unsere Website aus Sicht des Benutzers betrachten, er ist der Mittelpunkt und das wichtigste für den Erfolg, deswegen müssen wir, die Erfahrungen des Benutzers mit unserer Website angenehm wie möglich machen, egal welches Gerät er benutzt. Deshalb gewinnt Responsives Webdesign immer mehr an Bedeutung.

Responsives Webdesign ist ein Design, das sich an die Größe des Endgeräts anpasst. Mit Hilfe von so genannten CSS/Media Queries wird die Größe des Displays ermittelt und daraus wird das Design angepasst, damit alle Inhalte angezeigt werden und die Seite auch mit ein Mobiltelefon einfach zu bedienen ist. Man könnte auch sagen, dass das Responsives Webdesign auch ein Ansatz für Barrierefreiheit ist.

Eine Media-Query sieht es so aus:

Übersetzt heißt das: Ein Gerät mit einem Display der Maximal 320px Breit ist.

Jetzt stellt sich die Frage, welche Breiten sollen berücksichtigt werden? Die unten aufgelistet, werde von vielen Autoren empfohlen:

  • 320px
  • 480px
  • 600px
  • 768px
  • 900px
  • 1200px

Ich persönlich empfehle euch folgendes: Ändern Sie die Breite und die Höhe eures Browsers nach und nach, und da, wo das Layout der Seite zusammenbricht, könnt Ihr eine CSS-Query setzen.

Wenn Ihr einem separaten Stylesheet für eine bestimmte Bildschirm-Breite laden möchtet, könnt Ihr es so machen:

Für Mobile-Telefone ist das hier auch interessant:

Übersetzt: Ein Gerät mit Display der Maximal 480px Breit ist und dass die Seite als Hochformat* betrachtet werde soll.

Und das hier:

Übersetzt: Ein Gerät mit Display der Maximal 480px Breit ist und dass die Seite als Querformat* betrachtet werde soll.

* Das gilt für Mobile-Geräte, die man durch ein kippen des Gerätes die Seite in Querformat oder in Hochformat betrachten kann.

Media-Querys können zum Beispiel folgende Informationen abfragen:

QueryErklärung
width (Breite) und height (Höhe)Auflösung (Konkrete Angabe.)
device-width / device-heightAuflösung (Angabe des Gerätes, interessant für Smartphones und Tabletts, da bei ihnen, die eingestellte Breite und die Gerätebreite unterschiedlich sein könnten.)
aspect-radio / device-aspect-radioSeitenverhältnis zum Beispiel: 16:9
orientation landscape / portrait(siehe oben * )

Das waren jetzt die, die an meinst genutzt werden.

Schließlich ist es wichtig, ein Meta-Tag im Headerbereich unserer Website zu platzieren, der den Browser dazu bringt, die Breite des Mediums als die Breite des Webs zu verwenden:

 

  • Spang Juli 22, 2014 at 6:47 pm / Antworten

    Hallo,

    Danke für den Beitrag über Webdesign. Ich hatte danach schon gesucht =)

    Viele Grüsse

    Spang

Schreiben Sie einen Kommentar