+++ WEB DESIGN UPDATE. - Volume 12, Issue 03, July 11, 2013. An email newsletter to distribute news and information about web design and development. ++ISSUE 03 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: DRUPAL. 04: EVALUATION & TESTING. 05: EVENTS. 06: HTML5. 07: JAVASCRIPT. 08: MISCELLANEOUS. 09: USABILITY. SECTION TWO: 10: What Can You Find at the Web Design Reference Site? [Contents ends.] ++ SECTION ONE: New references. +01: ACCESSIBILITY. Task Force for Inclusion of People with Cognitive Disabilities By Lisa Seeman. "We are working to make accessibility guidelines that focus on cognitive disabilities. Guidelines that allow author to make their content usable by as many people as possible. It should include people with learning disabilities, problems reading, problem solving, attention span, short term memory loss (such as mild to moderate Alzheimer's) and language disabilities..." For questions or to volunteer for this project contact Lisa at lisa.seeman@zoho.com or lisa.seeman@deque.com. http://accessibility.athena-ict.com/cognitive/RoadmapCog02.html Accessibility Starts in the Style Guide By Kevin Potts. "This article will discuss the deficiencies of WCAG 2.0 in addressing cognitive disabilities, how a style guide can help, and why it all matters..." http://graphicpush.com/accessibility-starts-in-the-style-guide Accessible RWD By Alastair Campbell. "With the rise in popularity for responsive web design, Alastair Campbell says websites need to be accessible, too..." http://www.netmagazine.com/tutorials/accessible-rwd All About Alt Text By Marie Mosley. "...Well-written, relevant alt text provides valuable information about your blog to both your human visitors and search engine robots. Keep it brief and to the point, and leave it blank on non-essential decorative images. And remember, it's alt text, not an alt tag..." http://www.codeitpretty.com/2012/04/all-about-alt-text.html Keyboard and Interaction Accessibility Techniques By Jared Smith. "Techniques for addressing keyboard accessibility issues for screen reader users and sighted keyboard users." http://www.slideshare.net/jared_w_smith/keyboard-accessibility-24070581 Web Habits of Blind Screen Reader Users (Video) By Victor Tsaran. "How much do we know about web habits of screen reader users, in particular, those who live in Africa, Asia and the Middle East, and cannot take advantage of the fast connection to the Internet? This presentation examines results from research with 20 vision-impaired users from various countries around the world assembled at a Social Entrepreneurship workshop. While their answers shed the light on a lot of interesting cognitive and cultural issues regarding the use of assistive technology and the web in particular, the three most prominent topics were lack of training, lack of awareness about existing options and lack of their familiarity with the workings of the Internet...." http://blip.tv/uw-change/victor-tsaran-web-habits-of-blind-screen-reader-users-preliminary-evidence-from-users-in-7-african-asian-and-middle-eastern-states-2771057 +02: CASCADING STYLE SHEETS. An Introduction to CSS Regions By Chris Mills. "CSS3 brings with it many features to help us build complex, flexible layouts more easily and logically, without having to resort to JavaScript and painful hacks. One such feature is described in the CSS Regions Module Level 3 - the basic idea here is that you write your content into some good old semantic HTML elements, and then also define a separate set of (non-semantic) containers that will serve as the scaffolding on which to hang your styles that define layout, etc..." http://dev.opera.com/articles/view/an-introduction-to-css-regions/ CSS Viewport Units - vw, vh, vmin and vmax By Chris Mills. "The CSS Values and Units Module Level 3 defines a whole host of new units that can be used in various contexts, for example seconds and milliseconds, degrees and radians, and rems for sizing things relative to the font-size on the root element. One type of units that has not been so widely discussed is viewport units, for sizing things relative to the viewport size, a brilliant proposition for responsive design. They are currently supported by a reasonable variety of browsers (Opera 15, Firefox, Chrome, Blackberry 10, IE10, iOS), and allow for a lot of interesting new possibilities. Let's explore." http://dev.opera.com/articles/view/css-viewport-units/ Centering Percentage Width/Height Elements By Chris Coyier. "If you know the exact width/height of an element, you can center it smack dab in the middle of its parent element easily with this classic trick..." http://css-tricks.com/centering-percentage-widthheight-elements/ Style Sheets for Blogs - What's the Purpose? By Virginia DeBolt. "The best practice is to choose a look you like as a template or theme and then leave it alone. Don't use the provided toolbar to change fonts or colors or layout as you type your content into your blog. Use the tools to create headings and lists and blockquotes ' that formats content into meaningful page elements ' that's okay. But font size or alignment or color choices are not meaningful. Instead, they deal with appearance. That's not okay." http://www.webteacher.ws/2013/07/10/style-sheets-for-blogs-whats-the-purpose/ In Defense of the Humble id Attribute By John Allsopp. "...The criticisms of the use of id are almost invariably about its shortcomings when used in CSS. But id is for more than just providing styling hooks. I've got this crazy idea about developing for the web. These days it's referred to as 'content out'. The idea is that the content of the page drives the design. By marking up the page content as meaningfully as we can, we surface that content, and the associated functionality of the page. Then how we present this content is driven by the content..." http://www.webdirections.org/blog/in-defense-of-the-humble-id-attribute/ +03: DRUPAL. Using Drupal Book in Video Lessons By Addison Berry. "...This year we're happy to announce the video version of Using Drupal. As an original author on the book I'm stoked to be able to marry together my work on the book with my work on Drupal training videos..." http://drupalize.me/blog/201307/using-drupal-book-video-lessons +04: EVALUATION & TESTING. Ethnography is Everywhere By Deepa Reddy. "...Ethnography seems to have acquired a new cachet in the last decade. It appears practically everywhere in business and consumer research: it's the new marketing buzzword, a must-have in a designer toolkit, a short-hand reference to qualitative research. Everyone speaks of 'ethnography' as a straightforward people-watching, people-studying tool. Everyone appears to be doing ethnography, too, in short or long stints, using a mixed bag of observation and interviews for data collection, and generating a range of visual (photos, videos, visualizations) and written outputs. If design is social, and we all seem to agree that it is, then ethnography is the means to access this sociality." http://www.humanfactors.com/downloads/jul13.asp#research How to Benchmark Website Usability By Jeff Sauro. "Here are the steps we follow in designing, conducting and analyzing benchmark usability tests..." http://www.measuringusability.com/blog/benchmark-website-usability.php +05: EVENTS. User Modeling for Accessibility July 15, 2013. Online Symposium http://www.w3.org/WAI/RD/2013/user-modeling/ Web and PHP Conference September 16-18, 2013. San Jose, California, U.S.A. http://webandphpmag.wordpress.com/ Web Directions South 2013 October 22-25, 2013. Sydney, Australia http://webdirections.org/wds13/ edUi November 4-6, 2013. Richmond, Virginia, U.S.A. http://eduiconf.org/ +06: HTML5. HTML5 and ARIA Design Patterns By Leonie Watson and Steve Faulkner. "With HTML5 and ARIA now in regular use across the web, several design patterns are emerging that solve common scenarios. This article takes five HTML5 and ARIA design patterns and explains why they make good design choices..." http://www.netmagazine.com/features/5-html5-and-aria-design-patterns Five Reasons Why You Should Quote Attribute Values in HTML5 By John Allsopp. "...You can't always leave off quotes from attribute values. Think about an element with two class attribute values..." http://www.webdirections.org/blog/five-reasons-why-you-should-quote-attribute-values-in-html5/ +07: JAVASCRIPT. Learn to Use ARIA: Step 1 - Understanding Roles, States, Relationships, and Focus By Lisa Seeman. "This post is the first in a series that aims to demonstrate how to use ARIA to make complex web pages and applications completely accessible. In this introductory post, I will give you an overview of ARIA that will explain what ARIA is trying to do and how it does it. After reading this overview you should understand how it all fits together, which will help lesson the chance of running into errors..." http://www.deque.com/learn-aria-step-1-understanding-roles-states-relationships-focus The Importance of Keyboard Accessibility and Why ARIA Widgets Don't Work as Expected in Voice Navigation Software By Bryan Garaventa. "There is currently a lot of confusion regarding ARIA control types like Listboxes, Tabs, and Menus that do not work as expected in voice navigation software such as Dragon NaturallySpeaking..." https://www.ssbbartgroup.com/blog/2013/07/08/the-importance-of-keyboard-accessibility-why-aria-widgets-dont-work-as-expected-in-voice-navigation-software/ ARIA Roles (L) By Rakesh Paladugula. "The following ARIA roles begin with the letter 'L'. Click each link that takes you to its description..." http://www.maxability.co.in/2013/07/aria-roles-l/ Array Iteration and Holes in JavaScript By Axel Rauschmayer. "The blog post describes how various functions and methods that deal with arrays are affected by holes..." http://www.2ality.com/2013/07/array-iteration-holes.html Firefox 23 to Hide 'Disable JavaScript' Option By Craig Grannell. "A Bugzilla bug report has been getting plenty of attention over the past 24 hours. It states the 'Disable JavaScript' checkbox will be removed in the next major version of the browser Firefox 23..." http://www.netmagazine.com/news/firefox-23-hide-disable-javascript-option-132851 +08: MISCELLANEOUS. Lockdown By Marco Arment. "The bigger problem is that they've abandoned interoperability. RSS, semantic markup, microformats, and open APIs all enable interoperability, but the big players don't want that - they want to lock you in, shut out competitors, and make a service so proprietary that even if you could get your data out, it would be either useless (no alternatives to import into) or cripplingly lonely (empty social networks). Google resisted this trend admirably for a long time and was very geek- and standards-friendly, but not since Facebook got huge enough to effectively redefine the internet and refocus Google's plans to be all-Google+, all the time.4 The escalating three-way war between Google, Facebook, and Twitter - by far the three most important web players today - is accumulating new casualties every day at our expense..." http://www.marco.org/2013/07/03/lockdown The Hut Where the Internet Began By Alexis Madrigal. When Douglas Engelbart read a Vannevar Bush essay on a Philippine island in the aftermath of World War II, he found the conceptual space to imagine what would become our Internet..." http://www.theatlantic.com/technology/archive/2013/07/the-hut-where-the-internet-began/277551/ +09: USABILITY. Should I Use a Carousel? By Jared Smith. "Every time you use a carousel, a kitten dies..." http://shouldiuseacarousel.com/ User Story Cards for Web Writers By Dey Alexander. "Do you or your colleagues have problems knowing where to start when writing for your organisation's website? Or do you find it hard dealing with different opinions about what you should write or who you're writing it for? User story cards can help. They're an easy way to do a little planning to help guide your writing..." http://www.4syllables.com.au/2013/07/user-story-cards/ Content Is All That Matters On The Web By Wojciech Chojnack. "The focus and widespread knowledge towards the importance of web design, web development, usability, and user experience is definitely positive, considering that only a few years ago most of the meetings I have had with clients had to start with an explanation of what the term usability meant. However, what is missing in these discussions - what is in desperate need of attention - is web content and the creation of a comprehensive and unified strategy for it." http://sixrevisions.com/content-strategy/content/ When the UI Is Too Fast By Jakob Nielsen. "Users might overlook things that change too fast - and even when they do notice, changeable screen elements are harder to understand in a limited timeframe." http://www.nngroup.com/articles/too-fast-ux/ Organization Language Versus Customer Language By Gerry McGovern. "...Many government websites are riddled with propaganda. Smiley, hand-shakey pictures of politicians and senior figures. Content explaining in excruciating detail what the government is doing. Bucket loads of 'news' (that is not news) and press releases about projects that hardly anyone is interested in. To become relevant on the Web, governments must dump all this junk, start speaking in language ordinary people understand, stop droning on about what it's doing for people, and instead let people quickly and easily do something useful." http://www.gerrymcgovern.com/new-thinking/organization-language-versus-customer-language Flat Design Done Wrong By Steven Bradley. "I'd like to spend the next couple of posts talking about flat design. Today I'll focus more on where it goes wrong and next week share more about how much it gets right once you get past the name..." http://www.vanseodesign.com/web-design/flat-design-done-wrong/ [Section one ends.] ++ SECTION TWO: +10: 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.]