Content Demo 2009/05/04

Main Points

• Clickable Menu Link Footprint Making menu links easier to click by expanding their footprint.
• Minor Changes Non-glitzy changes to the page.
• Table Styling The large table we inserted for the new Testing Procedure page forced us to think about accessibility and styling for tables.
• ^{Skip to Main Points} links return to the Main Points menu.

Clickable Menu Link Footprint

I added the fabulous new display:block and padding to the menu item links; this will allow visitors to click anywhere over the padding to activate the link rather than having to mouse exactly over the link text - except in IE6 where you do. Depending on how IE7 works, this could be a huge boost for the template, and at the very worst it works like it did without this technique so I think we're good to go. We also added a hover color to make it extra easy to track where you are. Surprisingly, this works fine in IE6, but I'm not going to complain. I had to add a display:inline to the menu li tags in order to stop IE6 from putting big 1em gaps between the list items of the menu. But after that we were good to go.

And somehow in playing with the margins and padding in order to make the IE6 gaps disappear, we got both the navbars to hug the top and bottom of the page template again. Not sure exactly how, but fantastic. Since I was already "up to speed" I did some further testing for purely educational purposes. There's a style rule for list items in both navbars; I added a margin:auto; and this seems to be what is snapping the navbars to the top and bottom of the page. I'm also having a small problem in Firefox and Opera; if the "title" tooltip popups up and you accidentally rollover it, the browser treats it as though you'd moved off the menu and deactivates it. Haven't figured out a solution to this yet.

I got some user feedback on the template design. On the theory that the menus should be as MS Windows-like as possible I had played around but ultimately setteled on a fairly narrow top-bottom padding and no borders around the menu items; this I showed off. The first comment I got was that it was difficult to see the text when the hover color activated. I tried turning it off, and the next comment complained that it was too difficult to tell where you were clicking. So I gave the menu items a smidge more padding and a border to make it visually clear which link you were over. We then experimented with various ways to work the hover color back in. The one which received the most positive feedback was a full reversal, background from light to dark, text from whatever shade to light. (#FFDDBB, our normal background color). I don't like that you lose the text color information (visited, holdingLink, etc.) but you can get it back easily by mousing off for a second. I tried several versions to keep the color information, however, people definitely responded more favorably to the higher contrast option which I understand and am implementing.

In testing, this also made a huge difference in selecting links in Opera's mini browser. The mini browser resets the font size much smaller and previously required you to click exactly on that text. It is now much easier to click anywhere on the line which contains the text. Also, the hover highlight makes it trivial to identify which link you're really over; a welcome change since before you almost had to guess.

[chroniclemaster1, 2009/05/05]

Minor Changes

I adjusted the Recommended Page Links so that the list items display inline. I've played with this functionality before and may change my mind again, but I don't like how much height the list items take up when they display as a list. I lost the bullets which is unfortunate, but I think CSS will let me add manual bullets with a background image trick or two. It also may spread too far across the page compared to what I'd like, but again, I can play with that. I also added the hover link background color, which helps the usability. Between that and the little bit of padding I'm applying to the link tags, the results are coming out much better than I remember it going when I've played with this before. I think this will require tweaking, not major rework from here. It works better to have the links a bit shorter if possible, so I removed all the "Earth Chronicle" which was in front of each link. I think that's a given and the links look and work better without the extra text.

We made some changes to the SEO procedures, like making all the title attributes human readable. We also updated the navbar and page link content. First, we finagled the navbars back into place in the top left and bottom left corners, thanks to margin:auto (the greatest CSS tool ever invented). We also changed the New Projects menu; the "ASP.NET 2.0 Play" now reads "ASP.NET" to be consistent with the other menu items. We also added the CSS development section to the Accessible Page Links and grouped it with the Flash section. I'm trying to keep these together as "Design" vs. "Development" sections. We removed the holdingLink references for the Javascript and XML / XSLT menu items now that those sections have been updated for master pages and posted. At the bottom of the Reader's Guide menu, we included the EC History page for about a week in testing. You won't see it, because it was replaced with the brand new Ongoing Testing page which you'll see now. That is the more useful page and the link for EC History can still be reached there.

Table Styling

We've put some minor styling together before, but we'd never really looked at tables thoroughly. Probably because we weren't really using them. However, the new testing procedures page needed a fairly large table and forced us to clean some things up. It's also worthwhile to note that this is the first time we've constructed a proper accessible table. It includes a summary attribute in the table tag, a nested <caption> element before the first row, and the <th> tags have been used properly including scope attributes to indicate whether they are row or column headers. Check it out...

• Beta Home
• Beta Reader's Guide
• Beta Projects
• Beta FAQ