An Experiment in HTML5 and CSS3
A couple months ago I decided it was about time that I jumped on the HTML5 bandwagon. I really hadn't had any real world experience building anything in HTML5, and had only used a few CSS3 properties as progressive enhancements. I really wanted to take some time to design and build something awesome - without having to worry about the elephant in the room, *cough* Internet Explorer *cough*.
Unfortunately, I didn't have a whole lot of unique content laying around that could be the foundation for my site, so I decided to go the Lifestream route. I also decided to build the site with Yong Fook's SweetCron platform, which is built on my favorite php framework, CodeIgniter. It aggregates feeds from this blog, my Twitter, Delicious, Last.fm, Flickr and YouTube accounts. But enough about the boring backend details, let's move onto the new and exciting things.
The Result
You can see the final result of my HTML5 and CSS3 experiment at me.evanblack.com. Make sure to check it out in any GOOD browser, like Firefox, Safari or Chrome.
HTML5
If you take a look at the source code, you should notice how clean it is. HTML5 is a semantic wet dream. Pretty much every element, from <nav> to <header> to <article>, has a semantic meaning. This, coupled with some advanced CSS3 selectors, means you hardly ever need to use IDs or even classes! I think the hardest thing to get used to is the fact that not only is your page going to have a header and footer structure, but so is each article within your section.
If you're looking to read more about the new structural elements in HTML5, I'd recommend reading Steve Smith's article on Structural Tags in HTML5. Unfortunately, I didn't get the chance to do too much experimenting with the new <video>, <audio> and <canvas> elements, or with the new form features, but these are sure to make HTML5 even more robust once the spec is approved.
Note: Once the W3C agrees on a standard video format for the <video> element (my guess is h.264), and browser vendors get it implemented, it will make this element much more widely used because of iPhones and iPod Touches.
Design and CSS3
The main CSS3 features I implemented - aside from the usual border radius and text shadow properties - were @font-family, rgba, box-shadow and CSS gradients. I've used Yanone's awesome free font, Yanone Kaffeesatz, via @font-family for all the headlines. I also played around with a combination of border radius, rgba and CSS gradients for the navigation tabs, which I think turned out pretty well. I even tried to do some CSS transform magic for the tab animation, but alas, I had to resort to Javascript. Be sure to check out the CSS to take a closer look at how I put some of the new CSS3 features to work.
Javascript Finishing Touches (jQuery of Course!)
For some finishing touches I added a bit of jQuery magic to handle the navigation tab animation, the endless scrolling, and thus needed 'back to top' link. There's also some other javascript to help bitch-slap IE into submission, although I haven't really done much testing to see how the site's looking in it. IE8, at the very least, should not completely crash.
Conclusion
Please take a look at the final result and let me know what you think! Unfortunately, there's a lot of twitter content right now, so be sure to check out the different categories to see the alternate post designs. Building this thing was quite a learning experience and it's nice to see front-end development going in a good direction.
I'll also be adapting this baby into a Tumblr theme so stay tuned for that!
:
17 Comments
Add your 2 cents: