WebsiteGear Logo Log In
New User? Sign Up
About | Contact | FAQ
  Home Content Site Development Website Design Sunday, December 17, 2017 
Print| Email| Save| Discuss| Feeds


Website Layout - Tips & Tricks
Published: Friday, October 10, 2003


The importance of a good site layout

Websites are judged by content and layout. How good your content maybe, if your layout is not appealing, visitors will not be eager to come back. Everyone is not born with a quality of creating layouts that are pleasing to the eye. If you have been to different Yahoo groups, you might have found various color combinations that the group owner has chosen. Some of them have red backgrounds with blue colored text creating a blinding effect. Although Yahoo provides all the possible color combinations, some choose the wrong colors.

Points to consider while designing a website layout

Website design is not a one time activity. Almost all websites alter their layouts to give it a new and better look. Also with advancement in technology, underlying code also changes accordingly, adding new possibilities of providing a better layout.
  1. Keep it simple:
    A simple website layout is user friendly. Do not create complex navigational links using complex scripts or images that maynot be viewable correctly in different browsers. Also search engines cannot index the site properly if complex navigation is involved. Minimize the use of bulky images which take long to load. Use smaller icons to attract visitor's attention instead.


  2. Readable font size and face:
    Use a standard font size of "-1" (11 or 12 pixels if using styles) so that visitors can read the content easily. Select a professional looking font face (Verdana, Arial, Helvetica, sans-serif are very common). Avoid using fancy fonts like Comic Sans
    (unless it is a personal website). Use appropriate spacing between lines (12 or more pixels) to avoid clumsiness.


  3. Use web safe eye pleasing colors:
    The choice of colors may reflect one's personal taste. Every webmaster or designer wants the color combination that he/she likes best. However, it is a wise decision to get feedback from users or friends about what they feel about the color combination
    of the website. Use web safe colors whenever possible.


  4. Webpage Dimensions:
    One important aspect of layout is keeping track of dimensions of a web page. Most successful commercial websites limit the width and height of the webpage so that the important content of the webpage lies within the top 600x600 viewable area without scrolling. To avoid a horizontal scrollbar, set the page layout to expand and shrink with changes in browser window size. Sometimes this interferes with image and text positions relative to each other and throws the layout structure out of sync. The best choice is to limit the width by placing a table with a fixed width of 750 or 775 pixels. See the layout of this web page for an example.

    The page height should not be any more than 4 scroll lengths. Limit the content of the page and if more content needs to be added, move it to a new web page. Provide a navigational link to the next page and a link back from the second page. This will also increase your web site's page views (adding more advertising space).


  5. Limit File Size:
    Webpage size is defined by the total size of text, images and supporting files (including javascript, flash etc.) that is downloaded from the server to view a webpage. Page size is very critical for high volume websites because of high bandwidth needed. However, it is also very important for any other site in order to keep loading times to a minimum. Most of the population on the internet use a slow 56K modem to access the internet. And smaller page sizes load faster. If you look at some very high volume websites like Yahoo.com and Google.com, they hardly have any images, making their site load faster.

    There is a trade off between making your webpage look nicer with lots of graphics and making it faster to load. The rough target for page size should be below 35K for at least the cover page. However, for e-commerce sites, it is often not possible because they have to present multiple product images to attract attention. As a general rule of thumb, a visitor will leave your site if the loading time is more than 8 secs.

Tips & tricks
  • Extract Javascript code and styles from within the html page to external .js and .css files. Create a link from each html page to these external files. Browsers download these files only once and caches them on the user's computer. This will reduce the size of the individual html pages.


  • Use server side includes for centralizing common content. Read this article for more details.


  • Use a background which creates a contrast to the font colors and graphics. Look at media sites like movies.com for an example. It uses a dark background with lighter fonts in order to create a theatre like setting. However, the site is easy to read and navigate.


  • Check regularly for broken links. Using a link checker or checking the list of 404 errors (File not found) in your website logs (or stats) will help maintain site links. Maintenance of links to external sites can be centralized using link tracking tools

Previous Article Estimate Your Expenses
Print| Email| Save| Discuss| Feeds
RELATED ARTICLES
Nav Website Navigation Tips
An effective website navigation is very important for your website. Learn tips and tricks.
Nav Server Side Includes - Centralize Common Content
Use server side includes to centralize the common web site content.
Nav Planning For Your Website
Before you start building your website, planning for it is very essential. This articles discusses the two basic planning criteria - choosing the website topic and researching the competition.
Nav How To Sell A Website
If you have an existing website or domain name you no longer need and wish to sell, this article will explain the steps you need to take to ensure a quick, easy, profitable sale.
Nav Researching A Website
Profiling a website is required for competitive analysis, partnership prospects or simply knowing about its business. This article specifies some of the easiest and inexpensive techniques.
RELATED NEWS
News Post Cogobuy Provides Business Update Seeing INGDAN.com Commercialization As Future Growth Driver
HONG KONG, Dec. 17, 2017 /PRNewswire/ -- Cogobuy Group ("Cogobuy" or the "Company", stock code: 400.HK), an e-commerce platfo...
News Post U.S. Navy Commissions Fifth Freedom-variant Littoral Combat Ship
USS Little Rock enters active service after ceremony on Buffalo River
News Post Candor Announces Acquisition of Tenex
Acquisition Takes Consumer and Client Experience to the Next Level
News Post Tai Apparel Centralizes Data to Reduce Development Time with Gerber's YuniquePLM® Cloud
TOLLAND, Conn., Dec. 15, 2017 /PRNewswire/ -- Development time for fashion and apparel companies is becoming extremely conden...
News Post Two day Course: Process Validation with Qualification (London, United Kingdom - March 6th-7th, 2018)
DUBLIN, Dec. 15, 2017 /PRNewswire/ -- The "Process Validation with Qualification" conference has been added to Rese...
Submit News | View More NewsView more news
RELATED CLASSIFIED ADS
Classified Ad Website Design Australia, Web Design Development
We are dedicated to creating websites with effective web design Australia, a complete Web Design Dev ...
Classified Ad Website Design, Website Development in Liverpool
We are a creative website design agency in Liverpool, working for clients throughout the United King ...
Classified Ad Web Design and Website Offers
Web design offers and discounts currently available from sinelogix Web Design are now listed on this ...
Classified Ad Website design and web development just at £149.0
Hi looking for reasonable web design and web development for your business website? here, we can ...
Classified Ad Website Design - Atechnocrat.com
Website design, web development & SEO company Atechnocrat.com, provides SEO services, search engine ...
Post Free Ad | View More View more classifieds
RELATED FORUM POSTS
Forum Post Website Development-Website Design
I want to start website development & website design company in banglore. Any one tell me what I nee ...
Forum Post Website design in VA/DC area
Hello, Can anybody tell me of a good website design and development company in Virginia/DC Metro ...
Forum Post What are H1, H2 & so on in web design?
Sorry for the stupid question, but I notice that we talk about a lot about the importance of have th ...
Forum Post How to develop a Flxexible Web Design
Here's what i found in developing a flexible and responsive web design @media screen and (max-dev ...
Forum Post Spreadsheet directly into web design
I purchased a template site through http://www.9dx.comwww.9dx.com and need some assistance setting u ...
Add New Post | View More View more forum posts
POPULAR ARTICLES
Nav How To Sell A Website
Nav Subdomain Configuration - How To Setup A Sub Domain
Nav Domain Configuration - How To Setup A Domain Name
Nav Website Layout - Tips & Tricks
Nav Round Robin DNS Load Balancing
Nav Introduction To Server Load Balancing
Nav Website Traffic & Revenue
Nav Tips On Using SubDomain
FEATURED NEWS | POPULAR NEWS
View More News View More News