Progressive enhancement is a layered approach to interface development that helps ensure all users can navigate and read the content on a website regardless of browser or device limitations.— Aarron Walter, Building Findable Websites

The key to the success of progressive enhancement lies in the way you create and keep the structure, presentation, and behavior separate from one another.

If you keep the structure (HTML), presentation (CSS), and behavior (JavaScript) separate when you build websites, content remains accessible to everyone including search engine spiders.

You want to think of progressive enhancement as layering a cake. If you started with the frosting and worked your way back, you’d end up with a pretty terrible cake — most likely. You instead would want to start with the cake ingredients, then the baking, and finally the frosting on top. The same is true of progressive enhancement.

The Ingredients (Structure)

Begin with a semantically meaningful HTML file that communicates the information hierarchy of your page. By using heading, strong emphasis, emphasis, lists, and other semantic tags to mark up your document you’ll achieve a much better foundation from which to build upon when creating your cake — ahem — website.

Baking (Presentation)

Next, you’ll be adding the presentation layer using external CSS (Cascading Style Sheets) files that create the design of the document without altering the structure (HTML). Using CSS to control the presentation of your documents will make modifying them much less time-consuming. Trust me, you wouldn’t want to have to edit all the font tags of a hundred page website just to change the color. Ding! Cooking timer just went off.

The Frosting on Top (Behavior)

The final layer of our website cake is the behavior layer using JavaScript. This layer will enhance the interactions of the page. The JavaScript is also kept external in a separate file, and can easily take control of elements in the page without mixing in with the HTML structure.

Conclusion

Building your websites with this additive approach keeps them functional during each step. With CSS and JavaScript disabled, the user can still see all of the content and understand the information within as it’s communicated through your semantic markup. When CSS is enabled, the user is presented with an interface design that enhanced the look of the site. And finally, when JavaScript is enabled, the interactions add an extra bit of flair to the overall user experience.

When search engines encounter a site built using progressive enhancement they’ll be able to index all of the content because JavaScript will no longer be a roadblock. By making the presentation and behavior layers external, you also increase the speed with which search engine spiders can index your pages. Keeping everything separate improves overall maintenance as well.

Page-by-page updates of a site design — including layout, colors, and fonts — is a time-consuming and error-prone process.

As customers visit your website, you can learn something about what they like and what they don’t like in terms of content and look and feel. You can also learn what works and what doesn’t work in terms of navigation. You might glean this feedback from informal conversations with customers, from server logs indicating that people don’t click on certain links, or from more formal usability and market research. But once you have some information about what could be improved, fixing it on your site can be daunting unless you’ve planned ahead.

If you’ve got design problems to fix on all your pages, it will be hard to justify the changes if you have to edit every single page. It takes time to open, edit, and save every file back to the server; then test every file, and possible open and edit it again if there continues to be problems.

You can avoid the problem of mixed content and presentation and make it easy to modify the presentation of all of your web pages by using cascading style sheets (CSS). Although it’s not difficult to make changes to HTML pages without CSS, it will often become problematic if you need to change whole sections of a page or several pages at once.

CSS offers a way of separating presentation from content

With CSS, you specify all of your content in the standard HTML files, and specify how that content should be presented in a CSS file.

Below is an example of what I mean.

HTML:
<html>
<head>
  <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
 
<h2>Example heading</h2>
<p>Some content would go here.</p>
 
</html>

Only the content is specified in this HTML file. All the style information is contained in a separate style sheet (style.css).

CSS (style.css):
h2 {
     text-align: left;
     color: #333;
     font-family: Georgia, "Times New Roman", serif;
     font-style: italic;
     font-size: 18px;
}
p {
     text-align: left;
     color: #777;
     font-family: Verdana, Arial, sans-serif;
     font-style: normal;
     font-size: 11px;
}

With a CSS file like this it would be possible to make whole sitewide changes to the style of the <h2> and <p> tags on every page of the site with the update of only one file.

Define a standard style sheet as part of your sitewide page template

Style sheets can be used as part of your page templates to create flexible and attractive web pages. You might define one default style sheet that all of your pages will use — one that defines the basic look and feel or your site.

Things that can benefit from the use of style sheets include
Flexible grid layouts
Navigation bars
Tab rows
And text links

Define a separate style sheet for printable pages

It is a good idea to have a separate style sheet for creating printable pages. This style sheet can be a much simpler version of your page template style sheet because printed web pages will not display navigation elements such as tabs and navigation bars, extra content modules, such as the sidebar or external links, or advertising.

To establish a specific print style sheet you’ll need to define the following just below the default style sheet in the HTML file.

<link rel="stylesheet" href="print.css" type="text/css" media="print" />

This will ensure that the printing functions will use the styles defined in the print.css file instead of the default style sheet. The technique can be very useful when creating ‘newspaper’ style articles that you intend for your visitors to print for future reference.

What about a mobile style sheet? You can do that too.

If you intend on having your content viewable by mobile phone users, then it’s a good idea to setup a separate mobile style sheet for them. This ensures that your content and web site represent the best possible image they can to your viewers. Someone would hate to navigate to your site only to find out that you haven’t taken the time to design an experience around the way they like to browse your site. It might make them feel like they are less important. This is just not the case anymore with more and more users beginning to really use their smart phones for things like browsing news sites and even purchasing products online. Sites like Amazon and Google have jumped on this trend and it can only be assumed that more and more companies will join in.

Here’s an example of how you might define a mobile style sheet:
<link rel="stylesheet" href="mobile.css" type="text/css" media="handheld" />

For more information about creating mobile CSS, go to w3.org/TR/css-mobile
A List Apart is also a great resource for articles on the topic of CSS.

Download and Install
Download the latest release »

1. Upload the file bookdisplay.php to your /wp-content/plugins/ directory
2. Activate the plugin through the ‘Plugins’ menu in WordPress

Usage

1. Open management page [Tools] – [Current Book].
2. Edit “Book Title” field, “Book Link”, “Image Path”* and “Author” fields
3. Click “Update options”
4. Add <?php current_book(); ?> wherever you’d like the information to be displayed in your templates.
5. That’s it. Simple.

Recent Updates
* Added the feature to show a thumbnail image of the book you’re reading.

Need help?
If you need help installing this plugin or customizing the display of the book title and author, please feel free to contact me