Watch this space.
My contribution to this year’s edition of the web’s best advent calendar.
A superb article by Josh on planning for progressive enhancement—clearly laid out and carefully explained.
Angry, but true.
Don’t lock yourself into a comprehensive technology that may just die within the next few months and leave you stranded. With progressive enhancement you’ll never go wrong. Progressive enhancement means your code will always work, because you’ll always focus on providing a minimal experience first, and then adding features, functionality, and behavior on top of the content.
I don’t tend to be a “magic pill” kind of believer, but I can honestly say that embracing progressive enhancement can radically change your business for the better. And I’m glad to see Google agrees with me.
Google has updated its advice to people making websites, who might want to have those sites indexed by Google. There are two simple bits of advice: optimise for performance, and use progressive enhancement.
Just like modern browsers, our rendering engine might not support all of the technologies a page uses. Make sure your web design adheres to the principles of progressive enhancement as this helps our systems (and a wider range of browsers) see usable content and basic functionality when certain web design features are not yet supported.
Patty’s excellent talk on responsive design and progressive enhancement. Stick around for question-and-answer session at the end, wherein I attempt to play hardball, but actually can’t conceal my admiration and the fact that I agree with every single word she said.
Some thoughts on progressive enhancement, although I disagree with the characterisation of progressive enhancement as being the opposite choice to making “something flashy that pushes the web to it’s limits”—it’s entirely possible to make the flashiest, limit-pushing sites using progressive enhancement. After all…
it’s much more a mindset than a particular development technique.
It’s very early days for ServiceWorker, but Jake is on hand with documentation and instructions on its use. To be honest, most of this is over my head and I suspect it won’t really “click” until I try using it for myself.
Where it gets really interesting is in the comments. Stuart asks “What about progressive enhancement?” And Jake points out that because a ServiceWorker won’t be installed on a first visit, you pretty much have to treat it as an enhancement. In fact, you’d have to go out of your way to make it a requirement:
You could, of course, throw up a splash screen and wait for the ServiceWorker to install, creating a ServiceWorker-dependant experience. I will hunt those people down.
I very much agree with Orde’s framing here: I don’t think it makes much sense to talk about “above the fold” CSS …but it makes a lot of sense to talk about critical CSS.
And, yeah, it’s another example of progressive enhancement.
Dan Donald gets to the heart of progressive enhancement:
Assumptions in themselves don’t have to be inherently bad but let’s recognise them for what they are. We know very little but that can hopefully enable us to be far more flexible and understanding in what we create.
Almost six minutes of me squinting in the sun and sharing my reckons while seagulls squawk in the background.
I really hope that this is the kind of usage we’ll see for web components: enhancements for the browsers that support them without a good ol’ fashioned fallback for older browsers.
Derek’s excellent advice on avoiding over-reliance on data attributes has this brilliant nugget of insight:
In the web front-end stack — HTML, CSS, JS, and ARIA — if you can solve a problem with a simpler solution lower in the stack, you should. It’s less fragile, more foolproof, and just works
A terrific post from Trent, touching on all the important facets of building for the web: universality, progressive enhancement, performance …great stuff!
Scott writes an absolutely spot-on skewering of the idea that progressive enhancement means you’re going to spend your time catering to older browsers. The opposite is true.
Progressive Enhancement frees us to focus on the costs of building features for modern browsers, without worrying much about leaving anyone out. With a strongly qualified codebase, older browser support comes nearly for free.
The importance of long-term thinking in web design. I love this description of the web:
a truly fluid, chaotic design medium serving millions of imperfect clients
A nice look at responsive design, progressive enhancement, and the principle of One Web.
Like Drew, I’ve noticed some real hostility to the idea of progressive enhancement recently. Like Drew, I don’t really understand where this attitude comes from. It’s not like progressive enhancement prevents you from doing anything you would do otherwise: it’s just another way of approaching the way you build for the web.
I hope I’m wrong, but I suspect that some developers are letting their tools dictate their principles—the tail wagging the dog (where the tail is Angular, Ember, etc.).
Another good ol’ rant from Tom. It’s a bit extreme but the underlying lamentation with the abandonment of progressive enhancement is well founded.
Some excellent practical advice on progressive enhancement.
I really like Scott’s approach to defining what “support” means in terms of browsers—it makes a lot sense to break things down to the component level.
A love letter to HTML, prompted by the line-mode browser hack event at CERN.
A cogent definition and spirited defence of progressive enhancement:
Progressive Enhancement is an extension of our shared values on the web and goes to the root of the web. I believe—and hope you agree—that the web is for everybody and should be accessible regardless of the device a user brings to the party.
Go, Dan, go!
‘Sfunny, I was talking about just this kind of thing at An Event Apart today.
Jason pulls together some of the themes that emerged at An Event Apart DC this week.
Yet another timely reminder from Tim, prompted by the naysayers commenting on his previous excellent post on progressive enhancement, universal access, and the nature of the web.
There’s something fundamental and robust about being able to request a URL and get back at least an HTML representation of the resource: human-readable, accessible, fault tolerant.
A terrific case study in progressive enhancement: starting with a good ol’ form that works for everybody and then adding on features like Ajax, SVG, the History API …the sky’s the limit.
A nice description of progressive enhancement by Norm, as applied at GDS.
This off-canvas demo is a great practical example of progressive enhancement from David. It’s also a lesson in why over-reliance on jQuery can sometimes be problematic.
A really nice explanation by Todd Kloots of Twitter’s use of progressive enhancement with Ajax and the HTML5 History API. There’s even a shout for Hijax in there.
I wholeheartedly agree with Christian’s diagnosis of the average web page: it’s overweight to the point of obesity. Fortunately Dr. Heilmann has some remedies.
Some great thoughts from Mike Davies about the strengths of the web, prompted by some of the more extreme comments made by James Pearce at Full Frontal last week.
I should point out that James was being deliberately provocative in order to foment thought and discussion and, judging from this blog post, he succeeded.
The Web’s independence from the hardware and software platform people use is a feature. It’s better than cross-platform frameworks which are constantly criticised for not producing exact native-feeling apps on the multitude of platforms they run on. The Web is above that pettiness.
This is the talk I gave at the Webdagene conference in Norway a few weeks back. I called it Responsive Enhancement but I think the Norwegian title translates as “Improvements Through Responsive Design.”
A lovely bit of hypertext.
Remember when I linked to the story of Twitter’s recent redesign of their mobile site and I said it would be great to see it progressively enhanced up to the desktop version? Well, here’s a case study that does just that.
Nicholas is inside my head! Get out of my head, Nicholas!
What makes the web beautiful is precisely that there are multiple browsers and, if you build things correctly, your sites and applications work in them all. They might not necessarily work exactly the same in them all, but they should still be able to work. There is absolutely nothing preventing you from using new features in your web applications, that’s what progressive enhancement is all about.
A really great markup and CSS pattern for “content first, navigation second” from Aaron.
A fascinating insight into the psychological implications of animated progress indicators.
A run-down of the various approaches to the responsive images problem, concluding that this is something that needs to be solved in the image format.
An idea for handling responsive images not with a new format, but with an existing one: progressive JPGs.
A great talk by Nicholas on what progressive enhancement means today. There’s some good ammunition in here.
Yet another great post from Brad:
Whenever I think of the concept of “One Web” and providing universal access to information on the web, I tend to break it down into something much simpler: give people what they ask for.
A great post that discusses exactly what we mean when we talk about “supporting” different browsers.
Neal Stephenson speaks at Solve For X on the relative timidity of scientific (and science fictional) progress in our current time.
A nice little bit of CSS for a page-loading animation. View source.
This is really handy: a bookmarklet that will disable any CSS3 on a page so you can check that your fallbacks look okay.
Yes! Yes! Yes!!!
Progressive enhancement is the only sane approach to today’s massively divergent landscape of devices. It can’t be repeated often enough.
I wholeheartedly agree with this summation of what professional web design and development entails.
This is a fascinating take on progressive enhancement from Luke: for a service-based site, the equivalent of Content First is API first …literally a command line interface as a baseline.
A great presentation by Andy on the use of progressive enhancement at Clearleft.
An excellent summation of the responsive enhancement approach to web development.
A great article by Malarkey wherein he lists five examples of progressive enrichment (as Dan is wont to call it) complete with side-by-side comparisons. Useful ammo, this.
Want to indicate that something is happening on a web page, like... oh, I don't know... an Ajax request or something? Here's a cornucopia of animated progress indicators.