An Event Apart Boston 2009 “the design conference for people who make web sites” just wrapped up today, and that was a strong message from no less than four of the fifteen presenters. In the past there has been a tacit assumption in the web design community that web sites should look the same, pixel for pixel, in the web browsers used by the majority of web site visitors. That would currently include Internet Explorer 8 (IE8), IE7, IE6, Firefox, Google Chrome, and Safari. One of those six browsers are used by approximately 97% of web site users according to the W3 Schools browser statistics page as of May 2009.

The new trend is a more realistic approach to web site design and development issues. “Different does not mean broken” said Andy Clarke, one of numerous presenters at the conference making the point that it is okay for web sites to not look identical in different web browsers.

What matters is that the content and functionality of a web site be made available to the largest number of web site visitors possible. If a button has rounded corners in Firefox but not in IE6, it’s not a big deal.

This approach allows web developers to start using some of the new features available in CSS3 right away, including creating rounded corners and drop shadows on both text and containers. Implementing these style elements in CSS saves time in the development process when initially creating a web site, and over time when maintaining it. The problem is that CSS3 features are not supported by IE7 and earlier. Many CSS3 features are supported by IE8, Firefox 3.5 and above, and Safari 3 and above. So going forward, support for these features will continue to improve.

Web site owners will be interested to know that implementing these features, like rounded corners, using CSS3 saves them money both in the short term (during development) and in the long term (considering web site maintenance). Design elements like rounded corners can be made to work in older browsers that don’t support CSS3, but that requires the designer to create separate special background images for each of the four corners of the box, and requires the coder to use extra HTML markup to apply those images. These images mask the “natural” square corners of the box giving them a rounded appearance.

While this looks great in more browsers, there are many downsides. In addition to taking more labor to create the effect in the first place, if changes need to be made to the corners in the future it takes more time than changing a few digits in a style sheet. There is also a slight performance hit to the web server, as more graphics have to be downloaded to the user’s computer in addition to a slightly more complex and therefore larger HTML file.

I am very much in favor of the new direction. What it does is focus our attention on what matters more as web site owners and web site designers: the content of the web site and the functionality of the web site. That is what we should be striving to deliver effectively to our web site visitors. Using the new techniques, if web site visitors are also using modern software, they will be rewarded with an enhanced appearance to the page.

Well, which browser you use is less important than having the realization that not everyone on the Internet uses the same web browser you do. A common mistake we all make at times in life is to assume that others think the same way we do, or do things the same way we do. In consumer circles Microsoft still dominates cyberspace and it is easy to assume that everyone is using Internet Explorer to view your web site. But that certainly is not the case.

The seven most widely used web browsers on the Internet as of last month are, in order of popularity:

Internet Explorer 6
Firefox
Internet Explorer 7
Safari
Opera
Internet Explorer 5
Netscape

Resources for web browser market share stats:
http://www.w3schools.com/browsers/browsers_stats.asp
http://en.wikipedia.org/wiki/Usage_share_of_web_browsers

The first three have a total of about 90% of the browser market share. Three of the seven browsers above have growing market share: Firefox, IE7, and Safari. The rest are in decline.

As a web site owner, the reason you care about all of that is that you want to be sure your web site works well in more than just the web browser you use personally.

Every web browser out there renders (displays) any given web page slightly differently (or sometimes drastically differently!). A good web developer will take that into account and make accommodations so web sites they produce display faithfully in a wide range of browsers. Coding to web standards is an important start. After that, browser testing and using browser-specific CSS styles is almost always required to achieve multiple-browser consistency for your web site.

Based on the statistics, at a minimum you want your web site to render correctly in at least: IE6, IE7, Firefox and Safari. These four browsers have the dominant market share, or are growing in popularity. Safari is important as it is the native browser for Apple computers (whose market share is growing), and Apple also recently released Safari for the PC that runs wonderfully on Windows. Safari’s market share will continue to increase as a result.

Opera should also be considered. While it only has about 1.5% market share overall, it is one of the dominant web browsers in the hand-held device market. If having your web site display correctly on mobile devices is important to you, make sure you test on Opera. The mobile device market is extremely complicated to test for because of the variety of platforms and web browsers in use. But Opera is a consideration none the less. Safari weighs in here too – it is the native browser on the iPhone.

Is your head spinning yet? It needn’t be. When you pick a web developer, ask them what browsers they test in. You now have enough knowledge to know if their response is reasonable or not.

Unfortunately there are numerous examples of web sites that look right in only one web browser, and often at only one window size. Thoroughness by your development team makes a big difference. You might be able to save a few bucks by going with a cheaper web developer, but if your site only looks right to 35% of the people visiting your site was it worth it?

I downloaded and installed it today on my Win XP machine. Some very nice features. I like the way you can move tabs around, and the ease with which you can bookmark a group of tabs, or add a bookmark to the toolbar.

A major annoyance though, is that Safari does not seem to recognize a center-click on my mouse wheel. I have my other PC browsers configured so that clicking my mouse wheel is equivalent to clicking the browser’s back button. Without this, I find navigating in Safari a significant hassle.

Also interesting that you have to manually enable the status bar at the bottom of the browser window from the “view” menu. I’m glad it is possible to enable the status bar as it reveals the URL of links when one hovers them. I would have liked to see this Safari feature turned on by default, but at least the choice is there.

I’m slowly turning my PC into a Mac!