Basic Web Design

Technology is a tool  FIRST, understand how people actually interact with each other and with the information in their lives, in all the complex, nuanced, often unintuitive ways that they do.  SECOND, design ways to help support and enhance what people do in order to help them meet their goals.  THIRD, use technology as one of several powerful tools to bring these solutions to life. Viewing technology as a solution in itself, you're almost destined to fail. Many have. Many will. At a high cost.

Comments about good design  Nobody should notice your design  Noticing it is a failure  Focus the person on content, not navigation or how great it looks

Clean HTML  Objectives   Define information structure  Explain the problems with using Word to create HTML files  Explain why different browsers give different appearances to a web page  Explain the type of files and naming conventions required for developing  web pages  Explain why a web page designer cannot ensure how a page will look  Explain meta-structure for a web page design (page titles, file naming conventions,  template construction)  Discuss the reasons for using tables to layout a basic web page  Explain why frames should not be used   Readings  Williams & Tollett ch. 4-6  Writing for Websites  writing_for_websites.pdf

Word HTML  Objectives  ·<span  style='font:7.0pt "Times New Roman"'>  Define information structure  ·<span  style='font:7.0pt "Times New Roman"'>  Explain the problems with using Word to create HTML  files

Browsers are not the same  Different browsers –Internet Explorer –FireFox –Opera –Safari –Chrome  Different levels of implementation  Different ways of interpreting the tags

Browser differences  Must check your design in multiple browsers (and multiple monitor resolutions)  Yes, IE is on most machines, but many people do not like it  FireFox has about 25% of techie audience and that number is growing

Cannot control appearance  Many students want to run all windows maximized.  With larger monitors, many people don’t (I rarely do.)  A design must allow for different window sizes.

Design for Content  Cannot control how the user sees the page –Color can change –Graphics can be turned off –Browser window can vary  Paper can be tweaked, web pages cannot

Browser set wide

Browser set narrow

Testing with browsers  Install multiple browsers and test on your machine.  Change resolution and test

Tables on Web Pages  Only formatting method without using CSS –Only way to get side by side text –Navigation bars, etc all use tables  Not just data lists, like in paper docs  NOTE: tables do not resize  Don’t use tables to reproduce paper  In a longer course we would learn CSS, which is how most pages are now coded.

Formatting with tables

Same page with table borders

Table Resize Problem

Keep a consistent appearance  Visually show that the site is the same –Always use the same background –Same graphic style –Same type formatting  Ransom note effect can confuse the reader –Is this the same site? –Adjusting to new formatting style

Templates for consistency  Build and test templates first  Get the overall design finalized  If you don’t –Making same changes on bunches of pages –Missing some changes looks bad –Less chance of inconsistent design  Create the design and then make copies

Filename consistency  Web sites have lots of files and must be maintained (perhaps not by you)  The filenames you pick must make sense and say what the content is  Avoid page1, page2 names  Maintenance is hard since you forget the naming structure after a few months.

Keep reader oriented  Give all pages titles Page title of “Untitled” is unprofessional Makes development difficult.

Frames are poor design  Frame is essentially a way to have multiple web pages open on your site at the same time.  Bookmarks fail  Back button function is inconsistent

Questions for discussion  Good and bad points of the web  What makes it good and bad  Correctness of people’s attitude that everything is on the web? Especially from a student’s technical-level needs?

End