More with HTML5

HTML5 is getting pretty solid. Its a pretty big advance over the “old school” and I’ll admit I’m not 100% up to speed. Last year I built my first “labs” (www.houseofbeor.net) site with it. Now its time to revamp both the labs space and my main public facing site. I started researching a few things on the internet, have some initial thoughts and design concepts. This post will cover what I’ve thought about, discovered, and what tools I’m going to use to build the site.

Why HTML5 and How to Start?

Was something so horribly wrong with HTML that we needed a new rev? Ah well – in short yeah – but go google it, I’m sure there’s someone out there (Tim?) that has explained it. Depending on how familiar you are with HTML and CSS, learning HTML5 can be er well nearly Java-ish in terms of intensity. For all of HTML pre “5” – anyone could scratch our a few pages. with HTML5 I would recommend amazon.com as a good start and then there are a few places on the web that have templates/boilerplates/sample sites that can get you going. Here’s some cool things I’ve found:

• Boilerplate: Amazing starter pack for HTML5 site
• Initalizr: Generator of site templates based on boilerplate and Bootstrap 2.
• Bootstrap 2: Lighter weight HTML5 starter pack from Twitter.
• Interesting ideas: One of probably a bizillion galleries of sites.
• Slick Designer: decent super compact starter set for HTML5 website

The Boilerplate work looks very comprehensive so I’m going with that. A quick download, unzip, and drop it into my local apache server and I’m ready to go. I haven’t quite decided what I’m going to do in terms on content on my site, but I have enough pages, notes, and test pages locally that I can play with.

Full BP vs. Initalizr’s Responsive

The first thing you’ll notice with BP is that it is really a starter template – there’s actually nothing in the pages. No sample layout –> nuttin. That can be a bit intimidating, right? Well if you look at the image on teh right you will see that its not exactly nothing, all the magic is included in the source. You just need to add the content. My current local site is just crap notes and unk so I’m going to move it all over into BP and see what happens.

Copying over the templates and then adding some content as simple paragraphs and lists shows the value of boilerplate. CSS reset of fonts, and a base application of styles is all out of the box. Pretty nice.

In my local site I have about 10-15 sub-folders containing links to various dev servers I run locally – drupal, wordpress, tomcat, jboss; api docs that I need like jdk 1,6, jquery stuff, vaadin, etc. So I would like to get all this organized into a two column fluid width layout with a header and a footer – pretty simple, but do I really need to code this from scratch?

If ur a CSS wizard maybe. I did poke around and spent a few hours crafting the default stuff into a rough fluid width two column layout. Actually kind of fun considering that I don’t get too much time with this kind of stuff – I managed to bang out a decent starter layout.

This is where initalizr’s Responsive templates comes in – let’s face it, I just don’t have the time or the skill to do what this can do so why not re-use? Response is basically what I just said – a basic template filled out with support for columns, fluid widths, and even better — built in support for various types of devices and screen sizes…more in Pt 2.