+++ WEB DESIGN UPDATE. - Volume 12, Issue 20, November 8, 2013. An email newsletter to distribute news and information about web design and development. ++ISSUE 20 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: EVALUATION & TESTING. 04: HTML5. 05: INFORMATION ARCHITECTURE. 06: JAVASCRIPT. 07: MISCELLANEOUS. 08: TOOLS. 08: USABILITY. SECTION TWO: 09: What Can You Find at the Web Design Reference Site? [Contents ends.] ++ SECTION ONE: New references. +01: ACCESSIBILITY. Displaying Multiple Errors on a Form By Jeff Smith. "In this week's Best Practice of the Week (BPOW), we show you how to handle displaying multiple errors on a form." http://simplyaccessible.com/bpow/error-summary/ Electronic Accessibility (For Web Developers) By The University of California. "Anyone who codes static web pages or dynamic web applications must ensure that the content is accessible to individuals with disabilities, including visually and hearing impaired people. The following guidelines represent the most basic steps for improving the accessibility of websites and reflect good development standards. See Advanced tips for guidelines on more complex topics." http://www.ucop.edu/electronic-accessibility/web-developers/index.html Electronic Accessibility (For Content Developers) By The University of California. "Anyone developing content (text, images, video, etc.) for inclusion in online publications or systems must ensure that all the necessary elements are provided to make the content accessible to individuals with disabilities, including visually and hearing impaired people. http://www.ucop.edu/electronic-accessibility/content-developers/index.html Views of a Faculty Member - Accessibility From Where I Stand By Kimberly Snow. "We invited Kimberly Snow from The Department of Special Education and Rehabilitation at Utah State University to write a guest blog post. She wrote on her her experiences with accessibility as a faculty member." http://ncdae.org/blog/accessibility-from-where-i-stand/ Presentation Template - Making the Case for Web Accessibility By Jonathan Chetwynd. "We have had several requests from folks who would like help creating content they could use as they work to obtain buy-in from others at their institution (e.g., Administrative decision makers, faculty and staff)..." http://ncdae.org/blog/presentation-template/ Help Ensure Online Course Content is Accessible to Students With Disabilities By Disability Compliance for Higher Education. "Among students with certain disabilities, distance learning is often preferable to brick-and-mortar courses for a variety of reasons. For one, those with social disorders don't have to interact with others in person. And those with mental health problems who fear being stigmatized if others learn about their conditions don't have to worry as much when they take online classes..." http://www.disabilitycomplianceforhighereducation.com/Article-Detail/help-ensure-online-course-content-is-accessible-to-students-with-disabilities.aspx Word Press Accessibility By Joe Dolson. "WP Accessibility provides fixes for common accessibility issues in your WordPress site..." http://wordpress.org/plugins/wp-accessibility/ +02: CASCADING STYLE SHEETS. Hidden Label Firefox Bug By Gez Lemon. The standard method for hiding text visually to retain a clean design but provide context for screen reader users is to use the CSS clip technique. Due to browser bugs with the clip property, other declarations are used to make this technique work correctly across different browsers. http://juicystudio.com/article/hidden-label-firefox-bug.php Using 'aria-labelledby' as a Styling Hook By Jamie Hill. "...and then stumbled on the aria-labelledby attribute. It turns out that this makes for a perfectly semantic styling hook..." http://thelucid.com/2013/10/30/using-aria-labelledby-as-a-styling-hook/ Think Modularly By Bridget Stewart. "Think modularly: standardize repeated patterns in the HTML and CSS for greater flexibility and easier maintenance." http://webstandardssherpa.com/reviews/think-modularly 13 Scary Cool Things I Learned at CSS Dev Conf 2013 By Andrew Jones. "Last week, I attended CSS Dev Conference, the 'conference devoted solely to CSS, the design language of the web'..." http://blog.bignerdranch.com/4203-13-scary-cool-things-i-learned-at-css-dev-conf-2013/ Which CSS Measurements To Use When By Dudley Storey. "What follows is a list of suggestions, not absolute rules. If you have a differing opinion or working practice (and a rationale to back it up), please share in the comments..." http://demosthenes.info/blog/775/Which-CSS-Measurements-To-Use-When Advanced Layout Made Easy with CSS Regions By Beth Dakin and Mihnea-Vlad Ovidenie. "CSS regions are an exciting technology that make it easier than ever to create rich, magazine-like layouts within web content. Regions have been under development in WebKit for a while now, and we're delighted to tell you that they are available for use in Safari on iOS 7, Safari 7 on Mavericks, and Safari 6.1 on Mountain Lion..." https://www.webkit.org/blog/3078/advanced-layout-made-easy-with-css-regions/ Killer Responsive Layouts With CSS Regions By C.J. Gammon. "As Web designers, we are largely constrained by the layout features available to us. Content placed inside a container will often naturally extend the container vertically, wrapping the content. If a design requires elements to remain a certain height, then our options are limited. In these cases, we can only add a scroll bar or hide the overflow. The CSS Regions specification provides a new option..." http://coding.smashingmagazine.com/2013/11/05/killer-responsive-layouts-with-css-regions/ +03: EVALUATION & TESTING. How to Get the Most From Your Website A/B Testing By Mitch Schneider. "In today's conversion-driven digital markets, A/B testing is a fundamental tool that takes the guesswork out of website optimization. It is a great way to quickly try to improve the design and performance of your web pages." http://blog.clicktale.com/2013/11/06/how-to-get-the-most-from-your-website-ab-testing/ +04: HTML5. Cite and Blockquote - Reloaded By Steve Faulkner. "The definitions of the blockquote and cite elements in the HTML specification have recently been updated. This article explains what the changes mean for developers..." http://html5doctor.com/cite-and-blockquote-reloaded/ +05: INFORMATION ARCHITECTURE. Information Architecture - Beyond Web Sites, Apps, and Screens By Nathaniel Davis. "I recently asked the Twitterverse to suggest some information architecture topics that would be worth discussing in my UXmatters column. In response, I received a single tweet from @ToonDoctor (Toon)" http://www.uxmatters.com/mt/archives/2013/11/information-architecture-beyond-web-sites-apps-and-screens.php +06: JAVASCRIPT. Perpetuating Terrible JavaScript Practices By Chris Heilmann. "...All in all, I am really disappointed to see code like this in a brand new book about bleeding edge technology using JavaScript. This is not by design, this is plain and simple laziness and bad editing. JavaScript has become incredibly powerful and is used in a lot of cases for business critical functionality. In a closed environment like a SmartTV there is nothing at all wrong about that. What is wrong though is educating new developers to write code that was maybe needed to support IE4 or Netscape2 and even back then was the lazy and hard to maintain way of doing it. If you write some instructions or tutorials, please, for the sake of the quality of the next generation of developers..." http://christianheilmann.com/2013/10/31/perpetuating-terrible-javascript-practices/ +07: MISCELLANEOUS. Responsive Web Design - Relying Too Much on Screen Size By Luke Wroblewski. "As people continue to go online using an ever increasing diversity of devices, responsive Web design has helped teams build amazing sites and apps that adapt their designs to smartphones, desktops, and everything in between. But many of these solutions are relying too much on a single factor to make important design decisions: screen size..." http://www.lukew.com/ff/entry.asp?1816 Responsive Design, Screens, and Shearing Layers By Ethan Marcotte. "Luke Wroblewski wrote a blog entry that's been rattling around in my head for a couple days now. In it, he raises some concerns he has about responsive design's 'over-reliance' on screen width. Go check it out, if you're interested, but I'll excerpt a bit:.." http://unstoppablerobotninja.com/entry/responsive-web-design-screens-and-shearing-layers/ On Using Browser Viewports to Understand Screens By Luke Wroblewski. "The ever eloquent Ethan Marcotte published a reply to my article about relying too much on screen size in responsive Web design. I couldn't be happier to see him blogging again and truthfully I kind of miss the good old days of back and forth blog posts about important Web design issues. So here we go..." http://www.lukew.com/ff/entry.asp?1817 +08: TOOLS. Using the WAVE Toolbar (Video) By Easter Seals Crossroads. YouTube video outlines how to use the WAVE toolbar (http://wave.webaim.org/toolbar) to evaluate web site accessibility. http://www.youtube.com/watch?v=7l75f9Jzweg +09: USABILITY. Explicitly State the Difference Between Options By Jakob Nielsen. "When the key difference(s) between UI choices are implied or buried, users often select the wrong option or miscomprehend the features." http://www.nngroup.com/articles/explicit-differences/ Form Design Quick Fix - Group Form Elements Effectively Using White Space By Marieke McCloskey. Improve the layout of your online forms by placing form labels near the associated text field and by grouping similar fields. http://www.nngroup.com/articles/form-design-white-space/ [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.]