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

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.

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.

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.

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.

Social Structure

Social forums, news, mapping... this site has it all.

The site uses bbPress and ties together a number of custom functions. We’ll be following up with a full write-up in due course for our Portfolio, but for now, why not take a look at what’s on offer? We didn’t do the full design this time – we followed the Capita supplied designer’s lead, completed the WP and bbPress specific elements, then got coding.

Permission Levels

One key part of the job was to create a properly hierarchical file store and workflow.  Different types of users can see different areas of the websites, and these had to be easy to manage for relatively non-technical users.  Each user can be assigned to a group on subscription, and then simple radio buttons in the forums and content administration allow for easy setting of permissions.  For a site that often deals in confidential matters, this was important functionality.

And Welcome

We hope that this marks the start of other projects for NHS related bodies. Along with our work for the Greenwich Healthy Living Service we now have a number of clients in the sector and look forward to expanding in this exciting area in the future, no doubt aided by our cost-effective and reliable use of WordPress as a platform.