+++ WEB DESIGN UPDATE.
- Volume 9, Issue 39, March 25, 2011.

An email newsletter to distribute news and information about web design and development. 

++ISSUE 39 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: INFORMATION ARCHITECTURE.
04: MISCELLANEOUS.
05: NAVIGATION.
06: STANDARDS, GUIDELINES & PATTERNS.
07: TOOLS.
08: USABILITY.


SECTION TWO: 
09:  What Can You Find at the Web Design Reference Site?

[Contents ends.]


++ SECTION ONE: New references.

+01: ACCESSIBILITY.

Make Your Images Accessible
By Ted Drake.
"Images make web pages interesting. So letÕs make them useful for everyone, not just those that can see them. That may seem like an oxymoron, but not if you think of them as either decoration or content. This page will introduce you to methods for properly using images on web pages..."
http://yaccessibilityblog.com/library/make-your-images-accessible.html 

NFB Questions Google Apps Accessibility
By John Eric Brandt.
"It should be noted that there are probably other mail systems and applications used in schools and universities that are not accessible to people with disabilities, but now that Google Apps for Education have been called on the carpet, it would be pretty hard to defend their use now. That is unless Google puts their tremendous technical skills and considerable wealth into fixing the Apps immediately."
http://jebswebs.net/blog/2011/03/nfb-questions-google-apps-accessibility/

CSUN 2011 Web Highlightse
By Leonie Watson.
"The California State University Northridge 26th Annual International Technology and Persons with Disabilities Conference, referred to simply as CSUN, was an extraordinary few days. People from all over the world gathered to share knowledge and discuss ideas. Here are a few highlights from the web stream..."
http://tink.co.uk/2011/03/csun-2011-web-highlightse/

The Web Accessibility Game Plan
By Jared Smith.
"'Do We Need To Change the Web Accessibility Game Plan' (inspired by this blog entry) was the title of a panel session I moderated this week at the CSUN conference. The panel consisted of Sandi Wassmer, John Foliot, and Jennison Asuncion. When I proposed and organized the panel, I did not anticipate being outnumbered by three Canadians, nor did I anticipate the amazing discussion and energy that would result. It was nerve-racking to manage the passionate conversation, especially in front of so many of my highly respected mentors and peers..."
http://webaim.org/blog/the-web-accessibility-game-plan/

Website Accessibility and Your Association
By Jennifer J. Salopek.
"Last summer, the U.S. Department of Justice issued an Advance Notice of Proposed Rulemaking that is likely to affect associations of any considerable size. Essentially, the federal government has advised organizations of its intent to enforce website-accessibility standards under the Americans with Disabilities Act. The DOJ is focusing on ensuring that covered entities provide ready access for the disabled to their websites..."
http://www.asaecenter.org/Resources/ANowDetail.cfm?ItemNumber=57701 

To PDF or Not to PDF? Online Accessibility for People with Disabilities
"The report says many technologies have accessibility issues but the Portable Document Format (PDF) is the one most often the subject of web accessibility complaints..."
http://www.probonoaustralia.com.au/news/2011/03/pdf-or-not-pdf-online-accessibility-people-disablities


+02: CASCADING STYLE SHEETS.

The CSS3 Flexible Box Layout (flexbox)
By Roger Johansson.
"In Flexible height vertical centering with CSS beyond IE7 I mentioned that you can use the properties from the CSS3 Flexible Box Layout Module Š flexbox Š to center an element horizontally and vertically. IÕll show how to do this along with some other examples of what you can do with flexbox..."
http://www.456bereastreet.com/archive/201103/the_css3_flexible_box_layout_flexbox/

When and How to Visually Hide Content
By Dennis Lembree.
"Visually hiding content on a web page, usually textual content, is at times a viable technique in web design and development. It can be done for several reasons, most importantly, to improve the experience of a screen reader user. Other reasons include improving readability when CSS cannot be rendered, and improving search engine optimization (SEO). For screen reader users, situations where the need arises include..."
http://designfestival.com/when-and-how-to-visually-hide-content/

Give Floats the Flick in CSS Layouts
By Andrew Tetlaw.
"If you're new to CSS layouts, you'd be forgiven for thinking that using CSS floats in imaginative ways is the height of skill. If you have consumed as many CSS layout tutorials as you can find, you might suppose that mastering floats is a rite of passage. You'll be dazzled by the ingenuity, astounded by the complexity, and you'll gain a sense of achievement when you finally understand how floats work. Don't be fooled. You're being brainwashed."
http://blogs.sitepoint.com/give-floats-the-flick-in-css-layouts/

Hardboiled CSS3 Media Queries
By Andy Clarke.
Making layouts responsive using CSS3 Media Queries are a big part of the work that IÕm doing for the Hardboiled Web Design site in the run up to the bookÕs launch..."
http://www.stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries

Hover on Everything But
By Chris Coyier.
"...But what if we want to have that hover state apply to everything but the element actually being hovered over? (e.g. other adjacent sibling divs)..."
http://css-tricks.com/hover-on-everything-but/

How to Create CSS3 Speech Bubbles Without Images
By Craig Buckler.
"...ItÕs now possible to create a great looking speech bubble which works in all browsers, uses a single HTML element, a few lines of CSS3 code, no images, and no JavaScript whatsoever..."
http://blogs.sitepoint.com/pure-css3-speech-bubbles/


+03: INFORMATION ARCHITECTURE.

Card Sorting
By usability.gov.
"Card sorting helps you build the structure for your Web site, decide what to put on the home page, and label the home page categories. It also helps to ensure that you organize information on your site in a way that is logical to your users..."
http://www.usability.gov/methods/design_site/cardsort.html


+04: MISCELLANEOUS.

Anatomy of a Design Decision (Video)
By Jared Spool.
"The best designs come from not one, but hundreds of well-made decisions. The worst designs arise out of hundreds of poorly-made decisions. All that stands between you and a great design is the quality of your decisions. Where do they come from? For the last five years, we've been studying how designers make their decisions. When do they use outside information, such as research about their users? When do they go with their gut instinct? When do the designers look to past decisions and the lessons theyÕve learned? What we found will surprise you. In this presentation, Jared will take you on an entertaining deep dive into the gut instinct of the best designers (without looking at all the gooey parts). YouÕll learn five styles of decision making, from Self Design to Experience-focused Design, and which style produces quality results. Prepare to learn how to be a better designer, as Jared shares the secrets of the best and worst."
http://vimeo.com/20881152


+05: NAVIGATION.

Context Menu Design
By Hagan Rivers.
"A context menu is a menu that contains commands specific to the object that the cursor is currently pointing at Š the 'target object'."
http://tworivers.com/blog/archives/489

A 1-Month No-Committee Web Redesign for Juniata College Homepage 
By Karine Joly.
"I found this homepage redesign interesting for several reasons, but the feature that really piqued my interest was a new navigation component, revisiting the whole audience-based scheme."
http://collegewebeditor.com/blog/index.php/archives/2011/03/24/a-1-month-no-committee-web-redesign-for-juniata-college-homepage-highered/


+06: STANDARDS, GUIDELINES & PATTERNS.

The Current State of HTML5 Forms
By Chris Coyier.
"...Since HTML5 is fairly new and not all the details have been worked out yet, not all web browsers support HTML5 features the same way. This page is intended to explore those new new features and help you understand which browsers are supporting which features and to what degree. As a whole, this represents the current state of HTML5 forms..."
http://wufoo.com/html5/

HTML5 Quick Feature: Summary and Details
By Louis Simoneau.
"Last week, the WebKit team added support for the HTML5 details and summary elements. This might leave some of you wondering: 'ok, but what are the details and summary elements?'..."
http://blogs.sitepoint.com/html5-summary-and-details/

New HTML Elements and Surrogate DIVs
By Thierry Koblentz.
"Last November, at the YUIConf, Tantek ‚elik gave a presentation titled "HTML5: Right Here, Right Now" (video, slides). I didn't attend this talk, but recently two colleagues of mine mentioned Tantek's presentation pointing out what he calls "HTML5: bulletproofing" (mentioned in the video @26:00 - slide #22 in the deck). The idea is to use new HTML elements without relying on Javascript (i.e. HTML5shim)...""
http://www.css-101.org/articles/thoughts_on_the_new_html_elements_and_surrogate_divs/

HTML5 Does NOT Allow 'Self-Closing' Tags*
By Tiffany B. Brown.
"One of the big misconceptions about HTML5 is that any tag can be self-closed. That's not true, though it appears that way..."
http://tiffanybbrown.com/2011/03/23/html5-does-not-allow-self-closing-tags/


+07: TOOLS.

TellMeMore Opera Extension
By Charles McCathieNevile.
"Find things that have more description available, and show them on demand. Where images (or something else) have a longdesc attribute, the extension notifies by changing its icon and title, and enables the user to see a list of the descriptions available, in its popup. When the user selects an item in the popup, a new window opens with the description in it."
https://addons.opera.com/addons/extensions/details/tellmemore/


+08: USABILITY.

10 Ways Mobile Sites Are Different from Desktop Web Sites
By Shanshan Ma.
"Web site design principles and best practices are becoming well known these days. For example: In a process funnel, progress status should be readily visible across its pages. We should prevent errors from happening, but when errors do occur, provide adequate guidance to help users resolve them..."
http://www.uxmatters.com/mt/archives/2011/03/10-ways-mobile-sites-are-different-from-desktop-web-sites.php


[Section one ends.]


++ SECTION TWO:

+06: 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.]