Responsive images and web icon design

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

1900 1910 1920 1930 1940 1950 1960 1970 1980 1990 20000

World production (tons/year)

IMG TIPS & TRICKSUse multiples of 6px. Pixel density matters.Compress whenever possible.Don’t include unnecessary data.Combine image formats.

Design responsively!

Design