Building Websites for Retina Displays: Making Friends with Pixels
2 likes1,983 views
This document discusses how to build websites that look good on high pixel density displays like the iPhone 4's Retina display. It recommends using responsive design so the site looks good on all devices. It also recommends using CSS3 properties instead of images when possible, optimizing images by creating higher resolution versions, and using media queries or SVG to serve the appropriate image based on the device's pixel density. The document stresses testing websites on different devices and prioritizing the platforms your users visit most.
Building Websites for Retina Displays: Making Friends with Pixels
- 1. BUILDING WEBSITES FOR RETINA DISPLAYS: MAKING FRIENDS WITH PIXELS Shoshi Roberts @shoshizilla
- 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. HOW BLURRY? Not Optimized Optimized
- 4. HOW BLURRY? Not Optimized Optimized
- 5. SHOW ME THE CODE!
- 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. #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. #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. #4A - WRITE MEDIA QUERIES h1.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. #4B - OR USE SVG HTML <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. #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. 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. THANKS AND HAPPY HACKING! @shoshizilla for @ladieswhocode Special Thanks to @mintdigital for hosting