Culterama TV Interview in Colombia with Adam Schofield

    

Posted on January 9th, 2008 .

Adam Schofield is a friend of mine who is couch surfing around world and writing a book about his experience. He has been interviewed by a Colombian TV show called Culterama where he spoke about his experience so far and philosophy behind couch surfing and travelling.

Popularity: 76%

Listen to this podcast

CSS: Automatically Marked and Accessible External Links

    

Posted on December 18th, 2007 .

The guideline 13th from the Web Content Accessibility Guidelines 1.0 clearly states that a website should provide clear navigation mechanisms.

13.1 Clearly identify the target of each link. [Priority 2]
Link text should be meaningful enough to make sense when read out of context — either on its own or as part of a sequence of links. Link text should also be terse. For example, in HTML, write “Information about version 4.3″ instead of “click here”. In addition to clear link text, content developers may further clarify the target of a link with an informative link title (e.g., in HTML, the “title” attribute).

This guideline indicates that every external link should be clearly marked. I believe that is important to make websites that are accessible but on the other hand marking all external using classes or title attributes it is time consuming and prone to error. It would be very easy to overlook the odd link, well at least for a forgetful soul like me.

The method used in this tutorial addresses this issue effectively using only CSS.

The following CSS attribute selector selects any link with the href attribute that begins with “http://“, but does not contain the defined domain name (yourdomain.com for this example). It uses two separate attribute selectors so that it will match the URI whether or not uses the www.

a[href^="http://"]:not([href*="yourdomain.com"])::after {

content: "\2197";

}

The CSS code above matches:

<a href="http://www.yourdomain.com">Link with www</a>

and

<a href="http://yourdomain.com">Link without www</a>

Smashing Magazine has explored this technique before, the CSS code above simply places an north east arrow ( ↗) after any outgoing link. To make things a little prettier I have just tweaked it further:

1. To make the icon appearing different for each link state, I have created three variations of the same image in one file:

2. Added a CSS rule to add a background image to the normal state of the external link.

a[href^="http://"]:not([href*="yourdomain.com"]) {

background: url(images/external_link.png) no-repeat 100% 3px;

padding: 0 12px 0 0;

}

3. Added a CSS rule to add a background image to the hover state of the external link.

a:hover[href^="http://"]:not([href*="yourdomain.com"]) {

background: url(images/external_link.png) no-repeat 100% -97px;

padding: 0 12px 0 0;

}

4. Added a CSS rule to add a background image to the visted state of the external link.

a:visited[href^="http://"]:not([href*="yourdomain.com"]) {

background: url(images/external_link.png) no-repeat 100% -197px;

padding: 0 12px 0 0;

}

Note

Internet Explorer doesn’t seem to like this method very much. It is not a big deal though because it simply ignores the rule, not displaying the background image. But to be honest… Who cares! There are so many standard compliant rules that don’t work with IE anyway.

Let me know what you think if you encounter any problems with this method or if you feel that there are better ways to achieve this.

Tino

Popularity: 100%

Listen to this podcast

Personal Challenge: Get Better Rankings For “Tino”

    

Posted on December 17th, 2007 .

Over my web developer/SEO(er) career I have optimised many of my websites for a vast number of keywords.

A couple of months ago I have noticed through my web analytics stats that someone reached my website when searched for ‘Tino‘ on Google. When I checked the SERPs, this website were ranking for tino at the following positions:

SE Rankings for ‘tino’ on 03 November 2007

• Google.co.uk - 35th
• Google.com - N/A
• Yahoo.com - 153th
• Yahoo.co.uk - N/A

I have then decided to take on a little challenge of my own: to reach Google and Yahoo 1st page and share my experience with you.

Please note: I’m not at all trying to foolish search engines with this experiment, seeing that Tino is my name it makes perfect sense ranking well for that keyword because friends and previous clients may try to find me using that keyword.

Well, as it stands now I have managed to improve my rankings a little bit:

SE Rankings for ‘tino’ on 17 December 2007

• Google.co.uk - 14th
• Google.com - N/A
• Yahoo.com - 58th
• Yahoo.co.uk - 217th

It’s not bad but not first page yet :-). I have achieved this mainly with on page optimisation, some reciprocal linking and other off page optimisation techniques.

Have you got any other suggestions?

Popularity: 83%

Listen to this podcast