A Complete Guide to Progressive Enhancement

For years, web designers have been using graceful degradation principles to make sure visitors in older browsers can at least see the content on their websites, even if they don’t see it exactly how the designer intended.

Graceful degradation let designers design for the newest and best browsers without completely alienating those using older browser versions.

And just because those with older browsers often got a less-than-optimal user experience didn’t deter designers from placing their focus squarely on the newest technologies and techniques, rationalizing that those using older browsers were either used to it or should just upgrade.

Progressive enhancement gives us a better option. Rather than focusing on browser technologies and support, PE focuses on content.

As most designers would certainly agree, content is the most important part of virtually any website project. But a lot of designers don’t fully understand progressive enhancement, how it works, and why it’s a better model than graceful degradation.

Read on for answers to those questions and information on how to use progressive enhancement on your next website design project.

 

Who Benefits from Progressive Enhancement?

bestviewed

A lot of designers think progressive enhancement only benefits those users who are using outdated browsers, but other users benefit, too. Mobile browsers are the most likely to take full advantage of progressive enhancement. The reasons for this are two-fold. First, mobile browsers that don’t support CSS or JavaScript can still display the content of your site. While most modern smart phone browsers support at least one of those, not all browsers for basic cell phones do.

The second way that mobile browsers benefit is that sites built with progressive enhancement can more easily incorporate a mobile version. After all, the foundation HTML will work regardless of the CSS layered on top of it. So creating a separate stylesheet for mobile browsers doesn’t require a whole lot of extra work.

Screen readers also have a much easier time if the base HTML is well-structured and semantic. This makes your site much more accessible for those who employ screen readers. Search engines can more easily scan well-formatted HTML than poorly-coded pages, which can mean much better search engine placement for your site.

 

Other Benefits of Progressive Enhancement

Beyond the immediate benefits of improved user experience, sites built with progressive enhancement are generally easier to maintain than other sites.

Because the basic content and functionality is kept completely separate from the visual elements of the page, making changes to the appearance of the site shouldn’t even affect the way the site functions or the content it includes. Re-theming your site is that much easier because of this. All you’ll need to do is change your CSS files.

newcss

And honestly, we shouldn’t overlook the benefits of a site being viewable in the widest number of browsers out there.

While not everyone will get an identical experience, the fact that someone using an outdated or obsolete browser can still view your site’s content can lead to more visitors or customers. Sites that take an approach that starts with progressive enhancement don’t need to do any extra work to make this possible.

 

Build From the Inside Out

Progressive enhancement doesn’t focus on browser compatibility in the same way graceful degradation does. Instead, it focuses first on the content, then on presentation of that content, and then on any scripting. This way, regardless of the device or browser a visitor is using, they’ll be able to see your content without any issues.

Progressive enhancement can also have benefits for accessibility and even search engine optimization. By starting out with well-structured, semantic HTML, you’ll be providing a good foundation on which to build the design of your site. And this basic HTML is easily interpreted by screen readers and search engine spiders.

Put Content First

Whenever you’re starting a new website project, you should first concentrate on the content structure. By creating well-structured, semantic HTML as the base of your website, you’ll have an easier time with the presentation level of your design.

Well-thought-out HTML has the advantage of not needing presentation layers to make sense. That means screen readers, search engine spiders, and those on basic mobile browsers will be able to view your content without any distracting formatting issues.

msnbc

You can see, above, how MSNBC keeps all their content in roughly the same order even without the CSS. The site is perfectly usable even without the presentation layer.

While the structure of a site will be dependent on that particular site’s content, there are some guidelines you should use for basic sites.

Start with the header, then the main navigation, followed by content. After your content, you’ll want to put any additional sidebar information or links, and then your footer information.

In this way, the identifying information for your site is displayed first, followed by navigation (in case someone wants to go directly to a different page, like your contact or about page), and then it gets straight to the content, which is likely what most people are on your site for in the first place. Adapt this model as necessary for your site, but always keep in mind exactly what is going to be of the most interest to your visitors, and place that as close to the top of the code as possible.

Make sure that any functionality on your site is possible in this basic layer. That means forms and apps should be usable with just the HTML and server-side scripting. While it’s likely that functionality won’t be as well-presented as you’d like or as user-friendly, it should be usable at a minimum.


Presentation is Next

Once your HTML and basic functionality are all set, you’ll want to turn to presentation elements. The vast majority of browsers, including many mobile browsers, support CSS (though not all of them support every aspect of CSS, especially CSS3). The presentation level should enhance the content. It should make it easier to view and use, and improve the user experience.

To some extent here, you can have more than one layer of CSS enhancement. The first should focus on basic styles that are recognized by virtually any modern browser. Your layout, typography, and color scheme should all be included in this layer, along with other stylistic choices.

Then, add another layer on top of that which takes advantage of more advanced properties that might not be supported by every browser out there but will add to the user experience for those using browsers that do include support.


JavaScript Should Be Last

Sometimes it seems like JavaScript is used in virtually every new website created. JavaScript can greatly contribute to the usability and user experience of a website or web app.

Ajax has revolutionized the way a lot of sites work, and has made a huge difference in what we now do online. But your website or app should work without JS. There should always be an HTML or server-side scripting alternative, especially when we’re talking about general websites rather than web apps.

Make sure your site is usable without JavaScript. While most web users have JS enabled in their browser now, there are still cases where JavaScript is undesirable. Not every mobile browser out there has good support for JavaScript. It’s often not accessible for screen readers. And there are some people out there who still don’t have JavaScript enabled in their browsers.

As you can see from the screenshots below, there’s no functionality lost between the JavaScript-enabled version of the Alfred app website and the one with JavaScript turned off. The only real difference is that the Terms & Conditions are anchored at the bottom of the page rather than opening in a modal window when the link is clicked. But in either case, they’re linked and fully readable.

alfred-modalwindow

Here’s the fully-functional version of the site, with the modal window.


alfred-nojs

Here’s the version with JavaScript disabled, with the Terms & Conditions appearing just above the footer. It’s still linked from the same place in the content.


 

Implementing Progressive Enhancement

facebookold

We’ve talked about PE on a theory-level above. But let’s get into the practical aspects of implementing it on a website project. The first thing to do is figure out the information architecture for your site.

Look at the content available and how it should be organized. Create some wireframes for how you want to show the content, the placement of different elements, etc. Prioritize them at this point, by what should appear closest to the top of the code (the most important elements) and what can go lower down.

This information architecture step is vital with progressive enhancement. Once you know what needs to go where, you can start coding. Make sure you set up your HTML code in the correct order, according to what’s most important. This isn’t necessarily going to coincide perfectly with the order in which things appear on your completed, styled website, but it probably won’t be too far off (header at the top, content in the middle, footer at the bottom).

Make sure the HTML you’re coding here is semantic. Use proper <h1>, <h2>, <h3> tags, etc., as well as properly naming the divs in which your content appears. This not only makes it more accessible, but also makes maintaining your code and coding your CSS a lot easier.

You’ll also want to code in any functionality at this point using server-side scripts. While your final site may use Ajax for primary functionality, it’s still important to have a server-side backup, just in case.

Once your basic HTML is finished, you’ll want to move on to the presentation layer. Go about this to a large extent as you would the design of any website project. But make sure when you get to actually coding the CSS that you maintain the idea that not every CSS property will work in every browser. Make sure that even if some of your selectors don’t work, your overall presentation will be unaffected.

A little bit of graceful degradation might be appropriate for some of your CSS, for those cases when you really want to use a specific technique that isn’t widely supported. There’s nothing wrong with using it selectively, in special cases. But the goal here is to rely on good, standards-based coding and semantic markup to make graceful degradation unnecessary.

There’s been some debate over whether using multiple stylesheets for progressive enhancement is a good idea. Separating out the different aspects of your presentation (layout, typography, color, etc., as well as different stylesheets for things like print or mobile layouts) can make sense, especially if your stylesheet is long or complicated.

Separate stylesheets make it easier to find a specific element, and can make it both easier and more complicated to maintain the site. After all, if you just want to change a color, it’s easier to open up your color stylesheet and find all the instances of that color, and know you haven’t missed anything. But let’s say you want to change the color and typography of a specific type of element on your page (like all your H1s, or your sidebar links). You’ll need to open multiple stylesheets in order to make the changes. Whether you use multiple CSS files or not comes down more to personal choice than anything else.

Once your CSS is all coded and everything’s been tested, it’s time to add any client-side scripting. At this point, your site should work with or without JavaScript. But adding JS can greatly improve user experience and satisfaction. Once you’ve added all the necessary scripts, be sure to test the site again with that scripting turned off, just to make sure everything still works acceptably.

 

Convincing Your Clients

When working on your own, personal website projects, progressive enhancement is something you can implement without a problem. When dealing with clients, however, it can get a bit trickier. A lot of clients are still stuck on the idea that their website needs to appear exactly the same in every browser they’ve ever used. Ever.

Explain the benefits of progressive enhancement to your clients. Tell them that it’s faster and less expensive for them to have you design the site with progressive enhancement in mind, and that their visitors likely won’t care either way, as long as the content is available.

If they still resist, tell them you’ll have to adjust your quote accordingly to compensate for the extra coding time and effort required.

In many cases, when a client sees that progressive enhancement will save them money with no detrimental effect to their visitors, they’re more than happy for you to design their site in that manner.

 

Accidental Progressive Enhancement

I’m sure there are some among you who are reading this article and thinking, “But this is how I design websites anyway!” A lot of designers out there design their websites around the content, making sure every layer is functional before adding another layer.

Their HTML is well-structured, their CSS works as a whole unit but still looks fine even if one or two elements doesn’t work properly, and even without client-side scripting, everything still works.

Some designers have naturally taken a progressive enhancement-styled view of web design. For those designers, this article seems like old hat.

But for those of you out there who take the opposite approach, either with graceful degradation, or just designing for the lowest common denominator and not bothering with more advanced techniques, consider progressive enhancement for your next project.


Written exclusively for WDD by Cameron Chapman.

Do you automatically design sites with progressive enhancement in mind? Or do you prefer taking a graceful degradation approach? Please share your strategies in the comments!

  • http://www.mysweetdesign.com Mike

    Love this article.

    There is a lot of mentioning of progressive enhancement but many people either don’t get it or don’t think it’s important enough to consider.

    Personally i encounter these problems everyday when designing and with all the browsers out there being used you have to consider it. If we want a free web with plenty of competition then this is the downside.

    As the article says, as long as the content is well structured you are well on your way to having a good experience whatever browser/device you view it on.

  • http://www.ehhwhat.co.uk Ben

    wrote an article on a similar theme, do we have to make CSS3 work across all browsers? http://www.ehhwhat.co.uk/blog/?p=116

    It does seem that educating clients and business owners is the best solution, if you make them understand that different users could see different views of their website then progressive enhancement is a lot easier.

  • Jorgen

    Great article explaining PE. Even tough PE should be something every designer is familiar with this is sadly not always true. This article will help me make my make my case for the designers I work with.

  • http://www.patriktotero.com Patrik

    Nice article! I’ve always liked the idea of progressive enhancement and I’m trying to work with it as much as my projects/clients allows me to. I went to a conference yesterday where they spoke about this subject too.

    A neet little way to do browser sniffing without caring about platforms and browser version (old and future versions) is to test browser functions using this js library:
    http://code.google.com/p/enhancejs/source/browse/trunk/enhance.js?r=62

  • http://elainevellacatalano.com Elaine

    Completely agree with you here; this is how I always work. I find it to be more organised and easy to understand.

  • Roger

    I think this article is absolutely crap. The one and only improtant thing for the user/customer is the visual experience! This includes brilliant graphics und well used javascript!

    regards

    • http://drinksareonme.net Dale Cruse

      Please please please let that comment be sarcasm.

      • http://www.delucamarketing.ch NetHawk

        Of course this is sarcasm. Only the use of the term “well used” is suspicous…

  • http://www.securityking.com Craig

    Very nice article, and planning is the key and following this structure will save a lot of future stress, Nice work

  • http://www.designmango.com DesignMango

    Thanks for sharing

  • http://www.ksnagra.com Kanwaljit Singh Nagra

    Awesome solid advice. A must read!

  • http://dulcetsolutions.com/ Siddharth Goyal

    I agree that content is definitely the most important part of the website. In fact, I will go even further and say design is secondary. In fact, if you can make the content stand out and easy to find, then as long as the design looks web 2.0 ish, anything works. Of course, you can’t use a fashion theme for a business website :D

  • http://nemesisdesign.net/ Federico Capoano

    I’m used to this type of design / development. Is not hard afterall.. just design and develop the site by being sure it’s possible to read the content with css/external images/javascript disabled and you’re ready to go.

  • http://monkey-house.ca Greg

    Had this article opened as a tab to read ‘later’, and later was tonight. Have to admit, I wish I hadn’t saved it for so long simply because I misread it. I thought it was going to be a practical guide to implementing progressive enhancement, whereas it is actually a guide to understanding what progressive enhancement is. Along with a few guidelines.

    I guess to me a “complete guide” would ideally include an explanation of the theory, reasoning, and best practices (ie. this article) along with practical cases (ie. what I really WANTED from this article).

  • http://www.craigfordham.net Lisa Thomason

    Excellent article, this helps to manage the content so it is well structured, and easily allows future updates

  • http://www.bestcardprinter.com Jeff Jones

    A must read! Sound and solid advice! Great article, Cheers

  • http://www.cardsoftware.net Amanda

    These are great tips, which can sometimes be overlooked or not even thought of, Thank you for bringing this some attention