|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
dčsīCgn n: |
|
4. established form of a product; general
idea; construction from parts. |
|
OED |
|
|
|
|
|
|
Where form and function are optimized. |
|
J Blower |
|
Fitness for purpose. |
|
ISO 9000 |
|
Good design leads the viewer seamlessly through
content. |
|
It supports and enhances the message, but does
not overwhelm it. |
|
|
|
|
|
|
Web design requires a vast array of skill sets,
from editorial skills, to layout, typography, technical understanding and a
mastery of just why file compression works like it does… |
|
…There is no such thing as good web design. |
|
There is such a thing as appropriate web design. |
|
Martin Lloyd |
|
Strategist |
|
The Domino Agency |
|
|
|
|
Medium |
|
Environment |
|
Purpose |
|
Existing material |
|
Tools |
|
Talent |
|
Skills |
|
Vision |
|
Audience |
|
|
|
|
|
|
|
How many types of browsers? |
|
The major players: |
|
Explorer (versions 1-5, Windows/Mac) |
|
Netscape (versions 1-6 + Mosaic, Windows/Mac) |
|
AOL (a multitude, Windows/Mac) |
|
Opera (small but perfectly formed, Windows) |
|
Lynx (text only) |
|
WebTV |
|
All the others… |
|
|
|
|
|
Agora |
|
Amaya (Unix) |
|
Arachne (DOS) |
|
Arena (Unix) |
|
Cello (Windows) |
|
Chimera (Unix) |
|
Emacs WWW Mode |
|
(Mac, NeXT, Unix, Windows, Windows NT) |
|
Grail (Unix) |
|
HotJava (SPARC, Windows 95/NT) |
|
IBrowse (Amiga) |
|
Line Mode Browser |
|
(Mac, Unix, VMS, Windows) |
|
MMM (Unix) |
|
OmniWeb |
|
pwWebSpeak |
|
(Windows 3.1/95) |
|
Quarterdeck Mosaic (Windows) |
|
SpiderWoman |
|
Plume (Unix) |
|
tkWWW |
|
WebExplorer (OS2) |
|
|
|
|
Lowest Common Denominator |
|
Latest and Greatest |
|
Split the Difference |
|
Something for Everyone |
|
|
|
|
|
|
|
Validation |
|
Weblint |
|
A Kinder, Gentler Validator |
|
W3C Validator |
|
Htmlchek |
|
…and many more… |
|
|
|
|
Academics? |
|
Consumers? |
|
Corporate Environment? |
|
Geeks and Gamers? |
|
Do you know? |
|
|
|
|
Entertainment? |
|
Information? |
|
Commerce? |
|
Whatever your reasons…TEST YOUR SITE! |
|
Then TEST it some more |
|
|
|
|
What resolution is your monitor? |
|
And your audience’s? |
|
8-bit color (256 colors) |
|
16-bit color (c. 65,000 colors) |
|
24-bit color (c. 16.7m colors) |
|
|
|
|
|
Fixed |
|
Measurements are absolute,usually pixels |
|
Pages look the same |
|
Better control over line lengths |
|
BUT horizontal scrolling |
|
|
|
|
|
640 x 480 |
|
800 x 600 |
|
In general, confine width to <600p |
|
Who’s the audience? |
|
Above the fold |
|
Name |
|
Message |
|
Content |
|
Navigation |
|
Include contact information on every page |
|
|
|
|
ALT text |
|
Use periods |
|
Captions |
|
Transcripts for audio |
|
Alternatives for forms |
|
A phone number |
|
|
|
|
|
WebTV |
|
544 x 378 |
|
Hand-held devices |
|
|
|
|
|
|
|
|
|
|
|
Formats |
|
GIFs |
|
JPGs |
|
PNGs |
|
Resolution |
|
72ppi |
|
|
|
|
|
Work in RGB mode |
|
GIFs are in indexed color, and can only accept
colors in the image’s color table |
|
Don’t resize larger |
|
Resize smaller in increments |
|
Use anti-aliased text for captions |
|
|
|
|
|
You have two fonts |
|
Proportional |
|
Fixed-width |
|
For complete control, make text a graphic |
|
Longer download |
|
Lost content on non-graphical browsers (use ALT) |
|
No indexing |
|
|
|
|
|
|
|
Points vary between displays and platforms |
|
12 points in Windows = 16pt in print/Mac |
|
Embedded fonts |
|
Need to be installed on the user’s machine |
|
|
|
|
Use sans-serif fonts (like Arial, Verdana or Tahoma) |
|
Adhere to established link conventions |
|
Don’t reverse type (As the legendary advertising
tycoon Albert Lasker said about reverse type: "If it was natural to
read that way, the New York Times would be printed that way.“) |
|
KISS - applies to language |
|
|
|
|
|
|
|
Servers include |
|
NCSA |
|
Apache |
|
CERN |
|
Netscape |
|
IIS |
|
|
|
|
“/” indicates that a URL is pointing a a
directory, not a file |
|
Servers are configured to look for a file called
“index.html” |
|
If a server doesn’t find one, it displays the
contents of the directory |
|
|
|
|
Common Gateway Interface |
|
Written in Perl, C or C++ |
|
Usually used for forms processing |
|
CGI scripts are kept in a special directory
called cgi-bin |
|
|
|
|
|
|
|
Absolute |
|
http://www.root.com/users/jen/pers |
|
Relative |
|
Path from current directory |
|
If current dir is “jen”, then the path to pers
will be: /pers/ |
|
|
|
|
Avoid character spaces in filenames |
|
Avoid special characters |
|
Use proper suffixes - eg HTML docs require .html |
|
Filenames are case-sensitive - so use all
lower-case for filenames |
|
|
|
|
|
|
|
|
HTML defines syntax and tag placement, and
creates links to other documents |
|
The standard is defined by the World Wide Web
Consortium (W3C) |
|
Browser-specific tags are not necessarily part
of the standard (eg <blink>) |
|
|
|
|
|
There are scores, many free |
|
WYSIWYG tools: |
|
Good for beginners |
|
Good for quick prototypes |
|
Good head start for tables, forms etc |
|
Do not create clear HTML |
|
Little control over graphical elements |
|
Can change your HTML to theirs |
|
|
|
|
|
|
|
|
Head |
|
Contains information about the document, like
title and META tags |
|
Body |
|
Contains the rest (ie content) |
|
<HTML> |
|
<HEAD> |
|
<TITLE> Document Title</TITLE> |
|
</HEAD> |
|
<BODY> |
|
Contents |
|
</BODY> |
|
</HTML> |
|
|
|
|
|
Contain a name (+ attributes) |
|
Often have a start and end |
|
Eg the weather is <I>gorgeous</I>
today |
|
Some tags do not have end tags |
|
Eg <img>, <br>, <hr> |
|
Attributes extend a tag’s function |
|
Put them in quotes |
|
Nest tags in the right order |
|
Eg The weather is<B> <I>
gorgeous</I> </B> today |
|
|
|
|
|
Line breaks - use this to write clean HTML |
|
Tabs and multiple spaces |
|
Multiple <P> tags |
|
Unrecognized tags - browser-specific |
|
Text in comments |
|
<!-- This is a comment --> |
|
|
|
|
Follow current syntax as defined by W3C |
|
Capitalize tags and attributes |
|
Use line breaks and tabs for legibility |
|
Avoid extra or redundant tags |
|
Use proper suffixes - .html not just .htm |
|
Filenames in lower-case |
|
Keep line lengths under 80 characters |
|
|
|
|
|
|
Hexadecimal notation |
|
“#RRGGBB” |
|
0-9, A-F |
|
Color names |
|
140 available |
|
But only 10 represent non-dithering colors from
the Web Palette |
|
Use to color BODY and PAGE elements |
|
|
|
|
|
|
|
|
Standard structure |
|
<HTML> |
|
<HEAD> |
|
<TITLE> Document Title</TITLE> |
|
</HEAD> |
|
<BODY> |
|
Contents |
|
</BODY> |
|
</HTML> |
|
|
|
|
|
|
<TITLE> |
|
<BASE> |
|
<LINK> |
|
<META> |
|
<SCRIPT> |
|
<STYLE> |
|
|
|
|
|
Colors |
|
<BODY BGCOLOR> |
|
<BODY TEXT> |
|
<BODY LINK> |
|
<BODY VLINK> |
|
BODY ALINK> |
|
|
|
|
|
HTTP-EQUIV |
|
<META HTTP-EQUIV=“refresh” CONTENT=“15”> |
|
<META HTTP-EQUIV=“refresh” CONTENT=“1;
URL=http//nextdoc.html”> |
|
<META HTTP-EQUIV=“expires” CONTENT=“July 16,
2001 00:01:00”> |
|
|
|
|
|
|
Used for Search Engines |
|
Description: |
|
<META NAME=“description” CONTENT=“John
Blower’s resume and portfolio”> |
|
Keywords |
|
<META Name=“keywords” CONTENT=“trainer,
training, writing”> |
|
Author |
|
<META Name=“author” CONTENT=“John Blower”> |
|
Copyright |
|
<META Name=“copyright” CONTENT=“2001, John
Blower”> |
|
Robots |
|
<META Name=“robots” CONTENT=“noindex,
nofollow”> |
|
|
|
|
|
Text tags fall into the following subgroups: |
|
Paragraph and Headings (Block-Level elements) |
|
Text Appearance (Inline Styles) |
|
Spacing and Positioning |
|
Lists |
|
|
|
|
|
Used to specify size, color and font face for
the enclosed text |
|
Eg <FONT FACE=“sans-serif” COLOR=“white”
SIZE=“+1”> |
|
|
|
|
Type size is measured on a relative scale from 1
to 7, with 1 being the smallest |
|
The default size is 3 |
|
Can be an absolute or relative value |
|
Gives some control over type size |
|
But overrides user preferences |
|
|
|
|
|
An attribute contained within the <FONT>
tag |
|
<FONT FACE=“Verdana, Arial,
sans-serif”>text</FONT> |
|
Only displayed if the user has the font on
his/her system |
|
Gives some influence over font selection (ie
serif vs sans-serif) |
|
Better handled by style sheets |
|
|
|
|
|
Simple links |
|
I’m <A HREF=“link.html”> linking</A>
to you… |
|
Absolute URLs |
|
Contains protocol identifier, host name,
pathname, filename |
|
Relative URLs |
|
Contains a pointer relative to the current
document |
|
Inline links are better than isolated ones |
|
|
|
|
|
Use graphics as |
|
A simple graphic |
|
A link |
|
A imagemap |
|
A spacing device (single-pixel GIF) |
|
|
|
|
|
|
SRC |
|
Points to the location of the graphic |
|
<IMG SRC=“url of graphic”> |
|
ALT |
|
Provides text description |
|
<IMG SRC=“url of graphic” ALT=“a star in the
sky”> |
|
W and H |
|
Specify width and height |
|
<IMG SRC=“url of graphic” ALT=“a star in the
sky” W=“50” H=“50”> |
|
Use this to preload images |
|
|
|
|
|
VALIGN |
|
Controls the placement of the graphic in
relation t the baseline of the surrounding text. Default is BOTTOM |
|
HALIGN |
|
Used to align a graphic horizontally on a page.
Can be LEFT or RIGHT |
|
VSPACE |
|
Adds white space above and below a graphic |
|
HSPACE |
|
Adds white space to the left and right of a
graphic |
|
|
|
|
|
Link to larger images |
|
Use thumbnails |
|
Reuse images |
|
Once in cache, they’re quicker to view |
|
LOWSRC |
|
Points to a low resolution image, which, when
loaded, goes to retrieve the full size graphic |
|
|
|
|
Originally developed for presenting tabular data |
|
But were rapidly co-opted to provide a large
measure of control over page layout |
|
|
|
|
Data table |
|
Text alignment |
|
Page template |
|
Multipart image container |
|
|
|
|
|
|
|
|
<!-- ImageReady Slices (4.jpg) --> |
|
<TABLE BORDER=0 CELLPADDING=0
CELLSPACING=0> |
|
<TR> |
|
<TD> |
|
<IMG
SRC="images/4sliced_01.jpg" WIDTH=75 HEIGHT=57></TD> |
|
<TD> |
|
<IMG
SRC="images/4sliced_02.jpg" WIDTH=75 HEIGHT=57></TD> |
|
<TD> |
|
<IMG
SRC="images/4sliced_03.jpg" WIDTH=75 HEIGHT=57></TD> |
|
<TD> |
|
|
|
|
Rows, columns and cells |
|
<TABLE> |
|
<TR> |
|
<TD> Cell 1</TD><TD>Cell
2</TD> |
|
</TR> |
|
<TD> Cell 3</TD><TD>Cell
4</TD> |
|
</TR> |
|
</TABLE> |
|
|
|
|
|
Table level controls |
|
Width and position |
|
Color of cells |
|
Border thickness |
|
Spacing within and between cells |
|
|
|
|
|
Borders |
|
Default is 1 pixel. For no border, use
BORDER=“0” |
|
Positioning on a page |
|
Tables behave the same as images |
|
Aligning text in cells |
|
Default is flush left, centered vertically |
|
Sizing tables |
|
Can be absolute or relative values |
|
|
|
|
|
Cell spacing |
|
Controls the space between cells on both
horizontal and vertical dimensions |
|
<TABLE CELLSPACING=“10”> |
|
Cell padding |
|
The space between the walls of a cell and its
contents |
|
<TABLE CELLPADDING=“10”> |
|
|
|
|
|
Text in tables |
|
Differing user preferences can lead to
horizontal scrolling |
|
Use style sheets (but not all browsers support
them) |
|
Form elements |
|
Incorporating a form in a table can be affected
by the user’s preferences |
|
Returns and spaces |
|
Some browsers render a space in a cell as white
space |
|
Missing end tags |
|
|
|
|
|
Using <FONT> |
|
You need to specify <FONT> for every cell |
|
Table display |
|
Tables don’t display until all elements are
loaded. So break large tables into small ones. And use the time to display
elements outside the table. |
|
Multipart images |
|
Use tables to display large images which have
been sliced into sections |
|
|
|
|
Enable elements to remain static while others
scroll |
|
Unify resources from a variety of sources |
|
Not supported by older browsers |
|
Complicated production issues |
|
Navigation can be challenging |
|
No page bookmarking |
|
Can increase server load |
|
Content can be missed by search engines |
|
Difficulty in tracking usage |
|
|
|
|
|
Borders |
|
Can be turned off using the <FRAMESET> tag |
|
Scrolling |
|
Can be in/excluded using the <FRAME> tag |
|
Resizing |
|
Disable by adding noresize in the <FRAME>
tag |
|
|
|
|
Design framed pages to be freestanding |
|
Include content in the frameset document |
|
Use descriptive titles |
|
Use META tags |
|
|
|
|
HTML form tags provide an interface for
gathering information |
|
CGI scripts do the real work of interacting with
other applications |
|
|
|
|
|
ACTION |
|
Provides the URL of the program to be used to
process the form |
|
METHOD |
|
Specifies the means by which information can b
transmitted to the server - get or post |
|
|
|
|
|
|
Text entry, Text Area |
|
Password text entry - displayed as * or bullet |
|
Hidden entry - not displayed on the form |
|
Checkbox and Radio button |
|
Submit and reset |
|
Custom button/image button |
|
File selection |
|
Pull down and scrolling menus |
|
|
|
|
|
Using <PRE> |
|
<PRE> text is displayed exactly as typed
in, and is viewed the same by all users |
|
Using tables |
|
Put the table element within the form element
rater than vice versa |
|
Remember that text in forms resizes in Netscape
relative to the user’s fixed-width font size |
|
|
|
|
|
It’s not impossible to learn, but is very
unforgiving |
|
Use existing resources - there are plenty out
there |
|
Ask your server administrator |
|
Does your package include access to CGI scripts? |
|
Is there a script available you can use? |
|
Can you upload your own scripts? |
|
What kind of server? What software? |
|
|
|
|
Placeholders in an HTML document that the server
will replace with actual data just before sending to the user’s browser |
|
SSI allows you to create a framework for pages
which will be dynamically generated by the server |
|
|
|
|
Placing elements that you use repeatedly. Eg a
complex navigational header |
|
Place a constantly changing element on your
page. |
|
Show the date and time the page was last updated |
|
Serve and appropriate page based on the browser
making the request |
|
|
|
|
Easy to learn basic syntax |
|
Extensive support |
|
Dynamic content generation |
|
Browser-independent |
|
Commands are invisible to browser |
|
More work than simple HTML |
|
Possible security risk |
|
|
|
|
SSI functions are heavily dependent upon server
configuration |
|
Consult with your server administrator to
determine SSI support and the proper syntax. |
|
|
|
|
|
|
|
|
Graphic Interchange Format |
|
Developed by CompuServe |
|
Universally supported |
|
Platform independent |
|
Two types |
|
GIF87a |
|
Uses LZW compression |
|
GIF89a |
|
Includes transparency and animation capabilities |
|
|
|
|
|
8-bit indexed color |
|
Total of 256 colors (28) |
|
Indexed means that each color refers to another
in a color table |
|
Compression |
|
Lossless - no degradation with compression and
expansion |
|
|
|
|
For images with areas of flat color - logos,
cartoons, line art |
|
When you need transparency |
|
When you need animation |
|
|
|
|
|
Smaller is better |
|
Use flat color |
|
Turn off anti-aliasing |
|
Reduce bit-depth/number of colors |
|
Just because you have 256 colors doesn’t mean
you have to use them… |
|
Limit dithering - sometimes… |
|
|
|
|
|
Joint Photographic Experts Group |
|
24-bit color |
|
224 colors = c. 16.7 million |
|
“Lossy” compression |
|
Some color info is lost in the compression
process |
|
Variable compression levels |
|
Find a balance between quality and size |
|
|
|
|
Photographs and continuous-tone images |
|
Let GIFs handle everything else… |
|
|
|
|
Try the lowest quality first - you’ll be
surprised at what you can get away with |
|
Select the right image - subtle gradations, few
details, no hard edges |
|
|
|
|
|
Portable Network Graphic |
|
Cross-platform support |
|
But patchy browser support |
|
Three types of PNG files |
|
8-bit palette images (like GIFs) |
|
Grayscale, 16-bit |
|
Truecolor, 24-bit and 48-bit |
|
“Lossless” compression |
|
|
|
|
|
|
When 24-bit color images reduce to 8-bit,
browsers render colors using their Web Palette |
|
This can result in unacceptable dithering, or
shifts of flat colors to the nearest alternative |
|
By creating graphics using the 216-color Web
Palette, these phenomena are avoided |
|
Use with GIFs and PNGs |
|
|
|
|
|
|
Work like traditional cell animation |
|
No plug-ins needed |
|
Standard file format |
|
Easy to create |
|
No server configurations |
|
Streaming technology |
|
|
|
|
No more than one per page |
|
Communicate something special in a clever way |
|
Not on text-heavy pages |
|
Is it worth it? Bandwidth issues… |
|
Continuous looping? |
|
Experiment with timing |
|
|
|
|
|
|
Files are large and take a long time to download |
|
Copyright issues… |
|
Nonstreaming vs streaming |
|
Avoid background sound unless the user can turn
it off |
|
|
|
|
Motion |
|
Integrated sound effects |
|
Cursor response |
|
User manipulation of screen elements |
|
Animation and video |
|
|
|
|
From Macromedia |
|
Market leaders |
|
Both require plug-ins |
|
Content lost on non-graphical browsers |
|
Expensive authoring software |
|
|
|
|
|
A client-side scripting language that adds
interactivity and conditional behavior to pages |
|
Display information about links |
|
Create mouse rollover effects |
|
Change content based on conditions |
|
Load content in a new browser window or frame |
|
Move elements around the page |
|
|
|
|
|
|
Cascading Style Sheets |
|
Allow authors to apply spacing and typographical
elements to a page by referencing an external document |
|
Information cascades from larger to smaller
elements until over-ridden |
|
Separates style from structure |
|
Potentially smaller documents |
|
Lack of and inconsistent browser support |
|
|
|
|
|
A combination of |
|
HTML 3.2 |
|
JavaScript |
|
CSS |
|
Document Object Model |
|
Inconsistent support from 4.x browsers |
|
|
|
|
Small file sizes cf Flash |
|
Support from both browsers |
|
Standards support from W3C |
|
No plug-ins |
|
New browsers only |
|
Different implementations |
|
Sharp learning curve |
|
Unprotected source code |
|
|
|
|
|
EXtensible Mark-up Language |
|
Allows developers to create a custom mark-up
language specific to their needs |
|
Eg “XML for the Widget Industry” |
|
Has W3C and browser manufacturer support |
|
But no settled standard as yet |
|
|
|
|
|
Not really “embedded” - compressed font files
accompany HTML documents when they are downloaded |
|
Two competing technologies |
|
TrueDoc (Bitstream/Netscape) |
|
OpenType (Microsoft/Adobe) |
|
|
|
|
|
|
|
The charset problem |
|
8-bit character sets are enough for most Western
languages |
|
Will 16-bit character sets be enough for
everyone else? (Think Sanskrit, Kanji…) |
|
Unicode could be the answer |
|
Sensitivity |
|
Think IKEA… |
|
|
|
|
|
|
|
Jakob Nielsen |
|
http://www.useit.com |
|
NUA |
|
Gerry McGovern, Rob Norton |
|
http://www.nua.ie |
|
|
|
|
|
|
|
Jared Spool |
|
http://world.std.com/~uieweb/index.html |
|
Human Factors International |
|
http://www.humanfactors.com |
|
Notes