Responsive, WTF! – Eine Website für alle Geräte – Schritt für Schritt

View Github Repository Open presentation in a new window

deeesi

See all presentation from deeesi

Responsive, WTF! – Eine Website für alle Geräte – Schritt für Schritt

0 0

praesentation-responsive

On Github deeesi / praesentation-responsive

Responsive, WTF!

Make flexible websites

Eine Website für alle Geräte

Media Queries erlauben unterschiedliche Layouts je nach verfügbarem Platz im Browserfenster und ermöglichen damit Responsive Webdesign.

Unterstützung

Aktuelle Versionen von Firefox, Safari, Chrome, Opera und IE ab Version 9. Ältere Browser: respond.js oder HTML5 Boilerplate

Schritt für Schritt

Für welche Auflösung soll optimiert werden?

Als Standard optimieren wir hier für iPhone, iPad und Monitor

Schritt für Schritt

Breakpoints

Soll das Layout sich flüssig (Prozentwerte) oder anhand fester Breakpoints (Pixelwerte) verändern?

Schritt für Schritt

Mobile First / Desktop First

Art der Umsetzung. Mobile First: Die kleinste Version wird zuerst umgesetzt. Vorteil: geringes Datenvolumen. Desktop First: Die größte Version gilt als Default. Vorteil: Wenn die Seite im IE < 9 ohne JS funktionieren soll.

Auflösungen?!

iPhone 3G/3GS: 320 x 480 iPod Touch: 320 x 480

iPhone 4/4S: 320 x 480 // Retina-Display = 640 x 960

iPhone 5: 568 x 320 // Retina-Display = 1136 x 640 Pixel

Liste Geräteauflösungen

Standard Media Query

1) screen.css für allgemeine Angaben.

<link rel="stylesheet" type="text/css" href="css/screen.css" media="screen"> class="javascript" contenteditable="">

2) für z.B. iPhone Portrait

<link rel="stylesheet" type="text/css" href="css/320.css" media="screen and (max-width: 479px)"> class="javascript" contenteditable="">

3) für z.B. Android Portrait, iPhone Landscape

<link rel="stylesheet" type="text/css" href="css/480.css" media="screen and (min-width: 480px) and (max-width: 767px)"> class="javascript" contenteditable="">

4) für z.B. iPad Portrait (768px), Android Landscape (800px)

<link rel="stylesheet" type="text/css" href="css/800.css" media="screen and (min-width: 768px) and (max-width: 999px)"> class="javascript" contenteditable="">

5) für große Auflösungen (z.B. dem Standard 1024 x 768, iPad Landscape).

<link rel="stylesheet" type="text/css" href="css/1024.css" media="screen and (min-width: 1000px) and (max-width: 1179px)"> class="javascript" contenteditable="">

6) für sehr große Auflösungen (Desktop)

<link rel="stylesheet" type="text/css" href="css/1280.css" media="screen and (min-width: 1180px)"> class="javascript" contenteditable="">

Retina-Display

Auf Retina-Displays entspricht 1 CSS-Pixel 4 Gerätepixel. Sinn = schärfere Grafiken und Bilder Problem Bilder müssen für die vierfache Größe aufbereitet werden. Statt z.B. 10 x 10px wären dies 20 x 20px und sie werden nur bei folgendem Media Query geladen. @media only screen and (-webkit-min-device-pixel-ratio : 2) {...}

Zoom bei Devices

Mobile Devices skalieren den Content selbstständig. Um dies zu kontrollieren gibt es den Meta-Tag:

Zoom durch den User möglich: 
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.5" name="viewport"> class="javascript" contenteditable="">
Kein Zoom möglich: 
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0" name="viewport"> class="javascript" contenteditable="">