More Design Talk

1
More Design Talk

• INLS 572 Christie McDaniel

2
Addressing Display Variability

• Flexible Designs data flows
• Google.com
• Fixed Designs data is the same
• Bbc.com/news
• Ils.unc.edu

3
Advantages of Flexible Design

• Page can be customized for a variety of displays
• Maintain good design standards ie, more usable
• Avoid excessive white space
• Real Estate!
• Mitigates the need to choose a target monitor

4
Disadvantages of Flexible Designs

• Line length can get very long
• Text is difficult to read
• Elements float around on a page
• Page looks un-unified
• Page looks less coherent
• Can be unpredictable

5
Advantages of Fixed Designs

• Basic layout of the page remains the same
  regardless of monitor size
• Provide better control over line lengths and
  other elements of the page

6
Disadvantages of Fixed Designs

• The evil Horizontal Scroll
• Unpredictable Elements
• Web World ? Print World

7
Color

• Not all monitors are equal!
• Common Color Displays
• 8-bit (256 colors)
• 16-bit (65,000 colors)
• 24-bit (17 million colors).
• What is the most common color display?
• http//w3schools.com/css/css_colors.asp
• What happens when a monitor cannot display a
  color? Dithering

8
Dithering
9
Addressing Color Variability

• Stick to 216 Original Colors
• Why is color important?
• Assists users in comprehension and learning tasks
• Improves performance in search and locate tasks,
  retention tasks, and decision tasks
• Be careful not to only color-code information

10
Addressing Accessibility

• Provide textual equivalents for non-text elements
• ltimg srcunc.gif" altUNC Tar Heels" /gt
• Skip repetitive navigation links
• Test plug-ins and applets for accessibility
• Alt tag for Applets
• Still may be inaccessible!
• Plug-ins Use one with extensive browser support
• Provide a link to the source file
• Keep them operational from the keyboard
• Tables are problematic

11
Table Version
12
Screen Reader Version

• Course
• Instructor
• Time
• Room
• INLS 572
• Christie McDaniel
• 1130-100
• Manning 117
• INLS 261
• Kochtanek
• .

13
Download Time

• Affects Users Perception
• Max time 10 seconds (old estimate)
• 0.1 second is instantaneous
• 1 second is maximum!
• Inform users of potential download times/problems

14
Page Titles Title tag

• Informative
• Quick Scanning
• Context
• Keep length to about 40 to 60 characters
• Good page titles help search engines find your
  pages
• Example
• Christie McDaniel, MSIS, UNC Chapel Hill, SILS

15
Metadata Comments

• Meta-data help search engines find your pages
• Examples
• ltmeta name description content U.S.
  Department of State Home Pagegt
• ltmeta namekeywords contentDOS, Department of
  State, Public Diplomacy, Country, Bureau,
  Government, United States Foreign Policy, Powell,
  Secretary of State, U.S. Department of State,
  Embassy gt

16
Metadata Comments

• Define keywords for search engines
• ltmeta name"keywords" content"HTML, DHTML, CSS,
  XML, XHTML, JavaScript, VBScript" /gt
• Define a description of your web page
• ltmeta name"description" content"Free Web
  tutorials on HTML, CSS, XML, and XHTML" /gt
• Define the last revision of your page
• ltmeta name"revised" content"Hege Refsnes,
  6/10/99" /gt
• Refresh page every 5 seconds
• ltmeta http-equiv"refresh" content"5" /gt

17
The Homepage

• Should communicate clearly the sites purpose
• Should show all major navigation options
• Most content should be visible above-the-fold
• Should contain a limited amount of prose text
• All roads lead home

18
Homepage Examples

• http//www.ncbook.org/
• http//tarheelblue.collegesports.com/
• http//www.unc.edu
• www.ils.unc.edu/index.html

19
Page Layout Guidelines

• Important Items in Consistent Places
• Important items should be obvious
• Avoid crowding make effective use of white
  space
• Density is the percentage of the screen filled
  with text and graphics
• Make appropriate page and line length decisions
• Align or block items on a page

20
Page Legibility

• Background/Foreground Contrast
• Plain-color or subtle backgrounds
• Font size
• Stable text
• Alignment
• ALL CAPS
• Example

21
Scrolling Paging

• Eliminate horizontal scrolling
• Use scrolling pages for reading comprehension
• Original idea behind hypertext was for links!!
• http//www.w3.org/Talks/OnlinePublishing93/Overvie
  w.html

22
Font Type

• Not everyone can view all font types
• Proportional and Fixed-Width
• Serif and Sans-Serif

23
Proportional Font

• Proportional font allots different amounts of
  space to each character
• Examples
• Times
• Helvetica
• Arial

24
Fixed-width Font

• Fixed-width fonts allot the same amount of
  horizontal space to all characters in the font.
• Examples
• Courier
• Monaco
• Browsers use fixed-width font to display text in
  certain tag sets such as ltpregt

25
Example

• Proportional Arial
• Willy Wonka and the Chocolate Factory.
• Fixed WidthCourier
• Willy Wonka and the Chocolate Factory.
• Sally Sold Seashells
• 12345 1234 123456778

26
Font Type

• Serif fonts add a small decorative line added as
  embellishment to the basic form of a character
• Example (Times) Willy Wonka and the Chocolate
  Factory.
• Sans Serif fonts do not have such lines and
  appear round
• Example (Arial, Helvetica) Willy Wonka and the
  Chocolate Factory.

27
XHTML The pieces of a website

• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Transitional//EN" "http//www.w3.org/TR/xhtml1/DTD
  /xhtml1-transitional.dtd"gt
• lthtmlgt
• ltheadgt
• lttitlegtChristie McDaniel, MSIS, UNC,
  SILSlt/titlegt
• ltmeta name description content Christie
  McDaniels online portfolio, UNC Chapel Hill,
  SILS, network engineering /gt
• lt/headgt
• ltbodygt
• ltpgtThis is a paragraph in XHTML. Later well
  learn how to manipulate text in a paragraph with
  XHTML. However, you should really use CSS to
  change font styles!lt/pgt
• ltulgt
• ltligtThis is a list item in an unordered
  list.lt/ligt
• ltligtThis is a second item in that list.lt/ligt
• lt/ulgt
• lt/bodygt
• lt/htmlgt