The document discusses techniques for preparing websites to look good on high resolution "Retina" displays. It notes that most web graphics are too low resolution, causing sites to look pixelated or blurry on Retina screens. The document recommends using high resolution images, Scalable Vector Graphics (SVG), web fonts, and resolution-independent CSS effects like shadows, rounded corners, and gradients to build sites that will scale smoothly to high pixel density displays without losing quality. These techniques can improve site performance and make the development process easier.

1. Independence
Preparing Websites for Retina Displays
Thursday, July 19, 12

2. Why are we here?
To discuss development techniques
as they relate to high-res displays
Thursday, July 19, 12

3. That Retina Display Looks Great!
So why does my website look terrible?
Thursday, July 19, 12

4. 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

5. So what can we do about it?
Thursday, July 19, 12

6. 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

7. So what are the issues?
Photography
Logos and Icons
Fonts
UI elements
Thursday, July 19, 12

8. Photography
High-res JPEGs
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
Thursday, July 19, 12

9. Logos and Icons
SVG Files
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
Thursday, July 19, 12

10. Fonts
Web Fonts
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/)
Thursday, July 19, 12

11. UI Elements
CSS Effects
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.
Thursday, July 19, 12

12. CSS Effects
CSS Drop Shadows
Text Shadows
Multiple Text Shadows
Box Shadows
Inset Box Shadows
Multiple Box Shadows
Only on boxes and text :(
Thursday, July 19, 12

13. CSS Effects
CSS Drop Shadows
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
Thursday, July 19, 12

14. CSS Effects
Border Radius
Rounded Corners
You can make circles!
Control each corner
Thursday, July 19, 12

15. Perfect Resolution Independence
Shadows and rounded corners scale beautifully
Thursday, July 19, 12

16. CSS Effects
CSS Gradients
Can do linear or radial
Can do RGBA (transparency)
Can be layered for interesting effects
http://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/
Thursday, July 19, 12

17. 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

18. What other benefits are there?
Web fonts
Lower bandwidth due to few graphics
Easier to update
Necessary for dynamic text
SVG
Tiny files
CSS Effects
Lower bandwidth due to few graphics
Easier to update
Can change styles subtly without needing all new graphics
CSS animations!
Thursday, July 19, 12

19. This isn’t a mandate.
There are no laws being made here.
Thursday, July 19, 12

20. Be aware of what’s possible.
Let’s push the envelope!
Thursday, July 19, 12

21. Thank you for listening!
Any Questions?
Thursday, July 19, 12