Standard Web Page Layout Grid

Our Standard Layout Grid

This is the standard grid we use to layout website designs. It divides the page into three sections: a Header area, a Content area and a footer area. This standard layout grid can be used with almost any design.Most websites are built on a standard grid style layout and this layout gives my clients a framework to visualize their website.

Header Area

The Header area of your site should contain information common to all of the pages in your site. Your company name, logo, a top menu, search box, and a photo banner are some of the commonly used items in this area. Some sites also place social media connection icons in this area. Most often, the header area is divided into different "rows" with each row holding some information.

Content Area

The Content area of your site is the largest area on your page. The content area can be divided into vertical columns just as the header and footer area can be divided into multiple rows.

Pages most often will have between one and two columns of information. If your page has one large content area this is a one column layout. In a two column layout a smaller left or right section will hold content such as navigation menus or special information while the larger area remaining will hold your main content. In a three column layout the two sides might hold items like navigation menus and the center area would hold the main content for the site.

Many websites have one layout for the site Home page and then a second layout for the interior pages. You can choose the exact layout for each of your pages - one, two or three columns

Footer Area

The footer area like the header holds information common to all of the pages on your site. Often the footer section will contain items like a copyright statement or links to lesser visited pages such as a Privacy Policy and Terms of Service. It is also a popular place to put social media connection icons such as Facebook and Twitter. Some footers have a lot of information while others may only have a line or two. The footer can be anything you want and will appear the same on every page in your website.

Bay Area Website Works Bay Area Website Works Bay Area Website Works

Like Us. Follow Us. Watch Us.

Stay connected to Bay Area Website Works through your favorite social media. Join our fan page on Facebook and Follow us on Google Plus to see what we are up too. See us on Linkedin to see our professional identity and stay in touch with. See our collections of visual bookmarks on Pinterest. Get all our highlights via Twitter.


Custom Web Design Packages

Have a idea for what you want your site to look like? Need a website created? We'd love to hear about your project. Imagine what we can build together. Read More

Check Out Our Journal

Our goal with this Journal is simple: to educate and empower the reader by providing them with the tools to market their business, organization and individuals. We do this by offering posts by experts on web design, tech trends, SEO, social, content marketing, and more. Read More

Site Maintenance/Updates/Domain Registration and Hosting

Once you publish your site the work is often just beginning. Adding new content, improving and updating existing content, managing your domain and hosting, resubmitting your changes to search engines and managing your online social media can be a full time job for some busy sites. I can help out with that problem. Read More