Case Study: Pezus.com
Published: May 22nd, 2008
Posted by: Kevork Aghazarian
NOTE: This article was written when we had another website design up.
Our first R&D article is on our own website. We are going to outline the struggles of building a website that is strict with standards, performs well and works across all platforms and browsers. A predisposition of many people outside the web development world is that a programmer knows what he is doing, types the code and the site works. Any experienced programmer will tell you different.
The obstacles of web design are not simply time frames and layout changes. Coding a website even in strict format does not mean that it will look the same in every browser and in every operating system. The biggest issue being the rendering engines in Gecko based browsers and Trident based browsers.
The Gecko engine powers the famous Firefox browser and other Mozilla applications (Thunderbird for one). Gecko is an open-source rendering engine originally designed by the Netscape Communications Corporation, and is now controlled by the Mozilla Foundation. The engine is powerful and stable and abides to standards set by the W3C. Coding a website to work and look good in Mozilla generally ensures cross-platform compatibility with other browsers like Safari and Opera (each having unique rendering engines to Firefox and Internet Explorer as well as to each other).
The Trident engine powers the currently most used browser in the world: Internet Explorer (simply because it is pre-installed on all Windows systems). It was developed by Microsoft and continues to be upgraded by them fixing the many security holes and rendering glitches within the engine. In Internet Explorer 7, Microsoft made major changes to the way Trident rendered websites which allowed for a more standards compliant browser. The changes did not make Internet Explorer 7 modern, but they were a great leap from IE6, especially when it comes to PNG support.
The reason why there are 4 major rendering engines (to recap: Trident, Gecko, Webkit (Safari) and Presto (Opera)) is simply because there were separate groups developing their own engines for their own needs. The reason why there is no unified engine is because multiple engines allows for competition and constant improvement of the end-user web experience. What it also means is that developers must build websites to work on all browsers which means extensive tweaking must take place for a website to be compatible for everyone.
In the case of our website, Pezus, we had to take many measures to ensure overall good performance, look and feel over all four major rendering engines. For example, our navigation system works differently on three of the four engines. On Firefox and Safari, it works as expected, the buttons fade in and out and the sound clip fires as it should.
For Internet Explorer, we had to turn off the fade in and out of the navigation, and instead increase and decrease each navigation objects top margin. This was done because even though Internet Explorer supports PNG transparency, it does not support changing the opacity of PNG and when such a thing is done, you end up with black markings around the transparent pixels of the PNG image.
In Opera, we had both functions working alone, but together we experienced a reduced level of performance. It seems as though the fading in and out which is taken care of by Mootools and the sound clip firing engine SoundManager do not work well together as they take up too much browser resources. We decided to lose the sound effects in Opera and keep the smooth fading effects.
Taking a look at the header section of our website, you will notice some interesting things: We use conditional comments to load version specific style sheets and JavaScript files for Internet Explorer. We do this, because Internet Explorer requires different treatment than other browsers, and that different treatment is also divided to treat IE6 and IE7 differently. Confusing? In an ideal world, it shouldn't be, but Internet Explorer spaces out elements differently than most other browsers (or should we say, engines) and therefore requires tweaking or "hacking" to make a website look and function like it should.
We also have a JavaScript file that loads only if Internet Explorer 6 is detect, and its purpose is to bring PNG support for that browser. PNG images are the same as GIF images however their transparent pixels do not require matting or outlining in a certain color. PNG images' transparent pixels display properly over any background even if changed after the page finishes loading. PNG images are superior in this fashion and modern browsers support them fully, however Internet Explorer does not support PNG images in IE6 and loosely supports them in IE7.
In conclusion, the Pezus website is not terrible on the tweaking side compared to other websites we have built in the past and it functioned almost flawlessly across the browser spectrum, however like any modern website, we required tweaking to make it perfect in IE. It is easy to figure out that the root of many web designers' problems is the inherent lack of time spent on developing the browser by Microsoft. Internet Explorer 8 which is still in the development phase at the time this article is published will be a major improvement over IE7; however it has changed its rendering engine so much that websites containing tweaks for IE may not look right anymore in IE8. This of course poses more problems for web developers and webmasters. Microsoft implemented a compatibility mode button to allow displaying a page in IE7 format, but the ridiculousness of having to switch modes for every website is perpostorous.
FireFox is the New Internet Explorer... and more!
In this article we touch on some of the issues web developers run into when building websites or applications to work properly in all browsers. Generally speaking, FireFox and most other Gecko and WebKit browsers (including Presto/Opera) are advanced, up-to-date, secure and can handle all the new, innovative web technologies of today.
They also have impressive security features and good performance. Building for these browsers is generally easy and painless if you follow the web standard.
Internet Explorer is quirky, has many bugs when rendering code and among other things has huge security holes and memory leaks. Users both laymen and power benefit from using smart, modern browsers like Firefox as Internet Explorer is dated, even in its newer versions and degrades user experience. Make the right choice!