In an recent project I was faced with a pretty standard need to emphasis or somehow offset a certain block of content when it is hovered over. My usual goto for that is a subtle change in background color but I wanted to add something extra.

This particular site is using a lot of CSS3 as progressive enhancements so I decided to utilize another one for this. I used the CSS transfrom: scale() rule, only scaling to 1.1 times it’s natural size which gave a subtle but attractive cue on hover. I then coupled it with a CSS transition over .2 seconds to take some of the edge off the scale. It turned out pretty nice I think. Any thoughts?

view the demo

Most professions, particularly highly skilled ones, require constant and continuing education to stay relevant. This is especially true for developers of the web. We simply cannot wait for (rightly) slow moving consortiums to finalize new versions of specs. Nor can we wait for all major browsers to fully support them.

If you have not already adopted the progressive enhancement pattern of design and development, you are making far more work for yourself than you need to, both in initial development and in maintenance. This also perfectly sets you up for using HTML5, CSS3 and other bleeding edge technologies without fear of “breaking” anything.

Here’s a short list of HTML5 “things” you should be doing right now in all your projects.

1. <DOCTYPE html>

   I can’t think of any reason not to use the new HTML5 doctype that isn’t easily solved by just a little planning.Of course, the biggest concern for most people is going to be IE. The thing to keep in mind is that when using , IE is thrown into quirks mode. Thats it, there’s plenty of documentation on the things to look out for in quirks mode, and you should already know most of them if you support anything less than IE 8.

2. The data- attribute

   This one’s a gem and it’s a standard attribute for all elements! You can use it anywhere! Need to store some meta information about an element for javascript to reference? use the custom “data-” attribute. They can be named anything you want, just prepend “data-” to the beginning of the attribute name.

   Remember the inherent quality of HTML — that it just ignores anything it doesn’t understand. It a perfect graceful degradation. The use of the “data=” attribute is so stable, it’s use has been incorporated into the jQuery source since v1.4. jQuery has always been able to store custom information associated with an element using the data() method, but now that method also creates a “data-” attribute on the element(s) in question. Try it out for yourself. Add data to an element in jQuery and inspect that element in Webkit’s developer tools or Firebug.

   $('#Luke').data('father', 'Darth Vader');

   yeilds

   <section id="Luke" data-father="Darth Vader">.

   How rad is that?!

3. <b>, <i>, <small>

   Oh man, I hated seeing these elements anywhere prior to HTML5.

   Yes, these are old elements — so you know they won’t break anything — but the new definitions for them are pretty neat. They are actually semantic, they provide meaning (or lack there of in the case of
   <b>).

   <b>
   indicates that the text does not convey any extra importance, despite any style that may or may not be applied to it.

   The b element represents a span of text to be stylistically offset from the normal prose without conveying any extra importance, such as key words in a document abstract, product names in a review, or other spans of text whose typical typographic presentation is boldened.

   <i>
   indicates a different voice or mood for the text. Maybe it’s something a character mutters under their breath, perhaps it’s meant to indicate overt sarcasm. In any case, it doesn’t just mean “italics” though it should be favored over <em> for things that are traditionally rendered in italics such as some proper names.

   The i element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, a thought, a ship name, or some other prose whose typical typographic presentation is italicized.

   I like to think of <small>as being synonymous with what a <legal> might mean. It’s for those things that are necessary, but of less immediate importance or relevance.

4. <figure> and <figcaption>

   This is one of the things that I’ve been somewhat suprised to find how much I use it now. I use the
   <figure> and <figcaption>
   all over my site. When I want to bring explanatory text to an image on hover, or even for tooltips. This has been a really great tool to use.

   The only caveat about this one is that for older browsers, you can’t rely on any default styling (Really? are you still doing that? Here’s a good opportunity to get out of that bad habit). Especially make sure to specify the display:block; style. For IE, you will also need to either use the Modernizr script or create the elements via javascript so the browser will recognize them. If you are uncomfortable relying on javascript for necessary structural elements, then perhaps this suggestion isn’t for you on this project. But put it in you back pocket, because it’s a great little addition.

These are only a few very small things you can do right now. If you’ve already been utilizing HTML5 in your projects, let me know what some of your hang-ups or successes have been. Also, if you haven’t, why not? Where am I wrong?

Like many web developers, this has been drilled into me, not only by college professors, but industry leaders, peers and my own practices. All for good reason too. The form, or design of something is not the most important aspect of a thing. Good design, much like good editing in film, is judged by how much it isn’t noticed, at least by the everyday consumer. If design, whether good or bad, overpowers the the experience and interaction with the product, you’ve failed. Moving users through your site/software/building or whatever in an intuitive manner where they are able to complete their business with a minimal amount of friction, all the while having a pleasant experience throughout is the ultimate pursuit.

But the idea of form following function has sometimes led to a misunderstanding of the concept, particularly when such sites as craigslist.org and drudgereport.com are held up as “better” or more functional than more aesthetic sites because of their apparent lack of design. Their respective heavy traffic is enlisted as proof that this is so. This of course fails to ask the actual question as to whether this choice of design (and make no mistake that the sites’ structures are both designed) facilitates or hinders smooth movement through the site. The false logical conclusion derived from Mr. Sullivan’s observation is that all function and no form is ideal. It’s not an idea that is held by all, or even most people involved in building the web, but it comes up from time to time.

Some recent experiences, when added to the several others over the course of my education and career, have convinced me that after 115 years, it’s time to reevaluate and refine the words of Mr. Sullivan, which have generally been a very true and useful maxim in the web community.

To illustrate, I was recently involved in a project where new functionality to the application was paramount to anything else. Enough attention was paid to the design of the interface to make it technically functional, meaning that there was a set of procedures one could follow to perform any of the application’s many features, but being able to find them and execute them reasonably quickly was not of much concern. Repetitive tasks were not grouped together and navigation was inconsistent and disparate. Form indeed had followed function, such that the latter had lapped the former several times over.

This approach may have made the application technically functional, but not practically so. This led me to the conclusion that form is a part of function, not a separate element from it. As important as it is that a new feature passes a QA procedure, it is just as important whether a user can discover that new function naturally as they go about their normal process. Form is merely a higher level of function. It is the meta function.

Thus, my proposal for a new maxim: “Form ever completes Function.”

I’d love to hear any comments or revisions of this. Perhaps we will be able one day make this idea penetrate as far and deep as “Form Follows Function” has. My hope is that application managers and decision makers will devote at least as much time and resources toward the design and interface, as they have the underlying algorithms and methods behind the application. Maybe it will even reach across our field and inspire other areas as Mr. Sullivan assertion has. One can only hope.

As part of the roll-out strategy, it was determined that the product pages function as independent microsites until the remainder of the site was built out. Then internal site navigation would be added. Currently, these pages are still in the early roll-out form as individual microsites.

There were some limitations we had in that we had to work inside the confines of an outdated and incomplete CMS which we had neither the budget, nor the permission to dispose of. Ce la Vie!