Sour Code Sour Code


They just have no idea…

Published on August 4th, 2008

A few months ago I did a SEO job for a large student job site. I made a plan, we (the company I work for) delivered the product and they started to get great rankings within Google. From then on, pages could only get better ranking… right? Nope.

Initially we had the idea to work from within their system (some vague CMS) and optimize potential landing pages. However, the system was such a hassle to work with… not flexible enough, old and plain bad. So we decided against using their system and created a separated landing page module fully incorporated in their design while having full control in optimizing the pages not only in code and content but also for conversion optimization.

We delivered the system the pages went live and they started ranking, very well. The client decided to do their own interpretation of the analytic data. We suggested they needed professionals to look at their data, but they had their “guy” for web development/analytics/SEO.

A few months later the client calls, all the landing pages pages were losing ranking fast and some weren’t even indexed anymore. Their ‘”guy” had kept on working the website and the landing pages but he didn’t know what was going on.

They asked us to do some research on why they were losing high positions so fast. I took a look at the SERPS and their website… to my surprise I couldn’t find any links to the landing pages. They effectively removed all links from the website to the landing pages. No wonder they stopped being indexed, the only reason they were still getting some hits was because a few pages had external links.

The moral of this story: Either get your “guy” trained or hire professional web developers/SEO’s for your website.

Where site search went wrong

Published on July 25th, 2008

I’m all for offering options with your onsite search but I came across a great example of how you can mess it up. The dutch site Knowington offers books for sale, so logically they offer a way to search trough their inventory.

Knowington search box

A simple search box nothing special… When you try to use it a few usability problems come up which make using the search annoying. Especially the extra options that appear when the search box gets focus (with the mouse cursor).

Knowington search box with extra's

Unexpected extra options

It’s unexpected because I didn’t ask for more options but I did get them. Only by focusing on the search box (I clicked the search box) the drop down menu appears.

It’s not working properly

Now this is a hard thing to say because the search function works fine and the selective search also works fine. However, they made the whole background of the header a homepage link. This with the search box not being that large results in a lot of clicks back to the homepage, deleting anything you might have typed in the search box and removing your selection search preference. Of course this is also a problem when you first try to click on the search box.

Even though your focus (the cursors focus that is) stays in the search box I can imagine a lot of people clicking the search box again. I did the exact same thing, since the type cursor disappears from the search box when the options pop up.

The solution is simple as it gets: either show the options right away or show a more options link. Don’t confuse visitors.

All basic stuff, maybe they should buy one of their own books on usability.

Nasty SEO by LogoBee.com

Published on July 16th, 2008

It’s always fun to see how respectable firms like LogoBee.com (PageRank 6 homepage) do sneaky SEO. I came across one of their articles named: “A Professionally Designed Website Can Mean The Difference Between Success and Failure for your On-line Business“.

It’s a crappy article so don’t bother to read it. Now at first glance, you don’t see anything special about this article, but what’s fun is that the page contains 23 outgoing links to the same website: web-site-design.tv.

Not only are they link spamming throughout the article but they also hide the links. By styling the links exactly the same as the content: black copy and no underline. You only see the links when you hover over them, by outlining all links on the page (by using the Firefox Webdev Toolbar) or by turning off CSS completely for a moment.

SEO by LogoBee

A bunch of hidden links made visible.

The page doesn’t even seem to be indexed by Google (probably penalized) but the main site still has a PR6. It seems Google allows sites to pull stunts like this without any further going penalties in question.

I really can’t see why they would need to lower themselves with pages like this… They might be unaware of what kind of pages they are publishing (which seems very doubtful) or it’s just about the money.

I shouldn’t have to mention that this is not the way you want to get higher search engine rankings.

Google, stop messing with your URI’s

Published on July 14th, 2008

This has been annoying me for a while: Google keeps messing around with it’s web app URI’s. With every new product they launch they seem to do something different. I run into this on a daily basis because I use a lot of the Google applications and I seem to stupid to remember the right URI’s to the right applications. 😉

Let’s take a look at a few applications and see how they handle it.

Google AdSense

AdSense can be found on the the Google domain as a sub directory: http://www.google.com/adsense/. This makes sense since this application runs under Google (or as a part of it).

Google AdWords

However, Google AdWords runs as a sub domain: http://adwords.google.com. Weird right? Why just not use sub directory’s for both systems?. They did try to solve this by catching the URI and redirecting it when you type in http://www.google.com/adwords. Okay that’s good right? No. Because when you add a slash (/) – and many people do this – Google just tells you it doesn’t know AdWords.

AdWords URI

AdWords? Nope no idea what that is…

And the confusion goes on… Google Docs runs on a sub domain (http://docs.google.com), but Webmasters doesn’t (http://www.google.com/webmasters/). Gmail used to gave it’s own domain but now it’s on a sub domain. I could go on for a while.

Google, stop messing with your URI’s. Pick a lane and go with it.

Should web designer be coders?

Published on July 8th, 2008

The more I think about it the more it rings true (for me at least): “A good web designer not only knows his design he or she also knows his HTML, CSS and the possibilities of the web”.

Almost every time I see a print designer – or web designer without coding skills for that matter – create a web mockup something goes wrong. Buttons are impossible to recreate in CSS, they overlay 2 gradients with a drop shadow or – even worse – they use non-web fonts for the whole page (yes, I know you could use SIFR, but that’s not the point here).

“A good web designer not only knows his design he or she also knows his HTML, CSS and the possibilities of the web.”

With knowledge of the web those mistakes wouldn’t have been made. I’m not saying web designers should see the the translation from design to code as a constrain. A low(er) resolution and (possible) full flexibility in your layouts are something that’s unique to the web.

This might be one of the reasons why elastic or liquid layouts aren’t that popular. Creating those layouts requires a deeper knowledge of technical layouts that just can’t be mimicked in Photoshop.

Another question enters: “Can one be a web designer without coding skills?”. Isn’t design for a medium understanding that medium? I think it is. Are there any motion designers that don’t know their way around a video editor? I think not.

Usability is also hard to think about in a static design. It’s a thing you really only start to understand if you work with interactive elements. How do the buttons work, is the active state clear enough, are we guiding visitors towards what we want them to do on the page… all those things start with design but end in technical execution.

If you are a web designer and you don’t know about HTML and CSS I strongly urge you to learn about HTML, CSS and the basics of programming in a language such as PHP. This will not only help yourself (by becoming a all-round web designer) it will help your own company or the team you work in. There’s more to web design then making Photoshop mockup’s.

The process from sketch, to design, to pixels, to browser should be a fluid one. A good web designer not only thinks about how things will look, but how they will feel: interaction, movement, feedback are some of the factors that come to mind.

Note: Other people are thinking along these lines too, Andy Rutledge wrote a great article about the skills an aspiring (student) web designer should have.

How not to sell links

Published on July 1st, 2008

While a lot of SEO‘s are working on ways how to sell links secretly I’ll give you a example how not to sell links. As you might know Google is coming down hard on sites they catch buying or selling links that transfer PageRank (PR). You want to avoid getting caught doing it.

Code-Sucks.com selling links

Check out code-sucks.com. They state they are selling links right on the homepage and they don’t even try to hide it as selling traffic, no they clearly state “Need to boost your Search Engine Rankings?”.

The link is just a image replacement on a H1 so that should be safe, but stating you sell links for the PR (PR5 to be exact) where everyone can see it isn’t smart.

Then there’s the directory, I expected quite some links in there, it being PR5 and all. Well… not a lot of links and not a lot of PR either. Granted, the Google PageRank in SearchStatus (my Firefox plug in) isn’t 100% trustworthy but it says ‘PageRank: unranked” here in my toolbar.

Then there’s some other things that bother me. The design for one, or the lack there off. And look at those headers “Site Name” and “Site Description”. Not very inviting or professional.

Code-Sucks.com link directory

I’m thinking of reasons why someone would do something like this… It would be that the directory isn’t finished, but I can’t imagine that being true with the big link on the homepage.

Even if you are trying to sell links try to keep the following things in mind:

  • Don’t blatantly state it on your homepage (or anywhere else if you can)
  • If you sell PR5 links, be sure that you have PR5 (or PR at all)
  • Try to make your link directory look like the rest of your site

Even if it’s not exactly allowed, selling links is not easy money. You should put some effort and thought into it.

Afterthought: It just came to me that this link selling directory might have already been penalized by Google. That would explain the lack of PR. It is indexed though.

Silverlight? No thanks.

Published on June 26th, 2008

Today I tried to install the Silverlight plug-in. Again. I don’t know why but I found myself on the Microsoft homepage where a little pop-up box said “Enhance your experience on Microsoft.com with Microsoft Silverlight”.

So far so good. Somewhere in the back of my head something was going on about not going trough the trouble and that I had tried it before. But that was a while ago so I decided to give it another try.

Install Silverlight

Click to install or click to download? Or both…

I click the “Click to install” button which is essentially a download button but I can live with that and Firefox starts downloading the .dmg file. I mount the file and open it up. No installer or anything just one file called “Silverlight_EULA.pkg”. I have no idea what EULA means but it says Silverlight so I should be save. I double-click and the install dialog comes up.

I get a friendly message in 10 pt. Times New Roman: “The Setup program will install Microsoft Silverlight on your computer. You will be guided through the steps to install this browser plug-in.”. Very well, let’s get going. I click continue.

The Software License Agreement comes up. Now that’s weird. Because didn’t I already agree to that when I clicked on the “Click to install” button on Microsoft.com? Yes I did.

Oh well, I agreed to them one time. Why not again. I go on with the installation, select the target hard disk and it starts installing. Only took about 20 seconds to install. That’s good. The message comes up “The software was successfully installed” and I’m prompted to restart my browser.

I restart Firefox and I return to the Microsoft homepage. No change, just the static images that where there before. After a few seconds I get a pop-up box asking me If I want to install Silverlight.

Silverlight? No thanks.

PlayStation Store annoyance

Published on June 20th, 2008

Those of you who own a PlayStation 3 have the joy of being able to download new content like games, trailers and add-on’s. This process takes place in the PlayStation Store.

As someone working a lot with online usability I tend to look at these things with a different eye. Let’s just say I am a bit more critical then the average user. First I would like to say that it’s great to have direct downloads to your PlayStation and it’s awesome to finally have a stable platform for game demo’s, as PC gamers have had for years.

The localization problem

The stores content differs from region to region. In Europe for instance we get most game demo’s a few weeks later then the states. Japan has a lot more PSP exclusives and the store content is updated almost daily, while Europe and North America only get updates once a week.

The region of the shop is connected to the address set in your PlayStation network account. You can have multiple accounts on one PlayStation and content can be shared between accounts. So what I did is just make two extra accounts (for North America and Japan) on top of my European account with addresses I got from the internet (I live at 350 5th Ave, New York… otherwise known as the Empire State Building).

Why make a region section at all, if it’s so easy to get around it?

Store content searchability

Because my main account is dutch I see the dutch store. The dutch store is a bit different from the North American one. For one thing, it’s a hell of a lot slower.

More annoying then everything else is a missing function that’s available in every other language: view new content. It’s not possible to check what items are new in the dutch store, so each time you want to see what’s new you have to go trough all sections and since everything is so badly categorized it’s a real drag.

Transparency in favicons

Published on June 18th, 2008

Favicons are now more important then ever, they help you in branding your website online. While it’s just a tiny icon it’s one the first things people see, appears in many social bookmarking tools and it’s visible in your favorites/bookmarks in browsers.

With the release of Firefox 3 favicons not using transparency look extra ugly next to the address bar and in tabs. A lot of sites use white as their background color not transparent which results in a ugly white background on the new gray background next to the address bar.

Example of a favicon without transparency

While online favicon generators like favikon.com are nice, they don’t offer the full control you should have over your icons. I create all of my favicons in Photoshop and use a nifty little plug-in called Iconbuilder. Iconbuilder by Iconfactory gives you a lot (maybe even a overkill) of export functions. You can create icons in multiple sizes and export directly to the .ico format (including transparency).

Getting your www rewrite right

Published on May 21st, 2008

It’s not exactly hard, but it can be a life saver. It seems that many developers forget to think about the www, non-www domain request via the browser. I’ve seen big site launches where the www. pointed to the homepage but the non-www gave an error. Keep in mind that a lot of the time with first indexation of the site most search engines point to the non-www domain.

On servers that use Apache you can force every browser request to redirect (with a search engine safe 301 redirect) to www. The following few lines in your .htaccess file will do the trick:

RewriteEngine on
RewriteBase / 
RewriteCond %{HTTP_HOST} !^www.yourdomain.com [NC]
RewriteRule ^(.*)$ http://www.yourdomain.com/$1 [L,R=301]

Change the above code to your domain and all requests will be rewritten to have the www. prefix. For instance: the request for http://domain.com/directory/filename.html will be rewritten to http://www.domain.com/directory/filename.html.

The .htaccess file

The .htaccess file can be found in the root of your website directory (where you also find your index file). If you can’t locate the file it might be hidden; file names starting with a dot are automatically hidden by a some FTP clients. Set your FTP client to show hidden files.

Another reason for this could be that the .htaccess file doesn’t exist. Just create a new empty file on your server and copy the the above code into it.