Web Design with Cross-Browser Support

Building a website can be a daunting task. It is common to hear of someone offering to design and build a web site overnight, but usually those who offer such promises have little or no experience with the design and coding of such websites. Amateur web solutions are only appropriate when anything will do no matter how sloppy. It’s easy to find organizations that sell an assortment of pre-built web sites awaiting a new home. This generally sounds nice for those in a hurry but when your competition shows up brandishing that exact site it can be quite embarrassing. Many of these “site mills” know what they are doing to an extent, but generally work from their PC’s using Internet Explorer and are only designing sites that display properly in that particular browser. Because such a high percentage of web browsers utilize Internet Explorer, the customer never knows the consequences of their purchase.

Cross-browser compatibility is what we would like to address this month. Building a website that displays equally across all browsers is not as easy as one might think. Despite the popular belief that Internet Explorer is the only browser available there are a great deal of others.

First we should mention a few of the more popular Explorer alternatives, some of which are very odd and more than likely one of these will have have features that would entice you to switch.

Internet Explorer:

This is the toughest browser to design with. Microsoft is far behind in when it comes to web standards and with good reason. They are the most popular and most widely used browser available. If they released Explorer 8 and simply caught up to the web standards, a huge portion of those running websites would need to sit down and redesign their site to standards compliance, which can cause a good deal of stress and pain to a lot of companies. Especially those who opted for one of the website mills mentioned above.

Netscape:

Netscape was at one time a major contender in the browser marketplace. Unfortunately just this year, Netscape has ceased to exist, giving way to the ever growing popularity of Firefox and the Mozilla-based browsers. Though some still cling to this once great giant, the end is near with the majority of web designers no longer pushing code in it’s direction.

Firefox:

With continuous updates and features, such as tabbing and optional add-ons and plug-ins, Firefox has taken the browser world by storm. Even Internet Explorer has adapted many of the features Firefox has to offer. Considerable improvements have recently been release with the advent of Firefox 3, due to its open source nature. The open source community constantly improves this browser, so it is always on the cutting edge of technological changes and trends.

iCab:

This one is popular among Apple users. iCab is clearly named along the same vein as so may other Apple products though isn’t supported by Apple. This is a wonderful alternative for users running older Macintosh Operating Systems ( OS9 and previous ) and is even available for users of 68K Macs. Regardless of it’s limited usage, iCab is still used by a large portion of dedicated web users.

Safari:

While we’re talking about Apple, it’s only appropriate to mention Safari. Apple’s very own Macintosh browser. This browser comes standard on Macs just as Internet Explorer is standard on the majority of PC’s. So even though you might not have heard of it, everyone using a Macintosh computer is at least aware of it and, if not using it permanently, has used it in the past.

Opera:

Opera, one of the more rarely heard about web browsers on our list, has a massive base of users. It’s perfect for web developers in that it comes standard with debugging software, CSS (Cascading Style Sheet), and DOM (Document Object Model) inspectors. It also offers a variety of other features that make it an excellent and speedy companion for both Mac and PC users alike. Don’t forget that any user of Nintendo’s Wii is well aware of browsing the internet through Opera; it’s built into the system and has no Flash enabled capabilities as of yet.

The list goes on to include: Flock, Konqueror, Wyzo, Sunrise (one of our personal favorites as it actually takes over your entire monitor, though this can be a little strange for those not used to it), Amaya, OmniWeb (another Mac-based browser with excellent add-on features, perfect for the work environment. Unfortunately this one costs money and is one of the few remaining browsers to charge). The list goes on and on.

While we can’t expect the web coder to code for every single browser available, it is common practice to code for the more popular browsers in an effort to catch the majority of visitors. This is one of the reasons that it is important to have a statistics log for your website. Not only for the purpose of counting visitors but to see which browsers are accessing your site the most.

What this all boils down to is that the usage of professional code to allow the site to maintain a consistent look across these browsers is essential to maximizing your company’s advertising effect on its visitors. One example of a situation coders see frequently is the use of transparent PNG files. PNG files are a much cleaner way to achieve a transparent background image as opposed to a transparent GIF. GIF’s tend to leave a jagged white outline around the image and do not allow for a clean and crisp shadow on an object. Firefox and Explorer 7 typically have no issue with transparent PNG files, but for those users still running Explorer 6, 5.5, 5 and below (and there are quite of few still out there) the coder hits a wall. The transparent PNG displays an awkward blue background behind it and the potential effect of a company’s website on the visitor is lost. The solutions to such a problem can range from good JavaScript to a variety of other coding techniques that can resolve the issue, but you must know there is an issue in order to solve it.

Another major issue is how Internet Explorer reads and displays pixels versus how a Mozilla-based browser reads them. Each browser picks up slightly different nuances in height and width to a perfectly positioned object on the page. It is because of this that a coder should, in good practice, develop a secondary style sheet specifically for Explorer 7, Explorer 6 and Explorer 5.5. Developments below 5.5 become futile due to lack of support and the simple fact that it is extremely outdated.

The differences continue to shrink with each release of a major browser and the continued effort to reach a web standard, but these factors all play a major part in a designer and coder’s completion schedule. Such considerations can greatly increase the amount of time spent on the development of a professional website.

Keep this in mind the next time you’re looking for web design work. Professional websites take time, and just because fly-by-night site mills make web design look easy, understand that you’re paying for a sub-standard product that can quickly become outdated or messy for another coder to take the reigns on. For serious companies it’s always worth investing a little more in a website in order to ensure that you get the professional experience and peace of mind that comes with the knowledge that your site is optimized for the majority of browsers and won’t need to be constantly repaired.