Firefox search plugin for www.alistapart.com

Everyone has their bible. For some, it is the Holy Bible, for others, something not quite so reverent. As a child, our family life would come to a screeching halt when our bible arrived in the mail. Being the youngest, I usually got the National Enquirer after it had been scanned, read, and laughed about by the rest of the klan.

I’m all grown up now and my bible and gods are no longer the gossip rag and celebrity stalkers. Instead, I look up to my Rock Gods, such as NoMeansNo, Drive Like Jehu, and Ethel Merman. The omniscient National Enquirer has been replaced with web sites such as AListApart.com.

The AListApart path to enlightenment

Hardly a week goes by without doing a search on alistapart for the path to this or that standards-based method. A couple months ago, I created a search box plug-in for Firefox to make it much easier.

With the blessing of Jeffrey Zeldman, I present to you the www.alistapart.com search plugin for firefox.

Sorry to any IE users out there. I must have uploaded a bad copy of my permalink page last week and the formatting is botched. I’ll fix this tonight. Being that this is about Firefox, hopefully only a few people noticed it.

Coming to grips with divitis

Is divitis (the use of too many divs in a CSS-based layout) always bad?

I think you go through stages of CSS/XHTML maturity as you learn how to move away from tables to table-less design.

Our first instinct is to use divs the same way we used tables. It feels safe to load up the page with structural divs. That’s ok, especially if it is what helps you get from x to y.

However, you will get to the point where you realize the first CSS based sites you built had too many divs and you start looking for ways to place the styles on the unordered list or paragraph instead of wrapping those elements in a div.

I still see a valid reason to have divitis. If I am building a site that has to be flexible, modified by a large group of people AND uses server-side includes, I would rather make those include files self-contained units.

Sure, I could remove the container div on many of the includes, but I prefer to know that if an include is added to a page, the elements within it are not going to inherit the styles of the page’s container. Does that make sense?

Now, the goal of a medium to advanced CSS-based programmer is to find the elegant balance of essential divs, spans, ids and classes. Consider it a challenge.

I sometimes cringe when I see divitis. I sometimes chuckle. I even at times yell, “hey Brian check out this site’s chronic divitosis!” But let’s face it, this is an evolutionary process and those of us that have been doing it for a while need to remember what it was like on the first pass.

Disclaimer: don’t forget the horrible, horrible, horrible, horrible divitis and absolute-positionitis generated by some of the Office software and CMS systems. I once looked at a form that had hundreds of inputs and labels in individually positioned divs. That wasn’t the programmer’s fault. We just didn’t have time yet to build a new generator from scratch.

Should a web site open pdf files in a new window?

Web designers need to choose between offering convenience to unsophisticated web visitors and hijacking the browser from those who want to control how their browsers open non-HTML files

A few years ago, I was visiting some friends in Paris. One is a fairly conservative priest and the other a socialist teacher.
I asked them a seemingly innocent question: What’s the deal with Robespierre? Why do people feel so strongly one way or another about him?

I had just begun learning about the French Revolution and was not prepared for the argument that arose. Robespierre and the
Reign of Terror still divide people into camps.


It’s rare to find a topic with such strong opinions expressed in web design (not counting Internet Explorer). However, I recently found the
standardista populace building ramparts in the streets of the city when I asked the seemingly innocent question: “Should .pdf files be opened in a new window?

The answers fall into two main camps:

  1. Do not hijack the browser; let the user determine the behavior of their browser.
  2. Make it easier for visitors that are not savvy enough to know how to control their browser’s options.

Hypothetical vs. Reality

In a perfect world, information is provided efficiently in all browsers to people of all abilities. HTML code should not interfere with the
browser’s native behavior, allowing the user to establish preferences for font size, background-color, and file downloading.

In the real world, the visitor has to wait for files to be presented, can lose track of the original web page, and can accidentally shut down
the browser instead of the file. Therefore, the programmer can assist the viewer by opening the file in a new window.

I’ve summarized the recent comments over this question (from the web standards group mailing list) to decide which is the best approach.

Basic standards

Regardless of the window option you choose, there are some elements that everyone agrees upon. The link must let the visitor know that
they are opening something other than another web page. The file type and file size should be attached to the link, i.e.: <a xhref=””>contact list (.pdf, 25kb)</a> . This gives the visitor the basic information needed to make an informed decision about how the file should be opened.

The developer could also give the link more information to assist the visitor:
<a xhref=”contact.pdf” title=”This link will open a .pdf file. Acrobat Reader is required”>contact list (.pdf, 25kb)</a> . If the visitor does not have the required plug-in, they should be given
a link to the appropriate download site. <a xhref=”contact.pdf” title=”This link will open a .pdf file to be read in Acrobat Reader”>contact list</a> (<a xhref= http://www.adobe.com title=”Download the plugin required to view a Portable Document Format file”>.pdf</a>, 25kb) .
CSS can also be used to place the Acrobat icon next to the link:

Version 1:

HTML:
<a xhref=”contact.pdf” class="pdfFile" title=”This link will open a .pdf file.”>contact list (.pdf, 25kb)</a>
CSS:
.pdfFile {background: url(pdflogo.gif) no-repeat 0 0; padding-left:25px;}

Version 2:

Use JavaScript to find links with .pdf in the href and insert the class=”.pdfFile” dynamically

Version 3:

Use CSS3 syntax to add the icon to all links with .pdf in the href. Most browsers do not support this.

Let the visitor know that the link is to something other than another web page. The easiest method is to follow the link with the file name
and size; all other additions are usability gravy.

Do not open new windows

Pop-up windows are bad for accessibility and usability. The WAI answers the pop-up question quite plainly:

WAI Checkpoint 10.1

Until user agents allow users to turn off spawned windows, do not cause pop-ups or other windows to appear and do not change the current window without informing the user.

http://www.w3.org/WAI/wcag-curric/sam77-0.htm

However, the first part of this rule has been satisfied. Modern web browsers now block unwanted popup windows. This rule seeks to prevent web sites from launching new windows when a visitor comes to the site. The second part of the rule requires the visitor to be warned that such behavior may happen. This requirement does not banish new windows altogether, rather those that the visitor has no control over.

Many people believe that the visitor should have control over their browser or other rendering device at all times. The savvy user will know how they prefer to see a file and the web site should not pre-determine this action.

I would say let the user decide. Wherever possible I try to provide enough information in the link itself so that the user knows what to
expect and can proceed as they wish. Many people will set up their browser to deal with different file types according to their preference
(open the document in the browser, open it in the application, download the file). Opening in a new window removes user choice. By providing a
plain link you give users the option … of `right-click – open in new window`.

– Damian airport.unimelb.edu.au

Users with assistive technology or portable devices also have difficulties with multiple windows.

Accessibility considerations would be ensuring that users are advised of what will happen when they activate the link, either that the
document would be opened in a new window, or that it will be downloaded. Also that opening a new window does not adversely effect users
accessing a website with assistive technologies (screen readers, etc.).

– Andy Kirkwood | Creative Director http://www.motive.co.nz

These issues need to be addressed if the web site chooses to open these links in a new window.

The argument for opening new windows

The Internet is not full of expert users. That is the simple reality. An effective web site compensates for visitor behavior and creates a seamless experience. While this is not always possible, the programmer can minimize frustrations. Opening a document in the original window creates its own set of problems for the user. Even the savvy visitor will sometimes forget to right-click on a link and choose “open in a new window” or “save target as.”

Many of our users are very computer illiterate and giving them too many options confuses them. We do open our PDF documents in a new window and never have any complaints about it.

We DO get complaints, though, when things are too hard to use or if the page they were on “disappears” because we opened a “document” in that same window or if the file downloaded and they can’t find it (happened regularly before we launched the PDF in another window).

Gary Menzel, Senior Software Engineer, Med-E-Serv Pty Ltd

Many users have become accustomed to having windows appear to log-in, handling web applications, for advertisements, help sections, and more. Further, they are used to closing the windows by clicking on the browser’s close button. When the pdf document loads in the original window, the visitors will often close the browser, expecting the original web site to appear. Instead, they have closed the web browser and will have to navigate their way back to the original page. For many, this may involve doing another search if they are not comfortable using the history feature.

… I’ve had users report that they close the window thinking that they’re exiting the document, but they’re actually closing the browser.

Mario, www.webnetdesignstudios.com

Opening the documents in a new window can create a friendlier environment for the user. It preserves the original page and allows the visitor to continue reading the web site while the new file is being prepared in another window. However, it needs to be done in a manner that does not violate accessibility requirements.

JavaScript to the rescue

In the past, links were given a target to choose which window a link was opened in. This was meant for web sites using frames. Open the
link in the top, side, body, footer, etc. A new window could also be generated if the page was not using frames or if the targeted id did
not exist in the frameset. Target=”_blank” became the standard code for opening a new window: <a xhref=”contact.pdf” target=”blank”>.
However, this assumes the visitor is able to keep visual track of the windows. It also does not account for browsing devices that do not
recognize multiple windows.

There are two methods for using JavaScript to make a link open a new window.

Insert the script into the link code

HTML
<a xhref=”contact.pdf” onclick="window.open(this.href); return false;" title=”This link will open a pdf file in a new window” class=”pdfFile”>contact list (.pdf, 25kb)</a>

This script tells the browser to open a window with the url listed in the href. If the browser does not recognize the window.open command,
ignore the function and open the link in the original window.

Removing the script from the link

Thierry Koblentz of TJK Design developed the following JavaScript for this article. The script searches for any file downloaded as application/pdf, that sits in a folder named “pdf”, or has the extension of .pdf. It then adds class=”pdfFile” for the CSS, a title attribute to notify the visitor that the link will open a new window, and gives the programmer the option of using target=”_blank” or window.open to create the new window.

HTML
<a xhref=”contact.pdf”>contact list (.pdf, 25kb)</a>
JavaScript (http://www.tjkdesign.com/articles/popups.asp)

  1. function TJKpopAppPdf(){ // v1.0 | www.TJKDesign.com
  2. var zA=document.getElementsByTagName(‘a’);
  3. for (var i=0;i<zA.length;i++){
  4. // This is if the href value contains the string “.pdf” or if the anchor contains the correct “type” attribute or if the file is stored in a PDF folder
  5. if (zA[i].getAttribute(‘href’) != null &&
  6. (zA[i].getAttribute(“type”)== “application/pdf” ||
  7. zA[i].getAttribute(‘href’) .toUpperCase().indexOf(“.PDF”) >= 0 ||
  8. zA[i].getAttribute(‘href’) .toUpperCase().indexOf(“PDF/”) >= 0)){
  9. // This is to include a title attribute or attach a string to an existing title’s value
  10. zA[i].title+=’ (opens in new window)’;
  11. // This is to include a class or attach one to an existing class’ value
  12. zA[i].className+=zA[i].classNam e?’ pdfFile’:’pdfFile’;
  13. // This spawns multiple windows, but works fine with popup blockers
  14. // zA[i].target=’_blank’;
  15. // This opens a unique window and brings it in front of the opener each time the user clicks on the link
  16. zA[i].onclick=function() {newWin=window.open(this.href,’TJKWin’,’toolbar=no’);
  17. if( window.focus){newWin.focus()} return false;}
  18. }
  19. }
  20. }
  21. window.onload=function(){if(document.getElementById) TJKpopAppPdf()};

The name TJKWin is given to the new window to assure that all pdf links open in the same window. This keeps the visitor from ending up with a plethora of new windows for each pdf they open. If the browsing device is not capable of opening new windows, it will ignore the script and simply open the link in the existing window.

If you expect your audience to compare multiple files, you may want to remove the window name designation from the script.

Opening all documents in a window with the same name is obviously ‘tidy’, but problematic if a user wants to open and compare the contents of two documents simultaneously.

Andy Kirkwood

Other file types

This still leaves the discussion open for other file types. Should a new window be opened for spreadsheets, PowerPoint presentations, Visio documents, XML files, and more? Some of these files can be viewed in the browser, but they would be better left as a downloaded document to be viewed natively. The visitor still needs to be notified the link is for a non-HTML link:

HTML:
<a xhref=”contaxt.xls” class=”exceldownload” title=”This link will download an excel file”>contact.xls (.xls, 25kb)</a>

The previous javascript could also be modified to give .xls files the appropriate class and title, making the code even cleaner.

Summary

Web site visitors expect to find information in an efficient, user-friendly manner. It is up to the web designer to create this experience. While opening new windows may be considered a faux pas, the average user will actually appreciate its convenience. JavaScript offers the most convenient method of giving a visual reference and functionality. Placing a helpful title attribute within the link further informs the visitor about the link’s behavior.

Update To further avoid confusion for the visitor, Thierry changed the code slightly today. He added ,'toolbar=no'to remove the browser’s toolbar: (window.open(this.href,'TJKWin','toolbar=no');). This approach was suggested by Jacob Nielsen’s Alertbox Open New Windows for PDF and other Non-Web Documents.

Resources

Reblog this post [with Zemanta]

CSS Design-a-palooza in London

Molly E. Holzschlag and Andy Clarke will be hosting a CSS design seminar in London this year. I’ve had the pleasure to meet and watch these two in action and can imagine how great this seminar is going to be.

I am a conference junkie. I studied fine art, photography, and radio communication in school. I’ve learned web development via books, web sites, and conferences. I’m sitting at the Business Blog Summit in San Francisco right now. Earlier this year, I flew to London for @media and Vancouver for Museums on the Web conferences. None of these conferences were paid for by my employer. I went for my own sake, not theirs. I am retaining this information, making the contacts, and enjoying the activities. My employers are benefiting from any new technologies or techniques I’ve learned.

If you have the time, try to attend this conference. Your support will encourage the hosts to extend the classes to new speakers in new areas of the world. Hold off on buying the latest IPod, use the money to extend your knowledge. That is what I’m doing. I put my Nikon d70s money into the Business Blog Summit.