The majority of websites have sidebars on their internal pages. Sometimes there on the left, other times they are on the right. Sometimes there are two sidebars, with the content in the middle. I’ve even seen layouts with two sidebars on the right with the content on the far left. My personal favorite is to use a two column layout on internal pages with the sidebar on the left or right. In the following example you’ll see a right sidebar.

The sidebar is going to consistent, yet different for every page. This consistency will be in the sub-navigation that is directly related to the primary navigation. The sub-navigation will remain in the same location (top of sidebar) on every page, but the links will be different on each secondary navigation component.

Sidebar Components

Additional Components

After the obvious basics, you may want to include other components below the primary components of the sidebar. For example:

Conslusion

The sidebar components mentioned help users effectively navigate your website content and lead them to taking action. Other sidebar components that are very good are credibility factors. If you want to lower the website user’s anxiety and demonstrate value you may want to create components for that. Examples might be (testimonials, organizations you are associated with, certifications you have, etc…)

It’s important to know what you want before the programmers start coding. Some of these components will be dynamically driven and some will be wigitized for used individually within certain pages or page template. Thinking ahead will make the website management process much more satisfying to the website owners. They will be able to easily rearrange component order and target components to specific sections if programmed right.

Website Style Guide

The website style guide is an important part of every website. It will keep the formatting of each page consistent throughout the entire website. I doubt I have to explain the benefit of a style guide. What’s awesome about it though I try to style as many common HTML elements as you think the website administrator will need to manage content effectively on each page.

When the prototype is passed onto the design team, they will know exactly what to build into their css style sheet, and this will also let the programmers know what to build into the WYSIWYG rich text editor. This will help us build search engine friendly pages that are easy to format for website owners and also easy to change colors and font properties across all pages if needed.

Headings

H1, h2, h3, and h4 are headings that are show in the style guide. Each have different font sizes, colors and styling to make the website more readable when being read by visitors. User like to scan page heading looking for the information they are interested in and using different font properties helps organize the page content. When the website owner is adding content to their WYSIWYG editor, they will just have to select h1, h2, h3 or h4 from the drop list to format the text properly.

Paragraph Text

Paragraph text is the body text that is consistent throughout all pages in the main body area. This is the default text that will show when a website owner is writing text in their WYSIWYG rich text editor.

Lists

At some point the website owner will want to create an unordered list or an ordered list. An unordered list is a bullet point list. Ordered lists are numbered list (1,2,3,4) as opposed to bullets.

Blockquotes

Blockquotes are HTML elements that are smart to stylize so the website owner has an opportunity to make quotes really stand out. They can be used to emphasize main points on a page, show testimonials, client stories and more.

Alerts

Alerts are smart to think of ahead of time. They will be used for confirmation messages, error messages, or even notes / tips that stand out from other content. The confirmation or success message is something a website visitor would see after filling out a form. If they didn’t fill out the form properly, they would see the error message. The note alert is a component that the website owner might want to use to make sure the reader knows something about the page before continuing to read. It could also be a tip, download, or did you know area that stands out front the surrounding text.

Footnotes

Footnotes are great for giving credit to sources throughout your text. If the website owner quotes a source when writing content, they can add a superscript to the sentence (e.g., you have three seconds to attract a website visitors attention ¹ ). Now in the future you can use an ordered list to quote the source at the bottom of the web page.

In the next article I’ll be discussing the sidebar, why it’s important and how you can use it effectively.

Atomic elements cannot be broken down any further. An example might be, H1 Text, paragraph text or a logo.

Components are made up of atomic elements, but their relationship with each other groups them together into single components. Some of these components I knew would be global (show up consistently on each page) and some would be page specific. I like to start with the global components first.

Global Components

Header

The header consists of three elements, Logo, Value Proposition and Call to Action. These three elements make up the header component and will show up consistently on every page. The logo is a clickable link that leads the website user back to the homepage. Value Proposition is a clear statement that tells website visitors what this site is about and how they unique. The call to action is a phone number. The goal of this site is to generate leads, so why make it difficult for users to find the phone number when they are ready to act?

Primary Navigation

The primary navigation is the menu users will interact with to find information they are interested in. As mentioned, I had developed a site map, so I had a good idea of how I wanted the navigation to flow. This site is not going to be hundreds of pages, so I decided to eliminate the use of drop-down navigation. I personally don’t like to use. If there are sub pages, I like to include them within their specific section, so they are always displaying to users. I don’t like to keep making users hunt for things. I also don’t like creating more than seven menu items in the primary navigation and is this illustration; I was able to make six menu items work.

You’ll notice that the homepage show a different color that the other buttons because the homepage is active, or currently being viewed. The other five buttons are inactive, but change color on hover.

Footer

I won’t spend a lot of time on this, but the footer section contains some of the standard utility page (site map, privacy policy, terms of use) that can are important for legal purposes and also valuable for search engine positioning. I know some sites, or directories won’t even link to your site if you don’t have these elements in place. I also included links to the main service page that are keyword rich text links (leader generation, sales consulting and sales training). In the copyright, I always like to use a dash followed by keywords that are linked to the homepage as well.

Today I covered global components and next will discuss other components including: sub-navigation on internal pages, style guide, and all of the other components that make up the homepage wireframe.

My goal was to generate preliminary site map of corporate website architecture. Our client previously filled out our website discovery form and uploaded a number of files (documents and images).

I sourced the information submitted and was looking for the following:

1. Value Proposition – why is this company unique? What do they do better than their competitors?
2. Objectives – what is the primary goal of this website? Do you have any supporting objective?
3. Who – is this website going to be viewed by? What users are going to visit this website?
4. What – content are your users going to want to see on the website? What decision do you want each user to make?

After sourcing the information I began to draft a site map that would serve as a “jumping off point” in our next meeting.

Home

The homepage has 3-5 seconds to engage the audience by stating a clear value proposition pulls the reader into the next page.

Utility Pages

• Terms of Use
• Privacy Policy
• Site Map

Calls to Action

• News Letter Sign Up
• Contacts
• Request for Proposal

Credibility Factors

• Company Profile
• Case Studies
• White Papers
• Clients

Services (B2B Sales Solutions)

• Lead Generation
• Sales Consulting
• Sales Training

Social Interactivity

• Blog – Helps casually distribute content to users, develop a following and provides fresh new content important for search engine rankings.

Scalability

• Future Modules – make sure framework supports the addition of key website components that align with business goals.