Azzcat Blast

Design stories & tips, peppered with life's little tidbits

CONTACT

Azzcat Design Makeover

June 6th, 2010

welcome_grab

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?

Because.

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:

No Flash

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.

Embrace CSS3

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!

What’s Next?

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!

The CSS Awards…

Just in (06/08/2010) Honorable Mention and now featured on OnePageLove. :)

5 Responses to “Azzcat Design Makeover”

Joseph McCullough
June 6, 2010

Looks pretty nice. I’m not a big fan of the scattered rounded rectangles, but that’s just me.

I’ve been tempted to test out TypeKit. Do you know if it has any negative effects on SEO?

I’m going to be redesigning my site/blog also. Unfortunately it won’t look nearly as good as this one! 

I’m also reluctant to shift to CSS3. I mean i’m all for Bashing IE6, but I feel like I should still keep IE7 and 8 in mind. Maybe I’ll break that mind set eventually.

Good luck with everything!

Catherine
June 6, 2010

Thanks, Joseph!

Typekit has no effect on SEO. The text is all there in HTML and if Typekit fails, there’s fallback font stacks. What’s especially great about Typekit is that the text is totally under control of CSS and is selectable. (Though admittedly, my elements aren’t easy to grab!) Cufon, for instance, does not fully support CSS rules.

CSS3 is still a little tricky. Turned out that Windows FF couldn’t handle the alpha transparency gradients in the nav bar and footer. So I found a script that let me isolate Windows FF to serve up a solid color for those elements. So frustrating!

IE7 & 8 (I don’t support IE6) had issues rendering the Wufoo contact form. Fortunately, Wufoo offers javascript OR iframe alternative. The iframe works across IE, FF, Chrome & Safari, whereas the javascript didn’t work in IE. So I used the iframe.

Bottom line…lots of trial and error. The site looks luscious in Chrome/Safari/FF on Mac. Windows…meh. There’s a world of difference in font-hinting between Mac & Windows. (I have no idea of how Linux looks!)

Joseph McCullough
June 6, 2010

Thanks for your reply! 

Call it coding practices or laziness, I just can’t imagine my page looking different on different browsers. What I really  can’t imagine is  having to take care of multiple CSS files or conditional CSS statements. That just seems like it would be a nightmare to manage. 

I guess I just play it safe way too much! 

Catherine
June 6, 2010

No worries! I’ve made my peace with the browser differences. (Not easy for an old print designer!) Though I’m frustrated by the browser differences, the ‘game’ of CSS keeps me smiling. ;-)

What Say You?