What your visitors see when they visit your web pages depends to some degree on the Operating System, Browser type and Browser Version they use. In this article tripwire magazine takes you through the most common tricks to optimize you website or blogs appearance to make it accessible and easy to use for most users.
Optimizing web pages for different browser types and versions could be a real pain in the early days of web development. The tricks that worked in IE just didn’t look the same in Netscape. The browsers and the standards they rely on have certainly matured over the years making it much easier to provide a consistent look and feel to most users. Still Cross-browser compatibility optimization is one of the most complex tasks when it comes to web-development. Web standards guarantee some degree of consistency, however no browsers are bug-free and particularly older browsers have always been loaded with “features” making web-developers life harder. This means that some of your users will experience cosmetic and in some case serious issues with the presentation if you have not done any Cross-browser compatibility optimization for the most popular browsers. It may not be possible to make your web pages look the same in all browsers but still you need to make sure that (at least) most visitors of your web-site can use it, navigate through it and find what they’re looking for.
Getting an overall understanding of the global browser usage trends and tracking what browsers your target audience / actual users use is a good start for limiting the necessary testing and optimization effort.
How to use Browser Market Share stats.
A very good source for information on what the most popular browsers are is Market Share. Having a perfect look and feel in Top 3 is a must and it should be achievable. Together the Browsers in Top 3 have a market share on more than 80% and looking at the trends reveals that IE 7.0 and Firefox 3.0 is increasing their share while IE 6.0 is decreasing quite rapidly. Still IE 6.0 must be considered as an important Browser also in the month to come.
The global market share is interesting to get familiar with but there’s no guarantee that the visitors on your web-site follow the trends. It is for that reason a good idea to use web-site statistics applications like Google Analytics to analyse exactly what your visitors are A screenshot from Google Analytics have been included below but most Web-site statistic software will be able to give you this kind of information, and most hosting providers offer some kind of statistic solution for free.
Browser Tests are Essential
For a number of reasons it is considered essential that you test your web-pages in commonly available and popular Browser-environments.
- You never know who might type in your URL or hit a link pointing at your web-site
- Visitors may use any kind of browser client available
- Visitors will have different configurations on their workstations (Screen Resolution, Fonts available, Font size etc.)
- The Browser-environment is so flexible and error tolerant that risk of inconsistent presentation is simply too high to ignore it
- Browsers like Firefox on Linux may not display web-sites as Firefox on Windows does.
- New browsers may hit the scene with rapid succes. Preparing for thier arrival with tests of Release Candidates is highly recommended
Testing your web pages directly in the browsers you consider important to support is of cause the most reliable way to make sure all problems are identified. Having all the relevant browsers installed on the most popular operating systems is on the other hand not that easy for bloggers and small start-up companies.
First of all you can’t install more than one version of Internet Explorer on one workstation unless you use Virtualization Software like Microsoft’s Virtual PC or VMware Player. VMware Player is free and a large number of Appliances (ready to use operating systems) are available for download.
Fortunately there are free services available that allows you to get a good overview of how your web pages perform on different Browsers and Operating Systems.
Browser Tests: Online-Services & Tools
BrowserShots is a free open source service that allows you to make screenshots of any web page available on the Internet (be aware that robots.txt can prevent this service). Most browser types (Firefox, Opera, IE and Safari, Dillo, Epiphany, Flock, Galeon, Konqueror, Seamonkey etc.) in relevant versions is available and you can also choose between the following Operating System: Linux, Windows, Mac OS and BSD.
IE NetRenderer allows you to check how a website is rendered by Internet Explorer 8 RC1, 7, 6 or 5.5. The Mixed- and Difference-Views instantly display the differences in site presentation (IE6 vs. IE7) overlaying both screenshots upon each other. This is a nice feature if you need hist for what to needs to be optimized. It is interesting that the service gives access to test IE 8 RC1 as it will allow you to test if your website is likely to be presented correctly in this upcomming browser.
The service offers everything you might ever need. Browsercam if not free but it has different price plans; the price varies bettween 20 and 1000$ per month. There is also a 24 hours free test evaluation which requires the registration on Browsercam.
CrossBrowserTesting.com allows website designers to test the cross browser compatibility of their website across different browsers and operating systems. CrossBrowserTesting.com is a commercial service where users buy credits giveng 5 min usage each. Anyone can register and use the service for for free but the free service has a 5 min max length.
Litmus provides testing on all major browsers and also produces bug reporting to help you identify and correct any errors. Once the testing is complete you can produce a compatibility report to share with clients. In addition to website testing, Litmus also offers testing of HTML emails in all major email clients, and also runs your messages through spam filters and identifies any problems so you can get more of your messages read.
There is a limited version of Litmus available for free. Additionally, there is a day pass with full access (minus spam analysis) for $24, an individual subscription for $49 per month, or a team subscription for $199 per month.
BrowserCamp allows you to test the compatibility of your design with Mac OS X browsers. You can quickly enter the URL that you want to test and get a full length screen shot at several different screen widths. Additionally, for full testing you can pay $3 for a two-day subscription, or $99 for a one-year subscription, with a few options in between.
Really handy tool for checking if all links on you web pages are valid.
Markup that is not well formed may give your site serious presentation issues in some Browsers while they are barely visible on others. It is always recommended to validate your site with the W3C Markup Validator and fix all the errors it reports.
Great resource for checking your Web site against a variety of browsers and versions and for browser information.
See how your Web pages measure up with this helpful online tool from Delorie Software.
Check to see if a Web site is down everwhere or if it’s just you. Helpful, easy, free tool. Just type in a URL and it instantly provides results to let you know if a Web site is down everywhere… or not.
Evolt.org’s incredibly thorough archive with over 100 browsers with links to their sites. As you’ll see, there are so many browsers besides Netscape, Internet Explorer, Opera and iCab!
A number of examples check what the browser supports and what it is capable of.
Test suite for Cascading Style Sheets level 2 by W3C
This statement says it all….“At some point in the internet evolution, IE6 was the Golden Grail of browsers. Big CSS support, new features, it had everything. That was 10 years ago, in a time where the words “web standards” meant the same thing as go fu** yourself. Unfortunately, Microsoft didn’t have to update it, IE6 competitors were practically nonexistent or not worth bothering.
Now IE6 is a pain in the ass. I will try to give you tips that will relieve your pain.”
- HTML and CSS Validation: Should You Validate Your Web Page?
- How to Check Your Website with Multiple Browsers on a Single Machine (Cross-Browser Compatibility Checking)
- How to Test Your Website Under Different Screen Resolutions under Windows the Easy Way
- Which Font Should I Use for My Web Page? Tips on Choosing Fonts for Your Website
- Designing for Browser and Platform Compatibility
- Preparing Your Website for Internet Explorer 8 (IE8)