#009: What I did on my Stylesheet Part 3: Browserlab Experiments

(Previous: Part 2: Classes and Ids)

Yesterday we finished our webpage using HTML(5) and CSS 3. The link to the finished product can be found here:

A Website Title! Grand Opening

As far as I and my browser of choice--Google Chrome 10--are concerned, the page is a pretty close match to the  original design.

 Had I wanted to make the page design a pixel perfect match, I could have--CSS is very powerful--but I didn't. It's close enough for my point and we're not quite done editing the page yet.


However, I can't trust my 'lying eyes' as someone famous once put it. Someone else who is famous (my best guess is President Regan, I don't expect to be on Jeopardy anytime soon, let me tell you) went by a motto of "trust but verify".

One way to verify is to download all the popular browsers that are available and test the page in each one. However, that still does not cover all bases. Not only will people be viewing the website with different browsers, they will be using different Operating Systems as well.

Virtualizing the OSes you need and testing as many browsers you can is still an option but it seems particularly excessive.

Fortunately for you, as for 2011, Adobe is offering free use of their Browserlab app. What it does is offer the ability to take screenshots of a page in various browsers and operating system contexts. It contains quite a few options. Not all--e.g. Opera which is growing in popularity (thanks to its mobile version) is not supported--but enough of the popular ones so you can trust that most users will see what you want them to see.

So, let's test our site with Adobe's Browserlab!

Adobe Browserlab: A Walk-Through


Click Here to Open Adobe Browserlab

You will see a page similar to this. Go to the top left side and click on the yellow button titled "Start Using Browserlab".

If this is your first time using Browserlab, Adobe will ask prompt you to install the app. You will need Adobe Air to download it.

Once that's done, you should see a page with the login form.

Create an Adobe ID if you do not have one, otherwise enter in the necessary information and sign-in.

You will see a dashboard of information but you can ignore that for now and go to the menu part at the top left and click on Test.

You will find a page that looks quite similar to a browser with no page loaded. Where the address bar would be, type in the link to the page you wish to test. In our case we want to enter:

http://lamp.cse.fau.edu/~cgilbe13/sum11lene/20110517_progressive.html

The browserlab will load the screenshot with the browser specified and display for you.

If you want to compare two screenshots side by side, click on View > 2-up View

There are two browsers, both on Windows. On the left is Google Chrome 9. On the right is the dreaded Internet Explorer 6. IE6 is the most outdated browser that still sees a meaningful amount of use. With IE6 you run into problems with even CSS 2.

As you can see here, IE6 does manage the background gradient for the body, but not for the headers. It seems strange because both are achieved using the same class, but multiple classes in IE6 has always been a little buggy. As for the rounded corners, I've decided that it is not worth the effort to achieve them using an extremely outdated browser. So I'll let it lie.

The second thing that is immediately noticeable is the font. I wanted to use Century Gothic a sans-serif font. Instead I am getting the serif Times New Roman. This means that the computer that is loading the page does not have Century Gothic installed and goes to its default font. There are several solutions to this problem.

Fonts: Web Safe and Otherwise

1. Choosing "web safe" fonts will ensure your page looks similar across all broswers and platforms. Here is a list of fonts considered web-safe. 
2. Include back-up fonts in case your desired font is not available. And when all else fails, make sure to add serif or sans-serif at the end. When the browser has exhausted your alternatives, it will pick the default serif or sans-serif font. It's better than nothing. Let's change our stylesheet.
   
   

3. The @font-face property allows you to link to a web font on your server. This allows you to include non-standard fonts across most browsers. Unfortunately, you can only use the @font-face property for fonts you have the license for. Century Gothic is owned by Microsoft and we cannot use it. But keep the property in mind, it is definitely useful.

Using the back-up font method, I re-loaded the page on browserlab and here is my result:

Century Gothic wasn't installed on the broswerlab computers, but Tahoma--a web-safe font--was. 

Try experimenting with various browsers and operating systems, changing the stylesheet as necessary. Browserlab is an excellent tool to create designs that look consistent to as many people as possible.