Dan Ubilla

I finally took it upon myself to tackle HTML5, and you are looking at the results.  Of course, implementing any form of HTML5 isn’t necessarily rewriting all of your markup with fancy new <section> and <nav> tags nor does it have to be adding HTML5 native Javascript.  The first step is the simplest, but it’s a first step nonetheless.  I started by simply replacing my doctype with <! DOCTYPE HTML5>.  Gorgeous in its simplicity, no?  This change alone will give you HTML5  features in all modern browsers¹.

The first step was so easy, I decided to take some more.  I ripped out the header and footer of my WordPress template and filled it in with some of Paul Irish‘s HTML5 Boilerplate.  After, fighting off the fright and intimidation, I was able to follow along with the comments and decide what was needed from the boilerplate, what I wanted, and what I could toss away.  There’s a corresponding CSS file with fantastic default styles and even some placeholders for media queries.  Which, in fact, is where I tidied up my work.  Check out this site on webkit-enabled mobile device (iPhone, Android, etc), and you should see a nice, readable mobile layout.  It’s by no means perfect, but I would consider the site mobile-enhanced.

Following Chris Coyier’s lead, I decided to go back and clean up some parts of the re-design I had neglected. It took some digging into pages and posts that I barely touched, and that have barely been seen, so I was glad to have the push.

Some fixes you’ll see:

• Images from the Archives: After moving my site from /blog to the root of my domain, a few image links became broken. I was fearful that I’d have to dig into the meta data of the wordpress install to designate the new image folder, but I had actually linked the images on the site absolutely, a big no-no regardless. Simple fix, and finally implemented.
• Archive, Post, and Page Layout: I wasn’t sure at the time about including the sidebar on all child pages, so I left these layouts in limbo, including the sidebar, but not doing it very well. The CSS was in place, so a bit more html markup completed the changes.
• Post Navigation: The post navigation had some float issues. Since every element in the post navigation div was floated, a clearing element needed to be introduced so that the subsequent html didn’t run right up into it. IE7 has a margin-bottom bug with floated elements, so instead of introducing a bottom margin on the post navigation, I merely threw a top margin on the post.

Have you started maintenance on your own site this month? Plan to begin in the coming weeks? Leave a comment.

When I threw together the design you see on this very blog, I did it haphazardly and quickly just to get a bit of presentation to frame my entries.  It was always meant to be a dynamic frame, one that I could use as a training ground to various tips and tricks I picked up through my work, both professional and personal.  Looking at the current layout and site hierarchy in more depth, I’ve decided to scratch most of what little you see here and strip down to the bare essentials.  By re-focusing on the content before continuing on with exploring new design techniques, I’ll be able to re-imagine this web space to become not only the design and development playground that I originally intended it to be, but to be a proper gallery of my accomplishments and pursuits.  In breaking things down, I plan on following three tenants and lines of thinking that I’ve come across in the past six months since introducing this site:

* Make Your Mockup in Markup – a fantastic argument to ditch Photoshop and design straight in the browser by Meagan Fisher of Simplebits.
* Walls Come Tumbling Down – the original presentation by Andy Clarke of Stuff and Nonsense that inspired the preceeding article.
* This fabulous idea that allows me the exploration of cutting-edge technologies without forgetting the end user.

In addition to these inspirations, the new site will include a focus on typography and minimalism, both of which should provide a new spotlight on content.

What you’ll see as a visitor will be a constantly changing design as I will be working in the browser, and, for the most part, pushing updates to the live site as quickly as possible.  While this is not the most professional approach, I will consider this site an academic case study and web development playground for the next few months.  For those interested in design and coding, I will be posting periodic updates on the what, why, and how of the developing site.  For those interested in areas of the site, I would ask you to not mind the mess, but the idea is that no proverbial under construction sign is needed, that the site will be functional and accessible at every stage.

Thanks for staying tuned and for your general interest.