Basic Web Design

Technology is a tool FIRST, understand how people actually interact with each

other and with the information in their lives, in all the complex, nuanced, often unintuitive ways that they do. 

SECOND, design ways to help support and enhance what people do in order to help them meet their goals. 

THIRD, use technology as one of several powerful tools to bring these solutions to life.

Viewing technology as a solution in itself, you're almost destined to fail.  Many have.  Many will.  At a high cost.

Comments about good design

Nobody should notice your design Noticing it is a failure Focus the person on content, not navigation

or how great it looks

Clean HTML <h2>Objectives</h2>

<ul>

<li>Define information structure

<li>Explain the problems with using Word to create HTML files

<li>Explain why different browsers give different appearances to a web page

<li>Explain the type of files and naming conventions required for developing

web pages

<li>Explain why a web page designer cannot ensure how a page will look

<li>Explain meta-structure for a web page design (page titles, file naming conventions,

template construction)

<li>Discuss the reasons for using tables to layout a basic web page

<li>Explain why frames should not be used

</ul>

<h2>Readings</h2>

<p>Williams &amp; Tollett ch. 4-6</p>

<p>Writing for Websites<br>

<a href="writing_for_websites.pdf">writing_for_websites.pdf</a></p>

Word HTML <h2 style='margin-left:0in;text-indent:0in'>Objectives<o:p></o:p></h2>

<p class=BulletList><![if !supportLists]><span style='font-family:Symbol'>·<span

style='font:7.0pt "Times New Roman"'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

</span></span><![endif]>Define information structure <o:p></o:p></p>

<p class=BulletList><![if !supportLists]><span style='font-family:Symbol'>·<span

style='font:7.0pt "Times New Roman"'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

</span></span><![endif]>Explain the problems with using Word to create HTML

files <o:p></o:p></p>

Browsers are not the same

Different browsers– Internet Explorer– FireFox– Opera– Safari– Chrome

Different levels of implementation Different ways of interpreting the tags

Browser differences

Must check your design in multiple browsers (and multiple monitor resolutions)

Yes, IE is on most machines, but many people do not like it

FireFox has about 25% of techie audience and that number is growing

Cannot control appearance

Many students want to run all windows maximized.

With larger monitors, many people don’t(I rarely do.)

A design must allow for different window sizes.

Design for Content

Cannot control how the user sees the page– Color can change– Graphics can be turned off– Browser window can vary

Paper can be tweaked, web pages cannot

Browser set wide

Browser set narrow

Testing with browsers

Install multiple browsers and test on your machine.

Change resolution and test

Tables on Web Pages

Only formatting method without using CSS– Only way to get side by side text– Navigation bars, etc all use tables

Not just data lists, like in paper docs NOTE: tables do not resize Don’t use tables to reproduce paper In a longer course we would learn CSS,

which is how most pages are now coded.

Formatting with tables

Same page with table borders

Table Resize Problem

Keep a consistent appearance

Visually show that the site is the same– Always use the same background– Same graphic style– Same type formatting

Ransom note effect can confuse the reader– Is this the same site?– Adjusting to new formatting style

Templates for consistency

Build and test templates first Get the overall design finalized If you don’t

– Making same changes on bunches of pages– Missing some changes looks bad– Less chance of inconsistent design

Create the design and then make copies

Filename consistency

Web sites have lots of files and must be maintained (perhaps not by you)

The filenames you pick must make sense and say what the content is

Avoid page1, page2 names Maintenance is hard since you forget the

naming structure after a few months.

Keep reader oriented

Give all pages titlesPage title of “Untitled” is unprofessionalMakes development difficult.

Frames are poor design

Frame is essentially a way to have multiple web pages open on your site at the same time.

Bookmarks fail Back button function is inconsistent

Questions for discussion

Good and bad points of the web What makes it good and bad Correctness of people’s attitude that

everything is on the web? Especially from a student’s technical-level needs?

End