Whoa! JQuery!

Filed under: Client-Side Scripting, Coding — Rosalind Wills on November 30, 2009 @ 3:03 am

So I’ve spent the last three or four days sporadically making my way through the awesome ThemeForest.net tutorial series, JQuery for Absolute Beginners, which I highly recommend to everyone in the entire world. It’s actually been rather hard for me to find a “beginner” JQuery tutorial that actually seemed willing to move step by step through the process; by the end of this fourteen-part series I felt a little less totally baffled by what can be at times a pretty overwhelmingly complex library. Starting from the very beginning with downloading the library for the first time, Jeffrey Way walks viewers through some simple animations, selector and style manipulation, and even spends a little bit of time on using JQuery to work with PHP/MySQL. All in all a great place to start if you’re looking for a jumping-off point.

I’m rapidly coming to the conclusion that learning web design is a series of moments of suddenly dawning understanding, “Oh, so *that’s* how they did that.” As I am still in the early stages of really sinking my teeth into client-side scripting, it’s really kind of satisfying to see it actually coalescing into something understandable. Animations, sliding panels, showing and hiding certain things; this sort of scripting isn’t the meat of of the design, really, but it’s the sprinkles on top (if you’ll allow me to mix my metaphors horribly), the little dashes of flavor added

I’ve recently been asked to work on a project in which the client is highly enthused about some JQuery effects they’ve found about, so chances are I’ll be doing a lot more work on this in the coming weeks — no doubt learning when *not* to use it as much as when to use it. So I’ll probably be dropping some lines here and there about that as I start moving through the process, passing along any neat tricks as I find them.

Anyone out there have good stories or tips to pass on about JQuery, or client-side stuff in general? I’d love to hear comments!


Enhancement and Degradation

Filed under: Design — Rosalind Wills on November 19, 2009 @ 5:55 pm

With HTML5 and CSS3 both starting to poke their heads out, there’s been a lot of talk lately about the phrases “graceful degradation” and “progressive enhancement.” Depending on who you talk to, these concepts can be thought of as mortal enemies or partners in the constant effort to deal with the varying abilities of the browsers currently out on the market.

I’ll be honest, I sometimes have some difficulty getting my head around the difference between the two ideas, so it kind of surprises me that they are often referred to as conflicting policies.

Graceful degradation is a “top-down” approach — the designer creates their site with as much tricked-out JQuery and CSS3 and HTML5 as they want, and then works backwards to fix all the things that don’t work in older browsers (I’ll pause for a moment while everyone remembers two-o’clock-in-the-morning IE6 scream sessions). The idea is that people with older browsers may see things slightly differently but will generally have the same experience.

Progressive enhancement, conversely, is a “bottom-up” approach. Progressively enhanced sites start with a clearly delineated HTML framework designed to be viewable and comprehensible in all browsers, even those with JavaScript or CSS disabled. While it’s been a long time since I thought about the web *without* CSS involved — and looking at my own sites with CSS disabled always gives me a pang of sadness — it’s still something that needs to be taken into account, and this ensures that the information is still accessible. Once that has been taken care of, the site is then tricked out with further behavioral and stylistic additions which are viewable by those browsers which support them, but do not interfere with the information for those which do not. Progressive enhancement ensures that all of the important information which the site contains will still get across, but that the user experience may be highly different depending on how recent their browser is.

Generally (or at least in what I’ve read on the subject) these are presented as opposing viewpoints (see A List Apart’s excellent article on the subject), but the fact is I’d imagine most developers end up doing a combination of both in actual practice. For my own part, the “content-first” mantra of progressive enhancement seems to be almost common-sense; the purpose of web design is, after all, in the long run, to get across a message, and all the art and magpie-shiny we can stick in is really just window dressing.

However, once we have progressively enhanced the site up, we often find that we have to work backwards to ensure that even if older browsers look *different*, they still look *good* (for a given value of “good,” of course — chances are you will not be equally satisfied with all browsers no matter how hard you work, just by virtue of their different display capabilities). Even someone overtly committed to progressive enhancement will still end up following this latter path in the end, at least to some small degree.

I would say there’s no loss involved in taking the best from both outlooks on design; the emphasis on content which is at the heart both of progressive enhancement and web design as a whole, and the determination to provide a usable experience for all which seems to be at the heart of graceful degradation.