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.
3. RETINA DISPLAY
High Resolution Screen Technology introduced by Apple.
Provides greater pixel density and higher contrast ratios.
Standard Retina Display
4. iPhone iPad Mac
4 4S The New iPad Macbook Pro
640x960 px 1536x2048 px 2880x1800 px
(Previously 320x480) (Previously 768x1024) (Previously 1440x900)
5. SO IT MAKES STUFF LOOK
MAGICALLY BETTER, RIGHT?
6. THAT DEPENDS
• Text and CSS-generated art
are super sharp. AWESOME
• Images and CSS background
textures are pixelated.
UH OH, PROBLEM
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. RETINA DISPLAY TEXTURES
Tap Into Better Clarity For Your Mobile Projects
Mark Riggan
Twitter (@asuwebdesign)
Dribbble (markr)