Here’s a less-than-stellar usability situation that’s plagued the WWW for years.
A reference manual or guide is published on the Web as a single HTML page. It’s a large page, many screens long, with a table of contents and in-page anchor links that take you to points in the page (perhaps even “chapters”). Maybe the page is littered with “return to top” links. In any case, all of the navigation is contained within the single page.
It’s entirely appropriate to publish this manual as one document, but now you want to send your friend a link to Chapter 3, Section 1 to answer his question. That will take him to the middle of this long, long page. That’s efficient, yes, in that it will take your friend right where he needs to go on the page. But it’s also potentially confusing; he clicks on the link and wonders, “What page is this? Where am I? What manual is this? Who published this?”
Solving the “In-page anchor problem” with CSS
Now I’ve come across a handy CSS trick to solve this problem. It’s been in the back of my mind for years, so it gives me a special satisfaction to explain it.
(more…)
In part 1 of this three-part “Hyperlinking best practices” blogging miniseries, I talked about the most effective way to visually present hyperlinks. Now, in part two, I’ll describe how to visually convey to users whether a link is external to a website (that is, it is not located on the same domain) or internal (part of the same site).
Background: Why does it matter whether a link is “external” or “internal?”
If you’re on a website and you’re reading stuff on it, you probably want to be there. You might want to know that by clicking a link, you’d leave that site and visit another website, where the quality of the content would be unknown. Perhaps you’d be more willing to follow a internal link, thinking, “I like this site!” and less willing to follow an external link, thinking, “That’s probably a porn site with popups!” This is the premise behind distinguishing external, offsite links from internal links. Supplying users with this contextual information helps them make decisions about whether it’s worthwhile to click a link. One way to convey this information visually is with CSS3′s attribute selectors.
(more…)
I’ve struggled for a long time with how to best visually represent links on a Web page. (Yes, I know; I’m saddled with the weighty matters of the world.) Anyway, I’ve been turning it over in my mind for a while, and I finally put thought to action yesterday and implemented some hyperlinking best practices here on underscorebleach.net.
I figured I’d save you the trouble of contemplating the intracacies of hyperlinking usability and instead do a big write-up. So here’s a three-part series, with the next two parts soon-to-come.
- Visual presentation of hyperlinks (this entry)
- Distinguishing internal links from external, offsite links
- “Branding” links to particular areas of your site (to be added later.. maybe)
(more…)
Many moons ago, when I was but a lad of 14, I was mesmerized as a classmate told me of new technology hitting the World Wide Web: frames. To say the least I was impressed. This frames stuff was hot. (Incidentally, that classmate was the son of Larry Smarr, former director of NCSA.)
But we users of Netscape 2.0 were young and naïve. Now we know better; frames suck(ed), for a variety of reasons. But frames were still useful, particularly in the way they presented content. The navigation was clear; the header was clear; the content was clear. As the user moved from page to page, much of the content remained static, imparting a feeling of security. Today, with the almost total depature of frames, the security blanket of frames has been lost.
Recovering the “security blanket”—with CSS
Today, I drew up a quick CSS layout for a coworker. It forced me to get back to the basics with CSS layouts, and I remembered a time a few years ago when I tried with limited success to use the position:fixed CSS property in a previous design. But as I composed this simple layout—header, nav, content area, and footer—I thought back to the position:fixed experiment. Maybe there was something useful there, after all. And maybe, a few years later and with a few more Web standards, well, standard, I could make it work.
So I mocked it up, real-simple like, and here ’tis:
Quasi-frames with CSS
(View source for HTML and CSS)
(more…)
