Category: developers journal

We make mistakes too – the “Ubrovnik” incident.

Author: Daemon February 12, 2008

Dubrovnik is one of the most beautiful cities in the world. It is protected by UNESCO due to it’s immense heritage, beautiful palaces, stone walls surrounding it, and all that kind of neat stuff that tourists love. Dubrovnik is the only city that was featured on CocaCola bottles – many tourism orientated cities tried that, only Dubrovnik was able to do it.

Enough with the history, it is confession time now. We made a huge mistake, on an otherwise awesome site for one of the Dubrovnik’s hotels – Hotel Petka.

Classified case 012: The Ubrovnik incident.

Hotel Petka

While designing the page, we had a cool idea to use image replacement for the first letter in the sentence on the homepage. It looks nice, and has that old school feeling.

The big D

What we failed to realize is that markup for this was not done as it should have been done:


As you can see, letter D is missing from markup as it was visually replaced with image of letter D. This, of course, means nothing to Google, and the site was placed dramatically low on Google. Page 4 to be precise.

On a grand scale from 1 to FAIL, this ranks at about eleven.

Good thing is that if you Google for “hotel ubrovnik” you get Petka first. Not a big comfort, but still, eh …

In any case, we are fixing this and hoping that Google will reindex the site and give it it’s deserved position.

UPDATE: less than 6 hours after i wrote this post, Google crawled us, and now this post is rated first, pushing Petka to second place if you search “hotel ubrovnik”.


    2 thoughts on “We make mistakes too – the “Ubrovnik” incident.”

  • Heh :), I’m wondering why you didn’t use CSS in the first place, I mean, pseudo-element :first-letter is designed for this kind of things. And most of operating systems today support ClearType tuning (even Windows XP through PowerToys) so there really is no need for images to replace text (except when you want to use some font that is not widely supported).

    P.S. When you are on the croatian site, in the right top corner there is “Language: » HR” and it should say “Language: » EN”

  • Excellent post, and truly a bad mark-up mistake, not to mention the accessibility and print issue. But maybe this can be solved by adding an alt(“D”) tag to the image itself, wonder if that would change anything. I’ll examine the problem in more depth, and repost. We might get a digg or few.

  • Leave a Reply

    Your email address will not be published. Required fields are marked *