BUILDING WEBSITES FOR RETINA DISPLAYS:  MAKING FRIENDS   WITH PIXELS              Shoshi Roberts                @shoshizilla
PIXEL PERFECTION,            NOT JUST FOR APPS• Many devices have a 2x pixel density or higher (the iPhone 4 is among them...
HOW BLURRY?Not Optimized   Optimized
HOW BLURRY?Not Optimized   Optimized
SHOW ME THE CODE!
#1 - FLUID LAYOUT• First, use          responsive or fluid design to create a page that looks great on all devices• Alterna...
#2 - USE CSS3• Really, as    much as you like• Mobile browsers, especially webkit, are largely up to date  and support the...
#3 - OPTIMIZE YOUR IMAGES• Make   2 versions: • One   at normal size (e.g. 100px by 100px) • One   at double size (e.g. 20...
#4A - WRITE MEDIA QUERIESh1.icon {  width: 100px;  height: 100px;  /* This is your 100px by 100px image */  background: tr...
#4B - OR USE SVGHTML<object data="icon.svg" type="image/svg+xml" class="vector"></object>CSS - Fluid.vector {  /* Use what...
#5 - TEST, TEST, TEST!• Look   at it on as many devices as you can.• Pay   the most attention to the platforms your users ...
WRAPPING IT UP• The   arms race for pixel density is on, make images that scale• Use   a CSS3 when you can• Use   media qu...
THANKS        AND HAPPY HACKING!  @shoshizilla for @ladieswhocodeSpecial Thanks to @mintdigital for hosting
Upcoming SlideShare
Loading in …5
×

Building Websites for Retina Displays: Making Friends with Pixels

2,526 views
2,397 views

Published on

Covers how to optimize images for high pixel density displays using media queries or SVG.

Published in: Technology, Art & Photos
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,526
On SlideShare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Building Websites for Retina Displays: Making Friends with Pixels

  1. 1. BUILDING WEBSITES FOR RETINA DISPLAYS: MAKING FRIENDS WITH PIXELS Shoshi Roberts @shoshizilla
  2. 2. PIXEL PERFECTION, NOT JUST FOR APPS• Many devices have a 2x pixel density or higher (the iPhone 4 is among them)• Images that are not optimized for them will be blurry and sad• There is no automatic standard for including hi-res images BUT THERE ARE SOME SOLUTIONS...
  3. 3. HOW BLURRY?Not Optimized Optimized
  4. 4. HOW BLURRY?Not Optimized Optimized
  5. 5. SHOW ME THE CODE!
  6. 6. #1 - FLUID LAYOUT• First, use responsive or fluid design to create a page that looks great on all devices• Alternatively, make a mobile specific version of your site
  7. 7. #2 - USE CSS3• Really, as much as you like• Mobile browsers, especially webkit, are largely up to date and support the latest properties.• CSS3 for gradients, shadows, etc. will eliminate the need for using images in many cases• It improves performance! (like anything, when used in moderation)
  8. 8. #3 - OPTIMIZE YOUR IMAGES• Make 2 versions: • One at normal size (e.g. 100px by 100px) • One at double size (e.g. 200px by 200px)
  9. 9. #4A - WRITE MEDIA QUERIESh1.icon { width: 100px; height: 100px; /* This is your 100px by 100px image */ background: transparent url(icon.png) 0 0 no-repeat;}@media screen and (-webkit-min-device-pixel-ratio: 2) and (-o-min-device-pixel-ratio: 2) and (min--moz-device-pixel-ratio: 2) and (min-device-pixel-ratio: 2) { h1.icon { /* This is your 200px by 200px image */ background: transparent url(icon-2x.png) 0 0 no-repeat; -moz-background-size: 100px 100px; /* Firefox 3.6) */ -o-background-size: 100px 100px; /* Opera 9.5 */ -webkit-background-size: 100px 100px; /* Safari 3.0 */ background-size: 100px 100px; }}
  10. 10. #4B - OR USE SVGHTML<object data="icon.svg" type="image/svg+xml" class="vector"></object>CSS - Fluid.vector { /* Use whatever percentages you like, the content will scale */ width: 90%; height: 90%;}
  11. 11. #5 - TEST, TEST, TEST!• Look at it on as many devices as you can.• Pay the most attention to the platforms your users visit on.
  12. 12. WRAPPING IT UP• The arms race for pixel density is on, make images that scale• Use a CSS3 when you can• Use media queries and SVG to optimize your image display
  13. 13. THANKS AND HAPPY HACKING! @shoshizilla for @ladieswhocodeSpecial Thanks to @mintdigital for hosting

×