RETINA DISPLAY TEXTURES   Tap Into Better Clarity For Your Mobile Projects                    Mark Riggan
WHAT’S A RETINA DISPLAY?
RETINA DISPLAYHigh Resolution Screen Technology introduced by Apple.Provides greater pixel density and higher contrast rat...
iPhone                      iPad                       Mac    4         4S          The New iPad              Macbook Pro6...
SO IT MAKES STUFF LOOKMAGICALLY BETTER, RIGHT?
THAT DEPENDS• Text and CSS-generated art  are super sharp. AWESOME• Images and CSS background  textures are pixelated.  UH...
OK, LET’S CLEAR THIS UP
FOR DESIGNERS• Setup document at 200% scale of baseline resolution •   Export at 50% scale for non-Retina Display •   Pres...
image2x.png (Original)   image.png (Reduced)     600x600                  300x300
FOR DEVELOPERS/* Original Image */selector { width: 300px; height: 300px; background-image: image.png; }/* For Retina Disp...
Before (300x300)   After (600x600)
Before (300x300)   After (600x600)
SWEET! LET’S SUMMARIZE
IN SUMMARY• Enhances Quality for Users• Easy to Implement (minimal code)• Try Limiting to High Traffic Areas •   Can be Labo...
RETINA DISPLAY TEXTURES   Tap Into Better Clarity For Your Mobile Projects                  Mark Riggan                 Tw...
Upcoming SlideShare
Loading in...5
×

Retina Display Textures

5,298

Published on

The growing popularity of Apple's Retina Display is changing the way we think about websites. Learn how we can enhance our textures through CSS for devices that have Retina Display.

Published in: Design, Technology, Business
2 Comments
6 Likes
Statistics
Notes
No Downloads
Views
Total Views
5,298
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
92
Comments
2
Likes
6
Embeds 0
No embeds

No notes for slide

Retina Display Textures

  1. 1. RETINA DISPLAY TEXTURES Tap Into Better Clarity For Your Mobile Projects Mark Riggan
  2. 2. WHAT’S A RETINA DISPLAY?
  3. 3. RETINA DISPLAYHigh Resolution Screen Technology introduced by Apple.Provides greater pixel density and higher contrast ratios. Standard Retina Display
  4. 4. iPhone iPad Mac 4 4S The New iPad Macbook Pro640x960 px 1536x2048 px 2880x1800 px (Previously 320x480) (Previously 768x1024) (Previously 1440x900)
  5. 5. SO IT MAKES STUFF LOOKMAGICALLY BETTER, RIGHT?
  6. 6. THAT DEPENDS• Text and CSS-generated art are super sharp. AWESOME• Images and CSS background textures are pixelated. UH OH, PROBLEM
  7. 7. OK, LET’S CLEAR THIS UP
  8. 8. FOR DESIGNERS• Setup document at 200% scale of baseline resolution • Export at 50% scale for non-Retina Display • Preserves image quality• Total of 2 output files • Low-res file • High-res file (2x resolution)
  9. 9. image2x.png (Original) image.png (Reduced) 600x600 300x300
  10. 10. FOR DEVELOPERS/* Original Image */selector { width: 300px; height: 300px; background-image: image.png; }/* For Retina Displays */@media all and (-webkit-min-device-pixel-ratio: 2) { selector { background-image: image2x.png; background-size: 300px auto; }}
  11. 11. Before (300x300) After (600x600)
  12. 12. Before (300x300) After (600x600)
  13. 13. SWEET! LET’S SUMMARIZE
  14. 14. IN SUMMARY• Enhances Quality for Users• Easy to Implement (minimal code)• Try Limiting to High Traffic Areas • Can be Labor Intensive • Increases Bandwidth Usage• Impact on Future of Web?
  15. 15. RETINA DISPLAY TEXTURES Tap Into Better Clarity For Your Mobile Projects Mark Riggan Twitter (@asuwebdesign) Dribbble (markr)
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×