Designing your site
Unlike print-based designs, which are distributed to everyone in exactly the same way, websites are seen differently by different users. Your site will be viewed by users with different computers, browsers, monitors, color capabilities, and connection speeds.
All of these factors affect the appearance of the site, altering its dimensions, colors, and typefaces, as well as the overall size of the browser window and the size and placement of elements within it.
Design differences arise from:
People use the web on just about every computer (and every operating system) ever made, including Windows, Mac, and Unix. Colors may appear differently on different platforms, and different fonts may be available. Also, platform sometimes affects font size; text often appears larger on Windows than it does on the Mac.
Users view the web through many different versions of many different web browsers, and different browsers support different design features. Inconsistent support for stylesheets is the biggest problem today; it varies even between different builds of the same browser.
Not everyone has plug-in technologies, like Flash, installed properly. So if your site uses plug-ins, not everyone will be able to see it. Because of installation problems, it's hard to estimate how many people you're excluding.
People use monitors of different sizes and resolutions, and this dictates how much space you get on their screens.
There are slight differences in color on different platforms. And older computer systems don't display the full range of colors.
Your challenge is to design a site that functions across the board. It doesn't have to look the same in every browser—it doesn't even have to look good in every browser—but it should work.
6 steps to cross-platform design:
Identify your target audience. Research the browser/platform they're most likely to use.
Choose a single browser. Design your site with it in mind.
Research the differences. What separates your target browser from the rest. Small changes can make the difference between a site that works on many browsers, and a site that works on only one.
Accept the differences. Your site will not look exactly the same in all browsers and platforms, no matter what you do.
Degrade gracefully. Your design should function and display reasonably in other browsers. To accomplish this, you can serve alternate pages for different browsers, but try to limit yourself to two: one design for the target browser and one for the other browsers.
Test! Test! Test! No matter how well you've researched the differences, you might still find problems when you test.
Where's the fold?
Designers often talk about getting links or images "above the fold." It's a strange term, really, for a flat medium, but it was borrowed from one that made sense. "Above the fold" is actually a publishing term for the top half of a newspaper's front page—above the crease that folds the newspaper in half. Everything above the fold, it's believed, is more likely to be read.
On the web, the conceptual "fold" divides everything the user sees when they first access your site—and before they have to scroll—from everything below.
The "fold" presents 2 challenges:
Figuring out where it is. The fold hits at different places for different users, depending on their browser, platform, monitor, and the number of toolbars they have showing. The biggest issue is monitor resolution, which measures how many pixels appear on the screen (a pixel is a tiny square dot of color—the smallest visual unit on the screen).
At the time of this book's writing, the most common monitor resolution is 800x600 pixels, which leaves a slightly smaller space for the actual website (after you account for the "chrome").
Fitting things above it. No matter where you decide the fold is, there isn't much room above it, and everyone will want their pet feature, link, or ad to appear "above the fold."