When I initially started work on the redesign, I got slightly frustrated with a few layout issues so I put it on the backburner and forgot all about it. However, last week, while lazing around over the Christmas holidays I decided it was time to bring the site up to date a little and I found the long lost PSD.

The design hasn’t changed that much. The font has changed from Georgia to Museo Slab and even though using @fontface to achieve this looks a little odd on Windows machines I figured it was worth the risk.

Future changes

I hope to tweak the site every now and again and improve the blog posts, and the contact form. I’ll definitely be looking at the copy as I don’t feel it is quite right yet.

A quick word about IE6

For the first time, on this site, I’ve put next to no time making this IE6 friendly. Of course, I’m taking a risk here as digital agencies hire me to make sites work in IE6, 7 & 8 so if my own site doesn’t work in IE6 then potentially I may lose some work but honestly I think my time is better spent.

What do you think?

I’d love to hear your comments on the new design? Do you like it or did you prefer the old design?

What’s the fold?

The fold is an old media term used to talk about the content that is above the physical fold on a broadsheet newspaper’s front page. On a website, the fold is traditionally the point at which most people’s browser stops before they have to scroll to view the rest of the content.

This analogy may sound a bit weak and old hat but it is actually very strong because just as the content above the fold on the newspaper draws in potential readers who will pick up said paper from the newsagent shelf and unfold it to read the rest so to does the ‘above the fold’ content on a website encourage the user to click-through to the next page or scroll down to the bottom and read all the content.

Screenshot of the BBC.co.uk homepage

But nobody scrolls

You’ve probably come across inexperienced clients who think users won’t/don’t scroll and that all their content should be above the fold. The problem here is not that ‘there is no fold’ it’s that the client doesn’t understand what their most important content is.

Users scroll everyday in Microsoft Word, Excel and their email clients. They scroll down on BBC news pages all day long; to put it short they expect to scroll to find the content that they need.

So what’s the point

Content is king, and the most important content should be at the top so as to draw the user’s attention; auxiliary content should follow after it and your design should inform the user that they can scroll to see more content.

basecamphq.com screenshot

Part of your job is client education

The next time your client wants the entire kitchen sink placed ‘above the fold’; it’s your job to help them work out which of their content is the most important (to their customers); what is the primary goal for that page and then explain to them that this primary content needs to go towards the top and in view when the website loads – then the supporting content can go below.

Your client won’t complain when the click-through-ratio on their call to action buttons improve once those press releases get moved down the page a wee bit.

One dream: one column

When I first launched this redesign and the blog theme Dylan, I had this overwhelming dream of the one column blog post with large images (460px wide) accompanying each post. At 9am today that dream was pronounced dead.

Two weeks ago Brett Shegogue, emailed me with this question:

…I didn’t have a problem reading [your site], but I did notice that most of your paragraphs span the entire width of you [sic] page. A lot of people have wrote that this is bad typography/design.…

Brett seemed to be asking – why when so many typographers tell us that the ideal measure is around 60 characters was I ignoring that rule so blatantly?

After much deliberation and denial I decided I’d entertain the idea that I had made a bad typography choice so I sat down and tried to read one of my articles and sadly, I found it a little more difficult to read than it should have been. So thanks to Brett’s intervention I started to think about realigning the article pages to make them more readable.

One sidebar to rule them all

I think that a lot of blog designers are lazy by not bothering to differentiate between different types of pages on a blog – not every page needs to have a complete blog roll for instance. I’ve always tried on this site to create a format that matches the content of each page so the home page differs from the portfolio and the article archives differ from the search results – they are different content with different goals – therefore they need a different design approach. I thought the one column blog post was a solution to that problem but it turns out it wasn’t… not in this case.

When I designed the site, over a year ago, I wanted lots of images – hence the name ‘image is everything’ but, in practice, it’s very difficult to come up with a unique image that represents each article with zero budget and zero photographic talent. Furthermore, those secondary actions like the add to facebook/digg/etc links, related articles and subscribe links were hidden below the article and I doubt many people found them – so by putting them up a little nearer the top hopefully they’ll see a wee bit more action.

Issues

There are some articles that do have 460px images on them and with this realign they aren’t looking too hot. As of yet I haven’t thought of a reliable way to remedy that but I’m working on it.

After 2 days, I think I’ve realised that I really did like it, a lot – certainly my girlfriend is sick of me talking about it. I had expected to take away a lot of information about design techniques and tips/tricks for design or Photoshop/Fireworks but it wasn’t like that at all. Instead, it was lectures (yes, I considered them lectures) around the general topic of web design.

There were about 8 different presentations and out of them I found about 5-6 incredibly useful. In particular, my favourite presentations were by Andy Budd from Clearleft who talked about taking usability inspiration from our own experiences in different places e.g. shops and hotels. My other favourite was by Paul Farnell of Litmus, who talked about unconventional promotion techniques for website promotion.

Elsewhere, there were some great lectures, discussions about build process, branding, user experience, design sign-off and much more. I was very impressed by the professionalism of all the talkers – I had half expected these people to be a little bit more inept socially but that, simply, was not the case.

I can’t talk much about the social side of FOWD, as I skipped both the pre and post parties in order to see some of my friends and relatives in London instead. I’ve never seen so many web designers/developers before so if I had had more time, I can imagine having made some quite good contacts.

Would I go again next year, depending on the topics… yes probably and I’m seriosuly considering making dconstruct in September too.

I don’t want to underestimate just how good I think this design looks visually – it’s really great but, surely they’re missing a trick by omitting this basic information from their homepage.

On the blog post announcing the redesign, Keith Robinson notes that clients were consulted and I don’t doubt they were and perhaps for their particular clients these issues are irrelevant but, in my experience most potential clients – upon seeing that website, they would ask two questions:

1. Who is this company? or what does the blue leaf stand for?
2. What does this company do?

Hell, the great big homepage picture isn’t even a link to the project that it represents. I think any non-web person viewing this site is going to get really confused.

Could it work?

There is the distinct possibility, that the lack of information on this site’s new homepage could perversely create interest and cause a potential client to investigate further – if that is the case then bravo to the Blue Flavor designers.

There is also the possibility that the due to (some of) Blue Flavor’s staff’s industry profiles, their core clients could be very clued-up on what they do and therefore don’t need it spelled out. Even if that is the case, I’d still like to have seen the words ‘Design for mobile and web‘ or similar in big letters towards the top of the page to avoid any confusion.

Okay, let’s discuss the yellow. After all, it’s the yellow that is blinding you right now. So why have I created a bright yellow website?

I wanted a minimalist look; something that promoted my content above all else. I could have made the site all white but that wouldn’t have looked any different to any other sites.

Black on yellow is easy to read whereas, if I’d have chosen another colour for the background e.g. blue, green or red it wouldn’t have been as readable.

Breaking my own rules

I hate it when blogs produce a redesign that:

1. is completely different to the previous design
2. hasn’t been properly tested in all browsers
3. are pretentious
4. aren’t right for the intended audience

I’ve broken all my own (above) rules. Luckily, I’m a renowned hypocrite amongst my friends anyway so it’s all good.

Broken rule 1: Realign, don’t redesign

I completely rebranded this blog because as I was upgrading (my horrifically) out-of date WordPress it seems a good idea to rid all of the code bloat I’d put in my own template.

I’ve been trying to redesign this site for a while – preferably using my new free WordPress theme ‘Dylan’ and after many failed attempts I struck upon this idea and fell in love with it. I put business sense aside and ran with it.

my readership is quite low, and my brand isn’t fully established so I felt I could get any with this massive change.

Simplebits is the best blog (in my opinion) that realigns instead of redesigns. Each design iteration merely enhances the design and maintains the feel of the previous design. Simplebits has a huge readership and so the redesign method they use never alienate their audience.

Broken rule 2: Test in all browsers before launch

I couldn’t be bothered to test properly. This probably looks crap in IE6 and 7 and I will fix it but, I have to redesign my site around my day job and freelance gigs so I am extremely time limited. This is such bad practice, that I can’t recommend enough that you don’t follow my lead here.

Broken rule 3: Don’t create a pretentious design

This design is black and yellow and nothing else. It couldn’t be more pretentious if it tried, but then the site is called ‘<img /> is everything’ as opposed to ‘Image is Everything’. It’s also massively pretentious to have a website called ‘image is everything’ that features no images on the homepage.

So why have I broken this rule?

I hope this website is yellow enough to stand out from the crowd of other blogs and may lead to more people subscribing. That’s the theory.

Broken rule 4: Create a site that works for your target audience

I haven’t tested this site with any of my target audience, I haven’t got their opinions rather I’ve just done it for myself because I will look at this site more than any other person and so, I’ve created something I would like to look at – it is purely self-indulgent. My audience, will probably be shocked to see an all yellow website – and potential customers will undoubtedly be put off.

Is this a bad thing? Well yes and no. Yes, it will scare off potential business but at the same time it may scare off the clients that I don’t necessarily want to work with.

Summary

Do you like the new design, do you hate it, or are you indifferent? Let me know.

So what’s changed

So why do I feel more like a designer now, than I did 2 years ago? One word: ‘experience’. The more experienced I’ve got by creating designs plus learning how to notice good design and imitate (and subsequently adapt) it successfully. Check out my ‘inspiration’ bookmarks at delicious.

My first professional design

During 2003-2004, I did a work placement as a web designer for Manchester City Council – and the above screenshot shows the design I came up with for a project called MEWAN.

At the time, I was very proud of this design – it took a long time and I needed a lot of mentoring to make sure it didn’t look awful but I though it was good. Looking back now, I can see that it isn’t too great. Regardless, of its appearance – it just didn’t do a good enough job of conveying the information it needed to.

A more recent design

The design above is from a (as yet unreleased) website called New Teachers Abroad.

Read more about the New Teachers Abroad project in my portfolio

Although, using a quite similar colour scheme (which I’ve only just noticed) to the MEWAN design, I feel this design not only looks better, but it does a better job of selling the content to a visitor.

Creating the design took a fraction of the time that my first design took, but the results are far more substantial.

Promoting myself as a ‘designer’

Recently, I met up with a client, for whom, I’ve just completed a (well-received) design. Showing them my portfolio, made me quite pleased to realise at how far I’ve progressed since those early days. I’ve always been a little scared to promote myself as capable of producing a design as well as creating the HTML/CSS templates but now I feel much more confident in doing so.

Summary

To be a good designer, you don’t have to just create something that looks good – you have to get over the message you’re trying to convey. Personally, I think that a lot of web designers (and clients for that matter) neglect the last part and tend to concentrate on creating something that looks nice.

As a frontend web developer, I’m obviously biased with my take on this, but I honestly believe that good quality HTML/CSS coupled with intelligent usage of JavaScript is the backbone of a good website.

So who is worth more a front-end or a back-end coder?

In short, it depends on the scope of the project and the skills of each party involved.

If we’re looking at a website where a frontend coder has spent 3 days taking a Photoshop design to HTML/CSS template and then hands over the a back-end coder who then spends 15 days writing the PHP/.NET code – then, providing these 2 guys are equally experienced, the back-end coder should be making more money.

But, if we’re looking at a website where a back-end developer writes some objects in next to no time and then hands the project over to the front end developer who spends what seems like an age turning the developer’s code into nice valid HTML, not to mention fiddling with a design that doesn’t work in Internet Explorer 6 and then creates multiple different templates for different pages on the website – in that situation the front-end coder deserves more money.

Freelancers v full-time staff

In my opinion, freelance front-end and back-end coders should have a very similar hourly rate. The only difference should be how long it takes each to complete a project.

In a full-time working environment, there should also be an equal pay scale. It’s unlikely (unless the projects are badly managed) that a front-end developer will be sat twiddling their thumbs doing nothing for weeks at a time whilst the back-end coder works his bum off.

The way forward

As mentioned above, I think HTML/CSS is crucial – and not even back-end coders understand this nor do web designers who merely design in their favourite graphics editor and hand over to a front-end coder and never write any HTML/CSS.

The web is in a place where everyone could/should easily know a bit of everything. What use is a designer who knows no HTML/CSS and can’t appreciate the job of the front-end developer who has to convert their design? What use is the front-end coder who can’t understand any of the back-end code in a website and breaks simple code in their templates without thinking? What use is a back-end coder whose code prints out invalid or bloated HTML that a front-end coder can’t work with (as easily)?

Summary

What do you think? Add your opinion here or join the original discussion at You’re not a programmer, we won’t pay you that much.

The improvements of IE7 and IE8

I’m of the opinion, that IE7 does not get (anywhere near) enough credit from CSS developers. It is a huge leap forward from IE6 and I rarely have any rendering issues with it and now it seems the next iteration of Internet Explorer will be as much of an improvement on its predecessor as IE7 was to IE6.

See the article on the IE blog Internet Explorer 8 and Acid2: A Milestone, for more details.

This redesign is big news, for 2 reasons:

• The BBC is a huge media giant, not just in the UK but worldwide too
• As a UK TV licence payer and a regular user of the BBC website, I have a vested interest in it.

Is the design any good?

According to Adactio, the design is very web 2.0 with many irritating visual design elements, although I think that’s true, I also think that to non-web professionals, those cliched web 2.0 design elements aren’t cliched (yet) – after all most people are used to using Facebook, and the BBC – sites that don’t offer these features in abundance.

My only gripe, is that the colour scheme is too blue (my screenshot shows an orange colour but the default colour is blue) – that’s a personal preference and so should be ignored. Even though I dislike the blue, it is a massive improvement over the current homepage’s (over)use of wishy-washy blue (see screenshot below).

Fantastic findability, useful features

The good thing about the new design, is that it seems to be very easy to tell where all my favourite content is located. It also contains Television and radio listings for the day, something, which is sorely missing from the current homepage.

The fact that elements can be hidden and moved around, in a similar way to iGoogle is either brilliant or useless – I’ve yet to decide. I go to the BBC website for football (soccer) news and TV/radio listings, sometimes the weather and sometimes the news so maybe it will be useful for me to be able to move those things towards the top of the screen and hide the information I never look for.

A bigger, wider design

This design sees the BBC taking up a whopping 982px in width – and why not? People’s monitor sizes have increased. The majority of people skiving work in British offices by reading the BBC website will have decent sized monitors with fully-maximised browser windows. So they can handle more width.

I’m sure there will be the usual people claiming that this website should be liquid (get wider or thinner depending on each user’s screen) and that this 982px width will cause horizontal scrollbars for the (tiny minority of) people who have resized their browsers to accommodate smaller websites – but they can be safely ignored.

Summary

For me, the design reminds me of cnn.com – which is no bad thing. I think the BBC has put usability and usefulness ahead of a desire to make the website visually stunning and it this kind of thought process which can create a great design.