small ideas that make a big impact

15
by Simon East Technical Director, Yump yump.com.au Small ideas that make a BIG IMPACT Let’s talk @yumpdigital Slides available at yump.com.au/talks

Upload: simon-east

Post on 08-Feb-2017

2.410 views

Category:

Internet


1 download

TRANSCRIPT

Page 1: Small Ideas That Make A Big Impact

by Simon EastTechnical Director, Yump

yump.com.au

Small ideas that make a

BIG IMPACTLet’s talk@yumpdigital

Slides available at yump.com.au/talks

Page 2: Small Ideas That Make A Big Impact

Never stop learning. If you learn one new thing every day, you will overcome 99% over your competition.— Joe Carlozo

Page 3: Small Ideas That Make A Big Impact

What’s one simple change I can make to my work to make aBIG DIFFERENCE?Low cost. HIGH VALUE.

Page 4: Small Ideas That Make A Big Impact
Page 5: Small Ideas That Make A Big Impact

Idea #1 (for UXperts and designers)

Test Early, Test Often

Page 6: Small Ideas That Make A Big Impact

Solidifysolidifyapp.comTime required = 1 - 4 hoursCash required = $20/month

Use prototyping tools such as:

Page 7: Small Ideas That Make A Big Impact

Idea #2 (for the designers & devs)

Double Everything

Time required = minimal

Page 8: Small Ideas That Make A Big Impact

Idea #2Double Everything

What happens when graphics are not at retina resolution...

Page 9: Small Ideas That Make A Big Impact

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

Page 10: Small Ideas That Make A Big Impact
Page 11: Small Ideas That Make A Big Impact

300 x 200JPG 80% quality21 kilobytes

600 x 400JPG 31% quality16 kilobytes(25% smaller file!)

http://j.mp/retina-now

Did you know...?Retina-quality graphics can actually be smaller

Page 12: Small Ideas That Make A Big Impact

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

Page 13: Small Ideas That Make A Big Impact

Idea #3Be Responsive...and Responsive

Time required = 1 - 3 hours

Page 14: Small Ideas That Make A Big Impact

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

Page 15: Small Ideas That Make A Big Impact

Let’sconnect@yumpdigitalTHANKS

yump.com.auSlides available at yump.com.au/talks

#1 Test Early, Test Often. Prototyping.#2 Double Everything. Serve Retina.#3 Be Responsive and Responsive. Performance.