Max Design » Articles

Some info on URL canonicalization

Russ — Thu, 06 Nov 2008 21:42:44 +0000

I have seen the negative effects of URL Canonicalization in action. Have you?

“Canonicalization is the process of picking the best url when there are several choices, and it usually refers to home pages.”

SEO advice: url canonicalization

“In computer science, canonicalization (abbreviated c14n, where 14 represents the number of letters between the C and the N) is a process for converting data that has more than one possible representation into a “standard” canonical representation.”

wikipedia – Canonicalization

“In information technology, canonicalization (pronounced KA-nahn-nihk-uhl-ih-ZAY-shun and sometimes spelled canonicalisation) is the process of making something canonical — that is, in conformance with some specification.”

What is canonicalization

“If the search engines sees a page as being published at many separate URLs, the search engine may rank your pages lower than they would otherwise, or not rank them at all. Canonicalization issues can split link juice between pages if people link to variants of the URL.

URL Canonicalization: The Missing Manual

“The practice of consolidating all versions of a page under one URL is referred to as “canonicalization” (because you collapse all versions under the “canonical” or true version). By adhering to several best practices, you should be able to address 90% of common site-wide canonicalization issues on your site and consequently increase how your site ranks.”

Domain Canonicalization

“Your website can be accessed with www.domain.com and domain.com. Since Google penalizes this due to duplicated content reasons, you have to stick your domain to either www.domain.com or domain.com. But – since some links are outside of your website scope and the search engines already have indexed your website under both addresses, you can’t change that easily.”

.htaccess Redirect/Rewrite Tutorial

Valid replacement for ol type=”a”

Russ — Tue, 16 Sep 2008 02:06:54 +0000

I was recently sent this question:

I have used
in my markup. The W3C validator tells me that this is invalid. How can I change the “type” of an ordered list’s the list without using this attribute?

Answer:

The type attribute associated with the

has been deprecated as it is considered style information. This means it should be achieved using CSS rather than markup.

Ideally, authors should use the list-style-type property which can specify a wide range of options including:
- disc
- circle
- square
- decimal
- decimal-leading-zero
- lower-roman
- upper-roman
- lower-greek
- lower-alpha
- lower-latin
- upper-alpha
- upper-latin
- hebrew
- armenian
- georgian
- cjk-ideographic
- hiragana
- katakana
- hiragana-iroha
- katakana-iroha
So, the preferred markup would be something like:

HTML:

Google and “noodp”

Russ — Sat, 09 Aug 2008 00:29:39 +0000

I was recently sent this question:

I noticed that some sites use the code below. What is this used for?

Answer:

First of all, this is a meta element. When used, it must be placed in the head of html documents. The meta element is used to provide meta information about a document. The meta element must have a property (name) and a value (content).

In this case, the value (content) is “noodp” – which stands for “No Open Directory Project”.

But what the hell does this mean?

Google automatically creates the title and description (or “snippet”) for each site – using the content of a page as well as references to the page that appear on other sites.

Google sometimes users descriptions within the Open Director Project to generate “snippets”. But what if you don’t like the snippet that is being used?

To prevent all search engines (that support the meta tag) from using information from the Open Directory Project for the page’s description, you can use the following:

HTML:

XHTML:

To specifically prevent Google from using information from the Open Directory Project for a page’s description, you can use the following:

HTML:

XHTML:

Uncovering the “Explorer 6 Duplicate Characters Bug” in the wild

Russ — Mon, 03 Mar 2008 11:40:08 +0000

I don’t know about you, but I get very excited when I see an Internet Explorer 6 bug in the wild. It’s like bird-watching – coming across these weird and quirky rendering bugs in their natural habitat.

Take for example a recent update I made to a client’s home page. The two new buttons at the bottom of the page looked ok in all browsers except IE6 – where the last character – the “s” was repeated on the line below

Why does this occur?

As the IE bug bible states, the bug is triggered

“…only when the final float fills the container to the right edge, or to within less than 3px away from it. This is because IE6/win seems to have a weird 3px “bumper” margin on the right side of that last left float.”

Explorer 6 Duplicate Characters Bug

In my case, the two floated elements fitted the parent exactly.

Luckily I have encountered this rare creature before. To solve the problem, I quickly added 3 extra pixels width to the parent container and the bug disappeared.

I can only hope that you manage to see it some day, in the wild, before it becomes extinct. Then you, too, will have something to tell your grand children about some day.

Anatomy of a comment

Russ — Fri, 08 Feb 2008 20:00:18 +0000

The Australian Museum web team recently began looking at commenting. We wanted to see what sort of items could appear in a comment.

After a look around a wide variety of sites, we came up with a list of possible aspects that could be included in a comment:

Author name – who wrote the comment
Authors url – the authors website
Authors avatar – the digital representation of the author
Permalink – a permanent link to the specific comment
Number – A reference number for the specific comment
Date – date of comment
Time – time of comment
Comment – the actual comment
Edit this comment – allows authors to edit their comments (suggested by IM)
Other comments by this person – see example
Site owner flagging – some sort of visual distinction to shows comments from the site owner/s

Below is a chart showing some of the aspects listed above, checked across a range of blogs. This chart was prepared by the ever-patient Rose Cox.

The biggest surprises for me was the number of sites that did not include a permalink to each comment.~~Only 18 out of 70 sites checked used a permalink~~. I was also surpirsed by the variety of methods used to “house” the permalink. These included:

Date
Time
Date and time (by far the most common option used by the 70 sample sites below)
A graphic icon
The # symbol
The word “permalink”
Comment title

So, are there any aspects of comments that we have missed?
Do you include all of these on your blog/site?
Specifically, do you include a permalink to your comments?
We’d love to hear!

Update: The chart below has been updated. The permalink column was incorrect. If you see other errors, please let me know.

Comment comparison chart

URL	Author	Avatar	Permalink	Date	Time	Comment	Number
	70/70	11/70	45/70	68/70	54/70	70/70	25/70
Jeffrey Zeldman	yes	no	yes – using date/time	yes	yes	yes	no
456 Berea Street	yes	no	yes – using number	yes	no	yes	yes
Andy Budd	yes	no	no	yes	yes	yes	no
Hicksdesign	yes	yes	no	yes	no	yes	no
clagnut	yes	yes	yes – using icon	yes	yes	yes	no
Weblog about Markup & Style	yes	no	yes – using " permalink"	yes	yes	yes	yes
meyerweb.com	yes	no	yes – using number	yes	yes	yes	yes
mezzoblue	yes	yes	no	yes	yes	yes	yes
Signal vs. Noise	yes	no	no	yes	no	yes	no
Nick Bradbury	yes	no	yes – using date/time	yes	yes	yes	no
Meryl’s notes	yes	no	yes – using date/time	yes	yes	yes	no
AdamPolselli.com	yes	no	yes – using date/time	yes	yes	yes	no
The Man in Blue	yes	no	no	yes	yes	yes	yes
Si-blog	yes	yes	no	yes	no	yes	no
SuperfluousBanter	yes	yes	no	yes	no	yes	no
Ryan Brill	yes	no	yes – using "#"	yes	yes	yes	no
Authentic Boredom	yes	no	no	yes	no	yes	yes
Jeffrey Veen	yes	no	no	yes	yes	yes	yes
Molly.com	yes	no	yes – using date/time	yes	yes	yes	no
IEBlog	yes	no	yes – using "#"	yes	yes	yes	no
Mike Davidson	yes	no	yes – using date/time	yes	yes	yes	yes
Jason Santa Maria	yes	no	yes – using icon	yes	yes	yes	yes
The Hivelogic Narrative	yes	no	no	no	no	yes	no
CollyLogic	yes	no	no	yes	yes	yes	no
ShaunInman.com	yes	no	yes – using date/time	yes	yes	yes	yes
Zooiblog	yes	yes	yes – using date/time	yes	no	yes	yes
box of chocolates	yes	no	yes – using time	yes	yes	yes	no
drew mclellan	yes	yes	yes – using date/time	yes	no	yes	no
Boxes and Arrows	yes	yes	no	yes	yes	yes	no
evolt.org	yes	no	no	yes	yes	yes	no
SitePoint	yes	no	yes – using date/time	yes	yes	yes	no
UsableType	yes	no	no	yes	no	yes	no
Brainstorms and Raves	yes	no	yes – using word "permalink"	yes	yes	yes	yes
Karmakars.com	yes	no	yes – using date/time	yes	yes	no	yes
Juicy Studio	yes	no	yes – using "url string"	yes	yes	yes	yes
Matt Cutts	yes	no	yes – using time	yes	yes	yes	no
Berkun blog	yes	no	yes – using date/time	yes	yes	yes	no
Bruce Lawson’s personal site	yes	no	yes – using date/time	yes	yes	yes	yes
Pen and Ink	yes	no	yes – using date/time	yes	yes	yes	no
rachelandrew	yes	no	yes – using time	yes	yes	yes	yes
f berriman	yes	yes	yes – using date/time	yes	yes	yes	no
fadtastic	yes	no	yes -using "#"	yes	no	yes	no
Diary of a website	yes	no	no	yes	no	yes	no
snook.ca	yes	no	no	yes	no	yes	yes
lesscode.org	yes	no	yes – using date	yes	no	yes	no
Citizen Agency	yes	no	yes – using word "permalink"	yes	yes	yes	yes
ThePickards	yes	no	yes – using date/time	yes	yes	yes	no
Presentation Zen	yes	no	yes – using date/time	yes	yes	yes	no
D. Keith Robinson	yes	yes	no	no	no	yes	yes
O’Reilly Radar	yes	no	no	yes	yes	yes	no
Dexagogo	yes	no	no	yes	no	yes	yes
the 200ok weblog	yes	yes	yes – using date/time	yes	yes	yes	no
Surfin’ Safari	yes	no	yes – using date/time	yes	yes	yes	no
Wait till I come!	yes	no	yes – using date/time	yes	yes	yes	no
findability	yes	no	no	yes	no	yes	no
Jens Meiert	yes	no	yes – using date/time	yes	yes	yes	yes
The NeoSmart Files	yes	no	yes – using date/time	yes	yes	yes	no
Rave About It Blog	yes	no	yes – using "#"	yes	yes	yes	no
Cross-Media Entertainment	yes	no	yes – using date/time	yes	yes	yes	yes
Ben Balbo	yes	no	no	yes	yes	yes	no
Jason Yip	yes	no	no	yes	yes	yes	no
Bokardo	yes	no	no	yes	no	yes	yes
FactoryCity	yes	no	yes – using word "permalink"	yes	yes	yes	no
Read/WriteWeb	yes	no	yes – using date/time	yes	yes	yes	yes
Molt:n Core	yes	no	no	yes	yes	yes	no
Notes on Design	yes	no	yes – using date/time	yes	yes	yes	no
Smashingmagazine	yes	no	no	yes	yes	yes	yes
A List Apart	yes	no	yes – using comment title	yes	yes	yes	yes
Standardzilla	Yes	no	yes – using time	yes	yes	yes	no
Engadget	yes	yes	yes – using date/time	yes	yes	yes	no

Five things all clients want to know

Russ — Mon, 09 Jul 2007 16:26:03 +0000

I meet potential clients on a regular basis. The first meeting can often determine if you win or lose a job. So, what can you do to convince a client that you are right for the job?

Over the years, I have found that most clients don’t want a sales pitch, they want reassurance. They want to know if you can be trusted to help them solve their problem. The most common questions that they are likely to ask include:

1. Can you deliver what we want, on time and within the budget?

Can you explain a simple, logical process for delivering the website to the client? Can you explain how problems can be avoided or resolved?

2. Will the site work?

How will you reassure the client that the site will operate as they expect? Can you do this without resorting to complicated technical explanations?

3. Will the site look good?

Do you have previous site samples you can show the client? Can you articulate how you will work with the client to achieve a design that they and their users will like?

4. Will the site be easy to maintain?

How often will the site be maintained and by whom? If the client is going to maintain the site, have you allowed for client training and a “settling in” period? If you will be maintaining the site, do you have a maintenance process and a contract or transparent cost structure?

5. Who will look after the site in the long term?

Will you be around in 12 months, 2 years or 3 years? Do you have a backup in case you are hit by a bus?

If you are able to answer all of these questions calmly and confidently, you will be well on the way to a reassured client!

Internet Explorer and column collapse

Russ — Thu, 22 Mar 2007 14:01:55 +0000

So, you have built a beautiful CSS layout. It looks great. You feel powerful, knowledgeable and wise. Then you start adding real content to the layout – images, lists, links etc.

Suddenly you layout does not look so great in Internet Explorer. For some reason columns are wider. In some cases the column width increases so much that the entire layout breaks and the column drops below the rest of the content. Your confidence is shattered. You curse CSS and think about table-based layouts. At least they “work” in IE.

Here is a possible solution.

Inline elements and padding

Russ — Sat, 18 Nov 2006 22:43:18 +0000

Have you ever tried to add padding to

elements that have been set to “display: inline”? Did you find that the padding seemed to be rendering in an unusual way? Inline elements and padding explains why this occurs and one method that can be used to overcome the problem.

Tags: inline, element, padding

Max Design » Articles

Some info on URL canonicalization

Valid replacement for ol type=”a”

Answer:

HTML:

CSS:

Google and “noodp”

I was recently sent this question:

Answer:

HTML:

XHTML:

HTML:

XHTML:

Further reading:

Uncovering the “Explorer 6 Duplicate Characters Bug” in the wild

Anatomy of a comment

Comment comparison chart

Five things all clients want to know

1. Can you deliver what we want, on time and within the budget?

2. Will the site work?

3. Will the site look good?

4. Will the site be easy to maintain?

5. Who will look after the site in the long term?

Internet Explorer and column collapse

Inline elements and padding