Upload
olga-voskoboinikova
View
16
Download
1
Tags:
Embed Size (px)
Citation preview
RESPONSIVEIMAGES AND WEB ICON DESIGN
/ Olga Voskoboinikova @dVosk
A lot of variability (screen sizes and densities).
CHALLENGESAdapt appropriately for each device.Render neatly in different screens.Load fast(er).
ADAPTIVE IMAGESLetting the browser scale images is a bad idea.
If you can support the mobile web,you can support anything.
From by Brad FrostMobile First Responsive Web Design
ART DIRECTIONAdapt appropriately for each device.
From by Jason GrigsbyMobile First Responsive Design
ART DIRECTION & TEXT
From by Jason GrigsbyMobile First Responsive Design
Whenever possible,
USE SVG.
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
Want to control every pixel?
JUST REMEMBERmatch the low-res pixel grid.
SVG BASICS DEMO
http://people.opera.com/andreasb/demos/demos_svgopen2009
EXTRA SVG DEMO
http://people.opera.com/andreasb/demos/demos_svgopen2009
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
IMG TIPS & TRICKSUse multiples of 6px. Pixel density matters.Compress whenever possible.Don’t include unnecessary data.Combine image formats.
Design responsively!