Program Overview

Classic Courses

Busy Lives

Tough Times

1. Quick starting point for theme development.
2. Reusable template partials for loops.
3. Clean and organized structure.
4. Variations and design options.

We started working on a theme for a project using Carrington and the Blueprint CSS grid in October. We completed the design and most of the code in November. The project was then put on hold for a couple months. During the project hiatus we began exploring the template features built into WordPress itself and found some really nice stuff.

We discovered the function get_template_part which was introduced in WordPress 3.0. This allows you to keep your code consolidated and clean by including other files besides just the header, sidebar, and footer into pages like an archive and index page.

The ability to have multiple loop files for custom post types or partials for excerpts or page navigation was a big draw for us in Carrington. Now that we can do the same thing in WordPress, we began to weigh pros and cons of using a theme framework. Ultimately we decided to stick with WordPress’ built-in functions.

Since we code most of our designs by hand, we don’t necessarily need a lot of the functionality that Carrington provides. Therefore, we decided it was easier to use the build in WordPress functions and keep everything in one theme directory rather than a lot of sub-directories which often caused confusion and time as we would have to sift through sub-directories looking for a particular file.

One big con for us in using a framework is having to keep it updated like a plug-in. For Carrington it’s actually pretty easy, you just replace the carrington-core directory in your theme. You then have access to the new features of the core update. You just have to make sure you didn’t change anything in the core directory and that everything works as it did before. For us, that ended up being more of a hassle.

In conclusion, we like the built-in theme functions WordPress 3+ provides. They work well and don’t get in the way of our workflow. After the hiatus ended on the project we started back in October a couple week ago, we decided to go back and tear out the code from Carrington and just build a regular theme. It took us about three days to successfully pull everything out.

Having never been to The Windmill or even Florence, Arizona we learned all we could from pictures and talking with the client. We got a good sense of the atmosphere and history of the property and the historic barn which is the visual cornerstone of the winery.

The Windmill is more than just a winery though. They host a number of events and weddings throughout the year. So the site needed to reflect that and be more than just about wine. We really wanted to give visitors to the site a sense of stepping onto the Windmill property and feeling the upscale rustic setting.

For the design we went with the idea of a wine label. We wanted the user to feel as if they there looking at a label on a bottle. It’s very important that the user understand that the Windmill is a winery which is perfect for their event or wedding. Rather than a place to have a wedding that also does some wine. There needed to be a clear message and brand established in the redesign.

This message distinction was especially important when it came to promoting and marketing for weddings. People want to have their wedding at someplace unique and special. To say, “We do so many weddings a year so you should check us out,” doesn’t exactly sell the property and features. Instead we changed the message to be about the winery and the location that is perfect to host a wedding.

Check out the new Windmill Winery site.

In any creative endeavor, especially creative ones that put food on the table and pay the bills, practice is essential, necessary, and always worth the time invested. I don’t think I’ll ever feel the sense of having “arrived” creatively. In many ways I hope I never do. There will always be something else to learn and conquer, always.

This is a Test

The below video named “AT” is a small side project aimed at practicing some 3D and post-production techniques. I took a list(current at the time) of our Twitter followers and used their usernames as textures and particles. I found Dave Trautz through The Wire and he graciously agreed to compose a score I could work with. Dave has a ton of talent and I hope to work more with him in the future.

Moving Forward

Stay tuned,  more side projects in the works.

The concept behind Buzz sounds pretty cool. We looked into it, added it to our Gmail accounts and have connected with each other as “friends”. Okay, now what?

Here’s the problem for us. We both have Gmail accounts, to which we’ve tied other Google features like iGoogle, Reader, Webmaster Tools, and Analytics. Nothing new or revelatory about that. The part of the Google account that we use the least is Gmail, aside from a couple mailing lists.

We have nothing against Gmail, in fact we love Gmail. We’d even wear “I heart Gmail” t-shirts under our jackets on a cold day. The Spam protection rocks (Yes, rocks, I could have used bitchin’ but didn’t want to take you back that far in time), the mailbox size is amazing, and the IMAP access is nothing short of awesome. But, we love Gmail inside Google Apps where our email addresses use our own domain name not Gmail’s, and where we do most of our correspondence. Unfortunately, Buzz doesn’t work with Google Apps, yet. We’ve read rumors that it’s coming though.

The larger problem we see is that in order to use Buzz you have to have a Gmail account and use that account for all your correspondence be it business or personal. That’s not the case with Twitter, Facebook or even Flickr. We can, and do, have one Twitter account for business tied to a business email and then individual personal accounts tied to different addresses. With the other social media apps I can use any email account to keep up with friends and clients. With Buzz I can only communicate with my friends who happen to have Gmail addresses, forget AOL, Hotmail, Yahoo, Mobile Me, etc. Finally, the big downside is business correspondence. How many people who want to be taken seriously use a plain ol’ Gmail address for a business email?

Even if Buzz does get added to Google Apps our fear is that you’ll still be limited to only communication with other Google Apps or Gmail users. That leaves out a lot of clients especially medium to larger organizations that run their own Exchange servers for email.

Bottom line, is a social media feature or app good when tied so closely to a particular email provider? We don’t think so. But perhaps we’re over thinking it. Maybe Buzz isn’t supposed to be used in a business environment. Guess that’s where Twitter and Facebook will have to pick up the slack.

The new ActiveWrap blog runs on WordPress and was coded with HTML5 and CSS3. We took the design of ActiveWrap.com which I did in 2007 and brought it up to date. The original site design used XHTML transitional while the blog uses HTML5 with many of the cool new tags like header, footer, article and aside.

The Problem

When I did the original design I set the width of the site at 900 pixels and created all the graphics to match. You would think I would have used the same structure and made it easy on myself…nope. Instead I decided I wanted to use the BluePrint CSS framework that we’ve been using for awhile. I like the BluePrint framework because it makes structure really easy, and it includes some nice typography and form styles.

The problem with switching to BluePrint was that by default BluePrint is set up at 950 pixels. Thankfully, they have a nice Ruby script that allows you to customize the width and size of the grid columns so that you can essentially make the site whatever width you want to. So after doing a little math I was able to setup BluePrint to do 24 columns, each 28 pixels wide and a 10 pixel gutter, that brought the site width to 902 pixels.

For the geeks or anyone who cares, the formula I used to figure out the perfect width was: (xy) + ((x-1)z) or where x = 24 for the number of columns, y = 28 for the width of each column, and z = 10 for the distance between each column all in pixels or simply (24 x 28) + (23 x 10) = 902

I didn’t know at first if I was going to be able to get away with being only two pixels short or not on the graphics. I should have known better. A couple pixels short might as well be a football field. So, I had to go back into the source files and extend them by 2 pixels, all that just to use BluePrint. But in the end I think it was worth it.

Finally, in addition to some rounded corners here and there, I decided to put a little drop shadow on the header and content area just to add some CSS3 interest for the kids.

Overall the design ported over pretty nicely from XHTML to HTML5 and from Joomla 1.0 to WordPress.

I love music where I can listen over and over again and hear something new almost each time. Live From The Inside is that kind of album. It has has staying power and the melodies are super infectious. I often find myself humming them throughout my day.

A must have companion to the album is the Live From The Inside DVD. As a musician, I love it when I can go beyond just listening to the music. The Live DVD lets the viewer play the metaphorical fly on the wall inside the studio. It’s truly musical voyeurism at its best. I actually wanted to see the DVD so badly that I purchased the album twice, once on Amazon Downloads then again just for the DVD.

If you’ve never listened to Culbertson’s music, take a listen to Live From The Inside. If you’re a fan of great music, even if you’re not into Jazz, you won’t be disappointed. He is a musicians artist, and Live From The Inside lets you peak inside the process of rehearsal and recording unlike I’ve never seen before.

From Window to Sliding Door

Culbertson’s latest endeavor takes the window that he opened with Live From The Inside and makes it a sliding door right into his studio. He has started a YouTube channel where he is posting almost daily video blogs of his whole process from writing through recording his new album which is due out later this year. In the first couple videos Brian takes the viewer on a tour of his studio. He talks about his gear and instruments, a total musicians dream. He follows the tour up with a visual walk through of his songwriting process. So far I haven’t missed a video and I look forward to watching as the album comes together over the next several months.

Being that Honu Studios is a creative agency, we naturally love creative things. Since I spend most of my day working online, I love it when I find a creative use of a web app or service. The way that Brian Culbertson is using YouTube to bring his fans into his process and pull back the curtain on his music is just awesome. It will be really cool to listen to the final product and be able to remember the video where that song was just a melody line and in its infancy. The videos also make for a good entertaining break from daily work.

One final note, as a coffee lover I have to point out that there is one thing missing from Brian’s studio, a Keurig brewer. There is no better coffee maker than a Keurig.

For us it’s not about jumping on the latest in geeky coding trends, although it’s fun to learn new stuff. It’s more about cleaner, leaner, and prettier code. When it comes to coding, it’s always the goal to be able to do more with less. Which is why we’ve wholeheartedly embraced CSS rounded corners and drop shadows. It’s always a pain to create the graphics for something that seems so easily done in the browser.

As part of the makeover we changed the menu around and on the CSS side of things we added a semi-transparent box behind the links and a white drop shadow to give the menu a bit of a glow. To do the semi-transparent box we used the CSS background-color property setting it to rgba(36,62,115,0.5) the ‘a’ is for alpha, or the opacity channel, here were setting it to 50% opaque.

To finish the makeover, we decided to top the whole sundae off with a little CSS3 animation cherry up in the header on our main site. To see the animated cloud goodness though, you’ll have to have Safari, Chrome or Webkit.

From Joomla! and XHTML to WordPress and HTML5

When I redesigned the site several years ago I switched to Joomla! because of the “module” positions and the non-blog way that content is organized. But Joomla! is complicated to learn for most clients and it can be a pain to work with. Since that redesign, WordPress has really become much more than a blog engine, it’s become more of a versatile CMS, so I switched the site back. Switching is easy to do when there isn’t a lot of content. The site was pretty much a place to showcase Johnny’s remixes and announce event dates. Back then XHTML and CSS2 was the way to go so that’s what I used.

Why HTML5 and CSS3?

Given the ability to play and use more cutting edge code, we decided to fully go with HTML5 and CSS3. HTML5 is the way of the future but it’s still young and new and not yet fully supported by the current Internet Explorer, but there’s a way around that. We’ve been using the HML5 doctype and CSS3 styles and effects for months, but that’s where our adoption stopped. With Johnny’s site though we decided to take a chance and go all the way with the structural markup.

The advantages of HTML5 are numerous, but for a blog the big advantage is the structure that HTML5 element tags like header, article, section, nav and footer bring to the document. No longer do you need to mark up a page with this familiar code:

<!DOCTYPE html>
<html lang="en-us">
<head>
</head>
<body>
<div class="header">
  <h1>Shasta's Cookie Cart</h1>
  <div class="menu">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</div>
<div class="content">
  <div class="post">
    <h2>Post Title</h2>
    <p class="date">Post Date</p>
    <p>Post copy in here.</p>
  </div>
  <div class="post">
    <h2>Post 2 Title</h2>
    <p class="date">Post 2 Date</p>
    <p>Post 2 copy in here.</p>
  </div>
</div>
<div class="footer">
  <div class="menu">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
  &copy; 2010 Shasta's Cookie Cart
  </div>
</div>
</body>
</html>

Now HTML5 brings logical, semantic markup that not only makes sense to the geeks but to search engines, screen readers and other not so geeky folks. Without being too geeky the above code would turn into:

<!DOCTYPE html>
<html lang="en-us">
<head>
</head>
<body>

<header>
  <h1>Shasta's Cookie Cart</h1>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

<section>
  <article>
    <header>
      <h2>Post Title</h2>
      <p class="date">Post Date</p>
    </header>
    <p>Post copy in here.</p>
  </article>

  <article>
    <header>
      <h2>Post 2 Title</h2>
      <p class="date">Post 2 Date</p>
    </header>
    <p>Post 2 copy in here.</p>
  </article>

</section>

<footer>
<nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
&copy; 2010 Shasta's Cookie Cart
</nav>
</footer>

</body>
</html>

Once the HTML5 code was in place we styled the site with some CSS3 markup. We’ve been using CSS3 markup for awhile now to do cool things like rounded corners, drop-shadows and reflections, so that wasn’t as new for us as using HTML5 markup for the site. Unfortunately Internet Explorer doesn’t currently support CSS3, we’ll just have to wait for version 9 for full support. However, Safari, Mobile Safari, Firefox, Chrome, and Opera do, so why not use it? It won’t look bad to IE users, just…plain. Though IE9 promises more support.

Summation

So to sum it all up, HTML5 and CSS3 are great, new, shiny, and make a designers day. We’re beginning to use both in our day to day work for clients as we can.

Johnny Knight is open to cutting edge stuff, a great DJ, and can also be found on Twitter @djjohnnyknight.

Internet Explorer users won’t see all the shiny HTML5 and CSS3 coolness just yet, but they’ll still see your content and be able to navigate the site just fine. Ultimately it’s up to our clients when it comes to things like CSS3, most are cool with it and don’t mind that some can’t see the coolness. It’s kind of like wearing a pair of KangaROOS®, some people don’t see the cool factor. But, those that do, appreciate the statement of fashion and the sweet hidden pocket.