+++ WEB DESIGN UPDATE. - Volume 4, Issue 29, January 10, 2006. An email newsletter to distribute news and information about web design and development. ++ISSUE 29 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: EVENTS. 04: INFORMATION ARCHITECTURE. 05: JAVASCRIPT. 06: NAVIGATION. 07: PHP. 08: STANDARDS, GUIDELINES & PATTERNS. 09: TOOLS. 10: TYPOGRAPHY. 11: USABILITY. 12: XML. SECTION TWO: 13: What Can You Find at the Web Design Reference Site? [Contents ends.] ++ SECTION ONE: New references. +01: ACCESSIBILITY. Writing a Good Accessibility Statement By Gez Lemon. "Accessibility statements are an ideal place to empower visitors to your website. Most accessibility statements are too technical, and don't necessarily address the needs of the visitor. Those that do address the needs of visitors often have the information lost in a myriad of other information that is unlikely to be understood by the average visitor to the website. What should and shouldn't be included in an accessibility statement?" http://tinyurl.com/am8wl Massachusetts Grapples with Open Source's Cost to the Disabled By Lisa Vaas. "...The commonwealth can in all likelihood figure out a standard of accessibility for the disabled, whether that standard is encapsulated in the open-source OpenDocument format or whether the door is left open for proprietary formats such as Microsoft Corp.'s Open XML Office. But what support will there be for the infrastructure needed to train the individuals who will have to learn wholly new technology..." http://www.eweek.com/article2/0,1895,1901845,00.asp Advocates For Disabled Wary of Open Source By Linda Tucci. "Beleaguered Massachusetts CIO Peter Quinn has resigned, but the controversy surrounding his decision to adopt OpenDocument formats won't end with his departure. State officials haven't indicated they plan to amend Quinn's plan to adopt OpenFormat standards by Jan. 1, 2007 -- a deadline that has advocates for people with disabilities worried..." http://tinyurl.com/8jkf5 ODF Subpar for the Disabled? Not so Fast says Google Researcher By David Berlind. "...the designers of the OpenDocument Format chose to use XForms; the same technology that is the standard forms technology for the Web. By itself, this seems like no big deal. But, as it turns out, the ability to fill out electronic forms is critical for PWDs. As such, XForms - the newest forms technology for the Web ? was designed with accessibility in mind. Raman, who is blind, should know: as an employee at IBM for most of the last five years, he was one of the authors of the World Wide Web Consortium's XForms standard. According to Raman, by virtue of its reliance on XForms, ODF has actually inherited some of the Web's key accessibility features..." http://blogs.zdnet.com/BTL/?p=2230 +02: CASCADING STYLE SHEETS. CSS Tricks for Custom Bullets By David Sawyer McFarland. "Cascading Style Sheets (CSS) give Web developers precise control over a page's typography and layout. One secret weapon of CSS-based designs is the background property, which adds images and color to the background of any element on a Web page." http://www.macworld.com/2005/12/secrets/januarycreate/index.php Overuse of Floats Considered Harmful By David Baron. "...Floats were intended to be used to take small pieces of content out of the flow and let the rest of the text wrap around them. They were not intended to be used for the main content of a page, nor were they designed for it. Nevertheless, use of floats for the main content of a page is quite common today...I see this situation as similar to the use of tables for layout that is now quite widely accepted as misuse. The current overuse of floats is often done with the goal of fixing one of the problems caused by the misuse of tables: incorrect use of semantic markup..." http://dbaron.org/log/2005-12#e20051228a Cross Browser Issues: CSS Hacks, Understanding Compatibility By Jennifer Sullivan Cassidy. "One of the greatest problems with CSS, or Cascading Style Sheets, is the issue of cross browser compatibility. What may look great in Mozilla browsers looks terrible in Internet Explorer, and may totally break in Netscape. The biggest mistake a web designer or developer using CSS can make is to design for only one browser, or to assume that since the largest group of viewers use IE, to disregard its flaws that are apparent in other browsers. This article and the next in this series will cover a few of the cross browser issues in CSS, why the code acts the way it does, and how you can either fix it, or avoid it altogether. But before we jump right into the CSS hacks and fixes, I want to explore a cornerstone in the foundation of good CSS programming: understanding browser compatibility." http://tinyurl.com/87g4w +03: EVENTS. Portal 2006 June 6-9, 2006. Gettysburg, Pennsylvania U.S.A. https://biz.gettysburg.edu/it/portal06/index.html +04: INFORMATION ARCHITECTURE. Classification and Categorization: A Difference that Makes a Difference By Elin K. Jacob. "Examination of the systemic properties and forms of interaction that characterize classification and categorization reveals fundamental syntactic differences between the structure of classification systems and the structure of categorization systems. These distinctions lead to meaningful differences in the contexts within which information can be apprehended and influence the semantic information available to the individual. Structural and semantic differences between classification and categorization are differences that make a difference in the information environment by influencing the functional activities of an information system and by contributing to its constitution as an information environment." http://tinyurl.com/dph57 +05: JAVASCRIPT. Ajax Link Tracker By Glenn Jones. "One of the more interesting aspects of Ajax is the ability to track a user's interaction within the browser. I wanted to investigate navigation patterns, so I have written an Ajax based link tracker. If you press the 'Ctrl' and "X" keys you will be presented with an overlay which displays links usage by percentage. This functionality was created with JavaScript and a very simple API..." http://www.glennjones.net/Post/805/AjaxLinkTracker.htm Mozilla Developer Center: JavaScript By Mozilla. http://developer.mozilla.org/en/docs/JavaScript JavaScript Developer Center By Yahoo. http://ws1.inf.scd.yahoo.com/javascript/ JavaScript Tutorial By W3schools.com. http://www.w3schools.com/js/ XMLHttpRequest By MozillaZine. API documentation for Mozilla's XMLHttpRequest http://kb.mozillazine.org/XMLHttpRequest Leak Free Javascript Closures By Laurens van den Oever. "Javascript closures can be a powerful programming technique. Unfortunately in Internet Explorer they are a common source of memory leaks. Therefore I propose a method to create closures that don't leak memory." http://laurens.vd.oever.nl/weblog/items2005/closures/ An Introduction to Javascript Animation By Emrah Baskaya. "Javascript animations are seen more and more in our daily web routines. Most can be annoying too, if they simply serve the purpose to lamely look cool, while they may actually only distract the user. However, when used properly, they can really add to the user experience, and increase the usability of your site. Also, with the advent of the DOM, the more widespread usage of new generation browsers, and the adoption of xmlHttpRequest and other technologies which all together are called AJAX, the need for notifying user with what is going on with simple animations can become a necessity, such as using fading colors and resizing elements. Actually, I am putting such an animation to good use on this very page, while step-by-step explaining the main animation function for resizing. The principles are all the same, but the color fading was inspired by the Yellow Fade Technique For Dummies, this one is a versatile function that you can fade any color to any color. It is also a very light-weight script that you can modify to use for any type of animation, as you see on this page. If you have specific questions for implementing the scripts in your own sites, feel free to drop me a mail using the contact page oh hesido.com." http://www.hesido.com/web.php?page=javascriptanimation +06: NAVIGATION. Using Meaningful and Stable Categories to Support Exploratory Web Search: Two Formative Studies By Bill Kules and Ben Shneiderman. "Categorizing web search results into comprehensible visual displays using meaningful and stable classifications can support user exploration, understanding, and discovery. We report on two formative studies in the domain of U.S. government web search that investigated how searchers use categorized overviews of search results for complex, exploratory search tasks. The first study compared two overview conditions vs. a control (N=18). The overviews were based on the federal government organizational hierarchy. With the overview conditions, participants noticed missing results more often than participants in the control. They also found pages of interest deeper within the results. The overview conditions received significantly higher subjective ratings. The second study compared an overview based on automated clustering vs. the government hierarchy overview (N=12), and the results suggest that domain knowledge and task influenced the preferred overview. The studies lend support to the use of compact overviews based on meaningful and stable categories tightly coupled with ranked result lists." http://hcil.cs.umd.edu/trs/2005-31/2005-31.htm Usability Studies 101: Making Cookies By Joseph Carrabis. "The NextStage CRO explains how to develop visitor-specific navigation for your site so that your customers come back and convert. " http://www.imediaconnection.com/content/7675.asp +07: PHP. Better Web Usability Through a Text-Size Switcher Built with PHP and CSS By Mellonfire. "This tutorial will show you how to add such a text size switcher to your Web pages using PHP and CSS, thereby immediately making your Web site more accessible and scoring you useful brownie points from everyone over the age of 50." http://builder.com.com/5100-6371_14-6002439.html +08: STANDARDS, GUIDELINES & PATTERNS. Failed Redesigns By Joe Clark. "...A failed redesign is a Web page created from scratch, or substantially updated, during the era of Web standards that nonetheless ignores or misuses those standards. A failed redesign pretends that valid code and accessibility guidelines do not exist; it pretends that the 21st century is frozen in the amber of the year 1999. It indicates not merely unprofessional Web-development practices but outright incompetence. For if you are producing tag-soup code and using tables for layout in the 21st century, thatŐs what you are: Incompetent..." http://blog.fawny.org/2006/01/04/failed/ Professional vs. Unprofessional Web Development Practices By Virginia DeBolt. "...The question becomes, for me, Are we teaching people to know better? If your students leave your classroom thinking tables-based layouts and tag soup are the way to do things, then have you failed as a teacher? Have you turned people loose in the workplace who are less than professional? I think the anwser is yes..." http://www.webteacher.ws/2006/01/professional-vs.html +09: TOOLS. LinkScan/QuickCheck By elsop. LinkScan is a link checking tool. http://www.elsop.com/quick/quick.cgi +10: TYPOGRAPHY. The Positive Side Effect of Big Text: Less Text By Justin Reese. "Like everything, the key is moderation. Too much of anything is a bad idea. However, if you're going to err on the side of bigger or smaller, I'd take bigger. Now I'm not talking 48 px type everywhere, but 14 px vs 10 px with the occasional big headline. Newspaper design has been around a lot longer than web design and they're still sticking with big huge headlines. And then there's the positive side effect of big text: less text. The bigger the text the less you write and nearly every corporate website could use less words. Better words are more important than less words, of course, but less words would be a great start." http://tinyurl.com/8c3cw Why Big is In By Garrett Dimon. "...Big isn't just about style, it's about being practical. For so long, designers were stuck on creating small pixel perfect designs with small fonts and huge quantities of information in a small areas. It was busy, overwhelming, and usually difficult to read. Now, there's a newfound appreciation for simple, and that's a good thing. Long live big." http://www.garrettdimon.com/archives/why-big-is-in Big, Beautiful, Dumb By Paul Scrivens. "...big is good in portions as it always has been since the beginning of design. Thinking that making everything big makes things easier is silly just the same as thinking that making everything small saves the person the trouble of having to move their eyes across the screen. Recognizing a trend and taking portions of it to work in your own designs is a great thing. Seeing a trend and applying it to everything you do might not be the best of ideas." http://9rules.com/whitespace/big_beautiful_dumb.php +11: USABILITY. Yeah, But Can You Give Me a Reference? 2.0 By Kath Straub, Susan Weinschenk, and John Whalen. HFI's 2005 annual summary of usability research. http://www.humanfactors.com/downloads/dec05.asp +12: XML. Teach Yourself XML in 24 Hours, Part 2 By Michael Morrison. "This week we continue learning about Xlink. Some of the topics covered are addressing with XPointer, linking with XLink, understanding XLink attributes and more" http://www.webreference.com/programming/xml_24/2/ [Section one ends.] ++ SECTION TWO: +13: 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.]