I’ll get the technical stuff out of the way first: The site is coded in HTML5 and uses the media queries in CSS3 to detect the screen size. ExpressionEngine is powering the backend and is actually drawing content from across multiple websites using the multi-site manager. It features a Vimeo widget on the front page to display the latest videos and a custom Google Search.

Here is a quick rundown of the various screen sizes (click the images for larger versions):

At the largest size, 1200+ pixels, the layout has 3 columns. The idea was to make the coming events prominent and have the featured video feature prominently in the center of the screen.

The medium size is the primary size for most desktop computer screens. The thumbnails of past videos move to the bottom since they’re the third most important piece of information. The two column layout works well with the content with a submenu on the secondary pages.

The iPad or tablet size takes the layout down to 1 column and boosts the text size for the smaller device. That is a main complaint I hear with websites on mobile devices – the text is too small! One of the coolest parts of CSS3 and responsive web design is being able to address and fix issues with the viewing platform with respect to the content.

The iPhone or phone size continues using the 1 column layout and larger text. However, the menu for past events and presenter bios moves down to the bottom of the page because we felt that most people that come to the site on a phone are looking for the upcoming events and we wanted that to show up first.

I’m really excited to continue working with responsive design on the web! It makes a lot of sense to me since the web is a flexible and adaptable medium to begin with. For more information on responsive web design, check out this article on A List Apart.

So, go ahead and try the site out! On most modern browsers, you should be able to just resize your screen to see the different sizes take effect.

UPDATE: I wrote an overview of responsive web design over at the Stratepedia blog if you’re interested in some other examples.

One of my best pals and programmer extraordinaire Greg Aker asked me to come up with some monster illustrations for the header of his web site. It was a lot of fun because it’s not the kind of thing I get to do often. We had talked a while back about doing a “seasonal” header to help keep his design fresh year-round and so I’ve been slowly cranking through them for him to use! So far, I’ve got Winter, Spring and Summer.

If you have an interest in web development, CodeIgniter and CMS systems like Django and ExpressionEngine, you need to check out Greg’s site. He’s a total master!

I also did a couple of crazy monster Twitter birds for him to use and he even did a mouseover animation on them!

When we first started out on this, we used it as an excuse to try out the now-defunct Google Wave tool for collaboration. It worked OK, but was ultimately more trouble than it was worth, mainly because it involved sending an email to let each other know there was new content up. That totally defeated the purpose, I think, so no real surprise that it didn’t work out. Below are a few of the initial sketches that we tossed around on that wave:

Site layout ideas.

Refined layouts.

Crazy ol’ Twitter birds!

I love doing graphic design for classical musicians and so I was thrilled when violinist Tami Lee Hughes asked me to design a web site for her. She’s an extremely talented musician (look for her CD to come out soon!) and I had a lot of fun shooting her photos earlier in the year, too.

The site is hand-coded and implements a custom CSS design with jQuery and BlueprintCSS running behind the scenes. The site just launched, so you can check it out at www.tamileehughes.com!

I was fortunate enough to be asked to work as a beta tester for the newest product from EllisLab called MojoMotor! The product just launched, so I wanted to give a few thoughts on this cool new web development package.

What is MojoMotor?
MojoMotor is a web publishing engine that, in my opinion, bridges the gap between a tightly hand-coded web site and a template-based CMS that’s easy for a non-programmer to update. It has a back-end interface that sits “on top” of your website so, when logged in, you can basically just type directly onto your web page and save the changes. This is particularly appealing from a designer’s standpoint because you don’t have to have a lot of web knowledge to update the content which fits the needs of a lot of clients out there. You could set up the site and hand it off pretty easily. That’s not to say that, as a programmer, you give up control. You can still edit the html/css files and can have full html source editing on every page for more exact tweaking. Here’s a link to their overview for more information.

What is MojoMotor not?
MojoMotor is a great tool for setting up small to mid-sized brochure web sites. It does have a database running behind the scenes, but it doesn’t work as a blogging engine. That being said, it would probably handle a large percent of the web sites out there. You could also easily integrate it with a service like Tumblr to add a blog. They’ve also provided an export function to migrate the site over to ExpressionEngine if the site grows beyond what MojoMotor is capable of. In their words:

MojoMotor does not strive to be a full-powered, high-end Content Management System such as ExpressionEngine. It does not have categories, dynamic entries, conditionals. It does not have search, date-based input or logic. MojoMotor is simple, clean, and straightforward. It is not ExpressionEngine lite, it is ExpressionEngine junior.

What does MojoMotor look like?
For the sake of beta testing, I started up a website for my wife, www.anniegnojek.com (still in progress) who is a musician and flute educator. She had been wanting a site that was a few simple pages, contained some audio clips and that she could go in and edit when needed.

After mocking up the site in Adobe Illustrator, I started coding the site like I would with any other hand-coded website. Basically, I created a one-page template and got the CSS on solid footing. From there, I added a few CSS tags to the content areas which tell the program what to make editable. Then, I used the import feature to pull the template into MojoMotor. It was really that easy. I then added some pages (which can be ordered by dragging and dropping) and started plugging in content all within the user interface. You can also have separate templates for different pages, so it’s pretty flexible.

click to enlarge

Once you log in to your site, you’ll be looking at . . . your site, with the exception of a small pull down tab at the top. This lets you toggle the editing mode on and off, so if you navigate to a page and pull the tab down, you will see the content area highlight allowing you to go in and edit the content. Hit save and the content is permenantly changed and shows up live on the site. You can also set up different users so certain people can only edit content while others can update the admin settings.

This is the content area highlighted and ready for editing.

Here, the content area has been made editable and it’s just a plain WYSIWYG editor with the option to view the source. Once I hit “save” the edits are made straight onto the live website.

Final Thoughts
As a designer, I think that MojoMotor fits the needs of a large portion of my clients. It’s simple, clean, easy to update and operate, yet flexible enough that I can make something unique and meaningful. It’s a great product that I think deserves a look if you’re a designer and content provider on the web.

www.mattwilsonjazz.com

I’m extremely excited to announce the launch of a new website that I’ve been working on for jazz drummer, Matt Wilson! Matt is an educator/drummer/composer & band leader and a winner of several Downbeat and Jazz Journalists Assn. awards.

Over the past month or so I’ve been working along side my good friend, fellow sax player and web programmer/designer Greg to design this site. I first saw Matt perform live with his group Arts and Crafts in 2007 at the IAJE conference in New York and was blown away, so when Greg approached me about working on his website, it was a total no brainer. Matt’s a great guy and an incredible musician, so if you ever have the chance to hear him perform, be sure and check it out.

(Here’s a shot of a secondary page from the site)

Here’s a video of Arts and Crafts performing The Scenic Route live at the 2007 Elmhurst Jazz Festival. Also of note is the phenomenal organist/pianist of the group, Gary Versace, who taught here at the KU Jazz Workshop for a number of years.

UPDATE: Matt’s site was recently featured on the web-design blog, Most Inspired!

Rather than have a bunch of columns or unnecessary information, I decided to try out a skinny design (440px!) to see how it works and I think it’ll be just what they’re needing. I also utilized some MooTools on the front page which are some cool javascripts that fail very elegantly if the viewer doesn’t have javascript running. Always important for accessible websites!

Check it out at www.kansasflutefestival.com!