Bad HTML Style Jan 14 2019 What is good style Good style like good taste is partly but only partly a matter of opinion Bad style is frequently easier to define A web page has bad style if You can t load the page You can t use the page for its intended purpose You can t read the page You can t adjust the page to your needs You can t get rid of the page You can t navigate the site containing the page 2 Cannot load the page Macromedia Flash is the worst offender Pages containing Flash animations often cannot even be loaded by browsers without Flash Java applets are much less popular than formerly Some users just turn off Flash Microsoft users don t get modern Java by default If you are going to use Flash applets or other fancy features make sure your intended audience has the ability to see your pages Provide the essential information on your site in a form everyone can use 3 Cannot use the page Many users turn off automatic image loading They may have a slow connection They may be visually disabled If your only hyperlink to another page is through an image users without images cannot get there Always provide text hyperlinks in addition to your images Use the alt text attribute in all your img tags Many users turn off JavaScript This is one way to avoid pop up windows JavaScript is useful for client side input checking Server side input checking is slower but always works 4 Cannot use with new technology Many telephones can access the Web My Sidekick does JavaScript but very poorly Blackberry Sidekick iPhone and now Android I can t get flight information from the Philadelphia airport I can t access some weather sites Some sites are useable but very cluttered e g Amazon For the most useful but unusable sites alternative sites have come into existence 5 Cannot read the page Here are two otherwise very nice backgrounds Both of these backgrounds have text can you see it 6 Still cannot read the page Have you seen pages that tell you what browser to use and what to set your screen size to 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 fonts 7 of white males are red green colorblind Did you ever do it What do you think about that person s ego There are various other kinds of color blindness Color is often a good differentiator but it should never be the only differentiator There are lots of places you can use absolute sizes in HTML but very little reason ever to do so 7 ADA 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 h tml 8 Contrast is important Contrast is important If it has good contrast on your monitor that doesn t mean it will have good contrast on everyone else s Use either very dark text against a very light background or very light text against a very dark background Avoid contrast in the background itself Always use more contrast than you think necessary The ability to read depends on edge detection Human edge detection relies on contrast differences between light and dark not on color differences This is a difference in contrast not in color This is a difference in color not in contrast 9 You can t adjust the page Pages that use absolute sizes for example to adjust the size of a table to just fit on a 17 inch screen are a serious nuisance Scrolling vertically is acceptable because we don t need to scroll often to read a column of text If we need to scroll sideways we need to scroll back and forth for every single line Relative sizes don t always work either I ve run across pages containing tables that are 110 of the page width Even if your monitor is large and your eyesight is good there may be other things on the screen that the user wants to see 10 You can t leave the page Sometimes this occurs through malice the page includes JavaScript to pop up a new window each time you close the current one Usually it s an accident a page gives you an automatic transfer to a new page but with the time set to zero meta This takes you to the new page but effectively disables the Back button HTTP EQUIV Refresh CONTENT 0 URL newURL Easy 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 page 11 You can t navigate the site EPSON 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 products Electronic devices Point of Sale Products Which of these should I choose to find a printer driver Their page represents their corporate organization What do I care how they are organized 12 Workarounds Poor contrast Bad size Increase or decrease screen resolution On Mac OS X use the mouse scroll wheel to zoom in or out Can t leave the page with the Back button Hit control A to select all the text on the page Otherwise in Preferences select Use my chosen colors and or turn of image loading then reload page Use a Firefox add on I use Web Developer to turn on or off various page styles Use the pull down list of pages you ve been to Can t navigate the site Use Google to search for particular information within the site 13 14 The End I 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 …
View Full Document
Unlocking...