The hapless ramblings of an intoxicated web designer.

As a web designer, I’m constantly pitted against the shortcomings of Internet Explorer. This is particularly the case for me, as my speciality is CSS. Often it feels like I’m burning the midnight oil so Bill Gates can line his pockets. Today I thought I’d have a bit of fun with Firefox Adsense referrals..

downloadfirefoxfree.co.uk

Creating referral sites is becoming something of a serial addiction for me now. It’s great fun to do, and you simply can’t make a loss doing it - especially if you’ve got a reseller hosting account.

Can you make money doing these sites?

Yes, quite a bit actually - especially considering they take just a few hours to make. This sort of single page content is ideal for lazy-eyed visitors such as those from Stumbleupon, search engines, etc.

As a designer, I’ve learned never to under-estimate people’s capacity for laziness. Unless you want to spend a long time investing in a site, the best strategy you can take is one such as this.

Adsense placement

For those bookworm types amongst you, I thought I’d give just a few tips on ad placement. First thing to notice is the top horizontal link unit. This can be quite an art at times but, if you can do it, make it look like a very lazily put together menu. Most people don’t expect a site to be just a single page. You’d be surprised how many end up clicking on this, expecting it to be navigation.

Secondly, notice that I use a simple php detection script to remove the referral ads from non Internet Explorer users. Since there’s no profit in showing ads to these people I won’t subject them to it.

Finally, notice the standard banner at the very bottom. I like to think of this as the ‘what next?’ zone. Give users options here, and they’ll reward you.

Why do you do this?

Often, when I have the dreaded ‘designer’s block’, I create single page sites just like this one. I think somehow it gets my creative juices flowing again.

You might well argue that I’m polluting the web with mediocre, half assed content. I say, in return, that when a guy’s gotta go, he’s just gotta go..

Popularity: 25% [?]

In today’s marketplace people seem to obsess greatly over pagerank. It seems you’re nobody without pagerank. Today I thought I would put this misconception to the test using a simple experiment.

Search engines use two tools to determine your SERPs ranking: pagerank and keyword density. In today’s pagerank hungry environment the vast majority of people seem to forget the keyword density concept. Clearly it’s much easier to understand a rating from 1-10, than a more abstract concept such as keyword density.

The reality though, is that you will see pages on the first page of SERPs with a very low pagerank (even for some highly competitive keywords). How is this possible? Here’s how…

So what is keyword density?

Well, keyword density is simply a measure of the % that each word takes up in each article that you write. If I use the word ‘density’ 15/60 times I will have a keyword density of 25% for that keyword. Search engines identify keywords as having a density of between 2-5%. Any lower and they will not register as keywords. Any higher and your content will be flagged as spam. I generally aim for a keyword density of around 3.5% so that I’m safely within the safe-zone.

In addition, search engines discount ’stop words’ such as ‘a’ or ‘the’ so you need to take this into account using your estimations.

The experiment

Ok well, I find there’s nothing better than getting out there and doing a real experiment! Firstly, lets pick a high competition keyword area, lets say ‘Google Adsense’.

Step 1: Keyword selection

The first stage was to select my keywords. In this case I opted for the following:

“make money from/using google adsense”

Step 2: Buying a domain

Domain names are really important. If they are keyword rich they can really help your search engine performance. I did a quick search and found:

“www.howtomakemoneywithadsense.co.uk”

I paid a grand total of £4 to use this for 2 years. It is important to remember to always register a domain for 2 years as search engines penalise/sandbox 1 year registrations.

Step 3: Choosing titles and headers

I always like to think of this as a separate stage due to its importance. Higher weight is given to keywords that are used within the title, headers and description. I carefully selected some keyword rich content.

Step 4: Initial content writing

The next stage was to just write some content. Use good writing and try not to think about keyword density too much. This will make your content sound natural and bring out all the natural variations that people use in their normal searches.

Step 5: Design the web site

For this experiment I’m using a single page website since I know that search engines give preference to landing pages and that the vast majority of sites have incredibly keyword-poor landing pages. I decided to use an open, web2.0 style to improve readability. The whole site from start to finish took 2 hours to make. You can see the finished site here.

Step 6: The keyword density tweaking

The final stage in the process was the keyword density tweaking. I tested the site using the keyword density & prominence tool from ranks.nl. I find this to be the best tool I have used up till now.

My initial results showed that NONE of my keywords were within the magic 2-5% density. Some were ranking around the 1.5-1-8% region, but would not have been identified as high prominence keywords by search engines. This is the typical result from unguided content writing. Almost there…but not quite…

The next step was to start reinforcing my keywords. I went through my content and made minor modifications that caused my keyword density for my selected keywords to shoot up:

What many long tail seo theorists don’t realise is that by using keyword clusters in your tweaking you can also achieve high prominence for 2 word, 3 word and even 4 word phrases. This is where I would expect to make my real volume in search engine hits:

You must be doing some promotion!

Yes I will, but a bare minimum. I will submit the site to Google Sitemaps and link to it from some forum signatures. That’s it.

Victory over a blind man

In a couple of months I’ll return with the results of this experiment. Hopefully it will indicate that you can get search engine hits from keyword density alone. I hope this will make a few people consider how little pagerank actually counts for without keyword performance to back it up.

I would love to hear people’s views and feedback on this experiment. For those who missed it you can visit the actual site here.

Popularity: 26% [?]

Ever suspected there was something very quantifiable about the way users viewed website content? Turns out there is.

Studies have been conducted using retinal eye tracking equipment on average web surfers. This tells us exactly where people’s eyes are focused, how long they are focused for and even the order in which this process occurs. The surprising conclusion is that users almost always use an ‘F’ shaped viewing pattern.

Phase 1: Top horizontal

Users almost always read the first paragraph in great detail. They are highly focussed at this point.

Phase 2: Second horizontal

Users read part or all of the second paragraph. At this point they have almost always made up their mind about an article already.

Phase 3: The long left line

At this point users will quickly scan down the left hand side of the page to ‘check they haven’t missed something’. They will only notice the first 3-4 words of each line and are far more likely to notice something if it is on the first line of a paragraph or differentiated using a title, indentation or some other method that makes it stand out.

Phase 4: Extra horizontals

If something stands out during the ‘long left line’ it may well trigger additional horizontal lines to the ‘F’ pattern. The further down a page, however, the less likely it is to hold interest for very long.

Implications for web designers & bloggers

The first thing to remember is that those first two paragraphs will, without question, determine the success of your article.

Secondly, it’s hugely important to keep any further paragraphs short, snappy and well subdivided. This is the best way to trigger those all important extra horizontal lines of reading.

Thirdly, keep things short. Another observation made from these studies was that the further down the page, the shorter each of your horizontals will be.

Potential rewards

This theory, if well implemented, has the potential to give you a serious edge over other web sites. By keeping the ‘F pattern’ in mind you can design content that grabs your user’s attention, and doesn’t let go.

Popularity: 24% [?]

This is perhaps the greatest tool in any web designer’s arsenal, and also perhaps the most overlooked. I notice many web designers shy away from the idea of copying ideas, design elements, color schemes or styles. To me this seems like madness.

The impossibility of individuality

It helps to realise the vastness of the internet, and then to consider what it would take to make each and every one of those sites entirely unique. I also like to consider the overwhelming similarities in basic structure that have developed over the years.

How many websites that you know of don’t have the following?

- A logo in the top left hand corner.
- A header, content area and footer.
- A ‘navigation bar’.
- A ‘home’ page.

Clearly even the most original of web designs have some form of benchmarking involved.

The benchmarking process

Benchmarking in web design is the process of visiting numerous websites and extracting the best features from each of them. Personally, I use a pad and paper and note down the features I like and the features I don’t like. Visiting rival websites is an even more targeted way to see what they are doing right, and also what they are doing wrong.

As your list builds up you’ll find appealing ideas crossing over from all the different sites you have visited. Eventually you’ll be able to develop a seemingly original idea that learns from the lessons of the past.

Choosing a time to shine

Originality certainly has its place in web design. Without it the internet wouldn’t be where it is today. Even the most talented though only have flashes of greatness periodically. The smart web designers use benchmarking for those times when ideas aren’t flashing into their heads.

Knowing the limits

There’s nothing web designers hate more than a copycat. Cloning, as it has come to be known, should be avoided. Many members of the online community immediately click the back button when they realise a site is exactly the same as another more established one. If you think about it this totally makes sense. Why would anyone want to use two sites that do (or look like) exactly the same thing?

My advice is to just take 1-2 of the best elements from each site and leave it at that. Remember that you tread on a thin line and resist temptation.

A place to start

- Awards sites are a great place to find quality web site examples. SEOmoz.org offer an excellent selection of sites from their web2.0 awards.

- Showcase sites are a talking shop for cutting edge web design. CSSbeauty.com is possibly my favourite. Here you can see the reactions of other designers to submitted work. CSSzengarden.com takes a different form. Here the site itself transforms to demonstrate quality designs.

- Sites you visit every day. Odds are that if you visit them, then there is something you like about their design.

- Don’t forget search engines. If you search for “top 10 websites” or “Web 2.0 designs” you are bound to find sites that interest you.

Go forth and benchmark

Clearly there’s no reason to shy away from the benchmarking concept. It’s a powerful tool you simply can’t afford to ignore. Just like the great artistic masters you’ve under-studied the past greats and, over time, developed your own mastery!

Popularity: 11% [?]

A friend of mine recently recommended a technique called design by grid to me. I must say that I am very impressed with this technique. For some time now I have been looking for a real strategy for laying out design elements.

Designing by grid has been around since the early days of the printing press. It is surprising, in fact, that it has taken so long to find its way into the web design world. Perhaps it got lost in the excitement during the early years of the internet, when people were more concerned with getting their .com up and running as soon as possible, rather than the subtleties of design. Certainly it’s still far from a standard practice in web design.

For one thing designing by grid helps me combat my fear of a blank canvas. It gives me some visual structure to start off from. This is a real problem for me, as I think it is for many designers. Getting good design ideas time after time is always a challenge and, just like beginning a novel, the first aspects of a design are always the hardest to decide upon.

In addition, I’ve found that design by grid helps people absorb my designs visually, making them somehow better. I find my designs are becoming more and more like eye candy at as I get better at using this system.

I’ve noticed though that design by grid is very geared towards certain types of websites. Many of the sites I design using a grid system end up having many columns and sometimes a slightly blocky feel to them. I hope that I can learn to apply this technique to all the websites that I work on.

Popularity: 6% [?]