+++ WEB DESIGN UPDATE. - Volume 10, Issue 15, October 4, 2012. 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/itss/training/online/webdesign/ New links in these categories: 01: ACCESSIBILITY. 02: BOOKS. 03: CASCADING STYLE SHEETS. 04: EVALUATION & TESTING. 05: EVENTS. 06: JAVASCRIPT. 07: MISCELLANEOUS. 08: NAVIGATION. 09: STANDARDS, GUIDELINES & PATTERNS. 10: TOOLS. 11: TYPOGRAPHY. 12: USABILITY. SECTION TWO: 13: What Can You Find at the Web Design Reference Site? [Contents ends.] ++ SECTION ONE: New references. +01: ACCESSIBILITY. New Image-Description Guidelines Coming from ISO/IEC By Geoff Freed. "Image-description enthusiasts will be happy to learn that ISO and the IEC are preparing to issue a new set of guidelines pertaining toÉ well, image descriptions. It's called 'ISO/IEC TS 20071-11 - Information Technology - User Interface Component Accessibility - Part 11 Guidance for Text Alternatives for Images,' and, having just passed through the approval process, should be available in its final format shortly..." http://blog.diagramcenter.org/?p=365 Google Announces Accessibility Updates to Apps By John Eric Brandt. "After some strong criticism last year from the Access Technology Higher Education Network (ATHEN) Google Apps Accessibility Interest Group (published in October 2011), Google appears to have responded. I wrote up a summary of those concerns for Maine CITE..." http://jebswebs.net/blog/2012/09/google-announces-accessibility-updates-to-apps/ Greater Accessibility for Google Apps By Google. "It's been a year since we posted about enhanced accessibility in Google Docs, Sites and Calendar. As we close out another summer, we want to update our users on some of the new features and improvements in our products since then. We know that assistive technologies for the web are still evolving, and we're committed to moving the state of accessibility forward in our applications." http://googleblog.blogspot.com/2012/09/greater-accessibility-for-google-apps.html An Update on Apps Accessibility in the Last Year By Jeffrey Harris, Google. "...With the new school year already underway, we wanted to do a quick recap of some of the accessibility changes we've made in the past year ... so that there's an easy place to look for a list of some of the bigger changes we've been making in Apps..." https://groups.google.com/forum/#!topic/accessible/BVvL293pWJ0/discussion Cheat Sheets By The National Center on Disability and Access to Education. "A series of informative accessibility pamphlets, or 'Cheat Sheets,' have been developed to assist anyone who is creating accessible content. These resources are catered to less-technical individuals, such as faculty and staff, and are available to all. GOALS regularly adds new resources to the NCDAE site..." http://www.ncdae.org/resources/cheatsheets/ Survey - Cloud Accessibility for Visually Impaired and Normally Sighted People By Diana Kornbrot. "The aim of the project was to obtain key information that could influence the design of CLOUD applications to make them easier to use for both visually impaired and sighted individuals.." http://dianakornbrot.wordpress.com/projects/survey-cloud-accessibility-for-visually-impaired-and-normally-sighted-people/ A Challenge to Accessibility Testing Tool Vendors By Karl Groves. "...All five of these criteria are aimed at one thing: Quality. For me to give out a recommendation for any product - not just an automated accessibility testing tool - I have to feel comfortable that I'm steering people to a vendor and a product which has a firm commitment to quality, not just for their product but for their related services and support. I'm not going to vouch for anything less. That's my promise to my customers, potential customers, peers, and members of the accessibility community." http://www.karlgroves.com/2012/10/03/a-challenge-to-accessibility-testing-tool-vendors/ +02: BOOKS. Cunningham, Katie. The Accessibility Handbook, O'Reilly Media, 2012. +03: CASCADING STYLE SHEETS. Use Inherit to Reduce Repetition of CSS Property Values By Roger Johansson. Every now and then you will find yourself having to repeat the same value for a particular property in several CSS rules. Sometimes doing so is necessary, but there are some situations when you can use the 'inherit' value to avoid repeating yourself. http://www.456bereastreet.com/archive/201209/use_inherit_to_reduce_repetition_of_css_property_values/ CSS: The Definitive Guide, Fourth Edition By Eric A. Meyer. "I'm really excited to announce that CSS: The Definitive Guide, Fourth Edition, is being released one piece at a time..." http://meyerweb.com/eric/thoughts/2012/10/01/csstdg4e/ Default CSS Display Values for Different HTML Elements By Louis Lazaris. "Every element in an HTML document accepts a value for the CSS display property. The possible values you can use for display are many..." http://www.impressivewebs.com/default-css-display-values-html-elements/ Styling Buttons in iOS WebKit and -webkit-appearance:none By Roger Johansson. I just recently ran into an issue when styling buttons that had me pulling my hair for a while. I had my buttons looking the way they were supposed to look in desktop browsers, but when I went to have a look in Safari for iOS, much of my CSS wasn't applied. http://www.456bereastreet.com/archive/201111/styling_buttons_in_ios_webkit_and_-webkit-appearancenone/ +04: EVALUATION & TESTING. 2 Kinds of Usability Test By David Travis. "There are two different types of usability test and each has different aims. Which test you choose will have implications for the number of participants you test, the methodology you use and the way you log, analyse and present the data." http://www.userfocus.co.uk/articles/2-kinds-of-usability-test.html Five Critical Quantitative UX Concepts By Jeff Sauro. "...Here are five of the more critical but challenging concepts. We didn't just pick some arbitrary geeky stuff to stump math geeks (or get you an interview at Google). These are fundamental concepts that take practice and patience but are worth the effort to understand..." http://www.measuringusability.com/blog/five-hard-quant.php +05: EVENTS. Mobile JS Summit 2012 November 12, 2012. Online http://www.environmentsforhumans.com/2012/mobile-javascript-summit +06: JAVASCRIPT. Learnable Programming By Bret Victor. "Designing a programming system for understanding programs..." http://worrydream.com/LearnableProgramming/ Unobtrusive JavaScript By Jason Moon. "The meaning of the phrase unobtrusive JavaScript has changed since jQuery came around. To understand this change, let's first go back to when we used to write code like this..." http://blog.socialcast.com/unobtrusive-javascript-2/ +07: MISCELLANEOUS. Beyond the Responsive Homepage in #highered: UNL and Some? By Karine Joly. The past 12 months have been marked by a rising interest for responsive web design techniques in higher education..." http://collegewebeditor.com/blog/index.php/archives/2012/09/27/beyond-the-responsive-homepage-in-highered-unl-and-some/ Encouraging Better Client Participation In Responsive Design Projects - Design Process By Andy Clarke. "Last week at the fabulous Smashing Conference in Freiburg, I gave a new talk, one I'd written just a few hours prior. I chose not to use slides, but instead to speak about three things that I'm incredibly enthusiastic about..." http://www.smashingmagazine.com/2012/09/28/better-client-participation-in-responsive-design-projects/ The Responsive Design Myth By Giselle Abramovich. "Responsive design is the new HTML5, a fancy term thrown around to prove that you 'get it' in mobile. On the surface, responsive design makes total sense: design for an optimal experience across a wide range of devices..." http://www.digiday.com/publishers/the-responsive-design-myth/ The Art of Web Design (Video) By Virginia DeBolt. "Whitney Hess recently mentioned this video from PBS on her site. It's an interview with Whitney, Jeffrey Zeldman, and Jason Santa Maria about web design. It's short and you're gonna love it..." http://www.webteacher.ws/2012/09/28/the-art-of-web-design-video/ +08: NAVIGATION. Avoiding the Dirty Magnet in Navigation Design By Gerry McGovern. "A dirty magnet is a link that attracts people to click on it promising to bring them somewhere that it won't." http://www.gerrymcgovern.com/new-thinking/avoiding-dirty-magnet-navigation-design +09: STANDARDS, GUIDELINES & PATTERNS. Recent W3C HTML5 Updates By Adrian Roselli. "I've been a member of the W3C HTML Working Group for a month now and appear to have joined at a point when there is a push to get HTML5 wrapped up as quickly as possible. While we all (should) know that HTML5 as it is referenced in the media is really a combination of related specifications, this push is about the core HTML5 specification itself..." http://blog.adrianroselli.com/2012/09/recent-w3c-html5-updates.html HTML5 Image Description Extension Charles McCathie Nevile, Editor. "This specification defines a longdesc attribute to extended descriptions to images in HTML5-based content." http://lists.w3.org/Archives/Public/public-html-a11y/2012Sep/att-0478/longdesc.html Using HTML5 and Javascript to Deliver Text-Based Audio Descriptions By IBM and The National Center for Accessible Media (NCAM). "...NCAM has also investigated how to use HTML5, Javascript, MathML and the Popcorn.js HTML5 Media Framework to deliver accessible math alongside video embedded in a Web page..." http://ncamftp.wgbh.org/ibm/dvs/ Using HTML5 and Javascript to Deliver Accessible Supplemental Materials By The National Center for Accessible Media (NCAM). "This new project aims to demonstrate the inclusion of enhancements in ways that are both visual and non-visual, all of which are screen-reader accessible and delivered using HTML5, Javascript and the Popcorn.js HTML5 Media Framework. Read on to learn about the demonstration model that is now available for you to test..." http://ncamftp.wgbh.org/rd/quadratic/ +10: TOOLS. FireFox HeadingsMap Extension By Rumoroso. "The extension generates an index (or map) of any web document structured with headings. There are some differences from other, for example..." https://addons.mozilla.org/en-US/firefox/addon/headingsmap/ Web Evaluation Tools Bookmarklet By NC State University IT Accessibility Resources. "This tool will visually show you any headings, ARIA landmarks, internal links, and tabindex attributes present on a page. This information is useful for examining the structure of a page as a screen reader user would experience it, without having to actually start up a screen reader to test it..." http://accessibility.oit.ncsu.edu/tools/web-evaluation-tools/ WAVE Toolbar By WebAIM. "The WAVE Firefox toolbar provides a mechanism for running WAVE reports directly within Firefox. Because the toolbar reports runs entirely within your web browser, no information is sent to the WAVE server. This ensures 100% private and secure accessibility reporting. The toolbar can check intranet, password-protected, dynamically generated, or sensitive web pages. Also, because the WAVE toolbar evaluates the rendered version of your page, locally displayed styles and dynamically-generated content from scripts or AJAX can be evaluated..." http://wave.webaim.org/toolbar Restyle Your CSS Declarations With CSScomb By Craig Buckler. "How do you order your CSS properties? Some developers prefer an alphabetical list. Some prefer grouping by related types. Ultimately, it doesn't matter. There's no 'wrong' way and you should use whatever style suits you. It will become a habit and you'll be able to shave precious seconds when searching your own CSS code..." http://www.sitepoint.com/csscomb-css-property-sorting/ +11: TYPOGRAPHY. How Sans-Serif Typeface Styles Affect Readability By anthony. "...There are lots of sans-serif typefaces you can choose from. But before you choose, ask yourself whether reading speed and ease is of prime concern for the user's task. If the user will find themselves in situations where they need to spend less time fixating on a screen and more attention on doing an outside task, then make sure you choose a typeface that's proven to make reading text fast and easy. Choosing a typeface isn't always about interface aesthetics. Sometimes it's about user readability and safety, which are far more important." http://uxmovement.com/content/how-sans-serif-typeface-styles-affect-readability/ Chromatic Type with Pseudo Elements By Adrian A. Roselli. "Typography on the web has come a long way from the days of a handful of web-safe fonts, six sizes, and little other control. With the ability to embed custom typefaces in web pages and exert a great deal of control via CSS, it was a matter of time before old-world printing techniques for multi-colored text came to the web..." http://blog.adrianroselli.com/2012/10/chromatic-type-with-pseudo-elements.html Beauty and Ugliness in Type Design By ilovetypography. "Peter Bilak on the process of designing his newly releases Karloff typeface..." http://ilovetypography.com/2012/09/25/beauty-and-ugliness-in-type-font-design/ +12: USABILITY. Don't Let Your CMS Wreck Your Content, Part 2 By Dey Alexander. "In part 1, I wrote about problems with page titles generated by content management systems. In this article, we'll look at problems with generating file names and text alternatives for images. And I make suggestions about how to set up your CMS for better results..." http://www.4syllables.com.au/2012/09/cms-wreck-content-part2/ Fixing A Broken User Experience - UX Strategy By Stefan Klocek. "... In this article, we'll introduce you to a strategy for fixing the broken experience that starts with surface improvements, goes progressively deeper into structural issues and ends with a big organizational shift..." http://uxdesign.smashingmagazine.com/2012/09/27/fixing-broken-user-experience/ Small But Significant Usability Sins that Websites Should Never Commit By Elezea. "...So, here it is - an incomplete, top-of-mind list of usability sins your website should never commit, based on data gathered through in-person usability testing: Don't use an asterisk (*) to mark required form fields...Don't open links in new browser tabs...Don't have an FAQ page...Don't use PDFs at all...Don't give table rows highlighting mouse-overs if the rows aren't clickable... " http://www.elezea.com/2012/09/usability-sins/ 14 Guidelines for Creating Great Headlines and Web Copy By Christian Watson. "Here is a summary of the guidelines - click through to read the details for each..." http://www.smileycat.com/miaow/archives/002998.php [Section one ends.] ++ SECTION TWO: +13: What Can You Find at the Web Design Reference Site? Accessibility Information. http://www.d.umn.edu/itss/training/online/webdesign/accessibility.html Association Information. http://www.d.umn.edu/itss/training/online/webdesign/associations.html Book Listings. http://www.d.umn.edu/itss/training/online/webdesign/books.html Cascading Style Sheets Information. http://www.d.umn.edu/itss/training/online/webdesign/css.html Color Information. http://www.d.umn.edu/itss/training/online/webdesign/color.html Dreamweaver Information. http://www.d.umn.edu/itss/training/online/webdesign/dreamweaver.html Evaluation & Testing Information. http://www.d.umn.edu/itss/training/online/webdesign/testing.html Event Information. http://www.d.umn.edu/itss/training/online/webdesign/events.html Flash Information. http://www.d.umn.edu/itss/training/online/webdesign/flash.html Information Architecture Information. http://www.d.umn.edu/itss/training/online/webdesign/architecture.html JavaScript Information. http://www.d.umn.edu/itss/training/online/webdesign/javascript.html Miscellaneous Web Information. http://www.d.umn.edu/itss/training/online/webdesign/misc.html Navigation Information. http://www.d.umn.edu/itss/training/online/webdesign/navigation.html PHP Information. http://www.d.umn.edu/itss/training/online/webdesign/php.html Sites & Blogs Listing. http://www.d.umn.edu/itss/training/online/webdesign/sites.html Standards, Guidelines & Pattern Information. http://www.d.umn.edu/itss/training/online/webdesign/standards.html Tool Information. http://www.d.umn.edu/itss/training/online/webdesign/tools.html Typography Information. http://www.d.umn.edu/itss/training/online/webdesign/type.html Usability Information. http://www.d.umn.edu/itss/training/online/webdesign/usability.html XML Information. http://www.d.umn.edu/itss/training/online/webdesign/xml.html [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/itss/training/online/webdesign/webdev_listserv.html 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.]