+++ WEB DESIGN UPDATE. - Volume 12, Issue 10, September 3, 2013. An email newsletter to distribute news and information about web design and development. ++ISSUE 10 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: HTML5. 06: INFORMATION ARCHITECTURE. 07: JAVASCRIPT. 08: MISCELLANEOUS. 09: NAVIGATION. 10: PHP. 11: USABILITY. SECTION TWO: 12: What Can You Find at the Web Design Reference Site? [Contents ends.] ++ SECTION ONE: New references. +01: ACCESSIBILITY. Alt Text is for More than Just Screen Readers By Derek Featherstone. "Good alt text is seen as critical for people that use screen readers. But it doesn't stop there. We need to consider the effect of alt text on people that also rely on good, accurate alt text: people that use voice recognition software." http://simplyaccessible.com/bpow/alt-text-voice/ The Pointerless Web (Video) By Nicholas Zakas. The first of a 5-part presentation. All five have good info. http://www.youtube.com/watch?v=ZoLOyyS5700 Accessibility In UX Design - Tales From The Field By Libby Heasman. "I'm always amazed when I embark on a new client project at just how overlooked accessibility can be in the UX space..." http://uxmastery.com/accessibility-in-ux-design-tales-from-the-field/ Modal Window Focus Management By Jeff Smith. "For what appears to be such a simple concept, modal windows create incredibly complex interactions on the web. For users that rely on devices and software other than a mouse to navigate, the complexity is increased..." http://simplyaccessible.com/bpow/modal-focus/ The Digital Divide and People with Disabilities By Lainey Feingold. "On August 23, 2013, the New York Times published my letter to the editor about the digital divide and people with disabilities..." http://lflegal.com/2013/08/digital-divide/ WebAIM's Hierarchy for Motivating Accessibility Change By Jared Smith. "...We at WebAIM spend at least as much time motivating for change as we do educating on implementation details. I've compiled my thoughts into WebAIM's Hierarchy for Motivating Accessibility Change..." http://webaim.org/blog/motivating-accessibility-change/ +02: CASCADING STYLE SHEETS. CSS Generated Content is Not Content By Karl Groves. "...If what you're working with is content, it must be part of the DOM. That means using actual content and not CSS generated content. The inclusion of additional icons and the like can be an improvement, in terms of overall usability, but the additional icons must be in the foreground." http://www.karlgroves.com/2013/08/26/css-generated-content-is-not-content/ The CSS Regions Module - Control Where Content Flows By Steven Bradley. "Would you like more control of your content and how it flows through your layout? Would you like an easy way to create more complex layouts? How about an easy way to independently style sections of a document, without complicated css rules that overwrite each other? If you answered yes to any of these questions, then css regions might be what you're looking for..." http://www.vanseodesign.com/css/regions/ Force Margin/Space Between List and Floated Image By Perishable Press. "If you're displaying floated images in your posts, you may notice that margins of lists and other block-level elements seem to 'collapse', as shown in this screenshot from the 2013 redesign..." http://perishablepress.com/margin-list-floated-image/ +03: EVALUATION & TESTING. 5 Lessons Learned from 100,000 Usability Studies By Phil Sharp. "...One of the best ways to test out your site categorization is to sit someone down in front of your site and ask them to find a specific item without using internal search. This is simple, fast, powerful, and very painful to watch..." http://moz.com/blog/5-lessons-learned-from-100000-usability-studies How We Do User Research in Agile Teams By Leisa Reichelt. "Getting user research into Agile teams in a way that is timely, relevant and actionable is a challenge that teams the world over are tackling. Working effectively in agile has recently been the driver of some fairly significant changes to the way our researchers work at GDS." http://digital.cabinetoffice.gov.uk/2013/08/30/how-we-do-user-research-in-agile-teams/ Seeing the Elephant - Defragmenting User Research By Lou Rosenfeld. "Silos: good for grain, awful for understanding customer behavior. Just as we favor the research tools that we find familiar and comfortable, large organizations often use research methods that reflect their own internal selection biases. As a result, they miss out on detecting (and confirming) interesting patterns that emerge concurrently from different research silos. And they likely won’t learn something new and important. IA thought leader Lou Rosenfeld explains how balance, cadence, conversation, and perspective provide a framework enabling your research teams to think across silos and achieve powerful insights even senior leadership can understand." http://alistapart.com/article/seeing-the-elephant-defragmenting-user-research Connected UX By Aarron Walter. "Your inbox overflows with customer emails suggesting features and improvements. Instead of benefiting, you feel overwhelmed by an unmanageable deluge. You conduct usability tests, user interviews, and competitive analyses, creating and sharing key insights. Yet within months, what you learned has been lost, forgotten, or ignored by someone in a different department. What if you could sift, store, and share all your customer learning in a way that breaks down silos, preserves and amplifies insights, and turns everyone in your organization into a researcher? MailChimp’s user experience director Aarron Walter tells how his team did it. You can, too." http://alistapart.com/article/connected-ux +04: EVENTS. MobileUXCamp DC September 14, 2013. Washington, D.C., U.S.A. http://mobileuxcamp.com/ Edge Conference September 23, 2013. New York, New York, 2013. http://edgeconf.com/ Design It. Build It. (DIBI) October 7-8, 2013. Gateshead, England, United Kingdom http://www.dibiconference.com/ Delight October 7-8, 2013. Portland, Oregon, U.S.A. http://delight.us/conference/ The Digital Barn 3 October 11-12, 2013. Barnsley, England, United Kingdom http://makedo.in/thedigitalbarn/ Accessibility Camp DC October 12, 2013. Washington, D.C., U.S.A. http://accesscampdc13.eventbrite.com/ Mobilize October 16-17, 2013. San Francisco, California, U.S.A. http://event.gigaom.com/mobilize/ +05: HTML5. HTML5 picture Element By Christopher Schmitt. "...Proposed to be a part of HTML5, the element is a solution that is both complete and in need of no additional scripts or third-party services to do the job. The syntax is as follows..." http://html5hub.com/html5-picture-element/ Using and Elements By W3C. "The HTML5 specification redefines b and i elements to have some semantic function, rather than being purely presentational. However, the simple fact that the tag names are 'b' for bold and 'i' for italic means that people are likely to continue using them as a quick presentational fix. This article explains why that can be problematic for localization (and indeed for restyling of pages in a single language), and echoes the advice in the specification intended to address those issues..." http://www.w3.org/International/questions/qa-b-and-i-tags The HTML5 progress Element By Pankaj Parashar. "Here is the basic markup for the progress element..." http://css-tricks.com/html5-element/ +06: INFORMATION ARCHITECTURE. Information Architecture - More Than Just a Pretty Menu By Chris Nodder. "Information architecture (IA) is actually 'the structural design of shared information environments.' It's no good just having a well-thought-through menu system for your site. Once you get people to where they need to be, the content needs to be arranged in the way they expect, using words they understand. Knowing how your users think about and self-categorize your site's content should be central to your whole design effort. It boils down to finding out how your users think about and categorize the concepts, tasks, and activities that your product deals with, and then creating an architecture that matches this world view..." http://blog.lynda.com/2013/08/28/information-architecture-more-than-just-a-pretty-menu/ +07: JAVASCRIPT. Javascript Best Practices, Part 1 By Christian Heilmann. "This guide, the first in a two part series, was adapted from a popular slideshow by Christian Heilmann, a Web Evangelist at Mozilla. Though JavaScript has a few notoriously tricky features, it's more important than ever in software development. This list of best practices uses code samples and side-by-side examples to help you write more readable, efficient code..." http://www.thinkful.com/learn/javascript-best-practices-1/ Protecting Objects in JavaScript By Axel Rauschmayer. "This blog post is a quick refresher of how objects can be protected in JavaScript. There are three levels of protection.." http://www.2ality.com/2013/08/protecting-objects.html The Dark Shadow of The DOM By James Edwards. "Shadow DOM is designed to address the encapsulation problems that plague some kinds of web development. But anything you put in a Shadow DOM is inaccessible to browser-based screenreaders, so you can only use it for empty elements which contain no content or informational attributes. With that requirement, Shadow DOM only provides half a solution; and half a solution to this problem is no solution at all..." http://www.sitepoint.com/dark-shadow-dom/ Easy Fixes to Common Accessibility Problems By Todd Kloots. "Making a site or application accessible can seem so overwhelming that it can completely stall efforts before they begin. But sometimes simple changes can provide the necessary momentum while resulting in significant improvements for users. So, in the spirit of small things that make a big difference, here's a list of fixes for common accessibility problems." http://yahoodevelopers.tumblr.com/post/59489724815/easy-fixes-to-common-accessibility-problems +08: MISCELLANEOUS. Responsive Web Design is Solid Gold By Jason Grigsby. "A few years ago I wrote an article entitled CSS Media Query for Mobile is Fool's Gold. It garnered a lot of attention at the time, and I still see people reference it..." http://blog.cloudfour.com/responsive-web-design-is-solid-gold/ Ethan Marcotte on Web Design, Accessibility and Why it Matters to Journalists, Digital Storytellers By Miranda Mulligan. "... I think we can include that richness in a way that's maybe a bit more responsible: we can include JavaScript in a way that our pages will still work without it, and build lighter, nimbler pages, and so on. To me, that's a really interesting design challenge..." http://knightlab.northwestern.edu/2013/08/26/ethan-marcotte-on-web-design-accessibility-and-why-it-matters-to-journalists-digital-storytellers/ 10 Tips for Designing a Mobile-Friendly Website By Oleg Lola. "Structuring a mobile-friendly website means rethinking the design process for a variety of screens across multiple mobile platforms. While tablets may be able to handle your full website, screens of smartphones are limited in terms of space, and yours is the task of providing their owners with a completely different user experience, which must undoubtedly be positive. How you achieve that could involve many different steps and approaches. In my experience, however, some basic guidelines have emerged that are common to just about all projects involving design for mobile. Here are 10 tips that may help you." http://www.sitepoint.com/10-tips-designing-mobile-friendly-website/ +09: NAVIGATION. Accessible Dropdown Menus By Ted Drake. "...How does your site navigation measure up? It's easy to test. Just push your mouse to the side and try tabbing through your web page. Are you able to navigate the submenus? What happens when you focus on a top level menu item and hit the enter key? What happens when you use the arrow keys? The escape key? If your answer is nothing, you will need to update to an accessible drop down menu." http://www.last-child.com/accessible-dropdown-menus/ Accessible Dropdown Menus By Terrill Thompson. "...Dropdown and flyout menus on websites are great for reducing clutter, simplifying page content, and providing a consistent navigation structure that (if done well) makes it easy to find content from anywhere on the site. Unfortunately, very few of the dynamic menus in use today are fully accessible..." http://terrillthompson.com/blog/202 Accessible Mega Menu By Adobe. "The navigation menu at the top of this page demonstrates how one can implement an accessible mega menu as a jQuery plugin. It is modeled after the mega menu on adobe.com but has been simplified for use by others. An brief explanation of our interaction design choices can be found in a blog post at Mega menu accessibility on adobe.com..." http://adobe-accessibility.github.io/Accessible-Mega-Menu/ +10: PHP. A Look at PHP's Continuing Evolution By Larry Garfield. "PHP is not a young language. As of 2013, it's 18 years old; that's old enough to vote. Many upstart languages have appeared over the years to try and unseat PHP as the "lingua franca" of web applications but it still commands over 80% of the web market. One reason for PHP's popularity is no doubt the ease with which new developers can get started with it, but just as important is the fact that PHP has been evolving for all those 18 years..." https://www.acquia.com/blog/look-phps-continuing-evolution +11: USABILITY. Content as Medium By Matt Gemmell. "...We want the words. We want words that have been lovingly prepared, and agonised over. We want them when they're ready, not served up haphazardly with artificial deadlines and incomplete information. The faddish buzzwords of interactivity (for its own sake) and 'digital experiences' are fading in the rear-view mirror, hopefully for good. In their place, we find much more comfortable words: simplicity, focus, and quality...A return to the quietness and cleanliness of the page as an unnoticed backdrop, with the single spotlight falling squarely on well-considered words." http://mattgemmell.com/2013/08/29/content-as-medium/ Why Consistent Language Matters By Georgina Laidlaw. "We've talked a lot about using consistent language in your app or product interfaces, and in the help pages, emails, and other materials that surround them. But why does consistency matter so much?..." http://www.sitepoint.com/consistent-language-matters/ Subheadings - Perhaps the Most Useful Technique in Technical Writing By Tom Johnson. "...help is either too long so users can't find the answer, or help is too short so users can't find the answer. Is this a paradox that is resolvable? Can something be both long and short at the same time?... http://idratherbewriting.com/2013/08/23/subheadings-perhaps-the-most-useful-technique-in-technical-writing/ Design is About Relationships (Video) By Josh Brewer. "It's easy to get so caught up in theory and process that we forget that design is about relationships. It's not about Photoshop comps or bytes of code. It's about people. And content. And, especially today, their devices. It's about the interplay between content and form, between real-time data and how, when, and why we share and consume it. It's about enabling connections where they couldn't have existed before. It's about focusing on creating experiences that are more meaningful, more delightful, and ultimately, more human." http://www.designersandgeeks.com/events/design-is-about-relationships [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 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.]