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!

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

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).

Although there are developer notes on the WordPress.org repository, we’ve decided to maintain a page here where we can possibly show a broader range of information in the future, depending on the take-up of the plugin.

Template tags

Spots provides 2 template tags for developers named icit_spot and icit_get_spot.

icit_spot

This template tag echos out a spot:

icit_spot( $id_or_name, $template );

It takes the following parameters:

• $id_or_name: Required. A numeric ID or the name of a spot as a string.
• $template: Optional. A string used in a call to get_template_part()

icit_get_spot

This template tag performs the same function, but it allows the developer to specify wether to echo the result, or return it as a variable:

icit_get_spot( $id_or_name, $template, $echo );

It takes the following extra parameter:

• $echo: Optional. Defaults to false. A boolean to indicate whether to echo the spot content or just return it.

Basic Usage

You can use spots to replace boilerplate text in your themes. If you have areas in your themes where typically you would hard code the text you could use the following code:

if ( function_exists( 'icit_spot' ) )
    icit_spot( 'Copyright' );

The above code would output the contents of a spot titled ‘Copyright’. If the spot does not exist it will be created as a draft. Spots in draft mode are only visible to logged in users with editing capabilities.

Templates

The plugin will initially look for a file in your theme using the get_template_part() function. If you have a file called spot.php in your theme that will be the default template for all spots. The icit_spot() function can take a second parameter for the template part to use for example:

if ( function_exists( 'icit_spot' ) )
    icit_spot( 'Copyright', 'copyright' );

The above code will make the plugin look in your theme folder for a file called spot-copyright.php to use for the output. If not available it will fall back to spot.php and if that is not available it will simply output the spot contents.

Use templates when you want to display a featured image from a spot or if you require some additional/alternative markup for the spot. Spots are just like posts, so in the templates you retrieve the contents of the spot using the_content() just as would in the loop.

Basic spot template example:

<div class="spot">
    <?php the_content(); ?>
</div> 

Spot template with featured image:

<div class="spot-with-image">
    <?php
    if ( has_post_thumbnail() )
        the_post_thumbnail( 'medium' );
    the_content(); ?>
</div> 

Additional

There are many filters and hooks available to get even more out of spots, so drop by the plugin homepage or use the forums if there is something you need to do with spots but aren’t sure how.

Way back in 2008, we decided to launch a WordPress themes club called Spectacu.la.  We had a couple of nice blogging themes that had been targeted for a marketplace, but as that marketplace got canned we found we had nowhere to sell them.  We figured it was worth getting our investment back.

But it failed, massively.  Although we got some decent attention for it, the income it brought was negligible.  The only real benefit, we found, was that it opened doors and helped us in our more custom aspirations.  Great, but in the meantime we had a site with assets that required some looking after.

However, it limped along, gaining and losing members steadily, but never enough to make anything close to a profit.  But we spotted something – almost every single new member didn’t join to get support for themes but to gain access to the editable version of the WordPress User Guide we offered.  So we had a support forum with tumbleweed blowing through it, whilst we were still getting sign-ups.

Realising Your Assets

This is where we had a moment of realisation.  We’d only supplied the user guide as a bonus extra.  We always thought our most valuable assets were the themes.  But in fact, the themes weren’t that amazing.  Good, of course, but nothing to get too excited about.  However, a user guide that could be rebranded by trainers, educators and theme designers?  Well yes, that’s got value.

In fact, when we investigated further we realised that although it was our prize asset, there were some significant blocks.

Bundling Isn’t Always Best

There’s an instinct to think that offering a big package of features is the best option.  You can have this, and this, and this.  Spectacu.la was a bundle.  But most people didn’t want most of the bundle.  So here’s how they felt… “hmmm – I only want a quarter of this bundle.  It’s not great value for me!“  That in itself acted as a block.  Then they also had the relatively time consuming sign-up process before they could start to download.

Pricing Is Important

So, that was our first set of epiphanies – we knew we had a good product, and we knew it was sold badly.  So, what to do?  Obvious – sell it as a digital download.

And look there – in the chart below you’ll see that there’s a sudden lift in the rate of income.  The chart plods along in the Spectacu.la years (and the line charts all memberships including non user-guide downloaders) and then suddenly ticks up in early 2011.

Dollars Are Even More Important

The next decision we made was to switch to pricing in US Dollars.  We didn’t want to – accounts wise it’s a pain as each guide, to us here in Britain, sells for a slightly different price depending on the exchange rate of the day.  But we could see that we made proportionately few sales in the US, and rather more elsewhere.

It’s harder to see the effect of dollar pricing just yet, but September took double what August did.  One noticeable difference is that we received just three of the optional donations in August, and thirteen in September.  We’ve also noticed that donations from US residents have gone up dramatically.  Before it was dribs and drabs, and now it’s usually a donation every other day.

Conclusion

Well, we’re not done yet.  In the future we’re going to offer regional options – Eurozone buyers will be able to pay in Euros, Brits in GBP and Americans in USD.  Similarly, we may offer reduced prices to those in poorer countries – it’s noticeable that we’ve only had one purchase ever from sub-saharan Africa, for example, yet we know that many of our old free themes have proven popular there.

We also have to be a little careful – our changes tend to coincide with new releases of the user guide – so the figures are harder to tease out.  However, when you compare like-for-like there is still a significant improvement in sales with each change we’ve made.

In the past, coding for this was a pain – you either needed to add an options page on your theme leaving your users with an HTML content area or deal with the weight of adding WYSIWYG support, or you’d just hard code these elements.

interconnect/it Spots solves this.  By adding a new content type to WordPress and using the familiar WP interface, you can now quickly and easily make these Spots into content managed elements.

A simple template call is all you need to instantiate a Spot:

if ( function_exists('icit_spot') ) {
 icit_spot('Copyright');
 }

This will then create a Spot which the user can edit using the familiar WP WYSIWYG tools.  If another theme comes along that requires the same Spot, then the content is already there and ready.

This is all built as part of the interconnect/it principle of “Content Manage Everything.” We hate hardcoding, and we’re sure most of you do.  But sometimes it happens because there’s only so much time available in a project.  With interconnect/it Spots you’ll be able to handle these items quickly and elegantly.

It’s Not a Developer Tool Only!

Spots also comes with its own widget, allowing you to assign your spots to any widget space available.  The widget even has its own WYSIWYG editor, allowing you to quickly tweak your Spots widgets without leaving the widget admin page.

Let's do this!

OK, Sounds Great, Now Give Me Some Examples!

So, let’s say you’re using the 2011 theme and you want to add a Copyright notice to your sidebar.  Easy-peasy.  Simple install Spots, activate it, then go to Appearances | Widgets.

From there you will drag the Spot widget into your sidebar space.

Now, if you’ve already created your Spot you can simply select the spot you want and away you’re done. But if you haven’t already created your Spot the widget will offer to let you go and create a new Spot.

The Spots Widget

Here you’ll find yourself at a familiar WP editor.  Simply give it a sensible title and then put in what you like.  You want an image there?  Go for it.  You want special symbols?  The editor will help you.  Here we’ll call the spot Copyright, and we’ll input the content saying “This site is copyright 2011.”  Then hit Publish, just as you would for a post.

Once you’ve saved your spot, return to the widget administration page, go to the widget and from the dropdown select the spot you’ve just created.

The full Spot widget showing the editor.

Hit Save.  And once you do, you’ll notice something else.  The widget now features a WYSIWYG editor.  This means that you can quickly and easily edit your spot right there, without breaking your widget admin workflow.

If you now visit your site, you’ll see that the Copyright notice is where you’ve placed it.

Why Not Just Use the Text Widget?

A good question!  The text widget is great.  Simple, quick, and easy to use.  But it’s HTML only.  And that means that a user who has access to administer widgets can, by virtue of a bit of bad HTML code render the site completely broken.  They can do this using the editor, of course, but it’s *much* harder to do so.

The editor also means you can easily insert media.

A Spot widget, with an image in it.

Let’s take an example using the above.  Imagine we’re using the default WP 2011 theme, and the user decides to put a big image in his post.  What happens?  Well, it’s not a problem – most well-written themes (and we accept that many aren’t) will sort this out.  But what’s nice is that if you’re using a suitable shadowbox plugin the full size image, if it’s linked to, will pop up.  Try it for yourselves.

I’m Happy In Code – What Can I Do?

Ah, well, it gets better for you.

Let’s take the 2011 theme again.  Say you wish to place an Awesomeness element in the footer instead of the line saying “Proudly Powered by WordPress.”  This is so easy, it’s daft.

First, you need to get the footer.php file for the theme.

Then, find the div: <div id=”site-generator”> and remove everything that goes in-between that and the closing </div>

Replace the code with the following:

<?php if ( function_exists('icit_spot') ) {
 icit_spot('Awesomeness');
 } ?>

What’s nice is that if you visit a page on the site and the Spot called ‘Awesomeness’ hasn’t been created, the plugin will create a blank Draft version of the Spot ready for completion.

All the user then needs to do is to go in and edit that Spot and hey presto, the footer now looks like this:

See that? VERY.

So Can I Try It?

Sure!  We released the production version of Spots at the beginning of October 2011 and it is now available directly from the WordPress back-end or for download from the WordPress Extend repository.

Get WordPress Spots from the WordPress.org Repository

The SWIG logo - shall we do one properly yet?

Heck – again, a little note from me about how quickly these events come around. But they’re great – we all enjoy them. This month we have the excellent local designer Edward Ridding coming to talk about design. There’s also the usual Q&A and technical assistance to hand, as well as a wide range of WordPress developers and know it alls from whom you can learn.

Meeting Location

This meet-up takes place at the interconnect/it offices.

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. PRESENTATION: by Edward Ridding
4. Q&A
5. 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, copy writing, marketing, case studies or just fun web stuff are all fair game.

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.

The SWIG logo - shall we do one properly yet?

Amazing how quickly these things come around. Consequently, apologies for the late announcement of this event’s agenda and ticketing. Must try harder for next month, but it’s been very hectic. This month we can look forward to Lydia Bates and her talk on writing for the web, as well as the usual Q&A, show and tell and pub trip. You can find the meet-up at the interconnect/it offices.

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, copy writing, marketing, case studies or just fun web stuff are all fair game.

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. PRESENTATION: Writing for the Web, by Lydia Bates
4. Q&A
5. Drinks and open forum

If you’d like to add anything to the agenda – just mention it in the comments.

Thanks Everyone!

The event went really well so a big thank you to everyone who came down.

There was some good discussion of issues arising from switching to WordPress 3.2, mostly to do with hosting providers not having up to date PHP or MySQL versions, also, you should avoid using shorthand PHP opening and closing tags if you’re upgrading!

Lydia’s talk about writing for the web was fantastic and we’ll get the slides from her as soon as we can. There was a lengthy Q&A afterwards and I think it’s fair to say that everybody there learned something new. Copy writing is one of the most important elements of a successful website.

On another note Lydia is now available as a freelance copy writer and I can say without a doubt that she knows her stuff. Get in touch with her on twitter @lydiajo.