+++ WEB DESIGN UPDATE. - Volume 7, Issue 49, June 5, 2009. An email newsletter to distribute news and information about web design and development. ++ISSUE 49 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: EVALUATION & TESTING. 05: FLASH. 06: INFORMATION ARCHITECTURE. 07: JAVASCRIPT. 08: NAVIGATION. 09: PHP. 10: STANDARDS, GUIDELINES & PATTERNS. 11: TOOLS. 12: TYPOGRAPHY. 13: USABILITY. 14: XML. SECTION TWO: 15: What Can You Find at the Web Design Reference Site? [Contents ends.] ++ SECTION ONE: New references. +01: ACCESSIBILITY. Browse Assistive Technology By Department of Defense Computer/Electronic Accommodations Program. "Assistive technologies ensure that people with disabilities have equal access to information/electronic and telecommunication work environments. Although CAP does not sell any products, CAP provides objective information about assistive technology products and rehabilitation equipment for people with all types of disabilities, including both apparent physical disabilities as well as hidden cognitive disabilities: blindness/low vision; cognitive; communication; deafness/hard of hearing; and dexterity. Information available through CAP includes all assistive technologies whether acquired commercially, modified or customized..." http://www.tricare.mil/CAP/acc_sol/browse_AssisTech.cfm How Do People With Different Disabilities Use The Computer By Tom Babinszki. "Recently I have posted a series of blog items about how people with different kinds of disabilities use the computer..." http://tinyurl.com/nrw92n What is the Difference Between Being Visually Impaired and Legally Blind? By Sylvie Leochko. "Years ago, my school division sent me in Southern Ontario to follow a course that would prepare me to teach Braille to one of my future students. While studying over there, I did not only learn so much more than Braille but I also met two friends that were legally blind. One was using a white cane and large print while the other was blessed by the precious assistance of a guide-dog..." http://tinyurl.com/mscc28 How Captcha Kills the Romance of the WWW (except spammer wins) By Cathy P.S. Ma. "The World wide web is a romantic concept..." http://tinyurl.com/nno4se Using NVDA to Evaluate Web Accessibility By Jared Smith. "This article provides an overview for beginners on using NVDA to evaluate the accessibility of web content. NVDA is a free, open source screen reader for Windows." http://webaim.org/articles/nvda/ Google Chrome 2.0 Accessibility Improvements? By Steve Faulkner. "...The current version of Google Chrome does not have the basic support required for accessibility. Support is in development, but Google needs to dedicate more resources if they are going to provide a browser, any time soon, that rivals Firefox or Internet Explorer in terms of accessibility for users with disabilities..." http://www.paciellogroup.com/blog/?p=104 Hear Me Stumble Around White House, Recovery, and Data GOV Web Sites By slger. "This post takes a tour by screen reader of the new U.S. government web sites..." http://tinyurl.com/pvztod Chasing Our Tails? By Wendy Chisholm. "...The cultural dialogue about basic human rights is ongoing...we're still debating if accessibility is even a human right! Until it is assumed that every web site, every web application, every web service must be accessible, this gap will exist..." http://sp1ral.com/2009/06/chasing-our-tails/ Guideline 2.1 Don't Forget Users Without a Pointer By Olga Revilla. "Make all functionality available from a keyboard..." http://tinyurl.com/pe47ag +02: CASCADING STYLE SHEETS. Analyzing Form Element and CSS Support in Web Browsers By Christopher Schmitt. "...To see which form elements and CSS properties did well, you can look into the presentation itself from my SlideShare account (see pages 33 and 37) or you skip down this blog post to read the lists..." http://tinyurl.com/m8pjgq All CSS 2.1 Properties, Values and Browser Support By Estelle Weyl. "Below is every CSS 2.1 Property, all the possible values for that property, and the support for each property value from grade-A browsers..." http://tinyurl.com/lr66ox Improving Your Process: Thinking More About Your CSS By Jonathan Christopher. "...here's a quick breakdown of my tips, tricks, and suggestions..." http://tinyurl.com/mtdvdw The CSS Box Model By Chris Coyier. "At the risk of over-repeating myself: every element in web design is a rectangular box. This was my ah-ha moment that helped me really start to understand CSS-based web design and accomplish the layouts I wanted to accomplish. We've talked about the positioning of these boxes a bit, and about their behavior..." http://css-tricks.com/the-css-box-model/ 22 CSS Button Styling Tutorials and Techniques By speckyboy. "CSS button styling can be tricky and sometimes tedious. If you are looking for a simple and effective way of creating dynamic CSS buttons with cross browser compatibility, these tutorials are for you. Below, you will find 22 CSS Button Styling Tutorials and Techniques..." http://tinyurl.com/q3y2gk +03: COLOR. Color Contrast (Font Sizing) By WebAIM Thread. "I have a question about the WCAG 2.0 requirements. It mentions the font sizes 18 point and 14 point. If I were to write this requirement in pixels, should I use 24 pixels and 19 pixels, respectively? Point size seems to depend on screen resolution. For 72 ppi, 14 point and 14 pixels are the same size. But at 96 ppi, 14 point is closer to 19 pixels. Does the WCAG 2.0 checkpoint mean to depend on the screen resolution in this way? I'm working with our brand department on a color palette and I need to let them know which text/background color combinations provide enough contrast, but first they need to know what 18 point and 14 point mean." http://tinyurl.com/pabewg +04: EVALUATION & TESTING. Eye Tracking Study Reveals 12 Website Tactics By directcreative. "While this is just one eye tracking study focused on a particular type of site, I think there are instructive nuggets here for any informational website." http://www.directcreative.com/blog/eye-tracking-websites Don't Trust Your Gut Instinct By Gerry McGovern. In an age when computers can crunch numbers and do analysis on a vast scale, the deep flaws in our intuition and gut instinct are becoming more and more apparent. http://www.gerrymcgovern.com/nt/2009/nt-2009-06-01-gut-instinct.htm Real or Imaginary - The Effectiveness of Using Personas in Product Design By Frank Long. "The use of personas as a method for communicating user requirements in collaborative design environments is well established. However, very little research has been conducted to quantify the benefits of using this technique. The aim of this study was to investigate the effectiveness of using personas. An experiment was conducted over a period of 5 weeks using students from NCAD. The results showed that, through using personas, designs with superior usability characteristics were produced. They also indicate that using personas provides a significant advantage during the research and conceptualization stages of the design process (supporting previously unfounded claims). The study also investigated the effects of using different presentation methods to present personas and concluded that photographs worked better than illustrations, and that visual storyboards were more effective in presenting task scenarios than text only versions." http://tinyurl.com/pe9qfv +05: FLASH. HTML5 Versus Flash Versions By Ryan Stewart. "...I ran down some of the new APIs and changes between HTML5 and HTML4 according to Wikipedia and compared them to what we have in Flash and when we added it..." http://blog.digitalbackcountry.com/2009/05/html5-versus-flash-versions/ +06: INFORMATION ARCHITECTURE. The Life Cycle of a Wireframe By Nick Finck. "For those who are looking for my slides from the Puget Sound SIGCHI lecture and for those who missed it but are curious, here is my presentation. It focuses specifically on my personal process for creating wireframes. There are 4 parts to my process, each has a series of deliverables that feed into it and principals I try to keep in mind, the outcome is either a single or a series of IA deliverables. My overall strategy for IA is three step process; understanding the problem (note: not merely identifying the problem but really understanding it), find a solution (there may be more than one solution, but there is often only one right solution), and present the solution (a large part of your job as a IA is presenting your work so the client can understand the results). Hope you enjoy the slides, these are admittedly pretty rough. I plan to refine and show better pairing between the principals and the specific outcome of applying them to the wireframes in the future." http://www.nickfinck.com/blog/entry/the_life_cycle_of_a_wireframe/ +07: JAVASCRIPT. Getters and Setters with JavaScript - Code Samples and Demos By Robert Nyman. "Not many people know it, but you can use 'real' getters and setters in JavaScript if you want to..." http://tinyurl.com/m5h7hg Screen Reader Support for AJAX Live Regions By Leonie Watson. "Rich Internet Application (RIA) websites encourage people to generate content, collaborate online and make choices about the information they receive. Unsurprisingly, RIA websites can represent a considerable challenge for screen reader users. The WAI's Accessible Rich Internet Applications (ARIA)is an emerging standard that aims to bridge the gap between RIA websites and screen reading technology." http://tink.co.uk/2009/06/screen-reader-support-for-ajax-live-regions Debugging JavaScript: Beyond Alerts By Rob Gravelle. "Today, JavaScript can be written, debugged, and even tested using frameworks' built-in functionality or by specialized software. In today's article, we'll begin examining some of the latest ways of debugging your JavaScript code..." http://www.webreference.com/programming/javascript/rg34/index.html +08: NAVIGATION. Drop Down Menus WebAIM Thread. "I'm just trying to find some definitive answers to the accessibility of drop down menus. Can anyone point me in the right direction? Are they compliant with WCAG priority 2 guidelines?..." http://webaim.org/discussion/mail_thread.php?thread=3883 30 Examples of Attractive Nav By Joel Reyes. "...To help you generate new ideas and inspiration for user navigation, here are 30 great examples of attractive and usable navigation..." http://www.webdesignerwall.com/trends/30-examples-of-attractive-nav/ +09: PHP. The Isset and Unset Magic Functions in PHP 5 By Alejandro Gervasio. "Welcome to the second part of a seven-part series on the magic functions in PHP 5. In the previous article, we looked at property overloading with the get and set functions. In this one, we'll take a look at the same task using the isset and unset magic functions..." http://tinyurl.com/qbquql Advanced PHP Form Input Validation to Check User Inputs By Codex-M. "PHP form input validation is what separates amateur and professional PHP developers. A professional PHP developer validates data for both security and correctness of the data entered. Keep reading to learn how to validate user input to your forms." http://tinyurl.com/qextx7 The ABC's of PHP - Part 10 - The Final Installment By Peter Shaw. "In this last installment in our series Peter Shaw ties it all together..." http://www.phpbuilder.com/columns/peter_shaw06012009.php3 PHP Charts By Jim Rutherford. "Digital Media Minute did a post years back (did I mention we are coming up on our sixth birthday?) on generating Flash/PHP charts . Here's a list of some of the better places on the net that will help you build PHP charts..." http://www.digitalmediaminute.com/article/3503/php-charts +10: STANDARDS, GUIDELINES & PATTERNS. HTML5 Isn't a Standard Yet By Philippe Le Hegaret. "...while it is great to see support for and implementation of HTML 5, the community has not yet reached agreement enough to call it a standard, and it has not been implemented consistently across multiple browsers. Building a test suite will help a lot and we don't have one yet. This is an area that we intend to explore and to seek community support." http://www.w3.org/QA/2009/05/_watching_the_google_io.html Cufon and Screen Readers By Roger Johansson. Cufon has been talked about a lot recently, and it looks like a potential alternative to static images or sIFR in situations when you absolutely must use a typeface that is not 'web-safe'..." http://tinyurl.com/m7bnwl Video on the Web By Anne van Kesteren. "I am pretty excited about all the recent video announcements. Dailymotion announced they are converting a bunch of their videos to Theora so you can view them natively in the upcoming Firefox. YouTube created an HTML5 Demo page which works only with Safari at this point due to the videos being encoded using H.264. Not quite there yet in terms of browser interoperability, but it is just starting. Already the YouTube demo shows a cool new thing when you hover over the video thumbnails..." http://annevankesteren.nl/2009/05/web-video Video for Everybody - HTML 5 Video Fallback By Chris Double. "Kroc Camen has made available Video for Everybody, an HTML snippet that uses HTML 5 video if it's available in the browser, otherwise falling back to different video playback options..." http://tinyurl.com/okbmuy Web Design Education Sucks By Lucian Tucker. "Lucian Tucker shares his thoughts on how web design is currently taught." http://boagworld.com/design/web-design-education-sucks +11: TOOLS. Subtitle Horse 2.0: Online Subtitle/Captions Editor By subtitle-horse. "Subtitle Horse is a online subtitle editor to translate flash videos (FLV) and get the subtitle-code in different formats, like TimedText or SRT. A timedText file (which is supported by the JW FLV Player and Adobe FLV playback component) can be generated online..." http://www.subtitle-horse.org/ A Web Based DFXP Captioning Tool By Roberto Ellero. "I would like to point out a Web based captioning Tool: Subtitle Horse. It allows you to easily subtitle movies on the fly..." http://lists.w3.org/Archives/Public/w3c-wai-gl/2009AprJun/0044.html +12: TYPOGRAPHY. Quick and Easy Ways To Spice Up Your Web Site's Font Styling By Neal Grosskopf. "One of the key elements of a good website design is the styling of the site's font. I think this is an area where many of the more 'mathematically inclined' web developers struggle. To help those out that are willing to take it, I'll show you how to take the default Times New Roman 16px font and make your design shine..." http://www.nealgrosskopf.com/tech/thread.asp?pid=50 +13: USABILITY. Twitter-verslag Steve Krug's Don't Make Me Think-Workshop By Aartjan van Erkel. Fifty tips from a workshop by Steve Krug. http://tinyurl.com/nkxcp4 User Experience Over Usability By Alistair Gray. "A good experience is essential for a customer to return and good site usability has several advantages. This article looks at the big picture and the difference in focus between usability and user experience." http://tinyurl.com/kwh8uy Nice Research on Persona Effectiveness IxDA Thread. "The paper compares three groups; one group that is briefed with photos of personas, one which uses illustrations of the personas and the last group is briefed to with no personas, and uses aesthetic design." - (IxDA Discussion) Intensely debated topic (again)..." http://www.ixda.org/discuss.php?post=42315 Fixed vs. Fluid vs. Elastic Layout: What's The Right One For You? By Kayla Knight. "This article discusses the pros and cons of each type of layout. Either one can be used to make a successful website layout, as long as you keep usability in mind." http://tinyurl.com/q54tnl Dear American Airlines By Dustin Curtis. "I'm a user interface designer. I travel sometimes. Recently, I had the horrific displeasure of booking a flight on your website, aa.com. The experience was so bad that I vowed never to fly your airline again. But before we part ways, I have a couple questions and three suggestions for you..." http://dustincurtis.com/dear_american_airlines.html Is UX an Art or a Science? By Patrick Kennedy. "As many of them do, this post by Seth Godin struck a chord with me, and made a lot of sense..." http://www.gurtle.com/ppov/2009/06/03/is-ux-an-art-or-a-science +14: XML. W3C's Steven Pemberton on XHTML2 By Molly E. Holzschlag. "With all the fuss about HTML5 at Google I/O last week, the question of 'what about XHTML2?' keeps coming up in conversation. In an effort to better understand the answer to that question, I asked Steven Pemberton, W3c Chair of HTML and Forms Working Groups, who graciously took the time to chat with me about it and who then provided this overview to answer the question for the Web designer and developer public..." http://www.molly.com/2009/06/02/why-xhtml2/ The Real 'Why XHTML' Discussion By Molly E. Holzschlag. "Molly Holzschlag asked me if I'd try and clearly and simply explain why XML parsing is advantageous and why XHTML still is relevant. This was my answer...." http://www.molly.com/2009/06/02/the-real-why-xhtml-discussion/ An SVG Primer for Today's Browsers By David Dailey. "...While this book is not intended for the beginning computer user, I would hope it is approachable by any of these sorts of people..." http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html [Section one ends.] ++ SECTION TWO: +15: 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.]