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 imagesUse the alt="text" attribute in all your <img> tagsMany users turn off JavaScriptThis is one way to avoid pop-up windowsJavaScript is useful for client-side input checkingServer-side input checking is slower but always works5Cannot 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 but unusable 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 sizes in HTML, but 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 contrastThis is a difference in contrast, not in color9You 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 the user wants 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” buttonEasy solution: Don’t set the time to zero!11You can’t navigate the siteEPSON used to be my favorite bad example (it’s gotten better now)I wanted to download a printer driver; I went to www.epson.com and it gave me the following 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 EndI am a Web developer for a non-profit that is trying to help families with special health needs affected by Hurricane Katrina. Why in the world would FEMA, a federal agency subject to Section 508 provisions, build a web site that is only accessible via Internet Explorer for Windows? I know of no *good* technical reason to do so. In fact, if your web team is worth its salt, they should be developing to W3C standards anyway, which would mean that your web resources would be available to anyone with a web browser, even an old one on an old system! As a Macintosh user, I'm used to this kind of marginalization, but I find it outrageous that a resource as critical to people in desperate straits as this one would exclude millions of people for no reason other than ignorance of best practices. --Andrew
View Full Document
Unlocking...