Design tips for the layout of a Website
Posted on Friday 17 August 2012
|
1 Comment
Hello. First of all, I would like to say that making something from scratch means making something (like a website design) from beginning without using any extra sources. So in this post, I am sharing some of my strategies and planning I do to make a new and fresh website design.
Any beginner knowing HTML and a bit of CSS can make a new webpage design. But you should know that making a new and fresh website design is NOT an easy task. It requires great planning and some strategies so that you don't go in any wrong way. One uncaught problem = many problems later. So you should be careful too about designing, proper syntax, way of coding or programming etc.
Going from top to bottom in a webpage, I'll explain you what points to take care of and other how-to's :-
So the conclusion is that you may use a bigger or equal width of the header area with respect to the width of the main content container.
Any beginner knowing HTML and a bit of CSS can make a new webpage design. But you should know that making a new and fresh website design is NOT an easy task. It requires great planning and some strategies so that you don't go in any wrong way. One uncaught problem = many problems later. So you should be careful too about designing, proper syntax, way of coding or programming etc.
Going from top to bottom in a webpage, I'll explain you what points to take care of and other how-to's :-
Header
The Header area consists of site logo or heading, sub-heading or site description, *a search form , *navigation menu, *announcement messages, *advertisements or any other desired HTML area. [* - Optional, may/may not be used].
Header is present at the top of the Website layout and that's why is named "header". In a layout of a website, the height of the header area can be fixed or dependent on the content. I've seen thousands of websites and the main thing I see (apart from the content) is the design of the website. So I do know various types of headers designs like :-
- Header width is full, and the content container's width may be less than the screen size.
- Header width is equal to the width of the main content container, or the whole width of the site is constant from top to bottom of the webpage.
- Header width may be more than the normal width of the main content container, but I have never ever seen less width of the header area than that of the main content container.
The header with site logo and advertisements and navigation menu with the search form looks great.
Navigation Menu
As far as I've seen, the main menu is made separately instead of making it in the header. Yes, you can put the Navigation Menu's content inside the container of the header but it is mostly designed to look different and not like its a part of Header section.
Navigation menu of SixRevisions.com
For examples, you may see many websites like ProBlogger.net, BloggingJunction.com, SixRevisions.com etc., they all have header, then the navigation menu is right at the bottom of the header. This is done so as to make the layout look great, its a good practice and most of the website designs follow it.
And now for the design of your navigation menu, its not always necessary that it's design should match the way all your layout is designed. Design of the navigation menu should be unique and just great looking. You may use same coloring as that of your website theme. For example: the stunning multicolored navigation menu design of css-tricks.com.
Main Content with Sidebar
And now here comes the main part of your website - the main content container. The main content container is the div container which wraps your main content div and the sidebar div.
Inside the main content container, the divs of main content and sidebar content can be created one after the other and using CSS, both divs can be floated, one at left and the other at right or both at left or right (depending on the positions of both the divs). This way, the layout of the main content should be designed.
Footer Navigation
This area is not actually the footer part and is present at the bottom of your website, but it consists of navigation menus for other webpages like links of most commented or recent articles, and some extra HTML content. And it may or may not contain the footer part.
ProBlogger's footer content.
From my opinion, the width of this area should be equal to the width of the whole site or main content. The height may depend upon the content. It should be just at the bottom of the main content container (wrapper).
Footer
This is the part where you can provide your copyright information, one line site's salutation and your website platform. The width of this area should be equal to the width of the preceding area - the footer navigation (if you've made) or the main content, according to my opinion.
This comment has been removed by a blog administrator.
ReplyDelete