Elliot Jay Stocks — Progressive enhancement

Web Directions South 2009, Sydney Convention Centre, October 9 11.45am.

Presentation slides

Session description

In the summer of ‘07 in a flood-​​soaked Oxford, England, Elliot appeared on stage for the very first time. His presentation, ‘Progressive Enhancement & Intentional Degradation’, looked at how to reward modern browsers with the latest CSS tricks and punish IE by dropping certain site features. Over two years later, what has changed? We’re starting to see the ideology of progressive enhancement — especially with CSS3 — spread throughout the web design community, but more work needs to be done.

What can we do to spread the message further and design a better-​​looking web faster? Elliot will look at how features of the CSS2.1 and CSS3 specs can enhance your websites and he’ll examine the implication of using such techniques. He’ll look at the issues surrounding font embedding and the recent development of the font-​​as-​​service; the arguments about browser support; the potentially controversial irrelevance of validation; and how we can attempt to reach the future sooner by writing forward-​​thinking code. In this motivational presentation Elliot will urge you to embrace the techniques of modern web design and to stop worrying about the so-​​called restraints.

About Elliot Jay Stocks

Elliot Jay Stocks PortraitElliot Jay Stocks is an independent designer whose work is frequently featured in online and offline publications, showcased on various ‘inspiration’ websites, and used as an example to design students around the world of how accessible web design can still look beautiful. A regular face at design conferences around the globe and author of the best-selling book Sexy Web Design (SitePoint, 2009), Elliot can often be found writing about design trends, issues, and techniques for industry-leading publications such as .Net (aka Practical Web Design), Computer Arts, and Computer Arts Projects. His extensive portfolio includes work for clients such as The Virgin Group, WordPress.org, The Beatles, Blue Flavor, Twiistup, EMI Records, and Carsonified.

Follow Elliot on Twitter: @elliotjaystocks

Related presentations

16 responses to “Elliot Jay Stocks — Progressive enhancement”:

  1. […] sheets, Elliot has spoken on the matter, and the slides from his 2009 Web Directions South talk, “Stop Worrying and Get on With It (Progressive Enhancement and Intentional Degradation),” make for good reading.Elliot Jay Stock’s presentation ‘Stop Worrying and Get on […]

  2. […] theme, &#1072n&#1281 th&#1077 slides fr&#959m h&#1110&#1109 2009 Web Directions South talk, “St&#959&#1088 Nerve-​​racking &#1072n&#1281 G&#1077t &#959n W&#1110th It (Progressive Enhancement &#10…,” m&#1072k&#1077 f&#959r &#1077&#1093&#1089&#1077&#406&#406&#1077nt […]

  3. […] sheets, Elliot has spoken on the matter, and the slides from his 2009 Web Directions South talk, “Stop Worrying and Get on With It (Progressive Enhancement and Intentional Degradation),” make for good […]

  4. […] sheets, Elliot has spoken on the matter, and the slides from his 2009 Web Directions South talk, “Stop Worrying and Get on With It (Progressive Enhancement and Intentional Degradation),” make for good […]

  5. […] sheets, Elliot has spoken on the matter, and the slides from his 2009 Web Directions South talk, “Stop Worrying and Get on With It (Progressive Enhancement and Intentional Degradation),” make for good […]

  6. […] sheets, Elliot has spoken on the matter, and the slides from his 2009 Web Directions South talk, “Stop Worrying and Get on With It (Progressive Enhancement and Intentional Degradation),” make for good […]

  7. […] sheets, Elliot has spoken on the matter, and the slides from his 2009 Web Directions South talk, “Stop Worrying and Get on With It (Progressive Enhancement and Intentional Degradation),” make for good […]

  8. […] sheets, Elliot has spoken on the matter, and the slides from his 2009 Web Directions South talk, “Stop Worrying and Get on With It (Progressive Enhancement and Intentional Degradation),” make for good […]

  9. […] sheets, Elliot has spoken on the matter, and the slides from his 2009 Web Directions South talk, “Stop Worrying and Get on With It (Progressive Enhancement and Intentional Degradation),” make for good […]

  10. […] sheets, Elliot has spoken on the matter, and the slides from his 2009 Web Directions South talk, “Stop Worrying and Get on With It (Progressive Enhancement and Intentional Degradation),” make for good […]

  11. […] sheets, Elliot has spoken on the matter, and the slides from his 2009 Web Directions South talk, “Stop Worrying and Get on With It (Progressive Enhancement and Intentional Degradation),” make for good […]

  12. […] sheets, Elliot has spoken on the matter, and the slides from his 2009 Web Directions South talk, “Stop Worrying and Get on With It (Progressive Enhancement and Intentional Degradation),” make for good […]

    • By: TFCC
    • October 27th, 2011

    As I find myself having more and more opinion on this topic, I want to join this dialogue in hopes of me making sure I reach the right perspective on this issue.

    For our 1550 North American website customers in every state with local audiences, our global stats, to this day, reflect IE8 (24%) and IE7 (12%) as the most popular browser versions in that order with IE total at about 55% of traffic. We should all love knowing the truth, so we can be prepared for it.

    The movie format analogy isn’t exactly right, because in the cases of rounded corners and shadows and opacity, etc, you CAN provide the same effect to give the same great details using other older, cross-​​browser methods all the way back to IE6. We’re just bummed it’s not the easy CSS3 way. We can deliver the same quality just using tedious methods we no longer want to use.

    Also, while we can educate our clients (as some mention), we’re not in the position to educate their visitors. It just needs to work, and ideally, be designed for everyone.

    This is really about serving quality. Would Steve Jobs have sold a nice-​​looking Mac in the U.S. and turn around and sell an easy, ugly one to China? No. Anyone so concerned about the global beauty of design should be thinking no less than making sure sites serve the same details in all browsers, and be proud to do so, especially when so much of design is in the details and contributes to the perception of quality. We should take it as a matter of personal pride to provide the highest-​​quality experience to as many as possible.

    That being said, let me present my “rounded button” argument for cross-​​browser design experience. Recently, we rounded our CMS buttons. Great response. The CMS felt fresher to people. Such a small change. Rounded buttons (and corners, in general) are arguably a symbol of modern web design. If I rely on CSS3 for rounding, 40ish% of visitors see a square button. Those visitors, after visiting many other sites where corner images are used for rounding (if not image buttons), may understand that rounded buttons are kind of the norm, pleasing and may be representative of modern design and, more importantly, representative of quality. All of a sudden, my square buttons, to the 40%, look less modern, outdated, obsolete, low quality and downright bad. The non-​​CSS3 visitor’s perception may well be that the sites where buttons are rounded are superior to mine. I may be proud of my CSS3 buttons personally and have led my client to accept it, but the visitor seeing square buttons could care less about my technique or that there is a fallback, only about the final result and quality perception. Maybe some percentage of visitors choose another development company due to the lack of quality and modernity perceived from my site’s old-​​fashioned square buttons.

    I may be able to tell my client that browsers will catch up, and your site will be “ready”, and it will require less bandwidth and will cost less to develop and maintain…but I’m kind of lying about all that. Mainly, it’s easier for me to build. Your site needs to be ready NOW for today’s visitors. Bandwidth for corners and png shadows is minimal (sprite those small images to reduce connections). As an experienced developer, I’ve done it all, so cost is nothing. I’m not at a loss for solutions. If it costs you much money to figure those solutions out, you may be a novice without good resources or patience to develop your own cross-​​browser solutions.

    So, no matter how you do it, you should be focused on providing a common experience, and not resting on the development community’s disdain of older browsers and pretending that customer education is the right path. It’s not. Worst case, you may be midleading your clients in a direction where their sites are giving off a perception of low quality to 40ish% of their site visitors.

    As for when these browsers will go away, we’ve been talking about it for years. They’re still here now. This is today. Worry about today. When the time comes to allow change, then change. When browsers finally catch up, your old sites will still work whether elegantly built or not. Put your pride aside, and help your client.

    I don’t see the JS fix as a problem. If non-​​CSS is 40% and JS disabled is 5%, you provide the higher quality to 35% more with nice details and have fallbacks for the 5%. Yes, you should concern yourself with JS disabled. I myself “surf” that way sometimes.

    I totally agree that there’s no need to constantly plug in shadows, gradients, rounded corners and 3D effects. To me, it’s getting old in web design. It’s not timeless. It’s just an easy effect and is getting over-​​used, IMO.

    If my perspective is off, please help me to right it. Obviously, it’s been on my mind as I try to steer our company. Thanks.

  13. […] sheets, Elliot has spoken on the matter, and the slides from his 2009 Web Directions South talk, “Stop Worrying and Get on With It (Progressive Enhancement and Intentional Degradation),” make for good […]

  14. […] sheets, Elliot has spoken on the matter, and the slides from his 2009 Web Directions South talk, “Stop Worrying and Get on With It (Progressive Enhancement and Intentional Degradation),” make for good […]

  15. […] sheets, Elliot has spoken on the matter, and the slides from his 2009 Web Directions South talk, “Stop Worrying and Get on With It (Progressive Enhancement and Intentional Degradation),” make for good […]

Your opinion:

XHTML: You're allowed to use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>