+++ WEB DESIGN UPDATE. - Volume 4, Issue 31, January 23, 2006. An email newsletter to distribute news and information about web design and development. ++ISSUE 31 CONTENTS. SECTION ONE: New references. What's new at the Web Design Reference site? http://www.d.umn.edu/goto/webdesign/ New links in these categories: 01: ACCESSIBILITY. 02: CASCADING STYLE SHEETS. 03: DREAMWEAVER. 04: EVALUATION & TESTING. 05: EVENTS. 06: INFORMATION ARCHITECTURE. 07: JAVASCRIPT. 08: MISCELLANEOUS. 09: NAVIGATION. 10: PHP. 11: STANDARDS, GUIDELINES & PATTERNS. 12: TOOLS. 13: TYPOGRAPHY. 14: USABILITY. 15: XML. SECTION TWO: 16: What Can You Find at the Web Design Reference Site? [Contents ends.] ++ SECTION ONE: New references. +01: ACCESSIBILITY. Let Them Eat Cake: Accessibility and Usability, Brought Together Through the DOM and CSS By Aaron Gustafson. "There has been a growing debate lately, pitting accessibility against usability. My feeling is that if you can make a page more usable without making it less accessible, by all means do so; do not let your inability to translate certain usability enhancements into accessible functions or features restrict your use of those enhancements. As long as the enhancements do not restrict accessibility, go for it. As many of you know, with JavaScript and the DOM, we have the ability to control every element on a well-structured webpage. It is my feeling that, using the DOM, we can improve the usability of a page without restricting its accessibility. Sprinkle in a little CSS and we have the recipe for a wonderful experience all around, regardless of the browser, platform or device being used." http://www.alistapart.com/d/eatcake/final.html Audio Transcription For Podcasts: JC Human vs. CastingWords.com By Robin Good. "Robin Good reviews two audio transcription services to see how they compare. He submitted the same 30-minute podcast two both services and posts the results." http://tinyurl.com/b8lhq The Accessibility Hat Trick: Getting Abbreviations Right By Colin Lieberman. "...Colin Lieberman tells how to pull AAA accessibility out of your hat when the W3C kills acronym, Microsoft ignores abbr, and JAWS hates dfn." http://www.alistapart.com/articles/hattrick Google Petition Concerning CAPTCHA By Matt Bailey. "Well, I can't say that I'm surprised about this one. Pardon the pun, but you could 'see' this coming. The Blind Access Journal is rising up to ask Google to give them access. For years, blind users have been frustrated at the inability to be a part of Google's growing services. It was a slap in the face to the Blind community when Google celebrated Louise Braille's birthday by using a Braille logo. The Braille Google logo was simply the last straw..." http://tinyurl.com/cdxpp Correction: The following article was incorrectly credited in our December 21, 2005 issue. Karl Dawson not Mike Cherim is the author. How Useful are Accessibility Evaluation Tools? By Karl Dawson. "To assess and discuss the benefits and limitations of using an automated evaluation tool to assess the technical accessibility of a large, standards-compliant website driven by a Content Management System. I've broken this research into several areas: [1] The Usefulness of Automated Tools [2] Limitations of Automated Tools, [3] Quality control at the bench." http://tinyurl.com/9s2fn +02: CASCADING STYLE SHEETS. CSS 2.1 Selectors, Part 1 By Roger Johansson. "Among the first things you learn about when you start out with CSS are selectors. Selectors are obviously a fundamental part of CSS, but few developers use them to their full potential. While you can get a lot done with just the type, ID, and class selectors, there are many more." http://www.456bereastreet.com/archive/200509/css_21_selectors_part_1/ CSS 2.1 Selectors, Part 2 By Roger Johansson. "This is the second part of a three-part article series that explains the selectors that are available in CSS 2.1. Part 1 is about the more basic stuff like type selectors, class and id selectors, the universal selector, and simple selectors." http://www.456bereastreet.com/archive/200510/css_21_selectors_part_2/ CSS 2.1 Selectors, Part 3 By Roger Johansson. "This is the third and final part of a three-part article series that explains the selectors that are available in CSS 2.1. Part 1 is about the more basic stuff like type selectors, class and id selectors, the universal selector, simple selectors. In Part 2 I explained combinators, combined selectors, grouping, and attribute selectors." http://www.456bereastreet.com/archive/200510/css_21_selectors_part_3/ CSS 3 Selectors Explained By Roger Johansson. "...If we look a little further ahead, there are even more powerful selectors waiting to be implemented and used in CSS 3. Many of the CSS 3 selectors have already been implemented in modern browsers, but in general support is far too patchy for developers to rely on these new selectors. However, there are cases where they can be used to add nice forward enhancing features, so I think taking a look at how the new selectors in CSS 3 work can be useful...." http://www.456bereastreet.com/archive/200601/css_3_selectors_explained/ Invasion of the Body Switchers Version 2.1 By James Edwards. "Invasion of the Body Switchers (IOTBS) is an efficient object-oriented style sheet switcher, which offers independent switching of multiple media types, and supports an unlimited number of options and controls. It works in all modern graphical browsers except Mac/IE5 (with javascript enabled), and is available in a range of modes and interfaces..." http://www.brothercake.com/site/resources/scripts/iotbs/ Managing HTML and CSS to Keep Clients Happy and Avoid 'Disaster' - Part One By John Gallant and Holly Bergevin. "This article is meant for the coder who is becoming comfortable with tableless design, but must deal with other members of a site design team, or a client, who doesn't grasp CSS as well as you do. Suddenly your well-working CSS layouts are getting folded, spindled, and yes, even mutilated! The horror! If you are unprepared, a long slow train of 'difficulties' may await you. We've been there, done that, and we are going to tell you all the little things that we learned the hard way..." http://www.communitymx.com/content/article.cfm?cid=E74CC +03: DREAMWEAVER. Applying CSS from Screen to Print to Handheld - Part 2: Layout and Background Images By Adrian Senior. "In Part 2 of this tutorial, you will prepare your design elements for the basic layout of the page. This is necessary before you can complete the CSS work in Part 3. In this part, you will complete the #header div, set a background image against the body element, and create the #innerwrapper div and its background image." http://tinyurl.com/8ngxk Applying CSS from Screen to Print to Handheld - Part 3: Columns and Footer By Adrian Senior. Create the columns and footer for the site. http://tinyurl.com/d7mx9 Applying CSS from Screen to Print to Handheld - Part 4: Navigation and Main Content By Adrian Senior. "In Part 3 of this tutorial, you completed the transformation of your design's structure from a table layout to a CSS layout. In this part, you will add content to your design, using CSS to style elements within the page. You will do this by treating each element within the design as a separate entity, and you'll target each of these elements directly from the CSS file by writing our selectors in such a way that they map to specific elements in specific containers." http://tinyurl.com/bswhj +04: EVALUATION & TESTING. Change It Up! By Mandy Lowey. "Not every upgrade comes with a big budget, so you have to work with what you've got. Here are a couple of ways you can work with an existing UI to give it a new look and function." http://www.boxesandarrows.com/view/change_it_up_ +05: EVENTS. Think! Creating eLearning Courses That Work February 18, 2006. Minneapolis, Minnesota U.S.A. http://www.stctc.org/events/2006_02_special.htm TODCon 8: The Other Dreamweaver CONference May 19-21, 2006. Orlando, Florida. U.S.A. http://www.todcon.org/ CADUI 2006: 6th International Conference on Computer-Aided Design of User Interfaces June 5-8, 2006. Bucharest, Romania http://www.isys.ucl.ac.be/bchi/cadui/06/ +06: INFORMATION ARCHITECTURE. Visio - The Interaction Designer's Nail Gun (2nd edition) How to use Visio for rapid prototyping By Henrik Olsen. "This is a second edition of the article on using Visio for rapid prototyping for the web. The new edition includes a new and improved version of the GUUUI Prototyping Tool for Visio 2003." http://www.guuui.com/issues/01_06.php +07: JAVASCRIPT. Accessibility of AJAX Application: Part 1 By Jared Smith. In Part 1-Accessibility Issues, Jared Smith addresses the following questions: 1. What is AJAX?; 2. Why AJAX?; 3. Why not AJAX? He also offers a list of resources related to the accessibility of AJAX. http://webaim.org/techniques/ajax/ JavaScript Coding Style By Dan Webb. "It seems like every JavaScript hacker has their own way of laying out scripts. Some just use lists of functions and a few global variables, others use classes very heavily and some use objects to give some kind of namespacing to their scripts. It seems like there are as many coding styles as there are JavaScript programmers but in other languages coding styles are much more consistent. I've been thinking a lot recently about the pros and cons of script structuring techniques because I'd really like to settle on one standard for all my own (and Vivabit's) code to aid readability and maintainability." http://www.vivabit.com/bollocks/2006/01/16/javascript-coding-style +08: MISCELLANEOUS. Lou Rosenfeld Eats His Own Dog Food By Liz Danzico. Liz Danzico interviews Lou Rosenfeld over at Boxes & Arrows. http://www.boxesandarrows.com/view/lou_rosenfeld_eats_his_own_dog_food Web 3.0 By Jeffrey Zeldman. "...I take a fair and balanced look at Web 2.0..." http://www.alistapart.com/articles/web3point0 Why Zeldman's Web 3.0 Misses the Mark By Joshua Porter. "...There's a big difference between ideas and the people who wrongly abuse them. To me, it looks like Jeffrey doesn't like the people who evangelize Web 2.0 as being the greatest thing since sliced bread, the cure for headaches, and the best get rich scheme since Ponzi. Dash of Ajax, pinch of Ruby on Rails, and you're about to flip. Of course, Zeldman is right about this: everyone is sick of these people. But there are also groups of people who are much more sane than that, and who follow Web 2.0 reasonably, pointing out that it's not about the technology or the get-rich schemes, but about creating useful applications for real people..." http://bokardo.com/archives/why-zeldmans-web-30-misses-the-mark/ +09: NAVIGATION. Source Order, Skip Links and Structural Labels By Roger Hudson, Russ Weakley, and Lisa Miller. "Is page source order important to screen reader users? Recently, the idea of placing the informational content of a web page before the navigation has gained some currency. This paper reports on our research into the relevance and importance of page source order, skip links and structural labels for screen reader users." http://www.usability.com.au/resources/source-order.cfm 'Back to Top' Links Considered Harmful By Jukka "Yucca" Korpela. "Web pages often contain links to the start of the page, typically named 'Back to Top' and possibly accompanied with icons such as an arrow pointing upwards. This document explains why such usage is bad practice, especially for accessibility reasons. It also discusses the techniques creating such links in a manner that minimizes the damage." http://www.cs.tut.fi/~jkorpela/www/totop.html A (Slightly) Better Technique For 'Back to Top' Links By web-graphics. "Until recently, I never had the occasion to employ links that scroll the browser viewport back to the top of the page. When a client requested them however, I had to look up how to make them. I didn't like the options I found..." http://web-graphics.com/mtarchive/001659.php Site Maps and Site Indexes, Revisited By Jared Spool. "Before the holidays, I generated blogosphere fervor when I mentioned I think it's a potential waste of valuable development resources to construct and maintain site maps and site indexes. Several people left excellent comments which I never had the chance to address until now, so let me see if I can clarify my thinking." http://tinyurl.com/dxo86 Image Links vs. Text Links By Jared Spool. "...Our finding was when users clicked in image links they were just as likely to succeed or fail as when the clicked on text links. There was no statistically-meaningful difference. Our inference from this was a well-designed image link will work as well as a well-designed text link. A poorly-designed image link will fail as often as a poorly-designed text link. Since image links are significantly harder to design 'well', our recommendation to clients has been to favor text links. They are more efficient to create and manage and produce the same results. We also concluded, from this same research, that there are three different types of images that can appear on a page..." http://www.uie.com/brainsparks/2006/01/16/image-links-vs-text-links/ +10: PHP. Back to Basics: PHP and Arrays By Dennis Pallett. "No more Ajax, Tags, Web 2.0 or anything else: it's back to basics with this article on Arrays in PHP" http://www.phpit.net/article/back-to-basics-arrays/ +11: STANDARDS, GUIDELINES & PATTERNS. Internetworld Gets Web Standards All Wrong By Robert Nyman. "This post is mostly applicable for Swedish readers, but I believe most of you in other countries stumble across this fairly frequently too..." http://tinyurl.com/czgne +12: TOOLS. Online Accessibility Check By etre. "Check the compliance of your website with a number of leading accessibility guidelines using our automated online page check." http://www.etre.com/tools/accessibilitycheck/ TENbot Tool By David Burke. "Convert online newsfeeds in Really Simple Syndication (RSS) format to the Text Email Newsletter (TEN) standard developed by E-Access Bulletin publishers Headstar. The TEN Standard allows easy navigation for screen reader and print impaired users. TENbot, aimed primarily at web site owners, has been designed by David Burke of UK technology firm Daden..." http://www.daden.co.uk/tenbot ROR Sitemap Generator By rorweb.com. "This free tool will crawl your website and generate a ROR Sitemap with up to 1,000 URLs for ALL search engines, not just Google..." http://www.rorweb.com/rormap.htm +13: TYPOGRAPHY. CSS Typography By Garrett Dimon. "You don't often see 'CSS' and 'typography' used in the same sentence-and for good reason. Traditional typography is a very subtle and beautiful form of design, with thousands of variations and choices. Unfortunately, with CSS that's not quite the case. Don't lose hope just yet, though. CSS can do more than you might think. With font embedding, the widespread adoption of sIFR and a slew of image replacement and JavaScript techniques, there are numerous ways of avoiding the typographic limitations of the Web. Unfortunately, these methods aren't trivial to use and each has its own limitations. So we'll focus on embracing our options within the boundaries of CSS..." http://www.digital-web.com/articles/css_typography/ +14: USABILITY. Web Users Judge Sites in the Blink of an Eye By Michael Hopkin. "Potential readers can make snap decisions in just 50 milliseconds. Quickly now: like what you see? Like the look of our website? Whatever the answer (and hopefully it was yes), the chances are you made your mind up within the first twentieth of a second. A study by researchers in Canada has shown that the snap decisions Internet users make about the quality of a web page have a lasting impact on their opinions..." http://www.nature.com/news/2006/060109/full/060109-13.html Defining the User Experience By Mike Kuniavsky. "The definition I came up with is that, in a nutshell, the user experience of a product is everything that's not human-computer interaction. It's everything that affects how someone interacts with a tool--whether it's software, hardware, a service, or whatever. To me, this meant that I had to deal with all of the squishy, abstract things that good cognitive psychology and computer science-trained designers like me try not to deal with: business goals, emotions, relationships, branding, etc." http://www.orangecone.com/archives/2006/01/defining_the_us_1.html The Art of the Incremental Redesign By Jeffrey Veen. "...There will always be a place for innovation, of course. But maybe there's value in reconsidering the redesign for a more measured, iterative approach. Maybe it's time to slow down just a little." http://www.veen.com/jeff/archives/000840.html +15: XML. Migrating from HTML to XHTML and XML: Part 2/2 By Char James-Tanny. "...validating your XHTML files, migrating from XHTML to XML, possible XML standards, creating your own standard, validating your XML files, and creating an XML to HTML transform." http://www.winwriters.com/articles/migrate/part2.htm Don't Invent XML Languages By Tim Bray. "The X in XML stands for 'Extensible'; one big selling point is that you can invent your own XML languages to help you solve your own problems. But I've become convinced, over the last couple of years, that you shouldn't. Unless you really have to. This piece explains why. And, there's a companion piece entitled On XML Language Design, in case you do really have to..." http://www.tbray.org/ongoing/When/200x/2006/01/08/No-New-XML-Languages From the Top: MIME and Content Negotiation By Karl Dawson. "Content negotiation at its simplest is a conversation between your web server and a user agent (browser, search engine bot etc) to determine the preferred format or version of a resource to serve. In this, the second in my article series 'From the Top' I will introduce you to the web (head) waiter that knows how to correctly serve your web page to a user agent..." http://www.thatstandardsguy.co.uk/2006/01/16/content-negotiation/ [Section one ends.] ++ SECTION TWO: +16: What Can You Find at the Web Design Reference Site? Accessibility Information. http://www.d.umn.edu/goto/accessibility Association Information. http://www.d.umn.edu/goto/associations Book Listings. http://www.d.umn.edu/goto/books Cascading Style Sheets Information. http://www.d.umn.edu/goto/css Color Information. http://www.d.umn.edu/goto/color Dreamweaver Information. http://www.d.umn.edu/goto/dreamweaver Evaluation & Testing Information. http://www.d.umn.edu/goto/testing Event Information. http://www.d.umn.edu/goto/events Flash Information. http://www.d.umn.edu/goto/flash Information Architecture Information. http://www.d.umn.edu/goto/architecture JavaScript Information. http://www.d.umn.edu/goto/javascript Miscellaneous Web Information. http://www.d.umn.edu/goto/misc Navigation Information. http://www.d.umn.edu/goto/navigation PHP Information. http://www.d.umn.edu/goto/php Sites & Blogs Listing. http://www.d.umn.edu/goto/sites Standards, Guidelines & Pattern Information. http://www.d.umn.edu/goto/standards Tool Information. http://www.d.umn.edu/goto/tools Typography Information. http://www.d.umn.edu/goto/type Usability Information. http://www.d.umn.edu/goto/usability XML Information. http://www.d.umn.edu/goto/xml [Section two ends.] ++END NOTES. + SUBSCRIPTION INFO. WEB DESIGN UPDATE is available by subscription. For information on how to subscribe and unsubscribe please visit: http://www.d.umn.edu/goto/webdevlist The Web Design Reference Site also has a RSS 2.0 feed for site updates. + TEXT EMAIL NEWSLETTER (TEN). As a navigation aid for screen readers we do our best to conform to the accessible Text Email Newsletter (TEN) guidelines. Please let me know if there is anything else we can do to make navigation easier. For TEN guideline information please visit: http://www.headstar.com/ten + SIGN OFF. Until next time, Laura L. Carlson Information Technology Systems and Services University of Minnesota Duluth Duluth, MN U.S.A. 55812-3009 mailto:lcarlson@d.umn.edu [Issue ends.]