+++ WEB DESIGN UPDATE. - Volume 13, Issue 05, July 31, 2014. An email newsletter to distribute news and information about web design and development. ++ISSUE 05 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: COLOR. 04: EVALUATION & TESTING. 05: EVENTS. 06: HTML5. 07: JAVASCRIPT. 08: MISCELLANEOUS. 09: NAVIGATION. 10: TOOLS. 11: USABILITY. 12: XML. SECTION TWO: 13: What Can You Find at the Web Design Reference Site? [Contents ends.] ++ SECTION ONE: New references. +01: ACCESSIBILITY. Accessibility and Security By Nicolas Steenhout. "Did you hear about the double arm amputee who was refused service at a bank because he could not provide a thumbprint? Did you hear about the online petition to increase services for blind folks, that blind folks couldn't sign because of CAPTCHA? These are examples of security practices that cause barriers to people with disabilities. We don't set out to create barriers, but some policies or code can have unintended consequences. Security can create barriers to access for users, with or without disabilities. However security doesn't have to reduce accessibility... http://incl.ca/accessibility-and-security/ The Accessibility Tree - A Training Guide By Bryan Garaventa. "... As a developer, it's taken me many years to figure out that there are several very important layers to accessibility for web technologies, and how to recognize them during the process of development. It took my involvement with the WAI Protocols and Formats Working Group to really cement these concepts into place for me, and to put things into perspective. It really should not have to be this difficult though, not for me, or anybody else. This is especially true for developers, upon whose proverbial head all accessibility issues eventually land. So my goal with writing this, is to provide a single comprehensive explanation of what these layers of accessibility are, and how developers can recognize them during the process of development, so that accessible web technologies will be easier to diagnose and build in the future..." http://whatsock.com/training/ Modal Windows - 10 Accessibility Tips By Natalie Collins. "...Because of their usefulness modal windows are being utilised more frequently in website user interface design. However, and despite their handiness, modal windows can have serious accessibility issues associated with them if they are designed incorrectly..." http://www.accessiq.org/news/news/2014/07/modal-windows-10-accessibility-tips Conversations About Social Media Accessibility By Jennifer Smith. "...don't let your messages miss a large and growing market of individuals with disabilities. Create content that contributes to improving the Web for everyone. It's time to move from awareness to action and progressively changing things for the better. Not just for the largest minority, but for all of us." http://danyablog.com/2014/07/11/conversations-about-social-media-accessibility/ Provide a Second Video Version Complete With Audio Description By Denis Boudreau. "Make sure videos are provided in two versions, one with audio description and one without..." http://dboudreau.tumblr.com/post/93013232652/provide-a-second-video-version-complete-with-audio Accessibility Standards, Cloud Computing and Innovation By Tracy Mitrano. "What difference does cloud computing make with regard to accessibility? As a governance, compliance, and matter of risk management, the answer is essentially 'no difference.' Accessibility is as much a compliance issue as privacy, security, and export control..." http://www.insidehighered.com/blogs/law-policy-and-it/accessibility-standards-cloud-computing-and-innovation Question About Touchscreens and Blind Users By Derek Featherstone. "Q: I just heard that touchscreen devices like the iPhone are really useful for blind users. What do I need to know?..." http://webstandardssherpa.com/ask-the-sherpas/touchscreens-and-blind-users 'Accessibility Ready' WordPress Themes By George Williams. "Long a fan of the content-management-system software WordPress, I'm encouraged and impressed by the developers who are working to make WordPress as accessible as possible to a wide variety of users (including people with disabilities)..." http://chronicle.com/blogs/profhacker/accessibility-ready-wordpress-themes/55683 +02: CASCADING STYLE SHEETS. Ten CSS One-Liners to Replace Native Apps By Hakon Wium Lie. "Hakon Wium Lie is the father of CSS, the CTO of Opera, and a pioneer advocate for web standards. Earlier this year, we published his blog post, 'CSS Regions Considered Harmful.' When Hakon speaks, whether we always agree or not, we listen. Today, Hakon introduces CSS Figures and argues their case..." http://alistapart.com/blog/post/ten-css-one-liners-to-replace-native-apps Fixed and Inflexible By Tyler Sticka. "Even before smartphones came along and dashed any hope for a 960-pixel-wide web, designers and organizations have struggled with the challenge of prioritizing and composing content that scrolls..." http://blog.cloudfour.com/fixed-and-inflexible/ Guide to Responsive-Friendly CSS Columns By Katy Decorah. "The following is a guest post by Katy Decorah (edited by Jason Morris). Katy was researching CSS columns and how they can work responsively, as there wasn't much information she could find out there on the subject. So, like a hero, she wrote it all up. Here's Katy..." http://css-tricks.com/guide-responsive-friendly-css-columns/ Full-Width Pinned Layouts with Flexbox By Zoe Mickley Gillenwater. "Learn how to use flexbox to pin two things to opposite ends of the viewport with a heading centered in between. Using media queries and flexbox's re-ordering capabilities, we can make this layout pattern even more responsive." http://zomigi.com/blog/full-width-pinned-layouts-with-flexbox/ 3.14 Things I Didn't Know About CSS (Video) By Mathias Bynens. "This talk will showcase a series of obscure CSS fun facts, such as CSS syntax gimmicks and quirks, weird tricks that involve CSS in one way or another, and security vulnerabilities that are enabled by (ab)using CSS in unexpected ways..." http://vimeo.com/100264064 +03: COLOR. Contrast Rebellion By Zoltan Gocza and Richard Gazdi. "...Because a website's content is primarily there to be read don't give your visitors a headache only because gray or any other low-contrast font color looked better on the design comps than black. Remember: Content does not equal illustration...Let's put an end to this low-contrast, light gray nonsense and use typography for its purpose: making text readable." http://contrastrebellion.com/ +04: EVALUATION & TESTING. How I Audit a Website for Accessibility By Marcy Sutton. "Client-side web applications like Distiller are growing in numbers. We love snappy, responsive user interfaces and JavaScript libraries that encourage separation of concerns. But without attention paid to keyboards and assistive technologies, our apps won't be usable by people with disabilities. Ideally, we would build with accessibility in mind from the beginningÉthat's definitely the best approach (and the most fun). But if you do find yourself working on a code-base with room for accessibility improvement, having a collection of best practices and testing tools will make it easier to get started..." http://substantial.com/blog/2014/07/22/how-i-audit-a-website-for-accessibility/ +05: EVENTS. Accessibility Summit September 10, 2014. Online http://environmentsforhumans.com/2014/accessibility-summit/ W3C HTML5 Training September 22, 2014 Start date. Online http://www.w3devcampus.com/html5-w3c-training/ W3C Responsive Web Design October 2, 2014 Start date. Online http://www.w3devcampus.com/responsive-web-design-w3c/ +06: HTML5. The Web Manifest Specification By Marcos Caceres and Bruce Lawson. "...Don't start coding for this stuff yet; it's still in flux and subject to change. We draw it to your attention as it's a statement of intent: Firefox, Opera and Google have been discussing this because we want the web to be able to compete with proprietary app platforms. The open web may not be too big to fail - but it's too important to fail." http://html5doctor.com/web-manifest-specification/ +07: JAVASCRIPT. What are Implicit ARIA Roles? By Virginia DeBolt. "For a while now, I've been seeing mentions of implicit ARIA roles as something web designers and developers should be aware of and know how to use..." http://www.webteacher.ws/2014/07/23/implicit-aria-roles/ Understanding Synchronous vs Asynchronous By Estelle Weyl. "To get a file or data from a server or issue a JavaScript command synchronously, we issue the command to get the file/data from the operating system or other JS function and we wait for the answer. In the meantime, our single browser UI thread is occupied. The server or Javascript cannot execute anything else. If our program is a web server and we get another request for a different file from a different user, our program cannot process that second request until the first file is read. This is why you need to be careful when you issue synchronous commands on a node server or in the JavaScript in your user's browser..." http://www.standardista.com/understanding-synchronous-vs-asynchronous/ +08: MISCELLANEOUS. [Video+Transcript]: The Web is Dead? - My talk at TEDx Thessaloniki By Christian Heilmann. "...All in all, apps to me are a step back to the time that I replaced with the internet. A time when software came in a consumable format without me knowing what's going on. In a browser, I can highlight part of the text, I can copy it into your email and send it to you. I can translate it. I can be blind and listen to a website. I can change things around. I can delete parts of it if it's too much content there. I can use an ad blocker if I don't like ads. On apps, I don't have any of that..." http://christianheilmann.com/2014/07/24/video-the-web-is-dead-my-talk-at-tedx-thessaloniki/ The Principles of Adaptive Design By Brad Frost. "...Of course there's a whole lot more to creating a great multi-device than fluid grids, flexible media, and media queries. The core tenets of responsive design are obviously important, and over the last few years they've helped the Web community better cope with the never-ending flood of Web-enabled devices. But those three ingredients are just the tip of the iceberg...." http://bradfrostweb.com/blog/post/the-principles-of-adaptive-design/ +09: NAVIGATION. Hey, You There - The Trouble with Audience-Based Navigation By Cath Richardson. "As you may have noticed, we've recently been hard at work developing and testing a new navigation for GOV.UK. In doing this, we've often asked ourselves 'why shouldn't we just say, in our navigation, who this particular piece of information is for?'. It seems so simple and user-focused. But whenever we've tested this audience-based navigation approach, it's run into problems." https://insidegovuk.blog.gov.uk/2014/07/18/hey-you-there-the-trouble-with-audience-based-navigation/ +10: TOOLS. Top 10 Tools for Better Understanding Users By Paul Boag. "On the first episode of season 10 we look at the top 10 tools for better understanding users. There really is no excuse not to test..." http://boagworld.com/season/10/episode/1001/ +11: USABILITY. Icon Usability By Aurora Bedford. "A user's understanding of an icon is based on previous experience. Due to the absence of a standard usage for most icons, text labels are necessary to communicate the meaning and reduce ambiguity." http://www.nngroup.com/articles/icon-usability/ A Definitive Guide to Sensible Form Validations By Laurie Hawkins. "Here is one of form validation error messages that made me laugh aloud" 'invalid last name. Please enter a valid last name'. The form (or the souls that coded that form) decided my last name is bad and imagine, they want me to build a valid last name too..." http://www.html-form-guide.com/best-practices/form-validations-definitive-guide.html +12: XML. Understanding SVG Coordinate Systems & Transformations (Part 1) - The viewport, viewBox, & preserveAspectRatio By Sara Soueidan. "SVG elements aren't governed by a CSS box model like HTML elements are. This makes positioning and transforming these elements trickier and may seem-at first glance-less intuitive. However, once you understand how SVG coordinate systems and transformations work, manipulating SVGs becomes a lot easier and makes a lot more sense. In this article we're going to go over three of the most important SVG attributes that control SVG coordinate systems: viewport, viewBox, and preserveAspectRatio." http://sarasoueidan.com/blog/svg-coordinate-systems/ Understanding SVG Coordinate Systems & Transformations (Part 2) - The transform Attribute By Sara Soueidan. "SVG elements can be transformed by scaling, translating, skewing, and rotating-much like HTML elements can be transformed using CSS Transforms. However, there are certain inevitable differences when it comes to the coordinate systems used and affected by these transformations. In this article we'll go over the SVG transform attribute and CSS property, covering how to use it, and things you should know about SVG coordinate system transformations..." http://sarasoueidan.com/blog/svg-transformations/ [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 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.]