Resolution Independence - Preparing Websites for Retina Displays
- 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