Vocino Labs

Hosted by Joel & Travis, TimeSync Live is a conversational call-in show with topics ranging from politics and religion to technology and business. (more…)

When ARISE Foundation wanted to spruce up their new media campaigns after the Barack Obama victory, they turned to Vocino Labs to capture the style that’s become synonymous with well-executed internet marketing in the non-profit and political spaces.

We delivered a WordPress configuration used more as a content management system that could handle their massive amount of content. That content needed menu systems that could be easily organized by ARISE staff.

The result is an almost infinitely expandable standards compliant hover menu. This allows staff to easily add pages and content without worrying about the homepage. Pages can be moved around and organized under different primary menus.

With Photoshop CS3 Beta out and blazing on my MacBook Pro, I have indulged myself in some deep design work. Partly for fun, partly to get back into it, and of course for business. As most people have also said, I love CS3 so it’s pretty enticing to play around in there as much as possible right now (wow, that is a pretty geeky statement, sorry).

No, the new branding doesn’t really bother me. In fact, I really like it. Maybe I just like the sciencey feel or something. I’m not sure what everyone is so polarized about, personally. They look hip and fresh in classic “2.0″ minimalist style.

Anyway, as I was saying, my new thing is that I try to make every element needed in the final design, first in Photoshop. This means, rollovers, comments areas, how lists will look, how each header size will look, and more. Basically I create a huge page in Photoshop that acts as an “every-page” for the site.

The result is a huge Photoshop file but it’s definitely worth it.? Moving things around is no problem when everything is organized & layered properly.? Everything is left in layers (my last file had tons) so it’s pretty easy to break apart if you’re careful to consider organization early on.? I have everything broken up into groups of such as Header, Navigation, Comments, Footer, etc. with groups within those to organize individual elements.

From here, I take that graphical layout and extract the main large elements such as the backgrounds and basic wireframe.? This generally doesn’t take much time, especially since I have all my spacing and pixel values available right there in Photoshop.? I can measure the distance between elements and then set accurate values in my CSS files.

When creating links, I’ll have a link layer, a rollover link layer, and an active (depending on the particular need).? Hiding and displaying link styles, getting color hex values, and other textual data is no problem.? This continues to increase the effectiveness of the full Photoshop Layout method.

In the past I would proceed with a half-and-half approach where I’d create elements in Photoshop as needed.? Usually what ended up happening was the code would get too hung up on itself (does that make any sense?).? What I mean is, as the design evolved I would start to realize some spacing issues and have to go back to change a great number of CSS values.? I didn’t really like this because I couldn’t get an overall composition of what the site would look like before I really got into it.

I’m much happier with my new workflow method for now.  The first test from start to finish will be coming up shortly.? I’m currently in the XHTML/CSS extraction phase of a full Photoshop layout.

Recently I’ve been throwing around new ideas for an old project that keeps popping up (apparently they really want to do it now, since they’ve set a deadline). I was originally creating the standard table-intensive graphical craziness that the corporate world knows and loves. However, while jogging this morning with Trip-Hop legend Cut Chemist’s urban beats resonating through my brain via my iPod, I thought to myself, “I should be making a difference.”

And so, just before a renegade sprinkler caught my off-guard, I made the decision to scrap the already hugely bloated PSD file I had been working on and focus on the beauty of the code. Unfortunately, all these people use Internet Explorer. Therefore, my first quest was to center my fixed-width XHTML masterpiece in a way in which the slow red-haired kid we all know as IE5/Win can understand.

Currently, this is how we (those idiots that somehow got stuck making web sites for people) do it…

#Container {
     width:650px;
     margin:0px auto;
     }

Setting the margin widths to “auto” is the correct way to achieve a horizontally centered layout with CSS2. Great, right? Unfortunately, the party is over. Internet Explorer 5 doesn’t understand what’s going on, likely because of a traumatizing experience in the younger years.

Thankfully, there’s a fix. We have to take IE5 to the “special” class.

body {
     text-align:center;
     }
#Container {
     width:650px;
     margin:0px auto;
     text-align:left;
     }

IE5 incorrectly applies the “text-align” attribute to elements, such as the containing body. Sadly, IE5 needs hand-holding even to the potty. That’s why we have to apply yet another hack, this time to the #Container block, in the form of a second “text-align” attribute (seen above). Since sometimes IE5 likes to center everything without a subsequent alignment after the body, we have to apply a “left” alignment to the #Container block to counter IE5′s inability to play well with others.

For my project, specifically, I didn’t really want to use this. I want it to be as simple and clean as humanly possible. So I have one more option which, I feel, is the clearly the best.

#Container {
     position:absolute;
     left:50%;
     width:650px;
     margin-left:-325px;
     }

Look at the simple magnificence of it. The subtle richness. Basically, we’ve moved the #Content block 50% over to the right. Then to compensate for the fact that our content is 650px wide, we shift the left margin to the right at an amount half of our #Container, in this case 325px. This leaves us with a elegantly centered and cleanly coded XHTML/CSS document. What more can you ask for?

Oh, and as for IE5? As the story goes, he later became a door-to-door used shoe salesman.