For more info call 1-408-733-9479 or email


Our Strategic Web Optimization™ Process

Click the Links Below for Customer Success Stories

Step 8 – 1. Web Page Layout and Interactive Design Spec.


a. Terminology and Interactive Design Overview

b. There are 2 hand- marked-up “current pages” with numbers that relate to this “Terms Key”:

i. “Header” and “Banner” are used interchangeably
  1. Banner / Header and Footer of each page
    a. Make the header slightly larger to accommodate the phone number /
email link

ii. NEW “phone number / email link” GOES IN BOTH header and footer copy

      1. In the header it goes under the logo and in the footer on the bottom left as in
the Kabeelo design

a. The copy for the header/footer phone number / email link is:
i. “For more info call 1-408-733-9479 or email
b. Unlike Kabeelo, the email link in both the header and footer will not activate the visitor’s email program write screen i. Instead, and in order to track emails from the Website more accurately, the email link button the email link button will go to
an on-site special page that can be monitored by Awstats and Google Analytics. See also #4 below re/ email.
c. This will be a standard Interactive design feature for all Web Designs.
i. Our policy is that people should be able to respond from anywhere with minimum clicks or scrolling.

iii. NEW 3-row “Main NavBar” = Top NavBar used interchangeably

1. Height and font size
a. Use fonts the same size as Kabeelo. [Now, they are too small]
2. The site will have multiple Main NavBars in the style of Kabeelo.

iv. Expanding to 14 buttons from 9

v. There are 11 NEW “Main NavBar Landing Pages” and many new Sample Pages

1. There are 11 NEW Home pages for “Services” specified with URLs below.
2. Each of the 11 Services on the Main NavBar links [Buttons #2 through #12]
links to a “Service Home page” [e.g. “Web Design Home”]
a. Each Service is described in Page Copy for that Service’s Page
i. Page Copy for Sample Pages appears above that particular
Service’s Page Image on that Services Home page
b. When Instructions are mixed in with Page Copy –
i. The instructions will be in red
c. Heads and Subheads
i. These appear as specified in the copy.
d. Spacing
i. There is one space between copy
e. When Links appear in page copy
i. The links will be in Blue
f. Thus when pasting a cutting copy into HTML on pages all that needs
to be done is to eliminate the red instructions and you will be left with
the copy and the links – which of course will need to be activated.
3. With Services, Customers and Contact this makes #14 Main NavBar pages
4. The first button on the 11 Services Buttons is always the Service Home Page.
[e.g. “Web Design Home” is the first link in the drop down menu for the “Web
Design” button; “Campaigns Home” is first for Campaigns etc.
a. The style is that of [Check it out]
5. The “Services Home pages” are designed to be “Landing Pages” for Google
AdWords campaigns and also for “back linking” we will do

vi. NEW “Drop down menu links” are the links that drop down from the “Button”

1. NEW “drop down menu links”
a. These are the indented items under the button name
b. They should be in the style of [Check it out]
2. The “drop down menu links” should appear when the “cursor hovers” over a
Top NavBar buttons.
3. “Drop Down Menu Links” appear in “Publications List for Joey” and in #6
4. Style of the “drop down menu links” is =
a. In other words same font size as button copy
5. Specs in table below for the “drop down menu links”

vii. “Left column list of links” [or just “Links List”] use the same terms as the “drop down

menu links” [e.g. SAG I is a link in Content Offers drop down menu and is also a Left
Column Link. [i.e., The “Left Column List of links” = the “drop down menu link”
Page 2 of 45
1. This allows site visitors to have multiple ways to go to a Page describing a
sample of the service.
2. This allows visitors to more easily navigate from a Services Home page.

viii. “Left Column Images Links”

1. All Image Links are the first page of a document
2. The Image Links sequence is:
a. the same from top to bottom as the “List of Links”
b. The same as the Pubs List.

ix. Top Image Link

1. The Top Link is abbreviated “T”
2. The Links List appears below the Top Image on the left NavBar
3. Other Image Links will be under the “Links List” on the left NavBar
a. Other Image Links will continue from left to right across the page
under the copy and images [if any] on a Services page.
b. Other Image Links will not appear on Sample pages
i. As in the current design

x. “On-page Links”

1. Some pages [like Services Home, Web Design Home, Campaigns Home have
On-page Links which are links that do not appear in the Drop Down Menu or
Image Links

xi. “NEW Graphics”

1. There is one NEW Graphic used three ways [See Comp] in the Services, Web
Design and Campaigns Home pages.
a. Subduing or ghosting is the graphic arts treatment to make an object
just barely noticeable or to appear as a ghost.
i. On the Services page neither ring in the graphic is ghosted
ii. On the Web Design page the bottom ring is ghosted
iii. On the Campaigns page the top ring is ghosted.
iv. So there is one NEW graphic and +2 easy to create versions
b. The style is in the style of the file on the CD titled MSC Title Page
c. Strategic Website Optimization Process ]The Top Ring]
d. Campaign Optimization [The Bottom Ring]
e. The Integrated Campaign Marketing Optimization Process [Both

xii. “Sample Pages”

1. “Samples” [of Services [i.e. the documents contracted for in the service or the
Web designs etc] are downloadable or linked from the Drown Down Menus
OR from the “Links List” on the “Services Home Page” or the “Image Link” on
2. There are three ways to get to a sample
a. The Drop Down Menu
b. The List of Links
c. The Image Link
3. Samples are also accessible by clicking the “Image Link”
4. 56 NEW Sample pages as specified with URLs, copy and images in #6
a. Combined with 12 existing Sample Pages this makes a total of 68

xiii. “Sample Page Images” or simply “Page Images””

1. As in the current design -- on each page of a Sample there is a “Page Image”
above “Page Copy”

xiv. Left Column “Page Image”

1. The “Page Image” is the same image as Left Column Image Link
2. Left NavBar Top to Bottom Stackup AND is also in the footer

xv. The Left Column NavBar appears on Services pages ONLY

1. The Left Column NavBar “Stackup” of elements from top to bottom is:
a. Captions will appear above the top left image [T] on each Services
i. Caption copy is specified below for each services page
ii. Caption will be in red as in the current design
Page 3 of 45
b. The red caption is followed by the copy: “Click Image to Download”
c. BELOW the “top image link” [as with the current design], will be TEXT
i. Text Links will like to the Sample Pages for each Service.
ii. Sample pages will be a short description of the Sample
iii. Sample pages will have links to pdf files of the sample
descending [reverse chronological] order as specified below that tie to
the Pubs List
2. When clicked either the LIST OF LINKS or IMAGE LINKS or DROP DOWN
MENU links will activate a download of the sample report or the featured item.
a. In other words there will be three ways to get to a sample and the
sample page provides [via drop down menu] a one stop place to get
b. This is in the style of windows where there are multiple ways to get to
the same file or folder.
3. All IMAGE LINKS are specified on the Document Titled Pubs List for Joey
4. IMAGE LINKS are always the FIRST PAGE of the document being linked to.

xvi. “Page Copy”

1. For Sample pages
a. Is edited in hard copy markups for Existing pages
b. Is specified in item #6 below for NEW Sample pages
2. For NEW Services pages
a. Is specified in item #6 below for NEW Sample pages
3. For the Customers and Contact pages
a. Is edited in hard copy markups

xvii. Link Copy Sample Page Downloads

1. All samples will have a link to a permanent pdf file or pdf of a home page using
this copy To view a pdf file of this report please click here
a. There are seven Sample Pages which will not have to be changed
i. SAG I
iii. Internet Storage Architecture Guide
iv. Software Development Architecture Guide
v. 9900 Architecture Guide
vi. 9900 V Architecture Guide
vii. Thunder 9500 V Architecture Guide

xviii. URLS

1. For new Services Home Page URLs these are specified at the end of this CP
2. For existing pages and Sample pages we are not changing URLs
3. For new SAMPLE Page URLs they are to be determined based on the current
underscore convention.

xix. Fonts and Style

1. The NavBar font size larger will be slightly larger
2. We will minimize changes by keeping other fonts the same style and size.
3. We will maintain the blinking lights in the logo


If you are an expert in any of our service areas, and available for full or part time work,
Please click here OR send your resume and cover letter to