HTML Style

HTML Style Bloopers4-Aug-15What is good style?Good style, like good taste, is partly--but only partly--a matter of opinionBad style is frequently easier to defineA web page has bad style ifYou cant load the pageYou cant use the page for its intended purposeYou cant read the pageYou cant adjust the page to your needsYou cant get rid of the pageYou cant navigate the site containing the page2Cannot load the pageMacromedia Flash is the worst offenderPages containing Flash animations often cannot even be loaded by browsers without FlashIf you are going to use Flash, or other fancy features, make sure your intended audience has the ability to see your pages3Cannot use the pageMany users turn off automatic image loadingThey may have a slow connectionThey may be visually disabledIf your only hyperlink to another page is through an image, users without images cannot get thereAlways provide text hyperlinks in addition to your imagesTo submit a form via HTML, you usually must have JavaScript turned onThe JavaScript does client-side input checkingThis is probably useful enough to justify requiring JavaScript, but be sure your users are aware of the requirement4Cannot use with new technologyMany telephones can access the WebBlackberry is the best known (and most expensive)Mine is a T-Mobile SidekickMy Sidekick does not do JavaScriptI cant get flight information from the Philadelphia airportI cant access some weather sitesSome sites are useable but very cluttered (e.g. Amazon)For the most useful sites, alternative sites have come into existence5Cannot read the pageHere are two otherwise very nice backgrounds:Both of these backgrounds have text--can you see it?6

Still cannot read the pageHave you seen pages that tell you what browser to use and what to set your screen size to?Did you ever do it?What do you think about that persons ego?This page was created by someone with perfect eyesight using a 21-inch monitor set to 1600 by 1200 resolution, using an 8-point serif font, and as a result nobody but the original author has a clue what it actually says.Some people just like to use weird fonts7% of white males are red-green colorblindThere are lots of places you can use absolute measurements in HTML, and very little reason ever to do so7Contrast is importantContrast is importantUse either very dark text against a very light background or very light text against a very dark backgroundAvoid contrast in the background itselfIf it has good contrast on your monitor, that doesnt mean it will have good contrast on everyone elsesAlways use more contrast than you think necessaryThe ability to read depends on edge detectionHuman edge detection relies on contrast--differences between light and dark--not on color differences8This is a difference in color, not in contrastYou cant adjust the pagePages that use absolute sizes--for example, to adjust the size of a table to just fit on a 17-inch screen--are a serious nuisanceScrolling vertically is acceptable, because we dont need to scroll often to read a column of textIf we need to scroll sideways, we need to scroll back and forth for every single lineRelative sizes dont always work, either; Ive run across pages containing tables that are 110% of the page widthEven if your monitor is large and your eyesight is good, there may be other things on the screen that you want to see9You cant leave the pageSometimes this occurs through malice--the page includes JavaScript to pop up a new window each time you close the current oneUsually its an accident: a page gives you an automatic transfer to a new page, but with the time set to zero:

This takes you to the new page but effectively disables the Back button

10You cant navigate the siteEPSON has long been my favorite exampleSuppose you want to download a printer driver; you go to www.epson.com, and here are your choices:Printers & Imaging productsElectronic devicesPoint of Sale ProductsThis represents their corporate organizationWhat do I care how they are organized?11WorkaroundsPoor contrast:Hit control-A, to select all the text on the pageOtherwise, in Preferences, select Use my chosen colors and/or turn of image loading, then reload pageBad size:Increase or decrease screen resolutionCant leave the page with the Back buttonUse the pull-down list of pages youve been toCant navigate the siteUse Google12The End13