TESTING AND OPTIMIZATION

1
CHAPTER 10 TESTING AND OPTIMIZATION
30 Slides
2
WHERE WERE GOING
3
SITE CLEAN-UP AND TESTING
4
DOES YOUR SITE WORK?

• Does your site have page-to-page consistency of
  links, image usage and feel?
• Will your site work with a variety of Browsers
  (Netscape, Internet Explorer, Opera, Lynx, etc.),
  Versions (1.x to 6.x), and Operating Systems
  (Windows, MAC OS, UNIX, etc.)?
• Do your page layouts have a similar and familiar
  theme and consistent look?

5
ATTENTION TO MEDIA DETAIL

• 256 Colors should be your maximum color density
  and should be clear at 640 x 480 resolution
• Check carefully for common errors such as broken
  links, slow downloads, fuzzy images or bad sound.
  Do your ltimg srcfile.gif alttextgt tags work
  with graphics turned off?
• Interactive Elements such as forms, rollovers,
  pop-up boxes, radio buttons, search features and
  applets must all work as planned

6
ERROR CHECKING
7
ATTENTION TO TEXT DETAIL

• Spelling remember, spell checkers wont catch
  correctly spelled wrong words. Frequent, even
  professional, proofreading is the best solution.
• Contractions So simple, yet mistakes are made
  often in usage.
• Punctuation Again, you dont want your readers
  to be the first to find mistakes. Problems here
  can generate misunderstandings.
• Typographic Errors (Typos) Avoid these by
  having as many proof-readers as possible.
• Correct Word Usage Too / two, angle / angel,
  affect / effect . . . get the idea?
• Media Text Dont forget to check the text
  contained in graphical boxes as well.

8
ATTENTION TO HTML DETAIL
Carelessness here can lead to display, image, and
navigation problems. You must practice Patience P
atience Patience!

• Three online sources (from the curriculum)
• W3Cs Validator
• Bobby
• NetMechanic

9
SPEED OPTIMIZATION
10
IMPROVED SITE SPEED
Dont forget the powerful site evaluation tools
available from NetMechanic - http//www.netmechan
ic.com/cobrands/zd_dev/ And Bobby -
http//www.cast.org/bobby/
11
IMPROVED SPEED IMAGE MANAGEMENT

• Keep total image size/page lt 30 kb
• Consider reducing size, image quality and color
  range
• Manage image slicing and compression with
  ImageReady
• Dont forget PhotoShops Save for Web option

Typically, use JPEGs for photo images and GIFs
for so-called flat color images JPEG lossy
compression (discards non-essential
information) GIFs lossless compression (no loss
of image information), up to 256 colors
12
IMPROVED SPEED COLOR MANAGEMENT

• Three Steps to Managing Color Palettes
• Change the image mode to indexed color using a
  browser-safe palette
• Now, change the image mode back to RGB color
• Finally, apply the indexed color mode again and
  minimize the number of colors

• Dont forget the height width attributes!
  They establish an image placeholder which allows
  text to appear while an image is downloading
• Interlaced images can improve perceived download
  speed, but, they may not work with older browsers

13
IMPROVED SPEED PERFORMANCE OPTIONS

• Re-Use Images As your user views site pages,
  images are cached in memory or on disk. This
  means they appear immediately when re-used.
• Keep HTML Code Clean or Thin You can save 2
  3kb on page sizes by removing unnecessary HTML
  code. Reduce the number of font changes and keep
  table and frame use to a minimum.
• Compress and Reduce Colors on Graphical Images
  USE ImageReady and Photoshop to get the maximum
  reduction of image size with the minimum number
  of web-safe colors. Use image slicing.
• Use Cascading Style Sheets See Appendix A2
  This one web toolset can greatly enhance the
  performance and download times of your site. CSS
  can reduce HTML code size and speed up page
  downloads.
• NOTE Browser support of CSS is NOT universal.
• Load Text First, Then Images This simple
  technique gives the user the impression that the
  page is loading faster than it really is!
  Remember, a page is rendered in the browser as
  code is interpreted--from left to right, top to
  bottom.

14
WEB SITE MANAGEMENT
15
KEEPING IT TOGETHER

• Your site links MUST work!
• Use GoLives Site Link Window to verify correct
  linking from page to page
• On a small site, you can manually add all of
  your linked pages to your browsers favorites
  list

• Site and Link Management Tools
• Many WYSIWYG editors offer link checking
  features
• Adobe GoLive! offers several powerful tools
  under the Site menu option

16
WEB SITE MAINTENANCE
17
KEEPING IT RELEVANT
18
CHANGE IS INEVITABLE

• Designing for Change
• Use (and re-use) project templates to simplify
  client change requests
• Identify and maintain fonts, font sizes and
  styles, colors and backgrounds
• Again, Cascading Style Sheets simplify page/site
  maintenance
• Contracting for Change
• All charges or fees for page/site updates should
  be established during the Pre-Production Phase of
  your client negotiations
• Plan to build-in provisions for mistake
  corrections and minor edits to the site
• Provide and contract for a time window (how
  quickly changes are to be completed) for all
  requested corrections

19
WHY WILL THEY COME? OR, COME BACK?

• Competitor Site Monitoring
• What are the other folks doing? Should you be
  doing it too?
• Consider competitor site monitoring as site
  maintenance homework!
• Web Site Stickiness
• Stickiness the act of customers returning
  again and again to the site
• Use eye-catching graphics, time dating, and
  other appropriate action elements to announce
  changes and draw visitors back
• Keep your site fresh
• Dont forget the ltmailto gt tag to simplify
  customer-to-client contact

20
USABILITY TESTING
21
IS YOUR SITE USER FRIENDLY?

• Site Testing Guidelines
• 3 or 4 users testing 3 times is more effective
  than 9 users testing once!
• Test early and test often!
• Test with users having differing skill levels
• Perform tests using competitors sites
• Dont take it personally! (Thick skin helps)
• See Jakob Neilsens usability site
  http//www.useit.com/

22
CHOOSING GETTING USABILITY TESTERS

• Getting Testers in the Door
• Offer incentives (50 or more)
• Get Professionals if you can afford it
• Simple invitations work better
• Do NOT discuss the web site beforehand See if
  they can figure it out
• Friends Neighbors are OK!

23
WHERE WHEN TO TEST
24
WHAT TO TEST

• Two Testing Methods
• Get It testing (performance)
• Cubicle testing (informal paper sketches)

• Remember
• Test yourself first
• Protect the participants from criticism
• Be empathetic
• Dont give hints!
• Keep instructions simple
• Improvise if necessary
• Make explanatory notes

• Try to imagine the users thought processes
• Keep asking users to elaborate on their responses

25
HIGH LOW-LEVEL TESTING
26
WHERE WEVE BEEN!
27
THE END! ?