responsive images and web icon design
TRANSCRIPT
![Page 1: Responsive images and web icon design](https://reader030.vdocuments.site/reader030/viewer/2022032513/55d2168ebb61eb13218b4580/html5/thumbnails/1.jpg)
RESPONSIVEIMAGES AND WEB ICON DESIGN
/ Olga Voskoboinikova @dVosk
![Page 2: Responsive images and web icon design](https://reader030.vdocuments.site/reader030/viewer/2022032513/55d2168ebb61eb13218b4580/html5/thumbnails/2.jpg)
A lot of variability (screen sizes and densities).
![Page 3: Responsive images and web icon design](https://reader030.vdocuments.site/reader030/viewer/2022032513/55d2168ebb61eb13218b4580/html5/thumbnails/3.jpg)
CHALLENGESAdapt appropriately for each device.Render neatly in different screens.Load fast(er).
![Page 4: Responsive images and web icon design](https://reader030.vdocuments.site/reader030/viewer/2022032513/55d2168ebb61eb13218b4580/html5/thumbnails/4.jpg)
ADAPTIVE IMAGESLetting the browser scale images is a bad idea.
![Page 5: Responsive images and web icon design](https://reader030.vdocuments.site/reader030/viewer/2022032513/55d2168ebb61eb13218b4580/html5/thumbnails/5.jpg)
If you can support the mobile web,you can support anything.
From by Brad FrostMobile First Responsive Web Design
![Page 6: Responsive images and web icon design](https://reader030.vdocuments.site/reader030/viewer/2022032513/55d2168ebb61eb13218b4580/html5/thumbnails/6.jpg)
ART DIRECTIONAdapt appropriately for each device.
From by Jason GrigsbyMobile First Responsive Design
![Page 7: Responsive images and web icon design](https://reader030.vdocuments.site/reader030/viewer/2022032513/55d2168ebb61eb13218b4580/html5/thumbnails/7.jpg)
ART DIRECTION & TEXT
From by Jason GrigsbyMobile First Responsive Design
![Page 8: Responsive images and web icon design](https://reader030.vdocuments.site/reader030/viewer/2022032513/55d2168ebb61eb13218b4580/html5/thumbnails/8.jpg)
Whenever possible,
USE SVG.
![Page 9: Responsive images and web icon design](https://reader030.vdocuments.site/reader030/viewer/2022032513/55d2168ebb61eb13218b4580/html5/thumbnails/9.jpg)
WTF IS SVG?It's made of vectors, baby!
Stays crisp and sharp at any resolution.It's light and allows image sprites.XML text file that can be created in Sketch.
with JS and CSS.Animated and interactive
![Page 10: Responsive images and web icon design](https://reader030.vdocuments.site/reader030/viewer/2022032513/55d2168ebb61eb13218b4580/html5/thumbnails/10.jpg)
Want to control every pixel?
JUST REMEMBERmatch the low-res pixel grid.
![Page 11: Responsive images and web icon design](https://reader030.vdocuments.site/reader030/viewer/2022032513/55d2168ebb61eb13218b4580/html5/thumbnails/11.jpg)
SVG BASICS DEMO
http://people.opera.com/andreasb/demos/demos_svgopen2009
![Page 12: Responsive images and web icon design](https://reader030.vdocuments.site/reader030/viewer/2022032513/55d2168ebb61eb13218b4580/html5/thumbnails/12.jpg)
EXTRA SVG DEMO
http://people.opera.com/andreasb/demos/demos_svgopen2009
![Page 13: Responsive images and web icon design](https://reader030.vdocuments.site/reader030/viewer/2022032513/55d2168ebb61eb13218b4580/html5/thumbnails/13.jpg)
EXTRA SVG DEMO
1900 1910 1920 1930 1940 1950 1960 1970 1980 1990 20000
500
1000
1500
2000
2500
3000
World production (tons/year)
http://people.opera.com/andreasb/demos/demos_svgopen2009
![Page 14: Responsive images and web icon design](https://reader030.vdocuments.site/reader030/viewer/2022032513/55d2168ebb61eb13218b4580/html5/thumbnails/14.jpg)
IMG TIPS & TRICKSUse multiples of 6px. Pixel density matters.Compress whenever possible.Don’t include unnecessary data.Combine image formats.
Design responsively!