The day erupted with equal parts delight and criticism.
I’ll be the first to admit that I’m trolling, at least a bit. But I’m not trying to.
I didn’t mean to offend anyone. I know that I unfortunately and unitentionally have, and I apologize for that and have apologized to the people I know for certain I’ve offended. If anyone’s personally offended or hurt by anything there, email me and I’ll try my best to make it right. That might mean revising or editing a post. It might mean that I’ll work with you to help get your site working well for as many people as possible. Let’s talk about it.
Once upon a time, Oakley launched a website to promote some new goggles. That website weighed in at a whopping 85.4MB. Phil Hawksworth wrote about it. Oakley worked on it and responded to Phil that they got the page weight down to 13.6MB. That’s a savings of 71.8MB or 84%. Andy Clarke worked it out; at $9/MB, the original site would cost $768 to view on an iPhone. The newly optimized site—though still large—would cost $122, quite literally saving you $646. I’m sure there’s more to the story that we don’t know, but the simplified version is that Phil played a part in saving someone $646.
Lots of people don’t know how to build sites that work for as many people as possible. That’s more than ok, but don’t pretend that it was your plan all along.
This isn’t about shame. It’s about accountability.
All that said, I realize that there are better ways to make the point. More than a few have mentioned—both publicly and privately—that, rather than posting sites that don’t work well, I should be posting sites that do. A “sites done right” list is a wonderful suggestion, and one that I’ll be doing immediately. However, that’s not in place of a “not working well” list; I think it’s still valuable to see both ends of the spectrum.
To start that, I’ve added a post to the site about a great example of progressive enhancement done well. This will be the first of many, and they’ll be tagged as
Better still, my friend Stacey Mulcahy requested a post for how to properly approach progressive enhancement, which I thought was a splendid idea.
Before I begin, I’ll say that there’s been a lot of good posts already written about the topic. Part of my motivation for creating the site was that this isn’t a new problem. Some of the best articles on the topic were written long ago. Here are a few of my favorites:
Still with me? Let’s journey on.
This tutorial will show you how to overcome both.
So, let’s build an “app-y” example. Joe McCann makes a great suggestion: a real-time, trading web application. For the hungry, you can see the final example here: pest.danielmall.com. You can also get all of the code on Github, so clone/fork away. (Disclaimer: I know nothing about stocks, so don’t fault me for my stock visualization logic here.)
<h1 class="page-title">Progressively Enhanced Stock Table</h1> <section class="last-updated"> <h1>Last updated <span class="current-time">8:21:29 am</span>. <strong class="static-page-message"><a href="../">Refresh</a> for updates.</strong></h1> </section><!-- .last-updated --> <div class="stock-table-wrapper"> <table class="stock-table"> <thead> <th class="table-headers" scope="col">Time</th> <th class="table-headers" scope="col">Share Price</th> </thead> <tbody> <tr> <th class="time-label" scope="row">8:20:10 <abbr title="Ante Meridien">am</abbr></th> <td class="share-price"><span class="share-price-tooltip">$<b class="share-price-num">149</b></span></td> </tr> <tr> <th class="time-label" scope="row">8:20:20 <abbr title="Ante Meridien">am</abbr></th> <td class="share-price"><span class="share-price-tooltip">$<b class="share-price-num">146</b></span></td> </tr> <tr> <th class="time-label" scope="row">8:20:30 <abbr title="Ante Meridien">am</abbr></th> <td class="share-price"><span class="share-price-tooltip">$<b class="share-price-num">138</b></span></td> </tr> <tr> <th class="time-label" scope="row">8:20:40 <abbr title="Ante Meridien">am</abbr></th> <td class="share-price"><span class="share-price-tooltip">$<b class="share-price-num">197</b></span></td> </tr> <tr> <th class="time-label" scope="row">8:20:50 <abbr title="Ante Meridien">am</abbr></th> <td class="share-price"><span class="share-price-tooltip">$<b class="share-price-num">15</b></span></td> </tr> </tbody> </table><!-- .stock-table --> </div><!-- .stock-table-wrapper -->
The server does all the work here. (There’s a little PHP action that randomly generates the numbers, but that doesn’t really matter for this demo.) This is our barebones, baseline version. For mobile devices, slow connections, sluggish networks, we’ve got a lean mean page that doesn’t leave you lost.
Next, write some styles to get this looking good. Don’t change any markup. We’re progressively enhancing!
<head>, write this just under your main stylesheet:
<script>document.write('<link rel="stylesheet" href="/-/c/enhanced.css" />');</script>
In that stylesheet, you can now create styles appropriate to the real-time functionality, like converting that table into a graph and plotting the numerical data.
And there you have it: a progressively-enhanced web app/site/thang.
I promise to be more proactive about keeping progressive enhancment in mind and positive as I try and help people who are still on their way.