Design: Creating Cross-Browser Web Sites

Posted on
Like what you see? Share it.Share on Google+Share on LinkedInShare on FacebookShare on RedditTweet about this on TwitterEmail this to someone

For more than a decade, Web professionals in both industry and academia have urged designers to create Web sites that function as intended from one browser to the next. And for at least that long, designers have ignored this advice. Ensuring cross-browser compatibility has long been one of those “Web design 101” truisms. Yet if cross-browser compatibility is so important, why do so many designers choose to avoid it so consistently? After all, Web browsers have matured, and so has the code we all use. One would think that it would be easier than ever to design browser-neutral sites. However, Web sites today are increasingly brittle, meaning that might render well in one browser but not in another. Creating cross-browser Web sites remains a challenge for several reasons.

Four Reasons for Breaking the Rule
The first reason for cross-browser compatibility problems is the designer’s overwhelming need to create a unique site. No site designer is happy creating a site that looks equally boring in multiple browsers. This fact above most others is the cause for sites that look good in only one browser. Statistics regularly show that 80 percent of the visitors to a site are using Internet Explorer. And your goal as a Web designer is to reach the largest amount of users in your target audience. Why not design to the capabilities of Internet Explorer and please 80 percent of your possible audience?

However, the 80/20 statistic is not as useful to a Web designer as you might think. Due to security concerns and other factors, major browser versions have an almost unlimited number of permutations. Thus, what might seem like a unified browser base is actually quite fragmented. How many service packs, updates, plug-ins, extensions and hot fixes exist for Firefox and IE 5, 6 and 7? Each browser patch-level difference can easily cause compatibility problems for a Web site. Designers who fail to take this variable into consideration run the risk of creating sites that frustrate a great many Web users. Also, end users are free to make choices concerning the technologies they want to enable or disable, resulting in still more differences to a site’s rendering.

The second reason that Web sites lack cross-browser compatibility is that Web designers often find themselves under severe time limits. When the pressure is on to add features, maintain site appeal and deliver on time, it’s easy to ignore best practices and conventional wisdom.

Third, peer pressure is a big issue. As independent as Web designers like to be, they often belong to larger communities. Designers share ideas in these communities and often want to apply the latest and greatest things they learn about there. Going with the latest and greatest, however, often results in brittle sites that use newer code and plug-in-based technologies.

The fourth factor is boss pressure. Team leaders often pressure developers to create innovative sites quickly, often at the expense of cross-browser compatibility. Sometimes, it is easier to deliver these sites using a GUI-based HTML editor that focuses on creating ready-made layouts. As these layouts become more complex, however, you end up with a brittle site.

Technological Reasons for Brittle Sites
The list of technological culprits that contribute to brittle sites is long, but here are the most common:



  • Flash: A wonderful technology, but its improper use creates cross-browser nightmares.
  • Resolution issues: Many designers like a large canvas to design upon. The problem is that sometimes site visitors just can’t supply that much space.
  • Proprietary code: Still used, proprietary code often creates nasty surprises for site designers and visitors alike.
  • Fixed font choice: Although specifying a font is not necessarily bad design, limiting choice can cause a site to render unpredictably.
  • Improperly used tables: When you use a table rather than cascading style sheets and the
    tag to structure a Web page, you are looking for trouble.


These aren’t new problems, but they remain pesky. Why? Because any good Web designer knows when to take chances and depart from conventional wisdom. The problem is that there is a difference between a good Web designer who knows when and how to depart from conventional wisdom, and a bad Web designer who departs from conventional wisdom because something looks “really cool.”

Browser and Platform Differences
The same version of browser can perform differently from one platform to another. Observe Figure 1, my Firefox browser on a standard Windows XP system. The Web page renders as intended:

Figure 1: The Grateful Dead site in Firefox browser on Windows XP

Now, look at Figure 2 to see how the page appears in Firefox running on my Ubuntu Linux system.

Figure 2: The Grateful Dead site in Firefox browser on Ubuntu Linux

No, your browser isn’t having problems viewing this screen shot (hopefully). My browser is the one that had problems, because this site uses Flash in a way that is not compatible with my Ubuntu system. This Web page is an example of how a proprietary technology can cause cross-browser problems. Still, this site—one that won’t work on millions of systems worldwide—was nominated for a Webby award for outstanding site design. It’s proof positive that aesthetics often trumps cross-platform rhetoric. Further surprising is that this is an e-commerce site, and you’d think few e-commerce businesspeople would justify turning away customers for any reason, even aesthetics.

What About the Majority?
True, few use the browser and operating system mix used in the previous example. However, consider the audience for this site. Many prefer alternatives to almost anything mainstream, including computing technology. It is likely that the designers of this particular site, as talented as they are, have alienated far more than just 5 percent of their users.

Consider Your Primary Audience
Two legitimate reasons exist for sites that don’t appear particularly impressive: First, the nature of the business transacted on the site might demand a more sedate, straightforward design approach. Banking sites, for example, are going to try to convey a conservative, professional image. News sites, such as Reuters, CNN and BBC News, share this approach.

The second reason for non-dazzling sites is browser compatibility. Even if a bank or news Web site wanted to take a less conservative approach to its branding, these sites need to service a large number of people, many of whom might not be particularly savvy about using the Web. As a result, sites often revert to a more conservative technological approach. Otherwise, they risk losing customers.

Conservative doesn’t necessarily mean boring or traditional. Take the Google home page for example. All of the other pages in the Google site are rather simple, too. However, few people would accuse Google of being boring or traditional. The reason? Visitors who want to do a Google search or grab Gmail just want to get to the goods. The Web site should not stand in the way by presenting cross-browser compatibility issues.

Ensuring Cross-Browser Compatibility
Following are some quick guidelines to help ensure browser compatibility:



  • Consider your primary audience: By determining your audience, you can take wise chances and avoid alienating your audience.
  • Think big, design small: Design for an 800×600 screen. Yes, 80 percent of current visitors use resolutions of 1024×768 or greater, but flat-screen computer monitors—all the rage right now—actually tend to invite smaller screen sizes and resolutions. So, design for a relatively small space. This will please everyone: Those with small screens can see
Like what you see? Share it.Share on Google+Share on LinkedInShare on FacebookShare on RedditTweet about this on TwitterEmail this to someone


Posted in Archive|


Leave a comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>