Standards-based jobs available! Do you know CSS, XHTML, and how to use the <dl>?

Ok everyone. If you are ready to enter the high-falootin’ lifestyle of the standards-based web developer, let me know. I know a few places in California looking for qualified programmers.

Filling the Vacuum

Other standardistas have been talking about the new web professionals, those who know how to create valid, accessible web sites. And those who are no longer true pros (who still use tables and invalid markup). What they are not discussing is the vacuum being left behind by the early-adopters. Let’s take me for example, as I always do enjoy the subject.

The Ted Factor

I have created a number of site conversions over the past 2 years. I’ve also moved up and up from job to job. I’d finish a conversion, move to the next, finish that, move to the next, etc… But who ends up maintaining these sites? That is the problem some companies are facing today. You hire someone that builds a standards-based web site and then gets tapped on the shoulder by a bigger company. Now the smaller company needs to hire someone that can work with this new creature.

I got an email today from a former employer. They need someone in San Diego who is ready to work. Sundance Kid and I made huge changes to their sites and now they need someone that knows how to continue the work without us. Another former employer has been searching for a web developer for over a year. What do they do? Hire a table hacker that will revert the pages back to tag soup?

Witness the Disney store makeover in Europe. They went from an accessible, standards-based design to a crappy mess. Why? Possibly it was due to lack of understanding. Perhaps they had nobody that could extend it and they felt more comfortable with the old cut-up images.

Education, Education, Education, Education…

As standards-based web developers, we need to educate others. Take someone under your wing and show them how to use CSS, DOM, or what it means to validate. Don’t hold it in. Be kind to your fellow workers and employers. If they are not recognizing your abilities, look around. Jobs are out there!

So, this post has rambled enough. If you are a standards-based developer. Leave a comment, I’ll respond with information on who to contact. Heck, leave a small resume and perhaps someone else will see this and contact you as well. The jobs I know of are in Southern California, but I do have certain connections to a very large company in Silicon Valley that is looking for quality developers.

CSS, Accessibility, and DOM for fun and profit

There comes a time when we move from doing something because it’s fun and exciting to actually having to make some money with it. We all remember the joy of walking the DOM for the first time, challenging the first-child to a match of borders, or even playing peek-a-boo with our precious little title attribute. But when does that playful joy turn into a realization that money sits behind them there divs?

Looking back fondly

christmas photo of the Drake family, ca. 1975Several of the standardistas out there have been sharing their joyful memories of their ventures into the big ol’ world of moolah with nary but a Dreamweaver on their back. Great advice is out there for the pickins. Sure there’s a mixture of demanding bosses, forever late paycheques, and brain-dead art directors. But ah….the glory of it all.

Yes, my dear… there is a big world of hacks out there for you to climb. Grab a friend and start climbing, for soon enough you will be on top and have the opportunity to reach down and pull someone else out of the valley of the table-goo. Ask questions and begin providing answers. Maybe next year, you will be the star on top of the standardista chrismahanakwanza tree.

Attribute selectors to provide language information

Attribute Selectors for International Web Sites

Sébastien Guillon, recently wrote a post about using the CSS2 attribute selector and content rule
to let visitors know what to expect when clicking on a link to an international web site. Inspired by his approach, I’ve simplified some of the code and added background images to
represent the countries.

Guillon’s original project focused on adding a text description after the link in the site’s native language. To do this, he used a set of descending selectors to look at the page’s language declaration and the link’s hreflang attribute. I am assuming the site that hosts this CSS is in english. However, it would not be difficult for you to simply change the generated content if your site is written in French, Spanish,
Swahili, etc.

Sample list of international Yahoo sites

Europe

Now look at the final version with new CSS. Internet Explorer users will not see a difference, try Firefox or Opera.Internet Explorer 7 beta 2 shows the flags but does not show the generated content.

The hreflang Attribute

The hreflang allows the user/browser to define the language of a link’s targeted page to avoid presenting
unreadable information:

The hreflang attribute provides user agents with information about the language of a resource at the end of a link, just as the lang attribute provides information about the language of an element’s content or attribute values.

W3C.org

The hreflang attribute defines the language of the web site you are sending someone to. The language is defined with a two letter abbreviation, such as en, fr, sp… You can also define the locality of this language by adding the country code to this language. This is particularly helpful for languages that have dialects. A Mexican site would have this attribute: hreflang=”sp-mx”.

The Attribute Selector

CSS2 allows us to look for tags that contain specific attributes. We can look for blockquotes with cite attributes, tables with summaries, table cells with header attributes,
and our little friend, the link with an hreflang attribute.


/*English */
a[hreflang="en"]:after, a[hreflang|="en"]:after {content:"\A0(In English)";}

Breaking it down

This rule uses a combination of attribute selector and pseudo-class to transform the link from common to fabulous.

a[…]
Look for a link with an attribute
hreflang=”en”
The hreflang attribute must include the letters “en”. This allows the CSS to work on links that do not define a country variation
:after
This pseudoselector defines the space after the link
{content:”\A0(In English)”;}
After the link, place the following text: (In English)
hreflang|=”en”
The hreflang attribute must include the letters “en” within a hyphenated set, i.e. en-us, en-ca, …

Adding the flag

Now that we’ve notified the user about what language the link will be in, let’s tell them the country the site is from. Once again, we will look at the hreflang attribute for this information. This rule is not as neat and tidy. For each country, we are going to look for all of the possible language attributes. For instance, Canadian links could have hreflang=”fr-ca” and hreflang=”en-ca”.


/*Canada */
a[hreflang="en-ca"], a[hreflang="fr-ca"] {background:url(flag-sprite.png) no-repeat 0 0; padding-left:35px;}

This time, we will give links that have Canadian country codes 35px padding to the left side and a background image of the Canadian flag that sits to the
left edge of the link’s text. This style sheet is using an image sprite to keep the server requests to a minimum. See the Alistapart.com article about using
image sprites for more information on this technique.

Et Voilà

There we have it. A set of international links with the country of origin and language clearly defined. All of this has been made possible by our friends, the
attribute selector, the pseudo-class, and the content style. Tune in next week as we learn how to make a cruise ship out of two
shoe-boxes and an XML schema.

Fine Print

This has not been tested in Safari, but it shouldn’t be a problem. The pretty and useful presentation elements will not appear in IE, NN4, and probably
most alternative devices (My Treo shows the flags but not the added content). I do not know how assistive devices would render these styles, more than likely they would be ignored. This project falls under
the “build for the best, don’t hurt the rest™” protocol.

Resources

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]