There Are No “Buts” in Progressive Enhancement


The Presentation inside:

Slide 0


Slide 1

Hi!
 I’m @AaronGustafson


Slide 2

What is PROGRESSIVE ENHANCEMENT?


Slide 3

TECHNOLOGICAL RESTRICTIONS


Slide 4

USER EXPERIENCE BASIC ADVANCED BROWSER CAPABILITIES


Slide 5

Interactivity Design Semantics Content


Slide 6


Slide 7

reddit.com


Slide 8


Slide 9


Slide 10


Slide 11

Make your mobile site strategy simply your website strategy


Slide 12

bbc.com/news


Slide 13


Slide 14

“We have developed a new version of the News website which implements a responsive design so that we can offer all our users the best experience possible no matter what device they are using.” NIKO VIJAYARATNAM SENIOR PROJECT MANAGER - BBC


Slide 15

EFFORT 4 years 50 contributors 5000 pull requests RESULTS 1 code base 30 
 different languages


Slide 16

BEFORE AFTER


Slide 17


Slide 18

“Looking back, using Mobile First was genius. We were able to strip everything back to the core content, the stuff that mattered to users. No JavaScript. No cruft. Just the good stuff. Journalism at its best.” JOHN CLEVELY @JCLEVELEY


Slide 19

cnn.com


Slide 20


Slide 21


Slide 22


Slide 23


Slide 24


Slide 25

bcbst.com


Slide 26

What you’d expect


Slide 27

What you might get


Slide 28

So what’s the PROBLEM?


Slide 29

Assuming JAVASCRIPT is always available


Slide 30

How many people are missing out on JavaScript-based enhancement?


Slide 31

1.1% according to the UK’s GDS


Slide 32

0.2% JavaScript disabled or unavailable + 0.9% JavaScript enabled but never received


Slide 33

That’s 1 in 93 people


Slide 34


Slide 35

LOGIN IS AN EASY FIX 1. Include the Login Form in your markup and give it a unique id: <form id="login"> 2. Hide it by default:
 3. Make the activation link target it:
 4. Show the form when someone clicks the link:
 5. Use CSS to transition the opacity to make it look friggin’ sweet! form#login { display: none; } <a href="#login">Login…</a> form#login:target { display: block; }


Slide 36

OR EVEN EASIER… 1. Make the link point to a login page


Slide 37


Slide 38

NAVIGATION Large screen Small screen Touch devices Mouse users Mouse and touch enabled devices Keyboard users Color blind users Screen readers Users without JavaScript thebostoncalendar.com/system/events/photos/000/023/300/original/tumblr_n9wbg5xUuK1qbycdbo1_1280.jpg?1421977741


Slide 39

nichols.edu


Slide 40


Slide 41

SCENARIOS IF NO JS; SMALL SCREEN WIDTH Hamburger menu acts as jump link to navigation at bottom of the page; main and sub nav are shown IF JS; SMALL SCREEN WIDTH Hamburger menu toggles off-screen navigation pattern; two levels of nested navigation - expand/collapse functionality for sub-nav IF NO JS or JS; LARGE SCREEN WIDTH Show main navigation; hide sub nav on default under drop down menus nested within main; use CSS to show sub navigation on hover FOR TOUCH DEVICES; LARGE SCREEN WIDTH Make top level navigation items link to landing pages with sub-nav accessible


Slide 42


Slide 43


Slide 44


Slide 45


Slide 46


Slide 47


Slide 48


Slide 49

Would you believe you CAN DO THAT without JavaScript?


Slide 50

<form id="get-a-quote" action="…"> <p> <label for="stock-symbol">Stock Lookup</label> <input id="stock-symbol" type="text" name="SID_VALUE_ID"
 required="required" list="search-options"> <button type="submit"><b>Get a Quote</b></button> </p> </form> <!-- … --> <datalist id="search-options"> <option value="A">A: AGILENT TECHNOLOGIES INC</option> <option value="ANF">ANF: ABERCROMBIE &amp; FITCH -CL
 A</option> <!-- continued --> </datalist>


Slide 51

<form id="get-a-quote" action="…"> <p> <label for="stock-symbol">Stock Lookup</label> <input id="stock-symbol" type="text" name="SID_VALUE_ID"
 required="required" list="search-options"> <button type="submit"><b>Get a Quote</b></button> </p> </form> <!-- … --> <datalist id="search-options"> <option value="A">A: AGILENT TECHNOLOGIES INC</option> <option value="ANF">ANF: ABERCROMBIE &amp; FITCH -CL
 A</option> <!-- continued --> </datalist>


Slide 52


Slide 53

Surely that REQUIRES JavaScript!?


Slide 54

<details> <summary> <h1>YHOO Snapshot</h1> <div class="tabular"> <dl class="symbol"> <dt>Symbol</dt> <dd><a href="#" title="Yahoo">YHOO</a></dd> </dl> <dl class="price"> <dt>Last Price</dt> <dd>62.95</dd> </dl> <!-- more --> </div> </summary> <div class="additional"> <figure> … </figure> <ul class="headlines"> … </ul> </div> </details>


Slide 55

<details> <summary> <h1>YHOO Snapshot</h1> <div class="tabular"> <dl class="symbol"> <dt>Symbol</dt> <dd><a href="#" title="Yahoo">YHOO</a></dd> </dl> <dl class="price"> <dt>Last Price</dt> <dd>62.95</dd> </dl> <!-- more --> </div> </summary> <div class="additional"> <figure> … </figure> <ul class="headlines"> … </ul> </div> </details>


Slide 56


Slide 57


Slide 58


Slide 59

100 MILLISECONDS is how long you have for the user to feel like the task was instantaneous. 1 SECOND is how long you have for the user’s state of flow to remain uninterrupted (though the delay will still be noticeable) 10 SECONDS is how long you have before the user loses interest entirely and will want to multitask while the task is completing. http://www.nngroup.com/articles/response-times-3-important-limits/


Slide 60

To keep an uninterrupted flow, we want to aim for a first render time of 1 SECOND


Slide 61

40% of people abandon a website that takes more than 3 second to load blog.kissmetrics.com/loading-time/


Slide 62

WALMART.COM found that for every second of load time improvement, conversions increased by up to 2% STAPLES.COM found that for every one second of improvement conversions increased by 10% radware.com/fall-sotu2014/


Slide 63

Over the last few years, the average web page size has grown: 2099Kb 1907Kb 1775Kb 1653Kb 1448Kb 1269Kb 1059Kb 15 ay M N ov 20 20 14 14 M ay 20 ov N ay M 20 13 13 20 12 20 ov N ay M N ov 20 20 11 12 929Kb soasta.com/blog/page-bloat-average-web-page-2-mb/


Slide 64

The top 100 Ecommerce home pages take 6.5 SECONDS to render and 11.4 SECONDS to fully load


Slide 65

IMAGE STRATEGY needs to be a top priority for enhancing our websites


Slide 66

llbean.com forever21.com ae.com zappos.com abercrombie.com gap.com modcloth.com 0.67MB 0.88MB 1.21MB 1.36MB 2.37MB 2.84MB 12.28MB


Slide 67

bananarepublic.com 3.505MB
 (2.67MB in images)


Slide 68


Slide 69


Slide 70

HTML TEXT WEB FONTS SVG CSS GRADIENTS PICTURE/SRCSET & SIZES


Slide 71

NASTYGAL.COM


Slide 72


Slide 73


Slide 74

landsend.com


Slide 75


Slide 76


Slide 77

<picture> <source media="(min-width: 767px)" srcset="20150402-feature_bb.jpg"> <img src="20150402-mobile.jpg" alt="Buttons and beyond: save 30%"> </picture>


Slide 78

codepen.io/Jenn/pen/ef916555aa228574247599d7948b578c


Slide 79

caniuse.com/#feat=picture


Slide 80


Slide 81

Enhance images with SVG


Slide 82

FOREVER21.COM


Slide 83

<h1>
 <a href="/">
 <!--[if IE 8]><div class="logo-ie"></div><![endif]-->
 <svg id="logo" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 244 41" style="enable-background:new 0 0 244 41;" xml:space="preserve"> <path fill="#FFFFFF" d="M0,40.66h5.73V23.45h9.89v-5.44H5.73V5.78h11.35V0.34H0V40.66z M34.72,0c-4.67,0-9.61,3.28-9.61,9.85v21.29 c0,6.57,4.95,9.85,9.61,9.85c4.67,0,9.61-3.28,9.61-9.85V9.85C44.33,3.28 ,39.39,0,34.72,0z M38.6,31.15 c0,2.78-1.8, 4.08-3.88,.14c-4.78,0-8.6,3.96-8.6,8.78v3.17h5.73V8.66 c0-1.87,1.12-2.89,2.81-2.89c2.81,0,2.81,2.43,2.81,4.47c0,2.21,0,3.34-1 .01,5.32l-10.34,19.65v5.44h17.09v-5.78h-10.34 l8.43-16.37C225.32,15.06,225.43,14.04,225.43,10.14z M238.27,0.34l-5.73-0.02v6.16l5.73-0.03v34.21H244V0.34H238.27z"></path> </svg> </a> </h1>


Slide 84

caniuse.com/#search=svg


Slide 85

sarasoueidan.com/blog/svg-picture


Slide 86

Content strategy should be a part of your image strategy


Slide 87

ralphlauren.com 3.21MB


Slide 88


Slide 89


Slide 90


Slide 91


Slide 92


Slide 93


Slide 94


Slide 95

WEB 1.0 PAGE 1 PAGE 2 LINK CLICK ADD TO CART CHECK
 OUT SERVER CART CONFIRMATION


Slide 96

GETTING TO PAGE 1 1. Browser requests web page 2. Server delivers web page 3. Browser displays web page


Slide 97

“SINGLE PAGE APP” PAGE 1 PAGE 2 LINK CLICK ADD TO CART CHECK
 OUT JAVASCRIPT CART CONFIRMATION


Slide 98

GETTING TO PAGE 1 1. Browser requests web page 2. Server delivers HTML shell (<body></body>)
 and JavaScript framework (e.g. Ember, Angular, etc.) 3. Browser downloads, parses & executes JavaScript framework to get it into memory 4. Framework begins requesting the actual web page content 5. Server delivers web page bits 6. Browser displays web page


Slide 99

“At some point recently, the browser transformed from being an awesome interactive document viewer into being the world’s most advanced, widely-distributed application runtime.” TOM DALE PROGRESSIVE ENHANCEMENT: ZED’S DEAD, BABY http://tomdale.net/2013/09/progressive-enhancement-is-dead/


Slide 100


Slide 101

UPSIDE • More “native app”-like feel • Less reliance on “the server” • More JavaScript!


Slide 102

DOWNSIDE • More JavaScript! •Slower to get to page load •Executing in an unknown environment


Slide 103

filamentgroup.com/lab/mv-initial-load-times.html


Slide 104


Slide 105


Slide 106


Slide 107


Slide 108

Let’s look at my HEALTHCARE DASHBOARD


Slide 109


Slide 110

WHAT’S HAPPENING HERE? 1. Load HTML shell (header, footer, etc.) 2. Download and display a nice animated loading icon 3. Use JavaScript to request the remaining dashboard content and load it in


Slide 111

WHAT’S THE FALLBACK? 1. Load HTML shell (header, footer, etc.) 2. Download and display a nice animated loading icon 3. Use JavaScript to request the remaining dashboard content and load it in


Slide 112


Slide 113

AN ALTERNATIVE APPROACH 1. Assemble the content you need to display the page 2. Send the page. 3. There is no step 3.


Slide 114

AN ALTERNATIVE APPROACH 1. Assemble the content you need to display the page 2. Send the page. 3. There is no step 3.
 If you have a widget that needs to be dynamic, take it over with JS after load and make it update dynamically.


Slide 115

nerds.airbnb.com/isomorphic-javascript-future-web-apps/


Slide 116

ISOMORPHIC JAVASCRIPT • Server sends a real page • JavaScript takes over to create a single page app if possible • If not possible, all links & functionality go through the server


Slide 117

HOW ISOMORPHIC JS WORKS PAGE 1 PAGE 2 LINK CLICK ADD TO CART CHECK
 OUT JAVASCRIPT OR THE SERVER CART CONFIRMATION


Slide 118

But you don’t need to use Isomorphic JavaScript


Slide 119


Slide 120

“Say what you will about server-rendered apps, the performance of your server is much more predictable, and more easily upgraded, than the many, many different device configurations of your users. Server-rendering is important to ensure that users who are not on the latest-andgreatest can see your content immediately when they click a link.” TOM DALE YOU’RE MISSING THE POINT OF SERVER-SIDE RENDERED JAVASCRIPT APPS tomdale.net/2015/02/youre-missing-the-point-of-server-side-rendered-javascript-apps/


Slide 121

Let me tell you a story…


Slide 122

$X $X/3 iPhone, iPad, Android, Windows Phone 1,400 more devices


Slide 123

$X iPhone, iPad, Android, Windows Phone /6 X $ $X/3 1,400 more devices


Slide 124

Progressive enhancement JUST WORKS


Slide 125

We need to think in terms of EXPERIENCE AS A CONTINUUM


Slide 126

Progressive enhancement embraces THE GRAIN OF THE WEB rather than going against it.


Slide 127

SLIDE DESIGN BY @JENNLUKAS ILLUSTRATIONS BY @MSUTTERS


Slide 128


×

HTML:





Ссылка: