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.