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.

I just launched a new identity and web site project for a music organization in New York City called Ars Viva Music. Ars Viva consists of 3 main parts, a private music studio, small chamber music ensembles for special events and commissions, and a larger chamber orchestra. I love doing graphic design for classical musicians, so this was right up my alley!

Above is just a snippet of the sketching I did before doing a few refined logo sketches on the computer.

Home Page

I’m excited about this site, in particular, because it represents my first efforts in coding in HTML5. It really just takes advantage of the new semantic markup which I really like. I think it’s going to make for a much cleaner and easier to read web someday. I also think HTML5 will be great for people who rely on assistive technology to surf the web (like screen readers and such). I’m looking forward to the audio and video portions of HTML5, too, so I hope that technology becomes more mainstream soon. For more information, I found Dive into HTML5 very helpful as well as HTML5 for Web Designers.

View the Ars Viva web site online!

Secondary Page

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.

For those out there in iPhone and mobile browser land, the DESIGNOJEK blog is now iPhone accessible and has a special format when viewed on a small screen. Give it a try! Also, if you make a web clip on your iPhone, there’s a special icon for that, too.

While I’m on a roll, I’ll just get the geek out of my system now:

• - Sun Jar: got one as a gift recently. It’s awesome!
• - Store your new computer with AirMail
• - Some light for your office
• - Public domain images from the Library of Congress!
• - Recycled CD sleeves
• - Cool iPhone emulator – good for website testing