Webpage Layout

Webpage layout is about creating the perfect layout for your web pages. One method you will need to use is to have your structure identical throughout your web site. This is a great technique to make browsing your web site an enjoyable experience.

The web page layout elements include:

Background image – make sure you don’t use a background image that stands out. Don’t use one because you have purchased new software and it is a novelty to try and play with and do something different.

Color – use the correct shades for your web site and don’t use colors that really stand out unless you want to frighten away your visitors.

Navigation Links – My advice for you is to place these in the one area of your webpage layout and not to move them from that location. Traditionally the best place to have the navigation links are on the top of a webpage layout or the left hand side.

With my experience I found that the navigation links should never be located on the right hand side of a web page layout because your web site visitors have all different screen resolution settings and if you do this your navigation links might not be visible unless your website visitors scroll across the webpage.

Lets take a look at an example. Imagine that your table on a web page layout has been designed at 950 pixels by 950 pixels and your screen resolution is set at 1280 pixels x 1024 pixels.

You stand in awe how wonderful your webpage layout looks and how you think you have out smarted everyone by being different because your navigation links are on the right hand side and are visible.

On your computer it looks wonderful however imagine you have a visitor to your web site and that  visitors screen resolution is set at 800 pixels by 600 pixels.

Can you view your web site correctly with your current layout?

No- because your navigation links are hidden (remember the visitorsscreen resolution is set at 800 pixels wide which means 150 pixels of your web site is hidden which appears on the far right hand side and contains the navigation links).

For your visitors to see the navigation links they needto scroll the webpage across towards the right so your navigation linkscan become visible.

You might be thinking ah we are in the new millennium surely Technology has changed and there is scripting to detect and change the layout for my visitors. Yes there is scripting that can do this however scripting relies on a persons web browser to work properly so it’s a chance and a risk I would not personally take with my layout.

When you design a web site your target should be the majority of people searching online hence always keep your web site design simple with a great layout.

White Space

White space in a web page basically means parts of your web page that needs to ‘breathe’ and does not appear to be cluttered with text.

How many web page’s have you visited that were bombarded with content with no white-space? Your initial reaction would probably be like mine – what a mess and where do I start reading..

It is important when you make your website that you add white-space into your web page’s which helps add balance and removes any clutter which helps your visitor read your content.

Lets take a look at an example. The example we will use is this actual web page. If you take a look around the web page layout you will see spaces between the small paragraphs of text. I have pointed out as an example some of the white space in my web page example.

White-Space Example

We can add white space to a web site by adding it to a web page by leaving an even amount of blank space between your content you have on your web site web page. Using this method helps your visitor to view and read your content faster.

Can you imagine web page’s being jam packed of text just like a novel or a book is written?

Do you think it would be liked by your website visitors? Honestly I don’t think there are many of us out there that would like web page’s jam packed full of text based information.

A web page should not be too long and if you need to split your pages do so as long as you provide links to your
content pages. On a web page like this one its simple to add the correct amount of spacing. If you’re designing a web site that has a colored background you can apply this technique by using transparent gif’s scattered throughout a table or its cells if you’re having trouble with the formatting.

Website Images

Website images on a web site enables you to add color and flair.

If you’re creating images for the first time there are a few things you need to be aware of such as:

• You must optimize your image so its size is the smallest without too much loss of quality.
• What image file format to use when saving your image for web site use.
• If blending website images into the background you need to make sure one of the background colors chosen for your image is one of the specific web colors from the web color palette. This is so your image blends with the webpage background.

File Formats to use for web site Images

1. Graphics Interchange Format 89a
(extension file ends in .gif)

The color display is limited to 256 and you can create animation gif files using an animation software program.
This file format has been used since the introduction of the Internet. Perfect file extension to use for web site graphics.

2. Joint Photographic’s Expert Group
(extension file ends in .jpg)

The color depth of this file format is much greater than the GIF format and is an ideal file format for corporate logos and web site images that require full color depth.

You can compress your images to whatever compression rate you like. The more you compress your images the more quality you loose from your overall image quality.

There is also the PNG format which was designed to be a replacement for the gif file format however it is not the industry standard file format so its not supported by many of the older web browsers and a few of the current browsers on the market.

Which File Size Should I use?

It’s your choice really. When I create an image my objective is to create the smallest file size possible without loosing the quality so I do some testing to see which file works for the image I am working with. I do this testing in Adobe Photoshop when I am about to export the image. Both gif and jpg will work.

Tip – Select the best looking image which is the smallest size (jpg or gif) when saving the image in your favorite image editing program.

Target Your Audience

You need to target your audience correctly if your web site is going to be successful. One of the first things you need to take into consideration is the audience you want to target.

If you deliver your content to your audience in a way that is hard to view or the way its delivered people will not visit your web site because the good word about your web site won’t be spread throughout the Internet community.

Lets take a look at en example how we can do this.

I wanted to share my knowledge with you in how to build a web site. I knew my target range will be broad and I knew the Number 1 thing people will want is quality information. If I wanted to I could of built my web site using Multimedia technology that required plug-ins to view content etc

Some considerations when targeting your audience might include:

• I do have the knowledge to do this but how many of you would
  have been bothered with this concept?
• How many of you would have Flash installed?
• How many of you would have Shockwave installed?

Isn’t it easier to browse and read what you want quickly with no hassles?

The rule is to keep things simple. Just because something looks good and works for you does not mean it will be the same for your visitors.  It comes down to building a web site that will target your audience you (your web site visitors, web surfers etc) you want to visit your site.

You can do this by implementing:

• The right color
• The right look
• Adding quality content
• Adding the right images
• Is there a need for flashy menus?
• Is there a need for flashy multimedia?

Some ideas is to get you started might be to visit 5 or so competing web site’s and see the approach they might have taken. You can then visit Alexa and get a traffic report on the popularity of the web site’s. These web site’s can be found by doing a search in Google.

A word of caution never copy content – create your own.

Tip – Generally speaking the younger audience prefers multimedia based web site’s where the older generation prefers informative based content as this is one of the reasons people surf on the Internet and that is to find web site’s that has valuable content.

Good Website Design Practice

Good website design practice involves doing a few things correctly the first time around. There are so many nuts and bolts that you need to put together when you’re building a web site that its imperative to use good-web-site-design-practice. When you’re building a web site your objective is to build a quality web site that works on the majority of your visitors browsers using industry standard design principles.

When building a quality web site some of the basic things you need to
consider include:

* Target your audience
* Website Images Optimization
* Designing a web site with white space
* Identical look and feel for your complete web site
* Easy to use navigation links
* Fast web page load times
* Great web page layout
* If using programming stick with server side scripting
* Using the right colors in a website
* Using the right font
* Using enough White Space

Once you get into the habit of perfecting each mentioned skill above you’re on your way to building a quality web site while gaining the skills of an efficient

website designer. Its also important to note that when you’re building your web page’s its important that throughout each web page the only thing that changes is the content or the images in your content. 

Tip – Build a great template that is going to be the look and feel of our website. Add the links with the link names you will use. When ou’re completely satisfied with your template go ahead and save copies is your links and update the content for each webpage. A little tweaking and your web site should be complete.