SitePoint Tech Times

Introduction

Are you unknowingly harboring a hypertext criminal in your projects?

Some of the worst crimes against hypertext were revealed in Tech Times #223, where Andrew introduced us to some very shady characters indeed -- such as the vague and lazy Leisure-suit, the mysterious Middle-man, and the obnoxious pop-up Telemarketer. Responsible citizens did their part to clean up the mean streets of the Web by reporting even more of these petty criminals in their feedback to that issue. This week, Andrew reveals more infidels -- plus a way to eradicate that pesky "More >>" from your vocabulary. We'll look at that in just a moment.

Simply SQL is here!

You might also be interested to know that we've just launched our first book about SQL, Simply SQL.

If you want to use database-driven content in your web site, then you simply must learn some SQL. Simply SQL is packed with step-by-step examples, diagrams, and code you can use right now in the real world, and it's written by the SitePoint Forums' resident SQL guru, Rudy Limeback (r937). You can find out more about what's inside and read a free sample on our web site.

Summary

• Introduction
• More Crimes Against Hypertext
• New Technical Articles
• Techy Forum Threads
• More Techy Blog Entries

More Crimes Against Hypertext

by Andrew Tetlaw

Back in Tech Times #223 I identified several common examples of poor hyperlinking. It generated an interesting discussion so I thought I'd write a follow-up, adding a few more examples and some solutions.

The Latest Rogues

The first newcomer to our rogue's gallery comes courtesy of our language editor, Kelly. She was mystified by the separate linking of multiple adjacent words to the same link target, instead of just joining them together into a single link. She called it The Doppelganger.

The next one came from bel, a commenter who said:

Camouflaged for ambush, this link looks like its going to open another web page but instead is actually going to open up a PDF, DOC, email address, etc. Always when you are in a hurry, quickly scanning around for what you are looking for, you click one of these and then BAMM -- you are stuck waiting with your hands tied while it launches your client software. Oh, the howls of chagrin heard from my corner when I’ve stepped on one of these hyperlink land-mines while in a hurry. "Nooooooo! OWWooooooo!!"

I call that one, The Saboteur. Raena, SitePoint's other technical editor, thought this one should be called The Crying Game. I'll leave it to you to ponder that one.

Finally, from another commenter, Wynnefield, is the link called The Mime Artist. This is the link that leaves you wanting "More >>":

<p>It's often taken for granted but the lack of good
hypertext makes reading a web page a generally 
unpleasant experience. There are several essential 
hyperlinking techniques you should know.</p>
<p><a href="/">More >></a></p>

The Mime Artist is so named because it vaguely points in a meaningless direction, gives you no clues as to where it's going, and leaves you wishing you could have your money refunded.

Good Linking Practice

The consensus about good linking practice was that a link should indicate what the user will find when clicking on it. Link text should help the user decide whether or not to follow a link.

Some posters suggested I rewrite the good example to link the intention of the link instead of the name of the target site. So, instead of this:

For excellent examples of finely crafted hypertext
look no further than <a href="http://kottke.org/">
kottke.org, the online home of Jason Kottke</a>.

... I'd rewrite the link like this:

For <a href="http://kottke.org/">excellent
examples of finely crafted hypertext</a> 
look no further than kottke.org, the online home
of Jason Kottke.

Which makes sense to me.

This is supported by the Web Content Accessibility Guidelines 2.0 , that state the purpose of a link should be able to be determined from its link text alone, or the context in which it is placed. In fact, the guidelines describe a failure of accessibility when:

... links such as "click here" or "more" [that] are used as anchor elements, where you need to have the surrounding text to understand their purpose.

So how do we avoid such accessibility problems? Some solutions after the break.

Developer API: SMS enable your website or application

SMS enable any application for two-way messaging easily and send messages to almost 712 mobile networks in 212 countries reliably, with Clickatell.

Connect quickly and easily to Clickatell's gateway via:

• HTTP/S, FTP, SMPP, SMTP, XML, Com Object & SOAP.

Click here for your free trial now.

Solutions

There are many proponents of using the phrase "click here" -- the Tautology link -- as a call to action so that more readers will click on the link. I understand the need for a call to action, so I'd be likely to investigate alternatives before resorting to "click here." For example, you might see:

To see how you can improve your hypertext
today, <a href="/">click here</a>.

I'd first consider changing the language like so:

<a href="/">See how you can improve your
hypertext today!</a>

But if the client demands the "click here" signpost, I'd suggest:

<a href="/">Click here to see how you can
improve your hypertext today!</a>

Regarding the Mime Artist link, if you have to implement a link that uses the word "more" as link text, the guidelines also offer a simple solution (this is echoed on the Max Design web site and many others): Use CSS to hide the portion of the link text you want to keep unseen.

Let's reuse some of the previous markup but add a span that encloses some extra text:

<p>It's often taken for granted but the lack of good
hypertext makes reading a web page a generally 
unpleasant experience. There are several essential 
hyperlinking techniques you should know.</p>
<p><a href="/">More<span> about
creating quality hypertext</span></a></p>

You then use CSS to move the text within the span element off the screen. The two solutions (linked above) use absolute positioning to move the text, but do it slightly differently from each other. They are worth a look.

The result of either solution is to make only the desired link text visible while making available extended link text for screen readers and search engines.

Leave your comments on the blog entry:

Web Tech Blog: Technically Speaking by Andrew Tetlaw More Crimes Against Hypertext

Web Developers Can Build Desktop Apps, Too!

With the Adobe AIR® runtime™, you can build responsive, engaging, cross-platform desktop applications using only HTML, CSS and JavaScript.

Why should C programmers have all the fun?

Download the Adobe AIR SDK today!

Kevin Yank is still working hard on his book, but if you're missing your weekly dose of Kevin, you could check out the SitePoint Podcast. In the last episode, Kevin, Brad, Patrick, and Stephan talked about Chrome plugins, devious Twitter clickjacking, how to attend the best parties at South by Southwest Interactive, and more. It's a great way to get your techie fix on the go!

See you next week for another Tech Times.

Raena Jackson Armitage
techtimes@sitepoint.com
Technical Editor, SitePoint

PS: If you follow us on Twitter, you get to find out about new posts, articles, podcasts, and the coolest forum threads as soon as they happen. You'll find us there as @sitepointdotcom. Sure, there are real human beings behind it -- I'm one!

Latest Release

The Principles of Successful Freelancing

Tell me more..

Free Book Samples

		Simply JavaScript
		The Art & Science of CSS
		The Principles of Beautiful Web Design
		More...

New Technical Articles

Introducing Joomla

Joomla is one of the most popular open source content management systems that exist today. In this step by step tutorial, Andrew demonstrates how easy it is to get started.

Full Story...

Simply SQL: The FROM Clause

Have trouble remembering your right outer joins from your left? In this sample chapter from the SitePoint book, Simply SQL, Rudy makes the inner workings of the SQL FROM clause easy to understand, including joins, subqueries, and views.

Full Story...

 Techy Forum Threads

• CSS - Test Your CSS Skills Number 15 : in CSS
• Web Design V Web DEVELOPMENT: Any definitions? in Just Starting Your Design
• Building a shopping cart...from scratch... in PHP
• Argh. She wants me to design the site in FrontPage. in Web Page Design
• Norway sites tell IE6 users to upgrade in Industry News

 More Techy Blog Entries

News & Trends

	The 5 Most Under-Used HTML Tags 21 comments
	Enterprise SaaS and the Coghead Lesson 15 comments

Podcast

SitePoint Podcast #9: SitePoint at SXSWi 6 comments

Web Tech

Learn SQL -- The EASY Way! 3 comments

Help Your Friends Out

People you care about can benefit from the wealth of information on new and maturing technologies available on the Internet. Help them learn how to do it by forwarding them this issue of the Tech Times!

You are subscribed as:

Unsubscribe from this list.
Manage your subscriptions.
View the newsletter archives.

Mailing Address:
48 Cambridge St, Collingwood, VIC, 3066 AU

Phone: +61 3 9090 8200