So I did.

After finishing my usual process of analysis I came to a following conclusions:

• I was going to change the IA
• I was going to change the markup language
• I wanted a more ‘interactive’ feel to the site

Information Architecture

As well as classification and arrangement of information I wanted to keep a common theme among the naming of the categories.

Therefore Journal has become the Notebook (keeping the design theme).

Markup Language

In case you missed the title of this post I decided to go with HTML 5. There are also some CSS 3. I was keen to try these newer models of markup, especially as a lot of the modern browsers (Firefox, IE8, Opera and and Opera) support them already.

Thumbs up especially to Opera on this.

Then I discovered there was a way to get it working in older versions of IE the decision was made.

Interactive Feel

The old site was starting to feel a bit static. I wanted a more interactive feel. Something more ‘Flash‘ Like (for want of a better term).

But I didn’t want to use Flash.

I also didn’t want it to be ‘AJAX’ crazy. I was looking for enhancement. I wanted to degrade for users without JavaScript.

1. Download and fill in the project spec sheet, this is a set of simple questions that help me ascertain the scope and requirements of your project. Be as thorough as possible when filling in the form as this will help me accurately cost and time the project.
2. Fill in the form including the completed spec sheet. When the checklist is full your ready to go!
3. That’s it!

• Colourist
• Compositor
• Designer
• Developer
• Director
• DVD author
• Motion Graphics Artist
• Producer
• Retoucher
• Video Camera Operator
• Video Editor
• Web Video Encoding

Using the following technologies

• CSS
• Joomla!
• jQuery
• php
• Sony DSR-300
• Sony PDX-10
• WordPress
• XHTML

Using the following software

• Adobe Encore
• Adobe Premiere Pro
• After Effects
• Avid Media Composer
• Final Cut Pro
• PhotoShop

In the following formats

• DV
• DV-CAM
• Flash Video
• MPEG-2
• VC-1

1. A comprehensive quote
2. Signoff sheets at every major juncture:
   • Design Approval
   • Build Completion
3. Progress reports on a weekly basis
4. Valid Code (if web)

In return I will expect:

1. A 50% down payment required to start the project.
2. The remainder within 14 days of project completion
3. The deliverables I require on the deadlines set.

Iyad Barakat, VP Internet Strategy, NME inc

This is a set of simple questions that help me ascertain the scope and requirements of your project.

Be as thorough as possible when filling in the form as this will help me accuratly cost and time the project.

Download the project sheet

Most browsers support site-defined keyboard access for specified links. On many Windows browsers, you can press ALT + an access key; on many Mac browsers, you can press CTRL + an access key.

Standards Compliance

This site complies with the W3C’s Web Content Accessibility Guidelines.

All pages are written in HTML5, use CSS for visual layout and JavaScript for enhancing the behavioural layer. If your browser doesnt support stylesheets or JavaScript enabled the content will still be accessible.

Text Resize

Windows browsers

In the majority of Windows browsers press the ‘ Ctrl ‘ and ‘ + ‘ keys to increase the text size, the ‘ Ctrl ‘ and ‘ – ‘ keys to decrease the text size. ‘ Ctrl ‘ and ‘ 0 ‘ returns you to the default ‘normal’ size.

Mac Browsers

Increase or decrease the text size with ‘ Apple ‘ and ‘ + ‘ (plus) and ‘ Apple ‘ and ‘ – ‘ (minus).

Note: Mac key convention: ‘ Ctrl ‘ is used for ‘Control’, ‘ Apple ‘ is used for ‘Command’ and ‘ Alt ‘ is used for the ‘Option’ key.

The grid system used on this site is based on the 960 grid system and utilises a 16 column grid.

Elastic Design

The site is designed to be elastic, meaning when you resize the text using the ‘control’ and ‘+’ or ‘-’ keys (Windows) or ‘Apple’ or ‘cmd’ and the ‘+’ or ‘-’ (Apple Mac) keys, the site scales and stretches to fit.

It works by sizing all elements with em’s. The quote below explains exactly what an em is and why it can be beneficial.

“A pixel is an unscalable dot on a computer screen, whereas an em is a square of its font size. Because font sizes vary, the em is a relative unit that responds to users’ text-size preferences.”
Patrick Griffiths, A List Apart.

Typography

Type is set in Helvetica and Georgia, falling back on Arial and the generic Serif font installed on the host device respectively.

jQuery and JavaScript

Jquery is the JavaScript library I am using on the site. Unobtrusive JavaScript and progressive enhancement is used throughout the site, so everything will work just fine with JavaScript turned off, albeit with less eye candy, bells and whistles!

CMS

WordPress is the CMS used on this site.

Graphics

All graphics elements are by me and copyright myself – so don’t steal!

The one exception of the Social Network Icon’s on the About page which are by Komodo Media, Rogie King and licensed under a Creative Commons Attribution-Share Alike 3.0 Unported License. Based on a work at www.komodomedia.com.

Video

All video is in Adobe Flash format as this is the most commonly used video format on the web and HTML5’s video tag still has limited and conflicting support.

Markup & Semantics

The markup language for the site is HTML5 using the semantic id and class system discussed by Eric Meyer, Andy Clarke and Tantek Çelik

CSS

All CSS on this site…

Accessibility

The site has a dedicated accessibility page here