Bad HTML StyleWhat is good style?Cannot load the pageCannot use the pageCannot use with new technologyCannot read the pageStill cannot read the pageADA (Americans with Disabilities Act)Contrast is importantYou can’t adjust the pageYou can’t leave the pageYou can’t navigate the siteWorkaroundsSlide 14The EndJan 14, 2019Bad HTML Style2What 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 JavaScript, but very poorlyI 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 various other kinds of color blindnessColor is often a good differentiator, but it should never be the only differentiatorThere are lots of places you can use absolute sizes in HTML, but very little reason ever to do so8ADA (Americans with Disabilities Act)In the case of the National Federation of the Blind v. Target, Judge Marilyn Hall Patel ruled that retailers can be sued if their websites are not accessible to the blind. In her opinion for the US District Court for the Northern District of California, Patel wrote that “the ‘ordinary meaning’ of the ADA’s prohibition against discrimination in the enjoyment of goods, services, facilities or privileges, is that whatever goods or services the place provides, it cannot discriminate on the basis of disability in providing enjoyment of those goods and services.”At issue is Target.com’s lack of properly used “alt” tags throughout its site. Source: http://arstechnica.com/news.ars/post/20060910-7705.html9Contrast 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 color10You 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 see11You 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!User workaround: Use the drop-down menu next to the Back button to choose a page before the immediately previous page12You 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 ProductsWhich of these should I choose to find a printer driver?Their page represents their corporate organizationWhat do I care how they are organized?13WorkaroundsPoor 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 Google1415The 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
View Full Document
Unlocking...