Good HTML Style Jan 13 2019 Style Guides There are many HTML style guides on the Web One of the best is from Yale http info med yale edu caim manual Another is from the W3C http www w3 org Provider Style One of the more enjoyable sites is http www webpagesthatsuck com This talk is based on that style guide 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 Black 2 Know who you re trying to reach What is your target audience The general public Web surfers Occasional visitors Navigation should be simple and obvious Use overview pages helpful icons FAQs and simple organization Experts and frequent visitors Like a magazine cover your home page should lure people in Use strong graphics and bold statements In the fewest words possible tell visitors what you offer All your links should point inward to your pages Provide well organized information quickly with a minimum of fuss Avoid fancy graphics slow loading pages and fluff Provide site maps and search facilities International users Use standard easily understood language Consider providing pages in a variety of languages Avoid region specific time and date formats like 10 12 2002 3 Know what you re trying to do A page without a purpose is like a talk without a topic Are you trying to sell something Air freshener Use beautiful outdoor scenes Underarm deodorant Beautiful people women and men Computers Attractive pictures and technical specs Yourself See any book on writing resumes Are you trying to convey information Use a clear organization with a table of contents For many topics a FAQ is often appropriate 4 New media require new formats Books existed well before Gutenberg s 1456 Bible Here are some interface standards for books Books have covers Books 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 page The pages of a book are numbered Odd numbered pages are on the right The front matter is numbered with Roman numerals Textbooks have a table of contents and an index How long after Gutenberg did it take to establish these standards Answer Gradually over more than 100 years 5 Web pages are not books Standards are evolving rapidly but are not finished The Web brings new abilities Publishing is cheap anyone can do it Hyperlinks allow nonlinear access to information Search engines make finding information much easier When I was a boy I was told that anybody could become President I m beginning to believe it Clarence S Darrow I used to have hundreds of bookmarks now I use Google The Web brings new challenges Users can get lost in hyperspace Good navigation tools are essential Surfers flit on by like TV channel surfers You have maybe ten seconds to convey your message 6 Very general suggestions Good writing was is and always will be important Use a spell checker Bad spelling puts off good spellers Practically every piece of software includes a spell checker Don t use a grammar checker they all stink Everything you ever learned about writing well still applies If you are not a native English speaker they may point out some trivial grammatical errors If you don t see the reason for their advice it s probably wrong Make each page stand by itself You don t know how someone got here Don t use page titles like Introduction that require context 7 Questions you should answer The reader should be able to discover Who wrote the page What is the page about If you have nothing to say don t say it Use a clear short title it may become a bookmark When was the page written updated 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 You find a page about a great new drug available next month Another page describes the latest version of some software Where 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 8 Build clear navigation aids When someone accesses your site What are they likely to be looking for How sophisticated are they Hardly anyone does enough user testing A common problem you find an interesting page but you don t know what pages surround it Are 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 links Avoid dead end pages those with no links 9 Help visitors find pages in your site If you have many pages you can use menu levels but users do not like lots of little menus Studies 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 popular Not everyone loads graphics by default Look at the table of contents in a textbook usually there are main section headers with subheaders Image maps are nice but keep the text links anyway Think about making pages available to the disabled Consider adding a search engine to your site Don t make it easy to accidentally leave your site Distinguish between local links and links that take the visitor offsite Give your pages a consistent look 10 Put the important stuff on top Web pages are usually bigger than the window they are viewed in The first thing visitors see is the top of your Web page Many visitors will never scroll down The top of a page should tell visitors what they need to know about the page If a visitor is lost inside your site she may not notice links at the bottom of the page Often links at top and bottom are a good idea This is especially true for a linear set of pages where the links are Previous Next and maybe Home or Table of Contents 11 Organize your pages Any organization is better than no organization A hierarchy tree usually works best Trees shouldn t be too deep Users don t like to step down through multiple pages to find the one they want Trees shouldn t be flat Put most important or most general concepts near the top Lower pages are more specific Users don t like to wade through a huge list of links to find the one they want Draw a picture of your site 12 Other organizations Grid HTML XML XSLT Lecture http http http Links http http http Assignme http http http nt Linear Pages to be read in order with Previous and Next links This design is most often seen in tutorials or in fiction 13 Graphics on your home
View Full Document
Unlocking...