a[href$='.E'] – finds all a elements that end with a particular string, such as .pdf or .swf
a[href^='http'] – finds all a elements that start with a particular string, in this case ‘http’ (internal links are relative, so they don’t include the full URI

The result looks something like this (links won’t work):

The CSS behind it was also pretty simple:

a[href$='.pdf'] { display:inline-block;
	padding-right:20px;
	line-height:18px;
	background:transparent url(adobereader_icon.png) center right no-repeat;
	}

a[href$='.swf'] { display:inline-block;
	padding-right:20px;
	line-height:18px;
	background:transparent url(adobe_flash_icon.png) center right no-repeat;
	}

a[href^='http'] { display:inline-block;
	padding-right:20px;
	line-height:18px;
	background:transparent url(ext_link_icon.png) center right no-repeat;
	}

The problem came when I wanted to identify an external link that was also a PDF. I needed to come up with something that would identify both pieces in the URI and put in a combo icon. There is a precedent to do this using the same attribute selectors:
p[class*='blue green'] selects all links with a class of BOTH “blue” and “green”, but not if they only have one or the other.

But this wasn’t working with the href when I tried all of these (and many more):
a[href*='http pdf']
a[href*='http' 'pdf']
a[href*='http'+'pdf']

A solution

Finally, I stumbled upon a solution that uses the new :not selector. This selector allows you to select elements which – obviously – do not match the attribute/string selected. So, I came up with a pattern that basically says give all PDFs the PDF icon but NOT if the element also includes the http at the start of the URL. Together, the code looked like this:

a[href$='.pdf']:not([href^='http']) { display:inline-block;
	padding-right:20px;
	line-height:18px;
	background:transparent url(images/icons/page_white_acrobat.png) center right no-repeat;
	}

a[href^='http'] { display:inline-block;
	padding-right:20px;
	line-height:18px;
	background:transparent url(images/icons/ext_link_icon.png) center right no-repeat;
	}

And the final result looked like this:

Success!

Caveats

One strange thing that I noticed is that this only works when the CSS is in a particular order (I’m assuming based on precedence). The :not attribute has to be at the top; the general PDF code at the bottom. When I had the order (top to bottom): External PDF > PDF > SWF > external link, it didn’t work. Once I changed it to External PDF > SWF > external link > PDF, it did. Kind of odd, but I’ll deal with it.

I think working on the ZPC.com site made me realize how little design and coding had been doing – being rusty and struggling for ideas was a bit of an unpleasant surprise. Then going out into the blogosphere and learning a bunch of new developments that I hadn’t even heard about yet pushed it home further. I’m currently about 2,800 emails behind on the IxDA mailing list, and – at last count – 345 articles behind on my RSS feeds.

Shari will be away this weekend, and while I’m meeting up with my buddy Matt tonight for some beers and doing some early morning birding tomorrow, I think I’m going to do some work to get caught up on everything out there. Read my IxDA feeds, clear out the old posts on Netvibes and read the articles in my “To Read” folders. I could do with some IA/UX type stuff – and God knows that I need to get caught up on the happenings out in the world.

IA/UX Out in the World

• Reset.css: Great information on using a stylesheet to reset conflicting browser defaults
• Big Red Angry Text: Calling out deprecated code examples in noticeable ways – interesting perspective, kind of like the old ‘You sill use IE6, you suck’ messages of 2 years ago. Oh, and the site itself is full of good information.
• Authorjet: Rapid HTML Wireframing without Dreamweaver – cool idea that I’m going to play with this weekend.
• Opera leads the pack in HTML 5 support – Wired.com
• HTML 5 differences from HTML 4 – W3C – Looks great. Now can we actually get it as a real standard instead of a never-ending proposal?
• Design Coding Rap Video – just when you thought it was safe to back into Dreamweaver.

In their defense, the speaker asked the question in good faith, and they were thinking of snowboards, golf clubs and footballs when they said it. It took me only a second to respond perhaps not, and to ask if they had considered sweatpants, baseball caps, knee braces and more. Suddenly, it was more pertinent, and I decided to look into the question – do the disabled really buy sporting goods, or more specifically, do they buy them online?

Online sporting goods and the disabled

The obvious answers are yes and yes. The less obvious answer is yes, but not without significant hassle and difficulty. I surveyed a number of major e-commerce sporting goods sites, as well as a number of smaller ones. I also searched for sporting goods sites that catered to the disabled, either via the products or to service that segment of the population with ‘normal’ sporting goods items.

Findings

I found 15 stores in total: 6 general retail stores, 4 specialized stores/merchants and 5 specific-target stores (those that either provided products for the disabled or were geared toward the disabled). And the findings were disappointing to say the least.

The results: I would say that the fact that almost every site functioned with CSS disabled was good, but in many cases it was simply because they were tabled-based sites that really couldn’t break (one argument for tables). However, tables are not supposed to be for layout, but that’s another rant. Strangely, however, the non-table-based site failed miserably when CSS was disabled, as well.The major retailers failed in some basic U/A concerns, most notably the lack of alt text (which is a simple inclusion). The fact that most of them have no way to resize text is a failing since some of the sites use very small text sizes to start with. The specialized retailer sites really did no better, and in some ways were worse. I have to say that these weren’t small companies, so I know that expertise and funding isn’t exactly a huge problem – yet they are horribly designed for accessibility.The smallest retailers – the ones who focused on goods for or marketing to the disabled, faired poorly – made even worse in that they knew who there audience was and still missed essential checks for those same users. In many cases, the sites themselves are woefully designed. To be fair, these are retailers constrained by small budgets for redesigns, but again you would think that sites that are geared toward the disabled would have better accessibility. While two of these sites actually passed the 508(c) standards, one of those did so because their site was built with technology not even tested any longer in 508(c), so got a free ride.One of the biggest problems overall – and more prevalent as the scale of the site increased – was the heavy reliance on JavaScript (in all forms, including AJAX) for pizzazz and enhanced functionality. There’s nothing wrong with that and in fact if you disable JavaScript (which 6-8% of users do), you have to do so understanding that you are going to lose much of the experience that these sites offer. However, that shouldn’t mean that you can’t navigate the site, can’t find products on the site, and especially can’t add items to your cart or purchase a product. These scripts should enhance the underlying code of these functions, not replace them.

While the 508(c) standard states “equivalent functions”, in my decidedly unscientific tests, I didn’t fail a site because a user couldn’t see a nicer picture, use a dropdown nav (as long as other navigation still functioned), or watch videos with JavaScript. I did record a failure if they couldn’t navigate or – as happens all too often, add an item to their cart – functions essential to an e-commerce site. I took the same approach to images: if you go to an e-commerce site featuring this type of products with images turned off, you have to expect a degradation of your user experience. However, alt tags should replace much of the content¹, and sites failed when the entire navigation disappeared with the images.

So, the results were disappointing top to bottom, which leads to 2 questions: what is a disabled person supposed to do, and what can the retailers – at all levels – do to help them?

Is it worth it?

One may wonder what the call for accessibility is for a sporting goods site. While usability and accessibility should be considered for ALL sites – as recommended by the federal guideline 508(c) in the U.S. – there are also valid business reasons for considering usability and accessibility.

1. There are sporting goods stores which cater directly to the disabled to service this underserved market. Example: GroverGear.com (Ironically, this site fails most accessibility tests, since it focuses on paraplegics, not those with other disabilities).
2. The disabled can buy sports equipment, and often will do so online to avoid the trip to the store. For those with lower paraplegia, using the web is not a difficulty. However, those with upper body disabilities often use methods other than a mouse to navigate the web. Navigation should take this into account.
3. While perhaps not participating in physical sports, the visually-impaired can still buy “sportswear” as well.
4. Not all purchases would be for the purchaser. Some, like any other shopper, would be gifts for others.Example: Kidsportsinc.com: This user was rating their expereince on this site, and while it doesn’t address the accessibility of the site, it shows a disabled user buying sports equipment.
   

   Excellent - December 28, 2005
   Reviewer: a Kidsportsinc.com customer via post-transaction survey
   Reviewer’s rating: 5 stars
   Price: 5 bars
   Shipping Options: 5 bars
   Delivery: 5 bars
   Ease of Purchase: 5 bars
   Customer Service: 5 bars
   This was my 1rst purchase from this kidsportsinc, & it was one of the best online shopping experiences I have ever had (Ive had some real nightmares with other merchants, including this Christmas). Im disabled & cant drive, so I do do most of my shopping online. Therefore, I deal with tons of different online merchants, & I do a lot of price comparisons before ordering. I ordered 2 Deluxe Hoops to Go portable basketball systems right before Christmas (Tons of places were out of stock on this item, & my son & grandchildren really wanted this for Christmas). The price was $10 – $30 lower than other sites, & they delivered before the promised date. Ill definitely purchase from them again. Thanks kidsportsinc for great products, prices & service. Ill recomend you to everyone I know. Donna R. from IL. …
   from Yahoo Shopping

5. Standards/usability/accessibility isn’t just for the disabled.

Addressing the issue

In my research, I discovered three very important facts about sports e-commerce and the disabled:

• None of the major e-commerce sports retailers are very accessible.
• There are very few sites online for the disabled to purchase sports equipment that is a) geared toward the disabled or b) have sites geared toward disabled users.
• Those sites that do target the disabled tend to be (ironically) very far from usable/accessible by today’s standards

So, what can be done? Well, basic usability and accessibility standards are a great start – things like alt tags, skip links, etc. Other fixes are a bit larger in scope, particularly for an industry that builds its reputation on the look and feel of its displays (think Nike, Under Armour, any golf company). Gracefully degrading code for non-JavaScript users, aural style sheets for the visually impaired and the like are great things to think about, but harder to implement.

I’d love to think that complete overhauls to the sites were an option but that’s unlikely, at least in the short term. But some relatively simple fixes could be put into place to greatly improve the sites:

• Adding alt tags (the correct ones) to all applicable images
• creating print and aural stylesheets – which can be done to the existing sites, and you don’t even need to change the site beyond adding the calls to the new stylesheets.
• Make fonts resizable with ems or keyword sizes.
• Add access key functionality for important functions, especially to bypass JavaScript
• Make sure that critical functions (like Add to Cart) still work even without JavaScript

These are just the beginning of the fixes, some small and some large. But all are critical to making these sites actually usable for people with a variety of disabilities.

I have a few more things that I am still working on, but it’s been a LOT of work and variety of projects at once lately. And I still need to get going on 2006 work!

Links You Don’t Want to Miss »

• The Kid from Brooklyn – He’s a bit rough, but mildly amusing – in that abusive, crass, cursing, New York-sort-of-way
• Keith Olbermann vs. the Right Brothers
• NPR : The Laws of War: ‘Treat Them With Humanity’
• 4 Guys From Viewpoint » If WWII was an MMORPG
• SendStation – Products – earBuddy
• Before and after Katrina
• Big BoxMart
• Better 2-0-5

I have a right-column DIV that I use for images, quotes, etc. The right column div has a section of 3 sub-divs within it which in turn have background images to create a fancy-schmancy box:

/* CSS */
#rtcolboxtop {
position:relative;
background-image:url(images/callbox_top.gif);
background-repeat:no-repeat;
background-position:top left;
width:250px;
text-align:center;
}
#rtcolbox {
background-image:url(images/callbox_sides.gif);
background-repeat:repeat-y;
background-position:top left;
width:250px;
text-align:center;
}
#rtcolboxbottom {
background-image:url(images/callbox_bottom.gif);
background-repeat:no-repeat;
background-position:bottom left;
width:250px;
text-align:center;
}

In Firefox, everything is hunky-dorey, but in IE6 when you hover over the link, the whole middle section (#rtcolbox) shifts over:

After a series of tweaks to find out where the problem lay, I figured out it was this two lines of code in the CSS:

a.linkage:link, a.linkage:visited {text-decoration:none;
color:#369;
font-weight:bold;
border-bottom:1px solid #79A0C7;}
a.linkage:hover, a.linkage:active {text-decoration:none;
color:#369;
font-weight:bold;
border-bottom:1px solid #336699;}

In particular, it was the a.linkage:hover state border-bottom color change that was causing the problem; if the color stayed the same as the link and visited states, then everthing was great. But switch the color and the shift occurred.

I’ve found a lot of people mentioning similar things, including this post and the Holly Hack, but none of the solutions proposed seemed to help. In the end, I just used the * html selector hack to give IE the same color bottom-border, and better browsers the changing color.

What bugs me (no pun intended) is just why the heck this is happening and how do I stop it without having to write special code for IE (which is the client’s preferred browser, unfortunately).

Such is life at times. I’ve got too many things I’m trying to do and not nearly enough time to do them all – even with help from trusted friends. I’m still exhausted, but I think working out is going to be helping that – it feels good to exercise again … not to mention I’ll finally have a chance to get through all of those books/magazines that have been stacking up in the meantime (reading while working out used to be my number one time to read).

One of my projects at work has been really trying me – I’m a JavaScript newbie, and this script should be fairly easy but it’s driving me up a wall. Van did much of the grunt work giving me the basic script but my ineptitude at adapting it has been a hair-pulling experience. But we finally got it – and I was even able to make changes when I got them back from the client a few days ago. It’s not a bad site, overall – just took more time than I wanted/had to spend.

The house from Hell is coming together nicely now – although we are considering getting out of the rental business. After this debacle, I just don’t like the idea of being 75 minutes from the place, where I can’t keep an eye on it or have to spend lots of time to go down and fix little things. And with the market the way that it is in Newark, it might be better to sell and look for a fixer-upper closer to home.

Daily Links »

• Google’s Library Project – Check out 3 pages on one of my favorite books online!

The navigation consists of a global ‘frame’ from the parent company (header, footer and left-nav style). Between them is our content (<div id="container">), which in turn has two divs, leftcol and rightcol (I know, so original). We are basing the left navigation – the main navigational element – on the parent site, although we are tweaking the style slightly, customizing the menu items to our site specifics, and most of all making it compliant by removing tables and image-based ‘text’ links. The main content of the page would fit in the right column div, often being fed from another part of the company’s database.

The main navigation isn’t a problem. I’m using nested lists to create a primary and secondary navigation to mimic the table-based rollovers that the parent site has. The problem is that when we reach certain portions of the site, I would need to go to a tertiary level of navigation. Not necessarily a problem in and of itself, although it does pose space problems within the width of the left column div.

Still, it was my recommendation as the most advisable method to go, following this general pattern:


<ul>
<li>HEADER 1</li>
<li>HEADER 2</li>
<ul><li>page 1</li>
<li>page 2</li>
<li>CURRENT PAGE</li>
<ul><li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li></ul>
<li>page 4</li></ul>
<li>HEADER 3</li>
<li>HEADER 4</li>
<li>HEADER 5</li>
</ul>


Simple, aside from spacing problems (32-character option names don’t fit very well). However, the client team wanted to use a set of navigation for that particular page, all within the right column DIV. So, suddenly, we’re left with left navigation, and not-quite-as-far-left navigation. I tried to explain the fact that having to left-justified navigations would most likely be confusing to the user, and that incorporating the navigation into overall navigation would perhaps be more advisable. They weren’t so sure, because they wanted to make sure that the topic navigation was in the face of the user.

After some discussions, it was then suggested that perhaps top navigation within the right DIV (the ‘frame’, if you will) would make more sense. At first, I wasn’t so sure because having two navigational areas – one top and one left – isn’t always the best idea. However, most situations also use this with TOP = primary/global nav, while LEFT = secondary/subject nav – not the other way around. In the end, I created three comps:

1. Integrated Left Navigation
2. Dual Left Navigation
3. Left and Top Navigation.

So, the result? Strangely enough, to me at least, the last choice seems to be the consensus winner. While I had my concerns about offering two separate navigation elements (well, four if you include the header and footer links – but don’t get me started there), it seems to work pretty well. Creating the ‘Inner Nav’ using a top tab-based navigation, if offers a way for the user to focus on the navigation inherent to that particular user-specific system (in this case “Orders”) as opposed to the more global (and generic) navigation on the left side. All of the items that the customer might need to use from within that Order space would be within that inner navigational space – and when they are done, they simply use the global navigation to the left to visit other portions of the site.

From what I know about usability, it seems to fly in the face of good design, but in this case it seems to make the most sense, and actually appears to work fairly well. I’m sure the usability folks will have plenty of words on the subject, but at this point, I’m having trouble finding it.

Daily Links »

• George Clooney interview – I actually gained a lot of respect for this guy, despite Batman and Robin.
• Record Bluefin Tuna
• CableYoYo – cool invention for ‘cordless’ items

I can’t say that I’m surprised – the bank has been ripe for a merger or takeover for quite a while. The fact that they are going to do another job cut after their much-publicized severance package deal earlier this year is not going to sit well with those still around. It’s a shame because many people stayed thinking that they would be protected – I hope that they still are.

As for me, I’m hoping to enjoy a bounce-back in my stock after the fall it took in April. Unfortunately, the people who are going to benefit from this most are also the same people who have put the company in this position in the first place – the new executive management. As usual, the little guys are going to get hurt.

I have liked the way that B of A does business, though – maybe this will end up being a good thing for those who remain, and for cardholders who have chafed at MBNA’s recent strategies. Stay tuned…

Be sure to check out »

• Notable Words – quoting the best of the blogs
• Textile - The Human HTML editor
• Horizontal Drop-Down Menus – NickRigby.com

Form Display in Firefox

Form Display in IE

As you can see, the form elements are moved to the right in IE, despite how it is coded in both XHTML and CSS:

XHTML

<form>
<fieldset><legend>Login</legend>
username<br /><input name="username" type="text" tabindex="1" title="username" dir="ltr" value="" size="18" maxlength="24" />
login <br /><input name="pw" type="password" tabindex="2" title="password" value="" size="10" maxlength="10" />
</fieldset>
</form>

CSS


fieldset {
color:#CC0000;
font:0.7em arial,helvetica,sans-serif;
font-weight:bold;
width:60%;
}


I just can’t figure this one out – I’ve tried moving the
tags (which actually aren’t necessary and I’ll be removing anyway), changing size, removing parts, adding parts, but no change. I just can’t figure out what IE is doing here.

in other news…

• Congrats to Jody on winning Screen Grab Confab IV on Cameron Moll’s website. Way to go, Jody. I’m more than just a little jealous, by the way.

Our luck wasn’t that great to start, as we mostly saw a buttload of tree swallows when we started. Still, Shari got a chance to take quite a few good shots, and we were off. We had both brought our cameras – her with the the Nikon D70 digital (which is why she HAS her pictures), and my with my Nikon N80 film camera, which is why I don’t have mine yet. And there are a lot of cool pictures to wait for.

She got some awesome shots of a Golden-Crowned Kinglet, a garter snake, a great blue heron and a bunch of other stuff. I’m hoping that mine are nearly as good. Even if they aren’t, we got to see some cool stuff. I added 3 new species to my life list (“geek alert!”):

• Palm Warbler
• Rusty Blackbird
• Northern Rough-winged Swallow

Shari added those, plus a few others like the Eastern Phoebe and Common Merganser. But the unrecorded highlights were seeing a Bald Eagle and a nesting Great Horned Owl. Oh, that and carrying my wimpy wife through the flooded trail on my back because she didn’t want to get her sneakers muddy. Just kidding – it was pretty flooded, and that water was colder and deeper than I expected. It was hard to sneak up on things after with me squish-squishing away. Oh well, I just hope that my boots dry out by tomorrow for the hike at Cape May!