Blogging for SEO

Never, ever link to the page you’re on

Remember, navigation tells a story. When the user mouses over a link and that trusty pointer hand appears, that says: “This is a place you can go. Click me to go there now.”

When the user clicks, their expectation is that click will make something happen or take them to a new place. If that does not happen, that’s a bad experience and the user is filled with doubt and uncertainty. Your site’s trustworthiness just went down a notch.

Show where you are

In practical terms, this means that when a user is on the main page for a section (awesomeness.org/section), the global navigation element that had been linking to that section should be unlinked and visually highlighted so that, at a glance, you can tell where you are.

Then, when the user drills down to a content page within that section (awesomeness.org/section/page), the global navigation element for that section should go back to being a link (because now the link has utility), but it should not go back to looking exactly like it did on the home page (because now you’re in that section).

Think before you link

If you were considering nominating me for Captain Obvious after the last two guidelines, you’re gonna love this one. Just think about every link in your global navigation. Ask yourself, “Will users really need this link every single time they visit?”

Just because you’ve decided to give a page a top-level directory does not mean it has to be represented in the global navigation. And if it is, what you’re communicating to the user is: “This thing right here is absolutely integral to this site and what you can do here.”

So choose wisely. Think of everything in your global navigation as describing your site. Make sure it tells the story you want to tell.

At every stage during development ask yourself whether you need that extra div wrapper or not. Can existing elements be utilised for background images without adding extraneous code?

Thinking ahead and planning your layout beforehand will often lead to more concise code and an easier-to-manage layout.

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.

Pseudo-elements are fictional elements that do not exist in HTML. They address the element’s sub-part (non-existent in HTML) and not the element itself. In CSS1 there are two pseudo-elements: ‘first-line pseudo-element’ and ‘first-letter pseudo-element’. They can be attached to block-level elements (e.g. paragraphs or headings) to allow typographical styling of their sub-parts. Pseudo-element is created by a colon followed by pseudo-element’s name, e.g:

P:first-line
H1:first-letter

and can be combined with normal classes; e.g:

P.initial:first-line

First-line pseudo-element allows sub-parting the element’s first line and attaching specific style exclusively to this sub-part; e.g.:

P.initial:first-line {text-transform: uppercase}

<P class=initial>The first line of this paragraph will be displayed in uppercase letters</P>

First-letter pseudo-element allows sub-parting the element’s first letter and attaching specific style exclusively to this sub-part; e.g.:

P.initial:first-letter { font-size: 200%; color: red}

<P class=initial>The first letter of this paragraph will be displayed in red and twice as large as the remaining letters</P>

PNG is great, but I can’t use them because they don’t work in Internet Explorer.

This one is almost entirely false. PNGs of any flavor will display in Internet Explorer, even back to some pretty old versions. The problem here is the alpha transparency of PNG-24’s doesn’t work in IE 6. That’s it. if you don’t need alpha transparency, you can do anything with PNG in IE that you could in any other browser. If you DO need alpha transparency, even that isn’t too big of a deal as there are lots of ways to deal with it.

PNG has the smallest file sizes.

When comparing GIF to PNG-8, PNG-8 often has better compression. Not always, but often. But if you are talking about PNG-24 (The ones with alpha transparency), they never have the smallest file sizes. In fact, they are often nasty large and huge culprits for slow loading pages.

…from css-tricks

1. Get a Consistent Base Font Size

Until IE finally supports the resizing of text in pixels, this is the best technique to gain full control over your font sizes. By setting the body font-size to 62.5%, that will set your font size to 10 pixels. That way, 1em is equal to 10 pixels.

2. Get Consistent Margins

There are some great CSS resets out there, but I usually don’t need one that goes so far. I like to just remove the margin and padding from every element.

3. Set a Float to Clear a Float

Floating is probably one of the most important things to understand with CSS, but knowing how to clear floats is necessary too. All you need to remember is: Set a Float to Clear a Float.

4. Image Replacement

Sure, there are a lot of different image replacement techniques. But, I think that you get to most benefits from this technique.

5. Faux Columns

It is very common in layouts to have 2 columns next to each other, with one column having a background color, and the other column just being white. Since the columns will almost never have the same amount of content in them, the easiest way to fake this, is to have a 1px tall background image being repeated vertically in the containing element of the 2 columns.

6. CSS Sprites

CSS sprites is the technique of combing images to lessen the number of calls that need to be made to the server.
—————-
Listening to: Common - The Game - Common & DJ Premier
via FoxyTunes

One of the disadvantages of CSS is its inability to be controlled vertically, causing one particular problem which a table layout doesn’t suffer from. Say you have a column running down the left side of the page, which contains site navigation. The page has a white background, but you want this left column to have a blue background. Simple, you assign it the appropriate CSS rule:

#navigation
{
background: blue;
width: 150px
}Just one problem though: Because the navigation items doesn’t continue all the way to the bottom of the screen, neither does the background color. The blue background color is being cut off half way down the page, ruining your great design. What can you do!?

Unfortunately one of the only solutions to this is to cheat, and assign the body a background image of exactly the same color and width as the left column. You would use this CSS command:

body
{
background: url(blue-image.gif) 0 0 repeat-y
}This image that you place in the background should be exactly 150px wide and the same blue color as the background of the left column. The disadvantage of using this method is that you can’t express the left column in terms of em, as if the user resizes text and the column expands, it’s background color won’t.

Using this method the left column will have to be expressed in px if you want it to have a different background color to the rest of the page.

With style sheets, you can change the cursor when the mouse moves over a certain area or over a link. The command is just:

cursor:type

Where we will replace “type” with the type of cursor we want. So, let’s say we want a crosshair (looks like a cross) when someone moves over a link. We just add the style=”cursor:crosshair” attribute to the link tag:

<A href="#" style="cursor:crosshair">A Cross Link</A>

This would give us the following link, move your mouse over it to try it out:

A Cross Link

Here are some other cursor types:

auto             Shows it according to how the viewer has it set (plain)
crosshair     Looks like a cross
default        Makes the cursor stay the same
move           Looks like you should be moving something
hand           The hand you usually see over links
help            A question mark beside the arrow
text            The bar you see when the mouse is over text
wait           The “waiting” hourglass!

In Joomla!, a Component is a major part of the overall functionality of the CMS. It is generally an application, or process, that enables content or information to be created and controlled. A Component sits on top of, but integrates closely with, the Joomla! Framework itself.

Typical examples of the types of Component available within the Joomla! core installation are:

• Content
• Banners
• Administration
• News Feed
• Front Page
• Web Links
• Menu

Some of these add functionality to the Front-end, of Joomla! whilst others, the Back-end. This list is by no means exhaustive as Joomla! typically installs more than 40 Components on a standard installation. The output from Components, that run in the Front-end, can usually be found in the main content area of the displayed page. Those for the Back-end will generally be shown in the main content area of of the Administrator workspace.

Info found at Joomla.com

You may have developed your website using an expensive “what you see is what you get” editor but there’s no guarantee that site visitors “will get the website as you see it“.

You will need to extensively test the website to ensure that visitors have a comfortable stay and don’t leave your site in a jiffy.  And here are some useful tools to help you completely check your website:

Browsershots is an online service that automatically captures full page screenshot images of your website in various browsers across all different OS platforms. You also have the option to preview the website design in browsers with or without Flash, Java and JavaScript.

browser-screenshots Browsershots is extremely popular and you may therefore have to wait a few minutes for this service to render screenshots of your website.

IE NetRenderer is another service that’s much faster than Browsershots but it can check the rendering only for different versions of Internet Explorer. Mac oriented websites can try BrowsrCamp which is like Browsershots but for the Mac OS browsers only.

To see how your website appears on the small screens of mobile phones like the BlackBerry or Windows Mobile, check out BrowserCam. Another good option is the Opera Simulator that lets you experience a mobile version of Opera from the desktop.
—————-
Listening to: Staind - Please
via FoxyTunes