|
|
|||||||||
|
Neat Making a page look good When designing web pages with both text and graphics mixed, there are a couple good rules of thumb. While you can usually see how good your page looks when it's done, it can help to start out in the right direction. I will be using the daily webzine Suck (http://www.suck.com) and CNet (http://www.cnet.com) as an example for most of the following advice. Whitespace is your friend The easiest way to make your page look better is to simply add some blank space. Use tables or a one-pixel transparent gif to add some white to your margins. Just change the height and width tags on your one-pixel gif to control exactly how much space you want. Setting your table data (<td>) widths to exact pixels works too, but sometimes the browser has its own ideas about how wide those columns need to be. If you really want to be exact, use both, putting your spaced gif in a table data width the same set width. For more flexibility, especially with different screen sizes, set the td width to a percentage or * (indicating the rest of the table). When doing this be careful of differences in the interpretation of width=X% between MSIE and Netscape. If you set the table itself's width to 100% (indicating 100% of the browser window) these differences disappear. Suck's right and left hand columns are good examples of whitespace making a site more attractive and legible. Use the right-angle rule In arranging both text and graphics on one page, there are layouts that work, being pleasing to the eye, and others that simply don't, looking cluttered and haphazard. While plain HTML 1.0 may work well for simple text, both text and graphics together look great in seperate columns, usually 2-3 on a page. More than three columns begins to look squashed on even large screens, and makes most text harder to read. CNet and Suck are good examples of page content being grouped into columns. When putting text, graphics, and white space into different columns, the right angle rule comes into effect. It states that the different text and graphic elements should be connected by right angles for the best appearance. It is easiest demonstrated with a couple right/wrong examples. The Xs represent solid content, like text and graphics, and the Os are the whitespace.
Both Suck and CNET follow this rule and end up looking quite well. Here's what Suck's diagram would look like: OXO XXX OXO XXO OXX OXO OXO XXX CNET's Layout would look something like this: OXO XXX XXX XXX XXX XOO Keep it neat This is probably the most important rule of all. The main hurdle to overcome in mixing text and graphics is to avoid unorganization, which lessens the text's legibility and the graphics' impact. The past two rules are there to do just that. Tables, columns and whitespace all stack the page elements into orderly patterns. All that is left is to make sure that the text and graphics themselves are good looking. Graphics should be there for a reason, and be without pixellation or nasty dithering. Even if they link to another page, they still usually don't need a border. The thick border takes the attention away from complex graphics, and doesn't realy serve a purpose, as long as you have well-marked graphics, or at least alt tags. As for the text itself, don't make it too big, but don't shrink it to ludicrous levels. Font sizes 3-4 have always worked well. Try not to overuse the <font face=X> tag. It's neat, but make sure you keep the whole page that one typeface, or it becomes confusing and haphazard. If you want something different, use the bold or italics tags, that's what they're there for. And if you're going to use the <tt> tag for that cool typewriter effect, make sure you use it right. Don't increase the size at all for anything (for that matter, shrink it some). If you want a header, just make the text bold. And like I said before, if you're going to use a different style of text like that, use it for the whole page. Whitespace, right angles, and organization, those are the keys. Use them wisely, and it's hard to go wrong. |
Neat. Making a Good Page This is Madness! A Fable Testing... Everyone Should Be Able To See Your Page -- Well Web Page Makeovers: The Rules of Web Design Netscape Vs. Microsoft and the Great Tag Debate A Real Retro Web Page Fonts and the Future of Web Design Simplicity: How Not To Fall Off the Web Page Learning Curve Here you will find informative articles written by our staff here to help you in constructing your site. All articles come with an e-mail link if you have any questions. Enjoy!
|
||||||||
|
Writer: | ||||||||||