HTML / CSS LEVEL 4
Teil 3 - Responsive Design
Mobile Internet
Einige Fakten
- 1.9 Milliarden Mobile Nutzer
- ~50% des Internetvolumens kommt von Mobile
- ~20'000 verschiedene Android Geräte
Responsive Design
- Ethan Marcotte etablierte 2010 den Begriff „Responsive Webdesign“
- Flexibles Design welches sich dem Anzeigegerät anpasst, und somit "Responsive" ist
- Kurz auch RWD (Responsive Web Design)
Beispiele Responsive Design
Zwei Konzepte
Adaptive
- Von Aaron Gustafson 2011
- Arbeitet mit Progressive Enhancement
- Seite wird auf mehrere Ausgabegeräte optimiert
- Beschränkte Flexibilität
- Beispiel:
http://colly.com/
Responsive
- Von Ethan Marcotte 2010
- Name stammt von "Responsive Architecture" ab
- Passt sich der Umgebung an
- Sehr flexibel
- Beispiel:
http://www.anderssonwise.com/
Layout Arten
CSS Media Queries
- Seit 2012
- Breite und Höhe des Browserfensters
- Größe des Gerätes selbst
- Bildschirmauflösung
- Orientierung (Hoch- oder Querformat)
- Eingabemöglichkeiten (Tastatur, Fingergeste [Touch], Sprache)
@media since 1994
- Der Grundgedanke wurde schon in HTML4 angesprochen:
http://www.w3.org/TR/html4/types.html#h-6.13 - In CSS2 @media für print styles
p {
color: blue;
}
@media(print) {
p {
color: black;
}
}
Beispiel Print Style
p {
color: blue;
}
@media screen and (min-width: 300px) {
p {
color: red;
}
}
Media Queries in CSS3
@media (width: 60em) { /* Breite entspricht genau 60em */ }
@media (min-width: 50em) { /* Breite beträgt mindestens 50em */ }
@media (max-width: 70em) { /* Breite beträgt höchstens 70em */ }
@media (device-width: 800px) { /* Breite entspricht genau 800 Pixel */ }
@media (min-device-width: 800px) { /* Breite beträgt mindestens 800px */ }
@media (max-device-width: 1024px) { /* Breite beträgt höchstens 1024px */ }
@media (orientation: portrait) { /* Formate für hochformatige Ausgabemedien */ }
Arten von Media Queries
<meta name="viewport"
content="width=device-width, initial-scale=1, user-scalable=no">
Viewport Meta Tag
- Wird für die korrekte Anzeige verwendet (physische Breite)
- Muss innerhalb des <head> platziert werden
- Optionen:
- width=device-width, sorgt für die richtige Skalierung
- initial-scale=1, stellt den Zoom-Level richtig ein
- user-scalable=no, verhindert Zoom von User (nur falls nötig benutzen)
Vorgehen bei Responsive Design
Desktop First
-
Design wird zuerst für Desktop variante erstellt
-
Danach werden Anpassungen gemacht damit die Seite auch auf Mobile funktioniert
-
Die Seite wird meistens vielseitiger von der Gestaltung auf Desktop
-
Die Mobile Version ist meistens nicht gleichwertig
Mobile First
-
Design wird zuerst für Mobile variante erstellt
-
Danach werden Anpassungen gemacht damit die Seite auch auf Desktop funktioniert
-
Hält das Design meist sehr schlicht, was eher als Vorteil gilt
-
Sehr natürlicher aufbau da meist:
von Klein zu Gross == wenig styling zu mehr styling
Exclusive Media Queries
-
Es werden immer min-width in Kombination mit max-width queries verwendet
-
Nur ein spezifischer Bereich wird adressiert
-
Styles müssen zum Teil kopiert werden
-
Weniger Abhängigkeiten, was den Code sauberer gestaltet
Übungen
JSBins
HTML / CSS IV - Teil 3 - Responsive Design
By Gion Kunz
HTML / CSS IV - Teil 3 - Responsive Design
- 2,779