The Overview page, now shinier than ever

Following on from our initial announcement, I’m happy to announce we have a new version! We’ve listened to feedback and made many improvements. We’re also making expanding the closed beta! One of the points mentioned in feedback was the potential for extending the plugin, examples including Google Analytics traffic widgets on the overview page etc.

The second iteration now comes with more developer documentation explaining how to:

• Add your own events
• Use multiple event logs
• Custom logging outputs
• Custom html for logtable events
• Hook debugging tools

The log viewer offers charts to help you understand the pattern of use on your site. Pretty sweet eh?

The Auditor (name to be finalised) is a plugin that comes in two parts – an event logger that tracks key options and content changes within your WP install, and a viewer that lets you view what’s been happening on your site.

The closed beta for the plugin is strictly limited, and we’re rolling out the tool on our own sites before trying on client installs. Once we know that there are no issues or problems caused by the system we will review the beta feedback and make certain decisions on how and when we will release the final version.

The Auditor is designed for power users and administrators. It produces a wealth of data which is useful for debugging problems on sites caused either by users, XSS attacks and so on. User rights upgrades, password changes and so on are all logged in a searchable index on the database.

Beta testing is now closed.  Those who received the plugin will hear from us in due course with a link to a questionnaire.  We really appreciate those of you offering to test – by doing this we can make better software.

In the end there were very nearly 40 people at our first bigSWIG and a lot who are likely to be new regulars at the monthly meetup. This is great for the group and the community. Not only that, but we made a few decisions – such as expanding the official remit of the group to cover items beyond WordPress. Unofficially that was what was happening anyway – we’d had plenty of talks on design and business as well as WP. So although WP will continue to be a big part of the event in future (after all, it’s a big BIG part of the web) you’ll probably see a bit more variety in the range of talks in future.

Presentations

The following presentations have been made available online:

• Chris Hough – Creating a WP Theme Options Panel

Q & A

There were 2 questions from the Q&A so I’ll record the answers here.

1. How can I modify the main blog page to show a custom post type? – Jake Smith

   In the latest version of WordPress this is made a bit easier by being able to pick out and modify the main query. The code to add to your functions.php is below:

2. Is there a way to improve gallery management in the post edit screen of WordPress? – Chris Hough

   I spoke briefly about some plugins that exist to bring the WordPress gallery management into the forefront in a metabox. One possible route to take if you use post formats is to drop in Alex King’s post formats UI addon.

Pictures from the night:

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!

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/

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

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.

This blog post has been written with the purpose of both introducing myself (even if it only to say goodbye for now!) but to also show my appreciation of the great people here at Interconnect IT and hopefully also providing my replacement with an idea about what he is getting himself into!

A little bit about me

I started at ICIT back in April 2010, working for free on a few Saturdays to basically to get a little experience of how to run an office. I had known Dave from our local badminton club and I was stuck in a job I hated and wanted to try my hand at something totally different. I started by helping Dave to get a bit of organisation to the filing cabinet and the accounts. This began with several trips to the local stationary shop for a big pile of ringbinders and dividers! Dave must have been impressed with my organisation skills, as he soon decided to offer me a part time administrator role for 2 days a week. This suited me down to the ground!

My hours increased in January 2011 as Dave’s time became more occupied with gaining and maintaining our clients and providing project management as our work stacked up. I have taken on more responsibility this year for managing the accounts and the other day to day runnings of the business.

Typical isn’t it that just as my work gets better and more interesting, with the probability of more hours – I disappear to have a baby! Ah well… I shall be back after my maternity leave, probably very tired, but with more experience of the good things in life (I hope – unless baby is an absolute terror) which will hopefully give me more skills and make me new and improved when I return!

A little bit about the company

The company has changed a lot since April 2010. When I started, there was simply Dave, James and Peter. The office was small – just 3 desks; and with Peter and I sharing a desk. We worked on different days of the week so there were only ever 3 of us in at any one time. Only a few months before this, there was simply Dave and James.

Shortly after my arrival, we expanded, taking on Rob as another developer in June 2010. This increase in size meant we had outgrown our current office and so moved in July, downstairs to a larger office which seemed cavernous at first!

The company has continued to change and develop: This year we said goodbye to Peter in February and welcomed another new developer – Tom in May, who has settled in as a great member of the team. And we are now taking on a new temporary administrator as I depart for my maternity leave.

Dave is considering the possibility of expansion again to another larger office as we take on more work, new clients and lots of new projects. It is good to notice that a lot of our latest work has come about because we have been recommended in the industry. One of our larger client’s have many different divisions and we have gained a lot of business from their recommendations so we must be doing something right. A busy time is ahead for all, especially for Dave as he is expecting his second baby shortly after me in October.

A word to my replacement

In my experience, after working in different places and feeling like I worked very hard with little or no recognition, this company makes me feel like a valued member of staff and to me that is of great significance. This is a job I don’t mind getting up for on a Monday morning and I hope you settle in as well as I did.

Please keep everything tidy and organised.. I’ll be coming back to check!

Informa T&M Home Page

Informa Telecoms & Media are a large and growing division within Informa, the publishing and events giant.  Since the launch of the interconnect/it developed Telecoms.com, they have increasingly used WordPress to deliver business critical websites.

Since then the organisation has launched Telecoms.com Webinars – a service that allows sponsors to provide live webinars delivered through an embedded player which is managed from the WordPress back-end.  This site has to be able to deliver videos to up to 500 concurrent users (think of the bandwidth requirements) and provides a live discussion forum allowing for dynamic question and answer sessions.

Going Corporate

But the most exciting news is that for April 2011 – yes, just a few days ago Informa T&M launched their corporate site on a WordPress platform using interconnect/it‘s most sophisticated developments yet.  Our combination of taxonomy listers (yes I know, a techie term, but stick with me), sections with their own widgets management, aggregation tools and sophisticated grid based flexible content means that their marketing department was able to build a highly featured cross-linking site for a budget way below anything that corporates would be used to.

And this brings me on to something unique about interconnect/it and our relationship with clients – we supply all our source code under the GPL license.  The consequence is that the intellectual property is shared between us.  Sometimes we release some in the form of plugins, and often we get to reuse our code, entirely legally and openly, to help make future projects even better.

The advantages are numerous – it means that our clients are like a collective – each one who spends money on us makes the life of all other clients potentially that little bit better – we can reuse code where necessary.  That cuts costs and increases capabilities.  This is different to the games industry, for example, where each publisher demands exclusive access to all assets developed.  That means that 3D models of famous landmarks have been painstakingly created over and over again.  Imagine the costs and waste in human ingenuity that’s involved?

Clients also benefit from a lack of lock-in.  Of course, if they’re paying for all assets, that’s not a problem – but most don’t want to and, as a consequence, get completely locked in to their vendors.  That’s not good – it doesn’t keep suppliers terribly sharp and can result in gouging – especially in the case of takeovers and mergers.  By sharing our source code with clients, they can be assured of the ability to gain long-term support for their code, even if we changed.

We’ll carry out a full review of the Informa T&M site, what we built, and how, in the near future.  But in the meantime, why not  head over and see what’s there?