Yay Hurray!
After nearly two years, I’ve finally updated my site with a new design. This post is a little overdue as the design has been up for a few weeks now, but between the Future of Web Design Conference, moving into a new apartment, and making tweaks to this site, I haven’t found a lot of time to write.
Jen finally got off her lazy ass and redesigned her site
My last design was put together in a hurry, and not a lot of thought went into it. While this design still doesn’t please me 100%, it doesn’t make me cringe each time I visit my own site (ha!). Mostly, though, I wanted a design that would motivate me to continually update the site: through writing, personal projects, and showcasing the fun things I’ve been working on at work. Much like I can’t focus in a messy space, I’m not easily motivated to add content with a design I hate.
So, what’s new? Honestly, not a lot. However, the redesign did give me an excuse to truly mess with HTML5 and CSS3 for the first time.
HTML5 Elements
My site uses the html5 doctype and implements the new header, footer, article, and nav elements. The contact form uses the email input type and the placeholder attribute.
To make sure this site still works in older browsers, I used the html5 boilerplate and the Modernizr JavaScript library for feature detection.
[NOTE] Don’t forget to checkout A Book Apart’s first publication, HTML5 For Web Designers by Jeremy Keith.
CSS3 Elements
One of my favorite aspects of css3 is the ability to have multiple background images on an element, which I used in two places on this site – once in the header and once in the footer. I’m curious, though – is there a way via JavaScript or jQuery to select all the background images on an element? I wanted to attempt a fun animation using the multiple backgrounds, but wasn’t sure how to go about getting them into an array. Will need to look more into this.
Some other css3 elements I used were border-radius (<3), column-count, and box-shadow. I love, love, love css3. <3
[NOTE] The newest A Book Apart publication, CSS3 For Web Designers by Dan Cederholm is now available!
Fun & Things
IE6 makes us all cry
The redesign also uses TypeKit (Museo Sans… yes, I know, it’s everywhere… whatever), jQuery, and does not support IE6. Besides, IE6 is dead, anyway.
This was also the first time I created a WordPress theme. Normally I just hack in the pieces of WordPress that I need, but this time I decided to make things simpler on myself and create a template. It wasn’t as complicated as I thought, and now I’m wondering why I avoided it for so long.
Inspired by some of the talks at the Future of Web Design Conference, I’d like to try and add in a few fun elements to the site (like easter eggs) but that will likely have to wait until the new year. I have a few more small projects I’d like to finish before then, one of which I hope to release here shortly.
And that’s it, folks. While I’m still not completely happy with the design (I think I’ll end up redoing the header soon), I’m content with it. Please let me know if you find any bugs or weird style issues. I’m sure I missed something, somewhere.