John Kavanagh
Indie WebDeveloper
Client-side and Front-end Development. Expert in cross-browser compatibilities, beautiful layouts, accessibility and advanced CSS/XHTML

Nice Pictures

12.02.2009 1

Nice Pictures are a relatively young company made up of a group of experienced and dedicated producers focused on delivering quality feature films for cinema and DVD.

They commissioned me to develop and deploy their website in order to create a central repository to keep investors informed of their progress, to advertise the seven films they currently hold on their slate, and to attract more interest.

I was given the copy for each page and a very loose open-ended brief: as long as it displayed their films, information about them, and their email addresses (they specifically asked not to have an on-line contact form), the rest was up to me. I always enjoy this sort of project as it allows for a lot of creativity and exploration into ideas that would usually be buried under ponderous client requirements.

np-ss

© johnkavanagh.co.uk

Enlisting the talent of a good friend of mine for branding and design (more information on this process on his blog here: Latest Work - New Brand, Nice Pictures), Ant designed the slick, unique and clean interface which I then implemented into the functioning site you see today.

JQuery is well-known for it’s animation and movement abilities so I’ve built this site specifically as a Flash alternative: all the fluidity and motion you would expect from a Flash-based site with the cross-browser compatibility and search engine friendliness you get from XHTML and CSS.

There are three main areas of dynamic interactivity:

Central Panel Slide In/Out:

np-central-slide

© johnkavanagh.co.uk

Movement between pages on the site is accompanied by a smooth sliding in and out effect: sliding out. I decided against using AJAX to dynamically load the page contents into an outside frame again for the SEO implications, so each new page loads and slides in, whilst each external link triggers a wait whilst the content slides out, and then loads the new page.

Home Page “Book Shelf”

film-carrosell

© johnkavanagh.co.uk

Displaying six films from the company’s slate on the main page using a carousel effect to display more information (and links to view each film’s page) in a book shelf arrangement allows for them to decide which films they want to promote in this space, and grants access to a larger amount of information than would usually fit in such a small space.

Vertically Self-Centering

Using a listening device in JQuery this website will automatically rearrange itself to sit perfectly centre in your browser window when you resize it, keepign the important information central to the browser’s attention. A small amount of easing makes this movement less jarring, allowing the viewer’s eye to easily follow.

Responses to “Nice Pictures”

Trackbacks

  1. Make PNG Alpha Transparencies Work in Internet Expolorer 6 » John Kavanagh : Indie Web Developer

Leave a reply