+++ WEB DESIGN UPDATE. - Volume 10, Issue 52, June 21, 2012. An email newsletter to distribute news and information about web design and development. ++ISSUE 52 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: EVENTS. 05: INFORMATION ARCHITECTURE. 06: JAVASCRIPT. 07: MISCELLANEOUS. 08: NAVIGATION. 09: STANDARDS, GUIDELINES & PATTERNS. 10: TOOLS. 11: TYPOGRAPHY. 12: USABILITY. 13: XML. SECTION TWO: 14: What Can You Find at the Web Design Reference Site? [Contents ends.] ++ SECTION ONE: New references. +01: ACCESSIBILITY. The Case of the Missing alt Attribute By Joel Dolson. "...Of the 100 most common validation errors collected by W3C Love, a missing alt attribute comes it at number one - with almost double the occurrences of the next most common error..." http://www.joedolson.com/articles/2012/06/the-case-missing-alt-attribute/ How to Ensure You Pay More for Web Accessibility Than You Should By Derek Featherstone. "Here are our top 9 tips that help you ensure that you pay much more for web accessibility than you should. Because who doesn't want that, right?" http://simplyaccessible.com/article/pay-more/ Digital Accessibility - The Commercial Realities by Leonie Watson. "There's a lot of talk about how badly businesses do when it comes to digital accessibility, but little focus on why it really matters. The impact of not getting accessibility right is damaging to businesses, but the benefits of getting it right are very positive indeed..." http://www.biz-works.net/index.php5?&fl=y&pgid=bp&art=271 Response to 15+ Tips to Improve Web Accessibility By Dennis E. Lembree. "I gave feedback in the form of a comment for the article 15+ Tips to Improve Web Accessibility of a Website..." http://webaxe.blogspot.com/2012/06/response-to-15-tips-to-improve-web.html Federal District Court in Massachusetts First in Country to Hold that the Americans with Disabilities Act Applies to Website-Only Businesses By National Association of the Deaf. "Judge Denies Netflix's Motion for Judgment on the Pleadings and Allows Disability Civil Rights Case, National Association of the Deaf, et al. v. Netflix, Case No. 3:11-cv-30168, to Move Forward..." http://www.nad.org/news/2012/6/landmark-precedent-nad-vs-netflix An Introduction to WebVTT and By Ian Devlin. "...The introduction of WebVTT and the HTML5 element makes it much easier for web authors to make their video and audio more accessible to those who, for whatever reason, are unable to access the content in the way it is usually presented. Whilst browser support is still nascent, a number of JavaScript polyfills allow us to make our media more accessible now, in a way that will be understood by browsers once support for WebVTT increases..." http://dev.opera.com/articles/view/an-introduction-to-webvtt-and-track/ +02: CASCADING STYLE SHEETS. Beware of @import Rules When Concatenating CSS Files By Roger Johansson. "...if you use any @import rules they must precede all other rules in that file, as per the CSS 2.1 specification. So if any other than the very first of the CSS files you concatenate has an @import rule, the combined file will violate the specification...." http://www.456bereastreet.com/archive/201206/beware_of_import_rules_when_concatenating_css_files/ One, Two, or Three By Chris Coyier. "That's how many CSS files should be loaded on any website..." http://css-tricks.com/one-two-three/ CSS Variables By Stoyan Stefanov. "Weeee, CSS variables just landed in WebKit, this is pretty exciting..." http://www.phpied.com/css-variables/ CSS Variables - WebKit Brings the CSS Jackalope to Life By Scott Gilbertson. "The mythical beast known as the CSS Variable is about to be released into the wild. The WebKit team, which builds the browsing engine that powers both the Safari and Chrome web browsers, recently landed preliminary support for CSS Variables, which means variables will likely turn up soon in Chrome/Chromium and Safari nightly builds..." http://www.webmonkey.com/2012/06/css-variables-webkit-brings-the-css-jackalope-to-life/ Notes to an Agency Starting Their First Responsive Web Project By Chris Coyier. "This past week I talked with a design agency who was about to embark upon their first responsive web design project. It sounded rather app-like. They were interested in hearing about my experiences, what to expect, what the process is like or could be like, what the deliverables should be, things to watch out for, and things like that..." http://css-tricks.com/notes-agency-starting-their-first-responsive-web-project/ Responsive Web Design: Preserving Images' Aspect Ratio By Bruce Lawson. "...This is easily cured without trawling through the markup and removing HTML height attributes. Simply extend your img CSS so it reads img {max-width:100%; height:auto;} and aspect ratio is preserved." http://www.brucelawson.co.uk/2012/responsive-web-design-preserving-images-aspect-ratio/ New Repeating Background Image Options in CSS3 By Craig Buckler. "In CSS2.1, the background-repeat property had four options: no-repeat, repeat, repeat-x and repeat-y. While these are undoubtedly useful, they don't permit finer control over the repeating process and tiles will be clipped if they don't fit the container an exact number of times. CSS3 introduces two new options: space and roundÉ" http://www.sitepoint.com/css3-background-repeat-space-round/ CSS Object Model By Divya Manian. Until Test the Web Forward I had just a vague idea of what CSS Object Model does. So, it was awesome to hear from and learn about the CSS OM from the spec co-editor Glenn Adams..." http://nimbupani.com/css-object-model.html Classes? Where We're Going, We Don't Need Classes! By Heydon Pickering. "Classes, classes, classes everywhere. What if we don't need CSS classes at all?..." http://coding.smashingmagazine.com/2012/06/19/classes-where-were-going-we-dont-need-classes/ +03: DREAMWEAVER. Learn a CMS or Learn Dreamweaver? By Stefan Mischook. "Recently someone asked whether they should learn Dreamweaver OR whether should they jump into a CMS like Joomla or Wordpress..." http://www.killersites.com/blog/2012/learn-a-cms-or-learn-dreamweaver/ Advanced Design Template for jQuery Mobile By Chris Converse. "jQuery Mobile is a unified, HTML5-based user interface system for all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily theme-able design. Meanwhile, Adobe Dreamweaver CS6 features a streamlined workflow for creating a jQuery Mobile project. In this article, you will create a simple jQuery Mobile application with Dreamweaver CS6. The following video walks you through the features of this Dreamweaver template for jQuery Mobile..." http://www.adobe.com/devnet/dreamweaver/articles/dw-template-jquery-mobile.html +04: EVENTS. Usability Week 2012 Conference June 25-29, 2012 in Chicago, Illinois, U.S.A. July 23-27, 2012 in Toronto, Canada August 12-17, 2012 in Sydney, Australia September 23-28, 2012 in San Francisco, California, U.S.A. October 14-19, 2012 in London, England, United Kingdom http://www.nngroup.com/events/ Content Strategy for Mobile June 28, 2012. Online http://www.uie.com/events/virtual_seminars/content_for_mobile/ The Enterprise Mobile Revolution July 17, 2012. Sydney, Austrailia http://www.steptwo.com.au/seminars/enterprise-mobile World Usability Day November 8, 2012. Online http://www.worldusabilityday.org/ International Day of People with Disability December 3, 2012. Online http://www.idpwd.com.au/ +05: INFORMATION ARCHITECTURE. 7 Frequently Asked Questions on Card Sorting By Donna Spencer. "These frequently asked questions are found in Donna Spencer's book, Card Sorting - Designing Usable Categories. You'll find great examples and more detailed explanations to these questions and other card sorting related issues in the book." http://www.uie.com/articles/seven_questions/ +06: JAVASCRIPT. Rich Internet App Accessibility By Deque Systems. "Today we have a guest post from Ryan Hemphill and Bradley Momberger about Rich Internet App Accessibility. Both Ryan and Brad work for Cengage Learning - Ryan is a Senior User Experience Designer-Developer and Brad is a Senior Software Engineer, Front End Specialist. " http://www.deque.com/rich-internet-app-accessibility Taking a Flance at Aria-Flowto By Everett Zufelt. "...It is best to build pages in a clean semantic structure. As much as it is possible adding sections of complementary content within your main article content is a poor design decision. If, however, you are faced with a situation where this is necessary, using the aria-flowto property may improve the user experience for some of your site's visitors..." http://zufelt.ca/blog/taking-glance-aria-flowto Notes on Using ARIA By Steve Faulkner. "I have jotted down some notes on ARIA concepts and usage that may be useful for developers." http://www.paciellogroup.com/blog/2012/06/html5-accessibility-chops-using-aria-notes/ A Quick Introduction to WAI-ARIA By Russ Weakley. http://www.slideshare.net/maxdesign/a-quick-introduction-to-aria Stumbling On the Escalator By Christian Heilmann. Article about people forgetting basic principles of progressive enhancement. http://christianheilmann.com/2012/02/16/stumbling-on-the-escalator/ +07: MISCELLANEOUS. Why Should Higher Ed Rethink Content for Responsive Web Design? By Karine Joly. "In preparation for the Higher Ed Redesign Web Design Summit taking place next week (June 19-21, 2012), I had the pleasure to listen to Sara Wachter-Boettcher, the keynote, yesterday. Sara is one of the leading expert in content for responsive web design and is wrapping up a book to be published in a few months by Rosenfeld Media, Content Everywhere. I interviewed Sara a few weeks ago about the topic she will present about next Thursday but I thought you would also enjoy a short excerpt of her talk where she explains why it's important to rethink content for RWD. This excerpt was recorded during the rehearsal yesterday..." http://collegewebeditor.com/blog/index.php/archives/2012/06/15/why-should-highered-rethink-content-for-responsive-web-design/ Silvia Pfeiffer on "A New Type of Web" By Bruce Lawson. "The development of networked video will lead to 'a new type of web', predicts Silvia Pfeiffer, web video pioneer and consultant to Google. " http://www.netmagazine.com/interviews/silvia-pfeiffer-new-type-web John Foliot on the New Video Formats By Bruce Lawson. "W3C Invited Expert John Foliot explains the difference between TTML and WebVTT, and which one you should be using " http://www.netmagazine.com/interviews/john-foliot-new-video-formats Florian's Compromise By Mathew Marquis. "Florian joined the list by posting a brilliantly thought-out compromise between the two syntax patterns. I'd like to share my thoughts on this proposal here, as I feel it combines the strengths of srcset and picture in a practical and logical way. Let's begin by taking a look at the proposed syntax." http://www.w3.org/community/respimg/2012/06/18/florians-compromise/ Responsive Images With WordPress' Featured Images By Rachel McCollin. "In this article, we'll look at how to use WordPress' built-in featured images capability to deliver different-sized image files to different devices..." http://mobile.smashingmagazine.com/2012/06/14/responsive-images-with-wordress-featured-images/ +08: NAVIGATION. Prioritization and Visual Language in Navigation By Andy Montgomery. "Recently I contributed an article to the user experience industry website UX Booth. In short, the article discusses the importance of differentiation within navigation schemes and focuses on two techniques in particular: prioritization and visual language..." http://viget.com/inspire/prioritization-and-visual-language-in-navigation +09: STANDARDS, GUIDELINES & PATTERNS. The Cost of Performance, Part 2 Tag Cutting By Niels Matthijs. "...Next time you wonder whether to remove a html tag, think about its semantic or structural value rather than its css/javascript feasibility. Of course css and javascript restrictions might still affect the final html, but they should never be the reason for removing a certain tag, they can only account for extra tags. Tag cutting comes with maintenance costs and reduces the future-proofness of your html code, a drop in quality you shouldn't be willing to risk, especially if you consider the minimal impact of this technique. Performance is important, but there is more to web design than just speed alone." http://www.onderhond.com/blog/work/cost-of-performance-tag-cutting The Future of HTML5 Video By Bruce Lawson. "What's coming next in the world of HTML5 video? Opera's Bruce Lawson reveals what's in store and how you can incorporate the new features into your own sites." http://www.netmagazine.com/features/future-html5-video +10: TOOLS. CSS Gradient Finder By aaronm67. Provides CSS gradient code from a PNG. http://gradientfinder.com/ Southstreet Progressive Enhancement Workflow By Filament Group. "Our tools and workflow for building fast and accessible cross-device web applications..." https://github.com/filamentgroup/Southstreet +11: TYPOGRAPHY. Fluid Type By Trent Walton. "Embracing the fluid & flexible aspect of responsive web design was an easy decision, but I've been less sure-footed when it comes to balancing that with setting type on the web..." http://trentwalton.com/2012/06/19/fluid-type/ +12: USABILITY. Modular And Flexible Content In Responsive Design By Steven Bradley. "One of the questions that comes up with responsive design is what to do with the content? Does the same content get included everywhere or does it change based on device? It's the first and most important question we should be asking with any design, responsive being no exception..." http://www.vanseodesign.com/web-design/modular-responsive-content/ Where You Can Stick Your Social Networking Buttons By Leonie Watson. "...So where should you stick your social networking buttons? The short answer is after the content you'd like people to share. Think of it like a form. You want people to take some action once they've completed doing something else. In this case, you want people to share your content once they've finished reading it..." http://www.nomensa.com/blog/2012/where-you-can-stick-your-social-networking-buttons/ Why Country Sites Are So Bad By Jakob Nielsen. "When a multinational company produces a localized country site, usability is often lost. Local advertising agencies design good-looking sites that don't communicate." http://www.useit.com/alertbox/country-site.html +13: XML. What XML Can Learn from HTML; Also Known as XML5 (video) By Anne van Kesteren. "This XMLPrague 2012 talk will take a brief look at what it takes to replace XML with a fully backwards compatible revision of XML that no longer halts processing at violations of well-formedness and why that might be worth doing." https://www.youtube.com/watch?v=nhVfIyFPWAA [Section one ends.] ++ SECTION TWO: +14: 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.]