+++ WEB DESIGN UPDATE. - Volume 10, Issue 44, April 26, 2012. An email newsletter to distribute news and information about web design and development. ++ISSUE 44 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: EVALUATION & TESTING. 05: EVENTS. 06: JAVASCRIPT. 07: MISCELLANEOUS. 08: NAVIGATION. 09: STANDARDS, GUIDELINES & PATTERNS. 10: USABILITY. SECTION TWO: 11: What Can You Find at the Web Design Reference Site? [Contents ends.] ++ SECTION ONE: New references. +01: ACCESSIBILITY. Can Assistive Technology Make a Website Accessible? By Karl Groves. "...There is only one place where accessibility happens: The code. This goes for any assistive technology. If the markup is used improperly, if the proper controls aren't used in the proper ways, if the client-side scripting doesn't manage focus properly and if the controls aren't discoverable and actionable by keyboard, no assistive technology product, service, or device will matter. The code is where accessibility happens and so long as companies' budgets are being diverted to ineffective products, these budget dollars are not being used on things that matter, like training developers and remediating their sites." http://www.karlgroves.com/2012/04/19/can-assistive-technology-make-a-website-accessible/ Suggestions for the New Disability.gov By Dennis E. Lembree. "... Every website, no matter how great the foundation, is a work in progress and could use improvements. Disability.gov is no exception. Here's my review of the home page..." http://webaxe.blogspot.com/2012/04/suggestions-for-new-disabilitygov.html A Challenge to Web Accessibility Metrics and Guidelines - Putting People and Processes First By Martyn Cooper, et al. "This paper argues that web accessibility is not an intrinsic characteristic of a digital resource but is determined by complex political, social and other contextual factors, as well as technical aspects which are the focus of WAI standardisation activities. It can therefore be inappropriate to develop legislation or focus on metrics only associated with properties of the resource..." http://opus.bath.ac.uk/29190/3/print-it.html Headings in HTML and PDF, a Comparison By Duff Johnson. "...By definition, in PDF, the "H" and "Hn" tags denote "subdivisions" of content (we'll not get into "strongly" and "weakly" structured for now). "Subdivision," of course, may or may not mean the same as "importance," depending on the specific document, but either way, the concept is distinct from the HTML 4 notion of "heading"..." http://www.commonlook.com/The-Definition-of-Heading +02: CASCADING STYLE SHEETS. Hiding Content Untangled - Hiding vs. Moving Out of the Visible Viewport By Marco Zehe. "...It is my sincere hope that this blog post helps to clear up some confusion about the types of 'hidden' content, the effects 'display: none;' vs. negative positioning has, and when to use what properly. A good rule of thumb might be: If something should remain hidden until the user performs a conscious action, use 'display: none;'. Should something, on the other hand, become visible when navigated to via the keyboard, or be discoverable by screen reader users right away, use negative positioning." http://www.marcozehe.de/2012/04/24/hiding-content-untangled-hiding-vs-moving-out-of-the-visible-viewport/ How to Remove CSS Outlines in an Accessible Manner? By Steve Faulkner. "Anybody with any real world accessibility experience knows that using CSS :focus {outline:none} as recommended in the WHATWG HTML living standard is not a solution to any problem, it only replaces one accessibility issue with another. This why I worked hard to get the advice still present in the 'living standard' removed from the W3C HTML5 specification..." http://www.paciellogroup.com/blog/2012/04/how-to-remove-css-outlines-in-an-accessible-manner/ CSS3 Structural Pseudo-class Expressions Explained By Louis Lazaris. "You probably know that the CSS3 spec includes a number of structural pseudo-classes. Four of these pseudo-classes use function-like syntax that allow an argument to be passed in using parentheses. These are..." http://www.impressivewebs.com/css3-pseudo-class-expressions/ Automatic Line Breaks in Narrow Columns With CSS 3 Hyphens and Word-Wrap By Roger Johansson. "A problem that has always existed but has become more common lately as more people - thanks to the popularity of responsive web design - make their layouts adapt to narrow viewports, is the lack of automatic hyphenation in web browsers..." http://www.456bereastreet.com/archive/201204/automatic_line_breaks_in_narrow_columns_with_css_3_hyphens_and_word-wrap/ Saving the Day with Scoped CSS By Arley McBlain. "...One little known feature of HTML5 is Scoped CSS. It's an attribute for style blocks that may change the way we tackle certain styling challenges in the future..." http://css-tricks.com/saving-the-day-with-scoped-css/ Some Practical Guidelines For Writing CSS By Steven Bradley. "Do you follow a consistent set of practices when writing your css or do you write a few lines of css that work before move on to the next line? Did your best practices grow organically or did you follow a set of guidelines for writing your code?..." http://www.vanseodesign.com/css/practical-guidelines/ Creating a Mobile-First Responsive Web Design By Brad Frost. "We're going to walk through how to create an adaptive web experience that's designed mobile-first..." http://www.html5rocks.com/en/mobile/responsivedesign/ +03: DREAMWEAVER. Creating a Page Layout with Adobe Dreamweaver CS6 By Adobe Creative Team. "In this lesson from Adobe Dreamweaver CS6 Classroom in a Book, you'll learn the basics of webpage design, how to create design thumbnails and wireframes, insert and format new components into a predefined CSS layout, use Code Navigator to identify CSS formatting, and check for browser compatibility..." http://www.peachpit.com/articles/article.aspx?p=1860943 Using Web Fonts in Adobe Dreamweaver CS6 By Tom Negrino and Dori Smith. "The @font-face rule allows you to use non-Web-safe fonts by defining the location of a font resource, which can be either local to your machine or external. As of CS 5.5, Dreamweaver supports @font-face. Tom Negrino and Dori Smith show you some examples in this excerpt from Dreamweaver CS6 Visual Quick Start." http://www.peachpit.com/articles/article.aspx?p=1860944 +04: EVALUATION & TESTING. Usability Testing - What Needs Fixing? By David Hamill. "Usability testing is too often used innapropriately in my opinion. Compared to other research techniques, it's fairly cheap and easy to organise. But this leads to it being used to answer research questions it often can't answer. In this post I'll discuss how I think the UX community is losing touch with some of the basics..." http://www.goodusability.co.uk/2012/04/18/usability-testing-what-needs-fixed/ +05: EVENTS. CSS Summit July 31-August 2, 2012. Online http://environmentsforhumans.com/2012/css-summit/ dConstruct September 7, 2012. Brighton, United Kingdom http://2012.dconstruct.org/ Fronteers October 4-5, 2012. Amsterdam, Netherlands http://fronteers.nl/congres/2012 Paris Web October 13-15, 2012. Paris, France http://www.paris-web.fr/ +06: JAVASCRIPT. WAI-ARIA 1.0 Authoring Practices By W3C. "This WAI-ARIA Authoring Practices Guide provides readers with an understanding of how to use WAI-ARIA [ARIA] to create accessible rich internet applications." http://www.w3.org/TR/wai-aria-practices/ WAI-ARIA 1.0 Primer By W3C. "The WAI-WAI-ARIA Primer introduces developers to the use of WAI-ARIA [ARIA] for addressing the accessibility of dynamic Web content for people with disabilities." http://www.w3.org/TR/wai-aria-primer/ Roadmap for Accessible Rich Internet Applications By W3C. "The Roadmap for Accessible Rich Internet Applications addresses the accessibility of dynamic Web content for people with disabilities..." http://www.w3.org/TR/wai-aria-roadmap/ Scope and this in JavaScript By Jack Franklin. "Today I want to talk a little about scope in JavaScript and the this variable. The idea of "scope" is that it's where certain functions or variables are accessible from in our code, & the context in which they exist & are executed in..." http://javascriptplayground.com/blog/2012/04/javascript-variable-scope-this Google JavaScript Style Guide By Aaron Whyte, Bob Jervis, Dan Pupius, Eric Arvidsson, Fritz Schneider, and Robby Walker. http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml +07: MISCELLANEOUS. Implement Responsive Design with jQuery Mobile and CSS3 By Kris Hadlock. "On its own, the jQuery Mobile framework is a great solution for quickly creating an accessible, HTML5 markup-driven mobile website. When paired with CSS3, things really get interesting, as it becomes possible to create web page layouts that respond to a user's device based on the screen resolution. This article shows how to use the jQuery Mobile framework and CSS3 media queries to implement responsive design in your web pages." http://www.ibm.com/developerworks/web/library/mo-jquery-responsive-design/index.html The State of Responsive Images By Mat Marquis. "Designer/developer Mat 'Wilto' Marquis takes a look at the img tag, explains why a largest-size-fits-all approach to images is untenable and discusses different solutions in this ongoing saga." http://www.netmagazine.com/features/state-responsive-images Mocking Up Is Hard To Do By beardedstudio. "...The more time we've spent working on responsive websites, the clearer it's become that mock-ups aren't very good representations of the final product. They involve a lot of unnecessary abstraction that results in difficulty with...Our trials with this method so far have been very rewarding. It feels right to be creating interactions directly in their final medium, the browser. We feel more in touch with and inspired about our work than ever. It's clear to me now that for years we've just been designing pictures of websites. But now, finally, we're designing websites." http://blog.bearded.com/post/21447195970/mocking-up-is-hard-to-do Why We Shouldn't Make Separate Mobile Websites By Bruce Lawson. "There has been a long-running war going on over the mobile Web: it can be summarized with the following question: 'Is there a mobile Web?' That is, is the mobile device so fundamentally different that you should make different websites for it, or is there only one Web that we access using a variety of different devices? Acclaimed usability pundit Jakob Nielsen thinks that you should make separate mobile websites. I disagree...The vital point is that you never know better than your users what content they want...how can you reliably detect mobile browsers in order to redirect them? The fact is: you can't..." http://www.smashingmagazine.com/2012/04/19/why-we-shouldnt-make-separate-mobile-websites/ Browser Landscape At A Fast Pace By Karl Dubost. "...I was looking at the stats on statscounter between February 2012 and on one year, and I was amazed how the landscape is changing quickly. And it will continue to change very quickly. It's one of the reasons user agent sniffing will fail more in the future." http://my.opera.com/karlcow/blog/2012/03/29/browser-stats +08: NAVIGATION. Skip Links on Mobile and Tablets By Henny Swan. "Skips links are mainly useful for sighted keyboard only users on desktop and some screen reader users. While they're a recommendation rather than a requirement of WCAG 2.0 it's a feature that many websites built with accessibility choose to include..." http://www.iheni.com/skip-links-on-mobile-and-tablets/ +09: STANDARDS, GUIDELINES & PATTERNS. Let's Talk about Semantics By Mike Robinson. "It's time we had 'the talk'. I could get you a book or recommend some sites from Dr Mike's special bookmarks folder, but the best way to make sure you get the right idea is to do it myself. I'm talking about HTML semantics. Understanding the thinking behind the naming of elements will help your markup shine..." http://html5doctor.com/lets-talk-about-semantics/ Progress on HTML5 By Michael[tm] Smith. "When the HTML5 specifications advanced to Last Call, we wrote in this forum HTML5: Are We There Yet?. We're posting here today to give an update on progress made with the HTML5 specifications, and where we're heading next..." http://www.w3.org/QA/2012/04/progress_on_html5.html +10: USABILITY. Steph Hay - Writing Content for Usability By Sean Carmichael. "...Steph Hay, Co-Founder of FastCustomer comes to the rescue in her virtual seminar, Writing Content for Usability, full of her tips for writing compelling content. She explains that choosing the right words and tone are essential to getting users to take action. The audience asked a bunch of great questions during the live seminar and Steph joins Adam Churchill to address the ones that we didn't have time for in the podcast..." http://www.uie.com/brainsparks/2012/04/20/steph-hay-writing-content-for-usability/ Content Modelling - A Master Skill By Rachel Lovinger. "A content model is a powerful tool for fostering communication and aligning efforts between UX design, editorial, and technical resources on a project. By clearly defining the assembly model, the content types, and the content attributes, we can help make sure that the envisioned content strategy becomes a reality for the content creators. In my recent projects, I find that content modeling is more and more in demand. It's a valuable skill for any content strategist, especially those that strive for mastery. " http://www.alistapart.com/articles/content-modelling-a-master-skill/ [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.]