Category: XHMTL

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]

post-new design

For many artists, the process of creating a new piece is as fulfilling as hanging the finished work on a wall. Over the years, I’ve built many web sites for myself, but rarely took the time to enjoy the process. Several years ago, I made my last grand statement with the site that is currently at www.sdco-op.com/drake. This table-based site was built in Net Objects Fusion and was pretty decent for its time.

I’ve moved on from the wysiwyg world of Net Objects Fusion and into the dazzling limelight of CSS, XHTML, and the whole standards-based design.

This is a place to pretend I’m the pixel-pushing equivalent of Norm Abrams.

I’ve been building and rebuilding this site for the past year and a half. It is my workshop. I’ve tried this and that from him and her and pushed and prodded and tweaked and thwacked. But I never took the time to really look at the design.

I’ve been planning this redesign for months. I don’t have pages of sketches, reams of notes, and empty pens to show for the work. Rather, it has been a mental struggle to find a direction. I wanted a site that was accessible and easy to read. Yet, I also wanted it to look like something I would design.

I’m a photographer, not a graphic artist.

In school, we’d scoff at the “graphic” artist students. Us fine-art students did it for the love of craft, not for the big job working under some tyrannical art director. Sure, the guy that created Ray Gun magazine came from the graphic arts department of my alma mater, SDSU. But, he took a photo class! That gave him his cool genes. Or so I was told and believed.

This isn’t meant to make fun of either side, although I have enjoyed teasing the graphic artists. Rather, to illustrate the origins of my frustration. I want to get my hands dirty in ink and chemicals. I want to create something that has texture and is tactile. I don’t get excited about creating drop shadows. Coming up with a design concept is difficult for me. I draw boxes, throw in some gradients, and then do the computer equivalent of tearing the sheet out of a sketch pad and throwing it in the bin.

Over and over and over

One of the bishops stares through a hole at Joan of Arc

Then it clicked. I absolutely love La Passion de Jeanne d’Arc by Carl Theodor Dreyer, starring Maria Falconetti. This movie sends chills down my spine. The photography is simply brilliant. I knew my new design would be an homage to M. Dreyer et Mlle Falconetti.

This film includes the texture and distress that I find so appealing. Using the scraplets idea of Andy Clarke, I began collecting images that would inspire this design. I studied the title slides, authentic posters, and more for design directions.

There are inspirations from Joe Clark, Andy Budd, Jeffrey Zeldman, Seriocomic, Superior Pixels, And All That Malarkey, Patrick Lauke, Douglas Bowman, and so many more. Thank you for your inspiration, it’s been rewarding.

Let the games begin.
I’ve been working on the side navigation javaScript to make it more cross-browser compatible. It’s going to be a bit off kilter for the next day or so as I tweak it.