I'm going to take a break from the frames discussion this week--and in fact, from high-end design altogether. In honor of Independence Day in the U.S. (where I happen to live), I'm going to rebel against Microsoft/Netscape and the host of third-party plug-in developers who are pushing the limits of what is technically possible.But is it really possible to design a nice-looking, easy-to-navigate page without frames, tables or even images? Absolutely--and the millions of people out there who aren't connecting at T1 speeds will thank you for taking the trouble. Even without all the bells and whistles, we still have a few design tools at our disposal that will not increase the size of the file or the download time; namely, text styles (headers, font sizes, bold, italics, etc.), colors, and space.
Where is Low-Tech Design Most Effective?
News articles, resumés, and directory listings--in other words, pages whose most important feature is the text, and which are likely to be printed out--are particularly suited to sparse design.The key features to exploit in long articles are color and spacing. Choose a background color that is easy on the eyes and facilitates on-screen reading, and link colors that are noticeable but not obtrusive. This is easier to do when you have more than the 216 "Netscape-safe" colors to work with, but there are several "Netscape-safe" combinations that will work--and if you really can't find a background you like, use white.
In this example I used a very light yellow background, dark brown text, red-orange links, and brick red visited links. (In this way the reader can find the visited links if he scans for them, but they won't jump out and interrupt the flow of his reading--as they shouldn't, because he's already seen them.) I put a
<BLOCKQUOTE></BLOCKQUOTE>around the entire text in order to give the page some margins, and I used<STRONG></STRONG>around the section headings to visually attach them to their corresponding paragraphs. (Regular HTML headers such as<H2> and <H3>are too large and leave extra space below them.)All the techniques above could apply to online resumés as well, but I think that resumés also benefit from a little "
<PRE>treatment." In other words, put a<PRE>tag right after your<BLOCKQUOTE>, and code almost as usual: bold, font size, headers, and links will all still apply, but leave off all the<BR>and<P>tags. Use regular carriage returns instead, as a<PRE>tag makes them significant. (It also makes spaces and tabs significant, so make sure you don't have extra spaces unless you want them to show up.) Have a look at this resumé example and its source code to see how it works.I like resumes in pre-formatted text for a couple reasons: (1) a monospaced font enhances the low-tech design, giving it a "retro" feel, and (2) it gives the designer more control over margins and spacing, which facilitates both online and off-line reading. Monospaced fonts may also be easier for scanners to read (yes, I know--why print out and then scan in a resume that's already in electronic format? It doesn't sound very logical, but it happens. Headhunters and personnel departments may print out a resume and pass it on to a company or department head, who in turn scans the resume into a database so it and others may be searched for keywords.).
Here's a final example for this week: a team roster for a soccer club. The design isn't fantastic, but then it really doesn't need to be. The idea is to be able to find the team members and their contact information quickly and easily, and to keep the pages simple enough that the coach can edit and view them from his shell (i.e., text-only editor and browser) account.
Until next week...enjoy the holiday!
