Web Site Layout Basics

There are many components that make a web site effective. This series will touch upon the basics of two main components: layouts and content.

Website layouts.

Effective web sites start with a visually appealing layout and are user friendly. The two most volume-heavy web sites in the world, Google and Yahoo!, are the greatest examples of how an effective web site layout can reap benefits.

Below you’ll find tips and tricks to creating effective web site layouts.

• Keep it simple – Simple web site layouts are virtually always user friendly. You won’t need the navigational links using complex codes, images and scripts since they may not be viewable in different web browsers. Also, search engines won’t be able to index the web site correctly if complex script is involved.


• Readable and professional font size and face – Your reader needs to be able to see the content correctly. Standard font size is ‘-1’. Use professional font styles (Helvetica, Arial, Verdana) and avoid fancy fonts (Comic Sans). The spacing between each line should be 12 or more pixels to ensure professionalism.


• Use eye pleasing colors – Color choice reflects the creator’s personal style. Yet, it’s always better to use web safe hex colors – colors that look the same on every browser and computer.


• Webpage dimensions – It’s so important to keep track of your web page’s dimensions. Limit the height and width so that the most important content lies within the top half of the web page (600×600 pixels of viewable area) without scrolling. Avoid using the horizontal scroll bar – set the page layout to expand and shrink with changes in browser window size. Your best bet is to set a fixed width of 750-775 pixels. Page height should be no more than four scroll lengths. (Should there be more information you want to add, create a new page and add a navigational link so users can move back and forth between pages.) This is very similar to newspaper writing when you print your top story above the fold.


• Limit file size – Web page size equals the total size of text, images and supporting files (HTML, Java, etc.) that is downloaded from the server to view the webpage. It’s incredibly important to limit loading time. Most of us use slow modems (56K) which means smaller page sizes load faster. Example: Google uses very few images which makes their site easier to load.