WIAW! Bolder and Brighter with a Cheerful New Design

(Reading time: 5 – 8 minutes)

Long time readers might notice something a little different this morning.

Ok, a lot different!

Welcome to the new Website In A Weekend.

Bolder!

Brighter!

More cheerful!

I’ve always been a fan of bright colors. Most of the art I have is bright and cheerful, with oranges, purples, greens, blues, reds and golds. Websites I really like include Laura Belgray’s Talking Shrimp and Kristi Hines’ Kikolani, both with bold, cheerful colors.

(Kikolani? Talking Shrimp? What the hell do talking shrimps have to do with copywriting? Does it matter? NO! Keywords my shiny red…)

Anyways, it’s loud, it’s proud, and I’m running this design for the next six months.

By the way, if you don’t like the new look, that’s ok. Some people will love it, others will hate it. (What’s important is how it converts. More on that later.) I’ve already been informed that the size of the logo indicates a certain “anatomical inverse relationship,” and from someone else that “I don’t like your colors.” With respect to this second remark, that particular gentleman programmer is most definitely not in my audience. The first assertion gives me a bit of pause, coming from my colleague Al, a brilliant, professional Web 2.0 designer.

Given the new Google Instant Preview, maybe it’s a good thing I’m not a Web 2.0 blog. Larger banners such as those on Corbett Barr’s ThinkTraffic, Annabel Candy’s Get In The Hot Spot and Copyblogger will certainly stand out in Google’s preview. As will Website In A Weekend.

However, I value Al’s advice, and I suspect you will hear more wisdom from him in the future (He’s really, really good). But we’ll table that for later.

Both the redesign and the launch have been a team effort with Roberto Koci and Teresa Deak. If you haven’t yet met these talented folks, let me introduce them.

Roberto Koci – Red Diamond Studio

I’ve worked with Roberto Koci since December 2007, nearly 3 years. Roberto consistently delivers high-quality work. Having worked professionally in print graphics, he has a great eye for color as well, and isn’t afraid to take design risks.

For this particular project, the constraints were staying within a nominally GPO (green-purple-orange) color scheme, and increasing contrast by darkening accents while increasing white space.

Furthermore, the whole implementation is in Thesis theme. As explained below, we used Github for version control and distributed development. Roberto could add a set of changes which I pulled to my local server, modified, then pushed back to Github for Roberto’s use. Very convenient.

The Social Butterfly Solution

Teresa Deak of Social Butterfly Solutions played a critical role in the success of this launch. One of Teresa’s core business services is providing uniform branding across related websites, or “outposts.”

Uniform branding in this case means propagating the banner and color scheme to Website In A Weekend’s outposts. Teresa provided branding for:

• Amplify: provides a stream similar to Twitter, with posting similar to blogging (including tags and categories), and clipping similar to Clipmark. That turns out to be a powerful combination. I use Amplify to support certain links (it’s do follow), and as a sort of “super-bookmarking” system. Even more cool, Amplify is built on WordPress MU.
• Gravatar: Most people log in to Gravatar.com exactly once, to register and upload a photo. As it turns out, there’s more you can do at Gravatar. Did you know you can set a collection of links to various websites and social media profiles? That these will appear on any blog implementing Hovercard? You can see Hovercard in action on Website In A Weekend, just roll your cursor over my Gravatar in any comment.
• Posterous: is another so-called microblogging site, useful in part because it’s easy to post by email. Often, when you send me a question by email, I’ll cc: (or bcc:) my reply to Website In A Weekend’s Posterous account to use for a future blog post. Posterous also accepts clipping, which is useful for grabbing comments and excerpts for quoting in blog posts.
• Twitter: There’s not a lot new I could say about Twitter. Find me here: @websiteweekend.

All these outposts went live a couple of weeks ago. These had to be done manually; can’t just switch themes as with WordPress. That’s more difficult to synchronize so we pulled trigger on each when ready.

Relaunching Website In A Weekend

Anyone in this business long enough figures out that “getting it right” is a little more involved than shoving a new theme on the web server.

For example, if you’re reading this on 1:25 pm November 28, 2010 Pacific Time, you may notice this blog post isn’t exactly finished. Turns out I accidentally hit “Publish” instead of “Save Draft,” and didn’t catch it before it went into the RSS feed. Once it’s in the feed, it’s impossible to get it out (show me I’m wrong, I’ll thank you for it).

In any case, a few more notes:

Collaboration: We used github for synchronizing files. This made it far easier to determine who had the correct version of each file, and to merge in changes when both of us worked on the project’s PHP and CSS files.

Testing: first round of testing is moving from Roberto’s private server to my private server. This exposed a number of issues, primarily in plugin modifications. (Some of which hasn’t been deployed yet.)

Tweaking: Final tweaking occurred on my local server, where I have an entire hosting and development system installed.

Roll out: was pretty simple. Since git branch management is so convenient, the existing design (violetminded) was maintained in parallel with work on the new design (reddiamond). Deployment reduced to a single rsync command:

$ rsync -essh -vta --cvs-exclude custom myusername@myhost.com:public_html/websiteinaweekend/wp-content/themes/thesis_18

Thesis 1.8 doesn’t have child themes, which is becoming a serious handicap for quickly rolling out an updated design, so this combination of git and rsync worked well.

Because there were so many changes (mostly beneath the hood), the roll out has been proceeding for several days. What you see today are the last pieces: the banner, background and footer.

How did your last redesign and roll out proceed? Any bobbles, or smooth sailing?