+++ WEB DESIGN UPDATE. - Volume 3, Issue 50, May 18, 2005. An email newsletter to distribute news and information about web design and development. ++ISSUE 50 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: USABILITY. 14: XML. SECTION TWO: 15: What Can You Find at the Web Design Reference Site? [Contents ends.] ++ SECTION ONE: New references. +01: ACCESSIBILITY. Essential Components of Web Accessibility By Shawn Lawton Henry "This document shows how Web accessibility depends on several components working together and how improvements in specific components could substantially improve Web accessibility. It also shows how the WAI guidelines address these components." http://www.w3.org/WAI/intro/components How to Avoid Screen Reader 'Noise Pollution' By Trenton Moss "Anyone who knows anything about web accessibility knows that images need alternative text, or 'ALT', text assigned to them. This is because screen readers cannot understand images, but rather read aloud the alternative text assigned to them. In Internet Explorer, we can see this ALT text simply by mousing over the image and viewing the yellow tooltip that appears. Other browsers (correctly) don't do this. The HTML for inserting ALT text is: (img src="filename.gif" alt="Alternative description goes here"). But surely there can't be a skill to writing ALT text for images? You just pop a description in there and you're good to go, right? Well, kind of. Sure, it's not rocket science, but there are a few guidelines you need to follow..." http://www.dmeurope.com/default.asp?articleID=7222 Deciding on Accessibility Strategies By Kevin Leitch "In Deciding on Accessibility Strategies we look at what accessibility is and how it affects our users. We then go on to look at who oversees the rules of web accessibility and how we can plan a strategy to accommodate as wide a range of people as possible." http://www.kevinleitch.co.uk/projectnew/article.php?id=8 A Conceptual Framework for Accessibility Tools to Benefit Users with Cognitive Disabilities By Paul Bohman and Shane Anderson "The authors present a conceptual framework which tool developers can use to chart future directions of development of tools to benefit users with cognitive disabilities. The framework includes categories of functional cognitive disabilities, principles of cognitive disability accessibility, units of Web content analysis, aspects of analysis, and realms of responsibility." http://www.webaim.org/techniques/articles/framework/ Toward User-Centered, Scenario-Based Planning and Evaluation Tools By Paul Bohman and Shane Anderson "Existing Web accessibility evaluation tools are only capable of providing feedback within the context of individual Web pages. This short-sighted approach produces a fractured and fragmentary assessment of the accessibility of the Web site as a whole. A more effective, holistic alternative is to focus on scenarios of user interactions across Web pages, taking into account user characteristics, and focusing on models and patterns." http://www.webaim.org/techniques/articles/scenarios/ +02: CASCADING STYLE SHEETS. CSS Organization Tip 1: Flags By Doug Bowman "Do you write and manage large CSS files? Ever get tired of scrolling up and down in search of a specific rule or set of rules? The CSS files I work with for client projects are often quite long, requiring constant scrolling up and down several screenÕs worth of text to alter rules or add new ones. While working on a current project, I just made a tiny little addition that makes finding what I want almost immediate." http://www.stopdesign.com/log/2005/05/03/css-tip-flags.html Quiz 1.1.4: Image Replacement Techniques By Bob Easton "Just over two years ago Todd Fahrner, and others, showed us how to have well structured text headings (h1 through h6) and fine looking heading images as well. Standards based structure and good looks too; who could ask for more? Well, we could. Joe Clark quickly told us the original FIR technique lacked any sort of accessibility features. Many other techniques since then have done better. How good are they?" http://tinyurl.com/bmmqv CSS Constants By Chris Heilmann "One feature designers often wished they had with style sheets are constants -- the chance to define something once and reuse it over and over in the style sheet document. This article shows some techniques for how to achieve that and discusses their pros and cons." http://www.devarticles.com/c/a/Web-Style-Sheets/CSS-Constants/4/ +03: DREAMWEAVER. Working with CSS Background Images-Part 3: Creating Background Images with a Drop Shadow By Adrian Senior "Create cool background images in Fireworks and put them in your pages with Dreamweaver." http://tinyurl.com/8d5x6 +04: EVALUATION & TESTING. Performing Usability Testing By Kevin Leitch "Performing good usability testing and being able to produce useful results from that testing is a vital part of a web designers skillset. In this article we go through the basics of usability testing and have a look at some free tools to help you log your data." http://www.kevinleitch.co.uk/projectnew/article.php?id=6 +05: EVENTS. E-Learn 2005 World Conference on E-Learning in Corporate, Government, Healthcare, and Higher Education October 24-28, 2005 Vancouver, Canada http://www.aace.org/conf/elearn/ +06: INFORMATION ARCHITECTURE. Wireframing the Content By Kevin Leitch "In this article we go through how to both create user workflow diagrams and how to create a usable wireframe prototype. Both of these things are invaluable in terms of designing accurate, well placed, well structured content." http://www.kevinleitch.co.uk/projectnew/article.php?id=7 Enterprise IA Roadmap, version 2 By Lou Rosenfeld Lou Rosenfeld posted the version two of his Enterprise IA Roadmap. http://louisrosenfeld.com/home/bloug_archive/000359.html +07: JAVASCRIPT. Javascript - The Last Piece of the Puzzle By Richard Czeiger Presentation slides http://webstandardsgroup.org/go/resource443.cfm How to Use the DOM for :hover By Mark Wubben "Yup, Jeremy Keith is completely right when he says that :hover is behavioral. That's why I'm going to explain here how you should do :hover via the DOM. That's right... I'm going to tell you!" http://novemberborn.net/javascript/using-dom-for-hover +08: MISCELLANEOUS. Publish the Website You Can Manage By Gerry McGovern "Your job as a web manager must be about a relentless focus on quality. Always put quality first and you will create a website that delivers real and sustainable value...Most websites that I come across are too big to professionally manage based on the number of staff available." http://tinyurl.com/cqlsp Interview: Steve Krug By Boxes and Arrows Staff "In April 2004, Boxes and Arrows sent a set of questions to Steve Krug for an interview to be published in the June edition. What we didn't know at the time was that Steve is a notoriously slow writer, and easily distracted. Eleven months later, this turned up." http://www.boxesandarrows.com/archives/interview_steve_krug.php +09: NAVIGATION. Mental Models For Search Are Getting Firmer By Jakob Nielsen "Users now have precise expectations for the behavior of search. Designs that invoke this mental model but work differently are confusing." http://www.useit.com/alertbox/20050509.html Making It Findable By Kath Straub "These findings - that labels matter more than structure - are not surprising if you think about it. When you land in a new city, if the street signs are visible you can get around without learning the structure of the street layout. If the signs are hard to see or missing, a familiar Ð or at least predictable Ð structure helps. In a predictable city like New York, once you know where you are, you can predict where you are going based on the 44th street, then 45th street, then 46th street grid structure. Not so in cities like Washington, which is designed on a difficult-to-intuit diagonal spoke structure, or Bombay, where streets emerged organically. So, Resnick and Sanchez suggest that the key to good architecture, and by extension usable navigation, is good labels. If you get the labels right, you are most of the way there." http://www.humanfactors.com/downloads/apr05.asp#kath Folksonomy Explanations By Thomas Vander Wal "The past few weeks have seen my inbox flooded with folksonomy questions. I am going to make things easier on my inbox by posting some common discussions here. Many of the items I am posting I have posted else where, but this will also be a great help for me." http://www.vanderwal.net/random/entrysel.php?blog=1622 Controlled Vocabularies and Folksonomies: Why Change is Good By Joshua Porter "In my last two posts, I've been hinting at why I think folksonomies like del.icio.us work: they are harnessing user behavior, rather than predicting or dictating it. The key to this is the ability of the folksonomy to change over time, an ability that controlled vocabularies often lack. In this post I'm going to explain further what I mean by that." http://bokardo.com/archives/change_is_good/ I've Heard of Folksonomies. Now How do I Apply them to My Site? By Joshua Porter "First off, let me talk about a major issue that we've been having with folksonomies: the very definition of the word. Thomas Vander Wal, who coined the term, defines folksonomy as 'regular peopleÕs categorization through tagging'. Peter Van Dijck explains folksonomy this way: 'Folksonomies are taxonomies created by users who add tags to thingsÓ. Another early explorer of folksonomies, Adam Mathes, calls it Òcooperative classification and communication through shared metadata'." http://www.bokardo.com/archives/applying_folksonomies/ +10: PHP. Ampersands, PHP Sessions and Valid HTML By David Dorward "This document is a draft article contributed to the QA Interest Group and pending review according to the QAIG's Article contributions guidelines." http://www.w3.org/QA/2005/04/php-session +11: STANDARDS, GUIDELINES & PATTERNS. How to Include Web Standards in an RFP By Jeffrey Zeldman "People often wonder how to include web standards in an internal Request for Proposal. Information architect Tanya Rabourn recently did it this way..." http://tinyurl.com/do9ku More Seriously: Why CSS Doesn't Define Behaviour By Mark Wubben "Why CSS doesn't define behaviour. The more serious follow-up on How to use the DOM for :hover." http://novemberborn.net/javascript/using-dom-for-hover/seriously Three Separated Layers, Capisce? By Robert Nyman "Now that we've finally managed to separate content and presentation, the risk is that the CSS file will just be the new replacement bulk file, with interaction in it as well. Please, please don?t let us repeat the mistakes we did with the HTML files in the beginning. Let?s separate things into where they belong." http://www.robertnyman.com/2005/04/25/53/ Implementing a Pattern Library in the Real World: A Yahoo! Case Study By Erin Malone, Matt Leacock, Chanel Wheeler "The pattern library allowed our small, centralized group to tap into the broad expertise of the Yahoo! design staff. What would have been impossible to write (authoritatively) by a small team is now being contributed to and reviewed by an expert staff. We were able to achieve this by understanding and agreeing on the problem, building a workflow that fit with the existing design process, generating buy-in by creating incentives for contributors, and by carefully designing and building an application with attention to user feedback. We were then able to convert this library of patterns into a workable set of standards by agreeing on an appropriate rating scale and by assembling a representative group of reviewers who rate the content according to the same criteria. Ultimately, we expect that pattern library will result in a strengthened Yahoo! brand and a more efficient design staff." http://tinyurl.com/9cbb5 +12: TOOLS. Xylescope By Jurgen Schweizer "Xylescope has been designed and developed for looking underneath the surface of web pages as you surf the web - it couldn't be easier. Using Xylescope you can look forward to analyzing complex CSS designs with incredible ease and experimenting with third-party sites, without having to download them onto your own computer first...System Requirements: Mac OS X 10.3.9 or later." http://www.culturedcode.com/xyle/ ViewSourceWith By Davide Ficanco "This is a extension, compatible with most mozilla applications, that allows you to open source pages with your preferred editor, useful for programmer and web designer. Tested under Windows and Linux (from version 0.0.6 works on MacOSX)." http://dafizilla.sourceforge.net/viewsourcewith/ +13: USABILITY. User Experience is a Quality, Not A Discipline By Peter Merholz "One of the things that has been hard for the 'usability community' to accept is that usability is not really interesting in and of itself. And that usability isn't really a goal, and it's definitely not the end-all be-all. Usability is simply a quality. It's an important quality, but just one of many. And it definitely doesn't warrant being a "discipline." http://www.peterme.com/archives/000489.html Content vs. Design By D. Keith Robinson "What is important to note is that content almost always should lead design, and by design here I mean the ÒcontainerÓ of the content. As part of that, content should be ÒdesignedÓ as well. I realize that might not make sense right away, so let me illustrate. When you start a project you've got goals. With most Web projects those goals relate to some sort of content. That content can be a number of things. It could be textual information, a task-based process, images, sound, heck (ironically) even a graphic design. In an ideal world you'd have written, programmed, gathered, edited, etc. that content before you got to the ÒdesignÓ stage. With Web sites this is especially true. However, what usually happens that you design first and slap, plunk, pour, or plop the content in later. Now, tell me, how does that make sense? Without content, what sense is design? I donÕt know either, but look at the hundreds of thousands of Web sites our there that were launched, and continue to languish, in this very way." http://www.7nights.com/asterisk/archives05/2005/05/content-vs-design Jello: A Different Liquid Layout By Mike Purvis "his new design sports what I believe to be a brand new* way of creating a website that is flexible relative to one's browser." http://uwmike.com/archive/jello-liquid-layout/ +14: XML. Choosing an XML Editor By Thijs van den Broek "More and more people are working with texts and documents in XML format. With the increasing popularity of XML, the number of XML editors is also increasing and it can be difficult to choose the editor that best suits a particular user or task. The aim of this Information Paper is to provide an introduction to different features XML editors can have and the extent to which these features are implemented in various editors. It also presents the result of an evaluation exercise where different user groups tried a number of the editors." http://ahds.ac.uk/creating/information-papers/xml-editors/ MT Admin and XHTML By Jacques Distler "It sounded like a simple request: serve the MovableType Administrative Interface with the correct XHTML MIME-type, so that authors at the String Coffee Table could see the MathML when they preview their posts. Shouldn't be too hard, eh? After all, MovableType is supposed to be pretty hip with Standards-compliance, and we're already serving all of the public-facing pages with the correct MIME-type. One of the abiding illusions of web-design, is that, on a well-constructed XHTML website (and, if MovableType isn't one, what is?), changing from text/html to the correct application/xhtml+xml should be an easy transition. Well, here was a good test case: a web application, written by hip, Standards-aware people, but which had (evidently) never been tested with an XHTML MIME-type. How did it fare?..." http://golem.ph.utexas.edu/~distler/blog/archives/000564.html [Section one ends.] ++ SECTION TWO: +15: 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.]