Why is the logo of this site still an image?

11 October 2011

Try it yourself on JSfiddle.netSomebody must have been wondering why the logo at the top of this page is still a simple PNG image while I recreate the Apple logo and Android logo with pure CSS.

Well, I did create the Dreamdealer logo in pure CSS, using google webfonts as you can see in this jsfiddle, but I choose not to set it as header logo because of the browser compatibility.

Without a logo, the site would look like this and nobody could ever find out the name of the site:



Being an PNG image, the logo won't work in IE6, but it will still display and is still readable. Whatever happens, the logo is always readable. And since it's the name of the site it's one of the most important elements in every page. Thus it's very important it always works.

So why all this fancy CSS3 and not use it?

As webdevelopers we need to embrace the changes that are taking place right now. HTML5, CSS3 and even JavaScript are on full speed ahead when it comes to development. Every day new stuff gets added to the specs and we should use it all.

But only when it's possible! Always make sure the content styled with CSS3 is a) not important and can be omitted or b) there is a proper fallback for the styled elements.

I could have used the CSS only Dreamdealer logo if I created a fallback for older browser which would display an image instead, but that's not worth all the effort.

The PNG image now used as logo image will fallback to an ugly grey/white logo in IE6, but it will still be readable. And if all CSS fails, there is a hidden span with the text "Dreamdealer Logo" in it which will be displayed if the background image fails (not only with CSS disabled, but in print and in Windows' high contrast mode!).

The rounded corners in this site are CSS3, but when not supported the sites just gets boxy but is still readable. The back-to-top button is JS and CSS3, but when omitted you can still scroll to the top or press the HOME button on your keyboard. The HTML5 placeholders in the comment form only work in modern browsers, but the labels above the fields will always work.

So: always use as much CSS3 and other new techniques as possible, but only when the situation allows it!

Go and make the web a better place!
You must have JavaScript enabled to use this form!

Leave a comment!

  1. Your mail is safe with me. It's only only used to display your Gravatar image!

3 comments

  1. Gravatar

    Dreamdealer

    11 October 2011

    It's fixed now! The logo image is an inverted PNG with a background color set to match the selected menu item, but that background color is set with JavaScript and didn't have a default background color to fallback to. Now it has a default lightblue background color which shows when JS is disabled.

    Thanks for pointing this out Johnwoo!

  2. Gravatar

    Dreamdealer

    11 October 2011

    Darn, I forgot that! I'll fix it right away!

  3. Gravatar

    johnwoo

    11 October 2011

    FYI: the logo doesn't show when JavaScript is disabled ;)