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?

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.

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.

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.

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

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

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!

Never Ending WordPress Business Bundle – only $14!

Usability measures the level of a user’s experience and can be characterized by how easily a given task can be completed; whether it’s done with prior knowledge, or by having the user learn a new way to interact. I think Jakob Nielson probably explained it best when he said:

“Usability is a quality attribute that assesses how easy user interfaces are to use. The word “usability” also refers to methods for improving ease–of–use during the design process.”

In this article I hope to give you some form of a usability checklist, covering topics from form design to simple navigation tips that you can apply to any Web project.

1. Creating active navigation

Letting the user know what section of the site they’re in, or what category they’re navigating through can be give a huge usability boost to any site. Active navigation is one of those usability concepts that are almost automatic at this point. And we all have our own way of creating it.

The ideal situation for creating active navigation is to do it server-side, because it massively cuts down on the amount of HTML and CSS needed. If generating an active state server-side isn’t an option, manipulating your body element to style each navigation element directly is also a fine choice.

As a third option, you can easily create active navigation with JavaScript.

Your active navigation state should always be different from your hover state.

2. Clickable labels & buttons

When you take the time to mark up a form properly a user can click a label to activate the associated form element and there’s a really easy way to show it off. This is a great piece of functionality built right into HTML. Unfortunately, very few users know about this natural gem of user interface.

Letting the user know a label is clickable only takes a line or two of CSS (depending on how you write it) to change the cursor from the default text insert to a more clickable and friendly pointer.

By now everyone’s well aware that submit buttons are clickable. I’ve always thought it was weird that this – obviously clickable – element doesn’t use the same cursor as a link. So I like to apply this bit of CSS to buttons as well:

label, button, input[type="submit"]{cursor:pointer;}

3. Linking your logo

Not linking a logo to your site’s home page is one of the more frustrating things I’ve come across on the Web. I can’t understand why someone wouldn’t so this. It’s so easy, and by now, it’s safe to say, users expect it.

Linking your logo is so common nowadays that many sites are finding that having a link labeled “Home” isn’t useful anymore, as users are just clicking the logo to navigate to the home page.

Sites such as Facebook, track user clicks by adding the “ref” parameter to each navigational element. Below is an example of how Facebook links their logo:

4. Increasing the hit area on a link

About a year ago, Ryan Singer from 37Signals wrote an article about how they padded link targets for better mousing in Basecamp. This is another small usability trick that you can use by simply adding some padding around links to make the clickable area larger.

This is a great addition to any site and it can help prevent misclicking on a link, which can often be a little frustrating. It also helps a lot in mobile Web design, where users click with their fingers and really need that extra large hit area on a link.

5. Adding focus to form fields

Applying focus to a form field is a growing trend in UI design. It lets the user know that what they just did caused something to happen (did that make sense?). It’s a quick and easy way to pass useful, unobtrusive information onto the user. Saying something like: “Hey! You just clicked here.” Can be very useful.

6. Providing a useful 404 page

Making the user feel comfortable is very important and displaying a big Apache error message on the screen isn’t the best way to accomplish that. A useful 404 page can go a long way and it doesn’t have to contain the numbers “4″ or “0″, as they aren’t very helpful to anyone other than the developer. Besides this, no one really needs to know the error code for anything that happens behind the scenes. Users just want a site to work the way they expect it to.

On the off chance a user does find themself on a “Page not found”, it’s much more helpful to lead them somewhere where they might be able to locate the information they’re looking for, by providing some apologetic text, a search box, or suggest some possible destinations. But try not to put the blame on the user for landing on a wrong URL.

Blogussion wrote a great article about creating an informative 404 page that lists some very good tips and even some code for those WordPress users among us.

7. Using language to create a casual environment

Writing on the Web is a big topic right now. It’s like we’re going down some giant checklist dealing with issues: HTML, CSS, progressive enhancement, accessibility, writing for the Web, and the all encompassing “Web standards”.

We’re hearing a lot about writing on the Web and it seems to keep changing. From the days of Steve Krug telling us to cut our content in half to using bulleted lists wherever possible.

Now we’re all supposed to write like we’re talking to a friend and it all goes back to making the user feel like they’re in a comfortable environment. When you keep the copy on your site casual, it makes a user feel less stressed, so even when they do encounter something confusing they can still feel a sense of relaxation and informality as they search for their answer.

8. Applying line height for readability

Line height is one of the things that can be directly inherited from physical media, such as books and newspapers. These sources have been around for hundreds of years and have had plenty of time to master readability and line height. So the next time you’re stuck on this, don’t be afraid to crack open a textbook and check it out.

This is an aspect of Web design that can be easily overlooked and easily abused. I usually start off with a line height of about 1.4em and adjust it from there, based on the design and content.

9. Utilizing white space to group elements

Grouping items together is one of the easiest ways to show association. You can do it with images, borders, or just plain old white space. Using white space to group elements creates natural associations between related elements that, even when read at a glance, can be easily picked up by the user.

As the eye scans a page, a user will naturally read the headings first. This happens a lot with top 10 lists (::ahem::). Hopefully, the content is interesting enough to grab some attention and entice the user to read a little more closely. You push users in the right direction by designing your content in a way so that things that are related actually look like they’re related.

10. Being accessible

By being accessible, I don’t mean Section 508 and ADA compliance. Accessibility, in this case, means being there for your users when they have a problem (responsiveness).

If usability is all about trying to make sure your users don’t get frustrated and leave, responsiveness is your last line of defense against losing that user to one of the millions of competitors who are a short click away.

Ultimately, you can do all the testing that you want and follow all of the usability advice that you can get your hands on, but everybody is different. Users will get confused and lost and eventually need some help. The amount of time you leave a user confused can be the difference between someone who will come back and someone who won’t.

When talking about accessibility, many people default to a conversation about the visually impaired, but accessibility extends far beyond that. For example, you have to make your web site accessible to users with bandwidth restrictions (dial-up connections, cell service, slow networks) and older browsers (some companies won’t let employees upgrade browsers).

If we do our best to make our sites as accessible as possible and respond quickly to questions we can create an overall experience that will leave the user constantly wanting more.

Customer service matters… even on a blog.

Written exclusively for WDD by Tim Wright, web designer/developer and blogger. You can find more of his writing at CSSKarma or follow Tim on Twitter.

Do you follow all these principles on your websites? How can we create a better and more usable web? We’d love to hear your comments…

Never Ending WordPress Business Bundle – only $14!

Clean markup and building with web standards not only helps you do this, but will save you both time and money in the long run.

As the web expands, so the technologies that it uses grow with it. While HTML has been around for a long time, it has acquired quite a few sidekicks along the way.

First Javascript, then CSS, XML and later AJAX. Wide adoption of HTML 5 is just around the corner, with Firefox, Safari, Opera and Chrome already enjoying nearly full HTML 5 support (the slow kid on the block, Internet Explorer, is lagging behind as usual).

In this article, we’ll review the basics of web standards, what they are, what they mean to you, and some important tips to help you deal with this important and often neglected issue.

What Does it Mean to Have “Clean” Markup?

Simply put, it means free of clutter, standards-compliant, and using the tags and structures of each language for their intended purpose.

Clutter-free HTML makes sparse use of tags, eliminates the extraneous and accomplishes its task with as little markup as necessary. It avoids needless attributes, such as inline CSS, and leaves each document structured and organized.

Likewise, clutter-free CSS should avoid repeating itself, take advantage of inheritance (remember, CSS stands for Cascading Style Sheet) and re-use classes whenever possible.

Standards-compliant means that your pages validate with the standards laid out by the W3C for HTML, CSS, and XML. It means using the free W3C validators to check for errors, correcting them and testing again until you’re as close to 100% valid as possible.

Why Should I Care? It Works, Isn’t That Enough?

Every project has an aggressive deadline and every client wants their site launched yesterday. So as web developers and designers we are under constant pressure to work faster and more efficiently.

It’s easy to fall into the trap of thinking fast must mean sloppy, and that clean, standards-compliant markup takes more time. It’s easy to just say “it works and that’s all that matters.”

Sure, it works… for now, for you. What about next year, or three years from now? What about new browsers? What about accessibility?

Do you really think that the major search engines will adhere to special, sloppy coding methods? They’re finicky, and if you are not standards compliant you’re kicking your search ranking in the face.

What about the next poor sap that has to edit these pages you’ve created? What happens if you get hit by a bus, quit to go backpacking in Alaska, or get abducted by aliens? Someone else has to pick up where you left off and he’ll be looking at your code, trying to make sense of it. Will it be easy, or will it give him a headache and make him curse your name?

Do it right the first time. This isn’t just some annoying, fatherly life-lesson. It will actually save you both time and money, and make those that follow you have an easier time of things.

You may think it’s faster to just drop in the inline CSS instead of properly adding a new class to your style sheet. And you may think it’s faster to toss in whatever HTML you can spit out without considering the overall document structure.

When it comes time to update that document later or redesign the whole site, you’ll spend much more time making up for sloppy code than you ever saved by rushing through it in the first place. When you create a new style sheet, those pesky inline styles you hastily added will come back to haunt you and you’ll spend hours hunting them down and stripping them out.

Extensibility, Accessibility, Translation and Future Proofing

Mobile browsing is growing like Godzilla on atomic-steroids. Instead of being relegated to the jet-setting Blackberry addicts from 5 years ago, today everyone is using their phone to surf the web.

Assistive technology -screen readers for the blind and alternate interface devices for the handicapped- is common, and you don’t want to lose a sale or alienate traffic just because you didn’t take that into account.

Your site is likely to be translated into a half-dozen languages as readers from around the world find your content. Thanks to the Internet Archive, Google’s cache and others, pages you publish today will be around for a long, long time even after they’ve been removed from your live site.

Clean markup and standards-compliance will go a long way to ensure your sites work in each of these scenarios.

Do’s and Don’ts:

• DO use tags as they are intended. For example: h1 is the first top-level element on the page, then h2, h3 and so on. There should only be one h1 tag per page.
• DO name your CSS classes and IDs using meaningful terms, and ask yourself if someone else will know what a class/ID does from its name alone. Which naming convention makes more sense: #box12 or #comment-footer?
• DO make good use of CSS inheritance. For example: if you set a font on a container, you don’t need to specify it again on every child element unless that child element needs to use a different font. This will keep your style sheets lean and quick to load.
• DO validate your HTML, CSS and XML and correct as many errors as possible. Pay attention to the warnings generated as well.
• DO double check WYSIWYG generated code and clean up as necessary. They’re notorious for spitting out bulky, bloated markup with loads of unnecessary, invalid junk.
• DON’T inject inline styles or extraneous tags and attributes just because you’re in a rush.
• DON’T settle for “it works.” Just because a page renders it doesn’t mean that the markup under the hood is standards-compliant, problem-free or search engine friendly.

Further Reading & Resources

• Designing With Web Standards: the infamous book by Jeffrey Zeldman
• W3C Validation Engines: XHTML Validator, CSS Validator
• W3C Tips for writing clean markup, among other things.
• Introduction to Web Accessibility
• Web Standards Project – information on web standards, upcoming trends and more resources.

Written exclusively for WDD by Jeff Couturier.

Do you follow web standards in your websites? Why or why not? Please share your comments with us.

Never Ending WordPress Business Bundle – only $14!

Doing development is something for those programming grunts, those code jockeys, those geeks.

Why should we enter the trenches of development when it’s so nice up here with the Photoshop brushes, afternoon tea, and MacPros? 

Because you’ll be a better designer for it.

Skeptical? Read on and discover 6 reasons why designers should code…

1. Better XHTML

I’ve worked with and known many designers who knew only the bare minimum needed to get their designs out of Photoshop and into a web format. Oftentimes they would make use of a software program or plugin like SiteGrinder. While these programs keep getting better and better at making compliant code, they still don’t match the human-produced variety.

Knowing how to write your own standards-compliant XHTML will make you a valuable addition to any web team (emphasis on the standards-compliant part). With all the fuss about PHP, ASP.NET, Ruby, and many other languages, people tend to forget that everything ends up being HTML in the end, because that’s what your browser has to have in order to render a page. The more you know about the medium you work in, the better you work in that medium.

2. Better SEO

And while we’re talking about standards-compliant code, we should mention SEO. This is a big buzzword, though not quite as much as it has been in the past. However, what this means is that SEO is becoming a much more commonplace idea of what a website should strive for, instead of just an added special feature for big business sites.

If you can learn to write your own code, you’re much closer to being able to list “SEO Compliant Designs” on your sheet of available services. That means you can charge more, and it’s another badge on your hat.

3. Better Accessibility

Better code and better SEO = better accessibility. Part of of the job of any designer is to present information in a clear and coherent manner, and on the web that means not solely in a visual manner. A shoddily-coded website can be a nightmare to navigate if you’re blind, or even if you’re using a mobile device.

Learning the ins and outs of developing code for accessibility not only allows you have that knowledge as part of your production skillset, but it will also help you to better understand the considerations you should take when designing for accessibility.

Accessibility is a mandate for all government websites, nearly all education sites, and businesses are starting to see the value in it as well. The more people you can reach via your site, the more chance you have of accomplishing your goal, whatever it may be. And that has to be reflected in any successful design.

4. Better Left Side

Being a right-brained creative is great, but giving your left side a workout can spur on creativity of a different nature. The motto at the bottom of the WordPress website is “Code Is Poetry”, and this is because translating a written language to something that can be visually seen is truly an art form.

Learning to write your own code opens up whole new avenues of expression. Developing your technical and analytical abilities can improve your information design, developing wireframes, and create a pathway to work with interaction design. And who knows, it may even improve your math skills!

5. Better Communication

It’s easy to get lost in the techno-jargon used by developers, simply because you may not have been exposed to the type of things they are discussing. Digging in and working with code yourself will allow you to become familiar with the terminology that is used when conversing about the construction of a site.

Being able to speak the lingo will help when you need to communicate with a developer or project manager about how a design should be implemented.

6. Better Design

You can only do so much knowing the fundamentals of design. Typography, color theory, composition, etc. are all fantastic and extremely important skills to know (and know well)…but eventually if you want to excel in your creativity, you must learn the tools of the trade. Painters learn about canvas types, paint compositions, and bristle qualities. Web design is no exception. Learn to code: you’ll be better for it.

Written exclusively for WDD by Ryan Burrell.

Are you a designer that codes? Should all designers learn how to code? Please share your comments below.

Never Ending WordPress Business Bundle – only $14!