Graceful degradation vs. Progressive enhancement (part 1)

With mobile surfing constantly rising in popularity during the last couple of years, there has been an interesting shift in the way many web designers build their designs. When I started building website templates back in 2005, I learned to make the designs work in all browsers – including text-based browsers which did not even support CSS. The way I did it was to build the complete design for modern web browsers first and then make sure that the design would be possible to browse even with the most basic text-based browser, including the mobile browsers of that time.

In short, the target was to always make sure that designs would degrade gracefully if displayed on an older web browser. The code structure would be built in a way that kept a text-only, no-CSS version of the HTML output logical and well-structured. This concept was commonly called “graceful degradation”, and it simply means “display a basic and simple version if the full layout can not be rendered”. There were many ways to achieve that effect, some were good and others were really nice – but at the cost of usability. I wanted to keep things simple to make sure that people with very limited knowledge about HTML and CSS could still use my templates and learn about the degradation by simply trying the examples included in some of the templates.

You can still see numerous examples of free templates that degrade gracefully among my older templates. I will show examples in the next part of this series, but for now I will focus on the terminology and the differencies between the two methods.

Graceful degradation worked well. Then the smartphones entered the arena.

When smartphones with more advanced web browsers started to appear, it became possible to use CSS and display the full version of the site on mobile devices. But since the screen sizes were (and still are) small and the resolution of most mobile devices were (and, most often, still are) lower than even the smallest laptop computers, the full layouts and designs did not look very well. Until recently, I still kept graceful degradation as my main design philosophy. But in the last few years, another design philosophy has became more or less a standard: Progressive enhancement.

Progressive enhancement: Mobile first!

Where graceful degradation was all about building the full layout first and making it usable on mobile devices, progressive enhancement turns the order around and builds from another perspective. A designer building with the progressive enhancement philosophy starts with creating the design and layout for small-screen devices and, once the mobile-friendly version is complete, moves on to adding more advanced layouts and design elements that are displayed on devices with higher resolutions and bigger screens. This has many positive effects, and it can be done in multiple ways.

Most methods can be summed up unde the term “Responsive design”, where clever use of CSS3 media-queries makes is possible to automatically display a set of extra CSS if a number of conditions is met. Responsive designs scale down if you reduce the width of your web browser, most often by switching to a simpler layout that is better suited for small-screen devices. In more advanced designs, there could be several layouts included – one for each pre-defined screen width. I’ll write more about screen widths and how to detect them and serve the proper CSS based on screen width in the next part of this series.

Erase and rewind…

Progressive enhancement and responsive design are still fairly new concepts to me, I have only experimented with it for a couple of months. But I can tell for sure that I will be adopting the progressive enhancement philosophy with all my heart for future releases. I have studied lots of great website templates, WordPress themes and live websites to get an idea of hot I could best apply this design process to my work. And my spontaneous reaction is that “Mobile first!” makes a lot of sense, and that this is an inspiring way to work.

In the next part: An example of how it can be done…

I am currently working on the next major update for andreasviklund.com. As with the current version of the site, it will be a site based on WordPress. But rather than building the full layout in the way I have done in the past, I started with getting the basic features and functionality in place, even before I wrote any CSS. I will describe my workflow in the next post of this series, and look back at older templates to see if they can be re-modeled using Progressive enhancement.

Part 2 will be published in a few days, stay tuned! And if you have any comments, questions or suggestions for what I should write about, don’t hesitate to post a comment to this entry.

graceful degradation, mobile, progressive enhancement, tutorials