Topic: Progressive Enhancement

What does your CSS Swiss Army knife look like?

Brian Dillard, Monday, September 22, 2008 @ 2:15 pm

CSS 2.1 is more like a Swiss Army knife than a fully stocked toolbox. We can accomplish a lot, but we have to get creative with the standard attachments. Floats, relative positioning, the box model - each tool must performs double or triple duty because they're the only ones we've got.

When we do discover a clever way to accomplish a common task using these limited tools, we're likely to employ that technique over and over. I'm not talking about CSS frameworks here; those help out more at the macro level. I'm talking about repeatable techniques that can be applied at the micro level. When done right, these simple techniques can feel like entirely new Swiss Army attachments rather than intelligent application of existing blades.

Whenever I start out on a new client project, I start off with the following plug-and-play components:

Continue reading »

• Digg
• Reddit
• del.icio.us

Comments (4)

Software Development

Progressive Enhancement with Prototype and Custom HTML Attributes

Anthony Caliendo, Friday, July 11, 2008 @ 6:19 pm

One of the nifty things progressive enhancement can be used for is to allow you to markup your document in a way which allows behaviors to be added to it automatically. Most commonly, this is done by specifying a class name on those elements that you want to enhance. However, this approach does not let you easily pass additional information such as parameters to your enhancement code.

An approach to this problem is to use HTML attributes to mark elements, and Prototype makes this technique easy to implement and work across browsers.

Continue reading »

• Digg
• Reddit
• del.icio.us

Comments (2)

Software Development

Selling colleagues on progressive enhancement

Brian Dillard, Monday, June 23, 2008 @ 5:14 pm

Achieving progressive enhancement at the view layer takes a lot of coordinated effort between server- and client-side developers. A lone UI developer can't make it happen without assistance and buy-in from the rest of the team. I'm not talking about selling the client or the business team. I'm talking about selling one's fellow developers.

I used to work for a giant company (Orbitz) with a large team of front-end developers and total organizational buy-in about accessibility and web standards. It took Orbitz years to get there, but once it did, progressive enhancement was the gospel.
Continue reading »

• Digg
• Reddit
• del.icio.us

Comments (1)

Software Development

jRails: Ruby on Rails with the Prototype guts ripped out

Brian Dillard, Wednesday, June 11, 2008 @ 3:21 pm

My esteemed colleague Noel Rappin sensibly advocates doing things the Rails way whenever possible. As a Rails noob, I should follow his advice. But as a dedicated user interface developer, I'm already finding that many of the best practices of my discipline take extra steps to enforce in Rails. Case in point: The ability to write unobtrusive JavaScript using my tool of choice, jQuery.

Continue reading »

• Digg
• Reddit
• del.icio.us

Comments (2)

Software Development

jQuery fade-in spoiler revealer: The failsafe, progressively enhanced version

Brian Dillard, Wednesday, April 16, 2008 @ 3:58 pm

***Spoiler Alert***

Don't read too much further if you haven't seen "Citizen Kane" and want to be surprised when you do.

I'm a big SF nerd and lover of teen-angst dramas. (That's why "Buffy the Vampire Slayer" is the Best Show Ever.) I love spoilers, but only when I've asked for them. When watching the entire run of "Dawson's Creek" on DVD years after it aired (don't ask), I accidentally spoiled Matt Laffey, the buddy who'd turned me on to the series, on how the big romantic triangle ended up in the final episode. I had no clue he had been saving Season 5 for a rainy day.

Since then, I have endeavored to include a ***SPOILERS*** alert in the subject line of any surprise-detroying emails - and to make liberal use of the return key to make sure the contents of such messages are below the fold in email clients with preview panes. This has made me a much more responsible citizen of fandom - though it hasn't lessened my outrage when entertainment websites post spoilers in their headlines or intro paragraphs without warning me and my fellow geeks. (Sci fi blog io9, by the way, is pictured to illustrate the right way to do things.)

Hats off, then, to Chris Coyier of tutorial site CSS-Tricks for his recent post on using jQuery to create a Fade-in Spoiler Revealer for use on websites. My only reservation about Coyier's technique was its reliance on JavaScript, and only JavaScript, to hide spoiler-laden content. With RSS and mobile browsing on the rise, lots of people read content in user-agents without JavaScript support. Shouldn't we try to protect them, too? I commented to this effect on the original article, then realized that I should just write the code myself as proof of concept.

Continue reading »

• Digg
• Reddit
• del.icio.us

Comments (5)

Software Development

jQuery Form and jQuery UI Tabs: Two great tastes that taste great together

Brian Dillard, Tuesday, March 25, 2008 @ 3:46 pm

I spent last week holed up writing part 4 of Ajax Overhaul, my series of articles for IBM developerWorks. Aimed squarely at Ajax beginners, the series shows how to progressively enhance Web 1.0 sites with jQuery and Ajax. Each installment starts with the pre-Ajax version of an example e-commerce application and takes readers through the steps of retrofitting it to improve and modernize the user experience. The tagline for this installment is "Streamline multi-step processes with tabs and Ajax forms," a topic that allowed me to employ two of my favorite plug-ins for the jQuery open-source Ajax toolkit:

• jQuery Form, which gives jQuery several methods for serializing form data and submitting the results via Ajax.
• jQuery UI Tabs, which turns a series of divs and unordered lists into a tabbed interface.

I feel like I've run on and on about my enthusiasm for jQuery on this site, but I can't help it. One of the cool thing about its plugin ecosystem is the ease with which you can cross-pollinate a couple of plugins to create novel effects. In this case, I wanted to take a series of web forms - the checkout process for my example shopping site - and turn them into a single-page, tabbed interface in which each tab represented one step of the process. The biggest additional requirement was progressive enhancement; with JavaScript absent or disabled, the checkout process has to work like it did before I retrofitted it. All it took to accomplish these goals was a judicious mix of my two plugins.

Continue reading »

• Digg
• Reddit
• del.icio.us

Comments (8)

Software Development

Pathfinder website relaunch: Simple tools for simple problems

Brian Dillard, Monday, March 24, 2008 @ 5:07 pm

At long last, Pathfinder's new website launched on Friday. To see the results of all my fiddling with Radiant CMS, point your browser at www.pathf.com.

There's actually no Ajax and very little DOM scripting involved in our first iteration. Just a little jQuery to progressively enhance some links. Our strategy in redeveloping the website quickly and iteratively was to use simple tools for simple problems. jQuery fits the bill perfectly. Eventually we hope to show off our Ajax chops on the Showcase section of the site. In the meantime, we got a new site up and running in two months with part-time commitments from a team of five - and that includes our client, the CEO. Result!

An in-depth look at our use of jQuery and why we dig it after the jump.

Continue reading »

• Digg
• Reddit
• del.icio.us

Comments (0)

Software Development

jQuery UI in action: Thumbs up on tabs, thumbs sideways on themes

Brian Dillard, Tuesday, February 19, 2008 @ 4:08 pm

The first two installments haven't even been published yet, but I spent most of last week hammering out the third entry in the series I'm writing for IBM developerWorks. The first two installments tackled things like modal dialogs, tooltips and lightboxes. But for the latest piece, I delved a little deeper into full-scale Ajax by showing readers how to load page fragments and images on the fly into tabbed interfaces and image carousels. As before, I enjoyed writing for a more beginner/intermediate audience. And I especially enjoyed the chance to play with jQuery and all of its shiny new plug-ins.

Inspired, perhaps, by the success of YUI and Ext, all the big JavaScript frameworks are releasing companion libraries of packaged, themable UI widgets. jQuery is no exception. My latest IBM piece uses jQuery UI Tabs, one of many components in the new jQuery UI framework. UI Tabs began its life as a standalone plug-in. With the launch of jQuery UI, it has become more tightly integrated with the other components. Ultimately, that's the lure of an umbrella concept such as jQuery UI: fewer far-flung extensions of unknown provenance; more plug-and-play efficiency.

Continue reading »

• Digg
• Reddit
• del.icio.us

Comments (2)

Software Development