Advanced Web Design <name> the Heartlight Team </name>

1
Advanced Web Designltnamegt the Heartlight Team
lt/namegt
lttable align"right"gt lttbodygt
lttrgt lttdgtltfont
color"999999" size"1" face"Verdana"gtTitle
"Cutting Out the Noise"ltbrgt
Author Phil Wareltbrgt
Publication Date February 19, 2001lt/fontgtlt/tdgt
lt/trgt lt/tbodygt
lt/tablegt ltbr clear"all"gt
ltbrgt ltdiv align"left"gt
lttable border"0" cellspacing"3" width"100"gt
lttrgt lttd
bgcolor"C0C0C0" width"50" background"grey_lin
e_background.gif"gtltfont color"000000"
face"Verdana, Arial, Geneva, Helvetica"
size"2"gtltbgtnbspShare with
Otherslt/bgtlt/fontgtlt/tdgt lttd
bgcolor"C0C0C0" width"50" background"grey_lin
e_background.gif"gtltfont face"Verdana"
size"2"gtltbgtnbspRelated
Heartlight Resourceslt/bgtlt/fontgtlt/tdgt
lt/trgt lttrgt lttd
width"50"gt ltfont color"000000"
face"Verdana, Arial, Geneva, Helvetica"
size"3"gt ltdiv align"left"gt
lttable border"0"
cellspacing"1" width"150" bgcolor"FFFFFF"gt
lttrgt
lttd width"25"gtltp align"center"gtlta
href"http//www.heartlight.org/cgi-shl/simplify.c
gi?20010312_grace.html"gtltimg border"0"
src"print.gif" alt"Print This Article"
width"15" height"15"gtlt/agtlt/tdgt

2
Session Overview
ltfont olor 000000" face"Verdana, Arial,
Geneva, Helvetica" size"3"gt ltdiv
align"left"gt lttable border"0" cellspacing"1"
width"125 bgcolor"FFFFFF"gt lttrgtlttd width"15"
align"center"gtltp align"center"gtltimg
border"0"src"top.gif width "15 height"15
alt "Top"gtlt/tdgt lt/fontgt
lttd idth"110"gtltfont color"000000"
face"Verdana, Arial, Geneva, Helvetica"
size"1"gtnbsplta href"http//www.heartlight.org/
cgi-shl/simplify.cgi?20010312_grace.html"gtltbgtToplt/
bgtlt/agtlt/fontgtlt/tdgtlt/tablegt
lt/divgtltfont olor 000000" face"Verdana, Arial,
Geneva, Helvetica" size"3"gt ltdiv
align"left"gt lttable border"0" cellspacing"1"
width"125 bgcolor"FFFFFF"gt lttrgtlttd width"15"
align"center"gtltp align"center

• Lightning Loads Lightning Downloads
• Content Insertion Techniques
• Site Searchability
• The LYSTI Factor

3
Lightning-Fast Downloads
ltfont olor 000000" face"Verdana, Arial,
Geneva, Helvetica" size"3"gt ltdiv
align"left"gt lttable border"0" cellspacing"1"
width"125 bgcolor"FFFFFF"gt lttrgtlttd width"15"
align"center"gtltp align"center"gtltimg
border"0"src"top.gif width "15 height"15
alt "Top"gtlt/tdgt lt/fontgt
lttd idth"110"gtltfont color"000000"
face"Verdana, Arial, Geneva, Helvetica"
size"1"gtnbsplta href"http//www.heartlight.org/
cgi-shl/simplify.cgi?20010312_grace.html"gtltbgtToplt/
bgtlt/agtlt/fontgtlt/tdgtlt/tablegt
lt/divgtltfont olor 000000" face"Verdana, Arial,
Geneva, Helvetica" size"3"gt ltdiv
align"left"gt lttable border"0" cellspacing"1"
width"125 bgcolor"FFFFFF"gt lttrgtlttd width"15"
align"center"gtltp align"center

• Faster access increases expectation of faster
  downloads
• Ruthless K-targets 42-52k max
• Text vs. Graphical links text is faster
• Fight content below the fold 2 page downs and
  your dead
• Tables vs. Frames tables are generally quicker,
  dont break as often and dont run the
  backbutton bookmarking

4
Code Image Optimization
ltfont olor 000000" face"Verdana, Arial,
Geneva, Helvetica" size"3"gt ltdiv
align"left"gt lttable border"0" cellspacing"1"
width"125 bgcolor"FFFFFF"gt lttrgtlttd width"15"
align"center"gtltp align"center"gtltimg
border"0"src"top.gif width "15 height"15
alt "Top"gtlt/tdgt lt/fontgt
lttd idth"110"gtltfont color"000000"
face"Verdana, Arial, Geneva, Helvetica"
size"1"gtnbsplta href"http//www.heartlight.org/
cgi-shl/simplify.cgi?20010312_grace.html"gtltbgtToplt/
bgtlt/agtlt/fontgtlt/tdgtlt/tablegt
lt/divgtltfont olor 000000" face"Verdana, Arial,
Geneva, Helvetica" size"3"gt ltdiv
align"left"gt lttable border"0" cellspacing"1"
width"125 bgcolor"FFFFFF"gt lttrgtlttd width"15"
align"center"gtltp align"center

• Power tools often means extra code
• Handcoding vs. Coders
• Notepad, Wordpad, Text Editors
• Bbedit Homesite
• Front Page, HoTMetal, GoLive, Dreamweaver
• Image Enhancers Optimizers
• Photoshop 5.5
• Paint Shop Pro
• Fireworks
• Freebies others

5
Content Insertion Techniques
ltfont olor 000000" face"Verdana, Arial,
Geneva, Helvetica" size"3"gt ltdiv
align"left"gt lttable border"0" cellspacing"1"
width"125 bgcolor"FFFFFF"gt lttrgtlttd width"15"
align"center"gtltp align"center"gtltimg
border"0"src"top.gif width "15 height"15
alt "Top"gtlt/tdgt lt/fontgt
lttd idth"110"gtltfont color"000000"
face"Verdana, Arial, Geneva, Helvetica"
size"1"gtnbsplta href"http//www.heartlight.org/
cgi-shl/simplify.cgi?20010312_grace.html"gtltbgtToplt/
bgtlt/agtlt/fontgtlt/tdgtlt/tablegt
lt/divgtltfont olor 000000" face"Verdana, Arial,
Geneva, Helvetica" size"3"gt ltdiv
align"left"gt lttable border"0" cellspacing"1"
width"125 bgcolor"FFFFFF"gt lttrgtlttd width"15"
align"center"gtltp align"center

• Meta Tags
• Timing crude slide shows
• Searching Features
• Quick identification
• Comment Tags
• Easier navigation lt!-- Main Text --gt
• SS Includes lt--include --gt
• JS Text Calls
• Framing vs. Pop Up Window Link (targetnew_window
  )

6
Site SearchThe Crucial Tool to Being Crucial
ltfont olor 000000" face"Verdana, Arial,
Geneva, Helvetica" size"3"gt ltdiv
align"left"gt lttable border"0" cellspacing"1"
width"125 bgcolor"FFFFFF"gt lttrgtlttd width"15"
align"center"gtltp align"center"gtltimg
border"0"src"top.gif width "15 height"15
alt "Top"gtlt/tdgt lt/fontgt
lttd idth"110"gtltfont color"000000"
face"Verdana, Arial, Geneva, Helvetica"
size"1"gtnbsplta href"http//www.heartlight.org/
cgi-shl/simplify.cgi?20010312_grace.html"gtltbgtToplt/
bgtlt/agtlt/fontgtlt/tdgtlt/tablegt
lt/divgtltfont olor 000000" face"Verdana, Arial,
Geneva, Helvetica" size"3"gt ltdiv
align"left"gt lttable border"0" cellspacing"1"
width"125 bgcolor"FFFFFF"gt lttrgtlttd width"15"
align"center"gtltp align"center

• Why?
• Your usability (build internal links)
• Your users control flow
• Rescuing your archives

7
LYSTI
ltfont olor 000000" face"Verdana, Arial,
Geneva, Helvetica" size"3"gt ltdiv
align"left"gt lttable border"0" cellspacing"1"
width"125 bgcolor"FFFFFF"gt lttrgtlttd width"15"
align"center"gtltp align"center"gtltimg
border"0"src"top.gif width "15 height"15
alt "Top"gtlt/tdgt lt/fontgt
lttd idth"110"gtltfont color"000000"
face"Verdana, Arial, Geneva, Helvetica"
size"1"gtnbsplta href"http//www.heartlight.org/
cgi-shl/simplify.cgi?20010312_grace.html"gtltbgtToplt/
bgtlt/agtlt/fontgtlt/tdgtlt/tablegt
lt/divgtltfont olor 000000" face"Verdana, Arial,
Geneva, Helvetica" size"3"gt ltdiv
align"left"gt lttable border"0" cellspacing"1"
width"125 bgcolor"FFFFFF"gt lttrgtlttd width"15"
align"center"gtltp align"center

• The UltimateSite Usability Testing Agent!