Your Ideas, Our Solutions  
 

It is the trend that more and more people realized the importance of building the SEO friendly website. If you have worked on web development job more than sever years, you must know the old fashion of using table to layout the page. The HTML Table tags have been used all over the places not matter if the page displaying needs table or not. Those years, this is the most effective way to layout the page structure as the old browsers were not powerful enough yet. However, the Table tags make the HTML code messy. There are too many unnecessary code and styles definition coded on the page which increased the page size. Today, with much more improvement of the browsers, people are able to use the modern browsers that support new W3C XHTML standards and therefore, make us to develop clean and well structured HTML code become truth.

 
Thankfully, the use of much of the extraneous presentational tags has receded in use in recent times, mainly due to the innovation of CSS code. Ideal HTML would be purely structural, with every element concerning how a page is displayed being controlled by a stylesheet. The W3C have spearheaded this desire with XHTML. XHTML documents stress logical structure and simplicity, and use CSS for nearly all presentational concerns. It has changed the way developer writing code. Div + CSS has became the best practice for writing the XHTML code.
 
If you use the <div> tag combined with CSS, you will create a page that is easy to manage and manipulate later. Using the <div> tag allows you to define the page in terms of the logical divisions of the page, not just the locations in the layout (that will certainly change in the future). Most Web pages have fairly standard content chunks, and if you use the <div> tag to divide them, you'll be ready to style them however you'd like.
 
Be sure to use semantic markup to style the divisions that have specific semantic meanings with the appropriate tags.
 
A typical Web page has one or more of the following divisions:
 
header: defining the top banner and possibly navigation of the page - as it's a header, a header tag is appropriate
<h1>...</h1>navigation: defining the navigation of the page - this is usually a list, so use a list
<ul id="navigation">...</ul>left sidebar: defining a sidebar on the left
<div id="sidebar">...</div>right sidebar: defining a sidebar on the right
<div id="subtext">...</div>body: defining the main portion of the page
<div id="body">...</div>footer: defining the footer and possibly sub-navigation of the page
<div id="footer">...</div>Once you've defined the <div> elements of your page, you can then use CSS to style them however you'd like. Since you're using a tableless layout, you'll need to use CSS positioning to get the divisions to sit where you want them on the page. Luckily this isn't difficult.
 
Once you've designed your CSS for your divs, you should test your page in several different browsers. That way you can be sure your page will look okay no matter who comes to visit.

There is no question that the first consideration in designing a website should be the color scheme. Color can convey a myriad of messages about who you are. The correct use of color in your website design is paramount to ensure your site is not plain and uninteresting or on the other spectrum too busy, glaring and difficult to look at for a period of time. Obviously your intention is to have people stick around when they find you and have a good look at your content so make sure you get your colors right.

Browser Safe Colors Are A Must

Whichever web browser your audience choose, Internet Explorer, Mozilla Firefox, Safari or any other browser the fact still remains that they only see in 256 colors which vary depending on the browser you choose. Actually 216 common colors are shared and the other 40 are somewhat different. This is an important point because your website design should have colors chosen from the 216 color range (known as browser safe colors) rather than the varying 40 additions. That way your customers will experience a similar experience no matter what browser they are using. f you do however choose to use the colors that do not exist within the browser, the result will be a mixed variation of colors (named dithering) which can result in a distorted or dotted image.


Do Your Eyes Feel Strained Looking At Some Sites?

Looking at monitors can fatigue the viewers eyes. Have you ever looked at a screen for a while then looked away with sore eyes or seen illuminated shape similar to what you were looking at on the screen - this is similar to looking at the sun and then away (but don't try that as its dangerous). Eye fatigue is very real and your website will benefit if you apply some consideration in design to reduce it.

So which colors fatigue your eyes the most you ask. Well, firstly yellow as it is the first color you will be drawn to look at. Don't get me wrong it's a great color so use it sparingly to draw attention for advertisements and banners yellow 'm sure you have you noticed that caution signs are usually yellow. Pure yellow strains your eye more than any other color because of that, it is the first color your eye will fix on. Use this to your advantage by using it sparingly for the components that you want to be eye capturing like banners advertisements and specials on your website design. Red is another color to use with caution. Again use it more minimally for eye catching effect where it is necessary to draw focus. More subtle colors should be your basis for your color scheme and used more often to create interest without fatiguing the viewer.


What Is Color Saying About You?

The basics of color impressions should be considered:

- Business should be corporate colors like grays and blues and white - Trusting and Knowledgeable
- Friendly sites should be light hues like creams and greens - Warm and Nurturing
- Spirituality uses light blues, purples, pinks - Light and Airy
- Money is usually related to green hues - Most Common Color of Money

So consider your colors and how they impact on your image. If you are having your website created by a designer ask them to discuss colors with you. If you already have your site up and the colors can be improved consider a website upgrade. Many good website designers offer this service at a surprisingly low cost. At Inchol, we have helped tons of websites refreshed their face with more professional and nick looking. If your new color scheme results in customers spending longer on your site then it will be well and truly worth the initial effort.
 

With that said, images can quickly spruce up an unappealing website. This is true even if you do nothing more than add an image to your header and one to footer, and another to break up the monotony of your text. But the proper use of graphics can add even more appeal to your pages. Here are some quick web page design ideas focusing on graphics:

1. Swap Images - when your cursor passes over one web object, such as a button, it triggers the swapping of another graphic. For example, if you pass your cursor over a button that says Spain, when the current graphic is Canada, then a Spain graphic would replace the Canada graphic as long as your cursor remains over the Spain button. This is done using a simple JavaScript, and can be quite powerful when used properly.

2. Rollovers - are just another form of a swap image. In this case, a primary image changes to a secondary image when the cursor passes over the image link. Generally, when the cursor moves off the image, it reverts back to the primary image. Using our previous example, if your cursor passes over a blue Spain image button, it changes to a red button with a different Spain image. Again, this is accomplished with a simple JavaScript. Rollovers add a nice touch as long as you don't overdo them or create a page that takes forever to load.

3. Background Images - with a little imagination you can frame your page with images. All you have to do is add columns or rows or a combination of the two to your main table and fill them with appropriate background images. For example, if your web site is about organic gardening, you might add a left-hand column and a bottom row to your table. In the bottom row, you can use a bean plant as the background image, having it begin to grow vertically at the left corner, where the left-hand column's background image is a continuation of the plant growing up the side of the web page.

4. White Space - often referred to as negative space, is simply the open space between the graphic elements and text elements on your website. This includes the space between words and paragraphs, around images, etc.

The reason it's important to mention here is simple: white space not only gives your web pages a cleaner look, it makes the experience of reading the content much easier on the eyes. Don't overlook this important element of web page design.

There's no question we'd all like to have a great looking website, and hopefully these web page design ideas have been helpful. However, the most important thing to remember with good web site design is this: less is better. Don't overdo your graphics. Add them to your website layout as complementary elements, not as attention grabbers. A little restraint goes a long way.

Headings and focal points

Web visitors "skim" web pages looking at the headings and focal points rather than reading paragraphs. If the headings interest them, then they read the smaller text. If the focal points happen to be links to things they want to find out more about, they will click on those links. The individual pages in your website must have a layout that allows the visitor to find out as much as possible about your webpage at a glance.

When creating a web page, keep in mind that web users rarely scroll past the first screen. Depending on monitor size, resolution and the users browser settings, this means you are working with a very small area. 640 - 775 pixels wide is the rule of thumb that most webmasters follow. You will have to get your visitors attention or gain their interest with the content you display there. (If visitors do scroll, it is usually only 3 screenfuls worth or 2 clicks on their scroll bar so make sure your pages are not too long.)

If you follow certain basic rules for your webpage layouts both you and your visitor will be happy. Stay consistent with the following rules of page layout and your website will take on a professional appearance.

The importance of good webpage layout

The arrangement of the text and graphics should not be boring. If here is nothing to interest the eye your visitors will move on. Even with good graphics it would be difficult to make a poorly arranged web page look professional. More important is the fact that visitors to a page that lacks a clean appearance would soon tire of it.

New webmasters often make the mistake of paying too little attention to the layout of their web pages. It is imperative that your visitors feel good about your website and that is accomplished with clean, simple but pleasing page layouts. Look at websites that you find appealing and try to accomplish the same effect with your site.

Consistency counts

On this page all of the webpage content elements are left-justified regardless of where they are positioned. This gives a clean professional appearance, it is not cluttered and is the style most commonly used for internet webpages. Remember, no matter which alignment style you are using, keep it consistent. If you want your website to have a professional appearance all of your pages should use the same rules of alignment.

Balance the web pages

Text is not the only element of a website that should remain consistent. Colors, headers, footers and styles of graphics should reflect a uniformity to your visitors as they move through your website. This is where the pros shine! Nothing gives that sense of quality to a website like balance.

If all the pages of your website follow this type of pattern it will have that clean, uniform appearance that most web designers shoot for. Emphasize the main features of the page with a logical organization of both text and graphics. Don't underestimate the power of page layout it will make or break a website
 
Catching the eye of your website visitors

You must use a focal point to catch your visitors eye and emphasize the most important area of the page.

Your visitors will most likely skim quickly through your web pages looking for a particular subject, etc. You must present a focal point on each page that draws the eye to the main topic of the page and make it easy for them to decide if this is the information that they are seeking. Remember this when you develop your website layout.

Summary

The best way to understand what good web page layout is to the success of a website is to do some research. There are thousands of examples on the internet.

Study the style and layout of the top websites. Pick three of the most outstanding examples and see if you can emulate their appearance.

Spot the things that are key to the layout of the pages and go from there. Remember, first appearances count.

Poor navigation makes us think. Better navigation makes us think less. Great navigation is so obvious we don't have to think at all. This is such an important concept. That is the bottom line answer to every question about Web site navigation. How much thinking do we not want to do? If someone who's been living in a cave since the Web took off, can get online and figure out what a site is all about without help, that is just about the right amount of thinking.

That may be a silly example, but worrying about PageRank and not worrying about usability, is a waste of time, effort and finances. Yes, get visitors to the site, but don't let them sit staring at the page, trying to figure out what to do next, or where to go, or how to find what they're looking for. If the back button to the search results is the only thing that's easy to find and use on the page, guess what. That's the button that will be used.

Surf the Web, you can quickly find such common examples of poor navigation:

On the site of a major software company a link that goes like this:

Main nav link: PRODUCTS > Sub link: CopyDesk > Sub link: undefined (doesn't link to anything)

On the site of a printing company: three links to "business cards" in three different navigation bars all on the same page. Only after waiting for all three to load that they all go to the same place: an order form. None of the three gives users more information.


The solution.

Solutions to navigation problems are not always easy. Large, complex sites may have no choice but to offer multiple navigation. Sites with lots of pages and lots of links may need additional work to address these challenges. And then there's all the juggling to include search engine optimization. Some compromises may have to be made. Yet, keeping the user in mind, clarifying choices and eliminating confusion whenever possible, not only makes for happier site visitors, it offers the bonus of also helping search engines.

Navigation that makes us think:

Multiple navigation with duplicate or conflicting links. Vague links or links that don't go anywhere. Current page is not indicated. No navigation on page, forcing use of back button to get out. Active links to the current page. Not linking directly to the item named. Navigation that reflects the company's structure rather than division or classification meaningful to content and user goals.


Navigation that doesn't make us think:

All pages have at least basic site navigation. The navigation indicates the current page. Meaning of link text is clear and each is unique. All links go somewhere specific and unique. Categories related to product or service offered, not company organization. Repetitive links, if absolutely necessary, are clearly indicated as repetitive.

If something is hard to use it doesn't get used very much.

Prev    1 2     Next >>
Web design is a complex discipline, and there is a tension between designing for beauty and designing for function. Inchol is here to help you make web sites both pleasurable and functional, appealing and usable.