View the Demo (best in Chrome or Safari)

This works on the iPad and iPhone as well using gestures, swipe left to right or right to left to change the item. This example uses Paul Bakus’ code as a base and building it out with lots of new tech.

Here is the step by step on how I built it.

Step 1: Create Perspective

To build the CSS 3D transform you have to first find your wrapping div and add -webkit-perspective: 500px; to it. For this I used the “bd2″ class wrapper.

.coverflow .bd2 {
   -webkit-perspective: 500px;
   margin: 0;
   height: 60%;
   border: none;
   overflow: hidden;
   width: 100%;
   position: relative;
}


The perspective gives the illusion of depth on the z axis.

Step 2: Apply the CSS 3D Transform
Then apply the CSS 3D transform rotation depending on the location of the image:
var webTransform = "rotateY("+(side === "right"? 55 : -55 )+"deg)";

When the transform is applied it uses the perspective to calculate how much movement is required. You can play with this by expanding and contracting the window to see how the browser deals with it. The perspective code is very important, your rotation won’t work without you defining it.

Step 3: Enhance the view with the reflection
To do the reflect was pretty simple. I used the -webkit-box-reflect with a transparent gradient so that it would fade the reflect out. Here is the code:

.coverflow .hproduct img {
   -webkit-box-reflect:
      below 0px
      -webkit-gradient(linear, left top, left bottom,
         from( transparent ), color-stop(0.5, transparent),
         to( rgba(50,50,50,0.7) )
}


You also have to make sure that your containing div is tall enough to pick up the reflect. I placed some webkit specific code in there because for other browser’s it doesn’t need to be as tall.

@media screen and (-webkit-min-device-pixel-ratio:0) {
   .hproducts .hproduct {
      height:225px;
   }
}


Note: All subsequent steps are extra enhancements to make the coverflow that much better.

Step 4: Allow for scaling
There are a few cool tricks I used to make this allow for scaling. By using multiple background attachments I was able to allow for the slider to scale as the window size changes. Here is the example:

.coverflow .slider {
   position: absolute;
   bottom: 5px;
   left:0;
   margin:0 10%;
   width: 80%;
   height: 19px;
   background: url(files/scrollbar-left.png) no-repeat top left,
            url(files/scrollbar-right.png) no-repeat top right,
            url(files/scrollbar-center.png) repeat-x;
}


I also put a width of 100% on the containing div to allow for it to scale.

Step 5: Capturing the touch gestures
I attempted to use jswipe for this to no avail. So, my solution was to attach a couple events and code this without the help of a plugin. The key to this is 3 events: touchstart, touchmove, touchend. Here is how I utilized these:

document.ontouchend = function() {
   //swipe left
   if( self.swipeLeft && self.swipe ) {
      self.moveTo(self.current-1);
      $("div.slider").slider("moveTo", self.current, null, true);               
   //swipe right
   } else if(self.swipe) {
      self.moveTo(self.current+1);
      $("div.slider").slider("moveTo", self.current, null, true);
   }            
}

document.ontouchstart = function(e) {
   self.startX = e.touches[0].pageX;
   self.swipe = false;
}


Basically this detects the range of your swipe and if it is from left to right large than 150 pixels it moves the images accordingly. The ontouchend can be replaced with any function to perform the needed action. The W3C has recently posted a link for touch events here: http://www.w3.org/TR/touch-events/

Step 6: Deal with all the other browsers
Believe it or not, not every browser is equal, so to build out this I used the philosophy of progressive enhancement.

So here are some samples based on what features you have:

If you have no JavaScript, you get something similar to this:

Running IE7, you get something like this:

Running FF, you get something like this:

Step 7: Rejoice! You made it.
There are a number of great techniques used for this all rolled into one. CSS -webkit-box-reflect, CSS RotateY, multiple background attachments, touchstart, touchmove, touchend, and browser compatibility handling. These are exciting new additions to browser technology. Browsers are evolving to make our tasks as designers and developers easier. It’s an exciting time to be a web developer.

For a QR iPhone Reader I use this one: http://itunes.apple.com/us/app/scan/id411206394?mt=8
But if you are looking for a QR reader that has more options, copy to clipboard etc, try: http://itunes.apple.com/us/app/qr-scanner/id377643590?mt=8

Poor User Experience
Autotrader, Amazon, Google, Zappos why have they all given up the landing page pop-up? It seems obvious doesn’t it? User experience. When a user lands on your site they have a very specific goal in mind. Every site is different, every site has its own set of goals, and its own set of needs that it can fulfill for the user. We know that for many inventory-driven sites, the user will go immediately to inventory and narrow inventory items into manageable chunks.  One user that lands on your site might be looking for the service phone number, while one user might be interested in the BMW 3-Series with the Sport Package. When a user lands on your site, you need to fulfill these needs as quickly as possible. You MUST organize what they see into manageable chunks of information (7 items or less if I had to put a number on it) so that they can get to where they are going with the least amount of resistance. This basic philosophy is what increases conversion and fulfills the overall goals of the site.  This has been proven time and time again.

When pop-ups are used on a landing page as an onLoad event, this throws all these fundamentals right out the window. When you take over the page, or pop-up a layer that forces the user to interact with whatever comes into the forefront you are not satisfying the users needs. It is merely a distraction for over 80% of the people that have a different goal in mind than what you are popping into their face. Yes, if you pop-up, say, a car special, into someone’s face, you will get more leads for that specific special, but at what cost? You will be passing up a much better and more important conversion when a user finds exactly what they are looking for. You are also going to lose a lot more people when they bounce.

Some Stats on Pop Ups and Bounce Rates
So here is the nitty gritty. In March (of 2010) I started tracking the amount of time it takes for users to close pop-ups across thousands of sites that we run at Dealer.com. The result? 7 months has shown that the most common time it takes to close the pop-up is 3 seconds. This is basically (with the load time included) the amount of time it takes for the user to find and click on the close button. We can see from this observation that we are creating a barrier to satisfying the users needs.

Recently I ran a test to prove another hypothesis. That the bounce rate would actually increase when adding a pop-up. I ran the a/b test over the period of a month and found the following:

Test: A/B pop-up
Bounce Rate without the pop up: 28.62%
Bounce Rate with pop up: 31.75%

So we can see that there was a 3.13% increase in the bounce rate while the pop-up was added.

Just Pop-Ups?
You might hear a lot, “well this implementation is different.”. Lots of other proposals occur around taking over the page with an interactive advertisement etc. Remember, these are pop-ups in disguise! In fact, they may be worse because it will take the user longer to find the close button! Take some time and think about the user experience and conversion. Apply the understanding of the stats and the arguments above to come to the right conclusion that benefits everyone.  A great replacement to the pop up is allowing for a promotional area on the site to feature the appropriate item of interest AND MAKE SURE IT LINKS TO SOMETHING.  That way if the user does like what they see, they can click and find more information, but they don’t have to click to close it to get to where they need to go.

Conclusion
Pop-Ups will get you more leads for a specific event at the cost of impacting other conversion areas and impacting the user experience. Do your best to help your client realize this before they make a mistake that will cost them money. As the web developer or project manager you want to make sure that you advise your client to make positive strides toward their online marketing presence.  Don’t be afraid to suggest alternative approaches such as a promotional area on the landing page.  As a client, web developer, project manager, and anyone involved in making an online marketing presence: put the user first and how your site helps them, conversion and great success will follow!

To all website clients out there; Google, Amazon, YouTube, Facebook, have all dropped support in different areas of their systems for IE6.  IE6 is dying, few people use it anymore and fewer still will use it next month.  More and more people are shifting to modern browsers and mobile options with excellent web standards support.  As web developers we are focusing on the now and on the future for you.  Let us do that, and put the past behind us.

To my fellow web developers; It’s time to stand up and rid ourselves of this browser.  This article outlines the necessary steps going forward for how, learn the techniques and use them, lets take the web forward and make our departments and jobs more efficient.


This trending competition in the browser space is a great thing.  Nobody wants innovation stunted by having everyone dependent on one browser.  Web standards are a great thing as well,  because it enables proper content delivery to all, no matter the browsing engine.  Here is where the philosophy of Google, Microsoft, and Mozilla have combined: The “Same markup” notion.  This is where both competition and web standards can flourish.  All these companies have recently stated the philosophy of code rendering the same way, no matter what browser you are in.  You may be browsing using the Trident rendering engine for IE9 or the WebKit rendering engine for Chrome and Safari.

The problem is when reality catches up with us.  Lets face it, Microsoft has never been that great about web standards.  FireFox has found it’s niche but there are still subtle differences between Mac and PC in rendering.  The WebKit rendering engine has different versions for Chrome, Safari, and mobile.  It is my hope that these companies working together with the w3c can help developers to solve some of these problems and bring website development into a more mature environment.

Microsoft released the second developer platform preview for IE9 this month.  They have been working with the w3c to add and support the standards.  They have been quite involved, but previously, even after being involved they did not support a number of standards.  Why will this round be different?  It appears they are more engaged.  When I head to “An Event Apart” in two weeks, Microsoft is speaking on how to kill IE6.  They are there speaking to the web developer community and with the w3c.  When I tested IE 9 this week I noticed that it does have a few encouraging signs of progress:

1. IE9 now supports the use of CSS3 selectors.  When I tested this on CSS3.info I confirmed that all of the selectors were supported.
2. IE9 supports CSS3 rounded corners!  Thank the lord!  It’s about time.  Where are you guys on box-shadow?

I have included a screen shot of scottgale.com rendering on IE9 with a couple tweaks.  Still no drop-shadow, but I do get some corner rounding, which is a big start.  You can see that it is picking up the rounding for the select boxes, the submit button, and the bottom corners.

They also mention that they support CSS3 media queries for mobile, netbooks, and full desktops.  However,  my dream would be that these are not necessary.  I see this as a baby step for Microsoft in the right direction, hopefully they can keep that going.

In the spirit of competition and standards, these companies need to come together and do what is best for web developers.  If these companies can’t pull together the “Same markup” philosophy then don’t expect developers to get behind the spirit of browser competition.  What will happen is everyone will start touting a single browser that is fast and supports web standards.  For Microsoft with their sliding browser percentage, it’s time to step up and help improve the lives of the web developers and the end users.  It’s time for all the companies to come together and make real web standards happen.

Evernote – This is one of the best apps ive ever used. In fact, the draft for this post was typed on the iPad in Evernote. It syncs all your notes and documents with your iphone, ipad, and computer. Making sure that anytime a new though jumps into your head you have a place to stay organized. Creativity doesn’t just happen 9-5, Monday – Friday, so it’s nice to have your thoughts in sync.

Marvel – This app represents one of the great points of differentiation between the iPad and the Kindle. The Kindle is great for books, but for news and things like comics it was always a problem. The iPad’s capability really kicks up the options for those categories. As an added bonus, Marvel allows you to download some of their classic comics for free. There is another app called “Comics” if you aren’t happy with just Marvel.

NPR – Great app for news buffs. NPR posts great articles that are excellent to read on the crystal clear iPad screen. One of the cooler features of this app, however, is that you can stream your favorite shows from NPR right to the iPad on demand.

AIM – I can’t show a screenshot of this one without having to blur out everyone’s Facebook comments and my AIM buddy list.  For me, the instant messaging client is a necessity for work communication, so that is a major part of why it made my list. This app is a pretty standard AIM client but nice to have nonetheless. The app has “Lifestream” which will aggregate your social activity but I prefer hootsuite for my social aggreation.

Pandora – Standard Pandora app with an iTunes looking interface. I’m a Pandora fan.  I haven’t found any limitations in this application versus the full web version yet.  The expandable menu for each song allows you to bookmark the song or the artist.  There is also an option to buy the song direct from iTunes or search the artist in iTunes which I find handy if you have interest in the songs you are hearing.  It is a bummer that since there is no multitasking, once you start browsing for the artist in iTunes, the iPad has to stop playing Pandora.  One other thing that I noticed is you can’t delete a station if you accidentally add one which is easy to do with the sensitive touch interface.

Words HD – Scrabble with a luxurious board compared to the iPad’s tiny cousin the iPhone. I wonder if I’m getting an unfair advantage playing on the “big screen”. It’s a great way to stay in touch with the family if you were scrabble opponents as kids like mine was. Plus, you might learn something.  One down side of words is that you never get penalized for playing incorrect words, so you can try combinations until you’re blue in the face.  Scrabble also makes an application for $9.99 that I haven’t tried yet.  It would really be nice to play against more than just one person.

Molecules – This one is an install and forget it sort of thing. It is fun to play with for about 10 minutes and think of doctors using the iPad to enhance their general diagnosis capabilities.  There are molecule setting options for DNA, Acetylcholinesterase, Insulin, and TRNAPHE.  The application also offers different views (I prefer the cylinder view myself).  If you are in the medical field there is one very cool thing you can do with this.  This application connects to the RCSB Protein Data Bank.  In a matter of minutes I was able to download the Crystal Structure of the 2009 H1N1 virus, view, and rotate on the screen, pretty cool.

Netflix – I love being able to stream high quality movies using the Netflix app. I watched one over WiFi that looked amazing. When you watch movies over 3G Netflix downsamples the stream. The 3G at my house using full bars was noticeably slower when browsing movies and loading the app. The video quality was not great and jerky in parts, but you’re watching a streaming movie from the cell towers so, not quite there yet. I think AT&T is a tad deluded about their network capability but that is a separate post.

SugarSync – Even though there is no accessible file system on the iPad I sync my documents to the cloud via SugarSync. The files you sync to SugarSync can be viewed and emailed to others using their iPad app. Dropbox is also on this bandwagon. Make’s it easy to be sure you have access to your important files anywhere. I tested viewing docx and xlsx files and it worked fine. It does not allow you to edit the documents however.

Labyrinth 2 HD - Fun game to try out the gyroscope.  This has a multiplayer option and is made by Illusion Labs, the same company that coded the Skateboarding came Touch/Grind HD.  This game has a lot of features for encouraging social engagement through multiplayer, online browsing, and level creation, but really I just tried the single player levels.  It takes a little while to get the hang of all the new obstacles that are in this, but once you get past that it is pretty fun, a tutorial will take you through the basics.

ABC – Stream ABC shows, although it crashed my iPad a couple times.

Yahoo Entertainment – I have multiple TVs in the house and only 1 has a cable box. This is a great TV guide if you have analog TVs in the house or don’t want use the guide.  This has some other features, such as, video on demand for news and sports.  It also has entertainment news in a format that I’m not crazy about.  I personally am just using this for the guide capability.  One of the really handy features of the guide is the “Show Details” option.  By using this you can click on a show and see all the information about all the shows in the season, so if you are coming in mid-stream, you can see where the season is at with respect to the story line.

The Weather Channel – Nice array of weather functionality and views. The app utilizes the iPad’s location services and can do multiple map overlays including clouds and radar.  I personally never really trust weather reports so its nice to be able to play back the radar and see what is actually about to happen.  This app also offers a streaming video weather reports, but the local reports are pretty robotic.

These are my favorite apps that I have dug up so far. You might be asking, where are Facebook, Hootsuite, LinkedIn, Google Docs, and Google Voice. If you look at my home screen you’ll notice that I have a few of those on there. However, these are simply Safari home screen links to the respective sites. I’ve found that for the most part all those items listed above work fine for the iPad using their straight up web browser modes. Facebook has a link for touch devices called touch.facebook.com but I find I just end up using the actual full site.
So for these there aren’t apps for them, but are apps needed? The beauty of the iPad is that standard websites with no browser plugins work great.

Apps I tried and didn’t love:

For both Amazon and Kayak the search functionality is quite a bit more limiting than on the actual site, and both their full sites work fine on the iPad. So from my perspective there is no real point in having an app for those, but if you do build an app, it needs to be able to reproduce the search criteria. It’s the same problem on the iPhone but the point for simplicity is a little more arguable for the iPhone due to the form factor.  For Twit Touch – I love the TWIT network but this app keeps crashing my iPad. It’s nice to be able to watch streaming live TWIT shows, but I really need more stability from that app.

So there is my first roundup.  Looking forward to what gets built in the future.  Please comment and let me know some great apps that you have found.

What follows is quick synopsis of how to setup an HTML5 WordPress skin and some of the benefits this brings:

To start, I setup basic HTML5 markup.  Utilizing new tags.  Here is what the structure looks like:

Using this basic system as a framework, I added microformats to the header and footer for human and machine readable information.  You can view the source and search for “vcard” to see my microformat header.

Next, I started utilizing some of the great things that HTML5 and CSS3 have to offer.  HTML5 has new form field types that work well for the iPad, iPhone, and Webkit.  In other browsers they fall back to be standard text input fields so it’s not a problem to use them in general markup, even for IE6 (everyones favorite).  Here is a breakdown of some of the new HTML5 form fields:
<input type=”search” placeholder=”SEARCH” value=”"/>
The new search input type has a really cool attribute called “placeholder”.  Placeholder is a value that disappears when the form field focuses, a function that we no longer have to emulate with JavaScript on browsers that support this.  The type search also tells the iPhone, iPad, and future dynamic keypads to use a different “enter” key.  Note how the iPad shows “Search” on the keyboard:

<input type=”email”/>
This field type also tells mobile devices to change their keyboard accordingly.  Here is an example of the iPad keyboard with this field type:

<input type=”url”/>
This field type also tells mobile devices to change their keyboard accordingly.  Here is an example of the iPad keyboard with this field type:

Now its time to add the CSS.  Using CSS3 for rounded corners, drop shadows, and gradients, quickly eliminates the need for extra divs, classes, and most importantly, images. I used these styles to do the buttons, the input fields, header and footer styling, and even the background. Here are some of the basic CSS3 styles used:

/* create the body gradient */
body {

	background: -moz-linear-gradient(top, #fff, #ccc);
	background: -webkit-gradient(linear, center top, center bottom, from(#fff), to(#ccc));
}

/* do the rounded corners and drop shadow on the header */
header {
	-moz-border-radius-topleft:8px;
	-webkit-border-top-left-radius:8px;
	-moz-border-radius-topright:8px;
	-webkit-border-top-right-radius:8px;
	-moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 1);
	-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 1);
	box-shadow: 0px 0px 3px rgba(0, 0, 0, 1);
}

/* create the button for form submission and search submission */
form .submit {
	background: -moz-linear-gradient(top, #073842, #000);
	background: -webkit-gradient(linear, center top, center bottom, from(#073842), to(#000));
}

With these styles it’s quick, easy, and image free to do what use to be a much more arduous process for many of us.

Now you’re all done except for IE

Now that the markup is in place and the styles are in place.  We have to make it work for lesser browsers that can’t handle new standards (aka IE).  There seems to be a misconception out there that this is difficult, but it is actually a few simple steps.  For my blog I conceded that there would be some degradation of the look for browsers that don’t support CSS3 so that makes life easier, and of course it may be a luxury not everyone can afford.

IE Step 1: Add support for styling of the HTML5 tags
To do this, all we have to do is include a JS file called html5shiv hosted on googlecode.com.  This in essence does a document.createElement and a few other things to get IE to recognize the HTML5 elements.  We can wrap this in conditional comments because it is only required for IE.

<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

IE Step 2: IE specific CSS
For any IE specific CSS that you want to do (I added a few different border treatments and color tones to make the site still look ok) add the IE specific CSS file.

So the sum of your checking for IE should look something like this:

<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <link rel="stylesheet" href="/blog/wp-content/themes/scottgale/style-ie.css" type="text/css" media="screen" />
<![endif]-->

Make sure after you add this to validate your markup with the w3c validator.  It handles HTML5 quite well from my experience.

And now your are done!

I hope this helps everyone to explore this new web standard.  The blogosphere is an easy place to try this out and help perpetuate these ideas.  Please let me know if I need to explore any of these concepts in more detail for people.

Over the next week I plan on highlighting some of the tech I used so keep an eye out for the next post. Some cool stuff to mention:

• New Form Fields that preset iPhone and iPad entry according to field type.
• New search field capability supported in Safari.
• Only 8 images required to make the whole site, rest done with CSS3 gradients and rounded corners
• Google Chrome Frame Support, making the web faster and removing IE 1 user at a time.
• Google hosted code fix for IE
• New tags such as section, article
• Added microformat support
• And many more, stay tuned..

Microformats are simple standardized ways of organizing website information. Microformats have implications for web development standards, SEO, and application development around parsing website information.

Lately, there has been a lot of discussion around these snippets for SEO, geo tagging, etc. I find this a bit ironic because they have been around for so long.  (The microformat search term on Google hit its peak in 2007.)  However, what hasn’t been around for very long is the Google adoption of all of these “Rich Text Snippets”.  The term Rich Text Snippets includes microformats, microdata, and RDFa’s.  I’ve seen some examples on the microformats blog and Google has been blogging about all the support they have been adding.  Google actually made some mistakes in their examples, but it looks like they corrected them. So I thought I would outline my favorite examples of microformats to get that information out there.  Hopefully we can perpetuate the wide-spread use of these.

These are my favorite markup uses for each format:

Review:

<div class="hreview">
  <span class="item">
    <span class="fn">Scott Gale's Blog</span>
  </span>
  Reviewed by <span class="reviewer">John Smith</span> on
  <span class="dtreviewed">
    Jan 6<span title="2009-01-06" />
  </span>.
  <span class="summary">Love the website</span>
  <span class="description">
    I like your blog because it offers me, an SEM evangelist and
    sales guy, an insight into the world of technology from
    someone who understands the very essence of its infrastructure.
  </span>
  Rating:
  <span class="rating">4.5</span>
</div>

Person

<div class="vcard">
  My name is
  <span class="fn">Scott Gale</span>,
  My blog url is:
  <a href="http://scottgale.com/blog" class="url">scottgale.com/blog</a>.
  I live in
  <span class="adr">
    <span class="locality">South Burlington</span>,
    <span class="region">VT</span>
  </span>
  and work as a
  <span>Web Developer</span> at
  <span>Dealer.com</span>.
</div>

Business:

<div class="vcard">
   <span class="fn org">Scott Gale's Web Shop</span>
   Located at
     <div class="adr">
        <span class="street-address">16 Any Dr.</span>, <span class="locality">South Burlington</span>, <span class="region">VT</span>.
     </div>
     <span class="geo">
        <span class="latitude">
           <span class="value-title" title="37.774929" />
        </span>
        <span class="longitude">
           <span class="value-title" title="-122.419416" />
        </span>
     </span>
     Phone: <span class="tel">206-555-1234</span>
     <a href="http://scottgale.com/blog">scottgale.com/blog</a>
</div>

Product:

<div class="hproduct">
   Make: <span class="brand">Maserati</span>
   <span class="category">Automotive</span>
   <h1 class="fn">Granturismo</h1>
   Nicely equiped for:
   <span class="price">$134,000</span>.
   <span class="description">The Maserati GranTurismo design exudes elegance
   and has room for 4.  Reinvented from the ground up.</span>
   <a href="http://www.scottgale.com/Maserati-GranTurismo" class="url">View Details</a>
</div>

Video: (RDFa from Google’s site)

    <object width="512" height="296" rel="media:video"
      resource="http://example.com/video_object.swf?id=12345"
      xmlns:media="http://search.yahoo.com/searchmonkey/media/"
      xmlns:dc="http://purl.org/dc/terms/">
     <param name="movie" value="http://example.com/video_object.swf?id=12345" />
     <embed src="http://example.com/video_object.swf?id=12345"
       type="application/x-shockwave-flash" width="512" height="296">

     <a rel="media:thumbnail" href="http://example.com/thumbnail_preview.jpg" />
     <a rel="dc:license" href="http://example.com/terms_of_service.html" />
     <span property="dc:description" content="Cute Overload defines Baroo? as: Dogspeak for
      'Whut the...?'Frequently accompanied by the Canine Tilt and/or wrinkled brow for enhanced effect." />
     <span property="media:title" content="Baroo? - cute puppies" />
     <span property="media:width" content="512" />
     <span property="media:height" content="296" />
     <span property="media:type" content="application/x-shockwave-flash" />
     <span property="media:region" content="us" />
     <span property="media:region" content="uk" />
     <span property="media:duration" content="63" />
    </object>

(Would be nice to see a video microformat, they audio spec is in review currently.)

With Google’s adoption of these standards it puts microformats in the running for some serious SEO discussion. Google has a lot of documentation about this. They also have a rich snippet testing tool to confirm that your html is properly formed and able to be parsed.

Also, I stumbled upon a great post by Jay Myers about the potential of these formats and how it relates to SEO.

With Google’s adoption of this it puts microformats as a new and important SEO component. Utilizing the examples above coupled with the tools that Google has for testing will help create a more human and machine readable web. Microformats.org can help get you started if you are interested in becoming a contributor.

So here is the mockup I posted there, which I have built in HTML5:

You can check out and comment on the new concept in conceptfeedback.com or on this site.  Once I have this fully solidified I will send around my general markup philosophy for setting up a wordpress skin in HTML5.