I have just seen this posters from Dixons, the electronics retailer, over at Creative Review and i was shocked to see how honest this advertising campaign is, it clearly reflects how Dixons sees itself in the market place.

These posters created by M&C Saatchi in London are Dixons latest effort in advertising on the tube. These adverts do something that most adverts overlook, the recognise Dixons position in the market and how their customers both behave and view them, firmly at the bottom. The cleverest bit of these adverts in to use the easily recognisable fonts of the two major retailers, Selfridges and John Lewis. These, however are really subtle, and without realising this the adverts become really bland. Therefore do they really appeal to everyone, or are they just a bit too complicated, it probably would of been more effective to actually mention these retailers by name.

This problem would become even more apparent if the adverts where only displayed singly, then you wouldn’t get the contrast, and even through the brands which the fonts come from are strong, i don’t think typically consumers easily recognise the font of a brand out of context with their logo.

What do you think?

With it still being April and with all the disasters going on. I thought I would lighten the mood share with you a number of funny links and cartoons/drawings about being a web developer, which I have been collected recently. Please let me know if you find any more.

Dilbert 404 Error Page

South by Sou’wester

The Mind of a Web Developer mingle²

The Brads – WiFi

Small talk with a web designer – The Man In Blue

Web Development Project Management Cartoon – The Project Management Cartoon via Andy Sowards

I design lots of user interfaces for varying different types of products on different platforms. So I find it very annoying when I encounter a product which is functionally brilliant but lacks an easy to use interface. I find the user interface for the popular twitter client Tweetdeck is lacking the necessary interface for it to become a brilliant application.

Loading Tweetdeck

When Tweetdeck initially loads up there are no loading symbols in any of the columns, this is also true when you create a new column or a new search. Ideally Tweetdeck would show a loading spinner to give you the idea that the program is actually doing something.

The Tweets

Each tweet is of a uniformed height which really doesn’t make use of the space available. This becomes even more apparent when you switch on the option of narrow columns. Why can’t the columns be resizable? This would allow you to have as many as you want within the viewport of your screen. One of the biggest flaws in Tweetdeck are in the tweets, links do not have a rollover! There is also no way of knowing if you have actually clicked on the link and it’s opening a webpage.

Notifications

The Tweetdeck notification system is not only annoying, it is also useless, they are trying the mimic the GROWL notification system for Mac, but without any of the benefits. The notifications contain no real information, like who tweeted what, it only contains a count. There is also no way for you to choose the location of the notification, by default it pops up in the top right of the screen. The major place, especially on windows, where important buttons are positioned. There is also no setting to adjust the time the notification would display for.

Summary

Don’t get me wrong, I love Tweetdeck, I use it everyday but i would just like to see a number of improvements so that I am able to use it everyday all day, without continually looking for a new solution for the Twitter client problem.

Do you have any problems with Tweetdeck, any little problems which you think would make a big difference? Or have you found a great replacement for Tweetdeck? Let me know in the comments below.

Yep, we have done it again, Tweetmeme has just landed another new feature, a mobile version specifically designed for the iPhone. How did we do it? Well it’s really easy, and just like building a normal website but with a couple of extra snippets of code.

The Design

The hardest part of building a website specifically for the iPhone is coming up with the design. The screen real estate on the iPhone is very limited so you have to start by being creative. Focus on the content, components such as sidebars, large pictures and small text should be avoided, keep in mind that buttons should be big.

If you are using photoshop i have created a template for you to easily visualise your designs, which you can download here, based on the iPhone GUI PSD, if you are not the set the canvas size of your design to 320px width and 480px height. Remember to images to a minimum and that the iPhone uses the WebKit rendering engine which supports some CSS3 tags, like rounded corners.

The Code

Lucky you are still dealing with a HTML page which uses HTML and CSS like any other webpage you may build.

<html>
<head>
    <title>My iPhone Page</title>
    <meta name="viewport" content="320; initial-scale=1.0; maximum-scale=1.0;">
    <link rel="apple-touch-icon" href="images/icon.png"/>
</head>
<body>
</body>
</html>

Notice that line 4 and 5 include some magical meta tags which you may not of seen before. Line 3 sets the width of the viewport so it matches the screen width of the iPhone the second parameter sets the scale of the page.

Line 5 is for creating webclip icons when you bookmark a site. The image should be 57px by 57px in .png format. The iPhone adds the shine and the rounded corners.

Redirect

You want to redirect users on a iPhone to be redirected to the correct version. For this you will need a nice redirect script, normally detecting browser type based on user agent shouldn’t be done, you should detect browsers based on their capabilities.

if ((navigator.userAgent.indexOf('iPhone') != -1) ||
(navigator.userAgent.indexOf('iPod') != -1)) {
document.location = "http://yoursite.com/iphone";
}

That’s it’ really just buy added a couple of extra lines of HTML and a rejig of the design and CSS you can easily optimise your website for the iPhone.

Notes

There are a few things to remember when building a website for the iPhone:

1. It’s a iPhone they are all the same, no multi browser checking, if it works in one it will work in them all! If only all web development was like this!
2. There is no :hover pseudo class in CSS
3. Keep images and JavaScript to a minimum, you don’t want to wait for ages for images/JavaScript to download.

Over the last couple of days we have been working hard at fav.or.it on a new design for tweetmeme. The old design wasn’t very nice and lots of users were put off the site because of it’s garish colour scheme, but now we are back with, hopefully, a really successful new design.

You can find a full review of the new features on the tweetmeme blog.

(more…)

It has been a long time since I have touched my personal blog. I have been preoccupied with other projects which mostly lead nowhere, i seem to have a strange passion to constantly redesign everything. Well my new years resolution is to stop!

(more…)

Picking the colour scheme is one of the hardest aspects in design to get right. It is almost as important as the code or the content of your site. When looking for inspiration today it is easy to become overwhelmed with all the different options, but here are 5 tools that are fantastic at doing the job for you.

(more…)