Blogging for SEO

Your web site should be easy to read

The most important rule in web design is that your web site should be easy to read. What does this mean? You should choose your text and background colors very carefully. You don’t want to use backgrounds that obscure your text or use colors that are hard to read. Dark-colored text on a light-colored background is easier to read than light-colored text on a dark-colored background.

Your web site should be easy to navigate

All of your hyper-links should be clear to your visitors. Graphic images, such as buttons or tabs, should be clearly labeled and easy to read.

Your web site should be easy to find

People will not come to your web site unless you promote your site both online and offline.

Your web page layout and design should be consistent throughout the site

Just as in any document formatted on a word processor or as in any brochure, newsletter, or newspaper formatted in a desktop publishing program, all graphic images and elements, typefaces, headings, and footers should remain consistent throughout your web site.

Your web site should be quick to download

Studies have indicated that visitors will quickly lose interest in your web site if the majority of a page does not download within 15 seconds.

Start with this

<a href="#">Title <span>Tooltip</span></a>

Anchor is given position:relative and span is placed absolute and
styled separately. We initially hide the span element and show it only
when user hovers the link (using a:hover span selector). 

Here's the css:

a{
	z-index:10;
	}
a:hover{
	position:relative;
	z-index:100;
	}
a span{
	display:none;
	}
a:hover span{
	display:block;
	position:absolute;
	float:left;
	white-space:nowrap;
	top:-2.2em;
	left:.5em;
	background:#fffcd1;
	border:1px solid #444;
	color:#444;
	padding:1px 5px;
	z-index:10;
	}

Click here to see it in action

—————-
Listening to: Chevelle - Panic Prone
via FoxyTunes

Scrollovers are a way to quickly and easily add flair to your web pages, giving your users an experience they weren’t expecting.

Integration of Scrollovers into your web site couldn’t be easier, even if you’ve already built the site that you want to include Scrollovers on. In just minutes you will be able to have them appearing on your own pages.

A major advantage of Scrollovers being created using standard HTML and Javascript is the option of applying CSS styling, just like you would on any other Hyperlink.

Check it out here
—————-
Listening to: Breaking Benjamin - Shallow Bay
via FoxyTunes

If you are new to CSS and find yourself in a tight spot not knowing what exactly you need to complete a task you were given, I highly recommend checking out the CSS Panic Guide. It is full of guidelines, resources, and discussion forms.  I could possibly help to get you out of that tight spot you’ve found yourself in, so check it out.

Web 2.0 is a trend in the use of World Wide Web technology and web design that aims to facilitate creativity, information sharing, and, most notably, collaboration among users.

quickribbon.com  generates those nice web 2.0 ribbons for you. Try it out.

With CSS we can target the ‘:hover’ child class for links and update their background properties.

Example
.nav a:link, .nav a:visited {
width: 160px ; height: 30px ; display: block; overflow:hidden;
background: url(’images/nav1.gif’) 0px 0px no-repeat;
}
.nav a:hover, .nav a:active{
background-position: 0px -30px;
}

The Image itself contains both the normal and hover state. This is called a sprite, using this technique the image needs only be loaded once.

—————
Listening to: Aesop Rock - Coffee
via FoxyTunes

Decide on a basic layout using the grid system, about 800px wide is good. Measure out the amount of space you want between your columns, width of columns and the width of your content area.

Here is an example of what one layout might look like:

gutter 1- 24px 3%
column 1- 384px 48%
gutter 2- 24px 3%
column 2- 160px 20%
gutter 3- 24px 3%
column 3- 160px 20%
gutter 4- 24px 3%

total 800px 100%

When calculating your percentages in a CSS liquid layout, we are not basing them on an exact 800px width, we are basing them on the variable size of a browser the user might view the website in. So, make sure you leave some room within your calculations for errors that may occur. This means rounding one or two of your measurements down a percentage point. One way to do this is to have the percentage width of a gutter set to undefined.

Linking and/or importing stylesheets would seem to be a no-brainer to the intermediate or advanced CSS developer, but I want to stress why this is so important. I’ve seen many sites start out with clean, well-organized CSS files but then get littered as time goes by, with embedded or even inline styles (due to fast updates needed on short deadlines, or possibly sometimes even pure laziness).

Imagine that you are working on an extremely large-scale website with hundreds of ways content can appear. You have fast deadlines, so you opt for making “quick fixes” or updates by using embedded or inline CSS. Years go by, and this habit continues… Until one day you’re told the site is being completely redesigned (but all the content is to remain the same), and you only have a week to build it (including testing).

Normally, this would have been a fairly simple task of updating the stylesheet(s). Except you have years worth of “quick fixes” scattered throughout the site — and no way to remember where they all are. So now you have to either a) find a way to clean everything up and get everything styled for the redesign in one week (Good luck!), or b) find a new job.

Don’t make your job harder than it really has to be. Linking and/or importing your stylesheets is not optional. Create it clean, keep it clean, and you’ll be much happier.

This little trick gives your image a bit of a white border around the edges, just like photos in real life often have. Like this:

.photo img {

border: 1px solid #999;

background-color: #fcfcfc;

padding: 4px;

}

You can see the results here. What we’ve done is added a gray border to all four sides, changed the background color of the image to a very pale gray (almost white), and then added a bit of padding to all four sides between the background and the image itself, so the background color could show through. And you’ll note we used a class of “photo” here: this way, we can pick and choose in our code which images get this treatment.

Basically, footers need to provide users with the information they are looking for. This is why contact details and a brief information about site or / and site owners needs to be placed in the footer. Corporate designs may need to provide driving directions, telephone number, a web form or at least an e-mail.

Blog designs usually have a bunch of different data hidden or displayed in their footers. For instance, the latest posts, comments, last job opening, last forum discussion or link to a random post.

Some designers go even further and place the whole navigation at the bottom of the page. In such cases the site is split in two parts; the upper part takes care of the content while the bottom section takes care of everything else. In such cases it’s not really reasonable to speak about footers.
—————-
Listening to: Breaking Benjamin - Forget It
via FoxyTunes