Full Menu:

Blog Summary

  1. Flash XML loops and accessing data Joel Reinke 13-Mar-2013
  2. The Latest: Apps & PHP customization Joel Reinke 20-Jun-2012
  3. Photoshop Tree Tutorial Joel Reinke 07-Nov-2011
  4. Developer Resource - Papervision3D joel reinke 27-Sep-2011
  5. Photoshop Landscape Painting Expanded Joel Reinke 09-Sep-2011

Web Design Mountain : designers : web design tutorials : WDM common webpage layouts

Common Web Page Layouts

For reference and ideas of where you want to go with your site layout

(Reposted and expanded from Mountain Multimedia blog... that's my other site)

Header, Left Sidebar

The left Sidebar is often for Navigation, but it can also be for other things and sometimes the navigation is in the Header. The Header often contains the Logo, tagline of the company, sign-in area, search bar, and important Links.  Often there is a Footer but its optional. The content section changes for each page but the other elements of the page stay the same for most of the website (this can be referred to as a Site-wide Template)


Header, Right Sidebar (common for blogs)

Just like above but the Sidebar is to the right.  Because the emphasis on the sidebar is not as strong with the sidebar on the right, the CONTENT becomes more of the focal point of the page.  The Right Sidebar is used for things like Archives, Tag Clouds, Widgets, Summaries, News bits, and other bloggy things.

Left Sidebar Logo and Navigation

Maybe you don't want a header.  You have navigation in the left sidebar and a logo above it. Content start at the top of the page. Footer is optional, but usually there.

3 columns with Header (optional Footer)

The content is between a left and right sidebar.  Usually for web sites with a lot going on and many different categories of content.

Fixed Footer Navigation

 This layout is not as common, but it is useful for multiple reasons.  The Footer is locked to the bottom of the page and never moves.  It is always visible.  The navigation is all in the Footer. It is like the layout on an operating system like Windows. A big advantage is the Content comes first.

Header + Content

Super basic but common layout: Just a Header then Content below. Can be a great layout, just didn't need a picture to explain that one.

Function-based Website Layouts:

These are some other very common types of layouts, but the layout isn't as standardized as the concept or function they are in existence for: (I'll expand upon these in future pages)

  • Photo Portfolio Site
  • Blog, Basic
  • Blog, Magazine Style (a hot look)
  • Social Network
  • eCommerce Store Modern
  • eCommerce Store Catalog Style
  • Flash Based Site
  • many more but these each have a style that's prominent like a layout

Food for Thought:
These are just the most common basic ones.  Web surfers like familiarity so they can quickly get to the info they want.  However, what are some ways you can utilize a standard layout but still get creative?  Follow this website for future posts on this idea...