+++ WEB DESIGN UPDATE. - Volume 13, Issue 03, July 17, 2014. An email newsletter to distribute news and information about web design and development. ++ISSUE 03 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: DRUPAL. 04: EVALUATION & TESTING. 05: EVENTS. 06: JAVASCRIPT. 07: MISCELLANEOUS. 08: PHP. 09: STANDARDS, GUIDELINES & PATTERNS. 10: TOOLS. 11: USABILITY. SECTION TWO: 12: What Can You Find at the Web Design Reference Site? [Contents ends.] ++ SECTION ONE: New references. +01: ACCESSIBILITY. Did Someone Say Map? By Gian Wild. "The important things you need to do to make a map accessible is..." http://www.gianwild.com/2014/07/did-someone-say-map/ Think Your Mobile App can Avoid the ADA? Well, Think Again... By Kelley Drye, et al. "The Department of Justice continues to aggressively pursue its enforcement agenda when it comes to ensuring that websites are accessible to persons with disabilities under the Americans with Disabilities Act..." http://www.lexology.com/library/detail.aspx?g=2fdca4f1-47f6-4fa6-97c1-95c757e6fb91 Provide Text Descriptions to Identify Required Fields Left Blank By Denis Boudreau. "Make sure required fields that were not completed are identified using a text description..." http://dboudreau.tumblr.com/post/76386944176/provide-text-descriptions-to-identify-required-fields Provide Meaningful Section Headings to Every Section of a Document By Denis Boudreau. "Make sure every single section of a document starts with a meaningful section heading..." http://dboudreau.tumblr.com/post/91652667467/provide-meaningful-section-headings-to-every-section-of More Tips for Creating Accessible Forms By Kate Bradbury. "Following on from a blog post written about rules for creating accessible forms, I am going to be providing more tips to help you make your forms more accessible..." http://www.nomensa.com/blog/2014/more-tips-for-creating-accessible-forms/ Teach Your Browser New Tricks By Dirk Ginader. Dirk's slides from his Open Web Camp presentation. http://www.slideshare.net/ginader/2014-0712teachyourbrowsernewtricks 7 Resources That Will Improve Your Training Program's Accessibility By Talance. "Talance's courses are always built for standards in accessibility, but the reason we take the extra care and precautions isn't necessarily clear. The following resources will help program directors understand what's so important about making courses available to everyone, along with some tips to improve what you offer..." http://talance.com/blog/2014/06/10/7-resources-that-will-improve-your-training-programs-accessibility/ Accessibility Developer Guidelines By International Business Machines (IBM). "Accessibility, as it pertains to information technology (IT), is about removing barriers that inhibit the access of certain groups, including people with disabilities, mature users, and non-native language learners. When you design or modify software or hardware to allow access by the greatest number of people, you make it accessible. " http://www-03.ibm.com/able/guidelines/index.html Writing for the Web #6: Freeing your Content from HTML Tables Used for Layout By Linnea Ann Williams. "...people sometimes (especially in the recent past) have used tables to put content side-by-side or add spacing around information, or a myriad of other design reasons. This is a misuse of tables in HTML and is a no-no for accessibility and basic web quality standards..." https://swsblog.stanford.edu/blog/writing-web-6-freeing-your-content-html-tables-used-layout Accessibility is Good for the Planet By Nicolas Hoffmann. "Preserving environment through Web accessibility? Unusual idea, even possibly incongruousÉ Yet, not so much if one realises that some of the flagship good practices in accessibility can reduce the carbon footprint of a Website..." http://openweb.eu.org/articles/accessibility-is-good-for-the-planet Businesses Nationwide Hit By Wave of Lawsuits Alleging Inaccessible Websites By Seyfarth Shaw. "In the past month, we have seen an onslaught of case filings and demand letters threatening lawsuits from private plaintiffs alleging that retailers, colleges, and other businesses denied blind individuals access to the businesses' goods and services by having inaccessible websites or mobile applications..." http://www.adatitleiii.com/2014/07/businesses-nationwide-hit-by-wave-of-lawsuits-alleging-inaccessible-websites/ +02: CASCADING STYLE SHEETS. Recreate Informative Images Using HTML and CSS Instead By Denis Boudreau. "Make sure none of the informative content in the page is provided in images..." http://dboudreau.tumblr.com/post/91752548227/recreate-informative-images-using-html-and-css-instead CSS Summit 2014 - Making Your Site Printable By Deborah Edwards-Onoro. "We're promoting our responsive web designs, but forgetting something that dates back more than a decade before responsive design, says Adrian Roselli, author and vice president at Algonquin Studios..." http://www.lireo.com/css-summit-2014-making-websites-printable/ Making Your Site Printable By Adrian Roselli. Adrian's "Making Your Site Printable" CSS Summit presentation slides. http://blog.adrianroselli.com/2014/07/css-summit-2014-slides-making-your-site.html CSS Pattern Library By Russ Weakley. Russ' CSS pattern library CSS Summit presentation slides. http://www.slideshare.net/maxdesign/css-pattern-libraries Inheriting Box-Sizing Probably Slightly Better Best-Practice By Chris Coyier. "I'm a big fan of resetting box-sizing to border-box, so much that we have a special day of the year around here. But there is a little adjustment to setting it that seems like a pretty good idea..." http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ Authoring Critical Above-the-Fold CSS By Ben Edwards. "Google PageSpeed Insights and my web pages; it was a match made in heaven, until things changed..." http://css-tricks.com/authoring-critical-fold-css/ 'Native Experience' vs Styling Select Boxes By Bruce Lawson. "...why this urge to re-style page elements that end-users are familiar with? You'll be shocked to learn that I'm not actually trained as a designer - so what am I failing to understand? Or is it that we love native look and feel, except when we don't?" http://www.brucelawson.co.uk/2014/native-experience-vs-styling-select-boxes/ CSS Shapes - Breaking the Rectangular Design Shackles By Patrick Catanzariti. "The capabilities of HTML5 and CSS3 completely outshine what we could do on the web just five years ago. The CSS Shapes Module Level 1 specification has the potential to break us out of the rectangular limitations of the web and transform web design to new heights..." http://www.sitepoint.com/css-shapes-breaking-rectangular-design/ +03: COLOR. Design and Accessibility - Use of Colour By Gian Wild. "The most important thing to remember when it comes to designing an accessible web site, app or interface is colour contrast. This is the kind of thing that needs to be picked up in the design, and there are a couple of ways to do it." http://www.gianwild.com/2014/07/design-and-accessibility-use-of-colour/ +04: EVALUATION & TESTING. Affirming the Consequent By Karl Groves. "Today I came across a post by Simon Harper titled Web Accessibility Evaluation Tools Only Produce a 60-70% Correctness which is essentially a response to my earlier critique of a seriously flawed academic paper...The implication from this paper is that because tools do not provide complete coverage, they should not be used. This is preposterous and, I believe, born from a lack of experience outside of accessibility and a lack of experience in a modern software development environment...Perhaps what we need most in terms of avoiding an 'over-reliance' on tools is for people to stop treating them like they're all-or-nothing." http://www.karlgroves.com/2014/07/10/affirming-the-consequent/ Datasets Employed in the Paper 'Benchmarking Web Accessibility Evaluation Tools: Measuring the Harm of Sole Reliance on Automated Tests' By Markel Vigo. "As the first author of this terrible paper I'm not going to rebut every single accusation of "serious flaws" and "obvious bias', apparently there are too many. The paper speaks for itself: we do an exercise of deductive reasoning, we make some assumptions, we describe our methods and protocols, we don't overstate and we were very careful in contextualising the outcomes and limitations of the study..." http://www.markelvigo.info/ds/bench12/ Website Accessibility Conformance Evaluation Methodology (WCAG-EM) 1.0 By Eric Velleman and Shadi Abou-Zahra, editors. "This document provides guidance on evaluating how well websites conform to the Web Content Accessibility Guidelines (WCAG) 2.0. It describes a procedure to evaluate websites and includes considerations to guide evaluators and to promote good practice. It does not provide instructions for evaluating web content feature by feature, which is addressed by WCAG 2.0 success criteria. This document is one of a series of informative W3C/WAI resources about Evaluating Websites for Accessibility that complement the WCAG 2.0 Documents. It does not define additional WCAG 2.0 requirements nor does it replace or supersede them in any way..." http://www.w3.org/TR/WCAG-EM/ A Roadmap To Becoming An A/B Testing Expert By Kevin Holesh. "A/B testing, also known as split testing, is the method of pitting two versions of a landing page against each other in a battle of conversion. You test to see which version does a better job of leading visitors to one of your goals, like signing up or subscribing to a newsletter. You can test two entirely different designs for a landing page or you can test small tweaks, like changes to a few words in your copy..." http://www.smashingmagazine.com/2014/07/11/roadmap-to-becoming-an-a-b-testing-expert/ 5 Variables to Manage in a Comparative Usability Study By Jeff Sauro. "One of the primary goals of a comparative study is to understand which product or website performs the best or worst on usability metrics such as completion rates or perceptions of usability..." http://www.measuringusability.com/blog/comparative-variables.php +05: EVENTS. SmashingConf December 9-12, 2014. Whistler, Canada http://smashingconf.com/whistler-2014/ +06: JAVASCRIPT. Expanding the Use of the aria-haspopup Property By Sam Joehl. "The WAI-ARIA 1.0 Specification adopted by the W3C currently limits use of the aria-haspopup attribute to context menus and sub-level menus. It also states that..." https://www.ssbbartgroup.com/blog/2014/07/15/expanding-the-use-of-the-aria-haspopup-property/ +07: MISCELLANEOUS. Why Do So Many Responsive Sites Look The Same? By Steven Bradley. "Do you think too many responsive sites look the same? It seems to be a very common perception. If you do think they look alike, have you thought about why? Is it something inherent in responsive web design or are there other reasons?..." http://www.vanseodesign.com/web-design/responsive-sites-look-the-same/ All Code Is Not Equal - on Research and Production Code By Jens O Meiert. "Web development is at a point at which we need to make more fundamental distinctions..." http://meiert.com/en/blog/20140716/research-and-production/ +08: PHP. Unfashionably Profitable By Rachel Andrew. "...It's important that we, as professionals, are aware of new tools and techniques. It's important to keep at least an overview of what is on the horizon, otherwise we run the risk of sticking to older methods because that is all we know, or because we are afraid of change. What I do advocate though is taking great care about diving into the latest shiny techniques when it comes to your product. There are products to be built and profit to be made when you turn your focus to your real customers, who tend to care more about reliability and less about what is fashionable." http://www.rachelandrew.co.uk/archives/2013/10/17/unfashionably-profitable/ +09: STANDARDS, GUIDELINES & PATTERNS. Native Versus Web - A Moment In Time By Greg Cox. "...Put differently, the web represents independence from platform owners. It offers incredible freedom to build what you to want build, and to ship when you are ready to ship, without any gatekeepers. While I love my native apps today, I believe in the long term potential of this freedom. Other problems that native app stores solve today - and there are many, like discoverability, security and peace of mind - will be solved on the web in ways that won't require a platform overlord." http://expletiveinserted.com/2014/07/10/native-versus-web-a-moment-in-time/ +10: TOOLS. Longdesc Chrome Extension By Dirk Ginader. "Making the Longdesc content available to users without assistive technologies." https://chrome.google.com/webstore/detail/longdesc/apfomgoblcegnecnacnjdpaemlddlkdb ARIA Validator Chrome Extension By Rick Brown. "Scans page for WAI-ARIA implementation issues. Not an HTML5 validtor, just ARIA and nothing else." https://chrome.google.com/webstore/detail/aria-validator/oigghlanfjgnkcndchmnlnmaojahnjoc How to Check Broken Links on Your Website By Deborah Edwards-Onoro. "...Whatever the reason, you want to stay on top of broken links. And the best way to do that is with a link checker..." http://www.lireo.com/check-broken-links-on-your-website/ +11: USABILITY. Direct Access vs. Sequential Access in User Interface Design By Raluca Budiu. "In interface design favor direct access to the users preferred item instead of forcing users to go through your content in a serial order." http://www.nngroup.com/articles/direct-vs-sequential-access/ Behold, the Fold By Sophie Shepherd. "If you're in the web industry and reading this article, you're probably thinking, 'Over halfway through 2014 and she's writing about the fold on the web! I thought we settled this!' But, the existence of the fold is still something that gets debated on many of our projects." http://cognition.happycog.com/article/behold-the-fold Usability Tip - Interfaces Need Rhythm By Tammy Guy. "The overall presentation of a site must be clean and professional in order to gain user's trust..." http://uxmag.com/articles/usability-tip-interfaces-needs-rhythm [Section one ends.] ++ SECTION TWO: +12: 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 Drupal Information. http://www.d.umn.edu/itss/training/online/webdesign/drupal.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 HTML Information. http://www.d.umn.edu/itss/training/online/webdesign/html.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.]