planning-and-preparation

Planning & Preparation

Making a plan can save you an INCREDIBLE amount of time. Learn a couple of key steps to save yourself a bunch of time.

Instructions

Before you build your website, create a Storyboard!

Video Demonstration ( skip the reading, just watch and learn! )

http://youtu.be/KeTZTkCCBtA

“Storyboarding” is a process of organizing information into a visual representation. If we were working in a marketing or design firm, we’d create some nice little sketches of our web pages that would give some idea of the layout for each page, the content, page names and how they all link together as in these
examples. For our purposes, we’ve already created the layouts so no need for sketching and drawing.. all you’ll need to is write or type. Our “Storyboard” will be our written ‘guideline’ used for creating the pages in our web site.

The “storyboard.htm” page:

We’ve included a blank ( storyboard.htm ) page in your template.

The __storyboard.htm page includes 4 columns, and 10 rows. You can add more rows if you need to.

Here’s an explanation of what each column is for.

Document Name: this is where you’ll type the document or file name for your web pages. An example would be “index.htm”. This is a document or file name.

The document name you choose is VERY important as it affects the SEO of your website. There are 4 critical elements to naming a web page:

  1. always use lower case
  2. number or letters only
  3. connect multiple words / numbers with a hyphen of underscore
  4. be short AND descriptive

Here’s an example:

Anyone searching for information about Frazoo golf members will have a better chance of finding this page, because the search terms used in the search, are also part of the document name.

Page Name: When thinking of a ‘page name’ keep in mind this is what we’ll also be using for menu buttons. Pick a short one or two word name that gets the information across quickly. With navigation less is more. People don’t read, they scan. Using multiple words in your menu button can often back fire. Stick to one or two words if you can.

Page Title: The page title will be used for the <meta title> tag, which is the single most important meta tag for Search Engine Optimization.Here’s some info on how to create effective Meta Tags

You can use as many or as few words as you like for your meta tag, however the more words you use, the less impact they will have to search engines. Try to use as few words as possible to describe to search engines what this web page is about. In this example, using just 3 words will have a much higher impact than dozens of variations

<title>Frazoo Golf Members</title>

Page Layout: We’ll use this column to make note of the page layout from which we’ll be ‘copying’ or creating our new pages from. You can create a new page, using any of the existing pages. For example, you can make as many copies of the ‘catalog’ page as you like, and just change it up… it doesn’t need to be a catalog page, but you can use the layout for other things.

So that’s an explanation of what the columns in your ‘storyboard’ page are for.

Creating your ‘storyboard’.

First thing we need to do is create a list of pages we want for our website.

There are three things to consider.

  1. Which of the pages that came with the template package are we going to use:
    • as it comes in the template – or -
    • rename or repurpose
  2. Which of the pages are we going to delete.
  3. What new pages do we need to create.

Working with a storyboard or not, at some point you will need to write out what pages you want in your website. As the template includes some pre-designed pages we’ve already cut out some of the work you’d need to do anyways. Most folks figure this out by visiting their competitors websites, or by visiting similar websites, or just by brainstorming. You’ll probably be adding more pages as your site grows anyways, so just start with a list of pages you want in your website for ‘launch’ day.Here’s an example of how to create a storyboard.

Grab a piece of paper ( yes, paper, it still exists ), brainstorm, research or just spend a few minutes thinking about what pages you want in your website, and write them down. The example website we’ll be building is for a group of golfers named Frazoo. In thinking about what pages to include in the Frazoo website, I could ask the members what they want to see, visit similar websites, or just use my own imagination.. here’s what I started with:

  • home page
  • a contact frazoo admin page
  • a page with pictures of the team members
  • a page with a schedule of golf games and tee off times
  • a page with tournament results
  • a page for upcoming tournaments, dates and rules

Now I’ve created a short list of pages that I think I want for my Frazoo website, I can start to compare my list to the pages already provided in the template package.

The template package contains many pre-designed pages, so lets figure out which of the pages in the template we’re going to keep ( and rename for better SEO ) and what pages we’ll delete.

I want to preview each of my pages and first figure out if I want to keep this page for what it was intended ( catalog.htm to sell products, about.htm for information about the people, faqs.htm for questions ), or can it be used for something else ( check your list ). If no to both, you might as well just delete it!

Start by previewing each of the pages in the template, in your web browser.

Ask yourself these 2 questions when previewing your pages:

  • could I use this page for what it’s intended for?
  • could I use this page for something else?

If no to both questions, delete the page.

You can always copy it back in, from your ‘backup’.

By now you should have a rough list of pages for your site written down on a piece of paper, and you should have previewed each of the pages included in the template package.

Now we start to fill in the ‘storyboard.htm’ columns.

Document name: type the names of the pages you want in your site.

Start with the pre-designed pages, type the document names of the pages you plan on keeping as they are. We’ll tweak the document names a bit later on, just type the names of the pages as they are now

Now type the names from your written list, you can tweak this later on for better SEO, for now, just a page name that has meaning, and follows these rules:

  1. always use lower case
  2. number or letters only
  3. connect multiple words / numbers with a hyphen of underscore
  4. be short AND descriptive

IMPORTANT NOTE: You much keep your ‘index.htm’ page, and DO NOT rename it. This is your ‘home’ page, or landing page. When visitors go to your site via the web address ( www.i3dthemes.com ) for example, they are actually going to (www.i3dthemes.com/index.htm ) .. the server will always server the ‘index’ page when just the URL is given.

Now you have a rough list of pages you want in your site, we’ll need to add some polish and details.

Page Name: This is what you’ll be using for your menu button names, that link to your web pages. Keep the names short and sweet. You want to make sure they fit, and as most people don’t really ‘read’ they ‘scan’ the more words you use, the more people you’ll loose.

Here’s an example:

Page Title: Here’s where we need to think a bit, as this information needs to be short and sweet as well, but we are also trying to match the words in the meta title to what we think most of our visitors will type into a search engine when looking for this web page. This is also what shows up in the web browsers ‘tab’ .. so too many words, most folks won’t even see them.

Example:

You’ll see in the example, that I’ve include the word ‘Frazoo’ in all the page titles. This is because someone looking for information via search will most likely include the word Frazoo in their search query. It’s also a good idea to include the name of your city, state or province if think people will be looking for you locally.

Layout: Now we determine which ‘layouts’ you want to use for your new pages. To create a new page, we just make a copy or duplicate of an existing page. By this step, you’ve already previewed each of your pages, and asked yourself if the page you previewed was one you wanted to keep, use for something else, or delete. This is the ‘use for something else’ part of the equation.

You only need to do this for any ‘new’ pages you’ll be creating.

In the layouts column, type the name of the page that you’ll be using to create your new pages from. Although the template includes generic 1, 2, 3 column type of layouts, you may find one of the pre-designed pages will work better.

Here we’ve used some of the ‘generic’ layout pages as well as the ‘about.htm’ page, which we’ll create a copy of and name the copy ( upcoming-tournements.htm ) .. because the layout of the about.htm page will suit our purposes better than any of the generic 1,2 or 3 column layouts.

Great! Now you’ve done completed most of the planning, and most of the leg work! If you haven’t moved from the computer since the introduction, we’ve allotted a short 2 minute break for you. Take it now.

Now for a short bit of insight on ‘why’ we go through this process or exercise when we could easily figure this out as we just create new pages. There’s a few of reasons:

  1. You can’t beat planning ahead vs going at it on the fly, at least not consistently.
  2. With all your information typed onto a ‘storyboard.htm’ page, you can quickly ‘copy and paste’ information as you build your pages.. it’ll take WAY less time now that you’re organized.
  3. When typing information such as a document name, or Meta Title, into a web page your web editor will ‘spell check’ for you! When typing into the meta tag text field in the editor, or when typing a document name in the Folder List you must rely upon your ‘fingrs’ to Spel Chek.

“Type-O’s” account for over 50% of the cusomer support issues we encouter.

Next –> Step3: Creating pages

Before you build your website, create a Storyboard!

Video Demonstration ( skip the reading, just watch and learn! )

http://youtu.be/KeTZTkCCBtA
“Storyboarding” is a process of organizing information into a visual representation. If we were working in a marketing or design firm, we’d create some nice little sketches of our web pages that would give some idea of the layout for each page, the content, page names and how they all link together as in theseexamples. For our purposes, we’ve already created the layouts so no need for sketching and drawing.. all you’ll need to is write or type. Our “Storyboard” will be our written ‘guideline’ used for creating the pages in our web site.

The “storyboard.htm” page:

We’ve included a blank ( storyboard.htm ) page in your template.

The __storyboard.htm page includes 4 columns, and 10 rows. You can add more rows if you need to.

Here’s an explanation of what each column is for.

Document Name: this is where you’ll type the document or file name for your web pages. An example would be “index.htm”. This is a document or file name.

The document name you choose is VERY important as it affects the SEO of your website. There are 4 critical elements to naming a web page:

  1. always use lower case
  2. number or letters only
  3. connect multiple words / numbers with a hyphen of underscore
  4. be short AND descriptive

Here’s an example:

Anyone searching for information about Frazoo golf members will have a better chance of finding this page, because the search terms used in the search, are also part of the document name.

Page Name: When thinking of a ‘page name’ keep in mind this is what we’ll also be using for menu buttons. Pick a short one or two word name that gets the information across quickly. With navigation less is more. People don’t read, they scan. Using multiple words in your menu button can often back fire. Stick to one or two words if you can.

Page Title: The page title will be used for the <meta title> tag, which is the single most important meta tag for Search Engine Optimization.Here’s some info on how to create effective Meta Tags

You can use as many or as few words as you like for your meta tag, however the more words you use, the less impact they will have to search engines. Try to use as few words as possible to describe to search engines what this web page is about. In this example, using just 3 words will have a much higher impact than dozens of variations

<title>Frazoo Golf Members</title>

Page Layout: We’ll use this column to make note of the page layout from which we’ll be ‘copying’ or creating our new pages from. You can create a new page, using any of the existing pages. For example, you can make as many copies of the ‘catalog’ page as you like, and just change it up… it doesn’t need to be a catalog page, but you can use the layout for other things.

So that’s an explanation of what the columns in your ‘storyboard’ page are for.

Creating your ‘storyboard’.

First thing we need to do is create a list of pages we want for our website.

There are three things to consider.

  1. Which of the pages that came with the template package are we going to use:
    • as it comes in the template – or -
    • rename or repurpose
  2. Which of the pages are we going to delete.
  3. What new pages do we need to create.

Working with a storyboard or not, at some point you will need to write out what pages you want in your website. As the template includes some pre-designed pages we’ve already cut out some of the work you’d need to do anyways. Most folks figure this out by visiting their competitors websites, or by visiting similar websites, or just by brainstorming. You’ll probably be adding more pages as your site grows anyways, so just start with a list of pages you want in your website for ‘launch’ day.Here’s an example of how to create a storyboard.

Grab a piece of paper ( yes, paper, it still exists ), brainstorm, research or just spend a few minutes thinking about what pages you want in your website, and write them down. The example website we’ll be building is for a group of golfers named Frazoo. In thinking about what pages to include in the Frazoo website, I could ask the members what they want to see, visit similar websites, or just use my own imagination.. here’s what I started with:

  • home page
  • a contact frazoo admin page
  • a page with pictures of the team members
  • a page with a schedule of golf games and tee off times
  • a page with tournament results
  • a page for upcoming tournaments, dates and rules

Now I’ve created a short list of pages that I think I want for my Frazoo website, I can start to compare my list to the pages already provided in the template package.

The template package contains many pre-designed pages, so lets figure out which of the pages in the template we’re going to keep ( and rename for better SEO ) and what pages we’ll delete.

I want to preview each of my pages and first figure out if I want to keep this page for what it was intended ( catalog.htm to sell products, about.htm for information about the people, faqs.htm for questions ), or can it be used for something else ( check your list ). If no to both, you might as well just delete it!

Start by previewing each of the pages in the template, in your web browser.

Ask yourself these 2 questions when previewing your pages:

  • could I use this page for what it’s intended for?
  • could I use this page for something else?

If no to both questions, delete the page.

You can always copy it back in, from your ‘backup’.

By now you should have a rough list of pages for your site written down on a piece of paper, and you should have previewed each of the pages included in the template package.

Now we start to fill in the ‘storyboard.htm’ columns.

Document name: type the names of the pages you want in your site.

Start with the pre-designed pages, type the document names of the pages you plan on keeping as they are. We’ll tweak the document names a bit later on, just type the names of the pages as they are now

Now type the names from your written list, you can tweak this later on for better SEO, for now, just a page name that has meaning, and follows these rules:

  1. always use lower case
  2. number or letters only
  3. connect multiple words / numbers with a hyphen of underscore
  4. be short AND descriptive

IMPORTANT NOTE: You much keep your ‘index.htm’ page, and DO NOT rename it. This is your ‘home’ page, or landing page. When visitors go to your site via the web address ( www.i3dthemes.com ) for example, they are actually going to (
www.i3dthemes.com/index.htm ) .. the server will always server the ‘index’ page when just the URL is given.

Now you have a rough list of pages you want in your site, we’ll need to add some polish and details.

Page Name: This is what you’ll be using for your menu button names, that link to your web pages. Keep the names short and sweet. You want to make sure they fit, and as most people don’t really ‘read’ they ‘scan’ the more words you use, the more people you’ll loose.

Here’s an example:

Page Title: Here’s where we need to think a bit, as this information needs to be short and sweet as well, but we are also trying to match the words in the meta title to what we think most of our visitors will type into a search engine when looking for this web page. This is also what shows up in the web browsers ‘tab’ .. so too many words, most folks won’t even see them.

Example:

You’ll see in the example, that I’ve include the word ‘Frazoo’ in all the page titles. This is because someone looking for information via search will most likely include the word Frazoo in their search query. It’s also a good idea to include the name of your city, state or province if think people will be looking for you locally.

Layout: Now we determine which ‘layouts’ you want to use for your new pages. To create a new page, we just make a copy or duplicate of an existing page. By this step, you’ve already previewed each of your pages, and asked yourself if the page you previewed was one you wanted to keep, use for something else, or delete. This is the ‘use for something else’ part of the equation.

You only need to do this for any ‘new’ pages you’ll be creating.

In the layouts column, type the name of the page that you’ll be using to create your new pages from. Although the template includes generic 1, 2, 3 column type of layouts, you may find one of the pre-designed pages will work better.

Here we’ve used some of the ‘generic’ layout pages as well as the ‘about.htm’ page, which we’ll create a copy of and name the copy ( upcoming-tournements.htm ) .. because the layout of the about.htm page will suit our purposes better than any of the generic 1,2 or 3 column layouts.

Great! Now you’ve done completed most of the planning, and most of the leg work! If you haven’t moved from the computer since the introduction, we’ve allotted a short 2 minute break for you. Take it now.

Now for a short bit of insight on ‘why’ we go through this process or exercise when we could easily figure this out as we just create new pages. There’s a few of reasons:

  1. You can’t beat planning ahead vs going at it on the fly, at least not consistently.
  2. With all your information typed onto a ‘storyboard.htm’ page, you can quickly ‘copy and paste’ information as you build your pages.. it’ll take WAY less time now that you’re organized.
  3. When typing information such as a document name, or Meta Title, into a web page your web editor will ‘spell check’ for you! When typing into the meta tag text field in the editor, or when typing a document name in the Folder List you must rely upon your ‘fingrs’ to Spel Chek.

“Type-O’s” account for over 50% of the cusomer support issues we encouter.

Next –> Step3: Creating pages