Designing by Web Standards.

This document discusses about the clean way of designing and maintaining the Web sites. Due to a large number WUSIWYG editors, Web developer have a nack of developing non-conformed HTML documents. Since those documents are not semantically written by the WUSIWYG editors, they result in un-expected Browser rendering problems.

This document focuses on different problems faced by a Web Designer / Developer. The term Web developer is being used vaguely here and it en-compasses Web Developer / Designer or anyone who is directly or indirectly involved in Web Site development or maintenance.

The Problem

Project Managers, Team Leads, and fellow developers have sat down - analyzed the project - made a live wire frame - went on story boards- and made a full blown Web Site. When the web site goes to Quality Assurance Department, one bug brings the developer back to their cubicles for further late sittings. The bug is "The Web site is NOT Cross Browser Compatible."

Now, when ever we are talking about Cross Browser compatibility, we are saying that the web site should appear same (or similar) in all the browsers. Which Browsers, to name a few, Internet Explorer (the most notorious one), Netscape, Fire Fox Opera.

These are the most common problems faced when designing Web sites.

  • Alignment Issues
  • Screen Resolutions
  • Wrong HTML

The Solution

Web Standards. What is Web Standards? Let me take an analogy. A Web Smith(I am using the word "Web Smith to combinethe Web Designing side as well as Web Development side, because there is very blurred line betweendevelopment and designing) design/develops a web site complete with page colors, texts, effects, images, tables (tables for layout, tables to tabular data) along with some user interactivity (client side scripts. Every thing goes well, until someday, a reply is received from one of the frustrated user. I am using Netscape 4, and I cannot see anything.

There could be several reasons, like

  • The client side scriptused, is not for older browsers or the older browsers cannot understand the code.
  • The CSS (Cascading Style sheet) used is not developed to cater Netscape 4 browsers. CSS 2.0 is not comprehensible for IE/ Netscape 4 browsers.
  • The user has tweaked the browser settings, like changed the page color, changed the font size. (users have these controls in all the major browsers, they can even use the custom made style sheets).

What is your screen Resolutions

To make the matter worse, what if the user is using handheld devices like palm tops, mobiles (WAP Protocols) Smart phones (Mobiles using Http protocol). Then Web -smiths have the screen size problem. Usually web-smith use the minimum screen size of 800 X 1024 resolution. This is a major problem when the user has the screen size set as 640 X 480 resolutions.

Web-smiths made web sites on certain assumptions, like s/he will be using standard market browsers. As a result, they usually (but not limited to) cater browsers like Internet Explorer 5.5, 6.0 (now 8.0), Netscape 6.0, 7.0 (now 8.0). What they do loose, are the users who are using other browsers like Opera 8.0, Safari, Fire Fox1.9, and the text only browser Lynx.

So what is this Web Standards

This is point where Web Standard kicks in. Web Standards is, when designing, keep all the browsers in mind, and design in such a way, that all the browsers (all mentioned above, and more) can be catered and at least see the document. The point to get the message across. If the user can see and interact with the page (if the browser has the capability).

Most importantly, it is not a good idea to paste a label on a site instructing the user that this site is best viewed if Internet Explorer 6.0 with screen size 800x480 is used. This technique my dear, web smith is just like saying, see through my eyes and you will see it clearly. Do not do this. If the user is well educated in Web standards s/he will go the moment s/he sees this notice.

Try to fit the content in the screen of the browser no matter what screen size the user is having.Many designer can argue with me the these days, we do not design for 640 X 480 mo moniter size but I am specifically focusing on accessibility and web standards issues. The best way to over come this problem is to use percentages or ems in CSS as measurements. These are the only measurement units which are relative, others (which include points, pixels, picas) are absolute measurements. By relative measurements, I mean that they will use the screen as it grows bigger or smaller, however, if we resort to absolute, if the screen size gets smaller, that is 640x480, horizontal scroll bar appears.

Dos

While designing any web site, a web smith should keep some things in his/her mind.

  • Use ALT tags for images. This attribute is very important since, this attribute displays the text when the image is either not loaded or the user has switched off the image download in the browser settings.
  • Do not confuse ALT attribute with the tool tip which appears when the mouse is moved over an image. Use TITLE attribute for the tool tip. Guess what, TITLE attribute can be used on almost any tags, for example, on A HREF tags, P tags. The tool tips are good provided they used constructively.
  • If a page background (suppose, light gray) is used along with white foreground color, make sure, that there is equivalent BGCOLOR used so that if the user has switched off the images, the text can still be visible to the naked eye.
  • Do not mis use the html tag BLOCKQUOTE. This is specifically for quoting some text not indenting some text. If indenting is required use CSS instead.
Hosted by www.Geocities.ws

1