Essential tools for optimizing you website appearance

July 29, 2009 · 6 comments

by Lars

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.


ElegantThemes
ThemeForest

Advertisement

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.

browser usage graph

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.

google analytics

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 (free)

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.

browsershots_site

You can adjust the width of the screen size (640 – 1600), color depth (8 – 32 bits per pixel) as well as the JavaScript-, Java- and Flash-support. BrowserShots rely on distributed computers that are run by volunteers and the most popular Browsers may be quite busy and it this means that getting your screenshot may take some time. As screenshots become ready they will be available for viewing individually or for download of the full package.

browsershots_download

IE Web Renderer (free)

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.

IE Web Renderer

Browsercam

Browsercam, probably the most featurerich screen capture services available. It even offers an extensive browser remote control service giving you access to check javascripts, DHTML, forms and other dynamic functionality on any platform. The number of available browsers, versions and operating systems is permanently growing. 90+ browsers, Linux, Win, Mac and even the presentation in different versions of browsers on mobile devices (BlackBerry, Win Mobile) can be tested. You can also adjust the screen resolution (640×480, 800×600, 1024×768), set up the access to password protected sites and download all screenshots in a .zip-archive.

browsercam

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 (free/commerical)

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.

crossbrowsertesting_req

CrossBrowserTesting.com lets you log on to a remote session and take control of a operating system with a range of Browsers installed. This gives you the option to test your AJAX and Javascript as well as the layout.

crossbrowsertesting_os

Litmus

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.

Litmus

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

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.

browsrcamp

IE Tester (free)

IE Tester from DebugBar s a free web browser that allows you to have the rendering and JavaScript engines of IE8 RC1, IE7 IE 6 and IE5.5 on Vista and XP, as well as the installed IE in the same process.

ie_tester

W3C Link Checker (free)

Really handy tool for checking if all links on you web pages are valid.

link checker

Markup Validation Service (free)

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.

validate_html

AnyBrowser.com (free)

Great resource for checking your Web site against a variety of browsers and versions and for browser information.

anybrowser

Web Page Backward Compatibility Viewer (free)

See how your Web pages measure up with this helpful online tool from Delorie Software.

Web-Page-Backward-Compatibility

Down for Everyone or Just Me?

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.

Other Resources

Browser Archive

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!

evolt

CSS Tests and Experiments

A number of examples check what the browser supports and what it is capable of.

brunildo.org

Cascading Style Sheets Test Suites

Test suite for Cascading Style Sheets level 2 by W3C

CSS for IE6, 6 common problems and fast ways to fix them

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.”

blog-position-absolute

thesitewizard.com

{ 6 comments… read them below or add one }

louis vuitton June 23, 2010 at 7:09 am

Actually, BrowserCam’s Enterprise plan offers just that and more

Reply

SMS Spy June 22, 2010 at 1:27 pm

Hay really great post and helpful resources. You almost cover everything regarding optimizing website appearance in this post. I appreciate your thoughtful writes.
Thank you.

Reply

BrowserSeal December 4, 2009 at 8:45 am

>BrowserCam’s Enterprise plan offers just that
Yep, that’s the whole idea behind BrowserSeal – our basic plan (with basic pricing) is comparable in functionality to other services enterprise plans, for which they charge amounts of money that they don’t even dare to list on their web site :)

Reply

Kenn Min Chong December 4, 2009 at 2:52 am

Actually, BrowserCam’s Enterprise plan offers just that and more.

Reply

BrowserSeal December 1, 2009 at 7:41 am

If all the above multi browser screenshot tools cannot handle web sites with scrollbars and cannot be used to test local sites, i.e. site under development located on your PC hard drive or a corporate LAN. http://www.browserseal.com does

Reply

John Taylor April 24, 2009 at 2:34 am

Could you recommend any specific resources, books, or other blogs on this specific marketing topic?

Reply

Leave a Reply

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

Previous post:

Next post:


Web Analytics