Good HTML StyleStyle GuidesKnow who you’re trying to reachKnow what you’re trying to doNew media require new formatsWeb pages are not booksVery general suggestionsQuestions you should answerBuild clear navigation aidsHelp visitors find pages in your sitePut the important stuff on topOrganize your pagesOther organizationsGraphics on your home pageUpdating sitesFAQsDesign standardsSite “covers”Use tablesTypes of graphicsGIF filesJPG filesPNG GraphicsThe EndJan 14, 2019Good HTML Style2Style GuidesThere are many HTML style guides on the WebOne of the best is from Yale,http://info.med.yale.edu/caim/manual/This talk is based on that style guideAnother is from the W3C,http://www.w3.org/Provider/Style/One of the more enjoyable sites ishttp://www.webpagesthatsuck.com/Motto: “Where you learn good Web design by looking at bad Web design”One of my favorite books on the subject:Don't Make Me Think: A Common Sense Approach to Web Usability, by Steve Krug, Roger Black3Know who you’re trying to reachWhat is your target audience?The general public (Web surfers)Like a magazine cover, your home page should lure people inUse strong graphics and bold statementsIn the fewest words possible, tell visitors what you offerAll your links should point “inward” to your pagesOccasional visitorsNavigation should be simple and obviousUse overview pages, helpful icons, FAQs, and simple organizationExperts and frequent visitorsProvide well-organized information quickly with a minimum of fussAvoid fancy graphics, slow-loading pages, and “fluff”Provide site maps and search facilitiesInternational usersUse standard, easily understood languageConsider providing pages in a variety of languagesAvoid region-specific time and date formats, like 10-12-20024Know what you’re trying to doA page without a purpose is like a talk without a topicAre you trying to sell something?Air freshener: Use beautiful outdoor scenesUnderarm deodorant: Beautiful people (women and men)Computers: Attractive pictures and technical specsYourself: See any book on writing resumesAre you trying to convey information?Use a clear organization with a table of contentsFor many topics, a FAQ is often appropriate5New media require new formats Books existed well before Gutenberg’s 1456 BibleHere are some “interface standards” for books:Books have coversBooks are bound along the left edge (in the USA)The title is on the spine, top to bottom (in the USA)Books have a title pageThe pages of a book are numberedOdd-numbered pages are on the rightThe front matter is numbered with Roman numeralsTextbooks have a table of contents and an indexHow long after Gutenberg did it take to establish these standards?Answer: Gradually, over more than 100 years6Web pages are not booksStandards are evolving rapidly, but are not “finished”The Web brings new abilities:Publishing is cheap; anyone can do it“When I was a boy I was told that anybody could become President. I'm beginning to believe it.” - Clarence S. DarrowHyperlinks allow nonlinear access to informationSearch engines make finding information much easierI used to have hundreds of bookmarks; now I use GoogleThe Web brings new challenges:Users can get “lost in hyperspace”Good navigation tools are essentialSurfers flit on by, like TV “channel surfers”You have maybe ten seconds to convey your message7Very general suggestionsGood writing was, is, and always will be importantEverything you ever learned about writing well still appliesUse a spell checkerBad spelling puts off good spellersPractically every piece of software includes a spell checkerDon’t use a grammar checker--they all stinkIf you are not a native English speaker, they may point out some trivial grammatical errorsIf you don’t see the reason for their advice, it’s probably wrongMake each page stand by itselfYou don’t know how someone got hereDon’t use page titles like “Introduction” that require context8Questions you should answerThe reader should be able to discover:Who wrote the page?You find a page on lung cancer. Was it written by (a) the American Medical Association, (b) someone who works for Philip Morris, or (3) a plumber in Hoboken? What is the page about?If you have nothing to say, don’t say itUse a clear, short title--it may become a bookmarkWhen was the page written/updated?You find a page about a great new drug available “next month”Another page describes the “latest version” of some softwareWhere is the page?Who wrote the page? Who sponsors it?If I print the page out, will I ever find it on the Web again?9Build clear navigation aidsWhen someone accesses your site:What are they likely to be looking for?How sophisticated are they?Hardly anyone does enough user testingA common problem: you find an interesting page, but you don’t know what pages “surround” itAre pages organized in a simple and consistent way?Can the visitor find her way to the home page?Can the user tell if she’s still in the same site?Button bars are good, but don’t omit text linksAvoid dead-end pages (those with no links)10Help visitors find pages in your siteIf you have many pages, you can use menu levels...Look at the table of contents in a textbook; usually, there are main section headers, with subheaders...but users do not like lots of little menusStudies show that users prefer dense menus with lots of choices over little, one-step-at-a-time menus“Site maps” (basically, an extensive table of contents) have become popularNot everyone loads graphics by defaultImage maps are nice, but keep the text links anywayThink about making pages available to the disabledConsider adding a search engine to your siteDon’t make it easy to accidentally leave your siteDistinguish between local links and links that take the visitor offsiteGive your pages a consistent “look”11Put the important stuff on topWeb pages are usually bigger than the window they are viewed inThe first thing visitors see is the top of your Web pageMany visitors will never scroll downThe top of a page should tell visitors what they need to know about the pageIf a visitor is lost inside your site, she may not notice
View Full Document
Unlocking...