NED11: Module 7

Notes from Unit Outline
Browser Wars
Although great steps have been taken to establish standards that will alleviate display problems, they still represent one of the biggest challenges for web designers today. Your typical HTML document is nothing but a set of instructions written in ASCII that tells your visitor's browser what other files to download and how to display then.

Here are some differences between computer systems:

The history of browsers

• Mosaic was the first browser and was very very slow because it waited for the entire page to load before showing anything
• Netscape was next and was a commercial version of Mosaic and was much faster
• Microsoft Internet Explorer (IE) 3.6 was the first browser from Microsoft and revolutionised free access to web browsers. Microsoft gave away the browser for free with their operating systems
• Mozilla Foundation established in 2003 and once Microsoft solidified their lead in the browser war, they stopped doing any serious development on IE after the year 2000. So Mozilla released browsers which automatically blocked pop-up ads and introduced other new features to create a faster and more enjoyable browsing experience
• IE 9 is now the most current Microsoft browser
• FireFox is currently THE most popular browser, however Chrome is gaining popularity every month.

This table shows the most popular browsers for 2010, 2011 and 2012:

User Centered Design: User Statistics
The web has been designed to use as many client resources as possible to speed up browsing. These resources include fonts, colours, screen resolutions and more. There are many sites with useful information about browsers for web designers:

Browser News: this one is of particular interest and gives website designers news about browsers and design, helps find browsers, offers design resources and reports Internet statistics:

• A good way to ensure that sites will work for as many users as possible is to (a) design sites to the HTML, CSS, DOM, and other standards, avoiding “bleeding edge” features of the standards, (b) to test sites with common browsers that implement the standards well, then (c) to test sites with other browsers and to tweak the code to make sites work well enough for antique browsers still in common use
• Older versions of Internet Explorer — chiefly IE 5 and 6 — cause the biggest problems. The problems can typically be overcome by adding minor CSS code changes, often within IE conditional comments to ensure that the changes are visible only to those versions which need them
• Many people use very old browsers, some of which have unfixed security defects, all of which are less capable than newer browsers
• Some browsers — notably Internet Explorer — are supported for very long periods of time, reducing the incentive for users to update. Browser makers often end support for older operating systems, which prevents users from upgrading to the safest, most capable browsers. For example, IE9 is not available for anything older than Windows Vista
• Many smartphones use Apple’s WebKit, which is KHTML-based.

(Information courtesy of http://www.upsdell.com/BrowserNews/stat_trends.htm)

This is a table of personal computer web browsers by year of release of major version

Image courtesy of http://en.wikipedia.org/wiki/List_of_web_browsers#KHTML-based_browsers

Screen Resolution

• Resolution refers to dots per inch or pixels in multimedia. The higher the resolution, the smoother and more detailed an image appears
• Mac computers = 72 pixels per inch
• Windows computers = 96 pixels per inch
• 72 pixels per inch (dpi) are considered the standard for multimedia use
• In theory a 72dpi image will appear to be one inch wide on a Mac screen and slightly smaller on a Windows screen.

Tutorial Exercise

Go to http://www.ranks.nl/tools/screen_resolutions.html and test the Curtin website for the following screen sizes: 640x480, 800x600 and 1024x768. What observations did you make? Will the page work effectively at each resolution? Why or why not? Which resolution seems to be best?

I tried this exercise on my default Mac Safari browser however I noticed no difference in screen size or resolution because Safari didn't open a new browser window - it only opened a new tab which took on the dimensions of currently opened tabs. I then tried the exercise in FireFox and noticed the following results:

• 640 x 480 showed a small window with the dimensions 14.6cm x 8.4cm. I could see the global navigation links and the site heading, however I needed to scroll down and right to see the remainder of the page. Resolution was fine.
• 800 x 600 showed a medium sized window with the dimensions 18.4cm x 11.1cm. I could see global navigation, some content, the header and the short cut menus, however I still needed to scroll down and right to see the rest of the page. Resolution was fine.
• 1024x768 was the largest window to open up with dimensions 23.4cm x 15cm. I could see much of the screen and only needed to scroll down, not right. Resolution was fine.

Summary: I noticed no difference in resolution - only the screen size differed (the amount of content readable). The pages worked effectively at all sizes, however 1024x768 took less scrolling so I would consider it more functional and time efficient.

Go to http://www.anybrowser.com/ and run the Curtin home page through the following browser tests to see if there are any problems: SiteViewer, HTML Validation and Engine View.

• Site Viewer - all text was aligned along the left margin with no line breaks. It looked very crowded, text heavy and had no images. Upon first glance it looked like a page full of links, however upon closer inspection there was text included. The text looked very similar to the links as the links did NOT stand out, were not blue or underlined and looked like the standard text. There was no visual hierarchy at all and the information was very unattractive

• HTML Validation - I received this message: 

Unknown option: x Unknown option: d
Weblint Gateway
http://www.curtin.edu.au
Extensions: netscape
Warning Level: Gateway Default (-d quote-attribute-value)
Wed Apr 25 06:32:11 2012
Weblint error report
weblint v2.06
Usage: weblint [filename or url]... (filename - reads STDIN)
--help This message
--context[=n] Show the offending line (and n surrounding lines)
Error types: (default: all on)
--[no]structure Structural issues, like unclosed tag pairs
--[no]helper Helper issues, like missing HEIGHT & WIDTH
--[no]fluff Fluff that can be removed, like bad tag attributes
--only Turns off all other error types, as in --only --fluff

• Engine View - This is what the Curtin site looks like to viewers: