IndependencePreparing Websites for Retina Displays

Thursday, July 19, 12

To discuss development techniquesas they relate to high-res displays

Why are we here?

Thursday, July 19, 12

That Retina Display Looks Great!So why does my website look terrible?

Thursday, July 19, 12

Why?

Packing more pixels in the same sized screens

In the past, 72dpi graphics were just scaled down

Retina displays scale up graphics anywhere from 224 to 326ppi

99% of all bitmap graphics on the web are 72dpi.*

* I made that up, but it’s probably close or true.

Thursday, July 19, 12

So what can we do about it?

Thursday, July 19, 12

Learn from Print

Print has always had to deal with high-resolutions and varying dpi.

When dealing with bitmap images, print works with high-res sources.

Other images and typography use Resolution-Independent sources.

Embedded fonts

Vector artwork

Program FX (i.e. layer effects)

Thursday, July 19, 12

So what are the issues?

Photography

Logos and Icons

Fonts

UI elements

Thursday, July 19, 12

We’re not going to get away for bitmap graphics completely

Possible to use high-res files, but use with caution

Low res standard JPEGs of photography still look decent

New standards are being crafted right now

There are server-side and client-side options available

High-res JPEGsPhotography

Thursday, July 19, 12

Scalable Vector Graphics are like Illustrator files for the web

They look crisp and are often smaller files

Creating these can be tricky

Some special effects in Illustrator won’t work in the SVG file format

Won’t work for everything, but great for logos

SVG FilesLogos and Icons

Thursday, July 19, 12

Using web fonts helps reduce development costs

Increases SEO and can lower overall bandwidth usage

There is no shame in using web safe fonts, but there are free solutions if paid solutions are not available.

Also consider icon fonts (http://keyamoon.com/icomoon)

Advanced web typography doesn’t need graphical text(http://letteringjs.com/)

Web FontsFonts

Thursday, July 19, 12

Effects are generated by the browser. Similar to using Photoshop Layer Effects.

Effects are resolution independent.

Can have dramatic results on the speed of a website.

CSS EffectsUI Elements

Thursday, July 19, 12

Text Shadows

Multiple Text Shadows

Box Shadows

Inset Box Shadows

Multiple Box Shadows

Only on boxes and text :(

CSS Drop ShadowsCSS Effects

Thursday, July 19, 12

1.Setting the distance via X/Y

2.Setting the size (it’s possible to support spread as well)

3.Color can be set via hex code

4.or color and opacity can be set via RGBA values

CSS Drop ShadowsCSS Effects

Thursday, July 19, 12

Rounded Corners

You can make circles!

Control each corner

Border RadiusCSS Effects

Thursday, July 19, 12

Perfect Resolution IndependenceShadows and rounded corners scale beautifully

Thursday, July 19, 12

Can do linear or radial

Can do RGBA (transparency)

Can be layered for interesting effectshttp://lea.verou.me/css3patterns/

Will be supported in IE10, but we can create fallbacks

Ultimate CSS Generator is great and works just like gradients in Photoshop. http://www.colorzilla.com/gradient-editor/

CSS GradientsCSS Effects

Thursday, July 19, 12

Isn’t this more difficult?

Using web fonts shouldn’t impact design at all.

Using SVG is a little more hassle, but worth the effort.

Using CSS effects can ease development and designers only need to be aware of how we’re using them.

Designers may need to keep track of high-res assets for developers. Use “place” in Photoshop for example.

Thursday, July 19, 12

What other benefits are there?Web fonts

Lower bandwidth due to few graphicsEasier to updateNecessary for dynamic text

SVGTiny files

CSS EffectsLower bandwidth due to few graphicsEasier to updateCan change styles subtly without needing all new graphicsCSS animations!

Thursday, July 19, 12

This isn’t a mandate.There are no laws being made here.

Thursday, July 19, 12

Be aware of what’s possible.Let’s push the envelope!

Thursday, July 19, 12

Thank you for listening!Any Questions?

Thursday, July 19, 12