UPDATE 1/3/2013: My fellow MCDM alum Rebekah Peterson shared a great Q&A with the multimedia team behind “Snow Fall” on Source. I held my breath on first read, afraid they were going to say something that completely contradicted my analysis, but I fared pretty well. If my breakdown is too “in the weeds” for you, I think you’ll find Source’s Q&A pretty accessible.
The recent New York Times multimedia story “Snow Fall: The Avalanche at Tunnel Creek” got a lot of attention. As Rebecca Greenfield put it on The Atlantic Wire, the piece “…integrates video, photos, and graphics in a way that makes multimedia feel natural and useful, not just tacked on.” The Times was rightfully proud of the piece and what it means for online journalism, boldly stating “Clearly, this is something The Times hopes to do more of, and others will undoubtedly do it, as well.”
It struck me as a beautifully designed and stunningly effective example of multimedia online storytelling and I couldn’t wait to share it at the public television station where I am the Director of the Interactive department. I was motivated in part to share as a means of saying “this is what we need to be capable of doing to survive.”
What makes the piece so remarkable isn’t that the New York Times has created anything new in a technical sense. It’s that instead of retreating from what’s disrupting their business they have embraced it and made it even better by using it to showcase their traditional strength: Meaningful storytelling.
While I love it as a strategic approach to storytelling, I also understand it as a piece of front end web development. A decade ago, the third phase of my media career led me to learn in depth how web technologies are designed to work together. That dive into the logistics of web development continues to shape my strategic and tactical thinking as a manager and I believe good online managers need to be familiar with the actual work of building digital media products. Businesses that succeed best in the online medium have managers who apply their real working knowledge of how it works to strategic decision making.
What follows is my technical breakdown of the front end code that makes the Times piece such an effective experience. My target audience is digital media managers with some interest in knowing some of the technical aspects of what goes into a presentation like this.
Here are quick links to sections in the breakdown. (For variety, most of the headings include song titles from two different musical acts.)
- Scrape Away: The Available Toolkit
- Absolute Beginners: The Web’s Language Trinity
- Illustration 2: “Snow Fall”‘s page source
- Standards: The Doctype
- But I’m Different Now: Conditional Comments
- News of the World: The Meta Elements
- Art School: CSS
- This Is the Modern World: JavaScript
- Beautiful Way: What Happens When the Page Renders
- Mixed Bizness: Top Level Classes
- Chain Reaction: The Header and Navigating Through the Story
- Where It’s At: The Video Cover
- Puttin’ It Down: Scrolling the Text
- Atmospheric Conditions: The Article Layout and Components
- Beat Surrender: Strategic Conclusions from a Technical Breakdown
Scrape Away: The Available Toolkit
In order to understand what it is that we’re looking at on the page, we need to understand what tools were available to the designers and developers who made it. This is like looking inside a carpenter’s toolbelt to understand how a house is built: The odds are that you’ll see a couple hammers in there, and you can assume that when he was doing the framing he used a framing hammer, but there’s always the off-chance that he drove one or two nails into the framing with his roofing hammer instead and you’ll never be able to tell the difference from just looking at it.
Absolute Beginners: The Web’s Language Trinity
When we talk about Web pages, we’re usually talking about three related languages that have been adopted by the World Wide Web Consortium (W3C) as standards (although for arcane reasons they sometimes call them “recommendations”):
- HTML is a markup language. It is used to markup pieces of data in
<tags>
that identify types of data. Together, opening and closing<tag></tag>
combinations make elements and I will use that term a lot in my breakdown. Some tags are self closing, like<img />
, and don’t need a separate closing tag, but they are still elements. By itself, HTML should only tell you what something is, not what it looks like. (Before HTML 4 was adopted in 1997, that was a lot less clear and you still sometimes see new pages built with old bad habits like using<table>
elements to force layouts, but those are developers who are doing it wrong and they shouldn’t get your money.) - CSS (Cascading Style Sheets) is a styling language. It’s how to define what HTML should look like. For example, to make all the text marked up as paragraphs appear in a 14 pixel font:
p { font-size: 14px; }
or to make all the images with a class of “sidebar” appear on the right hand side of the page:
img.sidebar { float:right; }
- JavaScript is used to make Web pages do stuff besides just sit there and look pretty with some clickable links. If something moves, changes color, or otherwise acts dynamic, odds are there’s JavaScript involved. (There’s still a slight chance the Adobe Flash plugin, or even Microsoft’s Silverlight plugin, is doing it, but that’s far less common than it used to be.) Even though I said up above that JavaScript is a W3C standard, that’s not really quite true — the JavaScript language is a standard of the Ecma International standards body (you might rarely see JavaScript refered to as ECMAscript), but the W3C defines how it interacts with HTML.
The most basic structure of a Web page is this HTML:
<html> <head></head> <body></body> </html>
Everything that you see in a Web browser is inside that <body>
element. But on most pages of any level of complexity, far more hours of work have gone into the stuff you can’t see. Much (but not all!) of that is inside the <head>
element, and often the only thing in there that is displayed is the <title>
element which is what you see displayed in the top titlebar of the browser — or at least used to: With the adoption of tabbed browsing there isn’t much room to show titles these days.
The <head>
can contain information about the page, pointers to external resources the page needs to work properly, or contain those resources embedded directly in the HTML. But even before you get the <head>
, choices are made that will have important impacts on how the stuff in the <body>
is displayed.
Illustration 2: “Snow Fall”‘s page source
713 714
814
819
820
821
822
823
824
825
826
827
830
835
837
869
870
871
872
874
875
878
Snow Fall
881
The Avalanche at Tunnel Creek
882
883
884

885
886
887
888
889
The snow burst through the trees with no warning but a last-second whoosh of sound, a two-story wall of white and Chris Rudolph’s piercing cry: “Avalanche! Elyse!”
893
The very thing the 16 skiers and snowboarders had sought — fresh, soft snow — instantly became the enemy. Somewhere above, a pristine meadow cracked in the shape of a lightning bolt, slicing a slab nearly 200 feet across and 3 feet deep. Gravity did the rest.
894
Snow shattered and spilled down the slope. Within seconds, the avalanche was the size of more than a thousand cars barreling down the mountain and weighed millions of pounds. Moving about 7o miles per hour, it crashed through the sturdy old-growth trees, snapping their limbs and shredding bark from their trunks.
895
The avalanche, in Washington’s Cascades in February, slid past some trees and rocks, like ocean swells around a ship’s prow. Others it captured and added to its violent load.
896
Somewhere inside, it also carried people. How many, no one knew.
897
The slope of the terrain, shaped like a funnel, squeezed the growing swell of churning snow into a steep, twisting gorge. It moved in surges, like a roller coaster on a series of drops and high-banked turns. It accelerated as the slope steepened and the weight of the slide pushed from behind. It slithered through shallower pitches. The energy raised the temperature of the snow a couple of degrees, and the friction carved striations high in the icy sides of the canyon walls.
898
Elyse Saugstad, a professional skier, wore a backpack equipped with an air bag, a relatively new and expensive part of the arsenal that backcountry users increasingly carry to ease their minds and increase survival odds in case of an avalanche. About to be overtaken, she pulled a cord near her chest. She was knocked down before she knew if the canister of compressed air inflated winged pillows behind her head.
899
She had no control of her body as she tumbled downhill. She did not know up from down. It was not unlike being cartwheeled in a relentlessly crashing wave. But snow does not recede. It swallows its victims. It does not spit them out.
900
Snow filled her mouth. She caromed off things she never saw, tumbling through a cluttered canyon like a steel marble falling through pins in a pachinko machine.
901
At first she thought she would be embarrassed that she had deployed her air bag, that the other expert skiers she was with, more than a dozen of them, would have a good laugh at her panicked overreaction. Seconds later, tumbling uncontrollably inside a ribbon of speeding snow, she was sure this was how she was going to die.
902
Moving, roiling snow turns into something closer to liquid, thick like lava. But when it stops, it instantly freezes solid. The laws of physics and chemistry transform a meadow of fine powder into a wreckage of icy chunks. Saugstad’s pinwheeling body would freeze into whatever position it was in the moment the snow stopped.
903
After about a minute, the creek bed vomited the debris into a gently sloped meadow. Saugstad felt the snow slow and tried to keep her hands in front of her. She knew from avalanche safety courses that outstretched hands might puncture the ice surface and alert rescuers. She knew that if victims ended up buried under the snow, cupped hands in front of the face could provide a small pocket of air for the mouth and nose. Without it, the first breaths could create a suffocating ice mask.
904
The avalanche spread and stopped, locking everything it carried into an icy cocoon. It was now a jagged, virtually impenetrable pile of ice, longer than a football field and nearly as wide. As if newly plowed, it rose in rugged contrast to the surrounding fields of undisturbed snow, 20 feet tall in spots.
905

910
911
912
913
914
915
916
917
918
919
Saugstad was mummified. She was on her back, her head pointed downhill. Her goggles were off. Her nose ring had been ripped away. She felt the crushing weight of snow on her chest. She could not move her legs. One boot still had a ski attached to it. She could not lift her head because it was locked into the ice.
920
But she could see the sky. Her face was covered only with loose snow. Her hands, too, stuck out of the snow, one still covered by a pink mitten.
921
922
925
926
927
928
929
930
934
Using her hands like windshield wipers, she tried to flick snow away from her mouth. When she clawed at her chest and neck, the crumbs maddeningly slid back onto her face. She grew claustrophobic.
935
Breathe easy, she told herself. Do not panic. Help will come. She stared at the low, gray clouds. She had not noticed the noise as she hurtled down the mountain. Now, she was suddenly struck by the silence.
936
937
938
Tunnel Creek
939
The Cascades are among the craggiest of American mountain ranges, roughly cut, as if carved with a chain saw. In summer, the gray peaks are sprinkled with glaciers. In winter, they are smothered in some of North America’s deepest snowpack.
940
The top of Cowboy Mountain, about 75 miles east of Seattle, rises to 5,853 feet — about half the height of the tallest Cascades, but higher than its nearest neighbors, enough to provide 360-degree views. It feels more like a long fin than a summit, a few feet wide in parts. Locals call it Cowboy Ridge.
941
To one side, down steep chutes, is Stevens Pass ski area, which receives about 400,000 visitors each winter. To the other, outside the ski area’s boundary to what is considered the back of Cowboy Mountain, is an unmonitored play area of reliably deep snow, a “powder stash,” known as Tunnel Creek.
942
943
944
945
946
947
948
950
951
952
It is a term with broad meaning. The name is derived from the Cascade Tunnel, originally a 2.6-mile railroad tube completed in 1900 that connected the east and west sides of the Cascades, a boon for the growth of Seattle and Puget Sound. The mountain pass that it burrowed beneath was named for the project’s engineer, John Frank Stevens, who later helped build the Panama Canal.
956
957
958

961

962
963
964
965
In late February 1910, ceaseless snowstorms over several days marooned two passenger trains just outside the tunnel’s west portal. Before the tracks could be cleared, the trains were buried by what still stands as the nation’s deadliest avalanche. It killed 96 people.
966
Bodies were extricated and wrapped in blankets from the Great Northern Railway, then hauled away on sleds. Some were not found until the snow melted many months later.
967
To skiers and snowboarders today, Tunnel Creek is a serendipitous junction of place and powder. It features nearly 3,000 vertical feet — a rarely matched descent — of open meadows framed by thick stands of trees. Steep gullies drain each spring’s runoff to the valley floor and into a small, short gorge called Tunnel Creek.
968
The area has all of the alluring qualities of the backcountry — fresh snow, expert terrain and relative solitude — but few of the customary inconveniences. Reaching Tunnel Creek from Stevens Pass ski area requires a ride of just more than five minutes up SkyLine Express, a high-speed four-person chairlift, followed by a shorter ride up Seventh Heaven, a steep two-person lift. Slip through the open boundary gate, with its “continue at your own risk” warning signs, and hike 10 minutes to the top of Cowboy Mountain.
969
When snow conditions are right, the preferred method of descent used by those experienced in Tunnel Creek, based on the shared wisdom passed over generations, is to hopscotch down the mountain through a series of long meadows. Weave down the first meadow, maybe punctuate the run with a jump off a rock outcropping near the bottom, then veer hard left, up and out of the narrowing gully and into the next open glade.
970
Another powder-filled drop ends with another hard left, into another meadow that leads to the valley floor.
971
972
977
978
979
980
981
982
983
984
985
Tunnel Creek is, in the vernacular of locals, a “hippie pow run” — breezy and unobstructed, the kind that makes skiers giggle in glee as they descend through a billowing cloud of their own soft powder and emerge at the bottom coated in white frosting.
986
Despite trends toward extreme skiing (now called freeskiing), with improbable descents over cliffs and down chutes that test the guile of even the fiercest daredevils, the ageless lure of fresh, smooth powder endures.
987
988
But powder and people are key ingredients for avalanches. And the worry among avalanche forecasters, snow-science experts and search-and-rescue leaders is that the number of fatalities — roughly 200 around the world each year — will keep rising as the rush to the backcountry continues among skiers, snowboarders, climbers and snowmobilers.
989
The backcountry represents the fastest-growing segment of the ski industry. More than ever, people are looking for fresh descents accessible by helicopters, hiking or even the simple ride up a chairlift.
990
Before 1980, it was unusual to have more than 10 avalanche deaths in the United States each winter. There were 34 last season, including 20 skiers and snowboarders. Eight victims were skiing out of bounds, legally, with a lift ticket. And many of the dead were backcountry experts intimate with the terrain that killed them.
991
“It’s a cultural shift, where more skiers are going farther, faster, bigger,” said John Stifter, the editor of Powder magazine, who was a part of the group at Tunnel Creek in February. “Which is tending to push your pro skiers or other experienced, elite-level backcountry skiers that much farther, faster and bigger, to the point where there’s no margin for error.”
992
No one knows how many avalanches occur. Most naturally triggered slides are never seen. Those set off by humans are rarely reported unless they cause fatalities or property damage.
993
But avalanches occur in Tunnel Creek regularly. Its slopes, mostly from 40 to 45 degrees, are optimal for avalanches — flat enough to hold deep reservoirs of snow, yet steep enough for the snow to slide long distances when prompted. The long elevation drop means snow can be fluffy at the top and slushy at the bottom. Temperatures, wind and precipitation change quickly, and something as welcome as a burst of sunshine can alter the crystallized bonds deep inside the snow. And because Tunnel Creek is outside the ski area, it is not patrolled or specifically assessed for danger.
994
In March 2011, a University of Washington student was caught in an avalanche in Tunnel Creek. Having been carried into a stand of trees, he was unburied by friends within minutes and found dead. Three others were partially buried about an hour later when the ski patrol’s arrival set off a second avalanche.
995
Many of the most experienced locals view Tunnel Creek with a mix of awe and fear.
996
“I’ve always been a naysayer of Tunnel Creek,” the snowboarder Tim Wesley said. “I’ve seen a big avalanche back there before. It has about 2,600 vertical feet. Not typical. The snow changes a lot in that distance. That’s the reason I always have a second thought about Tunnel Creek. In Washington, there’s a saying: If you don’t like the weather, wait five minutes. And it’s true. You’ll be on the chair and it’ll be freezing, and then all of a sudden there’s a warm breeze that smells like the ocean.”
997
Even those who are not leery of Tunnel Creek on the best days heed the pass-it-on warning of the experienced: stay left.
998
To head straight down to the bottom is to enter what experts call a terrain trap: a funnel of trouble and clumsy skiing, clogged with trees and rocks and confined by high walls. Few go that way intentionally.
999
1000
1001
1002
Advertisement
1005
1006
1007
1008
Chris Rudolph, the effervescent 30-year-old marketing manager for Stevens Pass, knew the preferred route down. Tunnel Creek was his favorite at-work diversion. Earlier that weekend, he mentioned plans for a field trip to Tunnel Creek to a select group of high-powered guests and close friends.
1012
The operations manager for Stevens Pass agreed to pick up the group in one of the ski area’s trucks at the end of its descent. From the bottom of Tunnel Creek, it is about a half-mile trek through deep snow to U.S. 2, then a four-mile ride back to Stevens Pass.
1013
At 11:32 a.m. on Sunday, Feb. 19, heading up the mountain, Rudolph sent a text message to the operations manager.
1014
“A big posse,” Rudolph wrote.
1015
1016
1017
1018
1019
A Plan in Motion
1020
Like many ideas that sound good at the time, skiing Tunnel Creek was an idea hatched in a bar.
1021
It was Saturday, Feb. 18, the afternoon light fading to dusk. Outside the Foggy Goggle, a bar at the base of the ski area, the snow continued to fall, roughly an inch an hour. By morning, there would be 32 inches of fresh snow at Stevens Pass, 21 of them in a 24-hour period of Saturday and Saturday night.
1022
That was cause for celebration. It had been more than two weeks since the last decent snowfall. Finally, the tired layer of hard, crusty snow was gone, buried deep under powder.
1023
1024
Rudolph promoted Stevens Pass with restless zeal. In seven years there, he helped turn a relatively small, roadside ski area into a hip destination.
1025
He unabashedly courted ski journalists and filmmakers to take a look. They, in turn, gave Stevens Pass star turns in magazines and popular ski movies, raising the area’s cool quotient.
1026
Rudolph was the oldest of three children raised in California’s Bay Area by outdoors-minded parents. The young family pulled a pop-up Coleman camper around the West and skied at the areas around Lake Tahoe. The grown siblings continued to vacation with their parents, climbing peaks like Mount Whitney in California and Mount Rainier in Washington.
1027
Rudolph peppered his language with words like “rad” and “stoked.” But he was no simple-minded ski bum. He was an Eagle Scout with a marketing degree. When he applied at Stevens Pass years earlier, he sent a video of himself speaking, skiing and mountain biking. He included a bag of popcorn for the viewer. He got the job.
1028
Children knew Rudolph because he kept his pockets full of Stevens Pass stickers. He starred in self-deprecating Webcasts promoting Stevens Pass. He wrote poetry on his blog and strummed a guitar. He drank Pabst Blue Ribbon, the unofficial beer of irony and the hipster generation.
1029
Tunnel Creek was where he took special guests. And it is where he wanted to take the tangled assortment of high-caliber skiers and industry insiders who, as if carried by the latest storm, had blown into Stevens Pass that weekend.
1030
Many of them happened into the Foggy Goggle on Saturday night.
1031
1032
1033
Among them were professional skiers like Saugstad, 33, a former champion of the Freeride World Tour. There were reporters and editors from Powder magazine and ESPN. There were executives from ski equipment and apparel companies. There were Stevens Pass regulars, some with broad reputations in the niche world of skiing, glad to spend time with the assortment of guests.
1034
1035
“It was a very, very deep, heavy, powerful, strong group of pro skiers and ski industry people,” said Keith Carlsen, a photographer and former editor of Powder.
1036
1037
Rudolph was the connecting thread. Some visitors, like Saugstad, were at Stevens Pass for a promotional event aimed at expert female skiers, sponsored by Salomon, the ski equipment maker. Rudolph skied with the group all day Saturday. He organized and hosted a catered dinner for the women later that night in Leavenworth, a serious outdoors town dressed as a Bavarian village, 35 miles downhill to the east.
1038
Powder had come to spotlight Stevens Pass for a feature article on night skiing. When the magazine’s editor, John Stifter, arrived by train to Leavenworth two days earlier, he found Rudolph’s car waiting for him. Inside were keys to the car, keys to a slope-side cabin and two Pabst Blue Ribbons in the cup holders.
1039
At the bar, Rudolph mentioned an idea to a few people: Tunnel Creek on Sunday. Invitations traveled in whispers and text messages, through a knot of friendships and slight acquaintances.
1040
Meet at the fire pit, on the stone deck at Granite Peaks Lodge, at 11. Rudolph thought his Sunday morning staff meeting would end by then.
1041
1042
1045
Chris Rudolph
1046
30, Director of marketing at Stevens Pass
1047
View Slideshow
1048
1049
1051
Elyse Saugstad
1052
33, Professional freeskier
1053
View Slideshow
1054
1055
1057
Keith Carlsen
1058
38, Photographer and former editor of Powder
1059
View Slideshow
1060
1061
1062
1063
1065
John Stifter
1066
29, Editor of Powder magazine
1067
View Slideshow
1068
1069
1070
1071
1072
As darkness enveloped Stevens Pass on Saturday night, stadium-style lights flooded the slopes in white light, and snowflakes fell in cotton-ball clumps.
1076
Rudolph and those with the Salomon event left for dinner in Leavenworth. Stifter, 29, and Carlsen, 38, headed outside to work on their article for Powder.
1077
1082
1083
1084
“I skied just off the trail, not out of bounds, but in the ski resort, to shoot some of these night shots I took,” Carlsen said. “And in tree wells I was, like, neck deep — easily nipple deep, wading around in snow, trying to get my angle. There was so much new snow.”
1085
With the daytime crowds gone, the nighttime atmosphere was festive and the faces were familiar. Families played in the deepening snow. More serious skiers and snowboarders sought the freshest powder.
1086
There are no public accommodations at Stevens Pass, only a parking lot available to a few dozen campers and recreational vehicles. As the evening wound down, several of those with loose plans to ski Tunnel Creek the next morning huddled in the R.V. lot around a fire. Carlsen continued taking photographs. Stifter and others ducked inside one camper to watch homemade videos of others skiing Tunnel Creek over the past couple of decades.
1087
“So it’s something they skied often,” Stifter said. “Not something like, ‘We’re going to go ski Tunnel!’ Not like a once-a-year deal.”
1088
The flames in the fire died to orange embers. The last beers were sipped empty, and people slipped into the night. The campers were blanketed with snow.
1089
Beyond the lights glowing from the ski area, snow still fell over the ridge, too, in the vast darkness of steep meadows and narrow gullies just past the western edge of Stevens Pass.
1090
Each snowflake added to the depth, and each snowflake added to the weight. It might take a million snowflakes for a skier to notice the difference. It might take just one for a mountain to move.
1091
1092
1093
1094
1095
1099
1100
1101
1102
1103
1104
1105
1106
1107
1108
1109

1112
1115
To the Peak
1116
1117
1118
1119
Dawn cracked with the intermittent sound of explosives near the top of Cowboy Mountain. Stevens Pass ski patrollers, called to duty whenever more than a few inches of snow fell, had arrived to check and control the ski area’s 200 inbounds avalanche zones.
1123
After getting the latest assessment from the area’s full-time avalanche forecaster, more than a dozen patrollers filled their backpacks with 2.2-pound emulsion charges, shaped like cartoon dynamite. Chairlifts rumbled to life, ferrying the crews up the dark mountain.
1124
Three two-person teams assigned to Cowboy Ridge removed their skis and filed through the boundary gate. They took turns plowing a path through the fresh snow with their bodies. Their boots forged an icy stairway to the top of the skinny ridge.
1125
Back on their skis, facing down into the ski area and with their backs to Tunnel Creek, they spread across the ridge to stamp and destroy wind-swept cornices, small balconies of crusty snow.
1126
They removed the charges from their packs. Like party poppers that spew confetti, charges have a pull-wire, an ignition that lights a 90-second fuse. The patrollers lobbed the lighted charges into the many steep chutes below them. With muffled booms, heavy waves of snow tumbled harmlessly into the recesses of the empty slopes below, clearing danger for the day’s thousands of inbounds customers.
1127
The lines for the ski lifts began forming about 7, two hours before they were to open. When the gathering skiers and snowboarders heard the explosions echo down the mountain, they cheered. It signaled a powder day.
1128
In Leavenworth, Chris Rudolph awoke in his two-bedroom house on Ash Street, the one that he and his girlfriend, Anne Hessburg, painted a rich blue and accented with a garden out front.
1129
“Chris was so mad that he had a meeting,” Hessburg said. “It was a pow day, and you couldn’t tie him to his desk on pow days.”
1130
But he thought the meeting would end by 11.
1131
“He said: ‘It’s going to be so good, babe. I’m going to take some folks up to Tunnel Creek,’” Hessburg said. “Tunnel Creek, it was kind of like the holy grail for Chris. It was where he wanted to show off for friends.”
1132
Among those who joined the 45-minute parade from Leavenworth, through tight Tumwater Canyon, past the Lake Wenatchee turnoff and up to Stevens Pass, were Dan Abrams and Megan Michelson. They planned to marry in March.
1133
Michelson, 30, was the freeskiing editor for ESPN.com. Abrams, 34, was a founder and the president of Flylow, maker of apparel marketed to backcountry users.
1134
The couple lived in Seattle, but had come to Stevens Pass on Saturday for the Salomon promotional event. Michelson and the other women stayed at a Leavenworth hotel. Abrams slept in a spare bedroom at Rudolph’s house. He and Michelson drove to Stevens Pass together.
1135
“I said to Dan, ‘Do you think Tunnel will be safe today?’” Michelson said. “He said something along the lines of, ‘Yeah, those guys know the best route down.’”
1136
There were similar conversations elsewhere. In the slope-side cabin at Stevens Pass that Rudolph arranged — he cleaned it on Friday as he spoke to his mother on the phone — the journalists from Powder magazine, Stifter and Carlsen, contemplated the day’s plans.
1137
“We started asking questions,” Carlsen said. “‘Where are we going? Out of bounds? Didn’t it just snow nonstop for two days? How much snow?’ That’s when John pulled up the avalanche report, and he read it aloud.”
1138

1143
1144
1145
1146
1147
1148
1149
1150
1151
Mark Moore, director and lead meteorologist of the Northwest Weather and Avalanche Center, had set that day’s forecast on Saturday afternoon. A 64-year-old with graying hair pulled into a short ponytail, Moore had a feeling it could be a busy weekend.
1152
The avalanche center, based in Seattle, is one of about 20 regional avalanche forecasting centers in the United States, most run by the Forest Service. During the winter, one of its three employees arrives in the middle of the night, analyzes weather maps and computer models, and examines data — snowfall, temperatures, wind, humidity and so on — from 47 remote weather stations scattered across the mountains, including five in the vicinity of Stevens Pass. They take calls from ski patrollers and highway crews.
1153
The biggest storm of the season increased avalanche concerns. But it was not just the new snow that concerned Moore. It was what lay nearly three feet beneath — a thin layer of perfectly preserved frost called surface hoar. The frozen equivalent of dew, created on crisp, clear nights, it features fragile, featherlike crystals that grow skyward.
1154
On the surface, they glimmer like a million tiny diamonds. When frosted and protected by soft blankets of fluffy snow, they are weak stilts supporting all that falls on top. When they finally give way, falling like microscopic dominoes on a steep slope, they provide an icy flume for the snow above.
1155
A shot of rain or above-freezing temperatures, both common in Cascade winters, usually destroy the fragile crystals, melding them into the snowpack. But five days of dry, cold weather, from Feb. 3 to 7, created a perfect, sparkly layer of surface hoar. Sporadic light snow, never more than an inch or two a day, delicately shrouded it over the next 10 days.
1156
By the weekend, as snow fell heavily over the Cascades and powder-hungry hordes took to the slopes, the old layer was long out of sight, and mostly out of mind.
1157
Not to Moore.
1158
“Snowpack is never static,” he said. “It’s changing, even once it’s buried.”
1159
Changes in temperatures, precipitation, humidity and wind can turn a benign snowpack into a deadly one, and vice versa. Sometimes weather is enough to start an avalanche. But “natural” avalanches rarely kill. The majority of avalanche fatalities are in human-triggered slides — usually of the victims’ own making.
1160
1161
1162
1164
1166
Dan Abrams
1167
34, Co-founder, Flylow ski apparel, fiancé of Megan Michelson
1168
View Slideshow
1169
1170
1172
Megan Michelson
1173
30, Freeskiing editor, ESPN.com, fiancée of Dan Abrams
1174
View Slideshow
1175
1176
1177
1178
1179
1182
1183
1186
1187
1188
1189
1193
“Every skier, everyone who hits the slope, changes the structure of the snowpack,” Moore said. “Even though they don’t know it.”
1194
In the rugged area of the Cascades that includes Stevens Pass, Moore deemed the avalanche danger “high” — the fourth degree out of five — for slopes above 5,000 feet in elevation, facing north to southeast.
1195
For everything else, the danger level was deemed “considerable,” defined as “dangerous avalanche conditions” with “human-triggered avalanches likely.”
1196
The top of Cowboy Mountain is nearly 6,000 feet. The Tunnel Creek terrain descends off its southwest side to roughly 3,000 feet. Officially, the danger was “considerable.”
1197
“In avalanche forecasting terms, ‘considerable’ is a really weird forecast,” Saugstad said. “Because it’s this gray area. It’s a hard one to predict. It can mean, well, you’re not going to see any activity. Or, if something goes, you’re going to be screwed. It’s hard to work with that one.”
1198
Moore’s forecast offered more specifics.
1199
“Although decreasing light showers and decreasing winds are expected Sunday, cold temperatures should slow stabilization of existing wind slabs and help maintain the threat of further human-triggered avalanche activity, especially on previously wind-loaded terrain showing no evidence of recent avalanche activity,” Moore wrote.
1200
Spotty afternoon sunshine, he added, could raise the danger, especially on south-facing slopes.
1201
1202
1203
1204
Advertisement
1207
1208
1209
1210
The snow had stopped at Stevens Pass by the time the lifts opened Sunday morning. The runs were quickly doodled with curvy lines.
1214
Stifter sat in the cabin and examined the forecast on his laptop.
1215
“I have this image burned in my head,” Stifter said. “I had a coffee cup in my right hand, I was reading e-mails, and I read the Northwest Avalanche Center report. And it said ‘considerable to high’ was the avalanche danger. And I read it out loud to Keith. And he listened, and I read it again — I read it twice — and looked at it. Huh. I’ve skied enough to know that when it snows a lot, which it did, up to two feet, there’s always going to be instability, with that much weight on an older snowpack.”
1216
Stifter left Carlsen behind and headed to the lifts. He found Jim Jack. If anyone could judge terrain and snow in the backcountry, it was Jim Jack.
1217
The license plate on Jack’s Subaru Brat as a teenager read “IM JIM.” To family and his closest friends, he was Jimmy, sometimes J.J. To most everyone else, he was Jim Jack, blended into one name, accent on the first syllable: JIM-jack.
1218
Jack was the head judge and former president of the International Freeskiers Association, which oversaw a world tour of competitions. At 46, he was a sort of Peter Pan of the ski world, a charismatic, carefree boy who never grew up, beloved by like-minded skiers and snowboarders half his age.
1219
He spent winters traveling the world, spreading the gospel of freeskiing, professing the beauty of finding improbable ways down precarious slopes with grace, nerve and flair. He had been a competitor on the tour, distinguishable from great distances by the silkiness of his loose form, until he landed hard and took his own knee to his face, shattering the bones around his right eye. You could feel the screws when you touched his face.
1220
He was a party accelerator with a penchant for streaking. He did drama in high school and never declined the stage as an adult. On Halloween, his costumes played off his name: Jack on the Rocks, Jim Jack in the Box, Cracker Jack, Jack Frost.
1221
Wearing lederhosen, Jack starred in a cheeky promotional video for Leavenworth. He was a sure-handed shortstop for the team from Uncle Uli’s, a bar and restaurant in the heart of town. A grilled chicken sandwich on the menu, smothered in spicy sauce, is named the Napkin’ Slappin’ Jim Jack.
1222
Jack shared a bungalow off the highway, near the Howard Johnson, with his longtime girlfriend, Tiffany Abraham. They danced late at night in the kitchen and built bonfires in the backyard. The covered front porch held a pile of ski gear and a futon couch, perfect for watching the world go by, beer in hand.
1223
Jack drove a 1994 Chevy pickup with 216,000 miles on it, topped by a Wilderness camper that he added for $350. Widely recognized on the highways and in ski area parking lots around the West, it was held together largely by duct tape and bungee cords. The radio’s volume was stuck on high. If it is too loud, Jack told passengers, just roll down the window.
1224
Jack and his camper rolled into the R.V. parking lot at Stevens Pass on Friday night. On weekends, when the snow was good, the lot filled with dozens of pickup campers and motor homes.
1225
“I woke up on Saturday in my R.V.,” said Tim Wangen, a 53-year-old former commercial diver who lived in a cabin at nearby Lake Wenatchee. “When I wake up, I look outside to see who is next to me. I saw that Jim Jack was next to me. I thought, cool, I got a great neighbor this week.”
1226
Jack and Wangen had skied a couple of runs Sunday morning by the time Stifter caught up to them. Wangen knew Tunnel Creek as well as anyone, having skied it since he was a boy. Jack traveled the world, scouting courses for extreme skiing. He knew how to avoid danger.
1227
Stifter asked Jack about the avalanche report.
1228
“He’s like: ‘Yeah, not to worry,’” Stifter said. “‘We’ll just do it slowly and safely and just stay in the trees.’”
1229
1230
1231
1232
‘Gear Up?’
1233
The fire pit sits at the center of the bustle on busy days. At the corner of the patio, in front of the lodge, it is a crossroads for people coming and going. Some pull up chairs and relax, facing the bowl of ski runs strung before them. When the clouds lift, Cowboy Mountain dominates the view high to the right. It can feel close enough to reach and touch.
1234
By midmorning, the fire pit began attracting a growing but confused band of expert skiers. Some were local, some were visitors. Some knew others, some did not, but most knew either Chris Rudolph or Jim Jack. They traded nods and handshakes, unsure if others were headed to Tunnel Creek, too.
1235
“We didn’t know why everyone was there,” said Dan Abrams, there with Megan Michelson. “We wondered if everyone was meeting up for the same reason. But it’s like when you find out where the extra keg is at the party. You don’t go tell everybody.”
1236
Joel Hammond, the 37-year-old regional sales representative for Salomon, had teamed with Rudolph to organize the previous day’s women’s event. He did not intend to ski Sunday until he awoke in Leavenworth and could not resist the lure of the fresh snow. He drove to Stevens Pass and sent a text message to Rudolph, still in a staff meeting.
1237
“Chris was like: ‘Meet at the fire pit, where everybody meets. Then we’re going to rally up,’” Hammond said.
1238
Hammond told Jack that he had the latest model of skis in his truck, then left to retrieve a pair for him to try. Stifter bought coffee, a couple of Americanos, from the stand for himself and Jack.
1239
Tim Carlson and Ron Pankey, both 37 and childhood friends from Vermont, had spent the morning on the inbounds side of Cowboy Mountain, navigating near-vertical chutes and rock outcroppings. During a break, they spotted familiar faces near the fire pit.
1240
Pankey was a former competitor on the Freeskiing World Tour, so he had known Jack since the mid-1990s. Like Jack, he eventually worked competitions around the world, including the X Games.
1241
Carlson was a snowboarder, not a skier, and a regular at Stevens Pass. Earlier that week, he competed at Washington’s Crystal Mountain. Jack worked the event, and Carlson slept several nights in Jack’s camper.
1242
When Carlson and Pankey arrived at Stevens Pass that Sunday, they joined Tim Wesley, known to most as Tall Tim — a lanky 39-year-old snowboarder from Leavenworth. The three merged with those waiting for Rudolph.
1243
Another arrival was Wenzel Peikert, 29, an off-duty Stevens Pass ski instructor from Seattle. Skiing over the weekend without his wife and infant daughter, he hung around the Foggy Goggle and the R.V. lot on Saturday night. He, too, sent a message to Rudolph on Sunday, confirming the plan.
1244
“I wrote, ‘Gear up?’” Peikert said. “And he wrote, ‘Yeah, for sure.’ So I went into the ski school and grabbed my pack, with my beacon, probe and shovel. I went to the fire pit and I met the whole group. You could tell they were a different level of skier by how they acted and how they dressed.”
1245
Among the strangers he saw was Rob Castillo, a 40-year-old father of two and former competitive skier. He had exchanged text messages with Jack.
1246
Castillo and Jack lived together in Alta, Utah, for several years in the 1990s. They went helicopter skiing in Alaska and skied down mountains they had climbed in Washington.
1247
“Tunnel Creek at 11,” Jack wrote.
1248
“Perfect,” Castillo thought. “That’s just what I wanted to do.”
1249
At the fire pit, Castillo considered the others.
1250
1251
1252

1255
1256
1257
1258
1259

1261
1262
1263
1264
1265
1266
1267
“It was kind of like, ‘All right, this group is getting bigger,’” Castillo said. “I wouldn’t pop in with a bunch of no-names, necessarily, and trust any of them, but the ones I knew were definitely qualified to go. And they’re not going to bring people out who aren’t.”
1268
More than anything, Castillo wanted to ski for the first time all season with his two best friends at Stevens Pass – Jack and Johnny Brenan.
1269
In the R.V. parking lot, a few hundred yards away, Johnny and Laurie Brenan convened in their motor home for an early lunch with their daughters, Josie, 10, and Nina, 7, part of the Stevens Pass ski teams.
1270
Brenan, 41, grew up comfortably in the Seattle suburbs, not far from Jack. He followed his passion for skiing to Breckenridge, Colo., working as a ski patroller in the winter and a carpenter in the summer. A burly man whose five o’clock shadow arrived by noon each day, he eventually opened a business that he named for home: Cascade Contracting.
1271
“I met Johnny at the Gold Pan in Breckenridge,” Laurie Brenan said. “It was Thursday night, 25-cent beer night. He was sitting on the pool table, and he had an open spot next to him. And I said, ‘I’m going to go sit next to that cute guy.’”
1272
They married in 1997 and moved to Leavenworth. Brenan worked as a cabinetmaker, then resurrected Cascade Contracting. On the strength of Brenan’s amicable personality and no-fear creativity, it blossomed with custom homes and expansive remodels.
1273
The Brenans bought a deteriorated 100-year-old farmhouse on a hill in an apple orchard. Johnny Brenan lifted the structure on jacks, rebuilt the foundation and gutted the inside, intending to resell it as a bed-and-breakfast. The Brenans kept it for themselves to raise their family.
1274
Brenan zipped from one construction site to another in his truck. He coached soccer teams. He held Monday night poker games in the garage, which Nina always helped prepare. He built a chicken coop in the yard.
1275
“Johnny and Josie bought five chickens, and they called the business Eggs, Ink,” Laurie Brenan said. “They had signs and business cards. Then they bought 30 more chickens. It’s like, she’s 5 years old. But the more the merrier for Johnny, even with chickens.”
1276
1277
1280
Jim Jack
1281
46, Head judge of the Freeskiing World Tour
1282
View Slideshow
1283
1284
1286
Tim Wangen
1287
53, Lifelong backcountry skier in Stevens Pass area
1288
View Slideshow
1289
1290
1292
Joel Hammond
1293
37, Regional sales representative, Salomon ski equipment
1294
View Slideshow
1295
1296
1297
1299
Tim Carlson
1300
37, Competitive snowboarder, childhood friend of Ron Pankey
1301
View Slideshow
1302
1303
1305
Ron Pankey
1306
37, Competition director for Freeskiing World Tour, childhood friend of Tim Carlson
1307
View Slideshow
1308
1309
1310
1312
Tim Wesley (Tall Tim)
1313
39, Owner of Shark Snowsurf snowboards
1314
View Slideshow
1315
1316
1317
1319
Wenzel Peikert
1320
29, Part-time ski instructor from Seattle
1321
View Slideshow
1322
1323
1325
Rob Castillo
1326
40, Former competitive skier, longtime friend of Jack and Brenan
1327
View Slideshow
1328
1329
1331
Johnny Brenan
1332
41, Home builder, married father of two
1333
View Slideshow
1334
1335
1336
1337
1338
1339
Advertisement
1342
1343
1344
1345
1349
Sunday began perfectly for Brenan. The family R.V. was parked in space No. 3, where the satellite dish picked up the best television reception. Brenan was at the front of the lift line at dawn.
1350
He offered to fetch coffee for those behind him, a trick he used to keep his place while he helped Laurie get their daughters fed and dressed. He returned to the line, excited for an increasingly rare chance to ski with old friends like Jack.
1351
“I dropped the kids off for ski team about 8:45,” Laurie Brenan said. “I remember looking down and Johnny was yelling at Jim Jack, doing something with his hands, something crazy. They were like little boys in a candy store. They were so excited.”
1352
Back with his family for lunch, Brenan ate an egg sandwich and discussed a business deal on the phone. It was after 11, and he was afraid he would miss the Tunnel Creek run.
1353
But Rudolph sent a couple of people text messages at about 11:15. He apologized for running late, and said he would be out in about 10 minutes.
1354
Brenan had time. He made a pact with Josie.
1355
“Josie, be ready at 2,” Brenan said. “I’m going to come back and we’ll go on a powder mission. Be here, because I’ll be here.”
1356
Brenan strapped on his avalanche beacon, also called a transceiver, a device that emits a silent signal for others to detect your location in case of burial. A friend in the R.V. noted that its batteries were dead. Brenan replaced them with fresh ones.
1357
“What’s that, Papa?” Nina asked her father.
1358
Brenan paused to show her how it worked.
1359
“He explained it,” Laurie Brenan said. “It was understood that avalanche beacons were really for body recovery. Not many people survive avalanches. He would say that.”
1360
Brenan gathered his things and headed toward the fire pit to join his friends.
1361
“I said, ‘Are you sure it’s safe?’” Laurie Brenan said. “He looked me right in the eye and said: ‘Of course. I wouldn’t be going if it weren’t.’ I said O.K. because I knew that was true.”
1362
At about 11:30, Rudolph burst through the doors of the lodge at Stevens Pass. He was surprised by the size of the group waiting for him, but he barely broke stride.
1363
“Get me out of here before another spreadsheet finds me,” he said.
1364
The group, jolted into action, scattered to gather gear.
1365
“We all rallied up, jumped on the lifts,” Castillo said. “I remember seeing some other buddies of mine later, like: ‘Oh, I wanted to go out so bad with you guys that day. It looked like such a fun crew.’”
1366
1367
1368
1369
The Backcountry Beckons
1370
1375
1376
1377
Stevens Pass opened in the winter of 1937-38 with a rope tow on Big Chief Mountain. A lodge and five new tows were added in the 1940s, including a mile-long T-bar that pulled people up the side of Cowboy Mountain. The ski area took shape in the bowl below the crescent-shape ridge that connects the two mountains.
1378
1379
Seventh Heaven, a two-person lift up a steep wall of Cowboy Mountain, changed the complexion of Stevens Pass when it was built in 1960. It opened a high swath of expert terrain, now marked as double diamond — experts only — on posted signs and the ski map.
1380
1381
1382
1383
It also provided easy access to the top of the high ridgeline. Back then, few people dared to remove their skis and hike the few hundred extra feet to the summit. “When I was younger at Stevens, no one skied off Cowboy — maybe just a few locals,” said Wangen, who has skied the area for nearly five decades. “But the last 20 years, it’s gone ballistic.”
1384
Now there is a steady procession of expert skiers and snowboarders through the boundary gate next to the top of the lift. Most drop off the left side of the ridge, back into the resort, through the rocky and narrow chutes.
1385
Those who drop away from the ski area, toward Tunnel Creek, are simply following a much wider trend into “sidecountry” — backcountry slopes easily entered by lifts and, sometimes, a short hike.
1386
“I don’t like the term ‘sidecountry,’” Moore, the avalanche forecaster, said. “It makes it sound like ‘backcountry light.’”
1387
The rise of backcountry skiing can be credited to a collision of factors.
1388
Ski areas that once vigilantly policed their boundaries, from Jackson Hole, Wyo., to Squaw Valley, Calif., have gradually opened their gates to the territory surrounding them. While that has led to wrangling over liability issues and raised debate over search-and-rescue responsibilities, most areas note that they are carved out of public land. They really cannot keep people from going there.
1389
But ski areas also see the potential to attract more ticket-buying customers, and more influential ones, by blurring the boundary lines. Many areas slyly promote not just the terrain inside their borders, but the wilder topography beyond, using the power of media and word of mouth — as Rudolph did for Stevens Pass.
1390
Skiing adjacent to ski areas, however, can numb people to risk. Easy access, familiar terrain and a belief that help is just a short distance away may lead people to descend slopes they might avoid in deeper wilderness.
1391
While most backcountry users would not consider entering known avalanche territory without a beacon, one study last winter at Loveland Ski Area in Colorado found that fewer than 40 percent of people who passed through a boundary gate wore one.
1392
Equipment advances have emboldened people. Intermediate powder skiers have been turned into expert ones thanks to fatter skis and the “rocker” shape of their tips — design advances borrowed from snowboarding. Popular ski bindings now temporarily detach at the heel, allowing skiers to glide up rises like a cross-country skier, then reconnect so they can descend like a professional downhiller.
1393
Snowboards have borrowed from skis, too. Some models can be quickly split into two pieces, allowing users to stride up short hills in pursuit of bigger descents.
1394
1395
1396
1397
1398
Similar advances in safety gear, such as easy-to-use digital beacons and air bags, have helped make the backcountry feel less dangerous. Beacons help rescuers find people buried under the snow, while air bags deploy a large balloon meant to help keep the skier closer to the surface of an avalanche. A leading American manufacturer of safety gear is named, appropriately, Backcountry Access.
1402
Companies, including Salomon and Flylow, have marketed heavily to ride the backcountry trend. They are keenly aware that many buyers will never ski the backcountry but want to dress the part.
1403
Those marketing shifts have coincided with a generation raised on the glorification of risk. From X Games to YouTube videos, helmet cameras to social media, the culture rewards vicarious thrills and video one-upmanship. This generation no longer automatically adheres to the axiom of waiting a day for safer conditions. The relative placidness of inbounds skiing is no match for the greater adventure of untamed terrain.
1404
Among avalanche forecasters and the growing cottage industry of safety instructors, there is pride in noting that the number of fatalities has risen at a slower rate than the number of backcountry users. But they see themselves as part of a difficult race between the coming hordes and the tools to protect them.
1405
“You could argue that skiers have never been this educated or safe,” Stifter, the Powder magazine editor, said. “There’s been a huge emergence and emphasis on avalanche classes. Then you also have this lifesaving technology. But if you go to Jackson or Utah, you’ll see people who are not educated, who are just going out there because they see it in the movies and they see it in magazines like Powder: there’s fresh tracks and, man, it looks like fun.”
1406
1407
1408
1410
1411
1412
1413
1414
1415
1416
1417
At the top of Seventh Heaven, the members of the group took off their skis and snowboards. Directly to the right of the lift’s unloading ramp was a narrow trail that disappeared up through a clog of trees.
1421
1422

1425

1426
1427
1428
1429
1430
1431
“Read this,” one sign read in all capital letters. “Ski Area Boundary. Minimum of $1000.00 rescue fee! Do you have a partner, beacon, probe and shovel? Explosives may be used in this area at any time. Continue at your own risk.”
1432
1433
1434
A smaller sign read: “Stop. Ski Area Boundary. No ski patrol or snow control beyond this point.”
1435
To the right was a gray steel box. It was labeled, “Avalanche Transceiver Check Station.”
1436
“You walk by and it goes beep, beep,” Rob Castillo said. “So as we were going through, you heard it going all the way, right on everyone. Beep. Beep. Beep.”
1437
While there are no laws dictating what equipment people carry into the backcountry, there is a code. Carry a beacon (for sending and receiving signals), a probe (for poking for victims in the snow) and a shovel (for digging them out).
1438
“When you go in the backcountry, you’re trusting your life in the hands of everybody else and they’re trusting their life in you,” Michelson said. “If I get buried and my ski partner doesn’t have a beacon, shovel or probe, it’s my life on the line.”
1439
One member of the party did not elicit a beep: Erin Dessert, a 35-year-old snowboarder who was early for her afternoon shift as a Stevens Pass lift operator. Wesley invited her along. She thought everyone was riding off the front side of Cowboy Mountain, back into the ski area.
1440
The group marched single file along the narrow ridge for a few minutes until it reached a wider area to convene. Tracks dropped back over a steep edge and into the ski area to the left.
1441
To the right was nothing but deep powder, hidden by thick trees, like a curtain to the big attraction.
1442
1443
1444
1447
Erin Dessert
1448
35, Snowboarder, Stevens Pass lift operator
1449
View Slideshow
1450
1451
1452
1453
1454
1455
1463
1464
1465
1466
1467
1468
1469
1474
The Descent Begins
1475
1476
1477
Dan Abrams
1479
Johnny Brenan
1480
Keith Carlsen
1481
Tim Carlson
1482
Rob Castillo
1483
Erin Dessert
1484
Joel Hammond
1485
Jim Jack
1486
Megan Michelson
1487
Ron Pankey
1488
Wenzel Peikert
1489
Chris Rudolph
1490
Elyse Saugstad
1491
John Stifter
1492
Tim Wangen
1493
Tim Wesley
1494
1495
1496
1500
There were 16 people, although no one thought to count at the time. Their ages ranged from 29 to 53.
1501
“This was a crew that seemed like it was assembled by some higher force,” Dessert said.
1502
It was about 11:45. The storm had passed. A low, pewter sky hid the surrounding peaks. Castillo glanced around at the others, wearing helmets and rainbow hues, a kaleidoscope of color amid the gray surroundings, like sprinkles on vanilla ice cream.
1503
“I was thinking, wow, what a bunch of heavies,” he said.
1504
There was loose banter and a few casual introductions. Not everyone met everyone else. Someone pulled out marijuana to smoke, and passed it.
1505
Wesley, the snowboarder known as Tall Tim, saw the size of the assembled group. More than a dozen, he thought.
1506
“That never happens,” he said. “And it’s basically the legends of Stevens Pass standing up there.”
1507
There was little doubt that those with Tunnel Creek experience knew the way. About half the group had been down dozens of times each, if not hundreds. The others would follow.
1508
1509

1512
1513
1514
1515
1516
There was no broad discussion of the route down. Pockets of the group talked about staying left, not being too greedy by going too far down the meadow before cutting across.
1517
“That run, it’s not that it’s supersteep, or there are cliffs, or that it’s a really rowdy run,” Carlson, one of the Stevens Pass regulars, said. “It’s that if anything goes wrong, it’s a terrain trap. If somebody happens to set off even a slough slide and you’re below them in Tunnel, it all bottlenecks and really adds up superfast. That’s the reason that run is heavy. It’s notorious.”
1518
Unspoken anxiety spread among those unfamiliar with the descent. The mere size of the group spooked some. Backcountry users of all types — skiers, snowboarders, snowmobilers and climbers — worry about how much of a load a slope can absorb before it gives way. They worry about people above them causing an avalanche. When it comes to the backcountry, there is usually not safety in large numbers.
1519
That is not only because of the physical impact on the snow. It is because of the complicated dynamics that large groups create. Deadly avalanches are usually the product of bad decisions — human nature, not Mother Nature.
1520
“If it was up to me, I would never have gone backcountry skiing with 12 people,” Michelson, the ESPN journalist, said. “That’s just way too many. But there were sort of the social dynamics of that — where I didn’t want to be the one to say, you know, ‘Hey, this is too big a group and we shouldn’t be doing this.’ I was invited by someone else, so I didn’t want to stand up and cause a fuss. And not to play the gender card, but there were 2 girls and 10 guys, and I didn’t want to be the whiny female figure, you know? So I just followed along.”
1521
Others suppressed reservations, too.
1522
“The whole thing felt rushed to me, and it felt kind of like this covert operation,” Stifter said. “Which it kind of was, because you’re going out of bounds. It’s obviously acceptable, especially when you’re going out there with all these locals and the director of marketing. It’s not illegal or anything. It just had this rushed feeling from the time Chris walked out of the office, and he’s like, ‘All right, let’s go.’”
1523
Carlsen, Stifter’s Powder colleague, was uneasy. He tried to convince himself that it was a good idea.
1524
“There’s no way this entire group can make a decision that isn’t smart,” he said to himself. “Of course it’s fine, if we’re all going. It’s got to be fine.”
1525
1526
1527
1528
1529
1530

1534
1536
1537
and Carlson
1538
1539
1540
1541
1542
1543
1544
1545
1546
1547
1548
1562
1563
1566
1567
After a few minutes, the small talk faded. Worries went unexpressed.
1568
“When you’re up on top of a peak like that, it’s usually hang out for a second, and then it’s momentum,” Castillo said. “You just kind of feel it. Everyone’s like: ‘O.K., we’re not here to hang out. Let’s start going.’ So I saw people starting to slide, get going, and I was like: ‘Hey, Johnny, partner up. Buddy system. Let’s go. Me and you.’ And at that point, it clicked. Everyone’s like, yeah, partners, partners, partners.”
1569
It is a tenet of avalanche safety, and the command snapped the group to attention.
1570
“Someone said, ‘Partner up — everyone should grab a partner,’” Carlsen said. “Immediately I thought, We’re in a somewhat serious situation. It wasn’t just grab a partner so you don’t get lost. It was grab a partner so you. …
1571
“It just felt bigger all of a sudden.”
1572
Rudolph, the Stevens Pass marketing director, teamed with Saugstad, the professional skier.
1573
“I was really excited about that,” Saugstad said, “because he’s just such a cool guy and I thought, wow, cool, he wants to be my partner. A very trustworthy guy that’s an amazing skier.”
1574
Jack, on borrowed Salomon skis, paired with Joel Hammond, the Salomon representative. Carlson looked at Pankey, his childhood friend.
1575
“Dude, you’re coming with me,” he said.
1576
1577
1578
1579
1580
Wesley gave a little whistle to Carlson and Pankey and nodded downhill. He wanted to be first. The conditions were too good to waste time, and he did not want to be slowed by the huge pack.
1581
With little warning, Wesley dropped straight through the large cluster of trees, using firs as a slalom course. Pankey and Carlson followed.
1582
Rudolph, always up for competition, sped around the trees, not through them. He curved around a banked C-shape turn that dropped him a couple hundred feet into the broad meadow below.
1583
He arrived just in time to see Wesley, Pankey and Carlson burst from the trees into the open powder. Rudolph pointed his ski poles and playfully shouted invectives as their tracks crossed.
1584
Wesley laughed, and his two friends followed him left and over a small rise.
1585
Rudolph headed straight down the mountain.
1586
“I remember looking back at where he was going and being confused,” Wesley said. “Like, ‘Where is he going?’”
1587
All the locals in the group presumed they knew what the others were thinking. They did not.
1588
“When you know an avalanche is not very likely, that’s a great way to go,” Wesley said of Rudolph’s choice to ski straight down farther. “It’s three open glades of awesome powder.”
1589
Earlier that morning, Wesley and Carlson had skied the opposite side of Cowboy Mountain, in the ski area. It had been cleared of avalanches by the ski patrol at dawn, but the two still triggered several slough slides — small, shallow avalanches that washed at their feet and petered out before snagging victims.
1590
“That’s why, when they said we’re doing Tunnel, I was like, ‘Ooh, dicey,’” Wesley said.
1591
Pankey and Carlson followed Wesley and looked back, too, wondering why Rudolph and the others were not following them toward relatively safer terrain. Within a minute, long enough to be well out of sight of the group they left behind, the three men found something that made them stop.
1592
“We were right on top of a knoll, a little rollover, where we were about to make some really fun turns, and we saw that the face had already slid,” Carlson said. “It was pretty large.”
1593

1598
1599
1600
1601
1602
1603
1604
1605
1606
Alarmed, the three decided to go farther left. They crossed through trees and avoided big meadows and steep pitches. They soon found evidence of another avalanche, this one cutting through the forest.
1607
“I’d really never seen anything slide in the trees like that,” Carlson said. “And that was definitely like: ‘Holy cow, we shouldn’t be back here, Ron. Let’s go left. Let’s go hard left.’”
1608
Wesley had disappeared in the pale light. He left nothing but a track through the deep snow that the others tried to follow.
1609
“I just went, and didn’t really stop,” Wesley said. “I went all the way down. But I’ve never taken a run where I looked uphill more times in fear.”
1610
1611
1612
1613
1614
1615
‘I Got Eyes on You’
1616
1617
Rudolph stopped on the left edge of the upper meadow, above a cluster of trees. Others filed behind him, spilling down the mountain in plumes of spraying snow.
1618
Erin Dessert did not follow. She was confused. She was once a Tunnel Creek regular, until a nonfatal avalanche captured five friends in 2002 and scared her away.
1619
“Chris Rudolph’s, like, totally all about safety protocol and mountain awareness and wisdom,” she said. “That guy knows the conditions like an animal. He has instincts. It didn’t register, even for a second, that he might be bringing this group to Tunnel Creek. It wasn’t logical. I thought we were doing the front side.”
1620
1621
She headed hard to the right, away from the others. The other snowboarders that she knew, Carlson and Wesley, were gone in the opposite direction. Some in the remaining group noticed Dessert heading away in the distance and dismissed her as an oblivious backcountry rookie. She dipped out of sight in a lonely panic.
1622
“I’ve been riding Stevens Pass since I was 3 years old,” Dessert said. “I can tell circumstances, and I just felt like something besides myself was in charge. They’re all so professional and intelligent and driven and powerful and riding with athletic prowess, yet everything in my mind was going off, wanting to tell them to stop.”
1623
Rudolph and the others, now a group of 12, were focused downhill. It was 11:52 a.m. Rudolph did not wait for the back of the pack to arrive before continuing to demonstrate the way.
1624
1625
1626
1627
1628
“So Chris Rudolph went first, and then he pulled into the trees and we waited for a sec,” said Castillo, who was near the front of the group, wearing a helmet camera. “He goes out of sight and behind the trees. So I said, ‘O.K., Megan, go ahead, spoon those tracks, and you’ll see Chris on the left.’”
1629
It was not Megan Michelson. It was Elyse Saugstad.
1630
“I thought it was Megan,” Castillo said. “I said, ‘Are you Megan?’ She said, ‘No, no, I’m Elyse.’ That’s when I met Elyse. It was right there. And she made these turns that were like: ‘Aah, I think I know who that is. I’ve seen her name. Those are pro turns.’ She ripped the hell out of it.”
1631
1632
1633
1634
Saugstad traced through the knee-deep snow just to the right of Rudolph’s elongated S-shape tracks. She dipped through trees at a pinch in the meadow and disappeared out of sight. She crossed over Rudolph’s tracks and giggled. After about 30 seconds, she was back at Rudolph’s side, having cut left into a notch of the trees again.
1635

1640
1641
1642
1643
1644
1645
1646
1647
1648
“We skied to an area that was probably about 500 feet down or so from where we started,” Saugstad said. “And where we skied to was an area of old-growth trees. You know, several-hundred-year-old trees. A very good indication that this is a safe place. Things don’t happen here.”
1649
Castillo and Brenan teased each other about who would go next.
1650
“Finally, he’s like, ‘Go ahead, I got eyes on you,’” Castillo said.
1651
1652
1653
1654
From where Rudolph and Saugstad stopped, they could not see the subsequent skiers approach. Castillo went past and cut left. His camera recorded Rudolph and Saugstad whooping their approval as he stopped in a shower of powder, about 40 feet below them.
1655
But just before he stopped, Castillo was jolted by a weird sensation.
1656
“A little pang, like, ooh, this is a pretty heavy day out here,” Castillo said. “Thing’s holding, but I remember having a feeling.”
1657
Castillo stopped above two trees. He nestled close and pushed his right ski tight against them.
1658
“A lot of people think you should be below trees, but I stand above them,” Castillo said. “I’m like, ‘I’d rather get pinned against this than taken through.’”
1659
1660
1661
1662
His helmet camera showed that 14 seconds after Castillo stopped, Brenan appeared through the trees above Rudolph and Saugstad. Brenan had hugged the tree line on the left, avoiding the open meadow, then slalomed through the patch that the others used for protection. He stopped in a spray of snow a few feet from Rudolph and Saugstad.
1663
“That was sick!” someone shouted.
1664
Castillo silently took note of the terrain.
1665
“I was downhill from them — skier’s right from them,” Castillo said. “But the trees that they were behind, I didn’t think it was a bad spot to stop. They were huge. Giant old-growths that three of us probably can’t put our hands around.”
1666
But he knew the direction of the slope did not follow the meadow. It dipped harder left into the trees, down toward a gully. And there were still a lot of skiers above them.
1667
Saugstad was next to Rudolph. Brenan was a few feet away.
1668
1669
1670
1671
“We weren’t straight across from each other, in a perfect horizontal line on the slope,” Saugstad said. “We were peppered up and down, spread out.”
1672
1673
Castillo kept his attention up the hill. Less than 30 seconds after Brenan stopped, he saw Tim Wangen cut through the trees above the earlier arrivals, gliding horizontally through the forest. Wangen had been taught how to navigate Tunnel Creek by his father. He knew that the farther down the mountain he went, the harder it would be to cut over the ridge and into the next big meadow. He crossed the shallow gully and rose up the other side.
1674
“I could see the others when I cut over,” Wangen said. “I thought: Oh yeah, that’s a bad place to be. That’s a bad place to be with that many people. But I didn’t say anything. I didn’t want to be the jerk.”
1675
1676
1677
Wangen had told Peikert to follow his tracks, and Peikert was close behind. Castillo watched where they went.
1678
“Want to cut over?” Castillo shouted to those above him.
1679
1680
1681
Sliding Snow
1682
The start of an avalanche is unlike any other force of nature.
1683
A hurricane is foretold by wind and lashing waves. A tornado often is spotted before it strikes. Lightning is usually presaged by black clouds and rumbling thunder.
1684
Avalanches rarely provide such a warning. Unlike waves or wind, tremors or storms, they are usually triggered by their own victims, sometimes unaware of what has been unleashed.
1685
“If you swim out in the ocean, the ocean’s always alive,” Saugstad said. “You can feel it. But the mountains feel like they’re asleep.”
1686
Back up the mountain, Jack never seemed worried. That was his nature. Here he was, a rare weekend off, skiing with some of his best friends from Leavenworth and people from Powder and ESPN and all over the industry, on an epic run on a perfect powder day.
1687
Carlsen, the Powder photographer, had never been to Tunnel Creek. The first few easy turns gave way to a slope that fell steeply away, out of sight. He sidled up to Jack.
1688
1689
1690
1691
“I grabbed him, and I said, ‘What is the move here?’” Carlsen said. “It was basically like, ‘This is getting real, how do we handle it?’ He’s like: ‘Oh, no big deal. We go out here, swing out, make a few pow turns, and get back in the trees.’ I looked at him and said, ‘Have a great run.’ Gave him a fist, a knuckle-to-knuckle high-five thing. And that was it. I watched him swing out, way out, skier’s right, and then dive into his turn left.”
1692
Jack flowed through the thick powder with his typical ease. He skied the way other people walked down a sidewalk, a friend had said.
1693
Jack disappeared over the knoll, gliding through the trees in the middle of the meadow. Behind him, the five remaining skiers watched in silence.
1694
“He looked like he was having a great time, the run of his life, in fact,” Michelson said. “And he actually made, I remember, a little ‘woo’ sound, as he dropped in on his first or second turn because the snow was really good. It was deep and light.”
1695
Then the snow changed without warning.
1696
Across the meadow, above Jack, loose snow seemed to chase him down the hill and out of sight.
1697
1698
Not everyone saw it. A couple did. They caught it in their peripheral vision and were unsure what to make of it.
1699
“That was sketchy,” Hammond said.
1700
The five others listened. Not a sound. They stared for clues through the flat light below a murky sky. Nothing.
1701
Silent seconds ticked. Finally, Hammond spotted the first sign of evidence. It came from a tree, one among thousands, far down the hill, almost out of sight. Only the top of it was visible, and it was covered in snow.
1702
“I saw it moving,” Hammond said. “Like something had hit the tree, and it shook. And I could see the powder falling off the tree.”
1703
1704
1705
1707
1709
Chris Rudolph
1710
30, Director of marketing at Stevens Pass
1711
1712
1713
1714
1716
Elyse Saugstad
1717
33, Professional freeskier
1718
1719
1720
1722
Rob Castillo
1723
40, Former competitive skier, longtime friend of Jack and Brenan
1724
1725
1726
1728
Johnny Brenan
1729
41, Home builder, married father of two
1730
1731
1732
1734
Tim Wangen
1735
53, Lifelong backcountry skier in Stevens Pass area
1736
1737
1738
1740
Wenzel Peikert
1741
29, Part-time ski instructor
1742
1743
1744
1746
Jim Jack
1747
46, Head judge of the Freeskiing World Tour
1748
1749
1750
1751
1752
1753
1754
1755
1756
1757
1760
1763
Blur of White
1764
1765
1766
1767
A few hundred yards down the mountain, a ghostly white fog rushed through the forest.
1771
“I saw it,” Saugstad said. “I saw it coming. But it was weird because it was coming through the trees. It was like snow billowing through the trees. Because it was such a treed area, I think for the first second I saw it I didn’t believe it.”
1772
Wangen and Peikert had just traversed in front of its path. It did not miss them by much.
1773
“I don’t know if I’d even come to a stop when I heard it,” Peikert said. “It was almost like wind and pressure more than noise. It literally felt like a freight train went over my tails. It wasn’t a deep rumble. I could feel this rush of air.”
1774
It was a blur of white, its shattered pieces moving about 50 m.p.h., a powder cloud two stories tall.
1775
Rudolph was the only one to scream.
1776
1777
1778
1779
“Avalanche! Elyse!” Rudolph shouted.
1783
Saugstad tried to stride right, hoping to escape. She barely moved before snow flowed through her legs, dragging her down like a riptide.
1784
She pulled the cord on her air bag. She was overwhelmed so quickly by the rising snow that she did not know if it inflated.
1785
“I had no ability to control what was happening to me,” Saugstad said. “I was being tossed over and over and over. It was like being in a washing machine and all my body parts flailing every way. I didn’t know which way was up. I didn’t know which way was down. I couldn’t see anything.”
1786
She is likely to have tumbled just past Castillo. He groaned and turned his face away. He stuck his head between two trees, like a prisoner in a stockade.
1787
For 16 seconds, snow and ice pounded his back and washed over him. His shoulders were jammed against the trees. His face pushed into branches of pine needles. He could feel the heavy assault of snow lashing at his back.
1788
Trees cracked around him. Some in the path were chopped in half — the stumps left in the soil, the rest carried away in the growing torrent.
1789
The avalanche, a relatively small one, started with about 6,000 cubic meters of snow and collected 7,000 cubic meters more on the way down. It probably weighed about 11 million pounds.
1790
1791
1792
1793
1798 In real time
1799
1800
1801
1802
1803
1804
1805
The trees Castillo hugged in each arm swayed but held. He told himself that when he felt the flow slow, he would pop a hand in the air so that it might stick out of the snow and make him easier to rescue.
1809
“Just as I had the thought about what I’m going to do, wondering if it was going to bury me, that’s right when I could feel it,” Castillo said. “It was like a wave. Like when you’re in the ocean and the tide moves away from you. You’re getting thrashed and you feel it pull out and you’re like, O.K., I can stand up now.”
1810
Castillo saw daylight again. His camera captured snow sliding past his legs for another 13 seconds. The forest sounded as if it were full of sickly frogs. It was the trees, scrubbed of their fresh snow, still swaying and creaking around him.
1811
Castillo turned to look back up the hill.
1812
“Where there were three people, there was nobody,” Castillo said.
1813
1814
1815
1816
A Ticking Clock
1817
He did not know who or what set off the avalanche. He did not know how far down the mountain it went. All he knew was that about a dozen people had been above him a minute earlier, and that the gully below him descended another 2,000 vertical feet to the valley floor.
1818
And he was alone.
1819
“Johnny! Johnny Brenan!” Castillo screamed into the stillness, his voice escalating with panic. The scope of the disaster was too much to comprehend. He wanted to find his partner.
1820
1821
“So I’m screaming his name,” Castillo said. “I’m screaming and screaming. Silence.”
1822
Streams of snow still flowed downhill as he scooted toward the heart of the slide path. It flowed into a wide gully, maybe 100 feet across, that narrowed as it descended. Castillo turned his beacon to “search” mode, meaning he would receive signals of those buried, but would not emit signals himself.
1823

1826

1827
1828
1829
1830
“I don’t want to be in this gully because I don’t know what’s coming down next,” Castillo said. “I don’t want to be the next guy taken out. Now I don’t even have a beacon on because I’m on search. They’re not going to find me if anything happens to me.”
1831
Across the gully, unable to see anyone else, either, Peikert and Wangen had gone into search mode, too.
1832
“I was like, if there’s someone in that, the clock’s ticking,” Peikert said.
1833
Chances of survival drop precipitously every minute. According to a recent study, the survival rate for individuals completely buried in an avalanche falls to about 40 percent after 15 minutes of burial and to 25 percent after 30 minutes. About 75 percent of avalanche victims die from asphyxia or suffocation. The other 25 percent of fatalities result from trauma.
1834
1835
Castillo spotted Peikert and Wangen across the gully. They, too, were nervous about hangfire, the unstable snow left along the edges of an avalanche’s path that can release at any moment.
1836
The avalanche had turned the gully into an oversize bobsled run, with slick, high-banked walls.
1837
“This gully’s hard-core!” Castillo yelled. “They’re in it!”
1838
Wangen stayed mostly on the banks. Peikert and Castillo crossed the gully a couple of times, reluctantly and quickly.
1839
“What’s your name again?” Castillo shouted at Peikert.
1840
It was soon apparent that the victims, however many there were, suffered one of two fates: they were hung up on the banks of the gully, snagged by a tree or buried in snow, or they had been flushed to the bottom, thousands of feet below.
1841
If searchers spent too much time looking along the gully, they might squander a chance at rescuing someone at the bottom. If they rushed downhill, they might pass someone in need of saving.
1842
“We started to ski down, hoping to find him in a tree well or hanging on or something,” said Castillo, his focus on Brenan. “But I started to realize all the trees were bent over, and I started thinking, this is really fricking bad. And then I skied down to a point where I found Johnny’s ski, probably three or four feet up in a tree. Stuck.”
1843
Castillo called 911. It was 12:02 p.m. The avalanche occurred seven minutes earlier.
1844
1845
1847
1848
1849
1850
“Hi, I’m at Stevens Pass resort, on the backside of Tunnel Creek,” Castillo told the King County Sheriff’s Department dispatcher. He added, “We had a major avalanche, and we might have three or four people missing, at least.”
1851
The dispatcher asked him to slow down. Castillo, occasionally shouting at others nearby, tried to explain where the avalanche occurred. He was asked how many people there were.
1852
“There’s at least 10,” Castillo said. “Between 10 and 12.”
1853
The dispatcher asked if anybody was hurt.
1854
“We haven’t found them,” Castillo said. “I found one ski. It rolled through pretty heavy, man. I had partners right next to me and they’re missing. I just found a ski about 1,000 yards down. Or 1,000 feet down.”
1855
The call lasted four minutes. Castillo, carrying his friend’s ski, turned down the mountain.
1856
1857
1858
1859
‘This Thing Ripped Big’
1860
1861
Near the top, the five skiers who planned to follow Jim Jack deciphered what happened through a series of increasingly blunt clues. Loose snow. A shaking tree.
1862
Hammond was due to ski next. He took a couple of turns through the fine powder of the meadow and stopped. There was a sudden drop, nearly three feet deep. The fluffy snow was gone. A surface of bluish ice stretched down the hill, into the trees and out of sight.
1863

1868
1869
1870
1871
1872
1873
1874
1875
“Once I had gotten to the edge, I was like, oh my gosh, this thing ripped big,” Hammond said. “I could see the scope of it.”
1876
He shouted for everyone to go into search mode. The other four skiers moved quickly to see.
1877
“We all skied up to it and were like, holy smokes,” Stifter said. “From there all I remember was pulling out my phone. And I called Jim Jack.”
1878
Others started dialing numbers, too. They called Chris Rudolph and Elyse Saugstad. There were no answers. Hammond dropped onto the slick slide path. Another clue lay on the ice, pointing downhill.
1879
“I hopped out there and made one or two turns, and I saw one of Jim’s skis,” Hammond said. “The only reason I recognized Jim’s skis was that it was a pair of skis that he borrowed from me.”
1880
The realization that Jack had been carried away was a gut punch.
1881
“In one respect, you’re like, oh no, a ski — where’s Jim?” Abrams said. “On the other hand, you think, O.K., there’s his ski. Let’s find him.”
1882
Michelson called 911. According to sheriff’s department records, it was 12:03 p.m.
1883
1884
1886
1887
1888
1889
Her voice was steady and sure. She patiently tried to explain where they were — “The backside of the ski area in the backcountry,” she explained. “Tunnel Creek.”
1890
The dispatcher asked if people were buried.
1891
“I believe so, yes,” Michelson replied. “I don’t know how many. We have a large group.”
1892
1893
Word was relayed to the ski area. Chris Brixey, manager of the Stevens Pass Ski Patrol, had 17 patrollers working on the mountain that day, two more in the aid room, and a dispatcher. Brixey is a regular at Johnny Brenan’s Monday night poker parties. He did not know that a group of friends, including Rudolph, his Stevens Pass co-worker, had gone to Tunnel Creek.
1894
“I happened to be walking through the aid room,” Brixey said. “Our dispatcher handed me a note that said 10 people are buried in Tunnel Creek. I called the 911 operator and got Megan’s information. I called Megan directly. She said there’s about 12 people and they were looking for eight people. I didn’t know Megan. My gut feeling was that this was a group of inexperienced people who are now dealing with tragedy.”
1895
Brixey called the area’s most seasoned patroller and put him in charge of the four-member first-response unit, called the hasty team, to follow the group’s trail. He also enlisted other patrollers and a pair of avalanche rescue dogs.
1896
1897
1898
1899
Advertisement
1902
1903
1904
1905
Word of a large avalanche in Tunnel Creek soon echoed around Stevens Pass, from the patrol room to the R.V. lot, up the lifts and down the slopes. According to the Stevens Pass Ski Patrol log, the area closed public access to the boundary gate atop the Seventh Heaven lift at 12:19.
1909
By then, the group that had started off together less than 30 minutes earlier was strewn up and down nearly 3,000 vertical feet. No one knew how many were missing.
1910
Keith Carlsen was nearest the top, searching for Jack.
1911
“I thought someone has to make sure he’s not still up here,” Carlsen said. “It wasn’t likely, but his ski was there, and he got swept, and there’s no sign of him, so maybe he got pummeled into the snow, into a hole, somewhere, right away.”
1912
The others headed down, scanning the path and its edges with their beacons. Carlsen methodically checked the upper meadow.
1913
“I thought I was going to be the one to find him, and I would find him alone,” Carlsen said. “And the bed surface at the top was rock hard. And I’m thinking: I’m going to get a signal, and this guy’s going to be buried, and I’m going to have to somehow dig him out. I’m going to find Jim Jack.”
1914
Scared and alone, Carlsen’s voice broke the silence.
1915

1918
1919
1920
1921
“I’m saying, and I remember repeating this in my head: ‘Jim, am I about to find you? Jim, are you underneath me? Jim, where the hell are you? Is this possible? Is he really underneath here? Am I about to dig Jim out?’”
1922
Farther down, others followed the path into the gully. As it descends toward the valley floor, it carves deeper into the mountain. In some spots, canyon walls are 20 feet high. There were steep, icy drops that would become gushing waterfalls during the spring runoff.
1923
“There are places it’s so tight that I would stop and my skis would straddle the middle,” Hammond said. “And I’d be elevated, like being on springs.”
1924
It was still clogged with rocks and trees that had not been fully scoured away. Where the ravine bent, the avalanche rode high on the outside wall, like a child on a water slide, sometimes breaking over the top of the bank and unearthing trees on the ridges.
1925
“It was fear,” Abrams said. “Fear that you lost someone, and fear that you’re standing in an avalanche path. You’re thinking, Don’t get caught up on trees, listen for the beacons, where’s my fiancée?”
1926
It became increasingly evident that whoever was caught in the avalanche would be found at the bottom.
1927
“I probably went down for one or two minutes and I got no signal,” Michelson said. “I shouted: ‘They’ve gone all the way down! The way this gully is, they’ve been flushed.’”
1928
1929
1930
1931
1932
1933
1934
1935
1936
1937
1938
1941
1944
Discovery
1945
1946
1947
1948
Tim Carlson and Ron Pankey, having split from the big group at the top, nervously negotiated the roundabout route to the bottom of Tunnel Creek. They could not catch up to Tim Wesley, but followed his snowboard track to the valley floor. It was 12:07 p.m.
1952
They glided past the foot of a mound of chunky debris. One of the ravines had spewed a sizable avalanche, but there was no way to know it had occurred in the past few minutes.
1953
“I looked up and I saw a ski pole sticking up,” Carlson said. “It looked like someone stuck it in there. It was sticking up right at the very end of the pile. Handle up.”
1954
He shouted to Pankey.
1955
“I was like, ‘Dude, you need to turn your transceiver on,’” Carlson said. “‘There’s people in here.’”
1956
1957
1958

1963
1964
1965
1966
1967
1968
1969
1970
1971
Carlson clicked out of his snowboard bindings and climbed onto the pile. Pankey turned his beacon to search mode. It beeped immediately.
1972
His skis off, Pankey climbed onto the debris pile, too. He saw the ski pole and two gloves. He was sucker-punched by dread.
1973
“You figure someone who is fighting is going to have his gloves on,” Pankey said. “If they’re limp, yeah, their gloves are going to come off.”
1974
Then he noticed the brand.
1975
“That was my thought — Oh, God, those are Scott gloves. Jim Jack was wearing Scott gloves,” Pankey said.
1976
Their beacons shrieked.
1977
“I probably searched for maybe a minute before I was on top of a signal,” Carlson said. “Your signal goes ‘beepbeepbeepbeepbeep
BEEPBEEPBEEPBEEPBEEP,’ and it gets a little fainter, like oh, over here. I got a strong signal, traversed over, got a weak signal, went back, got a strong signal, went back and I was basically on top of a body.1978
“And, uh, the first shovel I dug in, I hit Jim Jack’s arm.”
1979
The two men dug frantically.
1980
“I saw Jim Jack’s face,” Carlson said. “Eyes open, just staring at me. We could see he wasn’t breathing. Ron started giving him breaths and I was searching for his body, underneath his chest. I was like, ‘What the hell is going on?’ There was no body where you’d expect a body to be. And then I started digging around, and I could see he was folded up into this ball. His feet were above his head.”
1981
His body had been pummeled.
1982
“There was no blood, but he didn’t have his helmet on, he didn’t have his backpack on, his jacket was pulled over his head,” Carlson said. “He had some scrapes on his belly. And just pulling him out of the snow you could feel it and see it. Giving him a couple of breaths, it just came out so quick. And you push on his chest and it would just collapse. There was nothing there. And Jim Jack — we’re all strong dudes, and there was just nothing left.”
1983
“I pulled his arm upright, and it was just really soft,” Carlson added. “It was like pulling a wet towel. Pulled the other arm and it was the same feeling. And I pulled his legs out, and there was nothing connected to anything. It was completely crushed.”
1984
They turned off Jack’s beacon and tried to lay him peacefully in the snow. Pankey pushed his eyelids closed.
1985
1986
1988
1989
1990
1991
He called 911 at 12:31 p.m. and told the dispatcher that he had “recovered a body.”
She asked him for his name.
“Jim Jack,” Pankey replied.
1992
1993
Jack’s phone chirped. It had survived the avalanche, and Pankey reached into Jack’s pocket and pulled it out. It was a text message from Jack’s girlfriend, Tiffany Abraham. Rumors of a big avalanche in Tunnel Creek had reached the base area of Stevens Pass.
1994
“Where are you?” it read. “You OK?”
1995
Pankey looked over at the ski pole sticking straight out of the snow. It looked familiar. Pankey had noticed it on the hike up the ridge to Cowboy Mountain.
1996
“That’s the guy’s in front of me,” Pankey said. “He was hiking in front of me and Jim Jack was behind me, and he had these old Smith, corrective angle, curved poles. So I’m like, ‘That’s Johnny’s pole.’”
1997
1998
‘It Was Just a Bad Dream’
1999
2000
2001
At the upper end of the meadow, more than 100 yards away and out of sight, Elyse Saugstad waited in the silence, unable to move.
2002
She did not know how long she had been frozen there — head pointed downhill, hands sticking out of the snow, face poking through the ice just enough to breathe and see the breaking clouds trailing the weekend’s storm.
2003
Her hip ached. Her mind wandered. She wondered who else was caught in the avalanche. She wondered who was left to rescue them.
2004
She felt herself getting colder. Her pink mittens, like those of a child’s, had strings that attached them to her jacket. When she had come to a stop, one of the mittens was on her hand. The other was off, hanging from her wrist.
2005
Saugstad could not claw the hard-packed snow with her mittens on. She took them off and picked at the ice until her fingers ached. She put her mittens on again until they warmed up.
2006
She had not spoken since the avalanche stopped. It had not occurred to her to cry for help. Someone would come. She hoped.
2007
Finally, for the first time, she shouted.
2008
“Help!” she screamed.
2009
The face of Wenzel Peikert startled her.
2010
Among those who skied down the gully, Peikert arrived first to the avalanche’s final resting place. The walls of the ravine slowly fell away and opened onto a wide, sloping meadow. It was covered by an enormous pile of chunky ice cubes, some fit for a cocktail glass, others the size of couches. The debris was filled with dirt, rocks and shredded tree parts.
2011
It stretched about 150 yards down what remained of the slope. It was 10 or 20 feet tall, obstructing Peikert’s view to the bottom. Peikert’s beacon began its frantic chirping.
2012
“I started getting a signal,” Peikert said. “I marked it with one of my poles. That’s what they teach, to mark where you start picking up a signal and keep working to where it gets stronger. I took my skis off because it was so hard to ski on that stuff. And as I got close to that signal, I saw two pink gloves sticking out.”
2013
Saugstad was about 20 feet downhill.
2014
“Her feet were into the snow and her head was downhill, but I saw two pink gloves and her face,” Peikert said. “I don’t know if she uncovered her face or not, but it was just barely sticking out of the snow. And a little bit of orange from her backpack. I started digging her out, trying not to hurt her. I said, ‘Are you O.K.?’ And she said: ‘I think so. My leg’s kind of hurt.’”
2015
Peikert pulled his shovel from his backpack and started to dig.
2016
“For a pause, really quickly, I thought to myself: she’s alive, she’s breathing, her face is out of the snow,” Peikert said. “I thought, let’s go find others. But then I realized that more snow could come down. I found someone alive, and I needed to get her out of here.”
2017
Saugstad sensed his urgency.
2018
“When he started unburying me, he flung his shovel and it went flying down the hill so far that he couldn’t stop and go get it,” she said. “And so then he had to start digging me out with his hands.”
2019
Peikert hurried, knowing that others were likely buried nearby.
2020
“She was actually really hard to get out,” he said. “One of her skis had stayed on, so it had kind of locked her into the snow. Even a ski boot gets locked in. I dug to get her ski off. It probably took five minutes of digging to get her out.”
2021
Finally, Michelson and Abrams arrived from above. They found Peikert and Saugstad on their feet.
2022
“It didn’t dawn on me that she had been buried,” Michelson said. “I was relieved she was alive.”
2023
Over several minutes, others trickled down from above.
2024
“Once we got to the bottom, when we got through the ravine and got to the mouth, I just remember saying, ‘Oh, my God,’” Stifter said. “Snow chunks the size of boulders. That’s when I realized the magnitude of everything. It looked like a war zone. It was chaos.”
2025
Michelson took charge as an impromptu site commander. No one was sure who was missing or how many victims there might be. Michelson used her beacon and pinpointed two spots for others to search, then continued sweeping the meadow to search for more.
2026
“My numbers and directions were bouncing all over the place,” Peikert said. “But Megan comes up and hers was right on it. Mine is a little bit older, but I don’t know why it was bouncing around. I started probing, and I hit a spot where there obviously was something other than snow.”
2027
Peikert and Rob Castillo dug through the ice. It had been more than 30 minutes since the avalanche.
2028
2029

2034
2035
2036
2037
2038
2039
2040
2041
Johnny Brenan was discovered about three feet below the surface. He had been buried a few feet from Saugstad all along.
2042
“I found his back first,” Peikert said. “His head was really bent under. I tried to dig a hole through his armpit, to his head, thinking I might be able to get his face turned to give him C.P.R. There was blood. His chin was split open. His helmet was pushed back onto the back of his head and was filled with snow. One leg was off in a weird position, like he had a broken femur or hip or something. I finally got him out. He was cold. Blue.”
2043
Castillo, Brenan’s longtime friend and ski partner, worked side by side with Peikert, at last getting his legs out.
2044
“The muscles were just beat,” Castillo said.
2045
About 20 feet up the hill, Abrams, Wangen and Stifter zeroed in on a victim, too. It was the spot that Peikert had marked with his pole before he spotted Saugstad.
2046
“We were still searching for the lowest signal,” Stifter said. “And the lowest signal I got on the transceiver was 2.4, and it took me, like, half a second to realize, oh, that’s six feet down because it’s in meters. So I’m like, all right, this is our lowest reading. And I think on our third probe we struck something. I told Dan and Tim, ‘All right, get the shovels out,’ and we started digging.”
2047
Digging was nothing like scooping snow from a driveway. It was more like shoveling the chunky piles that snowplows leave along the side of a cleared highway, full of large pieces seemingly glued together.
2048
2049
2050
2051
2052
“They’re big mounds of snow and they’re like concrete,” Stifter said. “So you dig and dig, and then that person would rotate to the back and take a break and the guy who was second would start clearing snow out for the guy who is digging.”
2056
Quickly exhausted, they rotated frequently.
2057
“It was just a bad dream,” Abrams said. “I was standing there holding my shovel that I never intended to use, except maybe to get my car out.”
2058
Finally, they reached a victim: Chris Rudolph.
2059
“He was lying facedown, so it was hard to get to his face,” Stifter said. “And it was hard because we couldn’t move him because he was just encased in there. His feet were buried really deeply. Finally I was able to get to his face. His face was blue. And so finally I was like: ‘We’ve got to get his feet out! We’ve got to get his feet out!’ That took another good couple of minutes to get his feet free. Then we gently pulled him out by his backpack.”
2060
Stifter performed C.P.R. on Rudolph: 2 breaths, 30 compressions, to the point of exhaustion.
2061
Saugstad called 911. It was 12:40 p.m.
2062
2063
2065
2066
2067
2068
“I’m reporting an avalanche,” she said, breathlessly.
2069
Frantic voices behind her shouted encouragement.
2070
“Come on! You can do it! Come on, buddy! Take a breath!”
2071
The dispatcher said there were “units on scene.” Saugstad said they had not arrived and asked if they were coming by helicopter.
2072
“Uh, we do not have a helicopter yet in the area because of the avalanche risk,” the dispatcher said.
2073
2074
Hammond was the last to arrive from above and took over trying to revive Rudolph.
2075
“I definitely believed that there was a chance,” Stifter said. “My hope dissipated certainly after Joel got there and I was sitting there. We knew. We looked at each other.”
2076
Twenty feet downhill, the huddle around Brenan slowly came to the same conclusion. Peikert had been performing C.P.R. for close to 30 minutes, with Castillo’s help.
2077
“I was hoping for a miracle then,” Castillo said. “But I really kind of understood that he was probably dead.”
2078
An hour’s worth of adrenaline dissolved to disheartened shock. A few other skiers had happened upon the scene, but no rescue help had arrived.
2079
Saugstad walked around dazed, wearing her deflated air bag “like dead angel wings,” Carlsen said. Castillo made his way to the bottom of the hill to learn that Jim Jack was dead, too. Erin Dessert, the snowboarder who had veered away from the group at the top, frightened by the direction everyone was headed, had cautiously made her way down and rediscovered the group. She cradled Rudolph’s head as others tried their last attempts to resuscitate him.
2080
“It’s Chris Rudolph,” she said. “You know? He’s the knight in shining armor of Stevens Pass.”
2081
2082
2083
2085
2086
2087
2088
2089
2090
2091
2092
2093
2096
2099
Word Spreads
2100
2101
2102
2103
2104
2105
Laurie Brenan and Tiffany Abraham, Jack’s girlfriend, were both in the Bull’s Tooth Pub and Eatery, on the second level of the Granite Peaks Lodge.
2109
“I saw Tiffany sitting at the bar, and I sat a few seats away,” Brenan said. “She says, ‘I haven’t seen Jim yet.’ And I said, ‘Oh, he and Johnny did Tunnel Creek.’”
2110
The man next to Abraham, a neighbor from Leavenworth, overheard. There was an avalanche in Tunnel Creek, he said. Someone came into the restaurant a while ago and asked for volunteers to help search.
2111
Abraham’s heart sank. Normally a font of buoyant optimism, she had a sudden pang of dread.
2112
“I downed my cocktail because I knew I’d need it,” Abraham said. “The bartender was telling a story, and I was trying to be polite and listen, but I knew I had to get out of there. I got my lunch boxed up and walked down to the ski patrol office. I took the elevator, and it was the slowest elevator in the world.”
2113
She could tell immediately that bad news was waiting. She spotted a friend who was on his way to the scene.
2114
“He grabs my hand and I screamed at him,” Abraham said. “‘What the hell is going on?’”
2115
2116
2122
2123
2124
2129
2130
2131
2136
2137
2138
2139
2140
2141
They went into the ski patrol room, on the ground level on the backside of the lodge. Inside is a first-aid room with beds for injured skiers. Beyond is a ski patrol break room, a couch against one wall.
2142
Anne Hessburg, Rudolph’s girlfriend, was sitting there, balled up in tears. She had skied all morning with a friend and taken an early lunch at the Iron Goat pizzeria. She walked up to the slope-side cabin that Rudolph had provided to the journalists from Powder magazine. Hessburg stored skis there. A friend received a call while she was there.
2143
“Someone told him there was an avalanche in Tunnel Creek,” Hessburg said. “He told me, and my stomach immediately dropped.”
2144
Hessburg rushed to the ski patrol room. She could tell by the way people were moving that it was something serious. She could hear the squawks on the walkie-talkies. Someone told her only that Rudolph was probably involved, as if to break the emotional fall.
2145
2146
2147
2148
2149
2150
Brixey, the ski patrol manager, confirmed it. Rudolph was dead. That was about when Abraham walked into the patrol room with her friend, noticing a broken Hessburg on the couch.
2151
Abraham’s friend turned to her, looked her in the eyes, and told her about Jack.
2152
“Baby girl, he’s gone,” he said.
2153
“I just lost my breath,” Abraham said. “I lost it. I couldn’t even be in my skin.”
2154
Laurie Brenan had no premonition. She watched Abraham rush out of the restaurant at the news of an avalanche and casually followed a few minutes behind.
2155
“I thought everything was fine,” she said. “But I’m going over to ski patrol. I felt like Johnny was probably using his skills, digging somebody out.”
2156
She tried to stay out of the way as people hurried in and out of the patrol room.
2157
“Then I heard someone say something about Jim Jack, and I thought, oh my God, how can that be?” Brenan said. “I knew they were all in the same group. I start calling to see if I can get someone to get my kids safe, back to the R.V., and get them a snack and put on a movie or something.”
2158
Brenan spotted Brixey, the patrol manager and Monday night poker player, and waited for an opening to approach.
2159
“I said, ‘So, Chris, there’s been an avalanche in Tunnel Creek?’” Brenan said. “And he said yes. Anyone hurt? He said yes. Is anyone dead? He said yes. And I said, ‘Do I know these people?’ And he said yes. I said, ‘Where’s Johnny?’ And he said, ‘I haven’t heard.’”
2160
2161
2163
2164
2165
2166
It was true. One 911 call from Tunnel Creek had reported the death of Jack. Another had reported the death of Rudolph. A third made mention of a third fatality, but the dispatcher never asked the name. Brixey did not learn about Brenan until his own patrol members reached the scene.
2167
2168
“I went outside, totally shaking,” Laurie Brenan said. “I kept dropping my water bottle, again and again, because I was shaking so much. Then Chris Brixey comes and gets me.”
2169
Brixey’s outward calm belied the turmoil inside. As a paramedic, he had told a lot of strangers that a loved one had died. But never a close friend.
2170
2171
“That was, by far, the biggest challenge for me, walking Laurie from outside back to my office,” Brixey said. “Not knowing what I was going to say, but knowing what I had to say.”
2172
They walked past the empty beds, past Hessburg on the couch, past Abraham. In the office, he turned to her.
2173
“He said Johnny was one of the people buried,” Brenan said. “‘He didn’t make it.’ I didn’t want to believe it. I said, ‘Have you seen him?’ He said no. I said: ‘Then you don’t know. It’s possible he’s not there. You go back and get more information because that is wrong. Go. Go find him. You’re wrong.’ I remember thinking: He’s got two kids. This was for fun. Johnny doesn’t leave his responsibilities. Ever.”
2174
2175

2180
2181
2182
2183
2184
2185
2186
2187
Brixey left. Brenan melted into shock. Finally, a friend from Leavenworth came in. He had gone to Tunnel Creek about 20 minutes behind the large group and happened upon the scene.
2188
“He said, ‘I can tell you it was him,’” Laurie Brenan said. “‘I gave him C.P.R. We tried.’
2189
“It really felt like I had died then,” Brenan said. “And that I was reborn into a nightmare.”
2190
2191
2192
2193
2197
2198
A Grim Vigil
2199
Back on the other side of Cowboy Mountain, and down a meadow that had been turned inside out, weary huddles surrounded three dead men.
2200
Hope had surrendered. Rescues became grim vigils. The survivors did not know what to do other than wait. The bodies and faces of the victims were covered in jackets because it seemed the respectful thing to do. Survivors introduced themselves to those they had not met.
2201
A group of 16 skiers and snowboarders, all of them experts, all of them unable to refuse the temptation of an hourlong excursion into steep powder, had been reduced by three lives.
2202
“I’m so done with it,” Stifter thought to himself. “I’m so done with skiing.”
2203
The first ski patrollers, along with an avalanche dog named Cava, arrived at 1:05 p.m., 70 minutes after the mountain gave way. They had started at the top and combed the entire path, following the funnel from the wide upper meadow through the flumelike ravine, searching for victims along the way. By the time they spit out of the mouth at the bottom, there was no rescue to be done.
2204
The patrollers recognized faces in the huddles. They realized then that they had been searching for friends, not strangers. They stopped to find Rudolph and Brenan. Another patroller headed farther down to learn about Jack.
2205
More patrollers began to arrive from below, on snowmobiles brought from the highway. A scene of quiet contemplation buzzed with activity and a second wave of despair.
2206
“It just became this sea, getting merged into everybody else’s shock,” Dessert said. “When it was just us out there working on them, it seemed beautiful and spiritual, almost like an Indian burial ground.”
2207

2209
2210
2211
The patrollers tried to revive the victims. It was useless.
2212
A medical examiner determined that Jack’s cause of death was “subdural and subarachnoid hemorrhage” — brain trauma. She also diagnosed a partially torn aorta; a broken neck, vertebrae, sternum and ribs; and lacerations of the liver, spleen and pancreas. She described “blunt force injury of the head, neck, torso and extremities.”
2213
Rudolph, with a “blunt force injury of the torso,” sustained “rib fractures with right hemothorax and probably compressional asphyxia.” Brenan had “blunt force injury and compression of the trunk,” with “multiple rib and vertebral fractures with probable compressional asphyxia.”
2214
They were probably dead by the time the avalanche stopped, or shortly after.
2215
Brixey, working by radio over the mountain at Stevens Pass, told all rescue units to stand down. A second surge of patrollers would assist in taking the bodies off the mountain.
2216
The survivors were encouraged to make their way to the highway, where ambulances awaited. Saugstad, missing a ski, used the one of Jack’s that had been found. Hammond had been carrying it on his back.
2217
Stifter and Carlsen sat on the meadow, unable to pull themselves away.
2218
2219
“Everybody kind of skied down,” Stifter said. “It seemed weird to me to leave the bodies.”
2220
As with other survivors, the quarrel with their own guilt began immediately, the first sign that avalanches swallow more lives than just the ones buried beneath the snow.
2221
They wondered if their mere presence at Stevens Pass that weekend gave rise to the Tunnel Creek trip, a group of proud locals eager to show off for influential out-of-towners. They wondered why they recognized all of the danger signs, starting with the avalanche report that morning over coffee, but did not do enough to slow or stop the expedition. They wondered if they could have saved lives after the avalanche by speeding to the bottom rather than combing the path.
2222
They wondered how so many smart, experienced people could make the types of decisions that turned complex, rich, enviable lives into a growing stack of statistics.
2223
Activity disturbed the quiet again. A Sno-Cat, a large machine with treads to climb through snow-covered terrain, rumbled through the trees below and parked at the bottom of the debris pile. Ski patrollers solemnly marched up the hill, carrying gear to wrap the bodies.
2224
It was one deadly avalanche accident among many, perhaps no more worthy of attention than any other. It was not the nation’s deadliest avalanche of the season. And it was not at all like the one that killed 96 people near Tunnel Creek more than a century ago.
2225
But some rituals do not change. The accidents end with an unrefined ceremony.
2226
Some patrollers stopped at Jack and wrapped him in a crude bundle using red blankets and rope. Others hiked to where Stifter and Carlsen sat. They wrapped the bodies of Brenan and Rudolph, with quiet expediency and reverence.
2227
“I remember they said, ‘There’s no easy way to do this,’” Stifter said. “And they started slowly dragging them down the hill.”
2228
2229
2230
2231
2232
2233
2234
2237
2240
Avalanche at Tunnel Creek
2241
The story in the words of the survivors.
2242
2243
2245

2246
2247
2248
2249
2250
Graphics and design by Hannah Fairfield, Xaquín G.V., Jon Huang, Wayne Kamidoi, Sam Manchester, Alan McLean, Jacky Myint, Graham Roberts, Joe Ward, Jeremy White and Josh Williams. Photography by Ruth Fremson. Video by Catherine Spangler.
2252
Additional video by Eric Miller and Shane Wilder.
2253
Kristen Millares Young contributed research.
2254
2255
2256
The reporting for this article on the Feb. 19 avalanche at Tunnel Creek was done over six months. It involved interviews with every survivor, the families of the deceased, first responders at Tunnel Creek, officials at Stevens Pass and snow-science experts. It also included the examination of reports by the police, the medical examiner and the Stevens Pass Ski Patrol, as well as 40 calls to 911 made in the aftermath of the avalanche. The Swiss Federal Institute for Snow and Avalanche Research provided a computer-generated simulation of the avalanche, based on data accumulated from the Stevens Pass accident report and witness accounts. Additional sources are: LIDAR data from King County GIS Center; Iowa Environmental Mesonet, Iowa State University; Mark Moore, U.S. Forest Service; National Avalanche Center.
2258
2259

2262
A version of this article, which includes an epilogue, is available as an e-book. Purchase at byliner.com.
2263
2264
2265
2266
2267
2268
2269
2270
2271
2273
2274
2277
Tunnel Creek
2278
To The Peak
2279
Descent Begins
2280
Blur of White
2281
Discovery
2282
2283
2284
2286
To The Peak
2287
Descent Begins
2288
Blur of White
2289
Discovery
2290
Word Spreads
2291
2292
2293
2294
2295
2296
2307
2308
2309
2310
2311
2312
2313
2314
2315
2316
2320
2321
2322

2324
2325
2326
2343
2344
2345
[/raw]
This is what is sent from the server before it is modified by JavaScript in the browser. The line numbers have been added for reference. (The page source was viewed in the Chrome browser for Mac OSX — different source may be sent to other browsers if the server is set up to do so.)
Standards: The Doctype
The very first line, <!DOCTYPE html>
(line 1) tells us two things:
- The developers who built this page know that including a doctype declaration tells web browsers to act in similar, consistent ways, overriding many, but not all, of the idiosyncratic “quirks mode” behaviors browser makers build into their products to accomodate pages that don’t adhere to current standards.
- The simple doctype “html” means this page is intended to be treated as HTML5, the official, unofficial standard for web markup that has just become a W3C Candidate Recommendation after eight years of work and 15 years after the HTML 4 was adopted.
But I’m Different Now: Conditional Comments
Lines 2 through 6 are interesting examples of “conditional comments.” This proprietary Microsoft Internet Explorer technique allows different versions of the browser to use different snippets of code. These have proven to be very useful as Internet Explorer has a notorious reputation for being buggy and poor at following standards. With conditional comments, developers can, on a case by case basis, provide fixes and hacks to account for the oddities of different versions of IE. Normal HTML comments are marked up <!-- like this -->
and browsers will just ignore them. But Internet Explorer looks inside to see if they contain instructions in a format that only it can read.
In this case, the opening <html>
tag will be written with different “class” attribute values identifying the major IE browser version. Classes are used to define styling via Cascading Style Sheets and behaviors via JavaScript. The most complex conditional comment output on the page, <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
, says that if the version of IE is less than 7, then write <html class="no-js lt-ie9 lt-ie8 lt-ie7">
. That series of classes identifies the browser as less than IE9, less than IE8, and less than IE7. This will allow fine-grained targeting of workarounds for IE’s annoyances. A little trick of putting comments inside comments in line 6 ensures that for IE versions higher than 9, as well as any other type of browser, the <html>
tag always is written with the “class” value of “no-js” and none of that IE version stuff: <html class="no-js">
. We’ll come back to that “no-js” part when we get to how the page renders.
I like this solution because it’s more elegant than the way you more typically see conditional comments used, which is to include multiple external CSS files in order to fix IE’s peculiarities.
News of the World: The Meta Elements
The <meta>
elements are places for storing information about the page and its contents. This information might be used by the Web browser, by processes internal to the New York Times publishing system, or by search engines or other external processes. The most interesting <meta>
elements are various forms of structured data. The Times is supporting a variety of syntaxes used by different external processes to more effectively share its content. Note for example in how many different <meta>
elements the full title is presented (lines 15, 17, 38) and different formats there are for the publishing date (lines 19, 21, 23). This isn’t sloppiness — those each are structured to be read by different services and help garner traffic.
Plug the page address into Google’s Structured Data Testing Tool and you can see what information is helping it show up in search results. (Bing has one too, but you have to make an account to use it.)
Some of the <meta>
elements have “property” attributes with values that begin with “og:” such as <meta property="og:title" content="Snow Fall: The Avalanche at Tunnel Creek"/>
(line 46). Those are used by Facebook’s Open Graph protocol which, simply put, means if the page is shared on Facebook the Times gets to control how it displays. The <meta>
element with the “property” attribute value “fb:app_id” (line 50) is used to track pages on the domain “nytimes.com” in Facebook’s Insights analytics: If a Facebook user shares the page, the number of shares shown in Insights will increase by one.
The <meta>
elements with “name” attribute values beginning with “twitter:” (lines 51-53) are, naturally enough, used by Twitter to enhance the experience when the page is share via tweets. For example, <meta name="twitter:creator" value="@JohnBranchNYT">
lets Twitter share the handle of the piece’s author.
Art School: CSS
Styling begins on line 65 with a large chunk of CSS that is embedded in the page. Since accepted best practice is to keep CSS in an external file where it can be updated without having to touch every page that uses it, this was a very strong indicator that “Snow Fall” is a highly-custom, perhaps entirely hand-built, experience.The “media” attribute of the <style>
element has a value of “screen” which normally implies there are styles for “print” defined somewhere, but they are missing from “Snow Fall.” This is really intended to be an online experience first, and not just a digital newspaper.
Much of the embedded CSS is the “normalize.css” library, which the author describes as an “alternative to the traditional CSS reset.” That’s all well and good, as long as you know what a CSS reset is.
Every browser comes with its own built-in stylesheet — when it sees a <h1>
tag it makes a big, bold heading with some amount of padding above and below; when it sees <p>
tag it makes a paragraph, with some amount of spacing above and below and with some amount of line height on the text within. What these things look like are entirely up to the browser makers — there’s similarity between them, but trying to work with them in applying a design can be maddening.
CSS resets are stylesheets that level the playing field between browsers by overriding all browser styling and making everything look exactly the same: A heading is the same size and weight as a paragraph, a list item, or anything else. The front end developer can now work with this blank slate and apply new styles from scratch knowing that they will work exactly the same on all browsers.
Normalize.css approaches the problem differently: Its goal is to override all the differences between browser stylesheets without removing styling completely. A <h1>
in IE will still be big and bold with padding above and below, but now it will be big, bold, and padded exactly the same way as it is in Firefox, Chrome, or Safari. In theory, it saves the front end developer the trouble of specifying “big and bold,” so he or she can concentrate on the parts of the design that matter. In my opinion, the reset approach makes more sense because it doesn’t rely on knowing what every browser maker does with every element, so it is inherently more future proofed against future changes with new browser versions.
CSS comments, which are marked up /* like this */ show that between line 451 and 452, the normalize CSS ends and New York Times styles begin. These look like they might be lifted from the normal Times stylesheet in order set a baseline of consistency in fonts and such. This is a good place to illustrate the tradeoffs of using CSS reset or normalize. On line 131, the normalize library generically sets the font-family for the entire page
font-family: sans-serif;
then on line 454 the Times‘ styles completely override that setting with a much more specific list of fallback styles
font-family:georgia, "times new roman", times, serif;
Typically the inefficiency of redundant styling is more than offset by the efficiencies gained in maintenance and development, but purists might prefer to modify the reset or normalize CSS to set all the styles in one pass.
The bulk of the actual page styling is in an external stylesheet, which has been “minified” by having all unneeded whitespace removed in order to make it smaller and faster to deliver. That also means it’s really hard for humans to read.
On hand-built projects like this, it’s pretty common to make the code just tidy enough to not be embarrassing, which is why there’s so much CSS inside the HTML. By contrast a normal Times article published with their CMS has no embedded CSS, just a single linked stylesheet that primarily imports other, neatly organized, external stylesheets. (Interestingly, I’m not finding any sort of CSS reset or normalize library in use on the CMS pages.)
This Is the Modern World: JavaScript
The last thing we find in the <head>
element are two <script>
elements. The first one just holds variables for Google Analytics, but the second does something much more interesting. It links to HTML5 Shiv.js (line 819). This JavaScript library is key to making sure the experience to come works across the chaos of browsers that online content creators must support. It identifies any HTML5 elements that the browser might not support and, with some clever tricks, persuades the browser to support them. Thanks in no small part to Apple’s refusal to support Flash video on iOS devices, to many people “HTML5” is synonymous with “video that doesn’t need a plugin.” There’s more to HTML5 than that, but in truth the most visually apparent use of HTML5 in “Snow Fall” actually is the <video>
element.
But, surely such a complexly interactive experience must have more JavaScript than that? Indeed it does, but you won’t find it in the <head>. Following a best practice for user experience, the Times‘ developers only put the resources necessary to display the page at the beginning of the file so viewers don’t have to wait for everything to load first in order to see it. Way down at the end of the <body>
element, below all the content, is the treasure trove of JavaScript that does the real work of creating the experience.
First, there’s a link to an external JavaScript file hosted on admin.brightcove.com (line 2314). So, we know that the Times uses Brightcove for at least some of its viewer-facing video services. Also on line 2314 is a link to an external JavaScript file called “AvalancheDeploy.js.” This, clearly, is where the magic happens.
Like the external CSS file, this JavaScript has been minified to save download time. But while the comments inside the scripts have been removed, the comments describing the scripts, identifying the authors, and giving copyright information are still there.
Copying the source into a JavaScript-aware text editor makes it easier to read, and when pretty-printed it turns into 25,380 lines of nicely-formatted code. What it contains is 13 different libraries and library plugins concatenated into one file, again to save download time, plus the actual page-specific JavaScript that was custom-written for “Snow Fall.” In order, these are the libraries and some related plugins, along with what I know about them:
- jQuery. The most popular JavaScript library, jQuery greatly simplifies the work of making dynamic user interfaces. As an example, this is one way to make all the elements with the class “note” have red text using native JavaScript:
function changeColor(matchClass,color) { var elems = document.getElementsByTagName('*'), i; for (i in elems) { if((' ' + elems[i].className + ' ').indexOf(' ' + matchClass + ' ') > -1) { elems[i].style.color = color; } } } changeColor('note','red');
But jQuery does all that stuff in the background and provides a simple, logical, syntax that draws some inspiration from CSS syntax:
$('.note').css('color', 'red');
This example shows how, as with CSS reset or normalize libraries, increased overhead in page download times can be an acceptable price to pay for the efficiencies gained in development time.
- jQuery UI. jQuery UI is a library of user experience plugins written on top of jQuery. What’s especially nice is that it can be downloaded with as many or as few of the plugins as necessary. So if you all you need is a cool datepicker, you can start with that, then later download another copy with a datepicker and collapsable accordion sections as your site grows.
- MediaElement.js. MediaElement bridges the current chaos of support for HTML5 media elements by detecting a browser’s capabilities and, if necessary, providing a tiny Flash player that mimics the HTML5
<video>
and<audio>
APIs. Browsers that don’t support the video format being sent to them can use the plugin instead, but the developer doesn’t have to do any extra work. This ensures that even viewers on Internet Explorer 7 or 8 will be able to see HTML5<video>
elements, despite Microsoft not having included support for them in those versions. - MediaElementPlayer.js. A companion library to MediaElement.js, this lets you control HTML5 video styling and hook into playback events. All the controls are in HTML, even when the video is playing in the Flash fallback for browsers that don’t like the video codec being sent to them. (When we switched video solutions at work to meet new FCC requirements for online closed captions, I picked MediaElement.js/MediaElementPlayer.js and have been very pleased with the results.)
- The next library is called “The New York Times Multimedia Desk.” In its minified form it contains no comments to describe what it does, but clearly it was developed by the Times. Rather than try to figure it out, let’s just move on…
- Underscore.js. Maybe you thought we were into really geeky stuff already, but now here’s Underscore. Where the primary purpose of jQuery and MediaElement is to make it easier to manipulate the display, Underscore goes deeper: It’s primary purpose is to make it easier to access the data inside the page, essentially treating HTML content the same way database administrators treat data in a database. So you might use Underscore to select very specific parts of a page in ways that jQuery can’t and which would take enormously complex functions in native JavaScript, then pass those parts off to jQuery to do something cool in the display with them.
- Track Device Orientation. This library looks like it was developed in-house to detect whether a mobile device is displaying the page in vertical or horizontal aspect. A note says it is “Based very heavily on: http://davidbcalhoun.com/2010/dealing-with-device-orientation.”
- Modernizr. As browsers adopt the new features available in HTML5 and CSS3, it can be hard to remember what you can do in each one. Modernizr provides a way for the page to check what the browser is being displayed in is capable of. In this example from the Modernizr site, the script is used to check support for HTML5’s Geolocation API and download different external JavaScript files depending on the answer:
Modernizr.load({ test: Modernizr.geolocation, yep : 'geo.js', nope: 'geo-polyfill.js' });
- jPlayer. jPlayer is another solution for supporting HTML5
<video>
and<audio>
playback across browsers, like MediaElement. A question that springs immediately to mind is “why are they including two libraries that do essentially the same thing?” (Unlike MediaElement’s lightweight Flash+HTML fallback, jPlayer’s Flash fallback solution for browsers that can’t natively play what they are being sent is a large, entirely Flash, player. Its API, while powerful, is also complex and it has no built-in support for displaying closed captions. All of these reasons combined are why I chose MediaElement.js over jPlayer for KCTS9.org, despite jPlayer’s wider adoption and developer network.) - Mustache.js. This is a templating library that can take data formatted as JSON (JavaScript Object Notation) and turn it into HTML on the fly. For example, this data
{ "firstname": "Brook", "lastname": "Ellingwood" }
and this template
Written by <strong>{{firstname}} {{lastname}}</strong>.
produce this HTML:
Written by Brook Ellingwood.
jQuery and Underscore are both capable of some templating as well, but as a dedicated templating library Mustache has an especially powerful and easy to use syntax. (Several years ago, working at a $2 Billion retailer, I selected XML/XSLT as the data and templating formats for the company’s ecommerce site. If I were doing that work now, I’d likely choose JSON as the data format and something similar to Mustache for the templates.)
- SWFObject. This library greatly simplifies embedding Flash movies in pages, by smoothing out idiosyncrasies between browser and such.
- ImagesLoaded. This is a single purpose jQuery plugin that detects whether the images on a page are fully loaded or not, then triggers whatever JavaScript you want to run if they are. Basically, it makes the experience for the user smoother, so you don’t see things bouncing around all over the place as the page loads.
- ImagesLoaded. Hey, wait a minute! They put that one in here twice. Whoops. Moving on…
- jQuery Fixed Div (not really!). For whatever reason, the last big chunk of JavaScript on the page is identified this way:
/* * jQuery Fixed Div plugin v1.0.0 <https://github.com/rwbaker/jQuery.fixed/> * @requires jQuery v1.2.6 or later * is released under the MIT License <http://www.opensource.org/licenses/mit-license.php> * very HEAVILY MODIFIED by Jon Huang */
Maybe the 56 lines of code that make up jQuery Fixed Div truly are buried somewhere inside all this JavaScript (when pretty-printed, it comes in at 1,460 lines), but I’m not looking for them. What I do see in there are lots of references to things with the word “avalanche” in them, so I know this is the real deal. I’m also not going to go digging around and try to figure it all out: Without comments it would take forever, frankly some of it is probably beyond my technical comprehension, and the real test now is looking at it in action on the rendered page.
What I will do is say that if Jon Huang (@huang_apiaries), Multimedia Producer for the New York Times, built all of that JavaScript, he should give himself a clearer credit because he deserves it. (Check out what information design guru Edward Tufte said in this tweet — there is no higher source of praise in my book.)
In doing my breakdown I wasn’t always able to tell if any given library is being used. For example, in the page’s custom JavaScript I can see functions that dynamically create HTML5 <video>
elements with classes for use by MediaElement.js , but I don’t find that HTML anywhere in the rendered page. I was however able to set my browser up so that instead of using HTML5 <video>
the page performed a fallback to the Flash player supplied by Brightcove. It may be that all these libraries are used, but not all of them are used in every browser.
After digging through all those CSS and JavaScript tools, what we have left is just a few bits of housekeeping related to analytics tracking and such (lines 2,323 – 2,342). Now, it’s time to turn to the page as its rendered in the browser and see how those tools are used.
Beautiful Way: What Happens When the Page Renders
In the section on tools, I provided a copy of the page source the way it is when it is sent from the New York Times servers. This is very different from what the source looks like by the time you see it in your browser, unless you happen to be someone who has their JavaScript disabled and I’m betting you aren’t.
In the rest of this section, I will be using the Developer Tools built into the Google Chrome Browser to examine how the HTML is modified by JavaScript during the page load and what the modifications do to create the experience.
Mixed Bizness: Top Level Classes
Remember way back in the section on conditional comments when I said that if you are using a browser other than Internet Explorer, or a version of Internet Explorer higher than 9, the opening <html>
tag would be written like this: <html class="no-js">
? Well, after the page renders with JavaScript, it looks like this:
<html class="js csstransforms nytmm_avalanche_desktop nytmm_avalanche_production wf-nytcheltenham-n2-active wf-nytcheltenham-i2-active wf-nytfranklin-n5-active wf-nytfranklin-n7-active wf-active nytmm_orientation_landscape">
All those different classes have been added by JavaScript and tell the CSS and JavaScript important things about how the page is being displayed in the browser. What sort of things? Well, with just a little further examination we can pretty confidently guess at all of them:
- “js” is what used to be “no-js” because now we know the browser supports JavaScript.
- “csstransforms” likely means the page has passed a test in Modernizr for supporting not-yet-standardized CSS Transforms, which allow for altering the appearance of text in a variety of ways, including rotating and skewing.
- “nytmm_avalanche_desktop” presumably means that they can tell I’m using a desktop operating system (Mac OSX) and not mobile operating system (iOS, Android, etc.). No doubt there is certain formatting that will be set based on this.
- “wf-nytcheltenham-n2-active,” “wf-nytcheltenham-i2-active,” “wf-nytfranklin-n5-active,” “wf-nytfranklin-n7-active”: When supported by the browser, the page uses web-fonts, meaning it doesn’t rely on the fonts you already have on your computer. Inside the page-specific JavaScript, there are clues that tell us the Times is licensing web fonts with Adobe’s Typekit. To see them in use (assuming your browser supports web fonts) the heading that reads “Snow Fall” is in “nyt-cheltenham” and the byline “By JOHN BRANCH” is in “nyt-franklin.” These class values let the page know that the fonts are in use and likely affect spacing and other properties in the CSS.
- “wf-active”: By poking around in the page-specific JavaScript so more, it looks like this means all the web fonts have been identified, downloaded and are now being displayed.
- “nytmm_orientation_landscape”: The screen I’m using is wider than it is tall. I guess I could turn my MacBook Pro on its side, but unlike my iPhone it won’t magically switch to a portrait view. Drat.
Chain Reaction: The Header and Navigating Through the Story
The first actual content inside the <body>
element is the header bar that stays fixed in position at the top of the page. This is a nice application of the CSS position:fixed;
property and value. Wherever you are in the story, you have the links to all the story components right there at the top.
Those links to the different story components are worth describing. In the raw source, all the sections of the story are visible. In the source, the links are simple anchors that move you up and down without leaving the page, so that when you click the first one the URL http://www.nytimes.com/projects/2012/snow-fall/
becomes http://www.nytimes.com/projects/2012/snow-fall/#tunnel-creek
. It’s very simple.
But with JavaScript, the behavior is made more interesting. On page load, all the sections of the story but the first one are immediately hidden. A JavaScript “event listener” has been attached to the links, “listening” for the user to click on them. When that click happens, the link is rewritten so that our example becomes http://www.nytimes.com/projects/2012/snow-fall/#/?part=tunnel-creek
and the right section of the story somehow appears.
If you clicked the link ending with #tunnel-creek
, you might have noticed that it was redirected to yet a third variation on this URL. But really all we really care about is that in all three versions there’s a hash (“#”) followed by some more stuff.
The way URLs work, the web server stops paying attention to anything that comes after a hash. So, no matter what version of the URL you click on, the web server is going to send you the exact same stuff. Your browser, on the other hand, does read the stuff after the hash — if it matches the “id” attribute on an open tag on the page, say <div id="tunnel-creek">
, the page will automatically jump to that point. (As an aside, another way to tell a developer who hasn’t been paying attention for over a decade is if they do this sort of anchoring with the obsolete <a name="...">
syntax…)
If the hash doesn’t match any “id”s, the browser does nothing. But that hash is still up there, where it can be read by JavaScript. This is why the event listener takes a hashtag that does link to an existing “id” and breaks the link by rewriting it so it no longer works directly, but can be used to dynamically change what content is visible. If you don’t have JavaScript, you’ll just jump to the section you want to read. But if you do have JavaScript, the section you are on will disappear and the section you want will appear with visual effects designed to enhance the mood of the story.
Where It’s At: The Video Cover
The thing that first grabs viewers of “Snow Fall” is the video cover for the “Tunnel Creek” section: Wind silently blows across a snowy landscape, devoid of color against a mottled gray sky, and plumes of ice crystals stream off the surface. It takes a moment before the words of the story’s title/byline hovering against the sky are even noticed. In fact, you wonder if they were even there at first. There is no other text visible. The effect is far more cinematic, like the opening credits in a documentary, than it is like anything we associate with the word “newspaper.” It’s a stunning effect. So how is it done?

There is no <video>
element in the page source. Instead, there is a generic <div>
element that has no contents, so there’s nothing to be seen when the page loads. HTML5 has introduced new “data-” attributes, which let developers store data in attributes they can give any name they want as long as it starts with “data-” and this element uses a number of them to store pointers to two different versions of the video that work on different types of browsers, with two different encodings as well as a pointer to a still poster image and instructions on looping during playback:
<div class="nytmm_fs_video nytmm_touch_fs_video nytmm_touch_fs_leadphotoseq nytmm_ie_static" data-mp4="http://graphics8.nytimes.com/packages/video/multimedia/bundles/projects/2012/AvalancheDeploy/chapter1_new.mp4" data-webm="http://graphics8.nytimes.com/packages/flash/multimedia/bundles/projects/2012/AvalancheDeploy/chapter1_new.webm" data-poster="http://graphics8.nytimes.com/packages/images/multimedia/bundles/projects/2012/AvalancheDeploy/chapter1.jpg" data-loop="true"></div>
So there’s a bunch of useful information here, but that’s not the same thing as displaying a video. When the page is rendered and the JavaScript has run, that <div>
still is there, but now inside it there’s also this element (as rendered in Chrome for OSX):
<video style="position: absolute; z-index: 1; top: 0px; left: 0px; min-width: 0px; min-height: 0px; width: 1276px; height: 717px;" poster="http://graphics8.nytimes.com/packages/images/multimedia/bundles/projects/2012/AvalancheDeploy/chapter1.jpg" preload="none" src="http://graphics8.nytimes.com/packages/video/multimedia/bundles/projects/2012/AvalancheDeploy/chapter1_new.mp4"></video>
Chrome loves the HTML5 <video>
element, so that’s all it takes for me to see the video in my primary browser. But if I was using an older browser that couldn’t handle the video natively, I’d certainly be seeing the object and/or embed code necessary for falling back to a Flash player, perhaps added directly with SWFObject, or indirectly with MediaElement or jPlayer.
Because the “controls” attribute is not present in the element, the video displays without them. You can’t pause it, or get distracted by a progress bar. It just sits there and loops.
Quite a bit of CSS for this element is written inline using the “style” attribute. The “position,” “top,” and “left” properties basically say “pin this to the upper left hand corner.” There are some nerdy details about the difference between “fixed” and “absolute” positioning at play, but let’s save those for some other time. The “z-index” determines what layer number to assign to it — more on that in a minute. If those “width” and “height” numbers seem a little random, it’s because they are. They happen to be the size of the viewable area on my browser after I got done making it bigger and smaller a few times just to watch the numbers change. There’s a JavaScript event listener set up for window resize events and every time the window changes dimensions, the viewport (the part of the window that displays the page) gets measured and new values are set for the size of the video cover. (The 0px “min-width” and “min-height” values explicitly state that the window can be sized all the way down to the point where it can’t be seen, but I’m not really sure there’s a need to specify that.)
Now, back to that “z-index” property. The <div>
element that contains the title/byline text has a “z-index” of “2.” Couple that with some positioning properties and you get text that sits one layer above the video and adjusts to changes in window size as well. Farther down in the text, something caught my eye. For some reason, the single letter “F” in the word “Fall” is wrapped in a <span>
element. The reason is just so that one letter can have its letter-spacing property adjusted by 3 pixels without affecting the rest of the title. Turn that spacing adjustment off and the “F” is a bit awkward, just a little too far away from the “a” that follows it. You can’t get into this sort of single letter typographical tweaking on just any project, but when you’re looking to wow the world it can be worth it.
When the page is loaded, a simple animation of the CSS “opacity” property quickly fades in the video cover and title/byline text. This effect, which is certainly accomplished with jQuery, contributes to the cinematic feel and the sleight of hand which draws the viewer’s attention to the video first, only realizing there’s text after being mesmerized by the blowing snow.
All the other sections, except “The Descent Begins” feature video covers with similar effects.
Puttin’ It Down: Scrolling the Text
When the viewer starts to scroll the page, the video cover gets covered up and the title/byline text go away. The first bit is just another application of “z-index” in CSS, but it gets a little tricky. To see how this works, it’s important to understand child and sibling relationships. Here’s an illustration that demonstrates the relationships, but otherwise has nothing to do with the actual code:
<div id="section"> <div id="video-and-title-container" style="z-index:1;"> <div id="video-container" style="z-index:1;"> I am a child of video-and-title-container and a sibling of title-container </div> <div id="title-container" style="z-index:2;"> I am a child of video-and-title-container and a sibling of video-container </div> </div> <div id="article=text" style="z-index:1;"> I am a sibling of video-and-title-container </div> </div>
(In reality none of this “z-index” stuff is going to work unless we also set “position” values, but that would just make the example needlessly complex. We’ll come back to “position” in a bit.)
Video-container and title-container have “z-index” values of “1” and “2” respectively, which affects their stacking order in relation to each other. But they both are children of video-and-title-container and, because it has a “z-index” value, the stacking order of its children only matters in relation to each other. Title-container might have a “z-index” of “2” but as far as article-text is concerned, the only “z-index” it sees is the “1” assigned to “video-and-title-container.”
Article-text is a sibling of video-and-title-container, so the “z-index” relationship between the two is independent of what’s going on inside video-and-title-container. But wait… if they both have a “z-index” of “1” how come article-text can be scrolled to cover video-and-title-container? That’s because article-text comes after video-and-title-container in the source and, unless otherwise specified with “z-index,” things that come after sit on top of things that come before.
Now, if you’re really paying attention, you’ll be wondering why it’s even necessary to specify “z-index” at all in this example, since the things that come after are already the things we want to cover the things that come before. I can’t be 100% sure of all the reasons it’s being set explicitly, but I can think of one really good one: In most, if not all, browsers the Flash plugin wants to sit on top of the HTML no matter what order it appear unless you assign it a “z-index” value. By having “z-index” properties on these HTML elements, the code is prepared to deal elegantly with the Flash plugin in case the browser can’t handle the HTML5 <video>
element natively.
Scrolling the article doesn’t just cover up the video cover and title/byline text: They visibly fade out as they gets covered. There’s another event listener set on the “scroll” event. Every time the viewer scrolls, it triggers a function that does something along the lines of dividing the position of the top of the article body text container in pixels from the top of the viewport by the height of the viewport, then uses the result as the value of the CSS “opacity” property. Opacity is set on a scale of 0-1, with .5 being half opaque, so this doesn’t quite fade the lettering out completely before it’s covered. It would be easy enough to tweak the math so it did, but in this case the effect works better by letting the letters stay visible until they are covered by the white background of the text, as if by snow.
After having said all that, when I do this on Chrome the video cover isn’t fading out at all, even though I can watch the “opacity” value change. If I manually set the opacity to “0” it disappears, but with any other value it displays as though the value were “1.” I assume this is a browser bug with the <video>
element the Times decided to live with.
On reaching the bottom of each article section a full-width bar moves up in a simple animation, offering the viewer a text link prompt to proceed to the next article section or go back to the previous one. All the things that happen in between the video cover and this prompt will be described below.
Atmospheric Conditions: The Article Layout and Components
The article sections are divided into two columns. The one for text on the left is set to “width:100%;”. The one on the right is mainly for image boxes and is set to “width:348px;” with “position:absolute;”. As I hinted at in the previous section, “position” is related to “z-index.” If an element is given a “position” value, it automatically has a “z-index” value as well, even if it hasn’t been explicitly set. So what’s happening here is that because the right column has “position” and comes after the left column in the HTML it isn’t squeezed out of the two columns’ parent element by the left column’s “width:100%;” — instead it has “z-index” and sit on top of the right hand side of the left column.
Because the left hand column is filled with things like <p>
paragraph elements, you might expect them to fill the whole width of the page with text. But in the CSS we find this:
.nytmm_article .left p { ... padding-right: 50px; margin-right: 348px; }
These properties apply to every <p>
that’s a descendent of an element with a class of “left” that’s a descendent of an element with a class of “nytmm_article.” The “margin-right” value is the same as the width of the right column — because the text can’t go into the margin, it can’t cover any of the right hand column. The 50px of padding gives a little whitespace gutter between the two columns. (The “…” is where I removed some font styling properties that weren’t relevant to this example.)
No Complaints: Inline Video
Scrolling through the “Tunnel Creek” section, the first media element we come to isn’t an image box on the right, but a video embedded in the text on the left. Several videos are embedded the same way in other sections.

The embedding itself is very straightforward: In a series of <p>
paragraph elements, a sibling <div>
holding the video has a “float:right;” CSS property value, and the text adjusts to wrap around it. Because the <div>
has the same margin and padding properties as the <p>
elements, the video displays as part of the left hand column.
As the video comes into the viewport, it has an “opacity” value of “.4” or 40%. Then as it reaches the center, an event listener changes that to “1” or 100%. But it doesn’t just pop to the new value, it does a half second fade to it using a CSS Transform.
Although CSS Transforms are still not a standard, they do work on most current browsers through the use of browser extensions. These are a way for browser makers to add support for new techniques, before everyone involved has agreed on how to use them. The styling for the video includes the proposed syntax
transition: all .5s ease;
which means “if any of the CSS properties applied to this element change, fade the changes in over half a second and ease the fade so that it starts fast but slows down as it gets closer to being complete.” But because browser support for the generic property is not yet guaranteed, the same instructions are given using browser extensions:
-moz-transition: all .5s ease; /* This works on the Mozilla render engine in Firefox, SeaMonkey, etc. */ -webkit-transition: all .5s ease; /* This works on the WebKit render engine in Chrome, Safari, etc. */ -ms-transition: all .5s ease; /* This works on Microsoft Internet Explorer */ -o-transition: all .5s ease; /* This works on Opera */
It may seem silly because the syntax for all of them is exactly the same, but browser extensions have proven to be very useful for advancing the state of the art and are highly appreciated by anyone who tried to push the envelope of web experience during the early 2000s when browser feature development was at a standstill. This way, developers can take advantage of new features without worrying their pages will break in the future.
The video’s caption and play button also fade in, going from “opacity:0;” to “opacity:1;” but the transition time is a full second. Using staggered transitions further enhances the dynamic feel of the piece.
Inside the text, words describing the video are highlighted. Click on the name and the video starts playing. This requires JavaScript, and the solution for doing it elegantly ensures that the “no-js” version of the site doesn’t contain any extraneous code. In the source, the name is wrapped in <span class="nytmm_video_trigger">
. Nothing in there says which video to trigger. Instead, what I believe happens is an application of JavaScript arrays.
For the purposes of this post, an array can be thought of as a list of items. Now imagine two arrays: One listing all the <span class="nytmm_video_trigger">
elements and one listing all the <div class="small_video_section">
elements. Then event listeners are attached to the triggers so that when they are clicked they tell the videos in corresponding list positions to play: Trigger #1 plays video #1, trigger #2 plays video #2, etc.
In actuality, there might only be one array with nested data about both the triggers and the videos, but the basic idea is the same. There’s also a strong likelihood that at some level, jQuery’s simple syntax is used to make the array. These are the sorts of details that are hardly worth digging into though — what’s important to understand is that if you have a data model in mind when you create your base HTML you don’t have to hardcode relationships between objects in order to have them dynamically interact.
Feather in Your Cap: Showpiece Videos
A few more paragraphs into the story, there’s a stunning bit of multimedia. A full-screen width video interrupts the text flow and a three dimensional landscape appears, fading in even as the point of view flies over the tree and snow-covered crags around Stevens Pass.

While the effect is new, the code behind it is all things that we’ve just been looking at. The video data is stored the same way in attributes of a <div>
element and can’t be seen if you don’t have JavaScript. Once turned into an HTML5 <video>
element, it’s width and height are set to fill the viewport and as it scrolls into view its “opacity” value changes so that it fades in.
The real stunner is that as it scrolls into the view, the background of the story’s text fades to nearly match the gray of the clouds and fog at the top of the video frame. The border between the written story and the video all but disappears. More surprisingly, the text has become deemphasized — it’s still legible, but in essence this is one of the world’s preeminent newspapers sending a signal that you need to stop reading for a minute and really take in the video you’re about to see. If there’s a single game-changing takeaway to be found here, that might be it.
Impressed by the video, I tried to recreate it’s final perspective in Google Earth. It’s possible to get close to the same perspective the video ends on, but the effect is very different. This is where we tip our hats to Jeremy White (@blueshirt, the graphic designer at the times who generated this video as described in a Poynter article on the piece. Obviously, for an article set in the Cascades in winter, there needs to be snow and the Google Earth view has no snow. But what really makes the video work, both to set the mood and to focus attention on the relevant landscape, is White’s application of fog and clouds to fade the distant landscape out of view. In the Google Earth image, the eye is drawn, not to Tunnel Creek, but to Mount Baker on the far horizon.
This video presentation style will return several times throughout the article, illuminating and expanding on the article’s text. Here’s the complete list (the names are mine, not the Times‘):
- “Tunnel Creek”: Flyover Video
- “Tunnel Creek”: Satellite Map
- “To the Peak”: Snow Conditions
- “To the Peak”: Hike to Tunnel Creek
- “Blur of White”: Avalanche in Real Time
Maximum Potential: Dynamic Background Image
The showpiece in the “The Descent Begins” section isn’t video, but a still image that appears to change to show the different routes taken by the skiers as the text scrolls. Because the text overlays the image, I’m describing it as a background image, but it shouldn’t be confused with the CSS “background-image” property. This image is basic HTML, with CSS being used to position the matching text on top of it.

As the text is scrolled, the new images consisting of orange lines on a transparent background are positioned on top of the background image. Sprinkled throughout the text in the page source are data pointers that look like this: <span class="reel_tag" data-start="51"></span>>
. The “data-start” attribute values correspond to the names of images showing routes taken down the mountain.
What’s actually in the page source is very different from what I’ve described. There, as a fallback, are images of the mountain and the descent paths combined. It seems that on page load, the JavaScript reads the “data-start” attribute values and generates calls to all the matching images, positioning them so they will line up properly with the background. Then, it listens for the “scroll” event and every time the page scrolls it checks to see if a <span>
with a pointer to an image has made it to the middle of the viewport. If it has, the corresponding image is made visible.
Along with the images, individual slideshow launchers that have already been used on earlier pages make a reappearance, slightly altered in looks for use on this page. Somehat surprisingly, this duplicate data is actually in the page source twice instead of being reused with JavaScript. It’s hard to know why this is the case: Perhaps there was a blocking problem that couldn’t be solved otherwise, perhaps its to meet a design requirement for viewing without JavaScript, or perhaps with a looming deadline it was the quickest way to wrap the work up.
Half & Half: Column-Spanning Images and Video
In the “Tunnel Creek” section, there are two historical images of the 1910 Wellington Avalanche, side by side. After all the dynamic multimedia experience above, it’s almost startling that they just sit there. They introduce a third layout element to the story by extending from inside the left column all the way across the right column. This is easily accomplished by leaving the “margin-right:348px;” and “padding-right:50px;” declarations out of the CSS for their shared parent <div>
.

Variations on this simple still photo layout occur throughout the entire article, including the cluster of images halfway through the “To the Peak” section which are large enough that there is no room for text to wrap around them.
The next media element in the “Tunnel Creek” section is a large, but not full-width, video box that also spans the columns. As it scrolls into view it fades in like the inline video described above, with the only styling difference being the addition of 1px borders above and below. There’s a cool effect difference though: Once the video has faded in, a very short introduction video plays. Once it’s finished, a title and play button encourages the viewer to play the whole thing. In the raw page source, the data for the two different videos is stored as detailed above, but the <div>
s are children of the same container.
I suspect that when the JavaScript that turns these into <video>
elements finds this situation, it knows to set up a sort of playlist in which one video playing to its end automatically sets up the display of the next video — with enough poking around it would be possible to figure out how exactly it works, but the real takeaway is that HTML5 <video>
has a number of events that you can use event listeners with and one of them is the event “ended.” So when a video finishes, it’s pretty straightforward to make something else happen.
A video presentation in the “Discovery” section is very similar, but lacks the autoplaying introduction.
Outcome: Slideshows

So far in scrolling through the “Tunnel Creek” section, the right column has been sitting there, not doing anything except sometimes letting itself be covered up by images and video spilling over from the left column. But now as we get to the point in the story where a number individuals involved in the events are introduced, launchers for photo slideshows of the individuals are put into the right column, linked to highlighted names in the text in the left column. When the launcher is highlighted, its top border precisely aligns with the top border of that person’s name in the text.
This positioning is set with JavaScript. Each launcher is a <div>
with a custom “data-tag” attribute containing an individual’s name. The names in the text are marked up as <span>
s with matching “data-tag” attributes. This makes it fairly simple to measure the position from the top of the name in the left column and then set the position from the top of the launcher to be the same.
As more individuals are introduced in the “To the Peak” section we find cases when two names are so close to each other in the text that the launchers would overlap so they are stacked instead. One way to do this might be to save the last position measured and subtract it from the position currently being measured — if the result is less than 100 pixels, then don’t match the positioning of the launcher to the text, but simply position the launcher 100 pixels below the previous launcher instead.

When the launchers are clicked, matching slideshows appear in the familiar “lighbox” overlay style. But none of the data used in the slideshows is in the page source. The slideshows are generated and destroyed as necessary using data supplied through Ajax calls back to the server. (Ajax originally was an acronym, but now it’s just become a name.) When you click a launcher, it retrieves data formatted in the JSON sytnax, then parses the data and turns it into the HTML that makes up the slideshow.
Several sections in the story include inline slideshows, launched from large poster images that span the left and right columns. Like the individual profile slideshows, these slideshows are generated as needed by retrieving and manipulating JSON data.
Painted Eyelids: Audio and Miscellaneous Video
The “Blur of White” section contains embedded audio of phone calls made to 911. Like the HTML5 <video>
pointers to these pieces of media are stored in the page source in a way that they won’t be visible to browsers without JavaScript. When the page is rendered, they are turned into <audio>
elements with controls and styling provide by the jPlayer library.
Both the “To the Peak” and “Discovery” sections contain small videos in the right hand column, illustrating avalanche air bags and the path taken by the avalanche respectively. They are nice pieces of design, but other then being positioned entirely on the right don’t differ technically from the other video elements already described.
Beat Surrender: Strategic Conclusions from a Technical Breakdown
Near the end of the article, there’s a link to buy an ebook version of the story. It’s an interesting strategic business choice for a newspaper, and it also reflects the fact that the popular ebook formats all use a variation of HTML for layout. Once you’ve published to the web, it isn’t that much more work to make a variety of ebooks for different devices.
At the very end are the credits for the piece. Tellingly, the names of graphic designers and multimedia producers who wrote code are all mixed together in a single “graphics and design” credit with 11 names. This is a collaborative production that is only possible with a skilled staff working together: Everyone has specialties, but the boundaries have to be blurred to make a unified experience like this.
The disruptions that are rocking print and broadcast business models are hardly secret — they are prominently displayed all across the Internet. I’ve been reminded of a book we passed around in the dotcom era and which I recently started to reread. Some took “The Innovator’s Dilemma,” as an entrepreneurial blueprint for identifying dinosaur companies to take market share from. I took it another way and have for much of the last decade been applying what I’ve learned as a disrupter to making established businesses stronger from within. But at times “change agent” can be a trying path to follow.
You can’t make someone change who doesn’t want to change. And most media companies haven’t yet accepted what “change” really means. They want to use new media to protect their old media business. They still think they can force the Internet to adapt to them. Unfortunately, it didn’t work out well for the record companies, it’s not working out very well for the newspapers, and the strain is starting to show in the television industry.
With this one article, the New York Times has conclusively demonstrated it understands real relevance in the digital age won’t come entirely from skeuomorphic digital newspaper apps for mobile devices or a highly-porous paywall. Those may yet prove to be elements of a successful business plan, but they can only help if the Times continues its investment in presentations that are designed and developed to take advantage of the unique opportunities offered by interactive media. Other media companies would be wise to follow suit.