Category: Forms

Pagerank, Relevance, and the SERPs

We’ve previously talked about why pagerank doesn’t matter, but a number of people still attach a great deal of importance to it. It’s easy to see their point: plug pretty much any search term with any competition into Google, and the top results are likely to be mostly high-PR sites.

What many people don’t realize is that the high PR is a symptom of what’s making the page rank well, not a cause.

What does that mean? Well, suppose I have a website talking about topic X. This is a really good site, so I get a lot of links to it, many of which will have anchor text that says “X”, “page about X”, etc. All of these links are telling Google that my page is about X; additionally, each one is also a vote for the page. Thus, when somebody searches for X, Google sees that my page is both relevant and popular, and thus returns it close to the top of the search engines.

However, all these pages that are linking to me are also passing on link juice, especially if some of them have a high page rank. As a result, the PR on my page goes up!

Just as one example, go to Google and search for the term pagerank doesn’t matter. I did that just now and looked at the top five results. (Granted, this isn’t a particularly competitive term). Three are PR0 (including the page on this site, which in spite of being fairly new comes up second), one is PR3, and one is PR5. The PR5 page is in 5th place, behind the three PR0 pages! Interestingly enough, that PR5 site is actuall Matt Cutts (who heads the Google webspam team). Why is our page beating his? Because even though his has better page rank (due largely to being on a PR7 site), it’s talking about PageRank sculpting; our site is more relevant to the search term.

Would that page show up in the top five if it didn’t have PR5? Probably not; the PR does elevate the page’s importance over other pages with similar relevance but less link juice. This is, however, a good example of how relevance trumps pagerank.

HTML5, Part V: Forms

When it comes to forms, one thing I hear a lot about is setting them up using PHP; HTML has basic form capability, but don’t you want them to do more?

With HTML5, forms can indeed do more, without the need for any fancy scripting. The best part is, all of the new  features degrade gracefully, which means you can use them now without spending a lot of time worrying about what they’ll do in legacy browsers.

Let’s start with the basic elements of an HTML form, which are the same in HTML 4 and 5:

<form>

<input name=”name”  type=”type” value=”value”>

</form>

That’s all there is to it! Let’s take a look at each of these elements. The name tag identifies the input, which lets you refer to it later; this is particularly important when you’re using it to pass information to the next page. The type tag tells the browser what type of input to use, such as a button or dropdown. Finally, the value field is the default value; for a button, this would be the displayed text. Each of these tags is optional.

The nice thing is that when a browser doesn’t understand the given type, or the type is not given, it simply displays it as a text field rather than giving unpredictable behavior. This means we can use new HTML5 input types, knowing that people with older browsers will still have a way to provide input.

How about an example? Suppose I want you to choose an even number between 8 and 22, with a default of 12. I can do that using the following code:

<form> <input type=”number” min=”8″ max=”22″ step=”2″ value=”12″> </form>

If you’re using an HTML5-compliant browser such as Opera, the following should show up as a spinbox that allows only the even numbers between 8 and 18. In older browsers, it will show as a simple text field, but will still be validated – the form will refuse to submit if the user enters an illegal value. The second field is the same code with the type changed to range.

 

So why use these special tags instead of just having the user type a number? For one thing, it can be optimized in various ways. If you’re viewing this page on an iPhone, you won’t get a spinbox, but your keyboard will default to numbers. A search field (another new type) may be functionally the same as a text box, but if you’re using Safari on a mac, it’ll have rounded corners to look like the standard mac search boxes; on both Safari and Chrome, once you start typing a little x will appear to erase the field. While browsers don’t handle these tags in the same way, telling them what type of data is expected allows the more appropriate data entry.

Aside from new types of input, you can also do new things with the old types. For example, one thing that drives me crazy is scripts that autofocus on an input box; when I check my email on the web I tend to have finished typing my username and be halfway through my password when the page finishes loading and moves the focus back to the username field. Now, instead of using javascript, we can stick with HTML and accomplish the same thing in a less annoying (and more consistant) way. Consider the following code:

<form> <input name=”tellme” autofocus  placeholder=”Placeholder Text”> </form>

Depending on which browser you’re using, both, one, or none of the new attributes we’re using will take effect; whichever ones don’t will simply be ignored. Autofocus (predictably) sets the focus to this field, while placeholder text appears in light grey to tell you what you’re supposed to type:

Again, the nice thing is that this degrades gracefully, so it provides a better user experience for people with compatible browsers without annoying those people who don’t see it. (Of course, you may want to detect compatibility and use javascript to provide the same functionality so that more people can see your site as designed). Note that in the above example, we used autofocus and placeholder text together, which is kind of silly because putting focus on that window removes the placeholder text, but it will come back if you click on something else and remind you what needs to be typed there! Also, the autofocus brings this box into view as soon as you load the page, which means you have to scroll back up to get to the top of the article; not particularly good design, but it does demonstrate the power of this attribute.