Lesson 02

Lesson 02

Planning and Page Layout Methods

The main reason people visit Webpages is because they are interested in specific content that is put into these pages. Although page design and layout are important, people mostly want to hear what you have to say. The most important consideration when constructing a Website is planning. I like to remember the 6 P's. Prior Planning Prevents Piss Poor Performance. Nothing could be further from the truth when it comes to Web Design.

Before creating your first ".html" file, a skilled Web Developer will have already developed a flowchart, and will have already scribbled out an attack method. Write all your pages and proofread your work before you decide to start actually writing the HTML code to prepare your golden prose for cyberspace.

Here are some important planning considerations when developing a Website:

1.Who will you be promoting it to?

2.What's the purpose of your Website?

3.Why is your Website unique?

4.Where and what will go on each page?

Also, make sure each page is a self contained unit, and always create a way back to your home page from every page on your Website. A Visitor will not necessarily stumble onto your front page.

You'll learn the technical part of this in future lessons, now I'm just belaboring you with a little theory.

Make sure each page on your site is uniform. In the Reprints Galore CD, I give away a template you can export to a floppy and upload to your server so you can do just that, keep all your pages uniform. All you will know is the HTML code to insert within the template and I teach you just that in this tutorial. you will know everything you need to know by the time your finished reading these lessons.

Making a Flowchart:

This is very simple. Just draw a square representing your home page (sometimes called main page or index page) and a series of rectangles representing the other pages in that directory that link from the home page. If your creating multiple directories (subfolders within the main folder), simply draw squares to represent each page in that directory and rectangles to represent the other pages in those directories respectively.

When arranging graphical layout, make sure it is in a form that is aesthetically pleasing. Here's a super resource called Web Page Design for Designers. It assumes you know HTML, which you will after these lessons, but it's a place you can refer to if you need any Page Layout guidance in the future. Here's their Website:

http://www.wpdfd.com/

Here's another Website that teaches good design by critisizing other people's sites and telling you what not to do.

http://www.webpagesthatsuck.com

There are currently four main Navigational structures on the Internet. Let me explore all four and give the pro's and con's of each.

1.Guided Structure - This method takes the visitor through each sequential page, one after another. This is a good structure for Photo Galleries, Online Tutorials, Long Sales Letters and offering a series of Free Reports from your Website. For Photo Galleries if you want to get fancy, you can even insert special code to make each page "automatically refresh" to the next page every so many seconds.

2. Cued Structure - From a standpoint of ease of navigation, this method is the absolute best method for browsing a Webpage. I'm very comfortable surfing sites with this structure. Every page on a Web Site with a cued navigational structure offers links to every other page on that Web Site. Let me give you an example. If you had a Web Site with three pages, your home page (index page), a products page and an order page, you would have the following Hypertext Links on all three pages that would look something like this:

index || products || order

3.Floating Structure - Although the floating structure is the most commonly used navigational structure currently used on the Web, it's the hardest method for users to navigate through, and I wouldn't recommend it. The Home Page acts as a main menu for the Website. The Home Page usually has links to every other page on the Website. The problem you run into is when you click a link to another page, you will no longer have links to all of the pages on the site. You must return to the home page to get access to all the links. I wouldn't recommend this method, as you might lose visitors and visitors can mean business.

4.Frames - Frames actually break up the Webpage into separate, independent entities. Some people for example would put their links in a left frame, their logo on a top frame, and their main page content in the "main frame" or large frame. I have devoted a chapter to frames. Many people don't like frames, but if you design them right, they have their purpose.

My recommendation would be to used a combination of the cued and guided structures when designing a webpage. I'm neutral when it comes to frames. Here's a site that really looks good in frames:

http://www.superlative.com

Assignment -

1.Go to a search engine like http://www.infoseek.com or http://www.excite.com and do a search for "page layout techniques" or "webpage design methods" or "page layout tutorials" or "HTML Tutorials" and go to http://www.free-ed.net and browse their HTML Tutorials. They have some nice ones!

2.Make a simple flowchart in box form and determine a general layout for your future website. Draft at least three pages (non HTML) to prepare for publishing on the Web. Make your Website at least three pages.

Concept Check -

1.What are the best navigational structures for the WWW?

See ya in Lesson 03!