It would have been a shame to waste the ideas we had and the planning we’d done so I got in touch with local artist and teacher Sam Meech who I met at one our SWIG events. Sam had put together the existing Plaza website using an off the shelf theme but it had it had it’s fair share of problems when it came to maintaining film times and organising content.

Background

photograph by Mark McNulty

The Plaza cinema has had a few different owners through the years. When I was little it was an Odeon cinema and being just around the corner from my home it was always where I went to see films throughout my childhood, the first one I remember being The Rescuers, then not long after that I remember being utterly petrified by the ‘giant’ scorpion in Honey I shrunk the Kids!

photograph by Mark McNulty

After a closure and reopening as the Apollo cinema, the old art deco building eventually came under threat of demolition. This did not go over well with the community in Waterloo and the surrounding areas! Happily the cinema was reopened as a charity and is run by its fantastic volunteers so it really does belong to the community. I was only too pleased when Dave gave the nod to spend the time that was booked for FACT to create a new website for the Plaza, a place that was very much a part of my formative years.

Getting Started

We met up with Sam, James and Martin who were the volunteers responsible for managing the website to find out what their thoughts were and to share our ideas. the response was very positive and as it turned out I had (almost) complete freedom to get creating.

There were some branding guidelines and a logo in place developed by students at the John Moores University Art and Design Academy under the guidance of Sam, some photos by Mark McNulty and Michael Sheerin and a plethora of printed material to start from.

AutomatIC for the People

Before I could get too engrossed in designing the website there was one pretty crucial technical aspect that I wanted to address – streamlining the process of gathering data about the films.

I created a plugin to integrate themoviedb.org’s API with WordPress and you can see it in action on this dodgy screen cast Dave put together.

The nice thing is with the approach I took to writing the plugin its functionality can be added to any post type using the built in wordpress method:

add_post_type_support( 'post_type', 'movie' );

That line on its own adds all the custom taxonomies for actors, genres, directors etc… and the meta box for searching the db and populating the post data and gallery.

You can grab the movie db plugin from github.

Recurrence, recurrence, recurrence…

That word starts to look funny written multiple times… This is the technical issue that caused me the most sleep deprivation due to the regularly shifting schedules of the movies. The events management plugin we’ve been developing already had a means of creating repeating events but for movie listings the game changes in a subtly significant way. I had to make it possible for an event to happen multiple times within a single day, but also at different times within the day over the course of the repeating event. For example a film might be on at a fixed time every week day with extra showings on the weekends and one day of the week where it was not on at all.

The events interface showing subdaily times

While the implementation I came up with may not be the best, especially in terms of the data structure the guys were able to get on with the UI without too many problems.

Research

The Plaza has a few unique points that set it apart from the likes of the Odeon and other chain multiplexes. There are midnight screenings for new and classic movies, family screen events, charity or film festival events, film club events, autism and disability friendly screenings as well as community outreach projects.

Autism

Most of the above would be covered by providing a means of categorising the movies however one notable element of the design was that the site would be catering to people on the Autism spectrum. Cue the hive mind! I asked for some advice from my followers about any experience or knowledge they had of design considerations that I should be aware of for the project. I received a slew of very useful tips and links from Paul Timney, Anthony Casey, Andy Chesters and a few others whose tweets I forgot to archive (sorry!).

In summary some of the main considerations to make are:

• Yellow type on black is easier to read (same goes for visually impaired users)
• Avoid having too much on the page – multiple columns or too many boxes of info could lead to confusion
• Spacing of type is crucial, in particular the use of generous leading
• Simple or clear fonts at a slightly larger size than on a normal website
• Consider using PECS symbols (Picture Exchange Communication System) which a lot of people on the autistic spectrum use, often their reading is not too great and PECS is a universal system

Andy got his information from his partner who works at Landgate School in Wigan who specialise in educating young people on the autism spectrum. He went on to ask about the use of movement in web design eg. animated type or images or flashing for example. The response was a little unexpected:

Moving type or animations could actually engage them as long as they’re not too random, complicated or chaotic

Good to know!

So the question is – did I follow all of this advice? Well, no, not all of it. Although people on the autism spectrum make up part of the audience I was still designing for everyone else too (and partly for myself as a punter of the cinema).

I did heed the advice given to me in a few key areas though:

• Plenty of white space
• Use of icons for the main menu items
• Simple and familiar font
• Only 2 columns in the main content areas
• Avoided information overload by leaving out excerpts and sticking to a minimum of content on each page while still having a site that was easy to get around and discover content in
• The site can be linearised and further simplified by reducing the width of the window or browsing on a mobile
• The animations are used when appropriate and are quite subtle (in my opinion of course)

If you want to find out more there is a lot of information to be found on autism.org.uk

ART DECO

image via bikeexif.com

The cinema building is a classic example of art deco architecture as you can see from the photos. Given this heritage I began looking into the art deco style, in particular the vehicle designs of Harley Earl piqued my attention. My favourite find was this 1930 Henderson motorbike (not by Harley Earl) that looks like something out of Sky Captain and the World of Tomorrow.

It echoed part of the branding already in place for the plaza in the shape of the horizontal stripes common to art deco design. The polished solid colours influenced the decision to make the header into a band of bright colour rather than to have the movie backdrop behind it as in some early mockups.

A scrapped idea for the home page

Other common features of the art deco style are the geometric arrangements, pleating and fanned lines, I experimented with bringing this detailing in at a few points but none of it felt right. I don’t feel that it’s a huge loss however.

I opted to stick to the simple 3 lines motif in only a handful of places and also mirrored the architecture of the building itself in a more subtle way to carry the design through. The grid I adopted was a 5 column fluid grid. By working from a width of 1000px it was easy to calculate relative percentages for my columns and sub elements. By making the design fluid it meant that it would still work when shrunk down up until the break point where the site becomes linear on an iPad held portrait-way.

Why a 5 column grid? If you look at the photo of the front of the cinema at the beginning of this post there are 5 columns punctuating the facade. I felt this was a perfect way to marry the physical object and its digital representation.

Rounding off

Hopefully you’ve gained some insight in to the approach I took and the considerations behind the end result you see below. Of course I should mention the contributions and suggestions from my colleagues Dave, Tom & James that helped to improve the experience and also the feedback I received from industry peers. Thanks to input and feedback from Jon Grant, Nick Toye, Cole Henley and numerous others (I love twitter!).

After a very iterative design process and many many meetings with Sam to squash bugs and to tidy up and simplify the display of the film times, my first real foray into responsive web design has been well received by the cinema, it’s volunteers and customers. It’s always a good sign when a client has been happily updating their site with very little in the way of support from us after the initial training session.

As for me I’ll never be truly satisfied with anything I do, although the movie times section is damn tasty if I do say so myself!

The design combines form and function beautifully.

This year we donated some of our time and energy to Crosby, Liverpool’s Plaza Cinema.  In part they were selected because we’d just missed out on the running to redevelop the FACT website after having made the shortlist.  We had heads full of great ideas for the presentation of cinematic information and schedules and we fancied implementing them.  Rob, the designer and developer of this site, had just moved into a new house around the corner from the Plaza Cinema and couldn’t help noticing that their site could benefit from our skills.  An idea was born, some calls were made, and a plan fell into place.

Services Provided

• Full Web Design
• Development of sophisticated WordPress theme
• Extension of Events Plugin to handle complex cinema schedules
• Development of TheMovieDb.org API plugin to improve workflow
• Custom taxonomies
• Hosting
• User training
• Ongoing user support
• Links to newsletter subscription systems
• Ongoing content management support

Site Design

A cinema website design is a tricky thing to get just right – after all, you need to be able to easily present complex scheduling information (what’s on, what’s coming soon, etc) whilst at the same time allowing the films to sell themselves.  We wanted to create a cinematic experience within the browser quite unlike the surprisingly poor visual experience of most cinema websites.

The design language within interconnect/it is very much based upon typographic systems following mathematical structures.  There’s not only a grid of columns, as is common on websites, but a carefully structured typographic scale allowing for the creation of vertical rhythm.

With the strong typographic there is little need for graphical frippery and instead you can allow the text and movie images to really stand out.  On the movie pages we use large backdrop images, pulled in automatically from the TheMovieDb.org, to create a visually bold statement with very little effort from the site administrators.

The simplified small screen view.

On top of this there is a dynamic feel to the site where hovering over film names changes the backdrops, and clicking them has the feeling of dimming the lights while the film trailer is pulled in from YouTube.  The feeling of being at the cinema is reproduced in these actions.

Responsive Design

Not only is the site visually powerful on a large screen or laptop, it changes itself should you have a small screen such as a telephone or tablet.  This responsive design allows for a simplified presentation whilst retaining all the important information.

Time-Saving Workflow

One key element we focus on at interconnect/it is that visual design is nothing without a good workflow for the people who assemble the site.  A CMS should never slow down or stress the user or visitor, and we look at what takes up their time and what we can do to save it.  In this site’s case, the ability to automatically pull in movie descriptions, images and taxonomies such as actors and directors means that a lot of time is saved in creating the site’s content.  It used to take about an hour to create a film listing whereas it now takes around five to ten minutes to not only list the film, but allow visitors to view trailers and see the key people involved.

This video shows how the workflow comes together:

Visit the Plaza Cinema website and see for yourself why it’s a step forward in cinema website design.

Gallery

Tuesday 24th January @ 6.30

SWIG started off as a purely WordPress based community group meeting at the interconnect/it offices.  It’s clearly become something more than just that and is of interest to anybody who works and lives on the web. With speakers on topics as diverse as copywriting and business management as well as the continued WP interest we’ve now decided to run a larger occasional paid ticket event called bigSWIG.

Leaf is a great venue in central Liverpool, with excellent food, alcohol and soft drinks available, making for a convivial and relaxing atmosphere.

Speakers:

• Dan Donald
  Reactive web design – designing for context
• Jake Smith
  WordPress in the wild - megadrive.me
• Lydia Bates
  Writing for the web
• Chris Hough
  Creating a theme options panel

Q&A session

Get the answers to any burning questions you have about web design and WordPress.

Tickets

• £5
• £4 for students

This is the first time we’ve tried to run SWIG as a larger event so please please please spread the word!

One day we'll do a proper logo

SWIGmas is the end of year get together for all SWIGgers – we’ll relax a little, have a drink, and watch some entertaining and thoughtful videos on a range of web and design related subjects. Nothing too heavy, and we’re not planning on anyone giving a talk as we know how hard it is to prepare in the run-up to Xmas.

This month the event is being held on the fifteenth, rather than the normal last Thursday because… well, we all know that an event in the middle of the holidays will be quiet to say the least.

In January we have Dan Donald from Speak the Web presenting on an as yet undisclosed topic so don’t miss it! Tickets for the January BIGSwig will be announced shortly.

Meeting Location

This meet-up takes place at the interconnect/it offices. The SWIG meeting room takes place on the first floor of the Liverpool Science Park (meeting room 1, up the stairs to the first floor once you enter the building, through the propped open door and then first on your right).

Agenda for this Meeting, starting at 6:30pm

1. Welcome and Introductions – tell us who you are and what you do, and something cool you learned about WordPress recently like new plugins or themes
2. “F*ck You, Pay Me” – The Happy Cog way of dealing with getting paid. Chosen because we can all have these problems.
3. “Can we eat to starve cancer?” – TED talk by William Li, chosen because you never know, a blow-out Xmas dinner could save your life!
4. “Design and Discovery” – TED talk by David Carson
5. Q&A
6. Drinks at a nearby pub and open forum

Don’t forget to get in touch if you want to present something at one of friendly meetings, it doesn’t strictly have to be to do with WordPress so talks on design, copywriting, marketing, case studies or just fun web stuff are all fair game. We’ve had some great talks over summer, and the event just keeps getting better and bigger.

If you’d like to add anything to the agenda – just mention it in the comments. Please use the form below to register (it’s free to attend!) If you can’t make it to a meeting and have booked a ticket please do let us know as numbers are strictly limited and it’s disappointing to have five no-shows on a sold out night.

The SWIG logo - shall we do one properly yet?

In the run up to SWIGmas we’ve got a great event on this month. We have 2 talks from regulars Matt Pealing and Anthony Casey covering the modern web design techniques and how WordPress can be applied to very specific content management jobs so it promises to be much more interesting than listening to me prattle on!

Next month’s event will be on the 15th to avoid eating into our precious holidays. We’re planning a movie night with a few talks from vimeo and TED with discussion time afterwards, or if it’s by popular demand we can always watch my Helvetica DVD… (you know you want to).

In January we have Dan Donald from Speak the Web presenting on an as yet undisclosed topic so don’t miss it!

Meeting Location

This meet-up takes place at the interconnect/it offices. As those from September’s SWIG remember we can seat more people with a bigger room on the first floor in (meeting room 1, up the stairs once you enter the building, through the door and on your right).

Agenda for this Meeting, starting at 6:30pm

1. Welcome and Introductions – tell us who you are and what you do, and something cool you learned about WordPress recently like new plugins or themes
2. Quick discussion about ideas and get things arranged for the next month’s event
3. “Responsive Design” – presentation by Anthony Casey
4. “Building a directory website with WordPress” – presentation by Matt Pealing
5. Q&A
6. Drinks at a nearby pub and open forum

Don’t forget to get in touch if you want to present something at one of friendly meetings, it doesn’t strictly have to be to do with WordPress so talks on design, copywriting, marketing, case studies or just fun web stuff are all fair game. We’ve had some great talks over summer, and the event just keeps getting better and bigger.

If you’d like to add anything to the agenda – just mention it in the comments. Please use the form below to register (it’s free to attend!) If you can’t make it to a meeting and have booked a ticket please do let us know as numbers are strictly limited and we’re always completely sold out of seated places. You can also book in advance for December’s meeting (15th).

Presentations

Won’t Somebody think of the internet connected fridge?

Talk by Anthony Casey

We’re currently building a site for the Plaza Cinema in Crosby, Liverpool which makes use of API calls to themoviedb.org API in order to pull in movie summaries, trailers, backdrop images and posters automatically.  This will save the users a considerable amount of time when creating listings as they will no longer need to find images and painstakingly resize them, nor will they have to search for the trailers, poster images or details such as actors and directors.

Over time this will also create an extensive referrable database of films shown by the cinema which will be interesting from a historical and analytical perspective as well.

Anyway, you came here for the demo because that shows more than a thousand words ever could.  So here it is…

http://www.themoviedb.org/

The site had previously run on the Squiz CMS but had been suffering from poor search engine performance and low visitor engagement. Having had a number of past successes with interconnect/it developed WordPress sites in the past, Informa were keen to have us build this site.

Following the Informa supplied designs, we were able to quickly turn around a sophisticated, feature loaded news site that worked well with their workflow.

But what you really want to know is this – the increase in readership that followed going live with the new layout and system was substantial. From 16,830 visits in April 2011 to 25,098 visits in September. An increase of 50%. Page views went up even further, up by 63%. And the headline story is that a substantial proportion of that was due to improved search engine performance, with the new site bringing 10,678 visitors in a month compared to 5,285 visitors back in May. That’s more than double the search engine traffic.

April-May

Why Such Gains?

1. Automatic pinging of search engines when posting new content, meaning that fresh news is indexed promptly.
2. Properly structured HTML.
3. A sensible permalink structure easily followed by search engines.

September-October

Of course, there can be more to it than just that.  A relaunch often brings with it a flurry of interest.  However, the traffic is sustained and, in our experience of sites such as Telecoms.com, the growth is compound.  In other words, the benefits will continue to accrue over the years. Often this comes with increased understanding of how to use SEO tools to improve search engine listings further.

Referral Trafic Up By 75%

Another important improvement has been the increase in referral traffic by 75% – this can drive the search engine rankings and can be due to the easier linking of the site and its new use of social tools to allow easy ‘liking’ and bookmarking.  Unfortunately, we don’t have full access to analytics for this site, which precludes us from carrying out in-depth analysis on the site, but it does match in with our experience on sites where we’ve been able to drill down deeply into the data.

Other Benefits

Our experience also shows that the switch to WordPress often brings other benefits such as improved productivity, creative options, fantastic add-on SEO tools and so on.  As a client and users mature with the product and develop real expertise, we’ve found that they start to find new ways to exploit the power of the system.  This is a good thing – it means that after three or four years you should still be pleased with a system we’ve developed for you.

Ultimately, our tools shouldn’t feel like they slow you down – they should make you feel fast, free and even a little bit lucky.  Digital TV Europe may feel lucky they chose us and that they know have substantially more traffic than before, but hopefully they’re really enjoying the fast and the free!

Some screenshots below show the following elements of functionality:

1. Multiple Widget powered pages.
2. Use of the interconnect/it Spots plugin for managing small elements of content.
3. Related Content.
4. Polls.
5. Sophisticated video handling.
6. Events listing (integrated with Magento API.)

The best way to understand the site’s range is to visit Digital TV Europe and look around.

The site serves a community of over 14,000 decision makers.

That's a very long screenshot, isn't it? But Digital TV Europe has a lot of news to get out there.

Digital TV Europe needed a stronger online presence along with a simpler way of managing content such that it could help retain users.

Services Provided

• Design feedback
• Design detail completion
• Development of sophisticated WordPress Theme
• Events display from Magento feeds
• Sections management
• Tools to handle large numbers of advertising spots
• Custom taxonomies
• Custom post types
• Installation
• Ongoing user and technical support

Site Build

The site’s visuals and structure was designed by the Digital TV Europe team, and interpreted by interconnect/it into a WordPress theme and suite of functionality designed to provide simple usability.

Principle requirements included dramatically improved SEO, faster publishing, ability to handle a range of content types, tools to enable the placing of advertising in a wide range of spots.

Three Months Later

The site has been running without a single ticket raised since August 2011, and has attracted a growing readership. They’ve been kind enough to release their traffic statistics to us and you can read more about the project’s success in our case study of the site’s traffic growth.

Gallery

The images in this gallery reveal some of the functional elements of the site, but are in no way a complete representation, nor do they show the significant back-end tools that have been developed.

The SWIG logo - shall we do one properly yet?

It’s that time of the month again! This month Robert O’Rourke from interconnect/it will demonstrate the Plaza Cinema site that’s being worked on, showing how he hooks into themoviedb.org’s API in order to create a visually stunning yet functional website. As this will be a relatively short session, we’ll also be running a guru session – the team from the company will be on hand to answer questions, but if anybody else attending feels they can help others, please let us know!

Meeting Location

This meet-up takes place at the interconnect/it offices. As those from September’s SWIG remember we can seat more people with a bigger room on the first floor in (meeting room 1, up the stairs once you enter the building, through the door and on your right).

Agenda for this Meeting, starting at 6:30pm

1. Welcome and Introductions
2. Quick discussion about ideas and get things arranged for the next month’s event
3. Rob to demonstrate the Plaza Cinema site
4. Guru time!
5. Q&A
6. Drinks at a nearby pub and open forum

Don’t forget to get in touch if you want to present something at one of friendly meetings, it doesn’t strictly have to be to do with WordPress so talks on design, copywriting, marketing, case studies or just fun web stuff are all fair game. We’ve had some great talks over summer, and the event just keeps getting better and bigger.

If you’d like to add anything to the agenda – just mention it in the comments. Please use the form below to register (it’s free to attend!) If you can’t make it to a meeting and have booked a ticket please do let us know as numbers are strictly limited and we’re always completely sold out of seated places. You can also book in advance for Novembers meeting (24th).

Services Provided

There's a lot of functionality here, but it's made readily available.

• Design feedback
• Design detail completion
• Development of sophisticated WordPress Theme
• Development of Events plugin
• Custom taxonomies
• Hosting
• User training
• Ongoing user support
• Links to newsletter subscription systems
• Ongoing content management support

Site Build

The overall site design was built by the team at Capita, while we were responsible for some finishing touches along with the final build and back-end design where appropriate. We created an accessible, easy to use site which would perform well in search engines.

The biggest challenge, however, was the event management. Repeating, frequent events that needed to be categorised according to location, accessibility, price, type and so on. It’s always difficult to know what the best options for categorising things like this will be, but Greenwich had researched and tested a number of ideas and came to us with their preferred structure that allows visitors to quickly find their preferred events.

Three Months in

The site has been running successfully since May 2011, and has attracted a growing readership. Not only that, but the newsletter subscription has been a huge success and means that thousands of newsletters are now regularly sent out to residents and health professionals. The site is frequently updated, and support overhead is minimal. Overall, a huge success and interconnect/it is now listed as a preferred supplier of web services to the Greenwich PCT – that’s always nice to see!

Visit the Greenwich Healthy Living Service website and see for yourself why it’s doing so well.