Over the years, I've worked on variations of two basic layouts for my webpage designs. One is for a left side navigational look, and the other is for a top, tabbed navigational look. This site is an example of the top, tabbed look, whereas the My Favorite Baby Carrier site is an example of the left side navigational look using a CSS template design.
I should say, that this look applies to the internal pages of the site - I at times use a different, more open page design for the home page. I've evolved this different home page design over time since the home page is so important; if users don't quickly find the information they are looking for on the home page they will just click the back button. The home page layout considerations are so different and important, that I will deal with them separately in the next section - Step 5 - Designing the Home Page.
Internal Page Layout Options
Both internal page layouts I use offer somewhat different strengths. The side navigational layout is a more basic navigational design, and users are typically very familiar with the look and way to use the navigational buttons.
The downside of this layout is that the side navigation takes up a fair amount of space, so that there is only room for a basic text section to the right of this navigation. In contrast, the top tabbed navigational option allows for a text section, and also an additional section (I typically put this on the right), that allows for additional comments, testimonials, navigational help, etc.
I think of this extra space as a place I can kind of whisper over the shoulder of the person using the site. For instance, I am considering redesigning my memory foam site with this design so I could list some of the FAQs in this right hand section along with testimonials.
But the downside of this navigation is that, while it has become pretty common on the net, it just isn't as ingrained and so it is a bit less usable for visitors than the left side navigation. Also, left side navigation allows more room -- so you can have more options flowing down the left side (a grouping by price, a grouping by type of product, etc), and also sub navigation areas pop out under a chosen category area.
The only way to do some of the same things with top navigation is through drop down lists, or navigation that opens up once you hover the mouse over it. But these aren't as user friendly options as left side navigation that shows all the time and doesn't require the user to click on a drop down or hover their mouse.
Based on this extra bit of usability, I tend to stick with left side navigation unless the benefits of the top, tabbed navigation (having the extra right hand space for comments) are compelling.
My Choice for the Baby Carrier Site's Layout
I did consider using top navigation on the My Favorite Baby Carrier site so I would be able to use the extra space on the right to sprinkle in user testimonials. But as we were just starting out and didn't have many testimonials, I decided to stick with the left hand navigation since it is offers a bit more comfort for users. You can see the old, basic template I used for designing the site at My Favorite Baby Carrier Page Template. I then modified the navigational elements, title, etc for each separate page as I designed it.
And I changed over to the more graphic oriented, CSS layout, a few years later when updating the look -- and that is the look you see now on the site.
Factors to Consider when Designing your Page's Layout
But what layout should you choose for your site? In the remaining sections of this page, I will go into detail as to the different elements of a layout and the reasoning behind the choices I have made in coming up with my two basic layouts. This should help you in designing a layout or in reviewing a layout a designer comes up with for your site.
Basic Usability Must be Built into Your Site's Layout
Regardless of which navigational layout you choose, your site's design needs to offer as much usability as possible. Usability focuses on using all means to make the user experience as good and functional as possible.
Certain things can make a web page much more usable for your visitors: pages that are designed to load fast, navigational choices that are clear, and content that is easy to find and read. And while this sounds simple, it really isn't.
Unfortunately, many sites are designed to have a good graphic or visual look without really focusing on usability. I'm not saying that a site should not have a good visual feel. In fact it is important that the site has a nice, professional visual feel or customers won't feel comfortable buying from your business.
But I've found that a very basic visual look can work well and allows you to also concentrate on maximizing the sites usability. And ultimately the usability of the site will play a large part in its success. Customers care little about how wonderful your graphics are, but they care very much whether they can quickly find the information they are looking for and navigate to this information quickly and easily.
Features Built into Our Basic Layouts
While the two layouts I use do differ in where the basic navigation appears, in most regards the layouts share basic features. These basic layouts have evolved over the years, and includes these important features:
Fits basic browser sizes. It is important that the size of your page layout fits the horizontal size of most people's browsers. If a page is too wide, it will add a scroll bar to the bottom of the page's browser. And nothing kills a webpage like also having to scroll sideways to read it.
I design my layouts to fit within an 1024 pixel wide screen size. This is the smallest basic size used, and only a small percentage of users have monitors with smaller screen sizes. I rarely allow a page design to get larger than 917 pixels wide to assure that it will fit into the 1024 pixel browser space correctly.
Fast Loading. Both the top tabbed and side navigation layouts were designed in HTML, so they have a small file size and load very fast. While most folks use broadband these days, it is still really important to make sure that the page loads as fast as possible. People only give a site a few seconds before clicking on the back button -- so getting the page to load fast is still very important. And Google does encourage webmasters to get their pages to load fast and does reward fast loading pages in their ranking algorithm.
Small and Simple Graphics. Both designs use just enough graphic elements to give the site a good, professional look. But I have tried to use the smallest amount of graphics possible so that the page will load quickly. And I've used the same basic graphic elements on each page, which helps pages to load very quickly after the first time (since the graphics have already been stored in the user's computers' cache).
I stay away from any flash or animated graphics - they really don't add anything to a user's experience and they take time to load. On my basic layouts the only graphics I use are the company logos (at the top and bottom of the page) and the background color on the left (which is larger on the left side navigation layout).
One trick I use is that rather than using graphic buttons for the main navigational choices, I CSS to make a list into navigational buttons or tabs. This is a much better option that I used to use when I used tables with colored cells to imitate this look.
Doing your navigation using a CSS also allows you to easily change the look of your navigation buttons or tabs if you wish. So this is now the way to go and is worth learning how to do.
So I in effect only use 3 graphics on the basic layout of a page, and this allows the page to load much faster and also allows me to add other important graphics to the page (product graphics, etc) without worrying that I have so many graphics that the page will load slowly.
One last benefit of fewer graphics is that it makes the page less cluttered, and this also makes it more usable for your customers. So keep graphics to a minimum on your basic page layout - the page can still have a good look and feel but be much more usable for your customers.
I know that some of this runs counter to people's ideas about how they want their site to look. I often see small business sites with a lot of graphics, and I do think often they have a nice look to them. But they often don't have good navigation or load very slowly, and since I want to engage my users as much as possible, I really try to have the site remain in the background and instead let my users easily find the navigation and content they are looking for without being confused as to where to go or find information by a bunch of graphics.
The Visual Background of the Site. This kind of goes along with the choice of graphics - what will you choose for the visual background of the site? The choices are endless - beyond the basic choice of white, you can have a site that instead uses black or any other color as the background, you can use a "wallpaper" look for the site, or any other sort of graphic background as well.
With CSS, it is really easy to put in a background graphic element. And used in moderation, these can really add a nice look to the site -- so you should consider them and experiment with them a bit.
In the text areas of the site, however, I only use a white background because tests have shown that it is easiest to read black text on a white background. And while a graphic background may give your site an interesting look, using them in the text areas will only make it harder for your users to read the basic element of your site - its copy.
Text Links and how they Are Shown on the Page. I always try to use standard link conventions as much as possible in my designs. So if at all possible, all text links are in blue and underlined, any visited links change to purple and underlined, etc.
With CSS, it is easy to change this so that a link won't show as underlined, have a different color, etc. But while this may look visually interesting, people expect a link to look like a link. So I want to make sure my customers can easily find and click on those links that interest them. There is never any benefit to making a basic link another color or take away the underlining, and in fact this really only confuses users as to whether this text is really a link that they can click.
The Company Logo Placement. The company logo needs to be at the top of the site, and should be a small sized graphic, and linked to the home page. This placement and size are important - users are conditioned to look for the logo at the top or top left, and they also know that they can click on this logo to return to the home page.
You will see that this is the common way to show a logo on large, professional sites (look at Amazon, etc).
But I can't tell you how many times I've seen small business sites with large logos, sitting at the top, middle area of the site, taking up a huge amount of space and pushing a lot of important information below the fold.
Studies consistently show people, in general, don't scroll. So you need to get as much information above the fold as possible -- especially your important content or product areas you want people to click on.
In order to maximize the information that shows above the fold, then, stick with having a small logo at the upper left. And also minimize any other top graphics you have -- they just push your real content down the page and will hurt your ability to get people to click into the important content areas of your site.
I also generally repeat the company logo at the bottom of the page, even smaller. This kind of brands the page at the bottom, and goes along with the copyright statement. It also should be linked to the home page.
800# and Tag Line at top. I like having the 800# and also the businesses tag line (the one line statement of the business) near the logo. Typically, I put the tag line under the logo, and the 800# to the right of the logo, along with business hours.
This makes the 800# very easy to find - all too often the phone number is difficult to find on a web page.
And the tag line is important in that it quickly tells people what the site is all about. This is important, because many people will end up coming to your site from a search engine straight to an internal page, bypassing your home page information. The tag line quickly lets them know what the site is about when they come in sideways in this way.
Business or Review/Ratings Logos. I always include any sort of business or review/ratings logos (Better Business Bureau, Ebay Commerce Network (formerly Shopping.com, etc.) right at the top of the web page. All too often, I see other sites add these on the bottom or below side navigation as kind of an afterthought.
But I've found that these business programs and ratings are important to customers. Especially for small businesses on the web, where your people finding your site may never have heard of your business. So don't hide these. If you have them give them prominent placement so your users will know that your business is reputable and in for the long haul.
You may also want to consider putting social media badges at the top as well. I am wrestling with this, because at some point putting all these graphic elements at the top really clutters things and makes it hard for your navigation to be easy to find and clear.
But if you have a lot of Facebook likes or other social media showings of trust, it may make sense to put these at the top of each page as well because they do carry a certain amount of weight and trust.
My own choice, for now, has been to move my Google + badge to the bottom of this page because it just kind of looks strange by itself at the top of the page. But I may end up moving it back up as I continue to look at this.
Administrative navigation bar. I separate navigation into two different places - the main navigational area which deals with the content of the page, and an administrative navigational area which deals with areas of your site that are standard to all websites. This includes about us, contact us, etc. I use a small navigational bar below the logo - and I make it a colored table so it loads quickly.
On some of my important sales pages, I remove this secondary navigation so that the top of the page is less cluttered and also so it allows more copy to show above the fold. I do, then, have these navigational choices at the bottom of the page.
Cart Logo. It is important for an Ecommerce site to make sure that users can quickly find a link to the shopping cart. This allows people who first order a product and then go back to look around a bit a quick way to go to the checkout and finish their purchase. I put a cart graphic along with its "view cart" text at the top of the layout so it is easy to find
Main navigation. At this point, I've filled out the design for the top of the page. Then I add in the navigational choices - either the top, tabbed or button look or the left side navigation.
If there are sub pages to a main section, these are then shown in the navigational scheme (as sub navigational choices under your the main section) once you click on these sections (as shown on this page, or they can show as sub categories on a left hand navigational format).
Make sure any navigational system you use has some similar manner of cueing users into the actual page they are on. There are different ways of doing this, but some visual cue is important or your users can become lost as to where they are in your site.
Main Text Section. Regardless of the layout I use, the main text section is always at a size less than the full horizontal size of the available browser screen space. These days, I typically have the text section between 525 and 575 pixels, depending on how it looks on the page.
Why do I limit the text in this way? Certainly if I allowed the text to fill the horizontal space on the page I would be able to get much more text in the first fold (the first screen view of the page).
And while having more text show in the first fold would be nice, the trade off in usability is just too high. It is just too difficult to read text that shown in such a wide horizontal space. Text is much easier to read when it is in a smaller, column format. That is why newspapers and magazines have the column format. Web pages are inherently harder to read than print because of the resolution and appearance of the text on the screen. So it is important to keep the text in an easy to read format, and keeping it in a limited pixel column will make is much easier for your customers to read.
Headline for the text section. I always have a main headline for a text section, and use a H1 html tag. The headline is important for several purposes. First it gives the user an important visual clue to what page they are on and the content. As such, the headline should tie into the navigational title of the page.
In addition, search engines have always paid attention to the text used in the main headline tad (the H1 tag). The idea is that the text inside this a main headline tag must be important, and the search engines will factor this in when determining the importance of keywords used in the page.
So it is a good idea, if possible, to work the most important keywords for your page into the headline. But whatever you do, make sure that the headline stays descriptive of the pages content - this is vital for your customers and this kind of usability trumps whatever keyword considerations you may have.
Bottom of the page. Lastly, I typically have some standard information at the bottom of a page. A link back to the top, a links section for all the major content sections of the site, a small logo and copyright notice, an email address and company address/phone section.
I've talked about the reasons for many of these before, but I wanted to address the email link and company information section here. As for the email link, I learned the hard way that it is a very bad idea to put your actual email address on your site. There are automatic bots on the web that do nothing but cull these email addresses to use for sending spam.
I haven't had my email address listed on my site for years, and I'm still getting spam due to this mistake. What I do now is to use a bit of JavaScript that puts a link on the site, then when it is clicked, will open an email addressed to my business in a users email program.
While this isn't a perfect solution (it won't work 100% of the time), it seems to work well for the most part and is the best solution I've seen. As for the company information, many customers like to get a feel for the company they are dealing with. And one way they get a feel is whether the company gives their actual business address. This just seems to make a company more credible to many customers. So I always include this at the bottom of the web page.
