In This Issue...

• Introduction
• New Windows and Usability: The Theory of 'REL-ativity'
• What's New on SitePoint!
• Hot Forum Topics
• New Blog Entries

Be Your Own SEO Expert with Web CEO

Web CEO sets the new standard for Search Engine Marketing software. This must-have suite of 12 tools allows you to:

• Build organic (free) search engine traffic
• Improve the return on your ad investments
• Learn more by doing a professional course in SEO and get certified

Time-limited. The Free Edition now comes with free training & certification.

Download Web CEO and get access to Training and Certification

Introduction

Welcome to Design View #19.

JavaScript.

Only two years ago it was still much-maligned -- today it plays pivotal roles in most of the Web's buzz technologies (Web 2.0, Ajax, Ruby and Prototype) and is arguably the single most important technology on the Web -- a great problem solver for the frontend designer and critical conduit for the backend code monkey.

In case you didn't catch it, last week we launched what I believe is probably our best book to date -- The JavaScript Anthology: 101 Essential Tips, Tricks & Hacks.

Both its authors are well-known JavaScript freaks. James 'Brothercake' Edwards blogs on DOM scripting while maintaining the sublime Ultimate Dropdown Menu. He also knows more about the DOM than any one man rightly should.

Cameron 'The Man In Blue' Adams is one of those guys who's so darn clever it borders on irritating. At last year's Web Essentials conference, he wrote and demonstrated a clone of the Mac OSX interface built from entirely from JavaScript -- just to show he could. Hmmm...

Regardless, these guys really know their stuff and have spent nine months pouring it all into 588 pages of JavaScript manna from heaven. Like our other anthology books, it's an easy Q-&-A format -- just ask a question, thumb the table of contents, and get an answer.

In short, if you've ever needed JavaScript (you're here, so you probably have) then grab the sample chapters and judge for yourself.

Download the four Sample Chapters here.

The other big event of the last few weeks here has been the debut of our first video tutorial. Kevin has put together a 10-minute Photoshop tutorial that takes you through the creation of a nifty starburst effect.

We put this initial video together mainly to test whether it would be popular. At last count, we had almost 250 positive comments, so things are looking good for more in the future.

We hope you enjoy this one.

Alex Walker
Editor
SitePoint Design View

New Windows and Usability: the Theory of 'REL-ativity'

New windows, popups and JavaScript -- are any words more likely to reduce an accessibility and usability expert to a foaming, spitting mass? Probably not.

So, what's the big deal? Why do they get so upset? I thought we might take a look at a real live example site -- FancyaPint.com -- and see how 'good sites turn bad'.

As you might guess, FancyaPint.com is a pub guide that allows you to review London pubs via searches based on locality, facilities, rating and style. Clicking on any name in the search list launches a popup window with the full review -- our first potential problem.

To be fair, launching a new window for these 'destination pages' does have a couple of advantages -- chiefly in letting the user focus solely on one task (reading the review content, in this case) without the clutter of search controls and other site-wide navigation. It can also allow users to lay 3 or 4 reviews side by side for direct comparison.

However, on the negative side it:

• Is resource-intensive: It demands much more of the browser and the system that supports it. Now clearly this is not a concern for most modern desktop systems, but it certainly is a concern for most mobile device users -- try launching five browser windows simultaneously on your middle-of-the-road Nokia. A pub guide is ideal content for a mobile audience, but this doesn't help them.
• Introduces unnecessary scrolling: Most of the reviews take up more space than is granted to the popup, so much of the content requires scrolling that wouldn't be necessary in the larger main window.
• Disables the 'back' button: Users feel more secure with the 'back' button, and when you launch a new window you automatically obscure the path along which the user has come.
• Won't validate as strict XHTML: The 'target' attribute has been removed from XHTML.

Ok, so that may not be 100% best practice, but it's not indefensible. Now let's look at the real problem -- the code that powers it all. Masks and helmets please!

<a xmlns:metis="http://www.resear.../core" 
action="details"
size="small"
popup="true" 
alt="» show details" 
title="» show details"
href="#" onclick="javascript:openPopupAdvanced
(540, 540,
'/main_site/thepubs/pub1497.html', 
true, true );return false;" 
onmouseover="window.status='» show
details';
return true;"

onmouseout="window.status=''
;return true;">

Yes, that is a single 'A' tag. In a word, 'Ouch!'

... continued after the ad ...

ProWorkflow - The Business/Project Dashboard for Web Design Firms and Freelancers!

ProWorkFlow is a web-based application that allows you to manage your projects, tasks, time, contacts, notes and more.

• Keep accurate time usage records
• Deliver projects on time, and on budget
• Organize, plan and delete jobs and tasks
• Get a global overview of company activity

ProWorkflow is customisable and expandable to suit your business and is available in two flavours: subscription account or permanent license to run on your own server.

Click here to view our Free Online Demo or start your 14 Day Trial.

Let's run through just some of the problems inherent in the above code in the limited space we have available:

• 'action', 'popup' and 'size' aren't valid attributes for 'A'.
• 'alt' is for text descriptions of images, not links.
• There's simply no need to spill JavaScript (onmouseover, onclick and onmouseout) into the body of our pages. If you're reading this newsletter, you probably already appreciate the power and flexibility that's to be gained by replacing your FONT tags with a separate CSS file. Sifting the JavaScript out of your pages is just as important for the same reasons.
• 'window.status' isn't supported by most browsers now.
• 'href="#"' is the real showstopper. This is really bad ju-ju. In short, it means the FancyaPint site is on a scripting life-support system -- it dies without JavaScript. That covers any device without JavaScript (mobile devices, text browsers, screenreaders), devices with JavaScript disabled -- even a single JavaScript error in another, unrelated script is enough to break every link.
  

Popup Links

<a href="popup.html" rel="popup|400|200">
the Eagle</a>

External Links (in a new window)

<a href="http://www.ebay.com" rel="external">eBay</a>

Now that's a little more svelte for summer!

Our HREFs are now real links pointing to real pages, rather than null links ('#'), so we can guarantee 100% that any device from the first Netscape beta to IE7 will be able to understand and follow your link every time.

The second attribute in our links may be less familiar.

'REL' stands for 'relationship' and according to the W3C standard, 'The rel attribute specifies the relationship of the linked document with the current document.' It has no predefined values (so you are free to make them up), but you may have noticed Google most famously using this attribute with 'nofollow' to prevent PageRank leakage. It also just happens to be the perfect attribute to use for setting up our popups and external links.

As you can see, we're using values of 'external' for links that leave the local site, and a value of 'popup' for popup windows followed by the height and width we want for the window. Of course, the browser won't actually do anything with this REL attribute by default, so we'll need JavaScript to do the muscle work.

The script we're going to use blends elements of two separate scripts into one tidy whole, and throws in some icons to make it look peachy.

• Kevin's XHTML Compliant Target
• Mike Rainey's Dynamic Popups

I'm just going run through an outline of how the script works, rather than providing a line-by-line breakdown here in the newsletter. However, it's well commented if you're into the nitty-gritty. Otherwise, if you're just interested in what it does, feel free to jump down to the example below. You probably won't need a deep knowledge of JavaScript to use this script in your development.

What does it do?

To summarize it, the script:

1. Sets up a new function -- windowLinks() -- that starts by grabbing all the links on the page, and putting them into a working array.
2. Next, it begins to work through the list of links, checking each one for a REL attribute.
3. If it finds a REL with the value 'external', it uses the DOM to change its target attribute to '_blank'.
4. It attaches a title tag to the external link, which allows us to tell the user to expect a new window.
5. We also give the link a CSS class (.external) which allows us to visually identify links that exit the site with an icon -- .
6. Alternatively, if the script finds 'pipes' ('|') within the REL, it uses them to break the string value into three parts -- 'popup', our new window's width, and its height.
7. The script plugs these values into a standard popup function (acpopup();)
8. As with the external links, the script attaches a new title attribute to the link to help warn the user that we're launching a new window.
9. Again, the script attaches a CSS class to our link, allowing us to visually tag our popup links with an icon -- .
10. We run the windowLinks() function.

The Example

That should be all you need. For ease of studying, I've left the JavaScript and the CSS in the head of the example, but in practice you would always pop it into separate linked files.

Is this Method Absolutely Bulletproof?

Not quite, unfortunately.

The W3C accessibility guidelines say 'thou shalt not change the current window without informing the user'.

As Bruce Lawson and Gez Lemon figured out late last year, the 'title' attribute isn't a 100% reliable way of warning users of a new window. It turns out that if users either navigates to your link via the keyboard (rather than using the mouse), or simply neglect to hover over the link with their pointing device, the title won't show as a tooltip. And of course, users without images (text browsers, screen-readers, or images switched off) won't see any icon. Gee ... this accessibility gig can curl your toes some days.

Anyway, I've got some ideas on how we might remedy the situation -- I'll save them for the blog. For now, there's a good chance you'll find this method easier to use, easier to maintain, and more accessible than your current popup code.

Take it for a spin and let me know.

That's all for this issue -- thanks for reading! I'll see you in a few weeks.

Alex Walker
design@sitepoint.com
Editor, The SitePoint Design View

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 SitePoint Design View!