On Web Performance

Lara Hogan

GET READY for Lara Hogan, author of Designing For Performance, as she shares pretty much about everything you’ll need to know to design optimally performant front-end web experiences. It’s one of twelve essential sessions that make An Event Apart Austin 2015 the Southwest’s don’t-miss web design and development event of 2015.

Publishing v. Performance—or, The Soul of the Web

MY SOUL is in twain. Two principles on which clued-in web folk heartily agree are coming more and more often into conflict—a conflict most recently thrust into relief by discussions around the brilliant Vox Media team, publishers of The Verge.

The two principles are:

  1. Building performant websites is not only a key differentiator that separates successful sites from those which don’t get read; it’s also an ethical obligation, whose fulfillment falls mainly on developers, but can only happen with the buy-in of the whole team, from marketing to editorial, from advertising to design.
  2. Publishing and journalism are pillars of civilized society, and the opportunity to distribute news and information via the internet (and to let anyone who is willing to do the work become a publisher) has long been a foundational benefit of the web. As the sad, painful, slow-motion decline of traditional publishing and journalism is being offset by the rise of new, primarily web-based publications and news organizations, the need to sustain these new publications and organizations—to “pay for the content,” in popular parlance—is chiefly being borne by advertising…which, however, pays less and less and demands more and more as customers increasingly find ways to route around it.

The conflict between these two principles is best summarized, as is often the case, by the wonderfully succinct Jeremy Keith (author, HTML5 For Web Designers). In his 27 July post, “On The Verge,” Jeremy takes us through prior articles beginning with Nilay Patel’s Verge piece, “The Mobile Web Sucks,” in which Nilay blames browsers and a nonexistent realm he calls “the mobile web” for the slow performance of websites built with bloated frameworks and laden with fat, invasive ad platforms—like The Verge itself.

The Verge’s Web Sucks,” by Les Orchard, quickly countered Nilay’s piece, as Jeremy chronicles (“Les Orchard says what we’re all thinking”). Jeremy then points to a half-humorous letter of surrender posted by Vox Media’s developers, who announce their new Vox Media Performance Team in a piece facetiously declaring performance bankruptcy.

A survey of follow-up barbs and exchanges on Twitter concludes Jeremy’s piece (which you must read; do not settle for this sloppy summary). After describing everything that has so far been said, Mr Keith weighs in with his own opinion, and it’s what you might expect from a highly thoughtful, open-source-contributing, standards-flag-flying, creative developer:

I’m hearing an awful lot of false dichotomies here: either you can have a performant website or you have a business model based on advertising. …

Tracking and advertising scripts are today’s equivalent of pop-up windows. …

For such a young, supposedly-innovative industry, I’m often amazed at what people choose to treat as immovable, unchangeable, carved-in-stone issues. Bloated, invasive ad tracking isn’t a law of nature. It’s a choice. We can choose to change.

Me, I’m torn. As a 20-year-exponent of lean web development (yes, I know how pretentious that sounds), I absolutely believe that the web is for everybody, regardless of ability or device. The web’s strength lies precisely in its unique position as the world’s first universal platform. Tim Berners-Lee didn’t invent hypertext, and his (and his creation’s) genius doesn’t lie in the deployment of tags; it subsists in the principle that, developed rightly, content on the web is as accessible to the Nigerian farmer with a feature phone as it is to a wealthy American sporting this year’s device. I absolutely believe this. I’ve fought for it for too many years, alongside too many of you, to think otherwise.

And yet, as a 20-year publisher of independent content (and an advertising professional before that), I am equally certain that content requires funding as much as it demands research, motivation, talent, and nurturing. Somebody has to pay our editors, writers, journalists, designers, developers, and all the other specialtists whose passion and tears go into every chunk of worthwhile web content. Many of you reading this will feel I’m copping out here, so let me explain:

It may indeed be a false dichotomy that “either you can have a performant website or you have a business model based on advertising” but it is also a truth that advertisers demand more and more for their dollar. They want to know what page you read, how long you looked at it, where on the web you went next, and a thousand other invasive things that make thoughtful people everywhere uncomfortable—but are the price we currently pay to access the earth’s largest library.

I don’t like this, and I don’t do it in the magazine I publish, but A List Apart, as a direct consequence, will always lack certain resources to expand its offerings as quickly and richly as we’d like, or to pay staff and contributors at anything approaching the level that Vox Media, by accepting a different tradeoff, has achieved. (Let me also acknowledge ALA’s wonderful sponsors and our longtime partnership with The Deck ad network, lest I seem to speak from an ivory tower. Folks who’ve never had to pay for content cannot lay claim to moral authority on this issue; untested virtue is not, and so on.)

To be clear, Vox Media could not exist if its owners had made the decisions A List Apart made in terms of advertising—and Vox Media’s decisions about advertising are far better, in terms of consumer advocacy and privacy, than those made by most web publishing groups. Also to be clear, I don’t regret A List Apart’s decisions about advertising—they are right for us and our community.

I know and have worked alongside some of the designers, developers, and editors at Vox Media; you’d be proud to work with any of them. I know they are painfully aware of the toll advertising takes on their site’s performance; I know they are also doing some of the best editorial and publishing work currently being performed on the web—which is what happens when great teams from different disciplines get together to push boundaries and create something of value. This super team couldn’t do their super work without salaries, desks, and computers; acquiring those things meant coming to some compromise with the state of web advertising today. (And of course it was the owners, and not the employees, who made the precise compromise to which Vox Media currently adheres.)

Put a gun to my head, and I will take the same position as Jeremy Keith. I’ll even do it without a gun to my head, as my decisions as a publisher probably already make clear. And yet, two equally compelling urgencies in my core being—love of web content, and love of the web’s potential—make me hope that web and editorial teams can work with advertisers going forward, so that one day soon we can have amazing content, brilliantly presented, without the invasive bloat. In the words of another great web developer I know, “Hope is a dangerous currency—but it’s all I’ve got.”


Also published in Medium.

The Nation, America’s oldest weekly news magazine, launches responsive, large-type redesign.

ON ITS 150th anniversary, The Nation (“a magazine of ideas and values”) relaunches its website, created in partnership with Blue State Digital and Diaspark. As one would expect of an editorially focused web entity in 2015, the new site is responsive, and uses big type and clean layouts designed for readability. It also incorporates social media innovations first seen in Medium, such as the ability to tweet or email any brief passage of text you select.

Executive Editor Richard Kim’s mini-article introducing the new site explains how the editorial process has changed—and how it has stayed the same—since the launch of the magazine’s first site in 1997:

Back then, writing for the magazine was a comparatively monastic experience. You’d work for weeks on an article, defend its arguments against vigorous but loving critiques from the editors, and gratefully accept changes from fact-checkers and copy editors. Finally, the issue would ship to the printer. And then: the vast silence. If you were lucky, a few weeks later, someone might approach you at a party and say how much they liked (or hated) your piece. Some letters from impassioned subscribers would eventually come in via the Postal Service, but encounters with actual readers were rare and cherished events.

We continue to publish the print magazine under these rigorous standards, and it will remain an essential part of our identity, offering readers a considered and curated take on matters of critical interest. The digital revolution, however, has allowed us to connect to vastly more people, and to get to know them better. Today, The Nation publishes about 70 articles a week online, which go out to more than 420,000 Twitter followers, almost 290,000 Facebook fans, and 200,000 e-mail subscribers. And believe me, we always hear back from you….

There’s also a multi-tiered approach to reading and commenting:

For the next few months, there’s no paywall: All of our articles will be free to everyone—our gift to you in The Nation’s 150th-anniversary year. Later, we’ll introduce a metered system that continues to put The Nation in front of new readers, but also asks our regular visitors to contribute to the cost of independent journalism. Finally, only subscribers will be able to leave comments—and they’ll be asked to identify themselves with a first and last name. We realize this will be controversial to some, but keeping the comments free of trolls and bots has taken an increasing amount of effort. We think it’s only fair that commenters stand by what they write, and give something to the community in return.

No Good Can Come of Bad Code: Ask Dr Web in A List Apart

Remember: the future will come whether you design for it or not. If your company charges $300,000 for a website that won’t work on next week’s most popular device, your company won’t be able to stay competitive in this business. It might not even be able to stay in the business, period. After all, clients who pay for sites that break too soon will look elsewhere next time—leaving your company perpetually hunting for new clients in a downward spiral of narrowing margins and diminishing expectations.

Your company’s survival is tied to the ability of the products it makes to work in situations you haven’t imagined, and on devices that don’t yet exist. This has alwaysbeen the challenge of web design. It’s one A List Apart has taken seriously since we began publishing, and our archives are filled with advice and ideas you can boil down and present to your bosses.

Source: No Good Can Come of Bad Code

The Web is not Poor Man’s Native | in progress

Chris WilsonTAKE A LOOK in dev tools; maybe you don’t need a couple of dozen trackers on every page.

Chris Wilson on why Web vs. Native is the wrong question, and what web developers can do to maximize the web’s strengths instead of undercutting them by over-relying on heavy frameworks designed to emulate native apps.

Source: The Web is not Poor Man’s Native | in progress

No Ken Do (Musketeer Barbie Saves the Prince)

I WATCHED dozens of Barbie videos hundreds of times when my daughter was three and four years old. I can’t praise their animation, dialog, or other cinematic and literary qualities, but this I can say in their favor: every Barbie video we watched was feminist and empowering in its messaging.

This was not the Barbie my girl cousin grew up with, wondering which outfit she should wear to please Ken. This Barbie kicked ass.

In one video, set in 18th Century France, Barbie and her roommates overcame sexism to become Musketeers. They exposed a conspiracy, beat male villains at swordplay, and more than once saved the life of the kingdom’s rather ineffectual prince. (The downside of the Barbie videos’ crude but seemingly heartfelt feminism was that they tended to portray men as wimps or scumbags. Women are strong in the Barbie videos; good men are not.)

In another video, Barbie was an actor who became a film director when the director of the picture in which she was starring tried to patronize her. In Fairytopia, the first and worst animated of the videos, Barbie went on a Lord-of-the-Rings-style quest and saved an entire kingdom from ruin. In A Fashion Fairytale, she saved her aunt’s business from bankruptcy by an evil (woman) competitor, and then helped that competitor turn from the dark side to the light. In other words, she kicked ass but also nurtured and forgave. Assertive and supportive. A fighter and a hugger.

I watched these videos over and over, because children aged three to four thrive on repetition. I got familiar enough that I could quote the dialog as easily as I quote from Rushmore or North By Northwest. I was relieved when my daughter outgrew Barbie, because my mind craved something a little more grown-up in the film narrative department. But I never once worried that the videos were telling my daughter she could be anything but awesome. I never watched a single Barbie video that told girls life was about finding and pleasing anyone besides yourself.

This was also the time in my daughter’s development when we bought Barbie reading books and Barbie dolls. When I was three, Barbie had a thousand ways to look beautiful. When my daughter was three, Barbie had a thousand ways to earn a living.

You can find fault with Barbie. For one thing, she still promotes a vision of the world in which caucasian features set the beauty standard—a world in which, even if there are variously ethnic friends in the mix, the main character is always white. Then there are her unrealistic physical dimensions, which have been tied to self-loathing and eating disorders in girls and women. (Not that Barbie’s is the only unrealistic physique girls contend with—they’re bombarded with the stuff from birth.) The Barbie stories never question the established social order. They inspire girls to achieve, but obviously they don’t address male/female pay discrepancy or other serious social issues.

Musketeer Barbie saves the prince; she doesn’t ask why do we need a prince? Shouldn’t we invent representative democracy? And how about letting a woman run things?

Barbie won’t save us. But she’s not as bad as all that.

For young girls who have just begun seeing the world through the filter of gender, today’s Barbie does some good. Barbie videos were some of the only stories we watched back then that didn’t require me to immediately explain, apologize for, and caution against believing, one or more horrifying biases. Viewed a classic Disney film lately?

The internet feeds on outrage and cat gifs. And the recent outing of a Barbie story that appears to conform to 1950s-Barbie-thinking made perfect fodder. But it might simply be a book that teaches children how different professionals work together to create the digital games they enjoy playing. A designer is part of the mix; so are developers and other professionals, whose complementary skills support each other. That’s how it works when I design stuff. In my work, almost every day, there are things that go wrong that oblige me to call someone else to fix them. I notice a problem on a server; I reach out to a sysadmin. It isn’t because I’m a boy and boys are dumb. It’s because designers aren’t sysadmins.

All right. Fair enough. It was a terrible error for the illustrator to make all the technical people male. That sends an awful message—one lots of us have been working to fight. It’s disturbing that nobody at the publishing house realized the inferences that could be drawn from this mistake. And if this were my only exposure to Barbie in the past ten years, I’d be drawing those inferences and storming the barricades (i.e. retweeting) with the rest of my peeps.

But honestly? I spent two long years with the Barbie franchise. I think the women running it today are serious about girl power. Maybe the unfortunately timed illustration error reveals a deep sexist conspiracy. Or maybe it’s just one of those things nobody thought about while rushing a cheap book to print.

Become a Web Developer: Avi Flombaum of The Flatiron School on Big Web Show 89

8678245025_b0a71982b4_z

AVI FLOMBAUM, dean of The Flatiron School, is my guest in Big Web Show Episode No. 89. A 28-year-old Rubyist, Skillsharer, storyteller and entrepreneur, Avi founded Designer Pages and NYC on Rails before creating The Flatiron School—a 12 week, full-time program designed to turn you into a web developer.

Listen to Episode No. 89 of The Big Web Show.

URLS, URLS, URLS

Big Web Show: Monkey Do!

IN EPISODE No. 86 of The Big Web Show, I interview Monkey Do studio’s Michael Pick and Tim Murtaugh.

Mike, Tim, and I discuss the A List Apart redesign, responsive images and type, CSS Zen Garden, organic design processes, the future of CMS systems, designing a food truck app, and more.

TIM MURTAUGH has been building web sites since 1997 and specializes in delivering standards-based HTML5/CSS templates. His eye for design and serious affinity for clean code allow him to painlessly integrate his templates into larger systems without sacrificing user experience or aesthetics. Tim started in the non-profit world, moved on to start-ups, shifted to an agency, upgraded to publishing, and from thence: Monkey Do. Tim can be found on Twitter at @murtaugh.

MICHAEL PICK approaches web design from the perspective of both art director and front-end developer. He primarily creates clean and concise design systems for websites, but is also known to get his hands dirty with Flash, HTML/CSS, and JavaScript development. Over the years he has worked as a cog in a large agency, an in-house art director, and a humble freelancer, and has picked up a few awards along the way. He holds a BD in Communication Design from NSCAD in Halifax, Nova Scotia. Mike tweets as @mikepick.

This episode of The Big Web Show is sponsored by Shutterstock.com. Get 30% off any package with discount code “BIGWEBSHOW3.”

Big Web Show 79: Eric Meyer

Eric Meyer

IN EPISODE No. 79 of The Big Web Show (“everything web that matters”), I interview CSS guru, Microformats co-founder, O’Reilly and New Riders author, and An Event Apart co-founder Eric A. Meyer (@meyerweb) about upcoming CSS modules including grid layout, flexbox, and regions; his career trajectory from college graduate webmaster to world-renowned author, consultant, and lecturer; founding and running a virtual community (CSS-Discuss); becoming an O’Reilly writer; the early days of the Mosaic Browser and The Web Standards Project’s CSS Samurai; “The Web Behind” variation of The Web Ahead podcast, and more.

Listen to the episode.

About Eric

Eric A. Meyer has been working with the web since late 1993 and is an internationally recognized expert on the subjects of HTML and CSS. He is the principal consultant for Complex Spiral Consulting and lives in Cleveland, Ohio, which is a much nicer city than you’ve been led to believe. Author of “Eric Meyer on CSS” (New Riders), “Cascading Style Sheets: The Definitive Guide” (O’Reilly & Associates), “CSS2.0 Programmer’s Reference” (Osborne/McGraw-Hill), and the CSS Browser Compatibility Charts, Eric co-founded and co-directs An Event Apart, the design conference “for people who make websites,” and speaks at a variety of conferences on the subject of standards, CSS use, and web design.

URLs


Photo: Chris Jennings

Big Web Show 77: @sazzy

IN EPISODE No. 77 of The Big Web Show, I interview returning guest Sarah Parmenter about designing an app for the homeless; the challenges of multi-device design; teaching HTML and CSS to young people; designing a complex reader app; the ideal number of employees for a small design studio; Brooklyn vs. small-town UK; and more.

The Big Web Show features special guests on topics like web publishing, art direction, content strategy, typography, web technology, and more. It’s everything web that matters.


Sarah Parmenter Photo by Pete Karl II.