Page Design
Screen Real Estate
- Web pages should be dominated by content and not navigation bars
and white space. Content should occupy greater than 50% preferably
around 80% of the page. Navigation should be kept below 20%.
- Whitespace is inevitable. If you have a choice to separate two
segments of content by a heavy line or by whitespace, it may look
better to use the whitespace.
- There is some whitespace that shows up because the page cannot adjust
itself to the window. From the server side can we "sniff out" what
browser is being used and use that information to display the page?
- Go through all the design elements and remove them one at a time.
If the design works as well without a certain design element, kill
it. Simplicity wins over complexity.
Cross Platform Design
- Design so that users have the freedom of movement from one page to
another. Include a logo on every page to provide context and
navigation (to the home page) if they have arrived at an internal
page through a search engine.
- If you have to specify fonts, make sure you give several alternatives.
Where are users coming from?
- On the web we need to accommodate a factor of 100 in screen area
between hand held computers and workstations and a factor of 1000
in bandwidth between modems and T3 connections.
- There are more users with small screens than with big screens. Why?
- WYSIWYG editors are not the best solution. You must specify pages
in terms that enable browsers to display for each individual user's
circumstances. Design an abstract user interface that is instantiated
differently for each platform.
Resolution Independent Design
- Do not use fixed pixel-width for any tables, frames, or other
design elements. Specify layouts as percentages of the available
space.
- Ensure that designs work well with both larger and smaller fonts.
- Higher the resolution, the smaller the graphic. Any text embedded
in a graphic must use relatively large font size. Best not to use
any text with the graphic.
- Provide a separate print version for long documents. Ensure that
your web page is printer friendly.
New Technology
- Use new technology with caution. Hold off for one year after the
introduction of the non-beta version.
- Provide alternative format for users who have not upgraded and
cannot use the new feature.
- It is acceptable if users with old browsers do not get all the
benefits from the new technology, but it is not acceptable if your
site breaks or looks jumbled in an old browser.
Separating Meaning and Presentation
- Original design of the Web specified the data format based on
encoding the meaning (or the semantics) of the information and not
its presentation. Use level 2 heading rather than an absolute size
for the heading.
- Presentation based design works best if you can predict the user's
hardware and software.
- Different hardware - WebTV, Personal Digital Assistants (PDAs) like
Palm Pilots, Cell Phones.
Different browsers - speech based
- Content file should have only semantic markup. Style sheets should
be linked to content. Style sheets could be different for different
hardware.
Links
- Do not use click here use key words instead.
- Use link titles to provide a short description to the link.
- Stick to standard colors for links - blue for unvisited links
and red for visited links.
- Use the same URL to refer to the same page or information.
- Select outbound links judiciously. Provide links that are
relevant.
- Have permanent URLs to incoming links.
Style Sheets
- Use linked style sheet instead of embedded styles.
- Authors can override the central style sheet rule by using
embedded style rule only when it is absolutely necessary.
- Do not use more than two fonts (possibly a third for computer code).
- Do not use absolute font size.
- Do not use the !important attribute in the style sheet. It overrides
user preference.
- If you have several style sheets make sure that the same CLASS names
refer to the same style concepts.
Frames
- Frames break the unified model of the Web. The user's view is
determined by a sequence of navigation actions rather than a
single navigation action.
- Bookmarks do not work because the bookmark does not represent
the state of the frame since the URL no longer gives the
complete specification of the information shown in the window.
- Frames do not work well with small screens.
- Many browsers cannot print framed pages appropriately.
- Search engines do not know what composites of frames to include
as navigation units in their index.
- Use inline frames if you have to use frames.
- Frames can be used as a shortcut for scrolling within a single
page.
- Frames are useful as comments to other pages.
Printing
- Generate two versions of long documents. One version optimized
for on line viewing. The other version in postscript or PDF
format for printing.
- Any file intended for printing must be able to accommodate two
formats A4 and US Letter (8.5 in x 11 in).
Credibility
- You get one chance to establish credibility.
- No heavy background.
- No animations.
- Reputation will be established through a rating system
established by a third party.
Conculsion
- Users come to a site rarely to enjoy the design. They prefer to
focus on the content.
References