What are the small things that separate the great designers and developers from the rest? If we can spare a few more hours on a project that would deliver a big impact on the quality of the final outcome, what would we do? From simple prototyping to performance testing, I will share the benefits of building these simple ideas into your methodology that will set you apart.
Simon East is a versatile multi-faceted developer and architect, and currently heads up the technical team at Yump, a digital agency in Melbourne, Australia. He is passionate about performance optimisation and creating user-centred interfaces which are simple to use. Away from work he enjoys volunteering to help inspire young people.
9. Umm...
What’s a retina screen?
Super high density screen, where the pixels are barely perceptible.
• iPhone 4 and above
• iPad 3 and above
• Numerous Android devices
• MacBook Pro with Retina
• The new 4K iMac
10.
11. 300 x 200
JPG 80% quality
21 kilobytes
600 x 400
JPG 31% quality
16 kilobytes
(25% smaller file!)
http://j.mp/retina-now
Did you know...?
Retina-quality graphics can
actually be smaller
12. The simplest solution:
Serve only retina images
+ Super easy to code (just specify the intended width/height in HTML/CSS)
+ Browsers never have to download two sets of images
+ Can actually end up with smaller files (not as wasteful as we commonly think)
– Generally need to stick with <img> tag as background-size not supported in IE 8
<img src=”image_600x300.jpg” width=”300” height=”150”>
http://j.mp/retina-now
14. My performance checklist:
• Javascript at bottom of page wherever possible
• Background colour behind images
• Image sizes are specified in HTML or CSS
• Server is sending correct caching headers (see HTML5
boilerplate .htaccess)
• Use CDNs where possible and/or CloudFlare (and Railgun)
• SPDY (included with CloudFlare paid plan)
Time required = 1 - 3 hours