+++ WEB DESIGN UPDATE. - Volume 12, Issue 31, January 24, 2014. An email newsletter to distribute news and information about web design and development. ++ISSUE 31 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: EVENTS. 05: HTML5. 06: JAVASCRIPT. 07: MISCELLANEOUS. 08: NAVIGATION. 09: PHP. 10: USABILITY. SECTION TWO: 11: What Can You Find at the Web Design Reference Site? [Contents ends.] ++ SECTION ONE: New references. +01: ACCESSIBILITY. Accessible UX Principles and Guidelines By Whitney Quesenbery. "Designing a web for everyone combines good design and usability with accessibility to create inclusive design..." http://rosenfeldmedia.com/blogs/a-web-for-everyone/accessible-ux-principles-and-guidelines/ Recap - A Web For Everyone, Accessibility as a Design Challenge By Deborah Edwards-Onoro. "At today's A Web for Everyone: Accessibility as a Design Challenge webinar, hosted by O'Reilly Media and Rosenfeld Media, Whitney Quesenbery spoke about a new way of thinking about designing accessible user experiences: designing applications and websites in a way that everyone can use them..." http://www.lireo.com/recap-a-web-for-everyone-accessibility-as-a-design-challenge/ A Sweet Toggle Switch By Dennis Lembree. "In today's world of front-end web development, it's becoming increasingly complex to create custom interface elements. A common scenario is when your design team has required a non-standard web-based form component. This time it's a toggle switch which seems to be becoming more popular in the web design world. Winging the development of a toggle switch for a prototype is one thing, but for production a gracefully degradable and fully accessible version is required. Let's walk through the strategy and code for developing a sweet toggle switch. We'll create a control where the user can select either a 'checking' or 'savings' account..." https://www.paypal-engineering.com/2014/01/15/a-sweet-toggle-switch/ Personalized Web for the Assistive Technology By Alexander Surkov. "Sometimes the web authors provide a different content for screen readers than they do that for sighted users. That could be an additional content like 'skip to content' navigational links or set of landmarks to create a more reliable document structure. In some cases the web author might want to remove a content, for instance, duping links, or make extra tricks to keep the content accessible if, for example, the author gets out of the standard HTML. In ideal case of course the content is supposed to be quite the same but because of design issues and HTML imperfection it doesn't really happen. The web repletes with examples of special content for the assistive technology..." http://asurkov.blogspot.com/2014/01/personalized-web-for-assistive.html Don't Let Any Element Flash More Than Three Times Per Second By Denis Boudreau. "Individuals who have photosensitive seizure disorders (or photosensitive epilepsy) can have a seizure triggered by content, if the flashes are bright and large enough..." http://dboudreau.tumblr.com/post/73609207931/dont-let-any-element-flash-more-than-three-times-per Structure Tabular Information Using Table Markup By Denis Boudreau. "Information is considered tabular when a logical relationship between different data pieces is represented in columns and rows. In order for the logical relationships to be perceived, columns and rows must be recognizable by users. The relationship presented between information in data tables must be preserved even when users cannot see the table or the presentation format is changed..." http://dboudreau.tumblr.com/post/74173453663/structure-tabular-information-using-table-markup Avoid Purely Visual Display of Tabular Information By Denis Boudreau. "Make sure tabular information in a way that can be determined by assistive technology..." http://dboudreau.tumblr.com/post/73823572773/avoid-purely-visual-display-of-tabular-information Call for Review - WCAG 2.0 Techniques Draft Updates - January 2014 By Rakesh Paladugula. "The W3C WAI announces a Call for Review of updates to two supporting documents for Web Content Accessibility Guideline (WCAG) 2.0. *This is not an update to WCAG 2.0, which is a stable document..." http://www.maxability.co.in/2014/01/call-for-review-wcag-2-0-techniques-draft-updates-january-2014/ Airlines and Web Accessibility Litigation By Deque Systems. "In the past decade, there have been many lawsuits regarding web accessibility, and the travel industry is no exception..." http://www.deque.com/airlines-web-accessibility-litigation +02: BOOKS. Horton, Sarah and Quesenbery, Whitney. A Web for Everyone, Rosenfeld Media, 2014. +03: CASCADING STYLE SHEETS. REMs And Viewport Measurements - Why You Shouldn't Use Them Yet By Steven Bradley. "Designing for the web means designing flexibly. It means dropping absolute measurements and adopting relative ones like em and %. There will be exceptions, but for most things you should be using relative measurements..." http://www.vanseodesign.com/css/rems-and-viewport-measurements/ CSS Regions Considered Harmful By Hakon Wium Lie. "Hakon Wium Lie is the father of CSS, the CTO of Opera, and a pioneer advocate for web standards. His last article in this magazine led directly to real fonts on the web. When Hakon speaks, whether we always agree or not, we listen. In today's post, Hakon shares his opinion on CSS Regions..." http://alistapart.com/blog/post/css-regions-considered-harmful +04: EVENTS. Beyond the Desktop - Orlando November 3-5, 2014. Orlando, Florida, U.S.A. https://bdconf.com/events/2014/Orlando/ +05: HTML5. HTML Explained in 123 Tweets: The Google #htmltuesday Archive By Jens O. Meiert. "Did you know that Google's Webmaster Team tweeted short statements about all HTML elements, every week, for two and a half years? It was called '#htmltuesday' and ran from 2011 to 2013..." http://meiert.com/en/blog/20140121/htmltuesday/ 10 HTML Tags You May Not Be Using By Aurelio De Rosa. "...In this article, I'll show you 10 HTML tags you may not be using or maybe even aren't yet aware of that help to increase the semantics and maintainability of your web pages..." http://www.sitepoint.com/10-html-tags-not-using/ +06: JAVASCRIPT. Accessible Coverage Test Reporting for JavaScript By Dylan Barrell. "If you have been reading recent postings, you will know I have been working a lot on JavaScript testing, in particular, coverage tests. As with most development tools and Web applications, most of the tools I could find did not generate accessible output. So while working on the gulp-coverage plugin for the Gulp Node.js task system, I decided to ensure that the HTML reports are totally accessible and am pleased to announce, version 1 of the accessible HTML coverage reports. In order to get this functionality, you will have to ensure that you have version 0.0.11 or higher of the gulp-coverage plugin..." http://unobfuscated.blogspot.com/2014/01/accessible-coverage-test-reporting-for.html A Dive Into Plain JavaScript By Viljami S. "While I've worked over a decade building various websites, it has only been the past 3 years that I've started learning more on how to work with plain JavaScript, instead of using jQuery always as the starting point..." http://blog.adtile.me/2014/01/16/a-dive-into-plain-javascript/ The New Operator Implemented in JavaScript By Axel Rauschmayer. "Code snippet - this is roughly how you would implement the new operator in JavaScript..." http://www.2ality.com/2014/01/new-operator.html +07: MISCELLANEOUS. Dealing With Workaholism On Web Teams By Yiannis Konstantakopoulos. "Workaholism is often confused with hard work. Some people who work on the Web seem not only to disregard its dangers, but to actively promote it. They see it as a badge of honor-but is it really? On the contrary, it's a serious issue that can damage Web teams." http://www.smashingmagazine.com/2014/01/20/dealing-with-workaholism-on-web-teams/ +08: NAVIGATION. Provide Links that Meaningfully Describe Their Purpose By Denis Boudreau. "Make sure the purpose of links can be determined from the text label of each link..." http://dboudreau.tumblr.com/post/73776496165/provide-links-that-meaningfully-describe-their-purpose Sparkicons - Can We Make Better Links? By Georgina Laidlaw. "Around this time last year, Mark Boulton proposed a new way of communicating information about linked content online. He called his idea sparkicons, building on Edward Tufte's description of sparklines, and pointed to some examples on large content-rich, link-heavy sites: Wikipedia and the BBC. He also created some examples of his own..." http://www.sitepoint.com/sparkicons-can-we-make-better-links/ +09: PHP. What is Refactoring PHP Code? By Stefan Mischook. "For whatever reasons, I am in the mood to write...and I have a video too! So, what the heck is code refactoring?..." http://www.killerphp.com/articles/what-is-refactoring-php-code/ +10: USABILITY. University Websites - Top 10 Design Guidelines By Katie Sherwin. "Effective university websites can increase conversions, strengthen institutional credibility and brand, improve user satisfaction, and save time and money." http://www.nngroup.com/articles/university-sites/ Maps and Location Finders on Mobile By Aurora Bedford. "Maps of business locations may be more visually appealing than a simple list view, but they introduce too many usability issues on mobile devices." http://www.nngroup.com/articles/mobile-maps-locations/ Scrolling is Easier Than Clicking By Joshua Porter. A small observation with huge implications: scrolling is easier than clicking..." http://bokardo.com/archives/scrolling-easier-clicking/ 10 Tougher Tasks to Reduce Page Weight By Craig Buckler. "In my previous article, 10 Quick and Easy Fixes to Reduce Page Weight, I discussed basic techniques that slim your site without fundamentally changing code. If your pages are still obese, there are more drastic dieting options you can contemplate..." http://www.sitepoint.com/10-tougher-tasks-reduce-page-weight/ By What is Flat Design (and how do I do it)? By Gabrielle Gosha. "Flat design, while not a new trend is still a refreshing take on design, whether you are a fan of it or not. There are some issues that flat design poses but fans of minimalism and simplicity will definitely appreciate what the trend has to offer and hopefully will find a workaround. Even if you just want to take a break from the more detailed work often seen in design then you should definitely give the trend a try..." http://www.sitepoint.com/understanding-flat-design/ [Section one ends.] ++ SECTION TWO: +11: 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.]