+++ WEB DESIGN UPDATE. - Volume 12, Issue 14, September 27, 2013. An email newsletter to distribute news and information about web design and development. ++ISSUE 14 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: EVENTS. 05: JAVASCRIPT. 06: MISCELLANEOUS. 07: PHP. 08: USABILITY. SECTION TWO: 09: What Can You Find at the Web Design Reference Site? [Contents ends.] ++ SECTION ONE: New references. +01: ACCESSIBILITY. Audio Control By Rakesh Paladugula. "Sometimes we observe websites playing music in the background immediately when the page is loaded in the browser. This music distracts the users of screen readers who operate the computer with audio output. The screen reader users will not be able to operate the computer unless the volume of the music is decreased, completely muted or turned off. When I say decrease the volume please note that the volume of the music should be decreased or turned off not the overall system volume. If such option is not provided, some set of user groups cannot perceive any information from the website..." http://www.maxability.co.in/2013/09/audio-control/ Fieldset Legend, Aria-describedby, and Radiogroup Role By Ted Drake. "...As with ARIA in general, use semantic, valid HTML as the basis for your web applications. This will reduce your div complexity and provide the expected behaviors without compromise. When this is not possible, use the role='radiogroup' to provide more context to radio buttons and use aria-describedby for grouped form elements." http://www.last-child.com/legend-aria-describedby/ Supporting the Next Generation of Accessible Technology Developers By David Sloan. "This weekend sees the European final of the SS12 Coding for a Cause competition, where teams of university and college students compete to produce the best piece of accessible software..." http://blog.paciellogroup.com/2013/09/supporting-next-generation-accessible-developers/ Episode 9 - Developing an Accessible Website (Video) By Human Resources Professionals Association TV. In part two of accessible websites, Harold Jeepers meets Boris, the world's greatest (and most feared) graphic designer. Boris learns some lessons about accessibility and agrees to make some 'magnificent' changes. A high-five goes awry for the marketing team." http://www.youtube.com/watch?v=s21FcoACJ0I Making Web Sites Accessible Without Sacrificing Aesthetics By Simon Norris. "The Web Accessibility Initiative aimed to improve Web usability for those with disabilities. But fifteen years after its launch, organizations still widely ignore online accessibility. Far too often, people believe that designing for accessibility means compromising an attractive design. As a result, a myriad of misconceptions have emerged, which often prevent organizations from making a determined effort to integrate accessibility into the design of their Web sites..." http://uxmatters.com/mt/archives/2013/09/making-web-sites-accessible-without-sacrificing-aesthetics.php Think About ARIA roles When Choosing a WordPress Theme By Virginia DeBolt. "ARIA landmark roles are used to improve accessibility and provide useful navigation points that a screen reader recognizes and can find quickly..." http://www.webteacher.ws/2013/09/06/think-aria-roles-choosing-wordpress-theme/ +02: CASCADING STYLE SHEETS. Responsive Scrollable Tables By Roger Johansson. "Over six years ago I wrote a short post about preventing HTML tables from becoming too wide. The solutions I offered in that post involve using table-layout:fixed to lock down the width of tables. While that may work in some cases, it often will not be very pleasant to use..." http://www.456bereastreet.com/archive/201309/responsive_scrollable_tables/ Why the Focus Indicator is Important (Video) By Kate Bradbury. "This video explains why the focus indicator is important and how to make it accessible..." http://www.nomensa.com/blog/2013/why-the-focus-indicator-is-important/ Responsive Design Overview for UB CIT By Adrian Roselli. Adrian's presenation slides. http://www.slideshare.net/aardrian/responsive-design-overview-for-ub-cit An Insider's View of Mobile-First Design - Don't Make These Mistakes By Luke Wroblewski. "Everyone from users to entrepreneurs to advertisers loves the 'mobile' category because those products are always with us, always on, and instantly accessible. But these opportunities are also design constraints..." http://www.wired.com/opinion/2013/09/designing-for-mobile-means-ditching-deeply-ingrained-pc-instincts/ A Complete Guide to the Table Element By Chris Coyier. "The element in HTML is used for displaying tabular data. You can think of it as a way to describe and display data that would make sense in spreadsheet software. Essentially: columns and rows. In this article we're going to look at how to use them, when to use them, and everything else you need to know..." http://css-tricks.com/complete-guide-table-element/ Solved By Flexbox - Cleaner, Hack-Free CSS By Philip Walton. "...This site is not another CSS framework. Instead, its purpose is to showcase problems once hard or impossible to solve with CSS alone, now made trivially easy with Flexbox. And with Internet Explorer 11 and Safari 6.1 now in beta, Flexbox will soon be supported in every modern browser..." http://philipwalton.github.io/solved-by-flexbox/ +03: EVALUATION & TESTING. Getting More Out of Usability Testing - Understanding Product Usage Over Time By Paula Barraza. "Understanding the relationship between a product and its users over a period of time is a key aspect of user research that is often overlooked. By including a long-term testing approach as part of your UX research plan, you will develop a more comprehensive model of user engagement and a better understanding of how and why engagement changes over time." http://uxmatters.com/mt/archives/2013/09/getting-more-out-of-usability-testing-understanding-product-usage-over-time.php +04: EVENTS. The Ultimate Developer Event November 20-22, 2013. Boston, Massachusetts, U.S.A. http://ultimatedeveloperevent.com/boston-2013/ UX People November 30, 2013. Minsk, Belarus http://uxpeople.by/ dotJS December 2, 2013. Paris, France http://www.dotjs.eu/ Ski PHP 2014 January 17-18, 2014. Salt Lake City, Utah https://www.skiphp.com/ ConFoo Conference February 24-28, 2014. Montreal, Canada http://confoo.ca/en +05: JAVASCRIPT. Responsive Accessible Data Tables with jQuery By Dylan Barrell. "...In order to solve the aforementioned problems, the a11yfy jQuery plugin needs to: Get the AT to treat a sequentially laid-out table as a table, and Get columnar tables to switch from columnar format on the desktop to row format on a smartphone at the responsive breakpoint..." http://www.deque.com/responsive-accessible-data-tables-jquery Fat Arrow Functions in JavaScript By Robcee. "Since sometime back in the heady days of Firefox 22, Firefox gained the ability to use Fat Arrow Functions in JavaScript. Users of CoffeeScript (or, I guess, C#) will be familiar with the syntax. We've been using these in Firefox DevTools code for nearly 6 months..." http://robcee.net/2013/fat-arrow-functions-in-javascript/ ARIA Roles S By Rakesh Paladugula. "The following roles begin with the alphabet S. Click on each link to navigate to its description." http://www.maxability.co.in/2013/09/aria-roles-s/ +06: MISCELLANEOUS. Future Friendly By Dave Olsen. "Disruption will only accelerate. The quantity and diversity of connected devices - many of which we haven't imagined yet - will explode, as will the quantity and diversity of the people around the world who use them..." http://futurefriend.ly/ The Growing Intricacies of Responsive Web Design By Devanshi "Nikki" Garg. "Web design trends often take off rapidly, then quickly fade to obscurity. While most critics would agree that responsive Web design (RWD) won't be going away any time soon, it is important to realize that the approach has not yet fully matured and is continuing to evolve. As the Web development community continually refines its techniques and creates new approaches, responsive Web design promises to become an increasingly popular solution to delivering holistic design for the mobile ecosystem. The approach is here to stay--and it's about to get a lot more intricate." http://uxmatters.com/mt/archives/2013/09/the-growing-intricacies-of-responsive-web-design.php Responsive Interview with John Allsopp By Responsive Web Design Weekly. "John Allsopp shouldn't be a stranger to anyone, after all I think he was the first person to begin guiding us towards a responsive future when he penned A Dao of Web Design for A List Apart - April 2000..." http://responsivedesignweekly.com/interview/responsive-interview-john-allsopp/ Sustainable Web Design By Janmes Christie. "Do you know your website's carbon footprint? Or how to lower it? Emissions standards have been set for the automotive, construction, and telecommunications industries, yet the internet's carbon footprint is growing out of control: a whopping 830 million tons of CO2 annually-larger than that of the entire aviation industry. At least 40 percent of that falls partially under the responsibility of people who make websites. It's time for web designers to do our part. James Christie explains how to slim our obese websites and simultaneously attack our industry's carbon footprint, using methods that conveniently dovetail with good business practice and future-friendly design." http://alistapart.com/article/sustainable-web-design The Web Runs on Electricity and We're Running Out By Dorian Peters. "It's a humbling thought, but as web professionals, nothing we create actually exists when the power goes out. As we increase the number of devices in our world, planning for a connected web of things in hopes that the poor will be liberated, education will be free, and our fridges will tell us we're out of lettuce, we fail to acknowledge that we scarcely have enough fossil fuels to maintain the current state for long. Web designers need to be part of the solution-and the situation is more hopeful than you may think. Dorian Peters shows how we can exercise the surprising power that lies in seemingly small designerly decisions to help our industry not only survive, but create positive impact worldwide." http://alistapart.com/article/the-web-runs-on-electricity-and-were-running-out +07: PHP. Continuous Deployment Revisited By David Shirley. "In an earlier article I talked about what Continuous Deployment was and how it fits into the modern programming process. We took a small swipe at how it works, but some people (okay, one person) felt that I could have gone into more detail and they were right. So, here's a more detailed description of how Continuous Deployment works in the trenches and how it can change your life..." http://www.sitepoint.com/continuous-deployment-revisited/ +08: USABILITY. Responsive Web Design for Corporate UX Design By Janet M. Six. In this edition of Ask UXmatters, our experts discuss responsive Web design within the context of corporate UX design." http://uxmatters.com/mt/archives/2013/09/responsive-web-design-for-corporate-ux-design.php How Does Flat Design Damage and Improve Usability? By Steven Bradley. "...Flat design probably reduces usability for some in the short term. It's stripping away metaphors that some have relied on for years. Fewer and fewer people need those metaphors though, and in time new visual metaphors will be with us to help replace those that are being removed...To focus on the word flat and see only the lack of depth is to miss the point. Flat design is more than removing depth. It also brings more attention to design fundamentals that, if anything, will lead to an overall improvement in usability, even if less buttons are recognized as buttons. Flat design done wrong is just flat. Flat design done well removes some visual depth cues in order to return to the fundamentals and it provides many more cues beyond depth to communicate." http://www.vanseodesign.com/web-design/flat-design-usability/ [Section one ends.] ++ SECTION TWO: +09: 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.]