So…today is my brother’s birthday. He’s a nomad who is always on the road to exotic locales managing the lights for none other than Alice Cooper. Along the way he posts pictures of his travels to Facebook for those of us stranded in the American mid-west to follow along.
What do you get someone like that for their birthday? Usually I try some gimmicky travel gift that he can take on the road with him, with mixed results. This year, I bought him a domain and made him an eCard using full blown HTML5/CSS3. Huzzah! Once again, I might be more excited for his gift than he is.
It's a paperless birthday card! You see? HTML5 is good for the environment...right?
This is technically my first full foray into the world of HTML5. I’m technically delving into that at 501creative right now, but that project isn’t finished whereas this one is. I thought I’d write about some of the new tools and tricks I used for those interested.
First of all, let it be known that I am in no way a designer. I don’t know jack about color palettes, typography, hierarchy, and just general form. I go to professionals when I need something to look spiffy. I’m just a coder. So if you’re laughing at my awesome background tiles, don’t be jealous.
Now for a general skeleton I used the HTML5Reset. It’s a great resource for getting off the ground with a basic HTML5 document. It comes with robot.txt, index.html, a jQuery implementation (because everybody seems to be using jQuery these days), modernizr for IE, and a full blown CSS Reset. You basically can just chop off what you don’t need and get to work.
What’s made me nervous the most is the use of <section> and <article> and when to use one of those instead of a <div>. I’ve read Jeremy Keith’s HTML5 for Web Designers and browsed the online copy of Mark Pilgrim’s Dive into HTML5 and still use div’s. I decided the real meat and potatoes of the page was the map and made that an article. Everything within (the unordered list of locations and the birthday message) is related towards the message that my traveling brother’s birthday is today. Non-semantic elements (like the wrapper div for my bro’s picture and the site’s container) are just simple divs because they’re really just there for styling purposes.
“Why use a secondary div for your brother’s picture instead of multiple backgrounds?”, you ask? I originally rocked the multiple backgrounds for that but that caused no backgrounds to show in Internet Explorer. If it was important enough, I’d throw CSS3Pie at it. My personal view on CSS3 techniques is that they should be used to add to an already solid experience. If they’re used more for speed and efficiency, then maybe CSS3Pie would be needed so that at least IE can keep up. For the most part, rounded corners are not important. Drop shadows are not important. Multiple backgrounds (if used to just create visual textures) are not important. If viewers want to see those bells and whistles, they should try a browser designed to display the web like it’s meant to be seen and not Internet Explorer 5-8 which seems to have its own agenda. With this site, the multiple backgrounds are necessary. I needed the map to show up and, for future updates, I need my brother’s picture to also show up, even in IE. Instead of throwing CSS3Pie at it, I decided to cut IE a break and just add the div.
The pins are an unordered list of links, absolutely positioned in place (thank you Google Maps!). Each link has a and a div containing the image and location caption. On hover, I display the photo.
The only other CSS3 technique used is border-radius to Web 2.0 the whole thing. Like I said before, I’m not a designer but hear these rounded corners are the latest and greatest thing!
So there you have it! Happy birthday to my bro! Here’s to 27 years of you being cooler than me! Here’s to venturing into new territory! Here’s to HTML5 and CSS3!