Web design

1
Web design

• Miroslav Milinovic
• Croatian Academic and Research Network - CARNet
• Zagreb, Croatia
• ltmiro_at_srce.hrgt

6th CEENet Workshop on Network Technology,
Budapest, Hungary, August 2000.
2
Content

• Authoring Web pages tools and techniques
• Web design
• Usability
• Accessibility
• Future Device independent Web
• Summary

3
How Web works?
Internet
WWW servers
(WWW)
users (clients) browse
?
?
resources (HTML files)
authors write HTML
4
Authoring Web pages

• We need
• authoring tools to create material
• HTML authoring tools
• tools for editing graphics multimedia stuff
• ...
• Web server - place where to put the material
• some publishing mechanism
• at least ability to copy or FTP files at right
  place on server

5
Authoring HTML files

• HTML files can be created using
• simple editors
• specialized tools (HTML authoring tools)
• additional tools
• for creating (editing) multimedia staff
  (graphics, audio, video)
• for HTML validation (validation tools)
• for developing Java code (JDK)
• for web site maintenance
• ...

6
Simple editors

• Notepad, vi, emacs, joe, ...
• easy and cheap to start with
• no limitations in writing HTML
• do not stick to (old) standards
• need (good) knowledge of HTML
• easy to make mistakes
• additional validation is necessary
• good for small fixes or single pages
• less used due to rapid development of specialized
  authoring tools

7
Authoring tools

• Dreamweaver, Adobe GoLive, HomeSite, HotMetal,
  Netscape Composer, MS Front Page, MS Office, ...
• commercial, shareware, freeware
• standalone or embedded within other programs
• provide easy interface for HTML writers
• offer WYSIWYG (usually)
• automatic validation (stick to standard)
• under constant development

?
8
Authoring tools

• additional features of a good authoring tool
• CSS editor
• (Java)script editor
• templates (web pages, style sheets)
• image editing (clickable maps, )
• handling multimedia objects
• web site maintenance capabilities
• database support (ODBC)
• ...

9
Validation tools

• embedded in authoring tools
• standalone, available on the Internet
• check
• typing mistakes
• syntax errors
• conformance to a standard
• Validate your pages!
• Browser sometimes do not forget!
• improper nesting

?
10
Validation tools

• additionally offer
• tune-up services
• web site promotion
• help for web authors
• examples
• W3C Validator - http//validator.w3.org/
• NetMechanic - http//www.netmechanic.com/
• Weblint - http//www.unipress.com/cgi-bin/WWWeblin
  t
• Web Site Garage - http//websitegarage.netscape.co
  m/

11
Where to put the files?
?
12
Where to put the files?

• WWW server document tree
• gt cd //htdocs/
• gt chmod 775 .
• gt vi index.html
• gt ...(upload and/or edit files)...
• gt chmod 664
• Home Pages
• gt cd
• gt chmod 711 .
• gt mkdir public_html
• gt chmod 755 public_html
• gt ...(upload and/or edit files)...
• gt chmod 644

13
Promoting your Web site

• Who knows that you have done a good job?
• register your site to major searching machines
  and catalogs
• one is nothing
• follow the rules
• use meta tags
• promotion tools
• http//www.submit-it.com
• http//www.register-it.com
• http//www.ambition.com/register

14
ASPs make it easier

• Application service providers offer
• web hosting together with tools for maintenance
• specialized services that enables outsourcing
  some of functionality like search, counters,
  promotions, shopping cards, mailing lists,
• image editing
• ...
• Check for more at
• http//www.webware.com/
• http//www.searchasp.com/
• http//www.aspnews.com/

15
Web design - a team effort

• Web site development and maintenance is a team
  job
• Webmaster(s) should take care about
• (visual) design
• content design (information architecture)
• technical elements (HTML coding, supporting
  programs)

16
Web design - general principles

• Web is a new media
• new way of publishing
• new rules of design
• prepare yourself before writing actual page
• What do you want to say and to whom?
• organize the material
• be concise and precise
• What is a good Web design?
• there is adequate design (for selected purpose)
• good practices for Web writers

17
What is a good Web design?

• good presentation
• no barriers between user and information
• useful content (quality)
• gives users something that they want
• effective information provision
• ease of access for all users
• efficient information provision
• economical use of (network) resources

?
18
What is a good Web design?

• be consistent
• layout
• library of icons, images, logo
• standard navigation bar (absolute, relative)
• metadata
• build a site not an unrecognizable set of pages
• navigation, site map
• use multimedia with measure
• do not overdo with any of style elements
• consult with users

19
Good practices

• stick to the agreed HTML standards
• do not use private extensions
• do not use news tags as soon as they are
  announced
• think about all users
• (all) browsers and computer platforms
• with slow lines

?
20
Good practices

• remember
• users do not like to scroll and read much
• do not use technology for technologys sake
• do not misuse standards (text in GIF files)
• stop premature and bury dead ones
• design for people

21
What is a bad design?

• long pages, too much scrolling, boring text
• no structure
• no navigation
• What is this page about?
• complex (very long) URLs
• ...for ... click here
• ... best viewed with ...
• frames suck(?)

?
22
What is a bad design?

• overwhelmed with multimedia
• big images
• too many images and/or video clips
• obnoxious noise .vs. background music
• boring or aggressive animation
• bad images (poor quality)
• colours, fonts, blink
• cool pages suck(?)

23
Jacob Nielsens Top Ten Mistakes

• Frames
• Bleeding-edge technology
• Scrolling text and looping animations
• Complex URLs
• Orphan pages
• Scrolling navigation pages
• Lack of navigation support
• Non-standard link colors
• Outdated information
• Slow download times

24
Web design and interactivity

• interactivity means
• motion
• integrated sound effects
• animation and video
• ability for the user to manipulate what is on the
  screen
• elements that respond to the position of the
  cursor
• ...
• should be handled with special care

?
25
Web design and interactivity

• technologies and techniques used
• DHTML
• Java applets
• Javascript
• Flash
• Shockwave for Director
• each has its own advantages and disadvantages

26
Usable Web pages

• Effective
• enable user to find required info
• Efficient
• enable info to be found quickly without
  additional effort
• Satisfying
• motivate user to come again and give appropriate
  image
• To create a usable site it is essential to take a
  user-centered approach to design.

27
Web usability testing

• various methods
• specific, Web usability testing techniques
• Scenario based testing
• Card sorting
• Category membership expectations test
• Icon recognition
• Heuristic evaluation
• questionnaires
• log analysis

28
Web usability testing techniques

• Scenario based testing
• test actual or goal users
• ask about the site
• give them real tasks
• Card sorting
• used to discover users mental model of an
  information space
• the stack of indexed cards is given to group of
  users and they have to sort them into meaningful
  piles and label each formed pile (category)

?
29
Web usability testing techniques

• Category membership expectations test
• users are presented a number of category names
  and asked what sort of info would they expect to
  find within each category
• Icon recognition
• produce a number of different possible icons or
  graphics for portions of the site and ask users
  to match an icon with a category
• Heuristic evaluation
• usability experts go through a site and analyze
  it considering specific principles

30
Web accessibility

• The power of the Web is in its universality.
  Access by everyone regardless of disability is an
  essential aspect." (Tim Berners-Lee)
• e-disabilities
• physical mobility, visual, hearing,
• other technical,economical,
• largest obstacle
• ignorance in web design
• W3C Web Accessibility Initiative (WAI)
• http//www.w3.org/WAI/

31
W3C WAI - quick tips

• Images animations. Use the alt attribute to
  describe the function of each visual.
• Image maps. Use client-side MAP and text for
  hotspots.
• Multimedia. Provide captioning and transcripts of
  audio, and descriptions of video.
• Hypertext links. Use text that makes sense when
  read out of context. For example, avoid "click
  here."

?
32
W3C WAI - quick tips

• Page organization. Use headings, lists, and
  consistent structure. Use CSS for layout and
  style where possible.
• Graphs charts. Summarize or use the longdesc
  attribute.
• Scripts, applets, plug-ins. Provide alternative
  content in case active features are inaccessible
  or unsupported.

?
33
W3C WAI - quick tips

• Frames. Use NOFRAMES and meaningful titles.
• Tables. Make line by line reading sensible.
  Summarize.
• Check your work. Validate. Use tools, checklist,
  and guidelines at http//www.w3.org/TR/WCAG.

34
Future Device independent Web

• lots of devices lots of display formats
• write once, view anywhere?
• thin and thick clients
• visual and aural Web pages
• what can the device say about itself
• device capabilities (hardware, software,
  modalities, )
• personal preferences (No images please!)
• platform for privacy preferences (site privacy
  policy)

?
35
Future Device independent Web

• CC/PP
• Composite Capability/Preference Profiles - HTTP
  extension
• for describing device capabilities and user
  preferences
• devices sends parameterized request and receives
  personalized response
• WAP WML
• We do not need another Web!
• Wrong Approach to Portability (Jakob Nielsen)
• Squeezing the Web into mobile? Will not work!

36
Summary

• Authoring Web pages tools and techniques
• Web design
• Usability
• Accessibility
• Future Device independent Web

37
Recommended links

• about Web design
• http//www.useit.com/
• http//www.webpagesthatsuck.com/
• webwatch
• http//www.w3c.org/
• http//www.hwg.org/
• http//www.irwa.org/