Hello! If you’ve arrived directly here, you may not have noticed some major changes in the home page. Go ahead, visit Azzcat Design. I’ll wait!…
Woa! What was that movin’ and a changin’ going on? Did you play with it? Don’t forget to resize the browser to enjoy the effects
Pretty nifty, huh? Kind of makes this page look…dull.
That’s OK. I’ll get around to changing up the blog to correspond with my new site soon—I just couldn’t wait to show off the new look!
Why the Makeover?
No really, why?
Lot of reasons. Sure, I can say that I just wanted to change it up, but there’s more to it than that. I had specific requirements:
I needed to remove the Flash-based portfolio. iPhone and iPad don’t support Flash, so my work was completely unavailable on those mobile devices. Plus, I wanted something different than a standard jQuery gallery, yet simple.
Use Flexible Layout
With increasing viewership from mobile devices, I needed a flexible layout. Not being totally comfortable with elasitic containers—they can get fugly—I wasn’t sure how to tackle the code. Horizontal or vertical? Minimum or maximum widths? Multiple mobile stye sheets?…Blech!
Then I found an awesome jQuery effect, Masonry. It’s by David Desandro and is perfect! I really don’t need more than a single page for users to find me, view my work and make contact. It seemed perfectly natural to serve up the info in bite-sized pieces. And the great thing about Masonry is that it adjusts to small browsers and widescreen monitors without fuglying the content. The blocks just line up vertically to fit.
For the overlay content, I selected a larger, yet fixed size—just under 900px. iPad users can see the overlay full-width when holding device horizontally. Smart phone users will need to scroll.
There’s a world of wonderful with good browser support. Been using rounded corners, box- and text-shadows, and alpha transparencies quite a bit on client sites. I’ve even thrown in some transition effects. (Firefox isn’t quite ready with transitions, but soon!) In any case, less than 10% of my audience uses IE. That leaves 90% of my audience who can see the sweetness. 90% who are progressively enhanced!
Restructure with HTML5
Just as I’ve been using CSS3 on client sites, so it goes with HTML5. Love it! Simply cleaner, meaner code with this doc type. And the HTML5 shim, hosted on Google even whips IE into shape.
Share the Font Love
Ahhhh…Font as a Service rocks!
Quite honestly, I wanted to push the boundaries with Typekit. (Guess I still have some of that beta test blood running in my veins!) Really, though—check out the fonts. Aren’t they lovely? I’m very happy with the CSS voodoo within the elements. (Positively straining as I pat myself on the back!) Go—look at the code!
The blog, of course! Yes, I’ll be writing my WordPress theme in HTML5. I’m excited about the upcoming release of 3.0. In the back of my head, I’m thinking I might just exploit the new custom post feature a la Jason Santa Maria. Could be fun!
Let me know what you think. Thanks!