+++ WEB DESIGN UPDATE. - Volume 8, Issue 24, December 11, 2009. An email newsletter to distribute news and information about web design and development. ++ISSUE 24 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: TYPOGRAPHY. 13: USABILITY. SECTION TWO: 14: What Can You Find at the Web Design Reference Site? [Contents ends.] ++ SECTION ONE: New references. +01: ACCESSIBILITY. Global Accessibility Policy - Technology Changes, Civil Rights Do Not By Cynthia Waddell. "The UN Convention on Rights of Persons with Disabilities addresses the rights of 650 million persons with disabilities and impacts two billion persons worldwide, including family members of persons with disabilities..." http://www.headstar.com/eablive/?p=374 Involving Users in Web Projects for Better, Easier Accessibility By W3C WAI. "Involving people with disabilities from the beginning of a project helps you better understand accessibility issues and implement more effective accessibility solutions. It also broadens your perspective in a way that can lead you to discover new ways of thinking about your product that will make it work better for more people in more situations..." http://www.w3.org/WAI/users/involving.html Safari, WebKit and alt Text for Missing Images By Roger Johansson. "One of the purposes of the alt attribute is to provide alternate text that can be shown when an image cannot be displayed, either because it is missing or broken, or because the user has disabled images in their (graphical) web browser. Most graphical web browsers do display alt text in place of missing images, but there is one notable exception: Safari and most other WebKit-based browsers (iCab, Shiira, Chrome). In those browsers, all you get when an image is missing is either a small blue icon with a question mark in it or a broken image icon." http://tinyurl.com/yd57je7 PDF is Only Partially Accessible WebAIM Thread. "Based on many of the responses from the WebAIM list, as well as from my own research, I conclude that well structured and tagged PDF is partially but not completely accessible..." http://webaim.org/discussion/mail_thread.php?thread=4042 Discussion continues at: http://webaim.org/discussion/mail_thread.php?thread=4045 United States Disability Statistics: Measurement and Sources By Joseph Dolson. "On Wednesday of last week, I published an article on disability statistics in Practical eCommerce magazine. Although there's nothing particularly wrong with the article, I find myself wanting to publish a follow up article with more detail on the statistics. Statistics are complicated beasts, and I feel that detailed explication of sources and statistical problems is well worth while...if you can't wait for Google to automatically caption the home videos of your kids opening their Christmas presents, you can use another, lesser-known, and equally free service..." Captioning and YouTube By John Eric Brandt. "...Google is rolling this out with a select group of partners and on specific channels. My understanding is that Google will simply start captioning videos in these groups using this new automatic system. Anyone who knows anything about captioning knows that automatic systems are fraught with problems..." http://jebswebs.net/blog/2009/12/captioning-and-youtube/ +02: CASCADING STYLE SHEETS. Don't Lose Your :focus By Patrick H. Lauke. "For many web designers, accessibility conjures up images of blind users with screenreaders, and the difficulties in making sites accessible to this particular audience. Of course, accessibility covers a wide range of situations that go beyond the extreme example of screenreader users. And while it's true that making a complex site accessible can often be a daunting prospect, there are also many small things that don't take anything more than a bit of judicious planning, are very easy to test (without having to buy expensive assistive technology), and can make all the difference to certain user groups. In this short article we'll focus on keyboard accessibility and how careless use of CSS can potentially make your sites completely unusable..." http://24ways.org/2009/dont-lose-your-focus Style Fieldsets like a Pro By Virginia DeBolt. "Just a few CSS rules can make your fieldset look like it was styled by a pro. A fieldset is used to organize forms into sections that can be identified with labels called legends. We're going to start this discussion looking at a fieldset with no legend. We'll get to legends in a bit..." http://www.webteacher.ws/2009/12/10/style-fieldsets-like-a-pro 18 CSS Compression Tools and Techniques By Joshua Johnson. "...This post will examine several techniques you can use to optimize your CSS as well as several online tools that can automatically compress your code..." http://tinyurl.com/ykdmahf Front-End Code Reusability with CSS and JavaScript By Trevor Morris. "Most web standards-based developers are more than familiar with creating their sites with semantic HTML with lots and lots of CSS. With each new page in a design, the CSS tends to grow and grow and more elements and styles are added. But CSS can be used to better effect..." http://tinyurl.com/yguxdhl The Case for the Use of Display:None By Gary Barber. "...Sometimes we forget about the bigger picture, about the people we are building the sites for. A few weeks ago at the UPA Perth (chapter in formation) meeting, Teressa from the Disability Services Commission demonstrated with her screen reader (JAWS) why the display:none is sometimes a good thing...." http://tinyurl.com/yfuqac4 The Parallax Header: How I Do It By Kyle Weems. "...First, creating the right group of images. Secondly, with some simple CSS and HTML. Lastly, with a surprisingly short JS script..." http://www.cssquirrel.com/2009/12/04/the-parallax-header-how-i-do-it/ +03: DREAMWEAVER. Use Built-In Dreamweaver CS4 Capabilities to Check Your Website Before Going Live By Charles Anderson. "You just finished building a new website. Before uploading it to a server, spend some time checking on how well it functions or first time visitors may be last time visitors. Dreamweaver CS4 includes a number of tools for testing websites for functionality before putting it up for the world. Link Checker Broken links on a website are one of the world..." http://www.brighthub.com/internet/web-development/articles/58681.aspx +04: EVALUATION & TESTING. What To Do With the Data: Moving from Observations to Design Direction By Dana Chisnell. "What is data but observation? Observations are what was seen and what was heard. As teams work on early designs, the data is often about obvious design flaws and higher order behaviors, and not necessarily tallying details. In this article, let's talk about tools for working with observations made in exploratory or formative user research." http://tinyurl.com/yjo46mm Is There a Difference in Usability Data from Remote Unmoderated Tests and Lab-Based Tests? By Jeff Sauro. "Why isn't usability testing done more? And when it is done why is the sample size small? One major reason is the cost. It takes a lot of money and time to bring users into a lab and conduct a usability test. Even if users don't get compensated for their time, it still takes a lot of time for a test facilitator to prepare for and attend each test. Each additional user tested takes more time?one reason sample sizes tend to be small. Is it possible to get the same data by having users test themselves?" http://www.measuringusability.com/unmoderated-testing.php Benefits of Online, Unmoderated User Testing By Henri Stetter. "For most usability professionals lab-based research is the only game in town. However, with the growth of Web 2.0 and Web 3.0 technologies online, unmoderated user testing (also known as remote unmoderated or asynchronous user testing) is gaining traction and being used not only as a complement to, but in many cases as, an alternative to traditional lab-based research..." http://www.usabilitynews.com/news/article6125.asp Usability Testing with Time Constraints | Remote Usability Testing By Janet M. Six. "In this Ask UXmatters columnÑwhich is the third in a three-part series of columns focusing on usabilityÑour experts discuss: 1. conducting usability testing when time is limited 2. using remote usability testing techniques..." http://tinyurl.com/yegv3s5 A Summary of User Research Methods By Patrick Kennedy. "...In this article I give a quick overview of the methods I commonly use, broken down in to main categories..." http://www.gurtle.com/ppov/2009/12/06/a-summary-of-user-research-methods +05: EVENTS. Open Source Conference (OSCON) July 19-23, 2010. Portland, Oregon, U.S.A. http://en.oreilly.com/oscon An Event Apart - Minneapolis July 26-27, 2010. Minneapolis, Minnesota, U.S.A. http://aneventapart.com/2010/minneapolis/ +06: INFORMATION ARCHITECTURE. Where Wireframes Are Concerned By Andy Rutledge. "Wireframes can be useful, valuable artifacts for informing the designer's process, but they often fail miserably as a first-step deliverable for clients..." http://www.andyrutledge.com/where-wireframes-are-concerned.php Sketchy Wireframes By Aaron Travis. "When it comes to user interface documentation, wireframes have long been the tool of choice. However, using traditional diagramming tools like Visio, OmniGraffle, and InDesign, most wireframes today look the same as their ancestors did from a decade ago Ð assembled with rigid, computer-drawn boxes, lines and text. While these artifacts have served us well, they can also be slow to produce, burdened with unnecessary detail and give a false impression of 'completion.Ó To compensate for the drawbacks of traditional wireframes, many practitioners put aside the computer in favor of simple pencil sketches or whiteboard drawings. This speeds up the ideation process, but doesn't always produce presentable or maintainable documentation. There is a growing popularity toward something in the middle: Computer-based sketchy wireframes. These allow computer wireframes to look more like quick, hand-drawn sketches while retaining the reusability and polish that we expect from digital artifacts." http://www.boxesandarrows.com/view/sketchy-wireframe Tree Testing By Dave O'Brien. A big part of information architecture is organization Ð creating the structure of a site. For most sites Ð particularly large ones Ð this means creating a hierarchical 'tree' of topics. But to date, the IA community hasn't found an effective, simple technique (or tool) to test site structures. The most common method usedÑclosed card sortingÑis neither widespread nor particularly suited to this task. Some years ago, Donna Spencer pioneered a simple paper-based technique to test trees of topics. Recent refinements to that method, some made possible by online experimentation, have now made 'tree testing' more effective and agile. http://www.boxesandarrows.com/view/tree-testing +07: JAVASCRIPT. Submitting Forms via Javascript: Button vs. Link vs. Other? WebAIM Thread. "Assuming Javascript is enabled (I know that, itself, can be an accessibility issue) what are the pros/cons of using various elements to act as the trigger for submission?..." http://webaim.org/discussion/mail_thread.php?thread=4043 +08: MISCELLANEOUS. Letting Go of John Hancock By Bjorn Enki. "Because clients expect everything to be faster, better, and simpler, web professionals must take an instant, foolproof, paperless, modern approach to how clients approve proposals and sign contracts. Implementing an instantaneous contract agreement helps to get projects off the ground, attract clients on tight timelines, and prevent potential delays. All it takes is a little PHP and some PDF magic." http://www.alistapart.com/articles/letting-go-of-john-hancock/ Needs + Resources + Location + Schedule + Budget = Scope By Whitney Hess. "Now that you've convinced a client they want to work with you, it's up to you to define the terms of your working agreement..." http://tinyurl.com/yjstxmv +09: NAVIGATION. Cameras, Music, and Mattresses: Designing Query Disambiguation Solutions for the Real World By Greg Nudelman. "Our language is limited and imperfect. Typically, people type search queries quickly and with little forethought, so queries are definitely less than perfect..." http://tinyurl.com/ybo4t8l +10: PHP. Comprehensible Code By Paul Jones. "Reading code is hard work. Here are some reasons why, along with some tips on how to make it easier for other developers to understand your code..." http://phpadvent.org/2009/comprehensible-code-by-paul-jones +11: STANDARDS, GUIDELINES & PATTERNS. HTML5: Tool of Satan, or Yule of Santa? By Bruce Lawson. "...what HTML5 can you reasonably expect to be able to use reliably cross-browser in the early months of 2010? The answer is that you can use more than you might think, due to the seasonal tinsel of feature-detection and using the sparkly pixie-dust of IE-only VML (but used in a way that won't damage your Elf)..." http://24ways.org/2009/html5-tool-of-satan-or-yule-of-santa Should Error Messages be Displayed for Corrupt HTML5? By Vlad Alexander. "One of the primary reasons HTML is authored incorrectly today is because Web browsers do not display error messages when processing corrupt documents (constructed or transmitted incorrectly). Web browser vendors like to refer to these kinds of error messages as "draconian", i.e. unduly punitive. Why?..." http://rebuildingtheweb.com/en/error-messages/ Your Questions Answered #4 By Richard Clark. "Here we go with another post rounding up your HTML5 questions and sharing the answers with the world. We cover a wide range of topics this time, including ARIA, storage, offline capabilities, and document outlines, so read on to find the answers." http://html5doctor.com/your-questions-answered-4/ Canvas and SVG - Which Should I Use When? By Daniel Davis. "As use of HTML5 is spreading, canvas and SVG (Scalable Vector Graphics) are being more widely used to create images within a web page. They are both supported by all major browsers (except Internet Explorer 8 and below) and are open alternatives to Flash for animation and graphic interaction. Why do we need two image-creation methods, however, and when should either be used?..." http://my.opera.com/ODIN/blog/canvas-and-svg-which-should-i-use-when Microformats: Boon or Bane? By Jeff Atwood. "...It feels like a hacky overload. While you could argue this is no different than the web and HTML in general -- a giant wobbly teetering tower of nasty, patched-together hacks -- something about it fundamentally bothers me. Now, all that said, I still think microformats are useful and worth implementing, if for no other reason than it's too easy not to..." http://www.codinghorror.com/blog/archives/001314.html +12: TYPOGRAPHY. Type-Inspired Interfaces By Dan Mall. "One of the things that terrifies me most about a new project is the starting point. How is the content laid out? What colors do I pick? Once things like that are decided, it becomes significantly easier to continue design, but it's the blank page where I spend the most time..." http://24ways.org/2009/type-inspired-interfaces +13: USABILITY. Short-Term Memory By Jakob Nielsen. "The human brain is not optimized for the abstract thinking and data memorization that websites often demand. Many usability guidelines are dictated by cognitive limitations." http://www.useit.com/alertbox/short-term-memory.html The Content Strategist as Digital Curator By Erin Scime. "As the digital landscape becomes increasingly complex, and as businesses become ever more comfortable using the web to bring their product and audience closer, the techniques and principles of museum curatorship can inform how we create online experiences?particularly when we approach content. Erin Scime shows us how." http://www.alistapart.com/articles/content-strategist-as-digital-curator 10 (Obvious) Usability Crimes By Adrian Roselli. "Having stumbled across the article '10 Usability Crimes You Really Shouldn't Commit', I can see that the suggestions are pretty obvious, and the number 10 is probably more arbitrary than based on some natural break in severity. However, there are some things in the article I have been repeating for years that people just don't get. And this article uses He-Man graphics, which makes it even cooler." http://blog.adrianroselli.com/2009/12/10-obvious-usability-crimes.html Optimization: Applying Moore's Law to User Experience By Peter Hornsby. "...If we are to take significant steps forward in the state of the art for UX design, we need to continually question our base assumptions and refresh our knowledge about where the boundaries of human performance lie. Human brains are capable of adapting to changing situations and understanding new concepts. If the rewards of innovation are sufficiently great, we can change our current conceptions about what computer systems should be. While it is possible that the current state of the art is the best we can manage, I hope not." http://tinyurl.com/yl48cso 10 Things to Consider When Writing for the Web By Rob Mills. "Writing for the web is a challenge. There are usually word length restrictions, the fact that users scan rather than read every word, and sometimes style guides to adhere to. There are enough writing tips online to keep you reading for longer than you probably desire. Here are 10 tips that have been the most useful to me..." http://tinyurl.com/yf2xs95 The Construction of Instruction By Relly Annett-Bake. "If the world were made to my specifications, all your clients would be happy to pay for a web writer to craft every sentence into something as elegant as it was functional, and the client would have planned the content so that you had it just when you asked, but we both know that won't happen every time..." http://24ways.org/2009/the-construction-of-instruction Make It Difficult to Read By Dmitry Fadeyev. ...There is no one right way to write content for the Web, just different approaches for different circumstances. Knowing your objectives can help you choose your strategy, just be sure to consider all options, especially the less obvious ones." http://www.usabilitypost.com/2009/12/08/make-it-difficult-to-read/ [Section one ends.] ++ SECTION TWO: +14: 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.]