. Date: Fri, 9 Jul 2010 06:16:24 -0500 From: Laura Carlson <lcarlson@xxxxxxxxx> To: webdev <webdev@xxxxxxxxxxxxxxx> Subject: [webdev] Web Design Update: July 9, 2010 +++ WEB DESIGN UPDATE. - Volume 9, Issue 02, July 9, 2010. An email newsletter to distribute news and information about web design and development. ++ISSUE 02 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: JAVASCRIPT. 06: MISCELLANEOUS. 07: NAVIGATION. 08: STANDARDS, GUIDELINES & PATTERNS. 08: TOOLS. 09: USABILITY. SECTION TWO: 10: What Can You Find at the Web Design Reference Site? [Contents ends.] ++ SECTION ONE: New references. +01: ACCESSIBILITY. H.R. 3101 Takes a Step Forward By The National Association of the Deaf. "The National Association of the Deaf (NAD) is pleased to report that, yesterday, the U.S. House of Representatives Subcommittee on Communications, Technology, and the Internet voted favorably on H.R. 3101, the Twenty-first Century Communications and Video Accessibility Act..." http://www.nad.org/news/2010/7/hr-3101-takes-step-forward A Sliding Alternative to CAPTCHA? By Luke Wroblewski. "It's no secret that the use of difficult CAPTCHAs (Completely Automated Public Turing test to tell Computers and Humans Apart) in Web forms can confound ordinary people, drop conversion rates, and increase errors in addition to (hopefully!) keeping the bad guys out of your site. As a result, I'm always interested in alternatives to standard CAPTCHA techniques." http://www.lukew.com/ff/entry.asp?1138 Introducing DISTCHA* By Samuel Sirois and Denis Boudreau. "What we're trying to pull here is an alternative to the current CAPTCHA solution, which is inherently inaccessible to people with disabilities, despite the best efforts put forth by initiatives such as the popular reCAPTCHA or the more recent nuCAPTCHA." http://accessibiliteweb.com/stuff/captcha-slider.html Section 508 and PDF - The Facts By Duff Johnson. "...Here are 10 key facts that anyone coming to grips with the problem needs to know. Want the really short version? There's no easy button, but with some planning and just a little know-how, your PDFs can be just as accessible as any web-page..." http://www.planetpdf.com/enterprise/article.asp?ContentID=Section_508_and_PDF_-_The_facts&gid=8045 Google Accessibility Resources By Google. http://www.google.com/accessibility/resources.html +02: CASCADING STYLE SHEETS. Prefix or Posthack By Eric Meyer. "Vendor prefixes: Threat or menace? As browser support (including in IE9) encourages more of us to dive into CSS3, vendor prefixes such as -moz-border-radius and -webkit-animation may challenge our consciences, along with our patience. But while nobody particularly enjoys writing the same thing four or five times in a row, prefixes may actually accelerate the advancement and refinement of CSS. King of CSS Eric Meyer explains why." http://www.alistapart.com/articles/prefix-or-posthack/ Supersize that Background, Please! by Bobby van der Sluis. "Background images that fill the screen thrill marketers but waste bandwidth in devices with small viewports, and suffer from cropping and alignment problems in high-res and widescreen monitors. Instead of using a single fixed background size, a better solution would be to scale the image to make it fit different window sizes. And with CSS3 backgrounds and CSS3 media queries, we can do just that. Bobby van der Sluis shows how." http://www.alistapart.com/articles/supersize-that-background-please/ CSS is the New Photoshop By John Nack. "...Cascading Style Sheets can create a great deal of artwork now, without reliance on bitmap graphics..." http://blogs.adobe.com/jnack/2010/07/css-is-the-new-photoshop.html An InDesign for HTML and CSS? By Jeffrey Zeldman. "...authoring good HTML and CSS is an art, just as authoring good poetry or designing beautiful comps in Photoshop is an art. Expecting Photoshop to write the kind of markup and CSS you and I write at our best is like challenging TextMate to convert semantic HTML into a visually appropriate and aesthetically pleasing layout. Certain kinds of human creativity and expertise cannot be reproduced by machines..." http://www.zeldman.com/2010/07/05/an-indesign-for-html-and-css/ CSS Media Queries & Using Available Space By Chris Coyier. "We've covered using CSS media queries to assign different stylesheets depending on browser window size. In that example, we changed the layout of the entire page based on the space available. It isn't required that we make such drastic changes with this technique though, so in this tutorial we'll go over a design tweak with a smaller scope. We'll also cover the syntax for using media queries within a single stylesheet and more examples of that..." http://css-tricks.com/css-media-queries/ Understanding the CSS display Property By Radu Chelariu. "One of the most powerful and useful properties in all CSS is, without a doubt, the display property. And yet, it is also one of the least well understood, especially by those just starting out with CSS. So, in this post I’ll try to shed some light on this little CSS gem." http://sickdesigner.com/index.php/2010/html-css/understanding-the-css-display-property/ +03: EVALUATION & TESTING. Recruiting Better Research Participants By Jim Ross. "Recruiting the right participants is the foundation of effective user research, because your research results are only as good as the participants involved..." http://www.uxmatters.com/mt/archives/2010/07/recruiting-better-research-participants.php Debunking the Myths of Remote Usability Studies By Corrie Kwan, Jin Li, and May Wong. "In this article, we'll draw on our collective, first-hand experiences doing remote usability studies for numerous real-world projects to describe and debunk these myths. Our goal is to share knowledge and inspire action... http://www.uxmatters.com/mt/archives/2010/07/debunking-the-myths-of-remote-usability-studies.php +04: EVENTS. Adobe Flex Accessibility Webinar Online July 21, 2010. http://www.paciellogroup.com/blog/?p=657 dConstruct 2010 September 3, 2010 Brighton, United Kingdom http://2010.dconstruct.org/ Web Teaching Day September 6, 2010. Manchester, United Kingdom http://webteachingday.wordpress.com/ Paris Web October 14-16, 2010. Paris, France http://www.paris-web.fr/ +05: JAVASCRIPT. Say No to noscript By Gez Lemon. "I'm surprised that the noscript element is conforming in HTML5, as there are much better techniques for ensuring that pages work with or without JavaScript. Despite early accessibility advice advocating use of the noscript element, best practice is to use unobtrusive JavaScript for progressive enhancement, rather than relying on fallback content." http://juicystudio.com/article/say-no-to-noscript.php HTML5 Bug 10068 - Suggest making noscript obsolete but conforming By Gez Lemon. "I think the noscript element should be deprecated, as it's better practice for developers to design pages that work without JavaScript and progressively enhance them using JavaScript, than assume JavaScript is supported and then provide some fall back content if it isn't..." http://www.w3.org/Bugs/Public/show_bug.cgi?id=10068 +06: MISCELLANEOUS. Controlling the Website Animal By Paul Boag. "The bigger the organization, the bigger the website. However, just because the company is bigger does not mean its website should be. Most of the time the site is bigger because there are simply more people who want their say! Unfortunately big sites, with lots of legacy content, create serious problems..." http://boagworld.com/business-strategy/website-animal Kill Your Darlings By Teresa Brazen. "...Every project has restraints and realities that can't be ignored, no matter how much you want to pursue a particularly brilliant concept. To help mitigate that, it's important to trust that there are always plenty more creative ideas where the last one came from. Otherwise, you're working within a belief system of limits, which is certain to undermine creativity..." http://www.adaptivepath.com/blog/2010/07/01/kill-your-darlings/ Plato's Cave By Andy Rutledge. "...The difference between professionals and those who understand only the echoes and shadows of professionalism is that the latter evaluate things according to an external, transient standard-to the point that only subjective, situational evaluation becomes useful. When compromise brings what passes for success, compromise becomes indistinguishable from virtue. At that point, shadow becomes reality. Professionals, by contrast, evaluate things according to consistent, uncompromising, internal standards based on individual and professional responsibility; standards that can stand the bright light of day..." http://www.andyrutledge.com/platos-cave.php On Solutions By Jens O. Meiert. "Solutions require problems. If you don't have a problem, you don't need a solution..." http://meiert.com/en/blog/20100707/on-solutions/ +07: NAVIGATION. Examining WAI-ARIA Document Landmark Roles By Gez Lemon. "WAI-ARIA defines document landmark roles to help define the structure of a document. Document landmark roles have two purposes; they help assistive technology users orientate themselves within a document, and they provide a mechanism for users to navigate documents. The following document landmark roles are defined in ARIA..." http://juicystudio.com/article/examining-wai-aria-document-andmark-roles.php Lou Rosenfeld on Search Analytics By Paul Boag. "Lou Rosenfeld shares how the search terms used on our websites can reveal a lot about our users." http://boagworld.com/usability/lou-rosenfeld +08: STANDARDS, GUIDELINES & PATTERNS. HTML5 and the Future of Adobe Flash By Adobe. "HTML5 poses a threat to Adobe Flash (and to other rich internet application [RAI] plug-ins). However the dynamics are complex and the time frames longer than one might expect..." (PDF) http://www.adobe.com/enterprise/pdfs/html5_flash.pdf Next Steps By Shelley Powers. "Sam Ruby's take on the CNet HTML5 article: 'Balanced piece that neither sweeps under the rug nor sensationalizes the differences that we are working through.' To me, this is the same as saying, 'Nothing to see here folks. Just be sure to step over the dead body on your way out'..." http://burningbird.net/node/114 An HTML5 <audio> Radio Player By Trygve Lie. "In this article we will look at the <audio> element, starting with the basics, looking in detail at how it works across different browsers, and then build a radio player application that uses live audio from a streaming server." http://dev.opera.com/articles/view/html5-audio-radio-player/ +09: TOOLS. AccProbe: The Accessibility Probe By IBM / Open A11y. "The Accessibility Probe (AccProbe) is a standalone, Eclipse Rich-Client Product (RCP) application that provides a view of the Microsoft Active Accessibility (MSAA) or IAccessible2 hierarchy of a currently running application or rendered document and of the properties of the accessible objects of that application or document. It can also serve as an event monitor for tracking the events fired by these accessible objects. It is meant to combine the functionality of tools like Microsoft's Inspect32, AccExplore, and AccEvent into one easy-to-use application for accessibility testing and debugging." http://accessibility.linuxfoundation.org/a11yweb/util/accprobe/ VideoCritter By Ken Meyering. "A Simple Free Online YouTube Video Captions Creator. Easily create subtitles and closed-captioning that can be translated into other languages." http://videocritter.org/ +10: USABILITY. 4 Rules For Displaying Error Messages From A User Experience Perspective By Tasin Reza. "In order to display error messages on forms, you need to consider the following four basic rules: 1. The error message needs to be short and meaningful. 2. The placement of the message needs to be associated with the field 3. The message style needs to be separated from the style of the field labels and instructions 4. The style of the error field needs to be different than the normal field..." http://www.nomensa.com/blog/2010/4-rules-for-displaying-error-messages-from-a-user-experience-perspective/ It's Not What People Say, It's What They Do By Gerry McGovern. "Never make management decisions for a website based on opinions. There is often a Jekyll and Hyde difference between what people say and what they do." http://www.gerrymcgovern.com/nt/2010/nt-2010-07-05-Evidence.htm New Readability Tool Built Into Safari 5 By John Rochford. "Reader, a new feature of Safari 5, removes visual distractions from Web pages. This is a boon for people with cognitive disabilities, indeed everyone distracted by advertisements, contextually-irrelevant images, etc..." http://clearhelper.wordpress.com/2010/07/07/new-readability-tool-built-into-safari-5/ How Injecting Usability Principles into Standard Bug Tracking Software Can Reshape How Your Organization Approaches UX Design By Alex Faaborg. "...by establishing a tracking system on a set of agreed upon principles, much of the debate on the level of 'there is no right or wrong with UI / every user is entitled to their personal opinion / all that matters is the ability to customize' that is currently found in some development communities can be significantly reduced. Usability heuristics will help ground these debates, just as currently in software development no one argues in favor of data loss, or in defense of crashing..." http://uxmag.com/strategy/quantifying-usability UX Challenges in Touch Interfaces By Adrian Roselli. "As mobile devices have been taking over the place of the mobile or home computer for basic apps and web access, developers are struggling with letting go of the mouse as the primary interface device...Meatsticks Are the New Mouse..." http://evolt.org//meatsticks iPad and Kindle Reading Speeds By Jakob Nielsen. "A study of people reading long-form text on tablets finds higher reading speeds than in the past, but they're still slower than reading print." http://www.useit.com/alertbox/ipad-kindle-reading.html [Section one ends.] ++ SECTION TWO: +11: 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@xxxxxxxxx [Issue ends.]