+++ WEB DESIGN UPDATE. - Volume 5, Issue 14, September 29, 2006. An email newsletter to distribute news and information about web design and development. ++ISSUE 14 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: EVALUATION & TESTING. 04: EVENTS. 05: FLASH. 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. On Handicapped Access, Target Fights the Wrong Fight for the Wrong Reason By Evan Schuman. "...What if Target took this argument to its next stage and decided that discrimination laws and hate laws didn't apply to their Web site because those federal laws-many of which were written long before today's Web was prominent-didn't specifically mention them? Would it feel free to flout those laws on its Web site by publishing racial slurs and hate-filled death threats?. E-commerce is such an ingrained part of retail today that all physical laws-where possible-must apply. But even if Target had a more sound defense to this litigation, why in the world would it want to pursue it? Why is it spending a mountain of legal dollars to justify keeping a large segment of potential consumers from easily using its site?..." http://www.eweek.com/article2/0,1895,2019635,00.asp DTI: 'Our blind guy can use it so it's fine' By Bruce Lawson. "...It shows that the DTI (United Kingdom's Department of Trade and Industry) top-brass regard their duty as merely 'allowing' access; they haven't thought about the accessibility of the site for a blind member of the public just surfing in for the first time, who doesn't want to practice daily in order to accomplish their business with the DTI. A similar argument to this is rumbling through the courts in the USA. Compare this with the NFB/ Target lawsuit. Target has found three screenreader users who say 'we can use it, so it's not inaccessible', although Jim Thatcher's declaration to the court suggests to me that it's hardly doing its best to assist screenreader users who aren't as proficient as Target's stooges..." http://www.brucelawson.co.uk/index.php/2006/dti-blind-user/ Finally, Caption Playback By Google. "By now, you may have noticed that we've just introduced a small but significant new feature that many of us have long awaited: playback of captions and subtitles! If you haven't tried it yet, you can go to this page, select a captioned video, and while playing it you can click on the [CC] symbol to turn captions on and off..." http://googlevideo.blogspot.com/2006/09/finally-caption-playback.html +02: CASCADING STYLE SHEETS. Create Pages That Fill the Browser With CSS By Zoe Gillenwater. "A frequently asked question in CSS forums is how to create pages that stretch vertically to fill the browser window, regardless of the amount of content. With tables, you would nest your entire design in a table with a single cell and set both the cell and table's height to be 100 percent. With CSS, it's also quite simple and easy. In this tutorial, you will learn the basic CSS technique for making pages fill the browser window, which you can also use any time you have a div that you want to stretch to fill its parent. Please note, however, that this is not a tutorial about making a footer stick to the bottom of the browser viewport or about emulating frames. These are more complicated layout requirements that may be covered in further tutorials, building on the 100 percent height technique introduced here." http://www.communitymx.com/content/article.cfm?cid=BAD95 Push My Button By Aaron Gustafson. "...Unlike the input-based buttons, the majority of browsers do not force any particular design on the button element, leaving it a raw ingot which we can cast and shape to our liking..." http://www.digital-web.com/articles/push_my_button/ 12 Lessons for Those Afraid of CSS and Standards By Ben Henick. "If you're new to CSS and web standards, you may feel as though you've fallen down a rabbit hole. Ben Henick is here to ease your pain." http://www.alistapart.com/articles/12lessonsCSSandstandards Long Live the Q Tag By Stacey Cordoni. "IE/Win's lack of support for the Q tag has stymied fans of semantic markup. Stacey Cordoni offers a CSS-based workaround." http://www.alistapart.com/articles/qtag Vertical Centering in CSS By Dusan Janovsky. "Though there is a CSS property vertical-align, it doesn't work like attribute valign in HTML tables. CSS property vertical-align doesn't seem to be able to solve this problem.." http://www.jakpsatweb.cz/css/css-vertical-center-solution.html Methods for Containing Floats By Ed Eliot. Ed Eliot describes techniques for clearing floats. http://www.ejeliot.com/blog/59 Standard Forms By Anthony Eggert. "I have finally standardized my XHTML forms. The final result is the combination of many hours of experimentation and input from numerous sources. This is still a work in progress and, as with all my source code, will be updated. I tried to eliminate as much usage of containing elements and stick with standard form tags. Are they accessible? Yes. Validate? You bet." http://www.stylephreak.com/index.php/archives/2004/08/standard-forms/ +03: EVALUATION & TESTING. Remote Usability Testing Wiki By Bolt Peters. "We put this Wiki up to help folks understand remote usability testing, and find the software and web apps for conducting remote usability research." http://remoteusability.com/doku.php/ +04: EVENTS. Webcontent.gov Training and Workshops Sessions September - December, 2006. Most sessions are in Washington D.C. U.S.A. http://www.firstgov.gov/webcontent/resources/training.shtml Web Directions North February 6-10, 2007. Vancouver, British Columbia, Canada http://north.webdirections.org/ IA Summit 2007 March 22-26, 2007. Las Vegas, Nevada U.S.A. http://iasummit.org/ ICWSM-2007 International Conference on Weblogs and Social Media March 26-28, 2007. Boulder, Colorado U.S.A. http://www.icwsm.org/ Annual Writers U.A. (User Assistance) Conference for Software User Assistance March 25-28, 2007. Long Beach, California U.S.A. http://www.writersua.com/ohc06/index_interim.html +05: FLASH. Accessibility In Trouble 1: Flash By Mike Davies. "The web accessibility community is in deep trouble. It's a train-wreck waiting to happen. Unfortunately when the collision eventually happens, disabled people lose out. Its time to get web accessibility back on track. Take it back from the zealots with their own private agendas and grudges..." http://www.isolani.co.uk/blog/access/AccessibilityInTrouble1Flash How to Position Movie Clips Based on Browser Resizing By David Stiller. "It's not hard to make a SWF resize itself to the dimensions of the browser. All it takes, in fact, is to set the width and height attributes of the HTML's element and/or element to 100 percent. There are a number of ways to determine the SWF's display, too: show all (default) makes the entire movie visible while maintaining the original aspect ratio of the SWF (if the browser's aspect ratio differs, you'll get the equivalent of 'letterbox' borders either horizontally or vertically); no border gets rid those potential borders, but may crop parts of the SWF instead; exact fit distorts the SWF, if necessary, to make the entire movie visible without borders or cropping. See Adobe TechNote 12701 for complete details. Fine and good. Now, what if you want to allow the Stage to resize, but not its contents? What if you want to adjust the position of various movie clips ? such as a logo, navigation, or content area? in response to the Stage's new dimensions as the browser is resized? Luckily, that's not hard either..." http://www.communitymx.com/blog/index.cfm?newsid=766 +06: INFORMATION ARCHITECTURE. 6 Ways to Fix a Confused Information Architecture By Jakob Nielsen. "When your website's users consistently go to the wrong sections, you have many options for getting users back on track, from better labels to clearer structure." http://www.useit.com/alertbox/ia.html +07: JAVASCRIPT. Event Handling Versus Event Delegation By Christian Heilmann. "It is not new, but it still is rather clever: In order to avoid having to add event handlers to each and every element you want to monitor, you can use one single handler on a parent element and let browser event bubbling do the rest of the work for you." http://icant.co.uk/sandbox/eventdelegation/ Unobtrusive Table Sort Script (revisited) By Brian McAllister. "My first free Sunday morning in what seems like an epoch produces a complete rewrite of the original (and by far most popular) lab experiment, the 'Unobtrusive Table Sort Script', that addresses speed issues present within version #1..." http://tinyurl.com/n2p32 .NET, WCAG, Javascript and Accessibility By Jack Pickard. "...Microsoft .NET and Microsoft Visual Studio are fantastic products and tools for developing applications, but they aren't without their faults and limitations. The faults being that they don't produce standards-compliant css-styled code, and the limitations being that to add behavior outside standard HTML behavior, they need to use javascript, both of which can potentially cause problems for someone trying to develop an accessible website, particularly if they aren't aware of them..." http://tinyurl.com/obw57 JavaScript Contrast Class By Gez Lemon. "I was contacted by Andrew Waer about a JavaScript class he had written to help determine the color contrast between two color, based on the algorithm suggested in the 26th of April 2000 working draft for Accessibility Evaluation and Repair Tools . Andrew has kindly allowed me to publish the details of the class. The class can either be used to create your own color contrast checker, or to select appropriately contrasting colors on the fly." http://juicystudio.com/article/javascript-contrast-class.php IE7 JavaScript Improvements By Dean Edwards. "The IE Blog recently reported some improvements in IE7's JavaScript engine..." http://www.webstandards.org/2006/09/21/ie7-javascript-improvements/ JaS Gallery By Robert Nyman. "JaS is short for JavaScript Slides and it is a highly customizable JavaScript library for easily turning your images into a collection viewable as a slideshow, and with fading effects, if desired. It also supports automatic thumbnail creation and tagging of images, so the viewers can find the exact images they're looking for. You can use it any way you like in your own web site, and adapt it to your specific needs. It's also a way to showcase the independence and separation of the interaction and the design of a web page." http://www.robertnyman.com/jas/ 7 Things About AJaX By Dion Hinchcliffe. "It's been approximately 18 months since Jesse James Garrett fatefully coined the term that would go on to nearly reinvent the face of Web development. A lot has happened in the last year and a half, including the Web 2.0 phenomenon getting into high gear, the creation or resurrection of many a company building or using rich Internet technologies, and the proliferation of really great dynamic, online software. It's clear that Ajax as a name, a concept, and a popular browser development technique is here to stay, and our Web applications will never be the same again..." http://tinyurl.com/qfw33 The XMLHttpRequest Object By W3C. W3C Working Draft 27 September 2006. http://www.w3.org/TR/2006/WD-XMLHttpRequest-20060927/ Roadmap for Accessible Rich Internet Applications By W3C. "The Roadmap for Accessible Rich Internet Applications addresses the accessibility of dynamic Web content for people with disabilities. The roadmap outlines the technologies to map controls, AJAX live regions, and events to accessibility APIs, including custom controls used for Rich Internet Applications. The roadmap also outlines new navigation techniques to mark common Web structures as menus, primary content, secondary content, banner information and other types of Web structures. These new technologies can be used to improve the accessibility and usability of Web resources by people with disabilities, without extensive modification to existing libraries of Web resources." http://www.w3.org/TR/2006/WD-aria-roadmap-20060926/ +08: MISCELLANEOUS. Developer Spotlight: Gian Sampson-Wild By Chris Duckett. "Gian Sampson-Wild is an accessibility expert and one of the speakers at this year's Web Directions conference to held in Sydney this week. Gian is currently working for Monash University where she leads the User Interface Design Team and is also a member of the W3C Web Content Accessibility Guidelines (WCAG) Working Group. Builder AU interviewed Gian via e-mail prior to the commencement of Web Directions to talk about accessibility, how to make it a part of the development process and where to from here." http://tinyurl.com/ksyvv WaSP Interviews Lars Gunther By Rob Dickerson and April Siegfried. "Lars Gunther is an educator in gymnasium (senior high/secondary school) from a small town in Sweden. Lars freely admits that he is not a well-known person. When the Education Task Force first approached Lars Gunther proposing an interview, Lars had one stipulation; that he not be portrayed as a web guru. Although not famous, we found Lars to be a tireless advocate for change. We also discovered that one person can make an impact. During the past year Lars Gunther has been working for change that would affect the entire gymnasium system. What were the challenges? How did he overcome adversity?..." http://www.webstandards.org/action/edutf/interviews/gunther-en/ Webmaster Jam Session (Podcasts and MP3s) Podcasts and MP3s are now available from this event. Included are: Decade of Style, Why use Web Standards, Essential Web Skills, Building Accessible Websites, Photoshop Tips and Tricks, Why Good Content Must Suck, Starbucks Tribal Knowledge, Designing with CSS, Be a Web Design Superhero. http://www.webjamsession.com/ What, When, Who... Internet History Timeline By Mike Cherim. "This article is my version of the What, When, and Who of Internet history - with a few of my own additions - from when it was wood-burning to present. I have hopefully made it inclusive and comprehensive but please be sure to read the Credits and my Disclaimer. That said, I hope you find it as interesting reading it as I did writing it. I must confess that it was a pretty big challenge, more so than I had envisioned. Enjoy..." http://green-beast.com/blog/?p=124 +09: NAVIGATION. How Indexes Support Good Information Scent By Celeste Lyn Paul. "Information foraging is a theory which describes adaptive strategies users employ to find information. Information 'scent' is the idea of using environmental cues to reinforce information the user is seeking (Pirolli, 2003). This idea is what helps the user know if they are going in the direction towards their information goals, or if they need to back up or begin their search over. Think of it as the game of 'hot and cold' applied to information seeking behavior..." http://tinyurl.com/fuf4f Fresh Presentation on Search Analytics By Louis Rosenfeld. "Gave this talk (2.1 Mb PPT) on search analytics a half hour ago at Webcontent.gov's Web Manager University; enjoy." http://louisrosenfeld.com/home/bloug_archive/000482.html Google, Meet Web Standards By Roger Johansson. "...the Google Search Appliance XHTML Stylesheet is now available for the Google Search Appliance. The Stylesheet will make the GSA interface use Web standards - XHTML 1.0 Strict for structure and CSS for presentation..." http://www.456bereastreet.com/archive/200609/google_meet_web_standards/ +10: PHP. User-Friendly Contextual Navigation With Simple PHP Includes By Shirley Kaiser. "Usability experts continue to tell us not to have a live hyperlink pointing to the current page, as it can be confusing for visitors. With some basic, simple-to-use PHP and one PHP include file, you can customize your navigation so that the current page does not have a live hyperlink to itself. In addition, you can manage your entire site's navigation from that one include file, making your site's navigation management convenient, efficient, and easy to maintain. Today's post is a short tutorial on how to create this type of navigation with a couple of short snippets of PHP code, clean and lean HTML markup, and one PHP include file for your entire site." http://brainstormsandraves.com/archives/2006/09/27/navigation/ Object-Oriented Programming Through Design Patterns By George Schlossnagle. "If you're looking for an overview of the new object-oriented features of PHP 5, you've found a good place to start. This article, the first of several parts, is excerpted from chapter two of the book Advanced PHP Programming, written by George Schlossnagle..." http://tinyurl.com/ouka3 +11: STANDARDS, GUIDELINES & PATTERNS. W3C Change Full Independence By Eric A. Meyer. "Transform the W3C from a member-funded organization to a financially independent entity." http://tinyurl.com/htdvt Professional Body for the Web Design Industry? By Mark Boulton. "I was listening to the atmedia 'Hot Topics' podcast the other day, which unfortunately I had to miss. The section of it which I found really interesting was the discussion on a professional body (which is about two thirds of the way through). Although the panel agreed that a professional body for our industry is overall a bad idea, I actually think they were talking about several different things..." http://tinyurl.com/qzymc +12: TOOLS. Web Developer Toolbar and Menu for Opera "The web developer toolbar is a menu and toolbar setup for Opera which brings together functions related to web development, validation services and links to standards and other documentation..." http://operawiki.info/WebDevToolbar Shorty By Khoi Vinh. "Shorty is a simple tool for creating shorter, human- readable links from long URLs. You install Shorty on your server, so the links you create with it never go away." http://get-shorty.com/ +13: TYPOGRAPHY. A Survey of Browser Text Size Settings By clickdensity. clickdensity has now been up and running for over 3 months, during which time we've recorded about 20 million visitor sessions from nearly 1,500 websites. With this quantity and variety of data, we thought it would be worthwhile finding and publishing useful generic statistics that are not currently available elsewhere on the web. We'll start with Text Size settings." http://tinyurl.com/k498e Looking at Type By Mark Boulton. "Choosing the best fonts for your site is about more than making it look pretty: different typefaces send out different signals. Here are some tips..." http://www.thinkvitamin.com/features/design/looking-at-type They're Not Fonts! By Allan Haley. "...It seems that just about everyone is using the word 'font' when they are referring to a typeface. 'Fonts' and 'typefaces' are different things. Graphic designers choose typefaces for their projects but use fonts to create the finished art..." http://tinyurl.com/h4nay Everything I Know About Programming I Learnt from Typography By Matt Patterson. "Here are the slides from my presentation at BarCamp London a few weekends ago..." http://tinyurl.com/hge62 +14: USABILITY. Research-Based Web Design and Usability Guidelines The U.S. Department of Health and Human Services and the U.S. General Services Administration replaced the 2004 edition of the Guidelines, with the updated 2006 Guidelines. HTML version has been replaced by PDF. http://www.usability.gov/pdfs/guidelines.html The Ridiculous Discussion About Monitor Sizes and Screen Resolutions By Robert Nyman. "...A monitor's size has no correlation whatsoever to the resolution used on it...No connection exists between web browser window sizes and the maximum resolution available on a monitor...my main point is to not design for a specific resolution, and to instead use elastic layouts. What I mean with that is to create web sites whose width will adapt to the area available in the visitor's window...It's the web! It's a living medium where we never, ever can control what the end user chooses to use, and neither are we entitled to do so. Do you know how many web browsers, devices, platforms and settings there are out there? So please, look to yourself and your design flexibility options instead of trying to label your visitors. Now I please ask you to stand up in the next meeting. Explain to designers and decision makers how the web really works." http://tinyurl.com/gu9cc Not Designing for Most Common Screen Resolution By S.R. Emerson. http://www.webpagemistakes.ca/most-common-screen-resolution/ Designing for Older People - Hints and Tips By Ann Light. "The HCI 2006 workshop on 'HCI, the Web and the Older Population', run by Joy Goodman of the University of Cambridge, Anna Dickinson of the University of Dundee, and Suzette Keith and Gill Whitney of Middlesex University, is no newcomer to the conference. In its fourth year, it welcomed Roger Coleman of the Helen Hamlyn Research Centre, Royal College of Art, and Rick Crust of Hackney's Silver Surfers to talk and participate in the development of personas, the afternoon's activity. 12 summary points from the workshop follow. " http://www.usabilitynews.com/news/article3431.asp +15: XML. How to Explain RSS the Oprah Way By Stephanie Quilao. "So, to make RSS much easier to understand, in Oprah speak, RSS stands for: I'm 'Ready for Some Stories'. It is a way online for you to get a quick list of the latest story headlines from all your favorite websites and blogs all in one place." http://tinyurl.com/lbp5p So Address Tags are Rubbish for Microformat hCards? By Chris Heilmann. "...So, is this the end of address? Seeing that it is an inline element, I always considered it a bad choice for marking up an address anyways." http://www.wait-till-i.com/index.php?p=339 [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.]