Sean's Personal Code Samples And References
When you create a Web design, one of the more overlooked aspects of the design is the layout. Now, many people think about how to do a layout (CSS, tables, frames, etc.), but the basics of Web layout are often completely ignored. Space and Whitespace Use the whole space, but don't be specific in your use. In other words, use relatively sized layout sections on your Web pages, so that they expand and contract to fit the browser window. Keep screen resolution in mind. While the majority of computer users have moved away from 640x480 resolution, keep that in mind when you're designing. Having customers leave because all they can see is a logo on their monitor is not good customer service. Use color to define spaces. If you want to have a page that's a specific width, why not center it on the browser screen and make the background color of the page a different color? This will help the page appear to resize for different browsers; larger browsers will just have more background color showing, while smaller browsers will have less or none showing. Images and Graphics Align your images. One of the most common newbie layout mistakes is to slap images into a page willy-nilly without thought to layout. If you just use an img tag and then write text to follow it, you'll have the image and then one line of text to the right of it. Using the align attribute will help make your images part of the layout. Balance the graphics and text on a page. It's easy to get carried away with lots of images and animations, but they can make a page very hard to read. When you're considering your layout, remember that images are a major part of the design, not just afterthoughts. Text Width Think about text width. This is often called the "scan length", and refers to how many words are displayed on one line. Most people can comfortably read about 7 to 11 words on a line. Longer than that, and the text is hard to read, shorter than that and it's disjointed and distracting. When designing your layouts make sure that the major text area displays the text in a readable width. Centering text is inadvisable. One of the first layout techniques that a new designer learns is the center tag, and they center everything on their pages. However, centering is very difficult to do well and it's often hard to read. Graphics 1. Think small, like 10-12KB per image. Yes, depending on the source, the number of broadband users is going up. But slow pages are still really annoying, even if you're on a T1. And huge images are a primary cause of slow pages. It's easy to optimize your images. 2. Always use graphics that fit the content. Just because you have an adorable photo of your dog doesn't mean you should have it on your Web site about Web Design (sorry, Shasta...). The main exception I would make to this is for "design" images. These are photos or graphics that help make up the design of the page, and are not intended to illustrate the content. 3. Do not use images that blink or move or change or rotate or flash or do anything on your page. Or use them sparingly. There have been many studies that show that flashing graphics are distracting and annoying to people. In fact, in one focus group I watched the browsers actually physically cover up flashing graphics so that they could read the rest of the page. Layout 4. Stick with standard layouts. I've seen some pages that use 6 or 8 frames on one page. Another site used a layout where you had to scroll to the right to read everything on the page (but you never had to scroll down). These layouts are cute, and you might find them fun to build, but they will drive your readers nuts. The reason that the 3-column layout is so popular on Web sites and newspapers is because it works. You might think it's boring, but you'll keep more readers if you stick with something simple that they can understand. 5. Whitespace is more than the CSS property, it is a function of your layout. You should be aware of the whitespace on your pages and how it affects how the content is viewed. Whitespace is just as important in a Web layout as it is in a paper layout. 6. Use your graphics as elements in your layouts. Graphics can be more than just graphics when you use them as actual elements in your layouts. An extreme example is when you wrap text around an image, but any image you have on your site is a layout element and should be treated as such. Fonts 7. Serif for headlines and Sans-Serif for text. If you've taken any type of print design, this might be exactly the opposite of what you were taught. But the Web is not print. Sans-serif fonts are much easier to read on computer monitors because the screen resolution is not as high as in print. If you use serif fonts for normal text, the serifs can blur together on the screen making them hard to read. Your printer friendly page should use the opposite fonts (serif for headlines and sans-serif for text). 8. Limit the number of different fonts. One of the best ways to make your Web site look amateurish is to change the font over and over. Sure, it's possible to do, but limiting your page and site to 2 or possibly 3 standard font families is easier to read and looks more professional. 9. Use standard font families. Yes, you can choose to use "Rockwood LT Standard" as your font on your page, but the chances that one of your readers will have that font as well is pretty low. Sticking with fonts like Verdana, Geneva, Arial, and Helvetica may seem boring, but your pages will look better and the designs look correct on more browsers. Advertising 10. Don't be greedy. If you have any control over the number of ads on your site, be aware that your readers are not coming to read the ads, they are coming for the content. If the ads overwhelm the page content, many readers won't stick around long enough to read your purple prose. Yes, it's important to make money from your Web site, but if your ads drive people away, you'll ultimately lose money. 11. Treat ads as you would any other image. Keep them small, avoid blinking/flashing, and keep them relevant. Just because you can have an ad on your site, doesn't mean that you should. If the content is relevant to your readers, they're more likely to click on the ad. Remember Your Readers 12. Test your pages in multiple browsers. Writing Web pages that work only on the most modern browser is both stupid and annoying. Unless you are writing a Web site for a corporate intranet or a kiosk where the browser version is completely fixed, you'll have problems with people not being able to view your pages. 13. The same is true for operating systems. You can't assume that just because your page works in IE5.0 for Windows it will work in IE5.0 for Macintosh. 14. Write content that they want. Unless you're writing a site purely for yourself (and if you are, why is it posted to the Web?), make sure that your content covers topics that your readers want to read.
Sean Marcellus
There are 10 kinds of people e in this world, those who understand binary and those who don’t.