Page Layout Tips
Organize Your Site Logically
There is nothing more useless than a site that is not organized. When the users can't find what they need they move on to another site.
- Make your site functional
- Use a simple well-designed interface
- Don’t allow the user to become lost in a maze of pages
- Provide a quick way to return to the Home Page
- Always make a link to the Home Page available
- Keep pages small so they fit on one or two screens
- Small pages load more quickly and are easy to explore
- Many Web surfers don’t know how to scroll
- Give the user a quick way to scroll
- Have a button or arrow to move the page
- Use the outliner in your word processor to organize content
- Figure out a logical hierarchy of the information you will deliver
- Draw out a flow chart to show how the information will be linked together
Return to top of page or scroll to see more Page Layout tips.
A well-designed Web site allows users to load it quickly.
- Keep graphics small
- Reuse graphics
- Limit animations
- Don’t use files requiring plug-ins on the Home page
- Load the navigation tools on the Home page and use the same graphics on all pages. They will have downloaded and other pages will appear faster
Return to top of page or scroll to see more Page Layout tips.
Web Site Background Colors
- Colors are perceived differently depending on the background color
- Look at the two box/circle images side by side, notice how different the green color appears on the circle depending on the background color. It appears more yellow when placed on a cyan background and bluer when surrounded by yellow.
- Look at the blue text on the red box. Notice how the colors on the word contrast and vibrate. Colors that are opposite each other on the color wheel are called complements and they will vibrate when placed next to one another making it difficult to read text in these colors. It is better to choose a pale background color, such as a tint of yellow, with a strong color (black) used for the text.
- Black text on a yellow background will give the best contrast. Avoid screaming fluorescent or neon yellows please! Use a solid background color with graphics on it for best legibility Subtle textures also make for interesting backgrounds if the texture is not too dominant Tile a small graphic as a texture but not too small or it will take longer to tile Remember! Web pages with a black background and white text print out as a solid black page!Black is the strongest color
Return to top of page or scroll to see more Page Layout tips.
.HTML Limitations
- Lack of precision
- There’s
no guarantee those objects will display the way
you’ve placed them. The objects could appear
almost anywhere on the page in any order based
on:
* Browser used
* Size of the display window
* How the user has set various browser options
- Create
and edit all the Web pages with the same HTML
editor
* Each application adds comments and tags in a slightly different way and may not recognize another program’s elements.
- Test your pages on several Browsers and display resolutions
Return to top of page or scroll to see more Page Layout tips.
Frames
Frames are used quite often for Web sites. Before you use frames to overcome the limitations of HTML read the following list of frame limitations.
- Take longer to download
- Wastes valuable browser space
- Shells you to other Web sites
- Bookmarks don’t work consistently
- Many older browsers do not support frames
- The BACK button doesn’t always work
- Printing problems
- Search engines have trouble with navigation in their index
- Users prefer frame-free designs
- Inline Frames in HTML 4.0 Frame is subordinate to the main page
- User can bookmark the main page and navigate as usual
- Mainstream browsers still do not implement HTML 4.0
Return to top of page or scroll to see more Page Layout tips.
Tables
Tables are another good way to get around HTML limitations.
Tables Advantages
- Allows layout of information in a grid format
- Allows layout of information in a controlled view
- Nest tables in tables D
- ynamic sizing of rows and columns
- Format each cell within a table independently
- Cells hold graphic or text or both
- Span columns and/or rows
- Set width of tables & cells - relative or absolute
Table Disadvantages
- Some older browsers do not support tables
- Tables were a new capability in HTML version 3.0
- Dynamic sizing of rows and columns
Table Tricks
- Divide your page into smaller tables rather that one large table Import a graphic element into a cell to force a minimum width. It will display faster The browser can display the content of a table only after it completes downloading the full table
- Use a graphic element like a divider line to force the width of a table.
- Keep your tables columns narrow for legibility.
Return to top of page or scroll to see more Page Layout tips.
Adobe Acrobat
Adobe Acrobat solves the page layout problems of HTML and adds several important features:
- Creates a Portable Document File (PDF) that is device independent
- View the file as it was created on any operating system or Browser
- Embed type: Adobe Type 1 and TrueType fonts
- Text remains searchable Include bitmap and vector images
- Link to other data types
- Include sound video and hypertext links. These may be very slow on the Web.
- Link to any URL
- User may print the PDF file and will get the original typefaces and graphics layout
- Netscape Navigator 3.0 and Internet Explorer 3.0 natively support reading PDF files on the Web
- Use the Acrobat Reader plug-in to view files on other Web browsers
- Use PDF files for password protected searchable documents such as newspaper stories or corporate literature
Return to top of page .
 |
 |
 |
 |
 |
||||
 |
 |
 |
 |
|||||