HTML5 and Media Queries

Web Development
July 29th, 2011

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 browsers1.

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.

References
  1. John Resig, HTML5 DOCTYPE, http://ejohn.org/blog/html5-doctype/

No Comments »

Davis Square Flag

Design
June 5th, 2010

I came across this project for Good magazine in which a collection of designers and illustrators were called upon to design flags for their respective neighborhoods. Some were beautiful in their simplicity, others appeared to be the product of designers trying to show of their skills rather than fit the creative limitations.

Needless to say, I went for the more simplistic route in designing a flag for my Boston-area neighborhood, Davis Square.

Davis Square Flag

Have a design for your neighborhood you want to share? Critique of mine? Share them in the comments.

3 Comments »

Maintenance Month

Web Development
May 15th, 2010

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.

No Comments »