Web designWeb design

Content

• Authoring Web pages: tools and techniques

• Web design

• Usability

• Accessibility

• Future: Device independent Web

• Summary

How Web works?How Web works?

users (clients) browse

Internet

(WWW)

WWW servers

authors write HTML

resources

(HTML files)

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

Authoring HTML filesAuthoring 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

– ...

• 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

Simple editorsSimple editors

Authoring toolsAuthoring 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

Authoring toolsAuthoring 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)

– ...

Validation toolsValidation 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

Validation toolsValidation 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/WWWeblint

– Web Site Garage - http://websitegarage.netscape.com/

Where to put the files?Where to put the files?

index.htm l

*.htm , *.htm l

.../

...

htdocs/

conf/

cgi-bin/

...

httpd/

index.htm l

*.htm , *.htm l

.../

...

public_htm l/ .../

~login/ .../

users/ .../

/...

Where to put the files?Where to put the files?• WWW server document tree:> cd /…/htdocs/> chmod 775 .> vi index.html> ...(upload and/or edit files)... > chmod 664 *

• Home Pages:> cd > chmod 711 .> mkdir public_html> chmod 755 public_html> ...(upload and/or edit files)...> chmod 644 *

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

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/

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)

Web design - general principlesWeb 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

What is a good Web design?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

What is a good Web design?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

Good practicesGood 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

Good practicesGood practices

• remember:

– users do not like to scroll and read much

– do not use technology for technology’s sake

– do not misuse standards (text in GIF files)

– “stop premature and bury dead ones”

– “design for people”

What is a bad design?What is a bad design?

• long pages, too much scrolling, boring text

• no structure

• no navigation

• “What is this page about?”

• complex (very long) URL’s• “...for ... click here”

• “... best viewed with ...”

• frames suck(?)

What is a bad design?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(?)

Jacob Nielsen’s “Top Ten Mistakes”

• Frames

• Bleeding-edge technology

• Scrolling text and looping animations

• Complex URL’s

• Orphan pages

• Scrolling navigation pages

• Lack of navigation support

• Non-standard link colors

• Outdated information

• Slow download times

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

Web design and interactivity

• technologies and techniques used:– DHTML

– Java applets

– Javascript

– Flash

– Shockwave for Director

• each has it’s own advantages and disadvantages

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.

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

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)

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

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/

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."

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.

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.

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)

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!

SummarySummary

• Authoring Web pages: tools and techniques

• Web design

• Usability

• Accessibility

• Future: Device independent Web

Recommended linksRecommended 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/