Laying It Out

Objective

To create a simple initial site that sells or pre-sells your product offers.

You can be as creative as you like in your page and site design - and there are an infinite number of options open to you.

OR

If you want to get up and running as quickly as possible with something that has been thought out and you know will "work", you can use the demo site - "Out 'n' About" that I have created for you.

This section explains how the site is made up, the thinking behind the pages and structure - and what you need to do to build a site based on this idea.

Creating HTML

Web pages are created in "HTML" - text files containing your words + the special instructions ("tags") that the visitors browser how to lay out and display the content.

To create and edit pages, you have two main options:

YSIWYG (Wizzywig) Editors

Use a WYSIWYG (What You See Is What You Get) editor - where you lay out the pages like in a word-processor or DeskTop Publishing package and it creates the HTML for you. Recent versions of browsers like Internet Explorer and Netscape Navigator have a basic WYSIWYG editor built into them (look for "edit" options on menus or toolbars) or there are commercial packages ranging from few to many dollars. Take a look at the options available from Amazon and Practical Technology.

Text Editors

Or - you can create and edit the HTML by hand in a text editor. You can't normally use your standard word-processor for this, as the files have to be in a very basic text format with none of the formatting that most word-processors insert. You can use something as basic as NotePad or WordPad (that come free with Windows) for smaller pages, or download a more specialised text editor.

WYSI NOT WYG

No matter how you create your pages, always remember that you do NOT have complete control over how they display. Every browser will treat your HTML differently, it will look different on PCs and Macs, and it will look different from computer to computer depending on the fonts installed, user preferences, and a dozen other things.

So don't waste loads of time fine-tuning your page layout. This is NOT DeskTop Publishing. Stick with a robust, basic layout that will be clear and legible on as many desktops as possible.

Structure

Our initial structure is very "flat" - all the files are in one folder (so they can all go in the project_name/www folder I advised under "Organisation").

This makes referring to files and graphics straightforward - and allows the site to be duplicated and/or moved much more easily.

The first thing to decide is how your site is going to be divided up - into subject areas or "departments". This will decide the navigation options for your main menu (down the left margin on the demo site).

There are some that all sites should have - a link to the home page, and a link that provides contact/background details for example. Initially, you might only add one or two others - you can add more later.

Design

As with structure - simple is best at first. Quicker to get up and running, easier to maintain. You will undoubtedly want to change many things soon anyway, so don't waste a lot of time getting it "just right" to start with.

Choose one or two colors that will set the look of the site, and a specification (font, size, colors) for the type that will be on your pages.

If you are going to set up a Vstore on your site, I suggest you start by doing that first as there are a limited number of layouts to choose from. You can then use elements of the Vstore design to make sure the rest of the site has the same "look and feel".

Familiarity and consistency make visitors feel more comfortable, and therefore more likely to buy. Challenging design, visual excitement and organisational anarchy all have their place - but it's not in e-commerce!

Newbie Tip (PC)

If you hold down the ALT key and press the PRNT SCRN key, a graphic image of whatever is on your monitor will be copied to the Windows clipboard. If you start a new image in your paint program, you can paste (from an edit menu or CTRL+V on the keyboard) the image from the clipboard.

This can be very useful in identifying colors or themes to make your site match up with things like your Vstore and your community areas.

Words vs Graphics

Have you looked at Make Your Words Sell! yet? - or followed the free NetWriting course (remember - just send a blank email to twmspracticalselling@sitesell.net) ?

If so, you know what will make the difference between your site selling and not - the right WORDS.

When you want to GRAB attention, STIMULATE interest, AROUSE desire, and TRIGGER action, words are your most powerful weapon - make sure you know how to use that weapon and think carefully about all the words on your site.

That doesn't mean you should have no graphics on your pages - graphics can add to the visual appeal and identity of a site, but only if they are carefully chosen.

There are many sources of free clip art around - but I'll pass on a time saving tip from bitter experience. I wasted ages going round and round in circles following links to "free" graphics sites, only to find that each link led to a list of other links, that led to a top 10 that led to a list - and there never seem to be any free graphics at the end of it!
(Every one of those pages had quite a few ads running on them of course ....)

One place that I know does provide a range of free graphics - as well as paid access to a much larger selection is Art Today.

But no matter where you get your graphics from - make each image fight for its place on your site. Choose the graphic that does the job, not just because it looks good. Bear in mind especially that each graphic adds to the time it takes for your page to appear - and surfers have short attention spans.