[webdev] Web Design Update: March 25, 2011

Fri Mar 25 00:52:19 CDT 2011

+++ 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 at d.umn.edu

[Issue ends.]