Understand When You Can, Fake It When You Can’t

UNDERSTAND WHEN YOU CAN, FAKE IT WHEN YOU CAN’T #TALKWD
7 MAY 14

PETER GASSTON  @STOPSATGREEN

TECHNOLOGIST & FRONT-END LEAD  REHABSTUDIO

THE DECISIONS YOU MAKE HAVE WEIGHT. @stopsatgreen

(I DON’T REALLY WANT YOU TO DISAGREE WITH ME) @stopsatgreen

DESIGN DECISIONS @stopsatgreen

COPY DECISIONS @stopsatgreen

TECHNICAL DECISIONS @stopsatgreen

document.addEventListener('DOMContentLoaded', function() { // your code here }); @stopsatgreen $(document).ready(function()
{ // your code here }); VS.

“Oakley’s monster page of baubles.” @stopsatgreen - Phil Hawksworth http://hawksworx.com/blog/oakleys-monster-page-of-baubles/

471 HTTP requests 85.4MB page weight 2'45" DOMContentLoaded 4'10" Load
@stopsatgreen

http://httparchive.org/trends.php

http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/

Google research found that an increase in page load time
from 0.4 seconds to 0.9 seconds saw traffic and ad revenue drop by 20%. Amazon calculated that slowing the page load by one second would cost them $1.6 billion over a year. @stopsatgreen http://www.websiteoptimization.com/speed/tweak/psychology-web-performance/

47 percent expect a web page to load in two
seconds or less. 40 percent abandon a website that takes longer than three seconds to load. http://blog.kissmetrics.com/loading-time/

79 percent of shoppers dissatisfied with performance are less likely
to visit again. 52 percent say that page load performance is important to their site loyalty. http://blog.kissmetrics.com/loading-time/

<body></body> @stopsatgreen VS. <body>…</body>

“Over a mobile connection, it may take 2 seconds to
download the initial page of HTML, but it can be immediately rendered. @stopsatgreen

“Even as the rest of the JavaScript application is being
downloaded, the user can interact with the page. It feels 5x faster.” @stopsatgreen - AirBnB http://nerds.airbnb.com/weve-launched-our-first-nodejs-app-to-product

“By rendering our page content on the server and deferring
all JavaScript execution… we’ve dropped the time to first Tweet to one-fifth of what it was.” @stopsatgreen - Twitter https://blog.twitter.com/2012/improving-performance-on-twittercom

font-family: Georgia, serif; @stopsatgreen VS. font-family: 'My Font', serif;

<a href="#" class="button">Submit</a> @stopsatgreen VS. <button type="submit">Submit</button>

<a href="#" class="button">Submit</a> @stopsatgreen VS. <a href="//example.com" class="button">Link</a> ✗

“When an elevator fails, it's useless. When an escalator fails,
it becomes stairs. We should be building escalators, not elevators.” @stopsatgreen - Jake Archibald http://jakearchibald.com/2013/progressive-enhancement-still-important/

<a href="//example.com" class="button">Link</a> @stopsatgreen VS. <button type="submit">Submit</button> Goes somewhere Does
something

<label>Number</label> <input type="text"> @stopsatgreen VS. <label for="number">Number</label> <input type="text" id="number">

<label><input type="text"> Number</label> @stopsatgreen VS. <label><input type="number"> Number</label>

:hover div { left: 100px; top: 100px; } @stopsatgreen VS.
:hover div { transform: translate(100px, 100px); }

@stopsatgreen <meta name="viewport" content="width=device-width, user-scalable=no">

@stopsatgreen var ua = navigator.userAgent.toLowerCase(), isAndroid = ua.indexOf('android') > -1;
if (isAndroid) { window.location = 'http://mobile.example.com'; }

EMPATHY @stopsatgreen

“Technical skills still matter, but today making digital services that
meet users’ needs also depends on our ability to collaborate across many types of boundaries.” @stopsatgreen - Jonathan Kahn http://alistapart.com/article/people-skills-for-web-workers

“It is impossible to collaborate effectively without a sense of
empathy. It provides a sense of fellowship and enables better teamwork.” @stopsatgreen - Stephen Caver http://cognition.happycog.com/article/why-developers-need-to-learn-design

@stopsatgreen http://toyark.com/ No empathy Empathy

“Having the integrity and introspective accuracy to distinguish what one
likes from what is good, useful, meaningful is vital; we do not work for ourselves but for our users.” @stopsatgreen - Mills Baker http://mokriya.quora.com/Designer-Duds-Losing-Our-Seat-at-the-Table

“It is so easy to believe that if you design
something that you like, then it must be good. We just have to have the discipline to step out of that role.” @stopsatgreen - Jakob Nielsen http://drt.fm/jakob-nielsen/#!/transcript

https://www.flickr.com/photos/yimhafiz/5117737179/

http://tinyurl.com/ptch4u7

“You can never really be another person, but you can
become more skilled at not only just being yourself.” @stopsatgreen - Jakob Nielsen http://drt.fm/jakob-nielsen/#!/transcript

“Treat people with understanding when you can, and fake it
when you can't until you do understand.” @stopsatgreen - Kim Harrison https://www.goodreads.com/quotes/266474

YOU HAVE BEEN WATCHING @STOPSATGREEN

Understand When You Can, Fake It When You Can’t

Understand When You Can, Fake It When You Can’t

More Decks by Peter Gasston

Other Decks in Technology

Featured

Transcript