Azzcat Blast

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

Details Matter

July 20th, 2010


Just launched my latest project. This was a redesign of 2-page realtor site. At first glance, the project was simple enough: 2 static pages with clean new look, better content organization and access to FranklyMLS, blog & videos. This site was to be tighter and more ‘businesslike’ than the client’s link to blogblog I redesigned last year.

The only tricky part was the dynamically pulled blog content: 2 post excerpts + 4 comment excerpts. This didn’t worry me, because Michael was handling the custom javascript for this. I just had to style it. Piece of cake!

Except…little ol’ me likes to go that extra mile…and add something…special. Sometimes those special details become special obstacles! (Which I conquered.)

Special Obstacle Detail #1

Contact. That’s the call to action. Simple. But client didn’t want to shout CONTACT! I’m not a fan of an entirely new .html page just for name, email, phone and mssg info. That’s overkill. I like a contact link to always be available and enticingly clickable. Might as well have a short moment of interesting interaction with user to entice them to fill out that wee little form! So I sent a mini prototype (based on this jQuery effect) plus wireframe to client for approval. Sweet!

Except…once I coded all the sweetness + the dynamic ‘grab posts and comments’ script…there was a nasty little instance of FOUC (Flash Of Unstyled Content) on the home page! That simple static home page had one too many things going on to properly hide the contact form completely before loading the page. :P

Our attempts to fix the FOUC didn’t work, so I found another approach. Rather than have a bouncy little drop down with FOUC or resort to a separate contact.html page, I set up the contact form within a modal box. And then, because IE and some versions of FF insisted on keeping all YouTube videos at uppermost z-index, I had to position the contact form to the left of browser window. This prevented the videos from obscuring contact form. Win!

Special Obstacle Detail #2

LavaLamp/Spastic Nav Effect. This little bugger gave me trouble for some time! I originally found this jQuery LavaLamp effect for top navigation and thought it was pretty sweet. But, of course—I needed it styled for my client’s site! So I went to Nettuts…one of my fav tutorial sites. But I was still stumped. Follow my comments and my eventual solution here.

Special Obstacle Detail #3

CSS3. Alpha transparency in borders. This was a interesting little blip, especially because it showed up in Safari! Generally speaking, Safari has better CSS3 support than Firefox, for instance with CSS transitions—but not this time! The solution around this was to use a solid hex # instead of an alpha transparency.

Below is a capture of the original code that Safari burped up:

Here’s the solution code: .blog_cats { border:20px solid #85589d; border-top:50px solid #85589d; -moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; }

Before & After

Check it out. Don’t miss the CSS3 transitions in Safari and Chrome. ;-)

3 Responses to “Details Matter”

August 5, 2010

Great job. The new site looks awesome! It’s so pulled together and easier to read. The large purple blocks and tables really help break the page down into specific areas.