Transcript Lecture notes powerpoint

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>
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 titles
Page title of “Untitled” is unprofessional
Makes 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