|
|
| Text and Style sheet tips |
|
Make sure that links can be easily discerned from normal text! If you really don't want the links to have a color different from the text, then you should at least stick to the long respected convention that links should be underlined (hence you should also not use the underlined style for anything else than links). There is really no point in making links look exactly like normal text. The excuse that it's more 'cosmetic', comes at the cost of people getting frustrated because they either have to guess which words are clickable, or have to scan the entire text with their mouse in order to find the links. Most people won't even realize that there actually are links and will leave your site right away.
Never use similar colors for the background and text of your documents, like yellow text on a white background (do you see what I mean?). This makes your pages a pain to read or even unreadable.
Make sure that the background color of your pages are the same as the dominant color in the background image. Otherwise you risk that the text becomes unreadable when the image can't be loaded (e.g. white text on a white background which would normally be a dark image, you get the point...)
When using the font "Courier", be sure to specify "Courier New,Courier" as font face and not "Courier" or "Courier,Courier New" because otherwise those poor Windows users will get a disgusting bitmap font on their screen. Besides, it's better and shorter to use the <TT> tag for this ("Monospaced" from the Logical Styles popUp).
Be careful when using the font "Symbol"! This font, exceptionally, has the same character set in Macintosh and Windows, which is a really major mistake of the designers, or maybe this is just logical but the programmers of browsers don't know about this. At any rate, the consequence of it, is that, when you use characters above ASCII 127, they'll look different on different platforms because the character sets are always converted while for Symbol, they shouldn't. E.g. in Mac OS, this: "•" may show up as "infinity", while in Windows, this: "¥" may show up as "infinity"!
My advice is to avoid using these characters by using images instead, or to use a JavaScript which inserts the right character depending on the OS. A standard way to display mathematical symbols has been proposed by the W3C, but it'll probably take some time until it's implemented in all browsers.
Global style sheet definitions must be placed in the header of your file and should look like this:
<STYLE><!--
SPAN.bigTitle {font-size: 20pt; font-family: Helvetica,Arial,Swiss; font-weight: bold}
SPAN.smallTitle {font-size: 14pt; font-family: Helvetica,Arial,Swiss; text-decoration: underline}
--></STYLE>
The style definition itself MUST be entered between "<!-- " and " -->" (as a comment). If you'd omit the comment notation, older browsers will treat and display it as plain text and some new browsers won't even recognize the style definition. If you use the Style Sheet Editor (correctly), this is all done for you.
When using a linked stylesheet, make sure to put the style definitions at least between a <HTML> starting and ending tag in the file, even if it's not going to be used as a webpage. Otherwise, Internet Explorer won't recognize the styles.
There is a bug in Internet Explorer (may be fixed in newer versions) which ignores the first style definition in a linked stylesheet. Just include as the first style in your linked style sheets an unused "dummy" style to work around this.
When your page consists of a strictly unscaleable lay-out (where text must fit within certain images), use pixels (px) as size dimensions, because they cannot be scaled. In all other cases, use a user-scaleable unit like the "Em". 1 em = the size that the user has set in the browser's preferences. E.g. if the user has set this to 12pt, and you use a font size of 1.5 em, the user sees a size of 18pt. You can also use this unit to specify other dimensions like margins or indent, so your entire lay-out will be scaled together with the font.
Be careful with the units points, inches and centimeters: while they are not scaleable, they are different between operating systems, or even between different versions of the same OS. For instance in Windows, the screen resolution is normally 96 dpi while in Mac OS it has traditionally been 72 dpi. To be really correct, the resolution should match the physical resolution of the monitor, but certainly do not count on this because it will rarely be the case!
|
| Return to Listing |
|
Website Designer R Us has over 12 years of IT experience and a focus on custom website design, web development and web hosting services. Our professional web design services will give your business the look and feel needed to beat your competitors! Our website design services include; web design, website redesign, website maintenance, web development, flash animation, eCommerce, shopping carts, domains, web hosting, search engine optimization, graphic design, logo design, blog writing, script installations & much more!
|
|
|