c2b_default

Abend 12: 13.07.2016 - HTML/CSS Engineering in Practice: Responsive Design

HTML/CSS Engineering in Practice: Responsive Design

HTML/CSS Engineering in Practice: Responsive Design

8
0.0 (0)
M. R.
Étudier
M. R.
Diese Lernkarten behandeln responsive Webdesign-Grundlagen mit Fokus auf CSS-Media-Queries, Viewport-Anpassungen und Layout-Optimierung für verschiedene Geräte. Es wird erklärt, wie fluid und adaptive Layouts funktionieren, welche Vor- und Nachteile Webfonts haben und wie progressive Enhancement sowie graceful Degradation umgesetzt werden. Entwickler profitieren von praxisnahen Tipps zum Testen und Optimieren responsiver Websites.
Cartes-fiches
8
Utilisateurs
21
Langue
Allemand
Catégorie
Informatique
Niveau
Université
Créé / Mis à jour
03.12.2016 / 19.05.2026
  • 1  / 8

Cartes-fiches

Was versteht man unter einem Polyfill

Was sind die Nachteile von WebFonts?

Der grösste Nachteil von WebFonts ist, dass diese zuerst geladen werden müssen.

Das heisst, dass entweder die Anzeige blockiert ist, bis die Schrift komplett geladen wurde. Oder aber, die Schrift wird async geladen, was zu springendem Text führen kann.

Was versteht man unter "graceful degradation"?

Bei "graceful degradation" wird für Features vom technischen Optimal-Fall ausgegangen. Sollten Funktionen auf einem Gerät/Browser nicht unterstützt werden, werden die schlicht (mit entsprechender Meldung) nicht ausgeführt/angezeigt.

https://www.sitepoint.com/progressive-enhancement-graceful-degradation-basics/

Was versteht man unter einem "adaptiven Layout"?

Adaptive Layouts verwenden für verschiedene Viewport-Grössen verschiedene Layouts, da Elemente in der Regel nicht mitwachsen und spezifisch angepasst werden müssen.

Was versteht man unter einem "fluid Layout"?

In einem "fluiden" Layout ändern Elemente entsprechend dem Viewport die Grösse. Werden in responsive Websites eingesetzt.

Stimmt nicht ganz: http://ux.stackexchange.com/questions/24406/what-is-the-exact-difference-between-fluid-and-responsive-design

The main difference is that Fluid Layouts (also called Liquid Layouts) are based on proportionally laying out your website so elements take up the same percent of space on different screen sizes, while Responsive Design uses CSS Media Queries to present different layouts based on screen sizes/type of screen.

Was bedeutet progressive enhancement?

  • Inhalt soll für alle Browser zugänglich sein (z.B. auch ohne JS)
  • Start mit Grundfunktionalität (kein JS, keine Media Queries)
  • Zusatzfunktionalität mit zusätzlichem CSS und JavaScript

Was ist eine CSS Media Query?

Mit einer Media Query können in CSS für unterschiedliche Medien spezifische Regeln angegeben werden.

In diesem Beispiel interpretiert der Browser den CSS-Block nur dann, wenn der Viewport mindestens 600px breit ist:

@media (min-width: 600px) {

  ...

}

Ein Fluid Layout sieht meistens nur innerhalb einer gewissen Bandbreite gut aus. Wenn der Unterschied zwischen den Viewports unterschiedlicher Geräte gross ist, muss häufig das Layout der Seite angepasst werden (Element werden z.B. auf kleineren Displays untereinander statt nebeneinander angezeigt). Dazu können Media Queries verwendet werden.

Welche Werkzeuge zum Testen eines responsive Designs gibt es ?

  • Resizing via Browser
  • Developer Tools des Browsers (z.B. Chrome)
  • Emulatoren / Simulatoren
  • Reales Device

Étudier