Showing posts with label basic layout. Show all posts
Showing posts with label basic layout. Show all posts

Saturday, June 9, 2007

How To Use Simple Designs And Layouts To Improve Your Search Engine Rankings

Ok, your web designer has just shown you the latest design he has just created for your new website. Yes, it is superb looking, with the flash content and interactive games, very cool looking menus which explodes with a stereo amplified mp3 when your mouse hovers on it and tons of other whoop-ass javascripts running around. Cool right? This will certainly draw tons and tons of customers to your site. But will it? A question that comes into mind is how will your customers find your site in the first place?

I would recommend you to rethink on choosing such a design. The best thing you can do for your new site is to use a simple design. A clean simple layout can help you get the rankings first. Even if your site is not new, I would too recommend you to choose a simple and less complicated design. Why? Simple, good content rank well with Search Engines. Search Engines such love these content but ONLY IF they are readable by the Search Engine(SE) spiders that index your site. And nowdays, simple designs are all the rage too in the web community. Simple designs can look elegant too, both to SE spiders and to your visitors. And ranking well in Search Engines can get you the visitors you crave.

I have complied a list of tips(onpage optimization) to get you started on getting your simple site up in Search Engine rankings.

1. HTML - Use HTML to create your webpage. You won't go wrong with HTML or XHTML compliant sites. Although using other languages such as php or asp will not be harming your rankings, they are more complicated and require a lot of coding skills. If you are good in php, I would say go for it. If not, try HTML first. One more thing, you can use HTML to create Search Engine friendly static urls for your internal links. Internal links are the cornerstone in getting your site indexed. Sure, php has it's own mod-rewrite feature, but that requires a lot of time and effort to do. If you don't need to create a dynamic site, why go for php or asp?

2. Use CSS - Use CSS to design your site. Easy to learn, very Search Engine friendly and doesn't trap Search Engine(SE) spiders like frames do. And CSS can create very beautiful and elegant webpages, which can attract your human visitors. This is perhaps the only thing that webmasters and web designers can agree on, CSS scores on both counts.

3. Text based menu/navigation - Not as good looking as graphics but using a text based navigation menu will make your site very appealing to SEs. SE spiders can't read graphics (they don't know what it is), so it will not rank. If you need to use graphics for your menus, have a small text based footer menu at the bottom of your page to make it easier for SE spiders to navigate your site. They need to index your site first before you can rank. Use the alt tag for your graphics as well.

4. Avoid Javascripts - Although there are some evidence that googlebot can now read some types of javascripts, they are still best avoided because you can never know whether they can follow your links or navigate your site at all. If you need to use javscript, don't use them with your navigation links, especially internal one.

4. No Frames - Frames trap SE spiders, again avoid them at all cost. This is Search Engine Optimization(SEO) 101.

5. Avoid Flash - SE spiders cannot read flash, so they can't index flash content. If you need to use flash, make sure they are not for your main content, use them for your logo or some eye candy only. And never create a site based completely on flash. Flash menus too should be avoided. They are a bane to getting good rankings . 6. Minimalist - Having a simple layout with minimal graphics/audio/flash/scripts can help speed up loading of yoursite. Your visitors don't like to wait for your site to load when there is a back button handy. And neither do SE spiders.

How to Build a Basic CSS Layout

Designing without tables by using CSS layouts is fast becoming the new standard on the Web because of the benefits mentioned in my previous article. Web browsers used these days are now able to render web pages proficiently. In this article I will endeavor to create a basic 2 column CSS layout which you can use for future design projects.

Web Page: http://www.isitebuild.com/css/css-layout.html Style Sheet: http://www.isitebuild.com/css/stylesheet.htm

1. Divide your page into sections - the div id tags allows you to create distinct divisions on your web page. They are identified with a unique id. You can then add a style (css selector) that specifically applies to the div of that id. Remember to include the DOCTYPE (to render your page accurately in the browsers) and meta tags (enables search engines to spider your pages).

wrapper: is the div that wraps around all the other divs like a container for the page elements. header: defines the top banner of the page main: defines the main content of the page nav: defines the navigation of the page footer: defines the footer and sub-navigation of the page

2. Create the CSS code - the CSS code styles the page as a centered 2 column CSS layout with a navigation bar and a footer. The div#wrapper style creates the centered box which acts as a container for the rest of the page content. The width: 80% rule sets the width of the div. The background-color:#FFFFFF rule creates a white background for the div. The margin-top: 50px and margin-bottom: 50px rules create a space of 50 pixels for the top and bottom margins for the div itself.

The proper way to center a block-level element with CSS is to set margin-left: auto and margin-right: auto. This instructs the browser to automatically calculate equal margins for both sides, thus centering the div. The border: thin solid #000000 rule adds a border around the outer div. The rest of the CSS code styles the divs for the header, footer, nav, and main content.

The div#header and div#footer styles set margins and padding for those divs. In addition, div#header includes the text-align: center rule to center the header text, and div#footer includes the border-top: thin solid #000000 rule to create a border along the top edge of the div to replace the horizontal rule above the footer in the table-based layout.

The div#nav and div#main styles create the two columns in the middle of the centered box. In the div#nav style, the float: left rule pushes the div to the left side of its parent element (the wrapper div), and the width: 25% rule sets the div's width to 25 percent of the parent element. With the nav div floated to the left and limited to a set width, it leaves room for the main div to move up to the right of the nav div, thus creating the two-column effect. The div#main style includes the margin-left: 30% rule to keep the main text aligned in a neat column instead of spreading out below the nav column. The main div's left margin is set to a value slightly larger than the width of the nav div.

Style Sheet http://www.isitebuild.com/css/stylesheet.htm

If links are placed elsewhere on the page they will inherit the same properties as above..a blue link that hovers to red. What if you wish to create another set of links that are a different color and on passing your mouse over them they are underlined.

4. Create the bottom navigation - to include this in the