+++ WEB DESIGN UPDATE. - Volume 5, Issue 09, August 25, 2006. An email newsletter to distribute news and information about web design and development. ++ISSUE 09 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: COLOR. 04: DREAMWEAVER. 05: EVALUATION & TESTING. 06: EVENTS. 07: FLASH. 08: INFORMATION ARCHITECTURE. 09: JAVASCRIPT. 10: MISCELLANEOUS. 11: NAVIGATION. 12: PHP. 13: STANDARDS, GUIDELINES & PATTERNS. 14: TOOLS. 15: USABILITY. 16: XML. SECTION TWO: 17: What Can You Find at the Web Design Reference Site? [Contents ends.] ++ SECTION ONE: New references. +01: ACCESSIBILITY. Assuring E-Accessibility: Providing Choices By Pam Berman and Charles Chen. "TetraLibro is a relatively new movement in publishing meant to provide texts in 4 formats; paper-based, accessible XHTML Strict, accessible PDF, and Microsoft Reader. The XHTML, PDF, and Microsoft Reader versions are placed on a CD-ROM and packaged with the printed book. The three electronic versions are included specifically for users with certain types of disabilities (sensory, motor, and cognitive) who are not able to read the paper-based book. For example, people with dyslexia can have the text read to them, etc. Providing multiple formats is becoming a popular way to attempt to reach the widest possible audience and it is important to take the proper steps to ensure that electronic documents truly are accessible to as many people as possible." http://juicystudio.com/article/providing-choices.php Positive Steps To Assessing, Monitoring and Comparing the Accessibility of Public Websites: Introducing The European Internet Accessibility Observatory By Jenny Craven and Mikael Snaprud. "Sometimes, simply launching a website can take a huge amount of time and effort, never mind making sure it is consistent with every type of web browser and compatible with different types of add-on technologies. However, making websites accessible is an issue that anyone with responsibilities for web development and web-related policy-making should be concerned about..." http://www.freepint.com/issues/240806.htm#feature Whistle Stop WCAG 2: To Hell ... and Back By Jack Pickard. "...In short, work with users with disabilities and disability groups to ensure that your sites meet WCAG 1.0 AA as a minimum standard that you are seeking to exceed; ensure that you are continually testing your sites against your standard and that you are continually revising and updating your policies to improve access." http://tinyurl.com/jgfb6 New Study Links Higher Income with Lower Disability Rates By Sarah Yang. "...'What was unusual was that we found that people in the middle class were still at a disadvantage compared with those at just a slightly higher income,' said Meredith Minkler, professor of health and social behavior at UC Berkeley's School of Public Health and lead author of the study, published in the Aug. 17 issue of the New England Journal of Medicine. 'The fact that there's a significant difference between people at 600 and 700 percent above the poverty level was a striking finding of this study.'..." http://www.berkeley.edu/news/media/releases/2006/08/16_disability.shtml Has Accessibility Been Taken Too Far? By Jeff Croft. "There's something I've been thinking about for a while but have a been hesitant to post, for fear of it being taken the wrong way, and fear of me being labeled as insensitive. But I've finally decided to just put it out there. I'll be careful with my wording and try my best not to offend, but I can't promise anything..." http://tinyurl.com/fz9pg Accessibility Has NOT Been Taken Too Far By Joe Dolson. "I feel very strongly that accessibility is a wise business decision - providing good access to all visitors is good publicity and opens your market wider than it had been before. It is also, of course, the moral high ground - not always the strength of business decision making, unfortunately. The web is not paper publishing. You cannot treat the web as paper. The web is superior to paper for accessibility, if it's done right. Why not take advantage of this?...Don't ever try and tell me that some minority is insignificant. These are still people; and they still have rights and value. You can't just write them off because it's inconvenient. Acknowledge that you have failed to provide their needed level of accessibility and apologize for it. In the final reckoning, you cannot provide access for everybody - but don't tell me that it would have been a waste of your time." http://tinyurl.com/k5fya Appropriate Use of Alternative Text By Jared Smith. "Despite being the first principle of web accessibility, inappropriate or missing alt text still plagues the web. This article presents the basics of alternative text and through many examples demonstrates the proper implementation of alternative text for all types of images." http://webaim.org/techniques/alttext/ HTML Web Accessibility Best Practices By Jon Gunderson. "The primary purpose of these HTML/XHTML Best Practices is to improve the accessibility of web resources at the University of Illinois at Urbana/Champaign for students, faculty, staff, and the general public..." http://html.cita.uiuc.edu/ +02: CASCADING STYLE SHEETS. Details On Our CSS Changes For IE7 By Markus Mielke. "...In all, we made over 200 behavior changes (bug fixes or new features) under strict mode to improve CSS2.1 compliance..." http://blogs.msdn.com/ie/archive/2006/08/22/712830.aspx Sample Downloads From My Book By Simon Collison. "Those nice folks at Apress have provided two lovely PDFs for you to download, in order to get a flavor of Beginning CSS Web Development, which hits the shelves in a week or so..." http://www.collylogic.com/?/comments/sample-downloads-from-my-book/ CSS3 Preview By Joost de Valk and Jake Rutter. "Many exciting new functions and features are being thought up for CSS3. We will try and showcase some of them on this page, when they get implemented in either Firefox, Opera or Safari/Webkit." http://www.css3.info/preview/ CSS3: What It Means, and What It Doesn't By Phil Renaud. "What with standardists ruling the web trends scene right now, the emergence of a new specification template for CSS is bound to be a major point of consideration in future endeavors. It is not, however, going to be remembered as the be-all and end-all of web design in the current web culture. But, why not?..." http://fadtastic.net/2006/08/20/css3-what-it-means-and-what-it-doesnt/ Understanding CSS Specificity By Jonathan Snook. "Specificity can be tricky. Well, tricky to say the word, anyways. There's a quick approach that I use that can hopefully help you out..." http://www.snook.ca/archives/html_and_css/understanding_c/ +03: COLOR. Light Text On a Dark Background vs. Readbility By Roger Johansson. "...I am not criticizing the aesthetics of inverted designs, just their readability. Several light-on-dark sites look fantastic for a few seconds or even a minute. I just find actually reading articles on them very straining on my eyes, and I hate the way they linger on the retina when I look away from my screen...To me this is an accessibility issue, the same way many people with impaired vision prefer light-on-dark text and may have problems similar to (or worse than) mine when reading dark-on-light text. As far as I know, I am not vision impaired. At least I have never been told so by an optician or an ophthalmologist. I still struggle with high-contrast, light-on-dark designs. So if you want to use light text on a dark background, please provide an alternate stylesheet that turns the whole design, not just the content area, back to dark on light. You should also consider what Mark Boulton has to say in Five simple steps to better typography: 'When reversing color out, e.g. white text on black, make sure you increase the leading, tracking and decrease your font-weight. This applies to all widths of Measure. White text on a black background is a higher contrast to the opposite, so the letterforms need to be wider apart, lighter in weight and have more space between the lines.'..." http://tinyurl.com/ox7e6 Not Quite Black and White By Mike Cherim. "...What you offer is up to you, and if your readers don't like it they will put up with it if they can or go elsewhere. The accessibility advocate in me says make it as reader-friendly as possible or offer alternatives. The designer in me says make it sexy. The middle ground says make it sexy and readable, or offer both by way of said alternatives. Web development isn't easy, and doing it right, really right (if that can even be defined), is downright difficult on a good day. I wish you luck. I know I need it." http://green-beast.com/blog/?p=112 Readability Of Websites With Various Foreground/Background Color Combinations, Font Types And Word Styles By Alyson L. Hill. "The effects of 6 foreground/background color combinations (color), 3 font types (Arial, Courier New, & Times New Roman), and 2 word styles (Italicized & Plain) on readability of websites were investigated. Participants (N=42) scanned simulated websites for a target word; readability was inferred from reaction time (RT). An ANOVA showed significant main effects for color and font, and several significant interactions (Figure 1). A control experiment (N=21) using black text on shades of gray (to increase generalizablity to Internet browser settings), also found significant main effects for background gray level and style, and several interactions (Figure 2). In general these results suggest that there is no one foreground/background combination, font, or word style which leads to the fastest RT (i.e. best readability), but rather a designer must consider how each variable affects the other(s)." http://hubel.sfasu.edu/research/AHNCUR.html Web Colours By Chris Baker. "In which I tell how I was caught out by an old 'gotcha' and then go on to list useful resources about choosing colours for websites..." http://tinyurl.com/olkt5 +04: DREAMWEAVER. Create Text-Based Links in Dreamweaver 8 By Khristine Annwn Page. "In this lesson, you'll develop the initial framework of the site structure by developing placeholders for the pages in the Yoga Sangha project site. You'll link these pages together using Dreamweaver's visual site-mapping tools to create a working test site. Creating this kind of framework through pages and links in a bare but functional version of the site can help you test the navigation that you have developed. Testing the proposed site structure before creating the design will help you catch fundamental problems at the beginning of development, enabling you to address them more efficiently...." http://www.informit.com/articles/article.asp?p=483787&rl=1 +05: EVALUATION & TESTING. Competitive Analysis By Dan Brown. "User-experience consultant and information architect Dan Brown gives us the scoop this week on performing a competitive analysis. Excerpted from his new book, Communicating Design: Developing Web Site Documentation for Design and Planning, the first section of chapter five explains the analysis as a series of conceptual layers--with plenty of images to make our choices clear. The remainder of the chapter--not excerpted here--digs deeper and demonstrates how to use the analysis within a project. Communicating Design covers competitive analysis and nine other key documents for web design, including wireframes, site maps, personas, and usability reports." http://www.digital-web.com/articles/competitive_analysis/ Personas and User Feedback By Free Usability Advice. "Question: We already know a lot about our users, and we've created detailed personas. Do we need to do usability testing, too?..." http://freeusabilityadvice.com/archive/29/personas-and-user-feedback +06: EVENTS. NCDAE (National Center on Disability and Access to Education) Webcast Accessibility and the Open Source Content Management Movement August 30, 2006. http://ncdae.org/webcasts/ CANUX (Canadian User Experience Workshop) 2006 September 14-16, 2006. Banff, Alberta Canada. http://www.canux2006.com/ Getting Real Workshop October 9, 2006. Chicago, Illinois U.S.A. https://workshop.37signals.com/ FTP Conferences http://www.ftponline.com/conferences/ Web Design World December 11-13, 2006. Boston, Massachusetts U.S.A. http://www.ftponline.com/conferences/webdesignworld/2006/boston/ +07: FLASH. Flash, JavaScript, and Web Standards: like Sodium and Water? By Ben Henick. "...Are many aspects of browser plug-in behavior inarguably broken? I believe they are. Does the 'Eolas workaround' in Internet Explorer harm the user experience unless JavaScript is used to avoid it? I'm certain it does. Does Flash have a place? I definitely think so, though with some broad qualifications. However, I also believe that an attitude that is universally tolerant of expediency does more to damage the typical user experience in the long term, than it does to improve any specific user experience in the near term." http://tinyurl.com/mdea8 Flash, JavaScript, UX, Standards, Apologia, Apologies, and One Man's Opinions By Ben Henick. My last two posts here have engendered a lot of anger from some Flash developers, and even led to direct questioning of my professional skill. Put bluntly, I believe the attacks say at least as much about the professionalism of their authors as they do about my own. http://tinyurl.com/o3q3r Two Accessible Flash Games - Which is Better? By Andrew Kirkpatrick. "Net Systems Solutions created a Hangman-game in Flash, and made it accessible for screen reader and keyboard users. I encouraged them to try to develop a second version of the game, but with some differences in the way accessibility is implemented. I'd like to hear from users some of their thoughts on these two versions..." http://tinyurl.com/zvtt8 Re: [SEC508] Flash Games Test By Peter Korn. "This is a neat test. It points up a lot of the challenges someone writing a Flash application (or any applications which runs in a plug-in in a browser) has in accessibility..." http://trace.wisc.edu:8080/mailarchive/sec508/msg02587.shtml Re: [SEC508] Flash Games Test By Jonathan Avila. "Andrew and others, I also liked version 1.2 better. However, both have limitations..." http://trace.wisc.edu:8080/mailarchive/sec508/msg02583.shtml +08: INFORMATION ARCHITECTURE. Journeys, Needs, and Trust: A Volkswagon Case Study By Jason Hobbs. "...Implementing a user journey usually takes place within a pre-established hierarchical structure where the journey is carved in, ad hoc, like a highway tunnel through a mountain..." http://tinyurl.com/gpspl +09: JAVASCRIPT. JavaScript Opens Doors to Browser-Based Attacks By Joris Evers. "Security researchers have found a way to use JavaScript to map a home or corporate network and attack connected servers or devices, such as printers or routers." http://tinyurl.com/hxs9d Malicious JavaScript: Yet Another Reason for Graceful Degradation By Roger Johansson. "My point is that no matter how fun you have while developing your scripts, no matter how cool your client thinks your scripts are, no matter how much your scripts increase usability, you can never rely on JavaScript being available. (Unless you are developing for a closed and controlled environment, but I'm talking about websites open to the general public here.)..." http://tinyurl.com/kxbx4 An Introduction to the W3C DOM By Steve Chipman. Steve Chipman gave a talk to his colleagues at AOL recently entitled An Intro to the DOM. He walks through plenty of code samples, beginning with the simple stuff and moving up to more complex scripts. http://slayeroffice.com/articles/DOM/ When to Use Drag and Drop (some informal research results) By Leisa Reichelt. "One of the great challenges of Interaction Design these days is that we now have a plethora of new ways to design interaction on the web than we did just a few short years ago...it is also important to note that choosing a drag and drop interface also significantly compromises your ability to deliver an accessible interface. This should always be an important consideration when selecting an interaction method..." http://tinyurl.com/nzzae Object-Oriented Concepts By Tim Huegdon. "As Senior Web Developer at Rentokil Initial, I am required to be technical lead within the team. This also means making sure the technology is understood and used correctly. With this in mind, I've recently noticed that many of my team-mates obviously don't understand the underlying concepts of OOP. For this reason, I've prepared this short tutorial on the concepts - to be followed by more detailed posts on execution in Javascript and in PHP." http://nefariousdesigns.co.uk/archive/2006/05/object-oriented-concepts/ +10: MISCELLANEOUS. Web Design World Videos Google Video Search Results. http://video.google.com/videosearch?q=label%3Awdw06 +11: NAVIGATION. The Rules of Navigation By Jesse James Garrett. "No website could exist without it but, if you don't get the planning phases right, it's very easy to get your navigation all wrong. Location, location, location is the key." http://www.netmag.co.uk/zine/home/the-rules-of-navigation +12: PHP. Validating PHP User Sessions Kevin K. Nelson. "Before we start digging into how to manage user sessions, it is important to first understand what sessions are for. In a nutshell, sessions are the way that we 'maintain state' from one page to the next, that is, how we identify specific users across multiple page requests. The ability to track users as they go from one page to the next using sessions allows us a number of options, such as tracking where they are going (web statistics) or to verify credentials for a specific section of the site..." http://www.phpbuilder.com/columns/validating_php_user_sessions.php3 Object-Oriented PHP Part 1: Definition By Tim Huegdon. "Following on from my posts 'Object-Oriented Concepts' and 'Object-Oriented Javascript', I'm going to take a look at OOP in PHP." http://tinyurl.com/jubwn Reading, Writing and Creating Files in PHP By Jacques Noah. "Reading and writing to files can be useful if you do not require the storing of important data, such as a web counter. I must warn you though, that this method of storage should not be used to store passwords and other critical information, as it is not safe. Here we will discuss how to handle files and directories in PHP, specifically, how to create, read and write them..." http://tinyurl.com/zc9vd Build Your Own PHP Style Sheet Switcher By Roger Johansson. Want to have a style switcher that lets your site's visitors choose a different style sheet? Want it to work even if there is no JavaScript support? The trick is to use a server-side language like PHP, which is what I use for my style switcher. http://tinyurl.com/myu7f +13: STANDARDS, GUIDELINES & PATTERNS. The Changing Face of University Websites By Maish Nichani. "Many university websites are in redesign mode. And that's good news for the web standards and user experience communities. It signifies not only that the community initiatives are bearing fruit, but also that we can now expect to see a much faster and wider adoption of these initiatives, especially in the public sector. This article lists some important areas of focus of these redesigns..." http://tinyurl.com/foykn KTH (Kungliga Tekniska Hogskolan) Goes Web Standards By Emil Stenstrom. "Sweden's largest technological university, KTH, just launched their new site and I'm proud to say that I've been responsible for the HTML and CSS for it. I'd thought I'd take some time and tell you about the techniques I used and the reasons behind using them. Let's start with some background..." http://friendlybit.com/css/kth-goes-web-standards/ More W3C Controversy By David Baron. "The first thing to understand about the W3C is that it is a consortium. Over 400 companies pay the W3C to be members of the W3C, which allows them to participate in many W3C activities. The W3C then has over sixty technical employees who work on the things that the members are paying for...'Follow the money' is often given as a good way to figure out motive..." http://dbaron.org/log/2006-08#e20060818a W3C and the Overton Window By Mark Pilgrim. "In recent weeks I've noticed a burst of chatter about certain W3C standards, the working groups that define them, and the W3C itself. I have followed (and occasionally participated in) web standards discussions for several years, and I've been trying put this recent flurry of activity in context...I believe it can best be explained in terms of the Overton window....Overton window is a visualization tool used by 'think tanks' that want to sway public opinion on certain issues. You start by outlining the continuum of possible opinions on an issue, including opinions which seem ridiculous or unthinkable. Then you figure out the narrower range of opinions that people currently consider reasonable. This range is the Overton window. The job of the think tank is to move the Overton window in a certain direction, so that ideas that were once unthinkable become acceptable to discuss, and ideas that were once radical become popular and perhaps even become policy. Along the way, certain ideas that were once popular may 'fall out of favor' and become taboo..." http://diveintomark.org/archives/2006/08/23/overton-window W3C and the Broken Process + Two Shining Examples of Committee-based Specification Development Done Right By M. David Peterson. "Mike Champion (somebody who just so happens to have some experience with the W3C process) has done a nice job of pulling both sides of the argument together into what I would term a pretty fair analysis of the entire situation at hand, and the reality (both + and -) of each. *DEFINITELY* worth a read!..." http://tinyurl.com/zxo36 Public BETA Brown University's New Home Page http://brown.edu/home2/ http://www.brown.edu/web/about/site They are looking for feedback: http://www.brown.edu/web/feedback/ Validation Funnies By Lisa Sabin. Can't remember where I came across this - but I chuckled, as only a developer could... http://justagirlintheworld.com/2006/08/14/validation-funnies/ +14: TOOLS. Class Scanner Tool Set a.k.a. Drew made me do it By Chris Heilmann. "For an upcoming Microformats related project, Drew McLellan asked me to come up with a small script that includes all the tasks you need to deal with classes." http://icant.co.uk/sandbox/css-scanner-tool/ +15: USABILITY. Design for Browser Size - Not Screen Size By Jesper Ronn-Jensen. "...Web designs should optimize for a maximum available browser window of 1000x600 pixels. As screens get better and bigger, users rarely maximize browser windows, which is why we're probably better off optimizing for a smaller window, such as 900x600. Still, the layout should be liquid so that content fill the users current browser content area, regardless of the size. Also, do not design for a specific browser window size, as it varies between users, especially users with large screens..." http://tinyurl.com/oqa34 Giving You Fitts By Jensen Harris. "...The key takeaway for interface designers is clear: the further away a button is from the current mouse position, the larger it needs to be to achieve the same average acquisition speed. Put another way, there are two main ways to improve mouse efficiency: put the controls closer, or make them bigger..." http://blogs.msdn.com/jensenh/archive/2006/08/22/711808.aspx Do You Know What's in Your Long Neck? By Gerry McGovern. "A website that doesn't understand what's in its Long Neck is doomed to under performance, if not outright failure..." http://www.gerrymcgovern.com/nt/2006/nt-2006-08-21-long-neck.htm Your About Page Is a Robot By Erin Kissane. "Everyone has one. No one likes to talk about it. No, not that. It's your About page, and it needs a little love. ALA's Erin Kissane guides you through a beautiful journey of self-discovery." http://www.alistapart.com/articles/aboutpagerobot HCC (Human-Centered Computing) Education Digital Library Brainchild of Jim Foley and Stephen Fleming. "This library and web portal contains material useful for undergraduate and graduate education in Human-Centered Computing, Human-Computer Interaction and related areas. Its contents consist of a variety of materials..." http://hcc.cc.gatech.edu/ True Web Usability - Principles Over Laws By Jon Jackson. "What is Usability? What makes a Web site usable? How can you prove that a Web site is usable? And how does usability affect me? These are all valid questions and I'll attempt to answer them here." http://www.webreference.com/internet/usability/ +16: XML. SVG Support in Opera 9 "List of supported elements in SVG..." http://www.opera.com/docs/specs/opera9/svg/ Blogging the State of SVG Implementations By SVG Wiki. "You've just reached SVG.org, the premier community website aiming at bringing all the SVG (Scalable Vector Graphics) users, developers and enthusiasts together to a single place on the Web...." http://svg.org/story/2006/8/3/8139/94771 No to XHTML By Spartanicus. "Quite a few people have jumped on the XHTML bandwagon, this article examines the claims made about XHTML, and it lists the problems that arise from using it..." http://www.spartanicus.utvinternet.ie/no-xhtml.htm [Section one ends.] ++ SECTION TWO: +17: 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.]