rss

How To Apply A Good Layout Your Website

2 Oct, 2009 Phil Web Design

A few years ago, I taught myself web design and html/css coding with no previous experience.  Seems a mighty feat to take on at first, but if you are technically-minded and have the tools (like adobe dreamweaver).  Dreamweaver is great because you can design and play around with colours, but at the same time, view the code that is being made up behind the scenes which gives you rapid understanding of how it all works.

Now the first few sites I designed were pretty shabby looking in retrospect, but not a bad start either (like www.evo-power.net), but that website alone helped me loads and gave me a firm understanding of how design works, google adsense, forum building and embedding media like video in the web pages.  

All this is all very well, but the very basic concept to get a grasp on is the site’s layout.  Layout plays an integral part in the look and feel of the site.   Users need a good layout which makes it easier to navigate, easier to read the whole page and is making use of all space (not leaving any white spaces empty).  Once you have a decent layout, the rest is just filling it.  It’s the framework and skeleton and typically forms the basis of the template your site will adopt. 

Designing a website requires that you are pretty familiar with basic website layout and structure.  After all,  a website is (in effect) a folder or directory containing files (web pages, images, scripts) and other folders.  Website layout is about creating a structure for these folders and files and how they are linked together.  The more websites you build, the more creative you will become and effectively be able to push more boundaries.  It sometimes takes a lot of adjustment to get it right, and can be a pain playing around with css stylesheets to align columns and <divs>, but like everything – practice makes perfect.

Although the actual layout of a website varies considerably depending on size, they all follow the same basic principles. Websites consist generally of three types of Web pages – the home page (index), Intermediate pages and content pages.

The homepage is the starting page of the Website and acts as the site guide.  It is the page presented to site visitors who do not specify a web page and will give them the first impression of who you are and what you do.

For small to medium-sized Websites, the layout will generally be two tier ( no intermediate layer) and with larger websites ( +25 pages) having the three tier layout.  The pages are ‘linked’ together in any order, but remember - some general design rules should be applied here:

  • All pages should link back to the home page – usually the logo on top left of site should do the same.

 

  • Website navigation is vital – for most websites, this consists of a navigation menu/bar at either the top, side or bottom with many having several navigation options.  It is always a good idea to use plain text navigation menus when possible as it makes it easier for search engines.  Recommended minimum menu options are:

 

  • Home page - starting page
  • Contact – your contact details usually minimum email address
  • Site map————List of the important web pages
  • Links – Links to other sites and useful resources.
  • About Us – Your company profile with background or history

The home page menu option should not be included on the home page itself – or at least ‘unclickable’ i.e not a link.

 

  • Any page should be a maximum of two clicks away i.e. 2 links.  Don’t have users click 4 or 5 pages to get to your ‘pricing page’ for example.

 

  • Try not to have more than 20 links per page.   Too many links looks cluttered and confusing.

 

  • Web Page names should be descriptive and contain keywords. 

 

  • Links to Internal pages should obey normal linking practise and have descriptive anchor text. I.e. keywords should be used in the link name.

 

  • Every page should have at least one other page pointing to it (i.e an ‘incoming’ link).  Don’t have pages with no links to them (obvious – but not always followed).

 

  • A link to a sitemap should be included on each page so as to aid user navigation and make indexing by search engines easier.  A sitemap is just a page which has every page on your site linked.  See my OwenDevelopment sitemap page here

 

  • A link to a contact page should be included on each page so users can always get in touch.

 

Using Folders or directories

Web pages can contain text, pictures, audio, video and scripts. Generally almost all web pages contain text and graphics, many also contain scripts. It is normal site design to divide the Website into different folders on the hosting server.  The scripts and graphics have their own folders and the content pages are directly under the root folder normally.  This isn’t a neccessity, but makes life easier.

 

 Cascading Style Sheets (CSS)  and JavaScript

If you use Cascading Style Sheets and/or JavaScript  then always use external ones were possible. Using external ones makes them easier to change as only one page needs to be edited to effect the entire website and it is also much better for the search engines.  The CSS sheet holds all the information such as text size, image borders, column widths, colours and more.

Once you have these basic layouts sorted, each page should be the same layout to keep consistency and will help users navigate effectively.  I also advise to check out your competition to see an understanding of the colours they use, the layouts they use and make improvements on all the above.

Share this post:
  • email
  • Add to favorites
  • PDF
  • Facebook
  • Twitter
  • Digg
  • MySpace
  • Google Bookmarks
  • del.icio.us
  • NewsVine
  • Ping.fm
  • Reddit
  • Yahoo! Buzz
  • Technorati
  • StumbleUpon
  • Sphinn
  • RSS

About Phil

Phil is creative director at PSM Digital but also freelances with web design and SEO in Manchester, UK. He researches and studies online business, along with the latest technological advances and development in design, SEO and social media.

Leave a Reply

About The One Man Mission...

Hi I’m Phil. Welcome to my blog, where you’ll find useful information on web design, development and online business advice.  I’m a creative director for a digital agency in Manchester, UK and I also freelance web design also.  Currently setting up and developing a new online business, I am here...

Read More »

Find me at:

  • twitter
  • facebook
  • linkedin
  • youtube
  • flickr

Photos on Flickr...