Web Design with Cross-Browser Support

Embarking on the journey of building a website can often feel like a daunting task. You may come across individuals boasting about their ability to design and construct a website overnight, but in most cases, these claims come from those with little to no experience in the realms of design or development. While amateur web solutions might suffice when anything will do, relying on them can lead to lackluster results. Furthermore, there are organizations out there offering pre-built websites, which may seem convenient for those in a hurry. However, there's a catch: if your competition ends up wielding the exact same site, it can quickly turn into an embarrassing situation. These so-called "site mills" may possess some understanding of their craft, but they often focus solely on Internet Explorer compatibility, neglecting the vast array of other browsers available. Consequently, their customers are left unaware of the website crashes and glitches that occur when viewed on other platforms.

This month, we tackle the crucial issue of cross-browser compatibility head-on. Designing a website that performs flawlessly across different browsers is not as straightforward as it may initially seem. Despite the popular belief that "Internet Explorer is the internet," there is a multitude of other browser options out there, each with its own unique set of features and user base.

To begin our exploration, let's delve into a selection of these alternative browsers, some of which may seem unconventional at first glance. However, it's highly likely that at least one of them will offer enticing features that may make you seriously consider switching from your current browser.

Internet Explorer

The bane of all designers and developers, Microsoft is currently the farthest behind in when it comes to modern web standards and with good reason, they have the most widely used browser available. If they were to release an update and quickly caught up, a huge chunk of the web would stop working. I can think of a few corporations that wouldn't be too happy with this decision simply due to lazy IT departments and the massive costs involved.

Netscape

Netscape was at one time a major contender in the browser marketplace. Unfortunately just this year, they have shut thir doors, giving way to the ever growing popularity of Firefox and other 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 its 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 community constantly improves it for free, so it is usually on the cutting edge of technological changes and trends.

iCab

Popular among Apple users, iCab is clearly named in the same vein as so may other Apple products though not supported by them. This is a wonderful alternative for users running older Macintosh Operating Systems (think OS9) and is even available for users of 68K Macs. Regardless of its limited usage, iCab still has a large portion of dedicated web users.

Safari

While we're talking about Apple it's only appropriate to mention Safari, Apple's WebKit browser. This browser comes standard on new Macs just as Internet Explorer is standard on the majority of PCs. Even though you might not have heard of it, those using a Mac have and, if not using it permanently, have used it in the past.

Opera

Opera, one of the more rarely heard about web browsers on our list Opera has a massive base. 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.

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 it is purchase-only and is one of the few remaining browsers to actually do this). The list could go on and on.

While we can't expect a developer to code for every single browser available, it is common practice to code for the more popular ones in an effort to catch the largest base of visitors to a particular site. This is just one of the reasons why it is important to have a statistics log for your website. Not only for the purpose of traffic count but to see which browsers are accessing the site.

What this all boils down to is the use of professional code to allow a given website to maintain a consistent look across multiple browsers. This is essential to maximizing your company's advertising effect on visitors. 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 don't allow for a clean and crisp shadow on an object. Firefox and Internet 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 many 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 a range of JavaScript tricks to a variety of other coding techniques that can resolve the issue, but you need to know there is a problem 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 major browsers 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. Just because fly-by-night site mills make web design look easy it's important to understand that you're paying for a sub-standard product that can quickly become outdated. For serious companies it's always worth investing a little more in a website to ensure that you get the professional experience and peace of mind that your site is optimized for the majority of browsers and won't need to be constantly repaired.

Dale Crum
Dale Crum
Owner / Creative Director at Doc4 Design

Want to Hear More?

Need a cost estimate for a new project? Or just want to know what options are available? Get the answers you need by calling us at (479) 202-8634, or drop us a line using the form.