Rocketface(R) Workshop - Website design for everyone. Webmaster's Tutorial, "How to Design a Website". Rocketface(R) Workshop Home




Tutorial navigation instructions

Develop Website
Main Topics
  • Develop Website
  • Website Construction
  • Webpage Construction
  • Sitemap Construction
  • Typography - Fonts
  • Typography - Style
  • Typography - Layout
  • Website Graphics
  • Web-Safe Colors
  • Website Templates
  • Writing for the Web
  • Website Assembly


  • Develop Website
    Developing the organization of your website

    Development of a website outline

    The design and development of a website should be a thoroughgoing and premeditated process. One of the most effective ways of doing this is to generate is a website outline. As you expand your website structure the many files and graphics that support your site need to be kept organized. This way whenever a change or update is necessary you will have better control of the process.

    The construction and maintenance of a website outline is imperative for the proper design and development of an efficient website. In this way you can keep track of the physical data that comprises your site. In other words, a website outline helps you keep control of the growing database of files that accumulate as you develop your site.

    As your website grows it will become more and more difficult to remember where everything is, therefore time spent on organizing and developing a website outline will make the job a whole lot easier. The following example of a website outline will give you an idea of how this can be accomplished.

    The importance of a website outline

    A website outline is just what the name implies. It is a written outline of your website content. Even though you feel as if you know every title and sentence on the website you are creating over time memory becomes hazy and mistakes can occur.

    Once a website is online it can be very difficult to remember the actual order of things. Having a website outline helps provide a mental picture of your website structure. Your website's basic layout including the sections, subsections and content pages can be seen at a glance.

    As you develop your website a diagram of it's linking network will also serve as a valuable guide when you setup your website navigation scheme. You will be able to better visualize the path that you wish your visitors to follow. A comprehensive and well thought out website outline is imperative for the serious webmaster.

    Example outline:
    Website Content

    My Homepage: Index.html
    Main page #1 Subpage A
       Detail page
       Detail page
    Subpage B
    Subpage C
    Main page #2 Subpage D
    Subpage E
        Detail page
    Subpage F
    Main page #3 Subpage G
    Subpage H
        Detail page
        Detail page
    Subpage J
        Detail page

    Keeping track of graphics and links

    It is a good idea to create a list of all your website graphics, titles, tags and links and on what pages they are located. When you decide to change any of these components, having the file names and locations will save you a lot of time.

    I realize this may seem like a lot of paperwork for something that is going to be on the internet. But l can tell you, from painful experience, that you will appreciate having written documentation and you will use it more than you can imagine as you develop your website.

    Example outline:
    Website Graphics & Links

    Webpage Title: My website
    Filename: (i.e. index.html)
    Links on page: link 1 - main page
    link 2 - subpage
    link 3 - subpage
    Graphics: image1.gif
    image2.gif
    image3.jpg
    Comments:

    Developing a website outline

    You can create a website outline in any way that is most meaningful for you. A website journal, ledger pad, or even a data spreadsheet would work great. Use whatever works best for you. Just remember to keep it simple.

    Website file organization

      1) Organization

      Keep your website organized on your hard drive just as you organize it on the internet. This simple step will save you hours of wasted effort.

      2) Root directory

      Keep files used on your index page and files used repeatedly in your root directory. But don't overload your root directory. Make use of sub folders that link to main pages in your root directory. (See: website basic layout)

      3) Subdirectories

      Create a subdirectory for each series of related pages or website sections. Keep all relevant information together in individual sub folders. This will help you and the search engines find threads to follow and provide easy access to information for your visitors.

      4) Expansion

      Plan for expansion. If you think a page on a particular theme will expand into a number of pages, create a subdirectory for it during your website construction. And populate it with relevant data on that particular subject.

      5) Directory links

      Keep files that belong on each page in the same subdirectory. Don't put files from your root directory into these folders, keep them separate and link them to the sub folders.

      6) File names

      Name your subdirectories and files in an easy to identify manner. Make good use of your keywords when naming sub folders and files. This will unite the content of your website. They should all tie together in a logical way.

    Preventing broken links

    Don't change your subdirectory or file names (and HTML page addresses) after the fact. Name and address them now in a manner that you will be able to maintain in the future, no matter how much you expand as you develop your website. This will help to prevent broken links.

    Using redirect pages

    If you do have to change an address after your website is up, then place a redirect page or link in the old location. This will help your target audience find the information they are seeking with a minimum of effort and direct new visitors to the modified address.

    Broken links and search engines

    Search engines are critical of broken links. They will downgrade your search position if they detect too many dead links on your website. So, from the beginning, as you develop your website outline and begin implementing website links, be sure to name your webpages in such a way as to insure they will not have to be renamed in the future.


    For more see:



    BACK: Website Basic Layout2 NEXT: Website Construction

    copyright© 2013
    Rocketface® Graphics
  • Analyze Website
  • Organize Website
  • Develop Website
  • Implement Website
  • Maintain Website
  • Article Archive