It wasn’t that long ago that I changed the overall look and style of my website (read Website re-designed 8th Jan 2008) and 19 days later, I change my site yet again.
I really liked the overall look and feel of the Green Light 1.1 theme I used for WordPress but I did run across a few problems within certain Web Browsers (Mainly Internet Explorer versions 5 and up).
According to Browser Web Statistics and Trends by W3Schools, Internet Explorer is still the most popular browser (probably because it comes with Windows as standard), with 21.0% of people using the new IE7, 33.2% using IE6 and still 1.7% using IE5.5.
Internet Explorer has never been a strict follower of web guidelines (afterall, if everyone uses IE, Microsoft can invent whatever standards they want) and thus makes web design very difficult - a web design that works in standard compliant browsers will not necessarily work in IE and vice versa. Instead of fixing the problem, Microsoft actually allows CSS hacks within a site’s design.
Due to its relatively poor level of standards support, Internet Explorer tends to be the subject of most CSS hacks. Luckily, as of version 5, it deliberately supports a rather safe-to-use hack called “conditional comments”. Conditional comments are specially constructed HTML comments that Internet Explorer on Windows may treat differently from other browsers, optionally based on IE’s version number.
Taken from Web Devout - CSS Hacks
The World Wide Web Consortium (W3C) is an international consortium that develops Web Standards and Guidelines that ensure long-term growth for the Web. They also provide free HTML and CSS validation services and tools so web designers can check their designs follow these standards.
Green Light in IE5.5
As you can see, the whole page is a mess… The content has shifted completely to the left, the background images are cut short and the sidebar is nowhere to be seen… Actually, its right down the bottom of the page - if people viewing the site do not see the sidebar, then its very unlikey they will spend any time viewing the site.
Green Lite in IE6
Although the content of the page is now correctly centered and the background images are not cut short, once again the sidebar is nowhere to be seen - you can guess where it is… thats right… down the bottom of the page and remember 33.2% of people still use this browser!
Green Light in IE7
I think its got it!! Well, almost… there are still a few glitches but at least Microsoft’s new IE7 browser is starting to support those all important web standards. As a web designer, I cannot expect internet users to upgrade their browsers just to be able to view my sites and I must try and incorporate compatibility within my sites overall design.
Green Lite v2
So anyways… I decided to completely redesign the theme for my site while keeping the overall look and feel of the last design. It is now greener in colour and is readable in IE5.5 but is best viewed with IE6 and above (although not perfect).
The HTML validates as XHTML 1.0 Transitional and the CSS validates too (although some of the Wordpress plugins I use do not validate as of yet… my CSS does!)
From left to right: IE5.5, IE6 and IE7
(Please note, the screen shots below contain a blank section because of an embedded flash object not included in the screen shot)
Conclusion
Well although I have tried to write this post being unbiased as possible (kinda), I cannot contain myself any longer… Internet Explorer has always had serious problems - either with security or conforming to Web Standards… quite frankly - ITS SHIT! If its taken this long to start getting things right, why bother with it? (expecially as the HTML 5 draft has been published by W3C on the 22nd Jan 2008 - it could take Microsoft another number of years to follow any standards for that also).
You may have also noticed I have not even mentioned any other browsers, this is due to them following Web Standards closer than their rival, Microsoft.
Personally, I use the Firefox web browser along with 36.3% of other internet users.
What is Firefox?
Firefox is a free, open-source web browser for Windows, Linux and Mac. It is small and fast and offers many new features like popup blocking and tabbed browsing.
Firefox is based on the Mozilla code, and is one of the most standards-compliant browsers available.
Firefox is available for Windows 98, Windows 2000, Windows XP, Mac OS X, and Linux.
Taken from W3Schools - Firefox Browser
So after all my hard work, I hope my new design is more pleasing and easily navigable - no matter what Web Browser people use. I will be continuing to tweak the layout and hopefully make sure my plugins validate to web standards too.
- Browser screen shots on this page were created using Browsershots
- Statistics taken from W3Sschools were accumulated for December 2007
Leave a Response...