2. Sven Wolfermann (35)
Freelancer für moderne Webentwicklung
(HTML5, CSS3, Responsive Webdesign) aus Berlin
CSS3 Adventskalender 2010/2011
schreibt Artikel für das T3N-, PHP- und
Webstandards-Magazin (new: Screengui.de)
mobile Geek
Wer ist die Flitzpiepe da überhaupt?
Twitter: @maddesigns
Web: http://maddesigns.de
·
·
·
·
·
·
·
/
3. Responsive Webdesign
Flexible Spaltenraster, die auf Prozentwerte basieren
Variable Bilder- und Videogrößen – Bilder passen sich den Spalten an
CSS3 um Gerätegröße abzufragen und Inhalte anzupassen
·
·
·
Quelle Bild: http://macrojuice.com/
/
4. flexible Medieninhalte
keine statische Breitenangaben
img,embed,object,video{
max-width:100%;
}
Für Medien muss im CSS eine flexible Breite gesetzt werden, die Höhe
soll sich automatisch in Relation anpassen.
img,embed,object,video{
max-width:100%;/*max.originalpxwidth*/
height:auto;
/*width:auto;*/
}
/
5. Responsive Images
Problem ist, dass sich Bilddatenmengen nicht dynamisch anpassen
Große Bilder werden zwar verkleinert dargestellt, laden aber
unnötige Datenmengen
<img>-Tag ist nicht dafür ausgelegt
ein responsives Bildformat gibt es nicht
Polyfills müssen her
·
·
·
·
·
/
8. Asset Loading
Tests des Ladeverhalten mobiler Browser
Tim Kadlec – Media Query & Asset Downloading Results
/
9. Lösungsansätze für Bildgrößenproblematik
CSS3-Ansatz von Nicolas Gallagher
<imgsrc="image.jpg"alt=""data-src-600px="image-600px.jpg">
Umsetzung auf CSS-Basis
@media(min-device-width:600px){
img[data-src-600px]{
content:attr(data-src-600px,url);
}
}
@media(min-device-width:800px){
img[data-src-800px]{
content:attr(data-src-800px,url);
}
}
http://nicolasgallagher.com/responsive-images-using-css3/
/
10. Responsive Images
Ansatz der Filament Group
<imgsrc="small.jpg?full=large.jpg">
https://github.com/filamentgroup/Responsive-Images
Responsive Media - Blog Post von @drublic
/
11. Responsive Images
Die aktuell einfachste und beste Lösung meiner Meinung nach ist die
<noscript>-Lösung mit HTML5 data-Attributen
<noscriptdata-large="Koala-large.jpg"
data-small="Koala-small.jpg"data-alt="Koala">
<imgsrc="Koala-small.jpg"alt="Koala"/>
</noscript>
Vorteil: Assets die im <noscript>-Tag eingebunden sind, werden nicht
vom Browser in den DOM eingefügt (und geladen), wenn JavaScript
aktiviert ist. Ressourcen werden also nicht doppelt geladen.
http://www.monoliitti.com/images/
/
13. <picture> Element
Aktuelle W3C-Diskussion – <picture> Element
Aufbau wie <video> Element + srcset für Retina-Images
<picturewidth="500"height="500">
<sourcemedia="(min-width:45em)"srcset="large-1.jpg1x,large-2.jpg2x">
<sourcemedia="(min-width:18em)"srcset="med-1.jpg1x,med-2.jpg2x">
<sourcesrcset="small-1.jpg1x,small-2.jpg2x">
<imgsrc="small-1.jpg"alt="">
<p>Accessibletext</p>
</picture>
CSS Retina-Support für background-images
/*Safari,Chromesupportsbackground-image:-webkit-image-set();*/
background-image:-webkit-image-set(
url(cloud-sd.png)1x,url(cloud-hd.png)2x);
picture element proposal
/
15. Clown Car Technique
Media Queries innerhalb SVG
<imgsrc="file.svg"alt="responsiveimage">
Nachteil: SVG erst ab Android 4
http://www.standardista.com/responsive-images-clown-car-technique/
/
21. Lösungsvarianten für Bildausschnitte – Focal Point
Bildinhalte anders fokussieren
http://www.cdnconnect.com/docs/focal-point-css/pure-html-css-responsive-high-resolution-images-solution
/
22. Retina – hochauflösende Bilder
CSS abhängig von der Pixeldichte
@mediaonlyscreenand(-webkit-min-device-pixel-ratio:2),
onlyscreenand(min-resolution:192dpi){
/*Retina-specificstuffhere*/
}
http://www.brettjankord.com/2012/11/28/cross-browser-retinahigh-resolution-media-queries/
/
24. Icon Fonts == Dingbats on dope
Vorteil:
Farben und Größe der Icons kann leicht mit CSS angepasst werden
zusätzlich können CSS-Effekte, wie text-shadow für die Darstellung
genutzt werden
·
·
/
26. nachgezählt? Es waren nur 10 Techniken in 20min ;)
weitere interessante Links
8 Guidelines and 1 Rule for Responsive Images
Sensible jumps in responsive image file sizes
Responsive Images for Ruby on Rails
Riloadr – cross-browser framework-independent responsive images
loader
/
27. Danke für die Aufmerksamkeit!
Sven Wolfermann | maddesigns
http://maddesigns.de
HTML5 slideshow by Google
/