Ms P's WebSite Design - Step 4: Page Layout

Arrange pages for eye-catching display and user readability

     The difference between a webpage and a GREAT webpage is that "Oh, Wow!" reaction that catches our attention and then gives information as expeditiously as possible. A great page does not need an expensive authoring program--a great page is achieved with planning and creativity.

• Analyze the information to be displayed, decide how it will be most readable, then pick a template that best accommodates that display. A busy background image would be unsuitable behind a lot of text; don't use a dark background and light text color behind a page you expect to be printed out. As your templates were created, page layout may have been anticipated. For a word count of how much text fits into a certain area, type a nonsense paragraph (like the old typing favorite, "Now is the time...") into the template.
   
• Remember a basic rule from print: use margins and empty space for balance and symmetry. Eyes see empty space as a block, as they see a text block or image block. An eye-catching webpage uses empty space to highlight page elements and enhance readability. For example, images are more appealing if there is space around them, so add at least 2 pixels of horizontal and/or vertical space around your images.

     There are three methods to create balanced page layout: blockquote margins, tables, and frames. Each method has pros and cons; it can be advantageous to use all three to build a website. [As you become more proficient, begin to use Cascading Style Sheets (CSS) to position page elements.]

1. Blockquote margins are easy to implement, and make heavy text pages much easier to read. The human eye encompasses about 4" of text at a time, so huge blocks of text stretching from one edge of a browser window to the other are very difficult to read. Indent text and make short paragraphs--two or three sentences--to alleviate this problem. MS FrontPage and other applications have a blockquote button to indent text -- highlight the entire section of text and click, creating a nice margin on both sides of the page. The limitation of blockquotes for page layout is in placing images and aligning blocks of text.
    
2. Tables are the primary tool for page layout, especially with zero borders and spanned columns /rows. The enormous variety of possible table-based page layout cannot be described here. Play with tables. If you find an appealing table layout on another webpage, adapt it; tables are just HTML, so there are no copyright worries. Some classy designs use nested tables, such as the CFB templates. A disadvantage of tables is that navigation inside tables may not be readable by machines for the disabled, so text navigation should always be provided at the bottom of each tabled page if you know you have disabled viewers.
    
3. Frames are increasingly popular on the Web, but they remain a controversial subject among web designers. Frames are rarely advantageous for a whole website (pages under frames cannot be bookmarked by the user), however, there is a place for frame-based layout, like paging through recurring information or keeping students on your site while viewing offsite links, like homework assignments.  Frames can be tricky to do correctly, but most Webpage programs have templates to help you. Browsers for the disabled may not display frames; providing alternate non-framed pages increases the amount of work, but may be necessary if your users need such adjustments.

     Page layout is where Webauthors display the most ingenuity and creativity, but keep in mind consistency of identity and navigation. Page layout should not confuse viewers, but rather help them get the information they need. The more easily they can do that, the more likely they'll use your website again and again.