Web standards fail

Recent website design work has caused us to do some research into the current design techniques and trends among website authors regarding web stanards. We looked into the definitive guide on the subject, Jeffrey Zeldman‘s Designing with Web Standards, and were excited to find that a third edition is coming this year. While imagining how it would soon sit on the shelf next to the well-read first and second editions, we saw that Amazon had a graphic inviting us to preview part of the book. Click to LOOK INSIDE! it invited.

Shown to the right is the result of clicking to look inside. It shows what happens when you try to deliver content in something other than an open and, dare we say, web-standard method.

Your web browser does not support this feature. Please visit our Frequently Asked Questions for a list of compatible web browsers that support the Amazon Online Reader.

It’ll be a great book. For those curious readers who don’t have one of the previous editions, they’ll have to use a compatible browser to view the preview. It’s too bad that Amazon can’t figure out how to deliver content to everyone. Perhaps their designers might do well to actually read some of the books they’re selling.

Veronica Belmont, geek goddess and co-host of the technology video podcast Tekzilla, started a new website called the Vintage Web. Listed on the site are examples of websites from days gone by, when designers were so excited to use the newest features offered by technologies like DHTML and JavaScript that they weren’t concerned with the implications these techniques had on accessibility and usability.

One of the faux pas that plagued these old sites – and unfortunately many current sites on the web – is the use of improper anchor text. Anchors are the links that are fundamental to HTML. HTML stands for Hyper-Text Markup Language and text that is linked to another page is a hyperlink. While the nomenclature has gone away for the most part, the concept is still fundamental to the workings of the modern web. Unfortunately, one of the bad practices regarding the creation of hyperlinks still remains.

The goal of a designer should be to link the words that describe the destination of the link. Think of this goal as linking the nouns and not the verbs. For example, if you’re linking to the AuctioneerTech website, the link should be as follows.

Visit AuctioneerTech for information about auctions and technology.

Unfortunately, we still see some designers electing to link verbs or, worse, adding extra and unnecessary text to create a hyperlink out of nothing as in the following examples.

Visit AuctioneerTech for information about auctions and technology.

To get information about auctions and technology from AuctioneerTech, click here.

Both of these examples are wrong. While there is little debate that they are more confusing and not congruent with the workings of the modern web, there is no debate that they are absolutely worse for search engines which must now try to ascertain from the surrounding text the meaning of the link rather than having the contents of the linked text to use in making the association between the target and the target’s description. Read more from the W3C regarding proper link creation.

Another common mistake designers make when constructing links is making the links open in a new window or tab. This practice sometimes comes at the behest of the boss, be it the owner or CEO or marketing department, who mistakenly believes that if the links are opened in a new window that it keeps the user on the site.

The modern web makes use of the back button. Navigational history is a fundamental component to browsing, and users know it. When a user follows a link and wants to return to the page from whence he came, he simply clicks the back button or, now more frequently, clicks the back button now included on many mice.

When links are set to open new windows or tabs, this back button functionality is broken, confusing the user and often causing him to close the browser and start anew. Other reasons to never launch new windows with links include problems with pop-up blockers and the fact that modern web standards have actually prohibited the target=”_parent” function that allowed this bad practice in the first place. The only way to launch new windows without breaking modern web standards is to use JavaScript, which is a security risk that more and more users are electing to not enable in their browsers, which means that the links won’t work at all for them, confusing them even more. Read more about the importance of avoiding opening links in new windows from Smashing Magazine.

Don’t make it hard for users to come back to your site by opening links in new windows. Remember to link the target names when you’re building links and never, ever use “click here” as the content of a link. With your help, we can all make the web a better place.

Image via Wikipedia

Portable Document Format (PDF) is a file format created by Adobe in 1993. As of July 1, 2008, it’s an ISO standard, which means that the format is open and published so that anyone can create it or use it.

There are many misconceptions about the proper use of PDFs, and today I’m going to try to explain how to properly use PDFs on the Internet. Monday I’ll give a couple of faster, easier alternatives to Adobe’s bloated Reader product and discuss some tools to create PDFs without having to use Adobe’s obscenely expensive Acrobat product.

The advantage that PDF has over other file formats is that it’s a good way to represent printed material exactly as the designer intended it. This advantage makes it good to use for contracts and brochures where the user doesn’t need to change the content and is willing to jump through some extra hoops to view the content in a layout that approximates the printed page. It’s a great format for designers to send to printers because it ensures that the content is displayed exactly as the designer intended.

The disadvantage that PDF has is on the Internet. The Internet isn’t a format that is supposed to resemble the printed page. Because the PDF format – for good reason – isn’t supported by any browser, the user must use a browser plug-in to view the content, souring the browsing experience. For this reason, the use of PDFs on websites should be limited to an optional content delivery mechanism.

An example of a very bad use of PDF is for a website selling real estate. The designer used PDF to send the property information document to the printer. The PDF is uploaded to the website and a link is placed on a sparse page that says “download property information document” for information about this property. This breaks the first rule of accessible website design, which is don’t force the user to use a plug-in or add-on to view content. Most browsers with the plug-in installed open the page in a new tab, breaking another first rule of web design which is don’t open new tabs or windows. Search engines index PDFs, but if you click on a search result that is a PDF you’ll be taken straight to the PDF which lacks a navigational system for the user to get to your main website.

An example of a very good use of PDF is for the same website to have every piece of information within the property document delivered as valid XHTML / CSS on the website page with an optional download for users who want to physically print the information about the property. In this case, the user can browse the property information at browser speeds rather than having to wait for and be confused by the loading of a plugin. Even the example property contracts should be first delivered on the website and also made available as PDF for users who want that method as an option.

The very best use of PDF is to not use it at all, delivering the content by XHTML and the layout by two style sheets, one CSS for the screen and one print style sheet, so that the website looks one way on the screen but when the website is printed it looks like the property information document. This is a more advanced website design technique that I’ll try to cover later.

To summarize, PDF has its uses. Just remember that as a content delivery system on the Internet it falls short.