10 quick tips to help make your CSS coding as pain-free as possible.

1. Keep it Simple

This may sound obvious but if you find yourself using complicated coding to achieve your design then you should think again about whether the feature you need is really necessary or if you're just thinking about your design and not your visitors. Too often designers get caught up in their own design and go to great lengths to produce a certain visual effect only to find later on that visitors find it either irritating or unusable.

Complex code is usually the result of muddled thinking. Plan your layout logically and work from the outside in and from the top down where possible. Look at what containers you will need and break jobs down into smaller parcels. I usually start with a page wrapper and then progress logically through the header, navigation, main content and footers etc trying to preserve the flow of the document as much as possible.

While good visual design is necessary to attract visitors you must still have good content and a usable and accessible site. If you find your html and css looks like spaghetti then have a re-think and see if you can simplify it. This will make it easier to maintain in the future and will often save code and bandwidth.

2. Don't use hacks unless its a known and documented bug

This is an important point as I too often see hacks employed to fix things that aren't really broken in the first place. If you find that you are looking for a hack to fix a certain issue in your design then first do some research (Google is your friend here) and try to identify the issue you are having problems with.

If you find its a known bug then 99% of the time there will be a known solution to this bug and you can safely use a hack if required knowing that you are fixing a bug and not just correcting bad coding.

I couldn't count the number of times I've seen layouts using hacks when all that was needed was to control the default margins on the page (see next tip).

3. Take care of margins and padding on all elements that you use

All browsers apply default padding and margins to most elements and the amount they apply varies quite substantially. Therefore you need to explicitly control the padding and margins on all the elements you use.

This is covered in depth in this article "No Margin For Error".

4. Avoid using too much absolute positioning

Most novices to CSS quickly latch on to absolute positioning because it is pretty straight-forward and does what it says on the box. However absolute layouts have a number of problems and the biggest problem of all is that absolute elements are removed from the flow.

This means that when you absolutely place an element then it has total disregard to whatever else is on your page. It will overlap whatever was in that position and will take no notice of other content at all. The result of too much absolute positioning is that you end up having to control everything with absolute positioning and makes for a very rigid and inflexible layout.

[More]

What is tableless web design?

In simple words, tableless web design is basically a method whereby page layout control is achieved without the use of HTML tables. Instead, text and other elements on a page are arranged using CSS (Cascading Style Sheets). This language is the brainchild of the W3C (World Wide Web Consortium). It was designed in such a way as to improve web accessibility as well as to make use of HTML for semantic purposes rather than presentational purposes.

Below is a quick list of 10 advantages of using tabless web design techniques in your next web design project.

1. Separate content from presentation. An external style sheet can contain all the styles for your web site, then if you want to change the content you only have to edit one style sheet. This is great for a web site that contains hundreds or thousands of pages. This keeps your development time low and your web design clients happy!

2. Google and search engine benefits. Google gives more weight to content closer to the top of your HTML document. Search engines spider the content that comes first in your source code. With CSS you can easily structure the content to appear first with the rest of the source code following it. This will help outrank your competitors who may have their navigation appear first and their content last. Using the power of CSS to manage your page content can greatly improve you search engine keyword ranking.

3. Fast loading pages. Tables slow down the loading of your pages because the spider has to crawl through all the code required to build each table. If your tables are nested inside each other your page will load even more slowly. Designing CSS-based web pages will speed up the loading of your pages considerably because most of your display code is all contained in one style sheet.

4. Small file size. CSS will reduce the file size of your html document. If you look at a web page that is designed with CSS you will notice that the size is very small compared to one designed with lots of tables. This also helps reduce load times and improve your website search engine ranking.

5. Reduce website code clutter. CSS allows you to get rid of a lot of extraneous html code therefore making your site code neater your files smaller. This makes it easy to alter the code if you need to make edits as well as improving your overall search engine page performance.

[More]

Clients and readers often ask why a site that's younger, smaller, or just plain "uglier" outranks them. There really isn't a simple answer. More than a few times I've had to say, "I don't know." But there are some things to take into consideration when a competitor is outranking you. Addressing these issues could be the catalyst for your Web site moving up into those coveted top spots.

Content Is King

No -- I didn't coin that phrase, but the number one reason for getting outranked by a competitor: better, and much more, content on their site. Don't forget your content needs to be original, unique and relevant.

More pages will not necessarily make you rank. We're talking about more text. Do you have an all Flash Web site with little text to feed the search engine bots? It may be a flashy classy slideshow. It may be much more aesthetically pleasing than your competitor's site.

If the search engines, though, can't spider (define) your site to determine how relevant your page is to a particular query, you're not going to rank well for that query. That's not to say you can't use Flash, just wrap some text around it -- or work around the problem.

Support System

In travel, my particular niche, many of our clients' competitors are part of a huge chain of Web sites with vast numbers of pages. The pages for hotels in New Orleans aren't relevant to the pages for hotels in New York City, but if all those pages live on the same domain, they lend power to all the pages on the site.

A 10,000 page site is going to have a much easier time ranking for a particular keyword phrase than a 10-page site, particularly if they're using that keyword phrase in their on-site optimization in the correct manner.

Architecture is the Path to Good Rankings

How is your site constructed? Do you have well thought out navigation and easy to understand "paths" through your Web site. Users and search engine spiders use your architecture to learn what your site is about.

The more pages the spiders can reach, the more "credit" you have for having a lot of content related to phrases. Think about the user navigating your site and make sure relevant content is linked together, and irrelevant content is not.

[More]

Local search is a valuable resource for any business looking to build a bigger client pool. Is your business located in the major local search listings? I recently ran across this great 8 part list that may help improve your local search traffic and improving your overall business.

1. Make sure that you have a crawler friendly web site

The first step in improving your business performance in local search engines is to make sure that the search engines can easily crawl your site, and identify your business keywords. Minimize the use of tables, and avoid deeply nested tables. Make sure that your business name and address are featured prominently on the page as text, and not hidden from the crawlers in an image file. Your page title should include your business name, address and key words. Place an "H1" header near the top of the page that also has your business name, address, and key words.

2. Include your business address twice on the page

In addition to placing your business address prominently on the page, also include it in the footer. Abbreviate the business state in one of the addresses, and spell it out in the second. Abbreviated states are sometimes misinterpreted by the crawlers. For example, MD represents both a state and a doctor.

3. Check out your business listing on the major search engines

Check out your business listings on Google, Yahoo Local, and MSN Live Search. If your business is not found, you should submit a listing at Google, Yahoo, and Superpages (for Microsoft Live Search).

For each business listing, make sure that your information is correct, your business description is complete, and that it uses the same keywords that you are using on your web site. Make sure that your description has all the information that your potential customers will need to contact you, since people often will not click through to your web site from the local business listing. Include the county in addition to the city on your business listing. Finally, check out any photos of your business on the business directories, and provide better photos where appropriate.

[More]

Webmaster tools from Google are indispensable for people who optimize their web site for indexing with the Google system. Google Analytics is a new statistics and metrics tracking feature offered by the team at the google compound. This free web based analytics software is the perfect tool for you to track your users and web marketing campaigns for all of your web sites and projects.

We wanted to highlight some of the wonderful webmaster-specific metrics available within the Google Analytics system for you, since it offers a lot of easily-accessible information that will enrich the daily online work you're doing and the web sites you are building. Do you know how many of your web site visitors are using IE versus Firefox? And even further, how many of those IE or Firefox users are converting on the goals you have created? Google Analytics will tell you important information like this so you can develop and customize your website for your targeted audience.This also is a helpful feature when building and designing your web project, when you are designing your website, you can prioritize your testing to make sure that the website works on the most popular browsers and operating systems first.

[More]