10.Good Design V2

(1)

Written by Dept. of Computer Science @ Dr. BVRICE Bhimavaram W.G. Dist.,

10. Good Design

1. List the factors that affect the design of a web page.

Web designing is a complex and objective. The factors that affect the web page

design are:

1. Usability: This is the study of how using technology can be made easier. This is also

called user friendliness.

2. Technology: This is to consider the technology which our user (Potential) have

available to them. The modern generation of browsers is a large and complex piece of

software. To run these requires fast processor and plenty of memory.

3. Download time: If our pages take a long time to download over a 33.6 kbps line,

people will go elsewhere.

4. Images: Images also take a long time to download. Image offers information and

decoration.

5. Sound: Sound can brighten a web page. It can also disturb the reader their colleagues.

We might find a piece of music relaxing; it may remind a potential customer of the

death of a loved one.

6. Colors: Use colors, use images as background but be careful. Make sure that our text

remains clear and legible when viewed.

2. Compare and contrast Table and Frames in web page design.

Frames are simple, provide excellent navigation, and highly popular. But web surfers

hate using frame based sites, reasons are: each frame takes up space on the visitors screen for

borders and scrollbars. More frames equals less space for information. Other websites may

appear inside one of our frames.

The problem with using a table to provide the structure of the page is that it makes the

design of the page much more complex.

Frames Tables

1. Need multiple source files. 1. Need single source files.

2. Code is easy to read and it is clear

any piece should go.

2. The code can be confusing, especially

when we are putting data tables inside our

(2)

Ex: Using a Table:

Open a new file in Notepad and type the following code:

<title>Sri Vishnu Educational Society</title> </head>

<tr>

</td> </tr> <tr>

<td bgcolor="#7cb98b" width="20%" valign="top"> <h2 align="center">Links</h2>

<ul>

</h3> </td>

<h1>Padmasri Dr. B.V.R.I.C.E</h1> <h2>About our College...</h2>

<p>Padmasri Dr. B. V. Raju Institute of Computer Education is one of the institutions sponsored by Dr. B. V. Raju Foundation. This institute was established in 1999 by Padmabhushan Dr. B. V. Raju, is recognized by AICTE,New Delhi and is affiliated to Andhra University,Visakhapatnam.

<hr>

<h3>Courses</h3>

<p align="center">We have B.Sc, B.Com, M.Sc and MCA courses</p>

(3)

Save the above as “tables2.html”.

Open the file in the browser and the following output will be displayed:

Using Frames:

<title>Sri Vishnu Educational Society</title> </head>

</frameset> </frameset> </html>

Save the above as “frames.html”.

<title>Dr. BVRICE</title> </head>

<body>

(4)

Written by Dept. of Computer Science @ Dr. BVRICE Bhimavaram W.G. Dist., <h2>About our College...</h2>

<p>Padmasri Dr. B. V. Raju Institute of Computer Education is one of the institutions sponsored by Dr. B. V. Raju Foundation. This institute was established in 1999 by Padmabhushan Dr. B. V. Raju, is recognized by AICTE,New Delhi and is affiliated to Andhra University,Visakhapatnam.

<hr>

<h3>Courses</h3>

<p align="center">We have B.Sc, B.Com, M.Sc and MCA courses</p> <hr width="50%">

</body> </html>

Save the above as “headers.html”.

<title>Links</title> </head>

<h2 align="center">Links</h2> <hr width="50%">

</h3> </h3> </body> </html>

Save the above as “links.html”.

<title>Banner</title> </head>

</html>

(5)

Open “frames.html” file in the browser and the following output will be displayed:

3. Explain about accessibility and internationalization.

Accessibility:

The basic rules for accessible web design are

:

Use markup to express meaning not to control appearance.

When HTML elements have attributes such as alt which can add meaning, use those attributes.

Issues to be considered to implement accessible design

:

a. Set a high contrast between the background color and the colors which we use for our

text.

b. If we must use a background image, make it soft and simple.

c. Make sensible use of headings to add structure and meaning. Use <h1> for the main

title of the page and <h2> and <h3> can use for sections and subsections.

d. If we have along page, provide an index at the top and hyperlinks to allow movement

within the page. Don’t use users scroll needlessly?

e. Place all formatting information in stylesheets, users may then choose not to load

these.

f. Use relative font sizes rather than absolute ones. Users can then choose not to load

(6)

Written by Dept. of Computer Science @ Dr. BVRICE Bhimavaram W.G. Dist., g. Test our pages with Bobby from the center for Applied Special Technology. This

excellent application can be found at http://www.cast.org/bobby.

h. Test our pages with a range of users including someone who is red-green colorblind.

Internalization:

The Web is an international phenomenon. Where ever we go in the world, we can

access the web. Our website available in a variety of languages, we need to use widest

possible set of characters on our page. We need to think about the data formats, time format

and numbers should not use offensive icon or images.