A few years ago, I wrote an editorial titled "Flash, DHTML, CSS, marquee and professionalism", ranting about browser compatibility issues, or rather the lack thereof on many sites. The gist of it: Make your sites compatible with everything. Simply relying on the very latest technologies is foolish as many visitors won't have yet caught up with their client software.
I still subscribe to that. The only thing which has changed (and which is the reason why I'm writing this new article) is my definition of 'compatible'. At the time when I wrote the old article (and actually up to the design which the site got in 2004 and which got replaced on the day this article was published), I strived for this site looking identical in every browser imaginable. No matter whether it'd be ten years old or brand new.
Technology-wise, that meant I had to stick to the least common denominator. That was pretty much plain HTML4. Placement of elements within tables, as many things done with images as possible, because images are bound to be rendered the same on all clients. Those of you who have designed a site with slightly more complex pages know how much fiddling this results in. The good news: I succeeded, and I actually never received any complaints of anything not looking as it should.
But at what price? Design and contents being interwoven like this, it's virtually impossible to change anything later on without reprogramming the whole site - including the scripts working in the background. The HTML code sent to the clients with every single page was huge, considering it's just a text file.
When I finished that last design in early 2004, I announced it'd be the last one I'd make this way. And now the day has come: In the tradition of the site to change its looks every two years, the next redesign has come, and I kept my promise. Now, at last, this site is built using what I consider the 'modern' way of webdesign. However, certain browser manufacturers have been sitting on their outdated products for years without doing anything. So what does that mean for the visitors?
The good news is that the site is working with every browser, no matter what. The HTML code you have to download to view this site has shrinked down to approximately one quarter of what it was before, making rendering a lot faster. The bad news is that it can look vastly different from browser to browser. It's always still usable, but it might not look very good. Let's have a look at a few cases (click on the thumbnails to get full-sized images):
GeckoIn case you're not familiar with the term, this rendering engine is used in all the Mozilla products and their spinoffs, i.e. Firefox, Seamonkey, Camino etc. Very standards compliant and a pleasure to work with. Absolutely no problems here - this is how it's supposed to look. All elements are in their correct places and they all have the right sizes.
OperaAnother browser with excellent standards support. If something works with Gecko, it also works in Opera and vice versa. Only one difference can be noticed: Opera displays the edges of the 'boxes' as actual corners as opposed to the rounded effect of Gecko. Well, Opera's in the right in this case. The effect you're seeing with Gecko is due to a CSS3 preview they've built in. CSS3 hasn't officially been finalized yet, though, so there's no blaming Opera for not supporting non-standard Gecko-specific attributes. I still put the rounded edges in, because it looks nice, and it doesn't hurt other browsers as you can see on this screenshot. To spice things up a little, I've added a dashed border style for some boxes instead.
Safari / KHTML / WebcoreApple's Webcore rendering engine is a spinoff of KHTML as used in Konqueror. Sometimes, one is lagging behind the other one a little, but generally, testing with one is enough to see the effects of both. The screenshot was done with Apple's Safari. As you can see, it's pretty much what Opera shows, too, so absolutely no complaints. One speciality of all browsers which are using the Cocoa toolkit (Safari, Camino,...) shows in addition: form elements can't be rendered different from the theme the user has set in his operating system. That is why the 'Go' button in the top menu looks all wrong. The only alternative would have been to use an image instead, but there were other issues with this solution (colours of different sections, placement and so on). So now, there's this one element which sticks out from the design. Not great, but it's working and hardly fatal.
Non-CSS Capable BrowsersWaaaaaaaah! What's that? It's a screenshot of the very same page I used for the above examples, rendered by Dillo. Mind you, Dillo is a very good browser which does exactly what it promises. I just used it as an example for all those browsers out there which don't have any support for CSS. Yes, I know there are plenty out there. Apart from Dillo, I'm occasionally using iBrowse myself (which renders the page similarly). Yes, I know it doesn't look very good. However, if you look carefully, you'll see that everything is there: the menu (which takes up most of the space), the general game information, the review and finally the comparisons. Ordered in a logical structure. It's all there and working just fine. It's just not designed at all.
The user group of these browsers have fallen through in my redefinition of 'compatible'. Basic compatibility is there, as I said. If you want to get to the contents, read the information, download things - you can. Nothing is stopping you, apart from your own visual taste probably. However, if that's really an issue, it's your own fault. As brutal as this sounds. It's not ugly at all in my opinion. Just as close to what the WWW was originally intended to do as it can get.
On a sidenote, since this is very similar to what Netscape 4 shows, I didn't make another screenshot with it. The only visible difference is that the site logo isn't readble in that browser, because of a bug in PNG support. Seriously, who cares?
Internet ExplorerIf you thought the previous case was as bad as it can get, you were wrong. Not supporting any CSS is fine, because at least, there's nothing getting in the way of the raw funcionality then. There's another group of browsers (or actually, it's one browser in particular, but it would be imaginable that there are others as well) which gives designers way more of a headache: the ones which support a little CSS, but the support is incomplete and buggy. The browser I'm talking about is Microsoft's Internet Explorer. I don't even know where to start listing the hundreds of small issues, so I'll just make an unsorted list of the most important ones:
- The top menu doesn't work. You can't see this on the screenshots, but when you hover the mouse pointer over the captions, submenus are supposed to open themselves. Browsers with decent CSS support do exactly that, saving valuable screenspace by only showing those elements when they're needed. Non-CSS browsers ignore the attribute which makes them invisible in the first place and just display the whole menu with all submenus (as seen on the previous screenshot). Internet Explorer interprets display:none (making the submenus invisible), but not the hover attribute making them visible again. There's no way around it, so users of this browser can't use the extended game search funcionality. As a workaround, you can click on the menu captions and from there go to basic standard selections. These listings should cover what you're used to from other sites, but nothing more.
- Images don't look right (especially those in the logo box). Internet Explorer (just like Netscape 4) doesn't support PNG transparacy. Since PNG is the only format which offers both 24 Bit colour depth and lossless compression, I still chose that format over GIF or JPG. There are no effects on usability, just visual disadvantages.
- The page spans over the whole screen width. Originally, the site is set to float between the width of 570 pixels and 760 pixels. The reason for this is to stay compatible with small resolutions (640x480), but also with large ones. I'm using 1280x1024 myself, and reading text which spans across the whole screen width is very hard. That is why it should stop at a certain width. Unfortunately, Internet Explorer ignores both min-width and max-width attributes, and so the pages always use the width they're given. If you have the same problem with long lines as me, resize your browser window as a workaround.
- The same bug makes the game information box span the whole width. As you can see on the other screenshots, the review is supposed to flow around this box, but again, Internet Explorer ignores the max-width attribute. Again, this is only a visual problem and doesn't lessen functionality.
- This cannot be seen on the screenshot, but for inexplicable reason, the main box stretches completely to the left on the main page, so the left menu is laid over it. The news text starts in the right place, though, so again, it's purely visual.
Why am I preaching in this case, but not in the former? Because all of you who are using this piece of crap by Microsoft have plenty of alternatives! People who are using iBrowse are already using the most advanced browser available for their operating system. People who are using Dillo probably have computers which are too old to handle anything heavier. That's fine, and they get complete functionality. Now that IE for Mac has officially been dropped at the beginning of this year, the only OS which has IE available is Microsoft Windows. Computers which can run a heavyweight OS like Windows should also be capable of running another browser. Computers which are running Windows XP in a usable way have no problem with handling Firefox on top of it. That semi-old machine still running Windows 98, because an upgrade would put too much strain on the hardware resources is still enough for Opera or an older version of Firebird / Phoenix (these are old versions of Firefox - years old, but they render this site fine). All you have to do is download one of them and install it. For free, no strings attached. So if you still insist on using Microsoft's browser instead, it's just your own laziness - and I really don't give a damn. Thanks for keeping web technology back where it was in the last millenium.
Update (2007-09-03): Internet Explorer 7Meanwhile, Microsoft decided to upgrade their 'browser' to a new version, and my mailbox was stuffed with 'complaints' how this editorial was ignoring the glamorous superiority of this latest offering on purpose (for 'political' reasons). Uh... sure.
Just have a look at the screenshot. A few bugs have apparantely been fixed (hover, min-width and max-width), other things are still badly broken (the games menu is shifted to the right, there's no space between logo box and main content etc.). Also, Javascript support seems to be just as badly limited as could be seen when the comments and screenshots didn't appear directly on the review pages as they should have. Once again, I had to do some seriously ugly hacking to make those things appear in this browser.
So, to conclude this: That's what took you several years? Still horrible; light years behind the competition. The concluding remarks in the general Internet Exploder section are still very valid.
Phew... that last part was long. Now that we're through, just a few short final words to wrap the premise of this article up. There were two central demands with which I started the editorial: compatibility and not using the latest technology.
Concerning the second point: Apart from the rounded edges issue which might be considered 'future technology', the technologies used to create this site (XHTML 1.0 Transitional, CSS2, PNG images) all come from the last millenium. It's now 2006. Hardly 'the latest', there was plenty of time for every browser manufacturer to get his product to conform with these standards and for every visitor to upgrade to such compliant software.
And finally, on the first point: This site's design is compatible and usable with every browser. I've tested and confirmed this with a lot more browsers than I was able to list here. And most important: it's compatible with the future. If a new browser version is released or even a completely new rendering engine is created anywhere in the world, this site will still work, because it's been written according to an officially documented and achknowledged standard. I'm not hunting for the individual browser bug anymore (or at least I'm keeping that to a minimum) and I can sleep very well at night, knowing that I won't have to work on the design in the morning, because a new browser version has been released which breaks the hack code I've written. Now enjoy the contents of the site, however they may look to you...
Mr Creosote (February 26th, 2006)
