Web Design Basics: The Website Layout

by

NTR Imagescapes

It can be very confusing and often times difficult for someone new to HTML and CSS, equipped with an HTML editor such as Dreamweaver, to design a website on their own. There are many resources online that give advice, tips and methods for developing a website, but as most have realized that have tried implementing this information, it is not always correct or accurate. With this article, hopefully some of the confusion regarding the layout of a website – which is the foundation and the most important aspect of the site – can be cleared up so you can move onto the more exciting aspects of web design: inserting the content.

Frustration can arise when you start using the applications of your HTML editor to design your site and when you preview it in the browser, or publish it to the server, the text overlaps the background, the navigation is shifted up or down from where it\’s supposed to be, or the footer is floating up near the head – which in itself is not where it should be. These common errors are simply a result of improper website layout.

When I started in

web design

and began experiencing these issues, I quickly realized that my best bet would be to learn to code HTML and CSS by hand, and not rely on any of the interfaces that the editors offer as \”convenience\”. This was a daunting task at first, but very quickly it became apparent that HTML was a very simple coding language to learn. After a couple days of going over the syntax of tables, forms and contextual tags, I began designing my own layouts by hand – not using tables, but using DIV\’s…this was like finding the holy grail for website layouts.

Apply an id to a DIV, set the attributes of that DIV in CSS, and the simplicity of web design layouts was realized. Of course there is a bit to learn with CSS and how to position those DIV tags, but once you understand floats, margins, padding and positioning, you\’ll be able to design a website layout in about 20 minutes and be confident that everyone will see it pretty much the same as you, regardless of the browser they\’re using or resolution their monitor is set at.

Take an outside-in approach with the layout. If you\’re going to have a centered design, make sure that the width of the outermost container is set to a width that most screen resolutions will support without making the visitor scroll from left to the right. This typically is about 950 – 975 pixels. Once you set the width, simply apply \”auto\” to the left and right margin in the CSS style sheet associated with that DIV id, and like magic the site is centered…pretty simple. And of course if you really wanted to play it safe, you could set the width as a percent – such as 90% – but in that case, you need to make sure that the content within can expand and retract as needed without overlapping and without making the footer climb up to the middle of the page. So my advice would be: use pixels as an outermost width when using a centered layout until you\’re knowledge of padding and margins is at a more advanced level.

Another layout method is to shift the website to the left. This is done by simply setting the outermost div/wrapper tag\’s margin to 0px on the left. A layout like this will ensure that your website is always seen starting at the left of the visitor\’s monitor. From that point, you need to decide how far to the right it will expand. Once again, it can be set in terms of pixels or percentages. I would suggest pixels to play it safe with the content.

One other method I like to use is to have a centered layout for the body, but allow the header and footer to expand across the monitor. This is simple to achieve simply by separating the header and footer from the content wrapper, and setting their widths to 100%. Usually headers are a fixed height, but footers most typically expand. So leave the footer\’s height blank, and set a top and bottom padding of maybe 10 pixels. This way, whatever you add to the footer, it\’ll always appear centered in the middle of the footer.

These are the basics of laying out a website. Hopefully it\’s helped some of you who have a basic understanding of HTML and CSS, make your website at least appear structured and organized. In the next article, we\’ll delve deeper into arranging the actual content of the website and how to avoid common mistakes of having overlapping text and images.

NTR Imagescapes is a

Chicago web design

company which specializes in developing affordable websites for small to medium sized businesses looking for online portfolios, affiliate pages, shopping carts, membership systems and content management systems.For more information on web design, please visit our site at

NTR Imagescapes Web Design

.

Article Source:

ArticleRich.com