Wednesday, 28 November 2007

Don't just have alt tags on images, include height and width too

A fact i hope everyone making websites knows - include an alt tag with all your images.

Doing so will ensure that your website meets accessibility requirements but more importantly it lets everyone use your website including those with screen readers.

Now something i hadn't bothered with until recently was the height and width attributes. If you make your image the right size and don't include the height and width attributes then the image will be displayed the size it is. 'Why bother with height and width attributes?' I thought to myself.

WRONG! By including height and width attributes you will be improving your web page, making it load faster and making a better experience for your users.

While images are still being downloaded your web page will appear correctly because all the spaces where images should be are the right height and width.

Have you ever been onto a site and found that as the images load up, the text and copy and design all start pinging all over the place? Well that's because they haven't included height and width attributes.

It also means that if an image fails to load completely your page will still look the same, and if you've put in a useful alt tag the impact on your web page design is minimal. More info on height and width tags here.

For example, see my fictional code for a pretend image of a certain rock god in a tourist hotspot
including height, width and alt:

<img src="" alt="Robert Smith standing in front of the Taj Mahal" width="75" height="100" />

Related posts
Search images by the colours within them (Feb 2009)
Give images rounded edges using Photoshop (Nov 2007)

Tuesday, 27 November 2007

Make a favicon - the little icons in the browser address bar

Favicons are the little icons that appear to the left of the url in your browser address bar. They also appear next to the site name in your 'Favorites'. See below, i've subtly circled the favicons in red.

screenshot of Internet Explorer's address bar with the favicon (little icon) circled

How to create a favicon
Your favicon needs to be 16 x 16 pixels so open up Photoshop (or a graphics programme, even 'Paint' will do) and make yourself a nice little icon that's 16 x 16 then save it as a gif or a bmp. Because this size is so tiny you may find that just reducing your logo to 16 x 16 will make it look a bit sh*t so have a play and keep it nice and simple.

How to get it into the right format
Favicons need to be .ico files. Now there is an open source plugin from telegraphics that you can get for Photoshop that will allow you to save the file as an .ico.

However i've just created a favicon using an online converter that's really easy to use:

  • Upload your gif (or whatever) file (you can even enter your twitter username and just use your profile pic)
  • Click 'Generate FavIcon.ico'
  • Bob's your uncle, you're given a nice little zip file containing the precious .ico file.

How to add it onto your website
Upload the favicon.ico file to your website folders. It needs to be put into the same folder as your home page, make sure it's not in an images folder but just sitting there on its own.

Then add the following HTML tag to your web page after the <head> tag and before the </head> tag:

<link rel="Shortcut Icon" href="/favicon.ico">

You'll have to put this in the html for every page you want the favicon to appear on, or if you are using CSS (which you should!) then it just needs to be in there. [update: see the comments, you can't add a favicon to CSS]

If you still can't see it make sure you are using Firefox to browse the web as Internet Explorer creates problems just to entertain itself.

Collecting favicons
While surfing the web for the information in this post i also discovered a private society of individuals (well one guy) who collects favicons. An interesting hobby i'm sure you'll agree but i can't imagine that they have the resale value of stamps, china dolls or antique pepper pots.

Tuesday, 20 November 2007

Applying the Facebook metaphor

I was in a meeting today and somebody was asked, "What's the difference between a conference and an exhibition?"

The reply was, "well, for example i see an exhibition as all your Facebook friends, however a conference is better described as a Facebook group, because it's more specific, it's about a particular interest group."

I really like this metaphor and think it sums up the difference well. Social networking is 'social' networking because it puts already existing social concepts into another place that's easily accessible, online.

This transfer of an existing interaction onto the internet perhaps goes part way to explaining the huge popularity of social networking at the moment. Nothing much had to change in people's thinking.

The less somebody has to think the better something works, and i mean that for anything! Websites, instructions, social networking sites, online networking...

Monday, 19 November 2007

20 email marketing tips

Over the past couple of years I've been told loads of things to get the 'perfect' email. I came across a list of the most obvious marketing tips via Peter Stringfellow lookalike Andy Owen who I saw at an internet conference. (his original list, PDF, 308KB)

However since then some things have changed (the popularity of Blackberries (-ys?!) for one), so below is my plagiarised, borrowed, chopped, cut and changed, top 20 tips.

Vital assumption before sending email: "Nobody is interested in your company, your brand or your product".

  1. Prepare, prepare, prepare – think before you write.

  2. Address the following four reasons why the customer wants to delete your email:
    - I don't believe you
    - I don't need it
    - I don't have enough time
    - I don't have enough money.

  3. Subject line – must be less than 50 characters, less than 40 is even better if you can get the point across clearly.
    - Have a BENEFIT laden headline ie. 'Speak to architects at our building exhibition' / 'Coca-Cola is more refreshing than Pepsi AND cheaper'.
    - The subject line is probably the most important part of the email, and there's lots more to think about too. Read 15 more rules JUST about subject lines!

  4. Use system fonts - use arial, verdana, times new roman - any font you can be sure appears on your recipient's computer/blackberry.

  5. Connect with your customer in 3.7 seconds – establish trust. I've no idea why it's 3.7 seconds, probably a fake statistic but it seems as good a figure as any. The important point is to connect QUICKLY!

  6. Formulaic – don't try to be too clever, stick to standard information – prices, ISBNs, ways to contact you, dates.

  7. First paragraph – this has the UTMOST importance. Get this wrong, they stop reading. Consider this next time you read a boring email.

  8. Use simple words – people don't like reading off screens, especially if you start using complicated, convoluted, labyrinthine and problematical words. ; )

  9. Describe BENEFITS (what it does) rather than FEATURES (what it is) - this is one of the golden rules of marketing i learnt on my Marketing degree and it applies just as strongly to email copy.

  10. The copy must believe in itself – if you think it's rubbish, it is.

  11. Good layout – make it look good by;
    - keeping short sentences - have you ever been on the BBC website, there's a reason why they only have one sentence per paragraph, it's easier to read off screen
    - spacing things out - learn to love white space
    - using pictures

  12. Good copy;
    - Good spelling and grammar - Get it proofed by someone who can spell, not the office boy who can't distinguish between your and you're - remember that Friends episode?
    - Use magical words - If you can get an exciting word in there, use it! Think of your text in terms of style and panache, if your email is fun to read then it can only add to its effectiveness. For example:
    'Buy our books they're the best'
    'Buy our fantastic books, not only are they leather bound but we've also got Harry Potter.'

  13. Be specific – 71.8% of customers said this, not 70% of customers said this. (which do you think looks better?)

  14. Testimonials – if you can find one use it. There's nothing better than getting someone else's opinion.

  15. Guarantees – if you can think of any, reassure people.

  16. A unique offer - If there's no unique offer there will be no sale. What's the selling point? People don't want simple news or being told something they already know.

  17. Call to action - Tell them what to do;
    - click here for more information
    - buy online now
    - ring Jane Smith immediately etc.
    If there is no call to action / no reason to click through / no phone number to call you then you won't get a response, funnily enough.

  18. Test it – send it to yourself and 5 other people. Send it to someone not within your company. Send it to Hotmail / Gmail.

  19. Plain text - Make sure your email is sent in HTML and plain text. Then make sure that the plain text looks as good as you can make it - a large percentage of your customers (those on Lotus Notes, Blackberries e.t.c) can probably only receive plain text so don't ignore them.

    You can make plain text look better with spacing, ----hyphens----, ***stars***, good copy and more.

  20. 'From:' address - Have something meaningful, a name is best. Then when your email lands in someone's inbox they will see
    'From: Simon Templar' 'Subject: I speak lots of rubbish'
    as opposed to
    'From:' 'Subject: I speak lots of rubbish'

There are hundreds of blog and web articles like this one, just search for yourself (Comprehensive best practice resource from EmailLabs). However don't get bogged down reading every rule as you'll never actually send the damn thing. Commit yourself to just checking 3 of 4 new hints/tips/rules in each email you send. Within a very short period of time you'll start creating your own rules, or redo mine!

Related sites
Email standards project - providing standards for HTML email design. Make sure your email template designer has read this!

Related posts
Check the readability of your copy (Mar 2009)

Thursday, 15 November 2007

Stop pop-ups popping up, online advertising needs to evolve

The best advertising is stuff that's relevant to people and makes the best use of the format it's on.

(I know that some intensely annoying adverts do sometimes work, such as the Michael Winner Esure 'don't panic dear, it's just a commercial', which force the name into the forefront of your mind due to it p*ssing you off. However i'm going to gloss over these as it's not an avenue of marketing i ever intend to get involved with. There's something intensely crass about starting a relationship with your customers by being obnoxious.)

Best TV ads? - Well the ones that use the fact that you can produce film quality video, that people appreciate humour, that people want to be emotionally involved and that people channel hop. I'm thinking the Honda cog advert, most of the Guiness adverts, iconic adverts like Hovis and Flake.

Best radio ads? - Ones that punch through the airwaves, good examples are anything with clever humour. It's so easy to ignore a radio ad so they need to pull you in.

Magazine, cinema, billboards? - I'm sure you can think of your own.

The above i hope shows the importance of adapting to the medium.

Web? Well this is where it get's fun.

Starting off with 'traditional' online advertising. A banner ad that is static is essentialy what every ad in a newspaper is, it doesn't move, it's an image, you look at it or more likely ignore it. Online ads are evolving now, a good example are expandable ads (please leave a comment if this link is dead and i'll find another example). Now these sit like a banner till you put your mouse over them. In theory they let the user choose to interact. Other types of web advertising such as pop ups, floating ads, takeovers are the web equivalent of Michael Winner. Even expandable ads can be annoying when you accidentally hover your mouse over them.

The future? - Well despite this banners ads are here to stay. For the same reason that there are still rubbish sofa ads on TV, boring adverts on the radio and invisible adverts in magazines, somebody (sharp suit, pink shirt, drinks Stella, you know the type) somewhere will always be using the previously mentioned web ad options.

Clickthrough rates are on average 0.4% these days and this falls to 0.04% on Facebook (social networking ad tips article). Unless you're getting monumental site traffic, clever web advertisers (jeans, t-shirt, converse trainers, drinks tea) need to ditch banners and start getting innovative.

There are ways; some are downright scary visions of privacy invasion, others are mild and welcoming, like a bowl of tomato soup.

  1. Targeted advertising - We know so much about people that they can be targeted on their likes and dislikes. For example, my facebook profile contains my favourite films. An example targeted ad campaign would be Amazon displaying an advert on my home page, specifically targeted at me, selling the latest special edition DVD releases of these films i've added to my profile. This i believe is one of those scary invasions of privacy, but it's already happening so be wary, advertisers should atleast give people the choice (Google take notice!)

  2. Contextual advertising - You write a blog article or review about a certain book, Amazon then places an advert on your page offering that book (here's one i made earlier). Similarly, some websites use advertisers that highlight certain words on their page.

    For example the sentence:
    "And JK Rowling earned 3 squillion pounds from Harry Potter"
    would become
    "And JK Rowling earned 3 squillion pounds from Harry Potter".

    Go look at an article on the BBC, how many words in that article could potentially link to an advertising opportunity? Again, this isn't a fave option of mine as it's too invasive

  3. Part one. Engaging with the user - Ah, my favourite, 'tomato soup' option. Sites such as facebook invite advertisers to engage users by doing things such as creating applications. You can play the Red Bull Roshambull 'scissors, paper, stones' game on Facebook - Here Red Bull get some advertising, you've chosen to engage with them and everyone is happy.

    This is the way advertising should be in the future, brands work with you, and NOT just by sponsoring something - that's the lazy way. That means less advertising, but better advertising. More performance per ad pound spent for less ads and more engagement.

  4. Part two. Provide something for the user - The same as above really, let the users come to you by not annoying them and being engaging. A good example is the recent Cadbury TV ad, they added it to YouTube, people created spoofs, the brand lives on. Same thing with the Dove advert. I know this is more viral marketing than online advertising but the boundaries between the two need to be blurred.

Enough of taking offline principles and applying them online, let the web revolution begin!

Related posts
YouTube, Facebook, BBC and Reuters discuss social media (Feb 09)
Monitor the online buzz around your brand (May 09)
What is the average click through rate for online banner ads? (Jul 09)

Wednesday, 14 November 2007

Aren't Google Alerts clever?

I've just discovered Google Alerts. For those who like me before yesterday, are unaware of the usefulness of this cunning little gadget let me tell you using my two days of experience.

You type in a search term, for example one of mine is "web marketing", and then every day (or however often you specify), Google sends you a lovely little email containing recent blog posts and news regarding this subject.

Previous to this breakthrough i used to keep up to date through a selection of RSS feeds on my iGoogle page, by having a quick dabble on search engines once every couple of weeks, maybe receive some useful emails from friends, read a bit here and there in magazines not targeted at web (such as Marketing and Marketing Week) e.t.c.

Now i get some nice summaries every day, inevitably i click through to two or three and then due to the nature of blogs i also end up wandering through some other posts linked from these.

I'm now far more in the loop than i was before as most mornings I do 15 minutes of really relevant surfing, not to mention still doing everything that i did before on an ad hoc basis.

Related posts
Monitor the online buzz around your brand (May 09)

Monday, 12 November 2007

Give images rounded edges using Photoshop

photo without rounded edges

photo with rounded edges



Use photoshop to give your images nice, friendly curvy corners like I've just done above using these easy to follow instructions.

(If you're Portuguese i apologise at how rude the above sentence may sound when read out loud)

Related posts
Search images by the colours within them (Feb 2009)
Make a favicon - the little icons in the browser address bar (Nov 2007)

Friday, 9 November 2007

Make some money with adverts on your website

Unless you get tons of traffic (and if you do then this post isn't for you), putting advertising on your personal website or blog isn't going to make you a millionaire, or even give you enough for a pint for that matter. That's why the people who make money from putting ads on their personal sites design the sites around the advertising, essentially they make their website a billboard, don't get me wrong a clever billboard, but a billboard nevertheless.

The old faithful ad supplier is of course,

Google Adsense - This displays Google Adwords on your page - you can see them below each of my posts (UPDATE: I've taken them off, they look cr*p). With the exception of when they are moulded cleverly into your web design, Adwords generally stick out like that annoying bit of wallpaper in your bedroom that's starting to peel away from the wall. Google Ads on websites remind me of Windows Clip Art in PowerPoint presentations, it just looks amateur in most cases. I'm still to be convinced...
Earnings - A 'portion' of what the advertiser pays.

I've recently discovered an ad supplier that enhances your site with less effort than it would take to make Adsense earn you money

Amazon Associates - Once set up this lets you display Amazon products on your website. There are a variety of widgets and different ways you can do this. One way is a simple image like on the right of this post. Now in this example The Crow is not in anyway relevant but if you're talking about a book or a subject area on your blog you can add something that complements your post. Such as what i did on my 'Don't make me think post'.

You can even set up your own Amazon store, make your own categories, add your own books and then have as a standalone page or even build it into your website using frames.

Earnings - 10% of whatever the person you referred spends. I think it also saves a cookie on that person's computer and you get a reduced percentage of subsequent sales but i'm not too sure about that, would have to check.

There aren't many corporate sites that include Google Adwords on their pages, probably for the reasons i mentioned above, however i'm constantly coming across what i'd call corporate websites that do use Amazon Associates. You can earn more, they're more relevant and at the very least you're adding lots of pretty pictures to your website or blog.

Lots more bits and pieces about Amazon Associates here. Also maybe i'm speaking out of my proverbial because i've just found someone who's made very little.

Well I like the pictures it adds to my blog, it's worth it for that. Now where's that Pammy calendar?

Thursday, 8 November 2007

A good use of flash

Flash is cool, flash is funky, however it just annoys me. It provides barriers to entering websites, navigation menus fly back and forwards under your mouse. Have you ever used a particularly sensitive flash website when your mouse is on the blink? It's like trying to disarm a bomb with a shaky hand.

Anyway i've found an example of good use of flash. This interactive graphic on the FT website explains the credit squeeze and why Northern Rock subsequently went down the pan. This subject is extremely dry and I didn't understand it in any way. After using this graphic i still don't understand the subject completely but I could probably blag my way through a conversation.

My only complaint about this graphic would be that it is dependant on sound - annoying when you work in an office and don't have your headphones. Perhaps some sort of text based explanation to go with the graphic would have helped.

Now to clarify, flash doesn't annoy me all the time i'm mainly talking about flash use as integral parts of websites (grr!) and as a substitute for something far simpler like an animated gif or just well written text (aaah) - Flash hinders accessibility in these cases. However, I would never diss the use of flash for amusing and silly animations, badger badger badger.

Related posts
Flashy things in flash (Aug 07)

Wednesday, 7 November 2007

Squashed images really hack me off

You go onto a website, usually a personal website about somebody's dog, and you see a picture of beloved Gromit but he's got a face as long as a horse because some muppet has reduced the width of the image without proportionally reducing the height. "Aaaaargh!", you scream.

Well this must not go on, the squished image STOPS HERE! My idiot's guide to squashing and squeezing begins below.

Firstly squashing. You want the height of the following squash racket reduced, however by just reducing the height the following happens:

Squash racquet and ball

Squash racquet and ball horizontally compressed

Normal squash racket

Squashed squash racket

What you should have done was, reduce the height and the width together OR crop the image to the right height OR (if you're really clever and get far too excited when playing with photoshop - not me honest!) do a bit of both.

Reduced width and height image of squash racquet and ball

Cropped to a reduced height image of squash racquet and ball

Proportionally reduced
squash racket

Cut squash racket

Secondly squeezing. You want the width of the following limousine reduced, however just by
reducing the width you get a hatchback:


Limousine image vertically compressed

Normal limo

Hatchback limo

What you should have done was, reduce the width and the height together OR crop the image to the right width OR a bit of both.

Reduced width and height image of limousineCropped to a reduced width image of limousine

reduced limo

Cut limo

Multi angled squishing can occur for a number of reasons, I state the most obvious here and how to avoid.

  1. You change the height attribute in the html for the image - by doing this but NOT changing the width attribute your image gets squashed. The BEST way to avoid this is by making the image the correct size in the first place in Photoshop or whatever and then not including a height or width attribute. Internet Explorer or whatever browser will display the image at it's original size and proportions.
  2. You resize the image in some WYSIWYG editor, Word, Quark or whatever by pulling the handles on the edge - this will result in squishing. Only ever use the handles at the corner of the image and hold down SHIFT and keep it held down while you resize the image with your mouse. This will reduce the image proportionally. See my awesome diagram below:

diagram showing that you should move the corner handles of an image

So with this in mind let me never see a squashed, squished or squeezed image ever again. I need some fresh orange juice now.

Tuesday, 6 November 2007

When to use jpgs and when to use gifs

Firstly if you want to read a comprehensive article about jpgs and gifs then go to Wikipedia. That's what i've read to understand why the two formats exist, actually the gif article is great but you'll need a maths degree to decifer the jpg article.

To summarize, they both take an image and compress it / make the file size smaller. To compress an image in this way something has to be thrown away. In jpgs this is picture information, in gifs this is colours.

I've found no simple article explaining what a jpg does to compress, probably because it's hugely complicated. So in my (idiot's) terms, 'A jpg will throw away information by grouping together pixels. This is what gives you that blurry edge on a heavily compressed jpg image. However because it can contain millions of colours, photos are still as vivid after compression.

A gif can only use 256 colours, therefore if you have turn a photo into a gif then it becomes grainy as some of the colour information has to be thrown away. However because gifs don't throw picture information away all sharp edges stay sharp.

Used in the right way you can have images online that are compressed but don't LOOK compressed. The following articles from the grammatically incorrect Web Developers Notes (Web Developer's Notes or even Web Developers' Notes!) contain good images of how the compression works and why some images need to be gif and some jpgs (the pages are fit to burst with annoying advertising but then i'm not suggesting this site is accessible).

When to use gifs - "Use gifs for line art, cartoons and images that contain text because they preserve the sharp lines of shapes and text in the graphic" ...and also animated images (as you can't animate jpgs).
When to use jpgs - "Use jpgs for photographs or other high colour images because they preserve gradients and subtle colours."

I've just found a minutely less complicated article about how a jpg compresses things, i got to the second paragraph, can you beat me?

Friday, 2 November 2007

Download YouTube clips and a bit about flv files

My friend gZa emailed me this link to KeepVid, you can use it to download clips off YouTube (film trailers being one of my faves) then do what you want with them ie. burn them to DVD and play them on a proper TV / bigger screen.

I can see this being useful for work and play...

Also as a handy bonus the site will also convert .flv files to something you can actually watch via your desktop. I encountered .flv (Flash Video) files for the first time last week and spent half an hour trying to figure out how to watch them before i realised they couldn't be played through Macromedia Flash or WMV. In then end i uploaded the files to YouTube to watch them. The reason is that Flash Video is designed for streaming rather than watching like a WMV or MPEG file (correct me if i'm wrong).

However if you don't want to upload to YouTube or use KeepVid to convert them you can view .flv files using a number of standalone players. There's one on the KeepVid site and also the following player from Martijn de Visser (thanks for the link gZa).

Related posts
Convert video files online (July 2008)