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!

"I usually use gill when an idiot wants to use arial (or myriad) in a logo" - @MrCairney

You may have heard of Gill Sans. Designed by the sign-writer Eric Gill in the 1920s it is as much a British icon as fish & chips. You only have to look at the BBC, or any high street to see it. This article, however, is not about about a typeface (in case you were wondering) but about the redesigned interconnect/it site you see now.

The Brief

The business card proofs

It started in July this year when I first joined the company. Dave showed me the new business cards designed by cm2creative and explained his choice of typeface. He had picked Gill Sans because it does a number of things. It looks good, is readable, very English and has a long standing association with well known and trusted brands. At a subconscious level it offers a sense of familiarity, especially true after it was adopted by the BBC in 1997. Almost every man, woman and child with access to a TV since then will have seen the typeface at some point whether they know it or not. In the context of the interconnect/it branding the purpose was to use that familiarity to instil a sense of professionalism, trust and quality in the viewer.  And that was the brief. That and the colour red.

Research

The Typeface

I knew very little of the history of Gill Sans at the start of the project but that changed quickly. I won’t go into detail here (because there is a lot!) but if you are interested my jumping off point was the Wikipedia article. Things got more interesting when I found an article by Ben Archer of typotheque.com re-evaluating the success of Gill Sans. The article describes Eric Gill’s intentions with the typeface design to improve upon his mentor Edward Johnston’s typeface for the London Underground. Mr Archer argues that Eric Gill failed to better his predecessor and he has a point which is best illustrated by the lowercase ‘a’.

The design is very top heavy and unbalanced. The contrast of the letter (ie. the orientation of thick strokes and thin strokes) is partially reversed as a result. When compared to the vast majority of western typefaces we aren’t used to it and it can have the effect of highlighting the letter itself and removing us from what the text is actually saying. It’s a lot like the way the refridgerator scene in Indiana Jones and the Crystal Skull removed any suspension of disbelief in the audience. For an extreme example of reversed contrast in type design take a look these letters. This revelation was the reason why I used the lightest weight of Gill Sans for headings. At this weight the strokes are uniform so the ugliness caused by the faulty contrast is removed. At smaller sizes on screen the problems with contrast are less apparent so the regular weight of Gill Sans is used for body copy where available.

It just so happened that recently fonts.com released their webfonts service and it couldn’t have come at a better time. It was apparent that I would need to use Gill Sans Light frequently but I realised too late that licensing would be a problem. None of the other webfont providers offered any members of the Gill Sans family so the ability to use it free of charge via fonts.com really was a stroke of luck. There’s a theory in the O’Rourke family that we’re blessed with the “jammy gene” because these coincidences are scarily frequent!

The Typography

A very good book, especially for the price

The second key factor in my research was my ongoing study of typography. It’s a subject that my study of design has brought me to and left me balls knee-deep in. It is the art of presentation and creating clarity which encompasses what we refer to in the industry today as information architecture. Oliver Reichenstein from iA wrote what became a surprisingly controversial piece stating that web design is 95% typography – perhaps a slight exaggeration – but there is truth in the statement. Anyone who designs anything involving text should learn about typography, particularly that it is much more than just choosing a typeface.

Dave has a book in the office called Typographic Systems by Kimberley Elam. Most of us are familiar with grids by now but there are a number of other approaches. Axial, radial, dilatational, random, modular, transitional and bilateral are all layout solutions we rarely see on the web, due to the difficulty involved in producing them. New layout features available in CSS3 may change that in the coming years and I for one welcome our new non-grid layout overlords. After experimenting with a few concepts incorporating the new logo and using the axial and modular systems the results were pretty woeful but it was a useful exercise in idea generation. One of my first (and very short-lived) ideas was to use the forward slash in the logo to create an axis on which to hang the rest of the design but due to the nature of the content and the goals of the website a grid layout was the best and simplest approach in the end.

Some not-so-good ideas

With all the above milling about in my mind while I was working on another project over the summer the actual job of designing and coding started towards the end of September.

Working in the browser

It’s going to get slightly technical from here on out. The mockups I had produced pretty much went out of the window although a few elements remained, albeit not completely intact.

Style

I began coding the CSS by using a reset and then defining the grid. After toying with The Gridinator I picked a 920 pixel wide grid with gutters of 40 pixels. The width had to be less than the usual 960 pixels to give me some extra space to position certain items outside of the central column without hiding them from users on a 1024 x 768 resolution. I had columns of 80, 200,  440, 680 and 920 pixels to play with. The column widths then guided the choices of font size. I was aiming for a maximum of 10-12 words per line and I settled on 14 pixel text for body content as a reasonable balance whether in columns of 200 or 440 pixels in width. To create further visual harmony the font-sizes were also selected from a typographic scale. Just like a musical scale a typographic scale is a balanced series of font sizes that create visual harmony and heirarchy.

The base line-height of 18 pixels I chose looked right to me with the 14 pixel text. I was tweaking the leading to get a reasonable contrast within the blocks of text. Not too dark and not too light. I may still tweak it some more because I was following the advice in Robert Bringhurst’s The Elements of Typographic Style. It’s an excellent resource but the rules of print don’t always translate to the web on a 1:1 scale. The problem I was left with were the multiples of 18. The steps I used are 9, 18, 27, 36 and so on to make the vertical rhythms sync up nicely. A base line-height of 20 pixels would offer a greater set of steps (5, 10, 15, 20, 30 etc…) so it’s easier to calculate margins and work with, but like a stubborn fool, I plodded on. Even multiples of 6 would have been easier to work with but my decision in  the end was down to what felt right, or intuition if you will… At any rate hindsight is a wonderful thing.

One problem with trying to maintain vertical rhythm is when you don’t know what image sizes you may be dealing with. There is a simple bit of javascript that can help:

var lh = $("body").css("line-height");
$("img").each(function(){
    $(this).wrap('<div style="overflow:hidden;height:'+ (Math.round( $(this).height() / lh) * lh) +';" />');
});

I have one other little trick that some of you may like (some of you may just throw up in your mouth a little bit). I tweeted about my exasperation at not having a list-style-color CSS rule because I wanted red bullet points without affecting the text colour of the list items themselves. There were the sensible suggestions of course – use list-style-image or a background image. Generally I would have used either approach but there are caveats to both of those approaches.

1. list-style-image: I never use this feature of CSS. It seems that no two browser manufacturers can decide exactly what to do with it. You end up with unacceptably different vertical positioning of the bullets in IE compared to Firefox and others.
2. background-image: Best suited to designs that don’t use the margins to hang bullets or quotation marks in. I could have used some left-hand negative margin and padding but what about ordered lists?

The ordered list problem isn’t solved by either of the above solutions. I wrote some more javascript to enable the effect:

$(".entry-content ol, .entry-content ul").each(function(){
    $("li",this).each(function(){
        $(this.childNodes).wrapAll('<div class="li-content" style="color:'+ $(this).css("color") +';" />');
    }).css("color",$(this).css("color"));
});

With the above all you need to do to colourise the bullet points is to apply the bullet point colour on the list itself and the desired text colour on the list items like so:

ul,ol { color: red; }
li { color: black; }

I’m now of the opinion that CSS is a pretty crap tool for typesetting, that is if you want to do anything complex that needs to look the same across different browsers and operating systems. It’s not the fault of CSS though, but rather the different approaches to type rendering on different platforms. Typekit recently released an interesting post on the subject of OS diffrerences in relation to type.

Prototyping with widgets

WordPress has a well thought out core that allows its functionality to be extended using the theme itself or various plugins. To get the most out of the home page I used three widget areas and our suite of internally developed content widgets. So far it has the following:

• Page widget: grabs the content of a particular page – pretty simple really. This is essentially like using a text widget however you have all the editing options available to you on the page editor – in particular the WYSIWYG editor. The large banner text is an example of this widget.
• Taxonomy lister: generates a list of posts (or custom post type entries) from a single taxonomy such as tags, categories or a custom taxonomy. The widget uses templates that can be stored in the theme directory to control output. I created the Case Studies and Portfolio sections on the home page using this widget.
• Latest posts: this one is a brother to the taxonomy lister. It lists all the posts just like the blog page would however you can choose how many items to show, how to display the featured image from the post, whether to use the excerpt or full text and you can exclude categories from appearing. The latest news section uses this widget.

The only other non-core element of content required was the author list. WordPress itself offers very little in terms of generating a list of authors. There is a single documented template tag called wp_list_authors() and the available plugins didn’t give me what I wanted either. I set about creating a shortcode that I could use in a widget or page but first I needed a list of user ids. I added a new function to the functions.php file in the theme:

function get_authors(){
    global $wpdb;
    return $wpdb->get_results("SELECT ID, user_login FROM $wpdb->users, $wpdb->usermeta WHERE $wpdb->users.ID = $wpdb->usermeta.user_id AND meta_key = '".$wpdb->prefix."capabilities' ORDER BY user_login");
}

My shortcode function looked a little like this:

function author_list_shortcode( $atts, $content=null ){
        $output = '';
        $authors = get_authors();
        foreach ( $authors as $author ) {
            if ( $author->user_login == 'admin' ) continue;
            $output .= '
                  <h3><a href="'. get_bloginfo('siteurl') .'/author/'. esc_attr( get_usermeta( $author->ID, 'user_nicename' ) ) .'">'. get_usermeta( $author->ID, 'display_name' ) .'</a></h3>
                  '. get_avatar( $author->ID, 80 ) .'
                  <p class="bio">'. get_usermeta( $author->ID, 'description' ) .'</p>
                  <a class="url" href="'. esc_attr( get_usermeta( $author->ID, 'user_url' ) ) .'">'. get_usermeta( $author->ID, 'user_url' ) .'</a>';
        }
        return $output;
}
add_shortcode('author-list', 'author_list_shortcode');

While the above is a very simplified version of what I ended up with it should give you an idea of how to create the shortcode. Unfortunately I wanted to use it in a text widget too but WordPress currently doesn’t parse shortcodes in them without a little coaxing…

// parse shortcodes in text widgets
add_filter('widget_text', 'do_shortcode');

There was one final hurdle to jump over with the author list shortcode. I wanted some extra data associated with our user accounts such as job title and twitter username. Justin Tadlock has a simple tutorial on his blog about how to add extra fields to the user profile page. Using them was just a case of calling the get_usermeta() function with the correct user id and meta key.

Using widgets to populate the home page and the footer worked very well as a rapid browser-based prototyping tool. As long as the CSS allows for some flexibility of the widgets themselves you can quickly move the various elements around to find an optimal arrangement of content. It will be a cinch to add extra blocks in future too for special features.

Reducing

In anything at all, perfection is finally attained not when there is no longer anything to add, but when there is no longer anything to take away.

Saint Exupery

A lot of my time was spent removing visual clutter that I had merrily sprinkled around, a dividing line between the post content and the author photo, an image border on non-captioned images, the customary sidebar on post pages… It was time well spent. If there was an element in the design that I couldn’t explain the purpose of to myself satisfactorily it got cut. I can certainly recommend this approach, assuming you’re going for a minimalist or very typographically led style such as this. If I hadn’t done this there would be bright red boxes inspired by a restaurant menu in a sidebar containing links, the site would have had much less white-space and room to breath and would have ended up being less readable.

At this point the only colours on the site were white (#fff), black (#000) and red (#f00). I could only withstand the burning on my retinas for so long and calmed the colours down by reducing the brightness or reducing the saturation.

To soften the site further and add a little depth I found a natural looking texture for the background. You can blame Simon Collison for that because I’m an unashamed fan of his design style and after seeing his talk at Speak the Web in Liverpool’s Leaf Tea Bar I guess a few things sank in. The gist of the talk was how to reach that point in design where the magic starts to happen, but in a word, the message I took from it was “reduce”. You can find the beautiful slides from the talk on slideshare.

Detail

During the design process there were a few moments when a great idea struck me. It’s the little details that you don’t necessarily think about until they’re pointed out to you.

In the footer I had a copyright notice and the current year. Because of the BBC association I thought that using roman numerals would be more interesting and definitely add a little extra class to the design.

The font delivered by fonts.com was looking badly hinted and blocky at certain sizes in webkit based browsers. What was interesting when I was adding some CSS3 love to the design I found that adding text-shadow, even if it was invisible, caused the text to be properly anti-aliased. I’m not entirely sure why but I was able to make a few gains in the overall beauty of the site using text-shadow on the delivered font.

To add some extra layers of slickness to the site I added some transitions for those browsers that support them. You’ll see what I mean if you use Chrome or Safari and hover over the main menu items. It’s amazing how simple it was to do and I’m looking forward to playing with CSS transforms and transitions on future projects.

Have you ever noticed how many WordPress sites stick with the default left and right angled quotes for the arrows? I decided I was sick of them and found a list of different unicode arrows I could use instead. This worked fine at first although it did cause a problem in Chrome when I added the text-rendering: optimizeLegibility; rule to my style sheet. The effect was that all my font-styling was lost (font-variant, font-family and text-transform rules) and the unicode character appeared as a box. The bug report is here. Removing the text-rendering rule fixed the problem in Chrome but IE6 was still displaying a box for the character so I resorted to using a span with the class “unicode” and added the following to my style sheet’s utility belt:

.unicode { font-family: "Lucida Sans Unicode", "Arial Unicode MS", Arial, sans-serif; }

Another feature you will have seen (unless having javascript turned off is how you roll) is the loading overlay. I had to do it because of the way webfonts are loaded and rendered on screen. There’s a horrible moment when the text vanishes and then reappears in the desired typeface. Paul Irish has a great article on steps you can take to avoid this “Flash Of Unstyled Text” (or FOUT for short). The only sure fire way to avoid this bit of ugliness to hide the text or page until the new font has loaded.

In Summary…

I learned a lot. Mostly what not to do next time. Some of the main points of interest to me were:

• using WordPress widgets for rapidly prototyping the information architecture.
• CSS is not a great tool for typesetting. Avoid getting too carried away and focus on readability.
• reduce, reduce, reduce.

Hopefully that wasn’t too much of a ramble! While I’m happy with the end result there may never be a design I do that I’m really, really satisfied with but that can only be a good thing. The moment we become satisfied with our level of knowledge and skill is when we start to stagnate and lose any enjoyment we get from the process. I may still tweak some things in future like the line-height and how some images are displayed but for now, I need a beer.

I’ll leave you one of my favourite examples of Gill Sans spotted in the wild down Bolton Street opposite the Adelphi Pub in Liverpool. Yes it is the plug-ugly ultra-bold Gill Sans but it made me giggle that they would have a separate entrance to the strip club for those dirty filthy students.

The white text is possibly the only suitable use of Gill Sans Ultra-Bold in the world.

Here’s how to get nominated:

1. Impressive landing page – the first page people land on should be visually striking.  Pretty girls do seem to help on this, sadly, but it’s not the only way.
2. Simple design – keep it simple and clean, at least on that front page, because that’s the one that will be looked at the most.
3. Don’t worry too much about usability, at least at this stage, because the testing won’t be deep.
4. Don’t worry about standards either, most of these folk won’t check.  Shame, but true.
5. Keep the word-count down – too many words distract from ‘impressive’.

And then, of course, comes actually winning it:

1. You won’t have any idea of the criteria against which your website is being judged.  It could be that the judging panel is looking at print-outs, has a passion for flowers, or anything – so don’t worry about it.  Also consider that the judges don’t necessarily know a thing about web design.  Just keep doing cool websites and the awards will come soon enough.
2. Make sure the site is usable, at least on a superficial level.  If they want to find the location, make it easy to find.
3. Trendy is good – but it does depend – web design and paper design trends are increasingly divergent, although they’re definitely influencing one another.  Also remember, if you’re being judged by designers (paper or otherwise) then what they consider to be leading edge is quite different to that of the average person.
4. Flash sites win a disproportionate amount of awards, given their poor compatibility and search engine performance.  But there you go – if you want visually striking you can save a bomb by using Flash instead of html and css.
5. Performance is paramount – any judge will be looking at a lot of sites.  If they’re viewing through browser windows they’ll be quickly bored – your site has to load quickly and respond rapidly.

To be honest, we were surprised we were nominated – it came entirely out of the blue as the site had never been submitted by us to any competition.  It wasn’t even a site we could feel was a particularly wonderful piece of work.  It was fine, and the client is delighted.  But what this nomination did do was to make the client feel justified in using us.  That alone is worth a fortune, and he’ll have told everyone who’d listen.

And I totally get it.

In fact, a failure of how standards apply to web pages is one of the reasons why, until really quite recently, I’d avoided having anything to do with Web Design. I hated it. I hated that even if you structured your code correctly it would look right only in half the browsers you tested in.

Well, this is going to change over the coming five years. Standards will become far more important, and odd hacks will slowly fade into the background. Browsers, my friends, are going to have to become a whole lot less forgiving.

And there lies the rub – with tougher browsers, building websites will become a lot harder for non-technical types. In fact, it could become near impossible. On the upside, tools like WordPress will be able to offer more choices to the user because the code will know that what it outputs to the browser will work.

So the internet’s going to get a lot better in the coming years… but if you’re not prepared to work hard at it then becoming a web developer or designer is going to become far tougher.

Steve McConnell in Code Complete (a book which criticizes the widespread use of the waterfall model) refers to design as a “wicked problem” – a problem whose requirements and limitations cannot be entirely known before completion. The implication is that it is impossible to get one phase of software development “perfected” before time is spent in “reconnaissance” working out exactly where and what the big problems are.

It’s worth following the link.

I think software and design processes often end up trapped within this circle where nothing’s ever perfect. The iPhone isn’t perfect, for example – it may be ever so pretty, but it’s quite rubbish at Bluetooth connectivity, for example, or sending texts. In fact, it’s rubbish at a lot of things. One of its smartphone rivals, the N95, has a habit of crashing in certain situations, and flattening its battery in two hours because it’s furiously running an application in the background.

Same with websites. Our company site, Interconnect IT, will never ever, in my opinion, be perfect. Unless we simply devoted all our energies to that site – but then we’d have no time to work on client projects. We’re still a three man company, so we can’t have a £200k site. But we can be clever and cover 95% of the requirements.

With client sites it’s even trickier – we have to interpret a clients’ requirements, write them down, and send them back in a proposal with a rough mock-up, pricing and structure. They’ll read it quickly and usually accept. But once started they’ll look at the design, try it out, and realise that actually, the front page should have a simpler message. That may mean a restructuring. A week later, someone may point out that the colours they preferred have negative connotations in certain cultures.

All these require changes, sometimes at a late stage, and sometimes involving a lot of work. At some point, someone has to simply say – “OK, that’s good enough!”

Other clients, however, quite like the waterfall method. We have forms for certain business sectors, with consistent requirements, where they simply tick off what they want and like, choose an off-the-shelf design, and a couple of weeks later we deliver the website – all loaded up and everything. They then sign-off, or they ask for some revisions – images changed, copy edited and so on. It’s particularly suited where a small and busy firm needs a website, but it’s not really crucial to their business – it simply provides a service to people who already know them. Dentists, for example.

Fair enough – you steal a picture, you pay the penalty.  However, these images were placed there not by the companies, but by the web designers they’d hired.  The end result came to a loss of reputation for the two firms (but perhaps some nice collatoral marketing) and added costs and hassle.

EPUK’s commentary on the copyright story

Now, I don’t have much sympathy for companies that steal copyright – they can offset their costs against taxes so shouldn’t really feel a need.  And given that a website is a business benefit, they should be paying for all images anyway as it generates money for them.  But what does stink is that they’ve been made to look stupid by web designers.  These are people we share our profession with.  Yet we see it all the time – images stolen from other websites, reused again and again after downloads from libraries… and it stinks.  I’m getting fed up of amateur designers who apart from generally designing poorly performing, slow and unusable sites, are also potentially getting their clients into a lot of trouble.

So these amateurs are busy cheapening the work we do by undercutting the true professionals, they’re damaging our reputations (could we be thought of like many back street mechanics?) and they’re encouraging many clients to DIY instead – something that could still cost them dearly in lost business, hassle and time.

Rant over!  Next I want to find out who Britain’s best web designer could be.  I’d like to hope it’s us!

The idea seemed good enough – Car Magazine added a search terms Cloud, rather like a tag cloud, to their website to show what people were searching for. Problem is though, with any user generated content you have to watch carefully for abuse.

First off, they seeded the search cloud with a few terms that they obviously felt the aspirational and tasteful visitors would like – such as Aston Martin Vanquish, BMW M1, Ferrari and so on:

So far so good.

But Sao Penza? Who would look for such an obscure car? Quickly, somebody realised that there weren’t many values for the search cloud to pick up on and that it could easily be gamed… Either that or readers of Car Magazine have a hankering for Bum Gravy and Cillit Bang:

Perhaps it was just a passing glitch and soon everything would return to normal:

Ah, no… and guess what? The took it down soon after.

I think in any sort of web development and design it’s important to try and think “how could this be abused” and then either put in place ways to prevent it, or be ready for it. Some sites have disappeared completely after being spammed to death, with the owners unable to fix it, and lacking the funds to bring in suitable expertise. It’s a hard world, the Web, and coding safely for it demands a rather cynical approach at times.

All stuff taken from this Sniff Petrol article, and written in a much funnier way than I can ever manage…

I bet this chap’s getting the mick taken out of him something rotten.

If you can’t see it, try looking for the exhaust.

But we don’t mind – it’s a cheap source of images and graphic art for clients who are working to a tight budget, and it gives many artists and photographers access to new markets. Everybody’s a winner.

Well not quiet – while we cheerfully admit to where we get some of our images and graphics from, many rivals don’t. Most recently we saw one rival offering ‘custom’ Xmas e-cards for about £350 a piece. They would (we hope) have been bought on a less restrictive license than usual, but you’re still looking at a low cost item.

To show you, here’s one we did ourselves, in just five minutes. Not £350 worth of work. At all:

We could do about fifty in a day, at a cost of no more than about £100 plus our time. It’s even done in our in-house web-design style, which means there’s a pre-masked layout to work to. Easy-peasy.

Clearly, the road to success in business is more to do with marketing than fair pricing! Then again, I remember the realisation came that even if you could make a Coke rival product for 5p a can which tastes just as good, it probably wouldn’t outsell Coca-Cola, because people aren’t rational creatures when it comes to pricing. In fact, they’d be suspicious as to why it was so cheap.

I guess the same thing would apply to solicitors and the like, albeit in a slightly different way.  You go round to a few and they all offer to do the work for around the £150-£180 per hour level.  If one came up with a price of £20 an hour you’d immediately be worried as to whether they were professional or not, qualified, and so on.  Of course, the £150 an hour rate is going to exclude many people, so lawyers, rather than doing anything cheap, tend to get involved in pro-bono work instead.

And these products let them have it:

Make My Logo Bigger