Breadcrumb Section

Webpage Layouts

September, 16, 2015 | CSS

standard

Standard Layout

This is the most common Layout for webpages. The container above is the header area of the page, where you add the website title, description and main navigation menu. The container on the left hand side, which takes up 2/3 of the page is where your main content goes. The container on the right hand side is where your sidebar. This is where you place supporting content. The last container below is your footer. This also contains supporting content.You accomplish this by using CSS to build containers. These containers are known as a “Grid Systems”. Some developers roll their own grids while others prefer to use Front-End tools like Twitter’s Bootstrap, Zurbs Foundation and my personal favorite 99Lime’s HTML KickStart. Their are many more, but the first two are the most used and established systems. The third one is gaining traction and just as solid.

I like this concept, because we read from left to right and the first thing you want your visitors to see is your main content. This can vary from an item or service you are selling to your thoughts about politics. Most importantly, this is the most user friendly concept.

Alternate

Alternate Layout

This Layout is very similar to the Standard version, mentioned above. Some designers use this concept effectively, I choose not for my own personal reasons. However, I have seen some designers use the sidebar on the left hand side as the container for your main navigation menu. I’ve even experimented with this concept in the past. In other cases, some prefer to use this just to be different. Keep in mind, this is all subjective and everyone is going to have an opinion, which differs from your own. As long as your message is clear, it really does not matter where you place your sidebar.

Grid

Grid Layout

The example on the left side of your screen shows a three column grid. Keep in mind it is only an example. Truth is you can use as many columns as you like. Most CSS frameworks you will come across on the web go up to 12 columns. Some have 16, but that is pushing it. This concept is essential for e-commerce, portfolios and even some social network websites like Instagram, Pinterest and even a “WebDev” depot like Sitepoint.

Wide

Wide Layout

The full-width example provides an opportunity for a designer and developer to get creative with a web page. The CSS containers you create or use to store your content can be used repeatedly within each other. They don’t have the same rules like the HTML5 elements.