Responsive Website

Was ist Responsive

Eine Webseite ist Responsive wenn Sie sich der Auflösung des Endgerätes anpasst. Das heist eine Webseite besitzt unterscheidliche Darstellungen für unterschiedliche Auflösung oder Seitenverhältnisse. Die Motivation für Responsive desings besteht darin auch Display mit kleinen Auflösungen ein gutes Erlebniss beim surfen zu verschaffen.

Oftmals ist es so das bei nicht responsive Webseiten, die mit einer zu niedrigen oder zu großen Auflösung betrachtet werden, Inhalte verloren gehen.

CSS Media Query’s

Media Query’s sind ab CSS 3 Verfügbar. Mit Ihnen ist es möglich Webseiten Layouts für verschiedene Endgeräte zu erstellen. Dabei gibt es mehrere Möglichkeiten Media Query’s in das HTML Dokument einzubinden.

Als erstes benötigen wir dieses snipet welches den Tablets und Smartphones sagt das sie die Webseite mit ihrer nativen Auflösung darstellen sollen.

<meta name="viewport" content="width=device-width">

Geben wir diese Zeile nicht an versuchen die Browser mit kleinerer Auflösung die Seite so zu Skalieren das die Desktop CSS angezeigt wird.

Die erste Möglichkeit wäre im Head des HTML Dokuments folgende CSS Datein zu deklarieren.

<link rel='stylesheet' media='screen and (min-width: 901px)' href='css/desktop.css' />
<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/tablet.css' />
<link rel='stylesheet' media='screen and (max-width: 700px) ' href='css/phone.css' />

mit folgenden befehlen laden wir für unterschiedliche Auflösungen unterschiedliche CSS Dateien.

Die Zweite möglichkeit ist innerhalb einer CSS Datei mehrere Bereiche zu definieren

@media all and (max-width: 700px) 
{
/* Smartphone */
}

@media all and (max-width: 1000px) and (min-width: 701px)
{
/* Tablet */
}
@media all and (min-width: 1001px) 
{
/* Desktop */
}

Mit den Media Query’s kann man auch noch mehr machen. Man kann z.B. auch Layouts zum Drucken bestimmen oder für die Ausgabe auf Projektoren und andere Endgeräte anpassen.

eine Ausführliche Beschreibung findet ihr hier http://www.w3.org/TR/css3-mediaqueries/

Auflösungen

Smartphone Auflösung Betriebssystem

  • 240 x 320 Android
  • 320 x 240 Blackberry
  • 320 x 480 iOS
  • 640 x 940 iOS
  • 480 x 854 Android
  • 480 x 800 Android
  • 960 x 540 Android
  • 1280 x 720 Android
  • 360 x 640 Symbian
  • 800 x 480 Windows Phone OS

TabletsTablet Auflösung Betriebssystem

  • 600 x 1024 Android
  • 1024 x 600 Android
  • 1280 x 768 Android
  • 1280 x 800 Android
  • 1920 x 1080 Windows 8
  • 2048 x 1536 iOS

Beispiel

pic-upload.eu

 

Frameworks

Bootstrap

ein von Twitter erstelltes HTML/ CSS Framework mit responsive aspekt

Pure CSS

Ein CSS/b HTML Framwork von Yahoo.

Tools

http://seo-textgenerator.de/index.php?Section=SEO&Action=Responsive