T2L4

Site Design Considerations: BrowsersObjectives

After completing this lesson, you will be able to:

Recognize the different browsers used to view web pages and which are the most popular.

Evaluate the appearance of web pages viewed with different browsers.

Identify how and where to track browser market usage.

Determine how and when servers use MIME type extensions and identify which are the most common MIME type extensions.

Identify when and how plug-ins are used.

Determine why helpers are used and how to implement a helper application.

Describe the different design strategies and when to use them.

Evaluate if HTML code is properly formed through using validation services.

Describe the role of audience when designing a site.

Identify how a site’s purpose will influence design solutions.

Describe why it is important to test a site before releasing it to the public.

Introduction

Web designers and authors are in agreement that the toughest challenges related to Web design, center around the issues of multiple browsers and platform. This is an enormous problem since each browser or platform has distinct characteristic that will impact on the appearance of the site. If everyone had the same platform and browser, there would be no problems. But that is not the case! I guess it is not a perfect world (-:

The following information will serve as a background and hopefully provide some guidance to inform the design process. Remember because there are so many variables there is no single solution. It will entirely depend on your audience, design criteria and purpose of your web site.

Browsers

1

T2L4

Tracking Browser Usage MIME Types Plug-ins Helper Applications Design Strategies

Writing Good HTML Audience Is Key Your Site’s Purpose Running It Through the Paces

Additional ResourcesBrowserWatch

http://www.browserwatch.internet.com/

Validation service providers:

W3C HTML Validation Service

http://validator.w3c.org/

Web Site Garage

http://websitegarage.netscape.com/

NetMechanics

http://www.netmechanic.com/

Doctor HTML

http://www2.imagiware.com/RxHTML/

2

T2L4

Browsers

Browsers are software programs that view Web pages and help you move through the Web. The browser that triggered the WWW explosion was Mosaic, a public domain graphical user interface (GUI) from the National Center for Supercomputer Applications (NCSA). Released in 1993, Mosaic made it possible to design documents containing images for display over the Internet. Up to that point, an Internet document was basically just a bunch of text on a server. See Topic 1, Lesson 3, for more information on the history of browsers.

Two browsers dominate the market today - Netscape Navigator and Microsoft Internet Explorer. These two account for 90% of the browsers in use today. Thus, competition between these two companies has fostered the rapid development of browser technologies as each tries to establish dominance. While this has been positive for the rapid proliferation of the Internet and the customer, it has caused serious compatibility issues as vendors try to outdo the competition. Unfortunately, because of this fierce competition, vendors have developed proprietary technologies to establish an edge on the competition without adhering to international standard initiatives.

Not the Only Browsers

There are a variety of other popular browsers that account for the other 10% of the browser market. When designing most designers focus their attention on Netscape Navigator and Microsoft Internet Explorer. Depending on the audience, designers may want to take into consideration some of these alternative browser technologies. If you really want to see just how many browsers are available, point your browser at BrowserWatch . http://www.browserwatch.internet.com/

IE for the Macintosh

Generally, Internet Explorer for the Macintosh lags behind the development for it PC counterpart. Thus, the Macintosh versions of IE will lack functionality found on its Windows release. Thus, it is important to test thoroughly and design appropriately when it is necessary to reach both platforms.

America Online

America Online has developed it own browsers for its customers. It custom interface has been through many incarnations. Viewing web pages through the AOL browser can be a big surprise for web designers. Since AOL has released seven or eight different browsers it is difficult to expect more than minimal HTML support.

WebTV

Another popular interface that has grown in popularity is WebTV. This browser was developed to work with set-top box technology and your ordinary television set. Because

3

T2L4

of the inherent limitations of television technology, such as color considerations and image clipping, many HTML tags have been created to support this technology. WebTV has gained popularity with individuals that are not interested in computers or are not technology literate.

Opera

A browser, which originates in Norway that has focused on efficiency of design. Typically, it is very particular about it adherence to the HTML standard, thus poorly formed HTML will not be displayed properly. Many designers use this browser for testing how well their HTML is produced.

Lynx

A text-only, freely distributed browser that focuses on delivering the minimum stand for web page delivery. Lynx has been the browser of choice for displaying text only information on hand-held devices that have little or no graphic display capability.

Amaya

Amaya is the name of W3C's own browser/authoring tool and is used to demonstrate and test many of the new developments in Web protocols and data formats. Given the very fast moving nature of Web technology, Amaya has a central role to play. It is versatile and extensible - new features can be easily added - and is available on both Unix and Windows '95/NT platforms.

4

T2L4

Tracking Browser Usage

As a designer, it is important to have a sense for where the browser market is headed. This helps in making decisions regarding how to design and what features to support for your end-user audience. This can be accomplished by collecting statistics on the server that is running your Web site. These statistics can provide insight on the type of browser and version that are attaching to your site. By analyzing these statistics, you can adjust your design efforts toward the audience that you are serving.

A good resource for gaining a thorough understand of the browser market place is BrowserWatch http://www.browserwatch.internet.com . This is a great resource site for following the different browser technologies. It provides news, chat facilities, information on plug-ins, platform-specific browser information, statistics and more. In viewing the statistics on this site please be aware that the statistics being gathered are related to the browsers that are attaching to the BrowserWatch server and may be considerably different than the statistics for your particular site’s server. Because the audience for BrowserWatch are those individuals interested in browser development, statistics will reflect that audience.

A sample from February 4, 2000:

Browser Value PercentMicrosoft Internet Explorer 6441 52.6%Netscape Navigator 4197 34.3%Science Traveller International 1X 427 3.49%Opera 196 1.60%Powermarks-3.0 (compatible; Powermarks 139 1.13%IBrowse 111 0.90%AOL 80 0.65%indexpert 70 0.57%Lynx 54 0.44%Cyberdog 38 0.31%_Microsoft Internet Explorer 32 0.26%Amiga-AWeb 30 0.24%

5

T2L4

MIME Types

Servers add a header to each document that identifies what type of file it is. When the browser receives it, it knows what to do with it; display it, download it to disk, and so on.

The system used to identify media types closely resembles MIME (Multipurpose Internet Mail Extension), originally developed so e-mail programs could handle attached documents correctly. It is also known as Internet Media Types.

If you want to deliver media beyond HTML files and the standard GIF and JPEG files, chances are your server will need to be configured to serve these files with the proper MIME type. This is done differently for each server, although many of them use the file extension to identify the MIME type. In any event, you should contact your server administrator if you think a MIME type must be added to your server.

If you have a file they should appear or download in a certain way and doesn't, the first thing to check is its MIME type setting.

Here are the more common MIME Types:

Extension Type/Subtype Description ASCII/Binary

.ai application/postscript PostScript viewer A

.aif, .aiff audio/x-aiff AIFF file B

.aifc audio/aifc Compressed AIFF file

B

.au audio/basic u-law sound file B

.avi video/avi or video/x-msvideo

AVI video file B

.bmp image/x-MS-bmp Microsoft BMP file B

.dcr, .dir, .dxr application/x-director Shockwave files B

.doc application/msword Microsoft Word document

B

.eps application/postscript Encapsulated Post-Script

A

.exe application/x-msdownload

Self-extracting file or executable

B

.gif image/gif Graphic in GIF format

B

.gz application/x-gzip Compressed file, use gunzip (Unix decompressor)

B

.hqx application/mac-binhex40

Mac BinHex Archive B

6

T2L4

.htm text/html HTML document A

.jpg, .jpeg, .jpe, .jfif, .pjpeg, .pjp

image/jpeg Graphic in JPEG format

B

.mid audio/midi or audio/x-midi

MIDI audio file B

.mov video/quicktime Quicktime movie B

.movie video/x-sgi-movie Silicon Graphics movie

B

mpg, .mpe, .mpeg, .m1v, .mp2, .mp3, .mpa

video/mpeg MPEG movie B

.pbm image/x-portable-bitmap

Portable bitmap image

B

.pcd image/x-photo-cd Kodak photo CD image

B

.pdf application/pdf Portable Document Format (Acrobat file)

B

.pic image/x-pict PICT image file B

.pl application/x-perl Perl Source file A

.png image/x-png Graphic in PNG format

B

.ppt application/powerpoint PowerPoint file B

.ps application/postscript PostScript file A

.qt video/quicktime QuickTime movie B

.ra, .ram audio/x-pn-realaudio RealAudio file (and metafile)

B

.rtx text/richtext Rich Text Format (Microsoft Word)

A

.rtf application/rtf Rich Text Format (MSWord)

A

.sea application/x-sea Self-extracting archive (Stuffit file)

B

.sit application/x-sit Stuffit Archive B

.snd audio/basic Digitized sound file B

.swf application/x-shockwave-flash

Shockwave Flash file B

.tar application/x-tar Compressed file B

.tif, .tiff image/tiff TIFF image (requires external viewer)

B

.txt text/plain ASCII text file A

.wav audio/s-wav Waveform audio file B

7

T2L4

.wrl, .wrz x-world/x-vrml VRML 3D file (requires VRML viewer)

B

.xll application/vnd.ms-excel

Microsoft Excel File B

.zip application/x-zip-compressed

Compressed files (decompress using WinZip or Stuffit on Mac)

B

8

T2L4

Plug-ins

Plug-ins are small programs that add features and capabilities to the browser. Usually, a plug-in is not a stand-alone application; it will work only in conjunction with a browser. An example plug-in is the plug-in for Adobe Acrobat. People share some documents in PDF (Portable Document Format) on the web. Browsers cannot open these files by themselves. With the proper Acrobat plug-in, however, these PFD files can be opened, viewed, and printed by the browser.

Plug-ins "integrate" with the browser in such a way that using them is automatic. When media files on the Web require the use of a particular plug-in, the plug-in starts on its own. Most major sites that use these files also provide a link to the plug-in developer's site, so that you can download and install it, then return to the first site and play the file.

Most browsers come with a set of the most common plug-ins already installed. For example, the Flash plug-in, used to play animations in the Flash format, comes with both Netscape Navigator and Internet Explorer. This example, taken from the Macintosh version of Netscape Navigator, illustrates how the plug-in is incorporated into the browser:

9

T2L4

You should avoid developing a site that requires the user to download and install a plug-in if at all possible. When you complicate a site in this manner, you risk losing and/or frustrating the user. If you must develop a site that requires a plug-in, make sure you provide clear directions on how to download and install the plug-in, as well as technical support to ease users through the process.

How do you check for a plugin? One way is to use JavaScript. See the Plug-in Detection script (later chapter) for more information. Another way is for the user to manually check his/her browser. In Navigator, for example, there is an "About Plug-ins" menu choice. The more common browsers have a menu command that will list all installed plug-ins.

10

T2L4

Helpers

Browsers can handle many types of files. However, for some files, such as movies, the browser launches a "helper" program that can handle the file, or it saves the file for you to view later. These programs are much like plug-ins, in that they are often called automatically when needed during a Web session. Additionally, they can function as stand-alone programs for off-line use. Many of these helper programs are available as shareware.

Here is an example preferences screen (from the Macintosh version of Netscape Navigator) where one can add or change current helper applications:

Your browser may handle this differently. The settings in the preferences panel tell the browser which helper applications to use on your computer. Many of the most common helpers come pre-configured. You can add more helper programs if you need to, although the procedure is somewhat complicated. Also, if the browser doesn't know which helper application to use, it guides you in finding one. This requires a bit of expertise on the part of the user, however, and will probably cause user frustration. Thus, you should try to avoid designing situation where the user must download a file that cannot be read until the helper applications are properly configured. If you cannot avoid this, make the installation procedure is as simple as possible, provide detailed instructions, and provide technical support for the installation.

11

T2L4

Design Strategies

With all these different capabilities within the various browser technologies it is hard to know the correct approach for your site. This, of course, will depend largely on your audience. Here are some common approaches currently used when making design decisions:

Minimum StandardsSome web designers feel that the Web should be accessible to everyone, thus their design focuses on minimum HTLM standards that can work in all browsers. These designers content that many of the advanced features such as, Java, JavaScript, style sheets and DHTM, are not necessary for successful communications and choose not to include these in their designs.

Most Current VersionStill other web designs take the opposite approach and feel that they want to be on the cutting edge and will implement the newest features with little concern for the user. The prevailing attitude is that the browser software is freely distributed and the user should upgrade. This approach also has problems because it tends to alienate some portion of the audience. On the other hand, this approach often forges new boundaries for design and pushes the community at large to adopt new technologies to compete.

Happy MediumMost commonly designers tend to take a balanced approach which sits somewhere in the middle. Usually this involves design for the previous version of the browser so as not to alienate the users. By focusing on the most recent version design can focus on newer more acceptable capabilities but not push too hard on the stretching the end user. In this approach designers typically have developed a fall-back strategy that allows their web pages to “degrade gracefully.” For example, the designer may actually build two sites - a high end with all the bells and whistles (cutting-edge multimedia) and a low end with mostly text, minimal graphics or other media. This approach allow designers to use cutting edge technologies but implements them in a way that pages are still fully functional with older browsers.

A Little Bit for EveryoneAnother strategy with is often employed is to create multiple versions of the site for different levels of users. This approach, while sensitive to the user community is much more labor-intensive and difficult to maintain. Some designers have developed sophisticated approaches that detect the version of the browser and select the appropriate pages to serve up.

12

T2L4

Writing Good HTML

Writing good HTML is vital for having your pages work successfully. To insure that your code is properly formed several approaches can be used. The two most commonly used are validation services to check your Web site or to use development tools to check your code for accuracy.

Validation ServicesSeveral validation services have opened shop on the Internet to check your Website for quality issues. These validation services will check your HTML for errors and provide a report. Generally, these service providers will charge for the service.

Here are some popular validation service providers:

W3C HTML Validation Service

http://validator.w3c.org/

Web Site Garage

http://websitegarage.netscape.com/

NetMechanics

http://www.netmechanic.com/

Doctor HTML

http://www2.imagiware.com/RxHTML/

Built In Validation

Many popular HTML authoring tools are now starting to incorporate features that allow designers to check their HTML. One such tool is Macromedia’s Dreamweaver. By using the “Check Target Browser” feature, it allows designers to specify which browser they would like to target in their site design. This browsers is then opened and HTLM is displayed. Dreamweaver then check to see if the HTLM is appropriate for the browser specified.

Another product that generates browser specific code is Macromedia's Drumbeat 2000. This particular tool can generate browser and version specific HTML, Javascript and VBScript.

13

T2L4

Audience is Key

Knowing you audience is key. Depending on whether you are designing for a corporate, commercial, scientific or educational site will clearly have an impact on the kind of technologies that you employ. Generally, the more isolated and controlled the more likely you can develop for your specific needs with an informed view of you users. Thus, in a corporate web site where you know the platform and the browser version, it is much easier to develop a site that will work with a great deal of success.

Where there is less control, it is much better to develop a close understanding of your user. If you are redesigning your site, you have the opportunity to gather statistics on those individuals that have been accessing your site and determine the rage of technologies being used. This gives you a much clearer picture of what your user base happens to be and thus better information in the redesign of the site.

For site that a new and will attract a variety of users, it is probably wise to design for a generalized user community. Thus, don’t set you technology implementation too high, recognizing that you will have a broad spectrum of users with a variety of browsers. If resources are available, it might be sites to consider multiple versions tailored to your user communities.

For more information, see Topic 2, Lesson 3, Planning Before Designing

14

T2L4

Your Site's Purpose

It is also important to know your purpose in designing your web site. The purpose also might have an influence on the overall design of the site. For example, if you are design the site for a special community that would have specific needs. For example, you are designing a scientific site that attracts users with specific platforms or browsers considerations. Or you are designing a site for a technical group that would have a specific purpose (i.e., a gaming site, or Java developers, etc). These considerations can also motivate you to develop design solutions that will complement the end-users purposes.

15

T2L4

Running It Through The Paces

No matter if this is your first site or your twentieth, testing is vital to the design of your finished product. Testing will give you an opportunity to put your site through the paces and determine problems before it is released to the public. It is important to look at your site through a variety of browsers and under different load circumstances. This process will assure that your site will operate successfully and without major issues.

16

T2L4

17

T2L4

Browsers Summary

This lesson is designed for you to identify characteristics of various browser technologies and see how these characteristics impact design decisions. When you are finished with the lesson, you should be able to conceptualize the following:

Browsers Tracking Browser Usage MIME Types Plug-ins Helper Applications Design Strategies Writing Good HTML Audience Is Key Your Site’s Purpose Running It Through the Paces

A short summary of these topics are listed below. If you do not understand these things, you should review the lesson at least once. If you are still having difficulty, you should consider other sources of information that compliment this lesson, such as textbooks, tutors, and instructors.

Browsers

Browsers are software programs that view Web pages and help you move through the Web.

Netscape Navigator and Microsoft Internet Explorer are the two most popular browsers. Other browsers include:

America Online

WebTV

Opera

Lynx

Amaya

Tracking Browser Usage

As a designer, it is important to have a sense for where the browser market is headed. A good resource for gaining a thorough understand of the browser market place is BrowserWatch http://www.browserwatch.internet.com

18

T2L4

MIME Types

Servers add a header known as the MIME type to each document that identifies what type of file it is. When the browser receives it, it knows what to do with it; display it, download it to disk, and so on.

Plug-ins

Plug-ins are small programs that add features and capabilities to the browser. Usually, a plug-in is not a stand-alone application; it will work only in conjunction with a browser.

Helpers

Browsers can handle many types of files. However, for some files, such as movies, the browser launches a "helper" program that can handle the file, or it saves the file for you to view later. These programs are much like plug-ins, in that they are often called automatically when needed during a Web session. Additionally, they can function as stand-alone programs for off-line use.

Design Strategies

Here are some common approaches currently used when making design decisions:

Minimum Standards - Pages written so all browsers can display them properly. Extras, like Javascript and DHTML are not used.

Most Current Version - Pages on the cutting edge. Full use of whatever it takes to do the job.

Happy Medium - A balanced approach between minimum standards and the most current version.

A Little Bit for Everyone - Multiple sites on the same topic; each site tailored to a different audience. For example, a site may have a link to a minimal standards-type page, and also a link to a most current version-type page.

Writing Good HTML

Writing good HTML is vital for having your pages work successfully. Validation Services can check you pages for HTML problems. Some sites include:

W3C HTML Validation Service http://validator.w3c.org Web Site Garage http://websitegarage.netscape.com/

19

T2L4

NetMechanics http://www.netmechanic.com Doctor HTML http://www2.imagiware.com/RxHTML/

Also, many popular HTML authoring tools are now starting to incorporate features that allow designers to check their HTML.

Audience is Key

Knowing you audience is key. It drives your design issues.

Your Site's Purpose

It is important to know your purpose in designing your web site. The purpose also might have an influence on the overall design of the site.

Running It Through The Paces

No matter if this is your first site or your twentieth, testing is vital to the design of your finished product.

20