Progressive enhancement tricks

Question

There's a real art to designing a website that works for everyone, and Progressive Enhancement is practically a mantra to me...

So I'm wondering, what are some of the best tricks you've used for making websites work for everyone regardless of browser, OS, javascript, flash, screen resolution, disabled user accessibility, etc.?

(I know lots about javascript and browser tricks, but will admit to being clueless about flash, etc.)

EDIT: I'm not really talking about the 1% of sites that are RIAs that simply cannot function without javascript or flash. I'm not asking how to write Google Docs without js. I'd like to know what people do for sites that can do cool things but don't actually need to.

I'll offer a couple of my own as an answer...

Answer 1

I try to avoid mantras, except the mantra that the world is a messy place.

I think a lot of desktop functionality will be replaced by web functionality, and it's going to be a tricky transition that will end up with real apps in the browser. Real apps means JavaScript or Flash or Silverlight, or Java or C# or Objective-J compiled into JavaScript.

To me the only trick is identifying the people and the browsers who can't usefully use the apps and providing them with some alternative content.

And that includes detecting mobile and providing appropriate content. There are many websites that just fall to pieces on the iPhone because they are so Flash-heavy and dependent on wide computer monitors.

I do not think it's OK to require JavaScript for a website that's a website, but I think it's OK for a web that's an app. I do not think it's OK to serve only 960px wide pages. I do not think it's ok to serve videos in Flash format only.

Answer 2

Check your stats (or install Google Analytics if you don't have stats) and determine where your users are going and what they are actually doing.

e.g.

1.) Do your users constantly use search because they can't find something? if so maybe you can make the search work better?

2.) Does your 404 page provide some quick options to search for related terms or try and "guess" what they were looking for?

3.) Does your site have a sitemap that provides quick access to meaningful parts of your site?

4.) If all else fails, does the user have an easy means to contact you/technical support to help them find what they need?

5.) Not sure if you "sell" something on your site, but similar to when you reach the checkout at any major bricks n morter retailer... they ask you if you found everything you were looking for today. Consider providing an option where users can make suggestions... maybe you have an un-tapped market waiting to be conquered.

6.) On usability, be sure to surf your site in IE (6,7,8), Safari, etc. and make sure it works everywhere you care about.

7.) There's a great book called "Don't make me think" which is a great resource on realistic usability. If you haven't read it already... go grab a copy.

In addition, ensure all the other little things are taken care of... e.g. you make good use of caching (JS, CSS, Images)

Answer 3

Some of the nifty tricks I use to work with ajax-based sites:

1) Write the whole page and all links using normal a tags that will go to the right page with javascript disabled, then "hijax" them based on something like "rel=external".

2) Add noscript tags with alternative content anyplace where javascript would otherwise insert dynamic content.

3) Hide elements that javascript will control at DOM load with javascript instead of hiding them in the stylesheet and later showing them with javascript since the user would never get to see them if they have javascript turned off.

Answer 4

Progressive Enhancement is not complicated.

Consider the three main concerns:

• Content (HTML)
• Presentation (CSS)
• Behaviour (JS)

You start with the content and work your way through the concerns making sure that each new concern does not impede the previous one or try to mimic another concern; JavaScript shouldn't be generating content; CSS shouldn't be handling behaviour; HTML shouldn't be handling presentation etc. etc.

Answer 5

Normally what I do is write the entire website without any javascript. Once this is functional, you can "mark it up".

That said, there are some good starting blocks:

The PRG pattern is usually essential to good accessibility.

You want to ensure that there is a jumplink-enabled menu near the start of your HTML. If you are unsure, try running your website under links, or a similar text or speech based browser. If you get annoyed, so will your accessible users.

Ensure that you apply alt tags to your images only when they are meaningful. It is legit to give an image alt="" when it is only for design purposes. Similarly, setting title="" will satisfy your Firefox users desire for hover tooltips without annoying your accessible users.

Hope these simple tips help! Accessibility is everyone's responsibility!

Answer 6

ok, when it comes to the web-site type application, the best is, to always support a multitude of formats, in a RESTful way ... HTML, XML, JSON, RSS, Atom (where it makes sense) and why not others ... to do so, you need a clean MVC architecture on the server ... well, it does not need to be MVC, but let's say, the rendering layer should be dumb as bread, and a well written business logic running underneath ... your frontend controller should choose the right format to return in response to a request and there you go ... your whole business logic to retrieve/update data, make pagination, etc. is implemented once, and then you just render it into an HTML template, or convert it into JSON, or do whatever ...

now an idea would be, to make one view implementation, that will return rock-solid, semantic and plain HTML ... and make one, that'll heavily use javascript ... make them accessible under different paths, and make the javascript uncrawlable ... put one line of javascript at the beginning of your main HTML-template, that will cause a redirect to the javascript version of that site ... you can do the same thing for flash as well ... etc. ... then, in the "dirty" version of the apps, you can do really anything, you like ... load templates per HTTP, and then the data in JSON, and do the rendering on the client, creating a persistent stateful clientside javascript app ... why not?

i personally think, it is better, than starting with nice and clear HTML, and than stuffing in tons of javascript, that won't even work for all users ...

Answer 7

Try to provide fallback content when using plugins or other content that can be difficult to make accessible. Putting video on the page, for instance. If you were to go the HTML5 way:

<video>
    <source src="video.ogv" type="video/ogg" /><!-- OGG for Mozilla/Opera -->
    <source src="video.mp4" type="video/mp4" /><!-- h.264 for Apple/Google -->
    <object><!-- Fall back to Flash/h.264 for older browsers -->
            <!-- And in the event the UA can't handle any of those, all you can do is provide a link to the media -->
            <p><a href="video.ogv">Download the video</a>.</p>
    </object>
</video>

[Pseudocode, but you get the idea]

For a more comprehensive solution to that particular problem, check out Kroc Camen's Video for everybody.