13-dec-15 html style bloopers. 2 what is good style? good style, like good taste, is partly--but...
TRANSCRIPT
![Page 1: 13-Dec-15 HTML Style Bloopers. 2 What is good style? Good style, like good taste, is partly--but only partly--a matter of opinion Bad style is frequently](https://reader036.vdocuments.us/reader036/viewer/2022082820/5697bf991a28abf838c91837/html5/thumbnails/1.jpg)
Apr 21, 2023
HTML Style Bloopers
![Page 2: 13-Dec-15 HTML Style Bloopers. 2 What is good style? Good style, like good taste, is partly--but only partly--a matter of opinion Bad style is frequently](https://reader036.vdocuments.us/reader036/viewer/2022082820/5697bf991a28abf838c91837/html5/thumbnails/2.jpg)
2
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
![Page 3: 13-Dec-15 HTML Style Bloopers. 2 What is good style? Good style, like good taste, is partly--but only partly--a matter of opinion Bad style is frequently](https://reader036.vdocuments.us/reader036/viewer/2022082820/5697bf991a28abf838c91837/html5/thumbnails/3.jpg)
3
Cannot load the page
Macromedia Flash is the worst offender Pages containing Flash animations often cannot even
be loaded by browsers without Flash If you are going to use Flash, or other fancy features,
make sure your intended audience has the ability to see your pages
![Page 4: 13-Dec-15 HTML Style Bloopers. 2 What is good style? Good style, like good taste, is partly--but only partly--a matter of opinion Bad style is frequently](https://reader036.vdocuments.us/reader036/viewer/2022082820/5697bf991a28abf838c91837/html5/thumbnails/4.jpg)
4
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 To submit a form via HTML, you usually must
have JavaScript turned on The JavaScript does client-side input checking This is probably useful enough to justify requiring
JavaScript, but be sure your users are aware of the requirement
![Page 5: 13-Dec-15 HTML Style Bloopers. 2 What is good style? Good style, like good taste, is partly--but only partly--a matter of opinion Bad style is frequently](https://reader036.vdocuments.us/reader036/viewer/2022082820/5697bf991a28abf838c91837/html5/thumbnails/5.jpg)
5
Cannot read the page
Here are two otherwise very nice backgrounds:
Both of these backgrounds have text--can you see it?
![Page 6: 13-Dec-15 HTML Style Bloopers. 2 What is good style? Good style, like good taste, is partly--but only partly--a matter of opinion Bad style is frequently](https://reader036.vdocuments.us/reader036/viewer/2022082820/5697bf991a28abf838c91837/html5/thumbnails/6.jpg)
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? Did you ever do it? What do you think about that person’s sense of self-
importance? 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 There are lots of places you can use absolute
measurements in HTML, and very little reason ever to do so
![Page 7: 13-Dec-15 HTML Style Bloopers. 2 What is good style? Good style, like good taste, is partly--but only partly--a matter of opinion Bad style is frequently](https://reader036.vdocuments.us/reader036/viewer/2022082820/5697bf991a28abf838c91837/html5/thumbnails/7.jpg)
7
Contrast is important
Contrast is important 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
If it has good contrast on your monitor, that doesn’t mean it will have good contrast on everyone else’s
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 color, not in contrast
![Page 8: 13-Dec-15 HTML Style Bloopers. 2 What is good style? Good style, like good taste, is partly--but only partly--a matter of opinion Bad style is frequently](https://reader036.vdocuments.us/reader036/viewer/2022082820/5697bf991a28abf838c91837/html5/thumbnails/8.jpg)
8
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 you want to see
![Page 9: 13-Dec-15 HTML Style Bloopers. 2 What is good style? Good style, like good taste, is partly--but only partly--a matter of opinion Bad style is frequently](https://reader036.vdocuments.us/reader036/viewer/2022082820/5697bf991a28abf838c91837/html5/thumbnails/9.jpg)
9
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 HTTP-EQUIV="Refresh" CONTENT="0; URL=newURL">
This takes you to the new page but effectively disables the “Back” button
![Page 10: 13-Dec-15 HTML Style Bloopers. 2 What is good style? Good style, like good taste, is partly--but only partly--a matter of opinion Bad style is frequently](https://reader036.vdocuments.us/reader036/viewer/2022082820/5697bf991a28abf838c91837/html5/thumbnails/10.jpg)
10
You can’t navigate the site
EPSON has long been my favorite example Suppose you want to download a printer driver; you go
to www.epson.com, and here are your choices: Printers & Imaging products Electronic devices Point of Sale Products
This represents their corporate organization What do I care how they are organized?
![Page 11: 13-Dec-15 HTML Style Bloopers. 2 What is good style? Good style, like good taste, is partly--but only partly--a matter of opinion Bad style is frequently](https://reader036.vdocuments.us/reader036/viewer/2022082820/5697bf991a28abf838c91837/html5/thumbnails/11.jpg)
11
Workarounds
Poor contrast: 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 Bad size:
Increase or decrease screen resolution Can’t leave the page with the Back button
Use the pull-down list of pages you’ve been to Can’t navigate the site
Use Google
![Page 12: 13-Dec-15 HTML Style Bloopers. 2 What is good style? Good style, like good taste, is partly--but only partly--a matter of opinion Bad style is frequently](https://reader036.vdocuments.us/reader036/viewer/2022082820/5697bf991a28abf838c91837/html5/thumbnails/12.jpg)
12
The End