1. Web design

2. Content Authoring Web pages: tools and techniques Web design Usability Accessibility Future: Device independent Web Summary

3. How Web works? users (clients) browse Internet (WWW) WWW servers authors write HTML   resources (HTML files)

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

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/WWWeblint – Web Site Garage - http://websitegarage.netscape.com/

11. Where to put the files? 

12. 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 *

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 technology’s 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) URL’s “...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 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

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 it’s 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/