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

http://www.mrassociates.org/

https://www.zurich.ch/​

http://oddeven.ch/en/​

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

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

p {
  color: blue;
}

@media(print) {
  p {
    color: black;
  }
}

Beispiel Print Style

http://jsbin.com/puyuqo/edit?html,css,output

p {
  color: blue;
}

@media screen and (min-width: 300px) {
  p {
    color: red;
  }
}

Media Queries in CSS3

http://jsbin.com/jopoca/edit?html,css,output​

@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

http://jsbin.com/satali/edit?html,css,output​

http://jsbin.com/qohexi/edit?html,css,output

Made with Slides.com