Independence                           Preparing Websites for Retina DisplaysThursday, July 19, 12
Why are we here?              To discuss development techniques              as they relate to high-res displaysThursday, ...
That Retina Display Looks Great!             So why does my website look terrible?Thursday, July 19, 12
Why?                   Packing more pixels in the same sized screens                   In the past, 72dpi graphics were ju...
So what can we do about it?Thursday, July 19, 12
Learn from Print                   Print has always had to deal with high-resolutions and varying dpi.                   W...
So what are the issues?                   Photography                   Logos and Icons                   Fonts           ...
Photography             High-res JPEGs                   We’re not going to get away for bitmap graphics completely       ...
Logos and Icons             SVG Files                   Scalable Vector Graphics are like Illustrator files for the web    ...
Fonts             Web Fonts                   Using web fonts helps reduce development costs                   Increases S...
UI Elements             CSS Effects                   Effects are generated by the browser. Similar to using Photoshop    ...
CSS Effects             CSS Drop Shadows                   Text Shadows                   Multiple Text Shadows           ...
CSS Effects             CSS Drop Shadows             1.Setting the distance via X/Y             2.Setting the size (it’s p...
CSS Effects             Border Radius                   Rounded Corners                   You can make circles!           ...
Perfect Resolution Independence             Shadows and rounded corners scale beautifullyThursday, July 19, 12
CSS Effects             CSS Gradients                   Can do linear or radial                   Can do RGBA (transparenc...
Isn’t this more difficult?                   Using web fonts shouldn’t impact design at all.                   Using SVG is...
What other benefits are there?                   Web fonts                     Lower bandwidth due to few graphics         ...
This isn’t a mandate.             There are no laws being made here.Thursday, July 19, 12
Be aware of what’s possible.                   Let’s push the envelope!Thursday, July 19, 12
Thank you for listening!                              Any Questions?Thursday, July 19, 12
Upcoming SlideShare
Loading in …5
×

Resolution Independence - Preparing Websites for Retina Displays

1,023 views

Published on

A presentation for non-technical designers on front-end development for Resolution Independence.

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

No Downloads
Views
Total views
1,023
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Resolution Independence - Preparing Websites for Retina Displays

  1. 1. Independence Preparing Websites for Retina DisplaysThursday, July 19, 12
  2. 2. Why are we here? To discuss development techniques as they relate to high-res displaysThursday, July 19, 12
  3. 3. That Retina Display Looks Great! So why does my website look terrible?Thursday, July 19, 12
  4. 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. 5. So what can we do about it?Thursday, July 19, 12
  6. 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. 7. So what are the issues? Photography Logos and Icons Fonts UI elementsThursday, July 19, 12
  8. 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 availableThursday, July 19, 12
  9. 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 logosThursday, July 19, 12
  10. 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. 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. 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. 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 valuesThursday, July 19, 12
  14. 14. CSS Effects Border Radius Rounded Corners You can make circles! Control each cornerThursday, July 19, 12
  15. 15. Perfect Resolution Independence Shadows and rounded corners scale beautifullyThursday, July 19, 12
  16. 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. 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. 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. 19. This isn’t a mandate. There are no laws being made here.Thursday, July 19, 12
  20. 20. Be aware of what’s possible. Let’s push the envelope!Thursday, July 19, 12
  21. 21. Thank you for listening! Any Questions?Thursday, July 19, 12

×