'

There Are No “Buts” in Progressive Enhancement

Понравилась презентация – покажи это...





Слайд 0


Слайд 1

Hi!
 I’m @AaronGustafson


Слайд 2

What is PROGRESSIVE ENHANCEMENT?


Слайд 3

TECHNOLOGICAL RESTRICTIONS


Слайд 4

USER EXPERIENCE BASIC ADVANCED BROWSER CAPABILITIES


Слайд 5

Interactivity Design Semantics Content


Слайд 6


Слайд 7

reddit.com


Слайд 8


Слайд 9


Слайд 10


Слайд 11

Make your mobile site strategy simply your website strategy


Слайд 12

bbc.com/news


Слайд 13


Слайд 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


Слайд 15

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


Слайд 16

BEFORE AFTER


Слайд 17


Слайд 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


Слайд 19

cnn.com


Слайд 20


Слайд 21


Слайд 22


Слайд 23


Слайд 24


Слайд 25

bcbst.com


Слайд 26

What you’d expect


Слайд 27

What you might get


Слайд 28

So what’s the PROBLEM?


Слайд 29

Assuming JAVASCRIPT is always available


Слайд 30

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


Слайд 31

1.1% according to the UK’s GDS


Слайд 32

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


Слайд 33

That’s 1 in 93 people


Слайд 34


Слайд 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; }


Слайд 36

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


Слайд 37


Слайд 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


Слайд 39

nichols.edu


Слайд 40


Слайд 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


Слайд 42


Слайд 43


Слайд 44


Слайд 45


Слайд 46


Слайд 47


Слайд 48


Слайд 49

Would you believe you CAN DO THAT without JavaScript?


Слайд 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>


Слайд 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>


Слайд 52


Слайд 53

Surely that REQUIRES JavaScript!?


Слайд 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>


Слайд 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>


Слайд 56


Слайд 57


Слайд 58


Слайд 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/


Слайд 60

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


Слайд 61

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


Слайд 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/


Слайд 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/


Слайд 64

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


Слайд 65

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


Слайд 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


Слайд 67

bananarepublic.com 3.505MB
 (2.67MB in images)


Слайд 68


Слайд 69


Слайд 70

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


Слайд 71

NASTYGAL.COM


Слайд 72


Слайд 73


Слайд 74

landsend.com


Слайд 75


Слайд 76


Слайд 77

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


Слайд 78

codepen.io/Jenn/pen/ef916555aa228574247599d7948b578c


Слайд 79

caniuse.com/#feat=picture


Слайд 80


Слайд 81

Enhance images with SVG


Слайд 82

FOREVER21.COM


Слайд 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>


Слайд 84

caniuse.com/#search=svg


Слайд 85

sarasoueidan.com/blog/svg-picture


Слайд 86

Content strategy should be a part of your image strategy


Слайд 87

ralphlauren.com 3.21MB


Слайд 88


Слайд 89


Слайд 90


Слайд 91


Слайд 92


Слайд 93


Слайд 94


Слайд 95

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


Слайд 96

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


Слайд 97

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


Слайд 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


Слайд 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/


Слайд 100


Слайд 101

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


Слайд 102

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


Слайд 103

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


Слайд 104


Слайд 105


Слайд 106


Слайд 107


Слайд 108

Let’s look at my HEALTHCARE DASHBOARD


Слайд 109


Слайд 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


Слайд 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


Слайд 112


Слайд 113

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


Слайд 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.


Слайд 115

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


Слайд 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


Слайд 117

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


Слайд 118

But you don’t need to use Isomorphic JavaScript


Слайд 119


Слайд 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/


Слайд 121

Let me tell you a story…


Слайд 122

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


Слайд 123

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


Слайд 124

Progressive enhancement JUST WORKS


Слайд 125

We need to think in terms of EXPERIENCE AS A CONTINUUM


Слайд 126

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


Слайд 127

SLIDE DESIGN BY @JENNLUKAS ILLUSTRATIONS BY @MSUTTERS


Слайд 128


×

HTML:





Ссылка: