Don’t just change the color of the link, provide feedback

Instead of just changing the color of your links, provide your websites’ visitors with visual feedback for their interaction.

1. Improve the contrast between background and foreground

If you have a low contrast between the link-color and the background-color (white on light-green, like in the image shown above), apply a light text-shadow to your navigation links.

The text-shadow property adds a grey drop-shadow with one pixel to the bottom relative to the text (0px on the x-axis, 1px on the y-axis, 0px blur radius and the color #555)

a:link { text-shadow: 0px 1px 0px #555; }

Note: This effect is only visible in Firefox 3.5+, Safari 3+, Opera 9+ and Chrome.

2. Highlight the state of the link

Change the color for an :hover effect, or like I did in the navigation, apply a darker and slightly bigger text-shadow to the link.

With the following CSS applied, the link has a light 3D effect, like hovering over the navigation.

a:hover { text-shadow: 1px 1px 1px #000; }

Note: this works only in Firefox 3.5+, Safari 3+ and Chrome, but neither in Internet Explorer nor Opera 9+

3. Show me the click

If it’s a link, let the link show some reaction.

Use a:active to apply a small button-style effekt to your links. As a result to the code shown below, your link will “jump” 1px below its current position.

a:active { position: relative; top: 1px; }

4. Seamless transition for links & visible states

If image 4 + 5 looks the same to you — well, that’s by intention.

The 1^st page, right after you clicked the link, but before the 2^nd page loads.

The 2^nd page after the click.

I use the same color for a:focus and a.current (whereas .current is the class applied to the current page link on the 2^nd page.

a:focus, a.current { color: #111; }

I also used it to create a seamless transition between the 1^st and the 2^nd page. Note, it’s only useful if you know, that the now current link on the 2^nd page is at the same position like the a:focus on the 1^st page, e.g. the navigation above. Also note, if it’s not obvious that the new page loaded, because of a very big header using the browsers complete viewport, this effect can be confusing. It can also be confusing if your page loads very fast or very slow.

5. The complete transition effect

If you haven’t seen a lot of changes in the images above, open my website with either Firefox 3.5, Safari 4, Chrome 2 or Opera 9+ and check the top navigation above.

Thanks to Korsti and Björn.

With the help of Arne’s Google XML Sitemaps plugin you can easily create a Sitemap for Google Webmastertools and check your blog for any inconsistencies after Googlebot re-indexes your site. I was presented with some easy to fix 404′s, which resulted from an earlier permalinks structure. The next thing was to remove the “post feed links” and “trackback-URLs” from the Google index to avoid duplicate content.

You can tell Google not to index a certain URL by applying rel='nofollow' to the link. Open single.php from your theme’s folder and replace

<?php post_comments_feed_link('RSS 2.0 Feed'); ?>
with
<a href="<?php echo get_post_comments_feed_link() ?>" rel="nofollow">RSS 2.0 Feed</a>

The trackback-URLs are easier to fix. In my case they came attached with

rel="trackback"
to which I added a ” nofollow” so it resulted in
rel="trackback nofollow"

Repeat this procedure with all the files with “feed” and “trackback” URIs and upload them to your themes folder. Finally, wait and let the magic happen.

1. the new permalink structure is in some cases faster because of the way wordpress stores the URL information in the database (see further: Efficient permalink strategies for WordPress)
2. according to SEO’s, a link like cordobo.com/540-firefox-add-ons-for-developers/ is more likely to result in a better SERP position than (the same) link named cordobo.com/2008/09/30/firefox-add-ons-for-developers/

Migrating old permalinks to a new structure

To avoid duplicate content and 404 – Not found errors, you should redirect visitors and web crawlers (like GoogleBot) to the new URL with the HTTP Status Code 301 – Moved Permanently.

The fastest way to migrate your old permalinks to the new structure is Dean’s Permalinks Migration plugin. It’s from 2006, but it works great with WordPress 2.7.1. After uploading the plugin, activate it and enter your actual permalink structure (the old one), e.g. /%year%/%monthnum%/%day%/%postname%/ on the plugin’s options page and save it. Now you have done that, change the “Permalink Settings” to the new structure, in my case /%post_id%-%postname%/.

Canonical URLs for comments pages

I really like WordPress new way to break comments into various pages, because paginated comments can reduce your traffic and save your visitors browser (or RAM) resources. But on pages with a lot of comments, it can create a lot of duplicate content, like it happened here:

• http://cordobo.com/224-updateupgrade-to-wp-21/
• http://cordobo.com/224-updateupgrade-to-wp-21/comment-page-6/
• http://cordobo.com/224-updateupgrade-to-wp-21/comment-page-5/
• …

A consortium of leading web companies, including Google, Yahoo! and Microsoft, created a new standard to handle this kind of unintended duplicate content – Canonical URLs.

Q: What is a canonical url? Do you have to use such a weird word, anyway?
A: [...] Canonicalization is the process of picking the best url when there are several choices, and it usually refers to home pages. For example, most people would consider these the same urls:

* www.example.com
* example.com/
* www.example.com/index.html
* example.com/home.asp

But technically all of these urls are different. A web server could return completely different content for all the urls above. When Google “canonicalizes” a url, we try to pick the url that seems like the best representative from that set.

Quoted from Matt Cutts, SEO advice: url canonicalization

They came up with a simple solution, a reference in the <head> of the page to the preferred URL:
<link rel="canonical" href="http://cordobo.com/224-updateupgrade-to-wp-21/" />

To apply this link automatically to every page with comments, I added some lines of code to the functions.php file of my theme. Steve came up with a simple solution in his article Dealing With Duplicate Content Issues on WordPress Comments Pages:

function canonical_for_comments() {
global $cpage, $post;
if ( $cpage > 1 ) :
echo "\n";
echo "<link rel='canonical' href='";
echo get_permalink( $post->ID );
echo "' />\n";
endif;
}
add_action( 'wp_head', 'canonical_for_comments' );

If you use a plugin like All-In-One-SEO or Yoasts Canonical URL’s for WordPress, you don’t have to worry about it – both already take care about canonical URLs.

If you want to know more about duplicate content and how to avoid it using canonical URLs, watch Matt Cutts video or check the presentation he did at SMX West:

Screenshot of the Firefox “add-ons dialogue”. The uninstall option is disabled.

Uninstall the “Microsoft .Net Framework Assistant 1.0″ add-on

1. Hit “Start › Run › “regedit” – STOP! and hit “CTRL + SHIFT + ENTER” (“Run as Administrator”)
2. Navigate to “HKEY_LOCAL_MACHINE\SOFTWARE\Mozilla\Firefox\extensions“
3. Right click on the entry “{20a82645-c095-46ed-80e3-08825760534b}” and delete it
4. Navigate to “HKEY_LOCAL_MACHINE\SOFTWARE\MozillaPlugins“
5. Right click on the subkey “@microsoft.com/WPF,version=3.5” and delete it
6. Open Firefox and enter “about:config” in the address bar
7. Filter for “general.useragent.extra.microsoftdotnet” and “microsoft.CLR.clickonce.autolaunch” and delete/reset the strings (if applicable)
8. Restart Firefox and goto “C:\Windows\Microsoft.NET\Framework\v3.5\Windows Presentation Foundation“
9. Rename the folder “DotNetAssistantExtension” to “DotNetAssistantExtensionOld” and the file NPWPF.dll to NPWPF.dll.old (you can delete the folder and the file later if you don’t encounter problems)

This worked for me. I take no responsibility ;-)

Although the solution is quite simple, it’s a kind of annoying: the widgets are in use and hidden in the 2^nd or 3^rd sidebar – WordPress does not provide a simple way to deactivate or rearrange your widgets if you use a theme with only one sidebar and you have no access to the 2^nd or 3^rd sidebar.

• Switch back to a theme with two or more sidebars.
• Remove all the widgets from the sidebars.
• Switch back to your new 1-sidebar-only theme
• Reactivate your widgets.
• Enjoy ;)

Remember: the content of Text-Widgets gets lost if you deactivate them!

Feedmyapp – Your Daily Web 2.0 Sites Dose
“Feedmyapp is a Web 2.0 Directory with the best and latest web 2.0 sites and web 2.0 applications.”

OpenID Best Practices – Yahoo! Developer Network
“Yahoo! conducted usability studies in July 2008 to understand the Yahoo! user experience while navigating the OpenID journey from the Relying Party to Yahoo! and back. The participants were all experienced Yahoo! users who were tasked with signing into to a 3rd party site using their Yahoo! IDs without having to create a new account for the site.”

GUI Prototyping Tools
“A list of tools helping with drawing screen mock-ups.”

Interaction Design Pattern Library – Welie.com
A large list of design pattern for websites. If you’re an ux-designer or ui-designer, you better bookmark that page.

COLOURlovers :: Color Trends + Palettes
“Find design inspiration with thousands of palettes and color schemes to fall in love with. Influence color trends by rating, commenting and sharing.”

Color Scheme Generator 2
Like it says, an online color scheme generator.

Scroll Multiple Videos with jQuery.Scrollable.js
“Tero Piirainen has created a handy Flowplayer tool that scrolls playlist of several videos using jQuery. The tool is pretty light, which is wrapped in 3.9 Kb javascript file. This tutorial combines the forces from flow.embed and jquery.scrollable and this is what I accomplished to do with just a few lines of code.” Tutorial