+++ WEB DESIGN UPDATE. - Volume 8, Issue 15, October 9, 2009. An email newsletter to distribute news and information about web design and development. ++ISSUE 15 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: FLASH. 05: JAVASCRIPT. 06: MISCELLANEOUS. 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. Multimedia Accessibility FAQ By Shawn Lawton Henry, editor. "Multimedia accessibility is easier than you might think. Don't be afraid. For most W3C audio and video, you just need to provide a simple text transcript. Transcripts are relatively cheap and easy..." http://www.w3.org/2008/06/video-notes A Checklist for Inclusive Teaching By Sheryl Burgstahler. "he universal design of instruction-where universal design (UD) principles are applied in selecting and developing curriculum, choosing and implementing teaching methods, and developing assessments-is gaining increased attention by educational researchers and practitioners at K-12 and postsecondary levels. UD means that, rather than designing your instruction for the average student, you design for potential students with a broad range in ability, disability, age, reading level, learning style, native language, race, ethnicity, and other characteristics. Universal design of instruction (UDI) can be discussed as a process, as a set of strategies applied to specific aspects of instruction, or as a goal..." http://www.washington.edu/doit/Brochures/Academics/equal_access_udi.html Use the optgroup Element to Group Select Options By Roger Johansson. "Sometimes it is useful to group the options of an HTML select element. Many developers use extra option elements and non-breaking spaces to create the visual appearance of hierarchical options, but there is another way: the often forgotten optgroup element..." http://tinyurl.com/y8pos5l Web Application Accessibility (video) By Universtity of Wisconsin. "Recognize the need for accessible web applications, and reach a broader audience." http://www.doit.wisc.edu/accessibility/video/web_applications.asp Introduction to World Caption (video) By Universtity of Wisconsin. "World Caption is a free Macintosh software program created at the University of Wisconsin-Madison that makes it easy to add captions to any QuickTime compatible video." http://www.doit.wisc.edu/accessibility/video/WorldCaption/ Learning Without Limits: Students with Disabilities at UW-Madison (video) By Universtity of Wisconsin. "UW-Madison students with disabilities share their Wisconsin experiences. http://www.mcburney.wisc.edu/videos/learningwithoutlimits/ The Importance of Placement of HTML Elements in a Document By Marco Zehe. ...when you design dynamic content, write an accordion widget or the like, please please please always take the time to chose an appropriate div element in the vicinity of where the user is, and add or remove the dynamic content there instead of taking the maybe easier, but far less intuitive, route to simply dump to the end of the document node's children and then use some weird styling to craft it visually. You'll help all screen reader users visiting your site by offering them more efficiency in that they don't have to navigate between chunks of the content that are far apart." http://tinyurl.com/y8fzmgx Accessibility Review: PetsContained.com By Joseph C. Dolson. "Disabled consumers often face great challenges when browsing and making purchases online. Perhaps as many as ten percent of online shoppers have a disability, such as low-or-no vision or an inability to use a keyboard, that can make it difficult to understand content and navigate websites..." http://tinyurl.com/yeruuyp +02: CASCADING STYLE SHEETS. Mastering CSS Coding: Getting Started By Soh Tanaka. "CSS has become the standard for building websites in today's industry. Whether you are a hardcore developer or designer, you should be familiar with it. CSS is the bridge between programming and design, and any Web professional must have some general knowledge of it. If you are getting your feet wet with CSS, this is the perfect time to fire up your favorite text editor and follow along in this tutorial as we cover the most common and practical uses of CSS..." http://tinyurl.com/y9ph48g Introducing the Flexible Box Layout Module By Peter Gasston. "One aspect of CSS3 that hasn't received a lot of attention so far is the Flexible Box Layout module. Already implemented in the Gecko and WebKit engines, in this alternative box model.." http://www.css3.info/introducing-the-flexible-box-layout-module/ Fluid Search Box By Marko Mrdjenovic. "There's been a lot of fluid layouts recently. When you use a fluid layout it's hard to make everything fluid as you need to stretch certain elements and have other elements fixed..." http://friedcellcollective.net/outbreak/2009/10/04/fluid-searchbox/ CSS Frameworks and Semantic Class Names By Kevin Yank. "One of the most common complaints about CSS frameworks like Blueprint, YUI Grids, and 960.gs is that they require designers to dirty their fingers by adding presentational class names to their HTML documents, like so..." http://tinyurl.com/y9pumaf CSS3 And Me By Trent Walton. "...The best part of all is designers save face: Use CSS Three. Let sites degrade with grace." http://trentwalton.com/2009/09/17/css3-and-me/ +03: EVALUATION & TESTING. Usability Testing Demystified By Dana Chisnell. "The value in usability testing comes from the magic of observing and listening as people use a design. The things you see and the things you hear are often surprising, illuminating, and unpredictable. This unpredictability is tough to capture in any other way. Dana Chisnell shows you how." http://www.alistapart.com/articles/usability-testing-demystified/ +04: FLASH. SVG vs. Canvas on Trivial Drawing Application By Samuli Kaipiainen and Matti Paksula. "...Based on these findings, there really is no vs. situation. The right technique needs to be selected for the job, and we hope this paper gives a good starting point for that. When the right choices are made, SVG and Canvas can actually benefit from each other. Currently there are some things to look out for until the support is stable. Yes, there's a limit on each standard's capabilities. For pixel flare and other "demo effects", go with Canvas. For intrinsic shapes and user interaction, go with SVG. Graphical user interfaces on the web are an especially delicious application for SVG...." http://tinyurl.com/ydd7w77 Flash vs HTML5 - and a few points for HTML5 advocates to consider By Neil Webb. "It's always been in my nature to question things, and for some reason I seem to find it easier than many to see various sides of an argument - playing devil's advocate with my own beliefs is a regular thing for me, so while I'm a Flash-platform developer by trade I'm pretty sure that I don't suffer from an unjustified allegiance to any platform. For any developer worth their salt, it will ALWAYS be about using the right technology for the job..." http://nwebb.co.uk/blog/?p=399 Adobe Fights Off HTML5 Threat With New Flash Player 10.1 By Scott Gilbertson. "HTML5 has been touted as a 'Flash killer,' making the ubiquitous Flash Player plugin unnecessary with new tags to embed video and create animations directly within HTML. But the latest Flash update, announced at Adobe's ongoing MAX conference, shows that Flash isn't going away without a fight..." http://tinyurl.com/yb2vhjv +05: JAVASCRIPT. ARIA Role Support: How the Windows Browsers Stack Up By Steve Faulkner. "Testing of the latest builds of the major Windows browsers indicates Google Chrome's ARIA role support improving, 18 of 47 roles are now correctly mapped to MSAA roles. There has been no change in Opera or IE support and only minimal improvement in Safari/Webkit support. there has been a minor regression in Firefox support in the latest Minefield build..." http://www.paciellogroup.com/blog/?p=474 Discovering Magic By Glenn Jones. "Wouldn't it be a little magical if, when you signed up for a new site, it said something like, 'We notice you have a profile photo on Flickr and Twitter, would you like to use one of those or upload a new one?' Glenn Jones created a JavaScript library called Ident Engine that can help you do just that." http://www.alistapart.com/articles/discovering-magic/ Progressive Enhancement Techniques 3: the JavaScript By Craig Buckler. "This is the final article in a three-part series that illustrates how to build a simple tabbed box using progressive enhancement techniques..." http://tinyurl.com/y95e5sz +06: MISCELLANEOUS. Results of the Quick Technologies Survey By Eric A. Meyer. "It was only a couple of weeks ago that we opened the doors on our Quick Technologies Survey, asking you which web design and development technologies you're either using now or expect to be using within the next two years. 1,226 of you responded over the following week, and now we have the results..." http://tinyurl.com/y95cq65 How to Keep Your Mouth Shut By Scott Berkun. "...Forcing an issue can be the only way to get it the attention it deserves. But pick your battles..." http://www.scottberkun.com/blog/2009/how-to-keep-your-mouth-shut/ 5 x 5 on the Edge with Ruth Ellison By Gary Barber. "...Ruth is a user experience practitioner originally from Perth, who has been lured over to the not so bright lights of Canberra, she has a wealth of experience in Information Architecture with a passion for accessibility and usability. Ruth also has this thing for Robots..." http://manwithnoblog.com/2009/10/03/ruth-ellison/ Interview with Victor Tsaran Senior Accessibility Program Manager at Yahoo By Webpro Minute. "Today's podcast is a continuation of WOW's media coverage of the Web Accessibility Conference that took place at the University of Illinois at Urbana/Champaign campus last week. For today's podcast, I'm on the phone with Victor Tsaran Senior Accessibility Program Manager at Yahoo..." http://tinyurl.com/ye2f2zs It's never too late to learn, A lesson from the web teacher (Virginia DeBolt) By Michael G. Williams. "Virginia DeBolt was well into her career as a schoolteacher when she started working with computers in the early 1980s. Even though her training was in English and writing, she served as the school's go-to person for all things high-tech at a time when the term referred to a computer with no mouse and a keyboard attached to the monitor..." http://ericksontribune.com/2009/09/2636/ +07: PHP. PHP Security: Are You Paying Attention? By Rafael Dohms. In a recent post to his blog Rafael Dohms reminds readers to not forget about the security of their applications because it can be "a huge mistake which can take a turn for the worse." http://tinyurl.com/ycklmw4 +08: STANDARDS, GUIDELINES & PATTERNS. A Proper Web Standards Education: Part 1 By Chris Mills. "In this article I will aim to point you in the right direction, and give you a basic framework of good key concepts to take on board and develop your knowledge of..." http://scrunchup.com/issue-1/a-proper-web-standards-education/ The Footer Element Update By Jack Osborne. "When I wrote the previous version of this article a few months ago, I knew, as I'm sure many of you also knew, that this element in particular would be subject to change as the HTML 5 spec neared it's completion. The problem was simple, the footer element just didn't feel 'complete', it just didn't offer the same flexibility as other elements. Now that's changed..." http://html5doctor.com/the-footer-element-update/ Usability Testing HTML5 By Ian Hickson. "Over the past few weeks, Google has been preparing and then running a usability study to test the microdata feature of HTML5..." http://blog.whatwg.org/usability-testing-html5 New Proposal for Captions and Other Timed Text for HTML5 By Silvia Pfeiffer. "The first specification for how to include captions, subtitles, lyrics, and similar time-aligned text with HTML5 media elements has received a lot of feedback - probably because there are several demos available..." http://tinyurl.com/y9vpmh7 Measure Up With the meter Tag By Tom Leadbetter. "HTML5 offers several useful new elements, to add further meaning to the markup of a page. These new elements include time, mark and here is another one, meter. It is an inline element so it can be used inside most elements, including a header or a paragraph..." http://html5doctor.com/measure-up-with-the-meter-tag/ +09: TOOLS. Unicorn By W3C. "The Web's Universal Conformance Checker" http://qa-dev.w3.org/unicorn/ Unicorn Project Documentation: http://www.w3.org/QA/Tools/Unicorn/ +10: TYPOGRAPHY. Know Your Typefaces! Semantic Differential Presentation of 40 Onscreen Typefaces By A.D. Shaikh. "This article presents results from a study investigating the personality of typefaces. Participants were asked to rate 40 typefaces (from serif, sans serif, display, and handwriting classes) using semantic differential scales. Responses are shown by typeface class and individual typeface using scaled scores. These results are helpful to practitioners when deciding which typeface to use for online text..." http://www.surl.org/usabilitynews/112/typeface.asp @font-face in Depth By Zoltan 'Du Lac' Hawryluk. "When I told one of my co-workers how excited I was that almost all the major browser vendors now supported font-embedding in their products, I got the same reaction from her that Bert from Sesame Street got when he told Ernie how exciting he thought bottle cap collecting was (yes, gratuitous ridicule was involved). Now, while I can somewhat understand her disinterest (she is not a front-end web developer, but a Java programmer), I defend my enthusiasm by stating here that fonts are a really important part of web design, and the fact that we can now theoretically choose any font to embed inside our web pages and applications is something to celebrate..." http://www.useragentman.com/blog/2009/09/20/font-face-in-depth/ Starting with @font-face By Dave Shea. "I've been using Cufon off and on since writing about font embedding back in May. It's a great hack, but browser progress since that time has been making me feel that the native CSS @font-face rule is becoming increasingly viable. Or, at least enough so that it seems like it's time to start dabbling..." http://mezzoblue.com/archives/2009/10/05/starting_wit/ Becoming a Font Embedding Master By Jonathan Snook. "I've spent a couple days worth now trying to figure out the best and most complete approach to font embedding using @font-face. It really is a dark art that must be mastered. It is by no means a straightforward process..." http://snook.ca/archives/html_and_css/becoming-a-font-embedding-master +11: USABILITY. Surviving Information-Seeking Sickness By Gerry McGovern. "The key to web success is to stop thinking about organizational information and start thinking of customer tasks." http://tinyurl.com/ykvqlnm Users Don't Want Rich By Neil Middleton. "For many years now, software developers around the world have been releasing quicker and more capable software on an almost constant basis. Each year, we tend so see new releases of existing products that make the products better in every apparent way, shape and form, and we, the computing public, lap it up..." http://neilmiddleton.com/2009/09/30/users-dont-want-rich/ Minimizing Complexity In User Interfaces By Tyler Tate. "Clean. Easy to use. User-friendly. Intuitive. This mantra is proclaimed by many but often gets lost in translation. The culprit: complexity. How one deals with complexity can make or break an application. A complex interface can disorient the user in a mild case and completely alienate them in an extreme case. But if you take measures first to reduce actual complexity and then to minimize perceived complexity, the user will be rewarded with a gratifying experience..." http://tinyurl.com/ya7wgnn Using Repertory Grid Interviews to Capture First Impressions of Homepages By V. Hinkle. "...RGIs can be used to gather users' perceptions of website homepages and use these perceptions to determine important features that affect first impressions of homepages. The results from this pilot study demonstrate the importance of aesthetic appeal and usability of homepages in terms of layout and the quality of the information. High scores in these features could lead to further exploration of the web site and therefore a new customer. Low scores in these features may indicate low generation of appeal and therefore fail to incite further exploration of the website. RGI results can help determine important elements for specific domains based on the users' reactions to the websites. Although there are other ways to capture first impressions of websites, RGIs provide in-depth qualitative and quantitative data that show the important features for potential users of the site. This in-depth information about important features allows researchers to create benchmarking goals for the first impressions of a homepage." http://www.surl.org/usabilitynews/112/repertory.asp Visual Appeal vs. Usability: Which One Influences User Perceptions of a Website More? By C. Phillips and B. Chaparro. "...Conclusion: An attractive homepage entices users to view more of the site and creates feelings of interest and initial satisfaction. If the homepage is unattractive, users do not appear to be interested, nor do they desire more interaction with the site. Designers must develop a homepage that not only attracts user' attention but also engages them. This research suggests that an attractive site is more likely to pull in users than an unattractive site regardless of how well it is designed from a usability standpoint. An unattractive site, despite high usability, does not attract user interest and maintains low satisfaction." http://www.surl.org/usabilitynews/112/aesthetic.asp Restraint By Dmitry Fadeyev. "There is one attribute of good design that I often see overlooked: restraint. Restraint in design is the quality of holding yourself back and implementing something which solves the problem in the simplest way possible. Oftentimes designers want to show off, imprint their own identity on a piece of work or simply get carried away, producing work that is good but losing simplicity and elegance in the process..." http://www.usabilitypost.com/2009/10/02/restraint/ Creating a Usable Contact Form By Matthew Kammerer. "There are some simple steps you can take to create the best bridge possible between you and your clients. The most obvious way to receive that feedback is through a contact form. It is an essential component for owners of websites. It creates a channel to hear feedback, suggestions, and even sell services..." http://www.uxbooth.com/blog/creating-usable-contact-forms/ The Myth of the Page Fold: Evidence From User Testing By Joe Leech. "In this article we are going to break down the page fold myth and give some tips to ensure content below the fold gets seen." http://tinyurl.com/y969zzj Do You Really Need a Redesign? By Ben Hunt. "Most web site redesigns are a colossal waste of money. Ben Hunt dissects the reasons for redesigning or not, and explains an effective process for doing it right." http://tinyurl.com/y8jna4f +12: XML. XML on the Web By Bruce Lawson. "I was asked by John Foliot (lovely bloke; I owe him some sightseeing and good single malt whisky) and Shelley Powers (never met her but am enjoying her book Painting The Web) to defend my statement that the rules of XML make no sense on the Web..." http://www.brucelawson.co.uk/2009/xml-on-the-web/ [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.]