WEBVTT

1
00:00:01.400 --> 00:00:02.809
You built a store.

2
00:00:03.059 --> 00:00:06.122
On your machine, it loads in under half a second.

3
00:00:06.142 --> 00:00:08.324
The build is green, the tests pass,

4
00:00:08.344 --> 00:00:11.978
and every page looks exactly the way you designed it.

5
00:00:12.228 --> 00:00:13.787
It works. For you.

6
00:00:15.387 --> 00:00:19.463
Whenever someone opens a page, two stories run at the same time.

7
00:00:19.613 --> 00:00:26.163
Yours is a pipeline: DNS, connection, TLS, request, response, parse, render, respond.

8
00:00:26.313 --> 00:00:29.835
Theirs is a chain of questions they never ask out loud.

9
00:00:29.985 --> 00:00:31.139
Is it there?

10
00:00:31.159 --> 00:00:32.762
Did it arrive in time?

11
00:00:32.782 --> 00:00:34.790
Can I perceive it, and operate it?

12
00:00:34.810 --> 00:00:36.093
Can I read it?

13
00:00:36.113 --> 00:00:37.438
Can I use it?

14
00:00:37.458 --> 00:00:38.718
Do I want it?

15
00:00:39.118 --> 00:00:43.087
Each question only gets asked if the one before it got a yes.

16
00:00:43.237 --> 00:00:49.041
And the choices you make at every stage of your pipeline decide which of their questions get that yes.

17
00:00:50.941 --> 00:00:54.324
So let's watch eight people open your store in the same second,

18
00:00:54.344 --> 00:00:57.236
and see how far up the ladder each of them gets.

19
00:01:00.336 --> 00:01:04.092
Marcus is at work, and his office network blocks your scripts.

20
00:01:04.242 --> 00:01:06.772
The HTML still arrives, but it's empty.

21
00:01:06.792 --> 00:01:09.577
The whole store lives inside a script.

22
00:01:09.727 --> 00:01:15.040
And a trick that keeps the page hidden until the script finishes means he sees nothing at all.

23
00:01:15.190 --> 00:01:17.517
For Marcus, your store isn't there.

24
00:01:20.617 --> 00:01:22.986
Ana is on crowded hotel Wi-Fi.

25
00:01:23.136 --> 00:01:25.852
Before your store can show her a single word,

26
00:01:25.872 --> 00:01:29.516
her phone has to download four megabytes of JavaScript.

27
00:01:29.666 --> 00:01:33.891
She stares at a blank screen for thirty seconds, then closes the tab.

28
00:01:34.041 --> 00:01:37.392
Your server answered. For Ana, the page was down.

29
00:01:40.492 --> 00:01:41.415
Lucía is blind.

30
00:01:41.435 --> 00:01:44.118
Her screen reader doesn't read your pixels.

31
00:01:44.138 --> 00:01:49.027
It reads the accessibility tree that the browser builds from your markup.

32
00:01:49.227 --> 00:01:51.751
Someone put aria-hidden on the navigation.

33
00:01:51.771 --> 00:01:54.780
For Lucía's screen reader, the menu doesn't exist,

34
00:01:54.800 --> 00:01:57.463
and neither does the way to the fleece.

35
00:01:58.263 --> 00:02:02.168
Sam broke his wrist last week, so he's shopping with the keyboard.

36
00:02:02.368 --> 00:02:07.222
Your Add to cart button is a div with a click handler. Tab skips right past it.

37
00:02:07.242 --> 00:02:10.071
For Sam, the button doesn't exist either.

38
00:02:13.171 --> 00:02:17.511
Kenji, in Osaka, has his browser translate your page into Japanese.

39
00:02:17.531 --> 00:02:19.913
Almost everything comes through.

40
00:02:20.063 --> 00:02:25.377
But your shipping terms are text inside an image, and a translator can't read pixels.

41
00:02:25.527 --> 00:02:29.347
He can't tell whether the fleece ships to Japan, so he doesn't risk it.

42
00:02:32.447 --> 00:02:35.733
Dani has a toddler on one hip and one thumb free.

43
00:02:35.883 --> 00:02:41.410
Your checkout asks her to “Initiate procurement,” then to “Finalize fulfillment parameters.”

44
00:02:41.560 --> 00:02:44.076
She leaves out one digit of her ZIP code.

45
00:02:44.096 --> 00:02:48.601
The form says “Error in form,” and clears every field she filled in.

46
00:02:48.751 --> 00:02:51.728
No automated scanner would flag this checkout.

47
00:02:51.748 --> 00:02:53.942
Every control is real and labeled.

48
00:02:53.962 --> 00:02:56.347
Dani still can't buy the fleece.

49
00:02:59.447 --> 00:03:01.475
Omar makes it to the top rung.

50
00:03:01.625 --> 00:03:05.413
A countdown says the deal ends in 4 minutes, 59 seconds.

51
00:03:05.433 --> 00:03:09.541
A protection plan he never asked for is already checked.

52
00:03:09.691 --> 00:03:11.464
He buys the fleece anyway.

53
00:03:11.484 --> 00:03:16.541
A week later, the same deal is still ending in 4 minutes, 59 seconds.

54
00:03:16.691 --> 00:03:17.646
He won't be back.

55
00:03:17.666 --> 00:03:20.319
Your analytics recorded him as a success.

56
00:03:22.819 --> 00:03:25.956
One visitor climbed all the way up without a problem.

57
00:03:26.156 --> 00:03:31.016
Fast connection. New laptop. Perfect eyesight. Steady hands. Reads English.

58
00:03:31.036 --> 00:03:32.963
Doesn't mind a countdown.

59
00:03:33.163 --> 00:03:34.295
They look familiar.

60
00:03:34.315 --> 00:03:36.556
Almost nobody else is that user.

61
00:03:38.656 --> 00:03:41.972
Now check your dashboard. Zero JavaScript errors.

62
00:03:41.992 --> 00:03:45.015
Pages load in under a second. Two sales.

63
00:03:45.215 --> 00:03:48.992
Marcus and Ana never ran the scripts that would have counted them.

64
00:03:49.192 --> 00:03:53.973
Lucía, Sam, Kenji, and Dani show up as exits, with no reason attached.

65
00:03:53.993 --> 00:03:57.471
A hidden menu, a clickable div, a picture of words,

66
00:03:57.491 --> 00:04:00.671
and a confusing form never throw an error.

67
00:04:00.871 --> 00:04:03.126
The ladder fails silently, and upward.

68
00:04:03.146 --> 00:04:08.595
The people who fell are missing from the very numbers you'd use to decide what to fix.

69
00:04:11.095 --> 00:04:15.664
That gap, between how your site works for you and how it works for everyone else,

70
00:04:15.684 --> 00:04:16.664
is a canyon.

71
00:04:16.864 --> 00:04:19.748
An empty HTML shell, a four-megabyte bundle,

72
00:04:19.768 --> 00:04:24.961
a button built from a div: each one is a choice made for the builder's comfort,

73
00:04:24.981 --> 00:04:29.175
and each one fails people on rungs the builder never tests.

74
00:04:32.875 --> 00:04:33.535
Now rewind.

75
00:04:33.555 --> 00:04:35.391
Same store, same eight people,

76
00:04:35.411 --> 00:04:39.361
built with the grain of the platform instead of against it.

77
00:04:39.961 --> 00:04:44.208
The content is in the HTML, and the script only enhances it.

78
00:04:44.608 --> 00:04:47.340
The page weighs kilobytes, not megabytes.

79
00:04:47.740 --> 00:04:51.496
The navigation isn't hidden anymore. The button is a button.

80
00:04:51.896 --> 00:04:55.993
The shipping terms are real text, so the translator can reach them.

81
00:04:56.393 --> 00:05:00.981
The labels say what they do, and a typo costs one field, not all of them.

82
00:05:01.381 --> 00:05:05.180
The sale has a real end date, and the extras start unchecked.

83
00:05:05.880 --> 00:05:07.709
None of this cost more to build.

84
00:05:07.729 --> 00:05:12.537
Most of it is what the platform does by default, as long as we don't break it.

85
00:05:13.137 --> 00:05:17.545
Lucía reached your store, heard it, read it in Spanish, and bought the fleece.

86
00:05:17.565 --> 00:05:20.477
She has one question left. Will she come back?

87
00:05:22.577 --> 00:05:25.672
Even when you build it right, you don't own the whole trip.

88
00:05:25.872 --> 00:05:30.762
Registrars, certificate authorities, CDNs, networks, browsers, extensions,

89
00:05:30.782 --> 00:05:34.543
and translators all touch your page before a person does.

90
00:05:34.563 --> 00:05:38.844
Somewhere, for someone, today, one of your rungs is failing.

91
00:05:39.044 --> 00:05:44.269
So wrap the ladder in measurement: uptime probes, field performance from real visits,

92
00:05:44.289 --> 00:05:49.093
testing with assistive technology, funnels, and whether people come back.

93
00:05:49.293 --> 00:05:54.847
The difference between a professional and a hobbyist isn't that the professional's pages never break.

94
00:05:54.867 --> 00:05:57.209
It's that the professional finds out.

95
00:05:59.309 --> 00:06:02.511
Every technical choice you make lands on a person.

96
00:06:02.811 --> 00:06:06.001
In this series, we'll climb the ladder one rung at a time,

97
00:06:06.021 --> 00:06:08.977
and see which of your choices hold each rung up.