5. Vorteilevon responsive Webdesign
nur eine URL
SEO - kein doppelter Content
Barrierearmut
keine extra Lösung für dieses und jenes
geringerer Pflegeaufwand
14. „Fluid Grid“
Größen-Angaben relativ in %,
Schriftgrößen in em
Zielgröße : Context = Angabe in em
default Context = 16px
Runden dem Browser überlassen
15. Breakpoints
Breakpoints sollten durch den Content
vorgegeben werden und sich nicht an der
Bildschrimgröße festmachen.
Es gibt keine allgemeingültigen Breakpoints!
Angaben in den media-queries in em
— der Content gibt den Breakpoint vor.
16. Media Queries
Übersicht über relevante Queries
Name min- / max- Prefix
width x
height x
device-width x
device-height x
orientation -
resolution x
Beispiel
@media only screen tv and (min-resolution: 2dppx) {
...
}
18. Resp. Images
Technische Ansätze - Basics
Probleme
alle User laden gleiche, große Bilder
Artdirector-Problem
Austausch durch CSS führt ggf.
zum Laden ALLER Bilder.
19. Resp. Images
Technische Ansätze
<noscript data-large=“Image-large.jpg“
data-small=“Image-small.jpg“
data-alt=“Image“>
<img src=“Image-small.jpg“ alt=“Image“ />
</noscript>
kein unnötiges Laden
kann dem Artdirector-Problem begegnen
einfaches Markup
Aufwand bei der Implementierung