+++ WEB DESIGN UPDATE. - Volume 10, Issue 08, August 19, 2011. An email newsletter to distribute news and information about web design and development. ++ISSUE 08 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: CASCADING STYLE SHEETS. 03: DREAMWEAVER. 04: EVALUATION & TESTING. 05: EVENTS. 06: MISCELLANEOUS. 07: NAVIGATION. 08: STANDARDS, GUIDELINES & PATTERNS. 09: USABILITY. SECTION TWO: 10: What Can You Find at the Web Design Reference Site? [Contents ends.] ++ SECTION ONE: New references. +01: ACCESSIBILITY. HTML5 Accessibility Chops - SVG Text Alternative Example By Steve Faulkner. "The W3C HTML5 specification contains an SVG (Scalable Vector Graphics) based interactive Venn diagram. The diagram illustrates the relationship between HTML content categories. Currently the content and interactivity of the diagram is not accessible to some users. A bug SVG content model VENN diagram needs to be made accessible was filed. The HTML5 editors' response..." http://www.paciellogroup.com/blog/2011/08/html5-accessibility-chops-interactive-image-example/ Musings on Microsoft Office - Alt Text, Save as PDF, and More By Terrill Thompson. "Adding alternate text to images in electronic documents is simple. In most authoring software you simply right click on an image, select an option such as 'Format Picture' or something equally intuitive, and locate a form field where you are prompted to enter alt text. Unfortunately it's a bit more complicated than that in Microsoft Office." http://terrillthompson.blogspot.com/2011/08/musings-on-microsoft-office-alt-text.html Testing for Accessibility By Sara Ford. "Sara Ford explains what accessibility means, and shows you how to test your applications for accessibility. Topics covered include keyboard accessibility, High Contrast, focus and selection, and Assistive Technology Compatibility." This is a 2004 article that is stll relavant. http://msdn.microsoft.com/en-us/library/ms971307.aspx Inclusivity Requires A Paradigm Shift By Neil Milliken. "1 Billion plus people is not a niche market. According to the World Health Organisation: One in seven of the world's population has some kind of disability..." http://atrophiedmind.wordpress.com/2011/08/14/inclusivity-requires-a-paradigm-shift/ +02: CASCADING STYLE SHEETS. Do Not Use display:none to Visually Hide Content Intended for Screen Readers By Roger Johansson. "...When auditing websites for accessibility I occasionally find elements that are incorrectly hidden with display:none. The most common example is probably skip links intended to help keyboard and screen reader users. The irony is that those well-intended skip links are made useless by display:none..." http://www.456bereastreet.com/archive/201108/do_not_use_displaynone_to_visually_hide_content_intended_for_screen_readers/ The Importance of 's' in CSS3 Transition Shorthand By Greg Rewis. "On a recent project, I spent the better part of an hour (okay, maybe longer) fighting with what I would learn is an interesting anomaly in the way that Firefox (4 and 5) deal with CSS3 shorthand transition notation. What baffled me was the fact that the other players, Webkit (Safari and Chrome) and Opera browsers, worked properly with the exact same code. The premise was to have an area with a fixed height, set to overflow: hidden, but then allow the site navigation to scroll (transition) to the proper anchor, resizing the content box's height to accommodate the contents while keeping the other contents hidden..." http://blog.assortedgarbage.com/2011/08/the-importance-of-s-in-css3-transition-shorthand/ Transitions and Animations on CSS Generated Content By Chris Coyier. "Generated content means pseudo elements added to the page via the ::before and ::after. The support for applying transitions or animations to these in the current browser landscape is not great. I think this is a huge bummer, so I'm just making this blog post my permanent home to track the progress on this..." http://css-tricks.com/13555-transitions-and-animations-on-css-generated-content/ 'Space' and 'Round' Values By Chris Coyier. "...If you've seen the code for CSS3 border images then you're probably familiar with the space and round values for the border-image-repeat property. Well, in the CSS3 spec, the well-known background-repeat property now includes those two new values (in addition to repeat, repeat-x, repeat-y, and no-repeat - all of which most CSS developers will be thoroughly familiar with)..." http://www.impressivewebs.com/space-round-css3-background/ CSS3's 'space' and 'round' Values for background-repeat By Louis Lazaris. "...in the CSS3 spec, the well-known background-repeat property now includes those two new values (in addition to repeat, repeat-x, repeat-y, and no-repeat - all of which most CSS developers will be thoroughly familiar with). To demonstrate what these new values do, here are some screenshots and accompanying explanations..." http://www.impressivewebs.com/space-round-css3-background/ The Shapes of CSS By css-tricks. "All of the below use only a single HTML element. Any kind of CSS goes, as long as it's supported in at least one browser..." http://css-tricks.com/examples/ShapesOfCSS/ When Visitors Print - About That Print Stylesheet By Tim Connell. "Grab yourself a beverage, hit print and read about the simple things that make a big difference when visitors print..." http://designfestival.com/when-visitors-print-about-that-print-stylesheet/ CSS3 Properties, Values and Browser Support By Estelle Weyl. "Below is every most CSS3 Properties, all the possible values for that property, and the support for each property value from grade-A browsers..." http://www.evotech.net/blog/2010/02/css3-properties-values-browser-support/ +03: DREAMWEAVER. Understanding HTML5 Semantics - Part 2, Document Structure and Global Attributes attributes By Stephanie (Sullivan) Rewis. "Understand the differences between the HTML4 and HTML5 document structure, including the addition of new global attributes." http://www.adobe.com/devnet/dreamweaver/articles/understanding-html5-semantics-pt2.html Understanding HTML5 Intelligent Forms - Part 1: New Input Elements By David Powers. "In this first part of a two-part tutorial, I'll describe the new input elements and the <datalist> element, which allows you to suggest options for a text input field. In Part 2 (coming soon), you'll learn about the HTML5 form attributes...." http://www.adobe.com/devnet/dreamweaver/articles/html5-forms-pt1.html +04: EVALUATION & TESTING. Try to Be a Test User Sometime By Jakob Nielsen. "In pilot studies, you can occasionally relax the need for real users and let members of your own team serve as test participants. It's good for them." http://www.useit.com/alertbox/being-a-test-user.html +05: EVENTS. Do-It-Yourself Usability Testing - The Workshop September 7, 2011 in Washington, DC, U.S.A. September 27, 2011 in Seattle, Washingon, U.S.A. October 5, 2011 in London, England, United Kingdom http://sensible.com/workshops.html EuroIA September 22-23, 2011. Prague, Czech Republic http://www.euroia.org/ Axure Basic Training Class September 24, 2011. Marina Del Rey, California, U.S.A. http://uxconsultant.com/AxureTraining.html Etre Get Together October 3-5, 2011. London, England, United Kingdom http://events.etre.com/ +06: MISCELLANEOUS. Ethan Marcotte Interview - The Way of Responsive Web Design By William Channer. "Ethan Marcottee explains responsive web design. He also takes us through his own process to building a responsive site which includes applying media queries and designing for the mobile." http://www.dormroomtycoon.com/ethan-marcotte-responsive-web-design-interview-the-way-of-responsive-web-design-design-interview/ +07: NAVIGATION. Re-tabulate By Jeremy Keith. "Right after I wrote about combining flexbox with responsive design-to switch the display of content and navigation based on browser size-I received an email from Rapha‘l Goetter. He pointed out a really elegant solution to the same use-case that makes use of display:table." http://adactio.com/journal/4780/ +08: STANDARDS, GUIDELINES & PATTERNS. Stephanie Sullivan Rewis and Greg Rewis - What Designers Need to Know About HTML5 and CSS3 (Podcast) By Sean Carmichael. "The introduction of CSS3 and HTML5 brings with it a host of new capabilities. With most modern browsers supporting CSS3 and HTML5, implementing them into your designs is becoming easier. Understanding what is now possible with these new standards can help you create better designs more efficiently and effectively than ever before..." http://www.uie.com/brainsparks/2011/08/12/stephanie-and-greg-rewis-html5-and-css3/ HTML5 - Another Postcard from the Trenches By John Foliot. "...There is a lot of questions, confusion, and out-right mis-information surrounding HTML5 today. Over the next 90 minutes I hope to address these questions, and more..." http://stanford.edu/group/accessibility/cgi-bin/presentations/postcard2/ HTML5 And The Document Outlining Algorithm By Derek Johnson. "...The document outlining algorithm is a mechanism for producing outline summaries of Web pages based on how they are marked up. Every Web page has an outline, and checking it is easy using a really simple free online tool, which we'll cover shortly..." http://coding.smashingmagazine.com/2011/08/16/html5-and-the-document-outlining-algorithm/ HTML5 Forms Input Types, Attributes and New Elements - Demos, Tips and Tricks By Robert Nyman. "...There are basically five areas of improvements when it comes to form features in HTML5..." http://robertnyman.com/2011/08/16/html5-forms-input-types-attributes-and-new-elements-demos-tips-and-tricks/ W3C Works to Speed Web Standard Creation By Stephen Shankland. "The World Wide Web Consortium has begun its effort to speed its processes for standardizing Web technology..." http://news.cnet.com/8301-30685_3-20092839-264/w3c-works-to-speed-web-standard-creation/ 6 Best Practices for Marking up Your HTML5 By Estelle Weyl. "There are several coding rules required for XHTML that were optional or even unsupported in HTML 4. While HTML5 supports both coding formats, here are some non-required best practices.." http://www.standardista.com/6-best-practices-for-marking-up-your-html5 +09: USABILITY. Use Words Your Readers Understand By Rachel McAlpine. "Use the vocabulary of your reader. That's a key factor in plain language..." http://contented.com/contented/2011/writing-tip-use-words-your-readers-understand/ 5 Principles of User-Centered Interface Design By Adrian Jones. "...I've outlined below 5 principles of user-centered interface design, principles to help our websites and applications keep us on track..." http://designfestival.com/5-principles-of-user-centered-interface-design/ [Section one ends.] ++ SECTION TWO: +10: 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.]