HTML Style BloopersWhat is good style?Cannot load the pageCannot use the pageCannot use with new technologyCannot read the pageStill cannot read the pageContrast is importantYou can’t adjust the pageYou can’t leave the pageYou can’t navigate the siteWorkaroundsThe EndJan 14, 2019HTML Style Bloopers2What 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 can’t load the pageYou can’t use the page for its intended purposeYou can’t read the pageYou can’t adjust the page to your needsYou can’t get rid of the pageYou can’t navigate the site containing the page3Cannot 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 pages4Cannot 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 requirement5Cannot 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 can’t get flight information from the Philadelphia airportI can’t access some weather sitesSome sites are useable but very cluttered (e.g. Amazon)For the most useful sites, alternative sites have come into existence6Cannot read the pageHere are two otherwise very nice backgrounds:Both of these backgrounds have text--can you see it?7Still 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 person’s 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 so8Contrast 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 doesn’t mean it will have good contrast on everyone else’sAlways 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 differencesThis is a difference in color, not in contrast9You can’t 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 don’t 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 don’t always work, either; I’ve 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 see10You can’t leave the pageSometimes this occurs through malice--the page includes JavaScript to pop up a new window each time you close the current oneUsually it’s an accident: a page gives you an automatic transfer to a new page, but with the time set to zero:<meta HTTP-EQUIV="Refresh" CONTENT="0; URL=newURL">This takes you to the new page but effectively disables the “Back” button11You can’t 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?12WorkaroundsPoor 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 resolutionCan’t leave the page with the Back buttonUse the pull-down list of pages you’ve been toCan’t navigate the siteUse Google13The
View Full Document