Writing@CSU

Writing Guides

Writing for the Web

 

Design Your Pages

After you've considered the overall look and feel of your site – including the type of navigation tools you'll provide and whether you'll use frames, popup windows, informational flags, multimedia, and Cascading Style Sheets – sketch out the designs for the most common types of pages you'll use on your site. Many sites include the following types of pages:

  • Home Page: provides the entry point for your site
  • Contact Information Page: allows your readers to get in touch with you and others associated with the site
  • About This Site Page: provides credits for the site creator(s), media providers, and writers, as well as funding and sponsorship information (if applicable)
  • Main Section Pages: provide an introduction to sections of the site
  • Content Pages: provide content related to particular sections of the site
  • Navigation Pages: display navigation tools such as site maps, tables of contents, and site indexes
  • Related Links Page: displays a list of Web sites and other Internet resources that might be of interest to your readers

Depending on your purpose and goals as a writer, as well as your readers' needs and interests, you might choose to some of these pages on your site. One of the best ways to start designing the pages on your Web site is to sketch them out on a piece of paper or in a graphics editing program, such as Adobe Photoshop or Corel PhotoPaint. For example, the following sketch was made before I designed my own home page:

Home Page Sketch

Once you've sketched out the designs for your pages, ask yourself whether they conform to your decisions about the overall look and feel of your site. If they don't, consider redefining your look and feel – or revise your pages to conform to your decisions about how the site should appear to your readers. Ask yourself whether your page designs provide access to the navigation tools you've decided to use, and whether your readers will be able to move easily among your pages using those tools.

Once you've decided that your sketches will provide a good foundation for designing your pages, decide how you'll control the layout of your pages. Depending on the complexity of your pages, you can choose from three general layout control options:

  • HTML heading tags, paragraph tags, and break tags will support fairly simple designs
  • Tables can support even the most complex designs, but will make the task of coding your pages more complex
  • Cascading Style Sheets can also support complex designs, but CSS may not be fully supported by the browsers used by your readers

Consider the following example, in which a table defines the layout of my home page:

Home Page Sketch – Tabled

In this case, a table provides a reasonable approach to controlling the layout of text and images on the home page. The majority of sites that provide relatively complex sites, in fact, use tables to control their layouts. However, as CSS becomes more widely supported, it is likely to provide a more effective approach to laying out Web pages. Using CSS, for instance, I could have specified the indents of the internal frame and the navigation footer on my home page with far less code than I used to create a table.

See Also
Links Page: Learn more about Web design on the Web Style Guidelines links page.

Coding Primer: Learn how to create tables in Creating Tables.

BackPrevious Step . . . . . . . . . . . . . . . . . . . Next Step Next

Copyright © 1993-2009 Colorado State University and/or this site's authors, developers, and contributors. Some material displayed on this site is used with permission.