Your SlideShare is downloading. ×
Retina Display - Supporting in Web Projects
Retina Display - Supporting in Web Projects
Retina Display - Supporting in Web Projects
Retina Display - Supporting in Web Projects
Retina Display - Supporting in Web Projects
Retina Display - Supporting in Web Projects
Retina Display - Supporting in Web Projects
Retina Display - Supporting in Web Projects
Retina Display - Supporting in Web Projects
Retina Display - Supporting in Web Projects
Retina Display - Supporting in Web Projects
Retina Display - Supporting in Web Projects
Retina Display - Supporting in Web Projects
Retina Display - Supporting in Web Projects
Retina Display - Supporting in Web Projects
Retina Display - Supporting in Web Projects
Retina Display - Supporting in Web Projects
Retina Display - Supporting in Web Projects
Retina Display - Supporting in Web Projects
Retina Display - Supporting in Web Projects
Retina Display - Supporting in Web Projects
Retina Display - Supporting in Web Projects
Retina Display - Supporting in Web Projects
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Retina Display - Supporting in Web Projects

436

Published on

Published in: Technology, Art & Photos
1 Comment
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total Views
436
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
12
Comments
1
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Retina Display The highest resolution in websites and apps today
  • 2. What’s a Retina Display?
  • 3. Overview • Marketing Term created by Apple • iPhone 4 was the first device (2010) • High pixel density displays (~300 ppi or greater) • One pixel split into 4 pixels • Drastically reduces pixelation
  • 4. See the difference?
  • 5. See the difference?
  • 6. Supported Devices Device Resolution Pixel Density iPhone 4S 960x640 326 ppi iPhone 5 1136x640 326 ppi iPad 3rd + 4th Gen. 2048x1536 264 ppi Macbook Pro 13” 2560x1600 227 ppi Macbook Pro 15” 2880x1800 220 ppi ...other companies investing as well in HiDPi displays
  • 7. Designing for Retina
  • 8. • Use for rasterized retina artwork • Setup document 2x normal resolution (960w @1x = 1920w @2x) • Keep resolution at 72 ppi • Typography follows 2x rule (14px @1x = 28px @2x) • Layer Style measurements divisible by 2 • Pay attention to zoom levels
  • 9. • Use for vectorized retina artwork • Does not require document setup adjustments • Trim artboards to artwork when possible • SVG format great for icons, logos, small graphics • Export to <canvas> via free Ai plugin
  • 10. Don’t forget favicons! • Used for both websites and apps • Supports HiDPi • Saved as .png (Can use Photoshop or Illustrator) • Various sizes for mobile devices
  • 11. Developing for Retina
  • 12. Raster Artwork .jpg, .gif, .png Vector Artwork .svg, <canvas> Choose the right file type
  • 13. Exporting Raster • Export artwork twice per image (1x and 2x the default resolution) • Append @2x to file name for retina version (image.png for 1x, image@2x.png for 2x) • Pay attention to layer style settings! • Tip: Use ImageOptim for safe image compressions
  • 14. Exporting Vector • Export artwork only once! • Trim artboards to artwork when possible (Lower file size and greater flexibility in CSS positioning) • Use SVG default settings (SVG 1.1) • SVG now fully recommended* (Not supported in IE8 or lower, Android Browser 2.3 or lower)
  • 15. Background Images .sweet-graphic { width: 50px; height: 50px; background-image: url(“images/sweet-graphic.png”); } • Use media queries for Background Images (raster only) • Set background-size property to size of original graphic • Tip: SVG backgrounds require background-size by default
  • 16. Background Images @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .sweet-graphic { background-image: url(“images/sweet-graphic@2x.png”); background-size: 50px auto; } }
  • 17. Inline Images • Use Retina.JS for Inline Images • Store both 1x and 2x graphics in same directory
  • 18. Favicons! <!-- For iPhone w/ retina --> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/filename.png"> <!-- For iPad w/o retina--> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/filename.png"> <!-- For iPad w/ retina --> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/filename.png"> <!-- For iPhone 3G, iPod Touch and Android, size=”57x57” --> <link rel="apple-touch-icon-precomposed" href="/filename.png"> <!-- For everything else --> <link rel="shortcut icon" href="/favicon.png">
  • 19. Selling for Retina
  • 20. The benefits are clear! • PC + Mac devices moving toward HiDPi screens • Mobile manufacturers ahead of the curve • Improves user experience • No performance hit on older technology • Great for web/mobile apps, photo-centric sites
  • 21. 10%NEW PROJECTS TODAY • Retroactive projects currently quoted on per case basis (Not enough information at this time) • Projects already in the mix with retina (Picture.com, TweetBox, Ateb, Atlantic BT, Docurep, Muzik, etc.)
  • 22. Retina Display The highest resolution in websites and apps today

×