Web Design with Cross-Browser Support

Building a website can be a daunting task. It's not uncommon to hear of a service offering to design and build a web site overnight, but usually, those offering 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. It's also easy to find organizations that sell an assortment of pre-built web sites which 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 an Internet Explorer only perspective and are designing sites that conform to that particular browsers rules. As a result, the customer fails to note their website crashing in the vast majority of browsers.

Cross-browser compatibility is what we are addressing this month. Building a website that displays on an equal footing across multiple browsers is not as easy as one might think and despite the popular belief that Internet Explorer is the internet, there are a great many other internet browser options available.

To begin, let's discuss a few of the more popular browser alternatives, some of which may seem odd but more than likely one of them will have features that enticing enough to switch.

 

Internet Explorer

The bane of all designers, Microsoft is currently the farthest behind in when it comes to web standards and with good reason they have the most widely used browser available. If they released an update and simply caught up to the web standards, a huge chunk of websites would need to be redesigned to meet standards compliance. I think of a few corporations that wouldn't be too happy with this decision simply due to lazy IT departments and cost involved.

 

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 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 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 its 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 WebKit browser. This browser comes standard on Macs just as Internet Explorer is standard on the majority of PCs. So even though you might not have heard of it, those using a Mac are 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, 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.

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 a purchase only and is one of the few remaining browsers to charge). 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 browsers 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 your site the most.

What this all boils down to is the use of professional code to allow the site to maintain a consistent look across browsers is essential to maximizing your company's advertising effect on its 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 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 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 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.

Dale Crum

Dale Crum

Owner / Creative Director at Doc4 Design