[webdev] Web Design Update: June 2, 2011

Laura Carlson lcarlson at d.umn.edu
Thu Jun 2 19:04:36 CDT 2011 

+++ WEB DESIGN UPDATE.
- Volume 9, Issue 49, June 2, 2011.

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

++ISSUE 49 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: COLOR.
04: DREAMWEAVER.
05: EVALUATION & TESTING.
06: EVENTS.
07: INFORMATION ARCHITECTURE.
08: JAVASCRIPT.
09: NAVIGATION.
10: PHP.
11: STANDARDS, GUIDELINES & PATTERNS.
12: TOOLS.
13: USABILITY.


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

[Contents ends.]


++ SECTION ONE: New references.

+01: ACCESSIBILITY.

Equal Opportunity for Learning: Accessibility and Education
By Glenda Sims.
"Today I read very powerful words about the right for everyone to have
equal access to education from the U.S. Office of Civil Rights. If you
are in edu, do all your students, regardless of disabilities, have
equal access to course content? See what the Office of Civil Rights
has to say..."
http://www.glendathegood.com/blog/?p=610

Screen-Reader Problems Uncovered In Olympics Ticket Site
By Dan Jellinek.
"Some blind web users may not have been able to buy tickets for next
year's London Olympics due to the partial inaccessibility of the
tickets website, testing by the charity AbilityNet has found..."
http://www.headstar.com/eablive/?p=588

Forms Within Tables - Doodle and Accessibility
By Terrill Thompson.
"I'm writing this blog post for at least three reasons..."
http://terrillthompson.blogspot.com/2011/05/forms-within-tables-doodle-approach-to.html

What Frustrates Screen Reader Users on the Web: A Study of 100 Blind Users
By Jonathan Lazara, Aaron Allena, Jason Kleinmana, Chris Malarkeya.
"In this study, 100 blind users, using time diaries, recorded their
frustrations using the Web. The top causes of frustration reported
were (a) page layout causing confusing screen reader feedback; (b)
conflict between screen reader and application; (c) poorly
designed/unlabeled forms; (d) no alt text for pictures; and (e) 3-way
tie between misleading links, inaccessible PDF, and a screen reader
crash. Most of the causes of frustration, such as inappropriate form
and graphic labels and confusing page layout, are relatively simple to
solve if Webmasters and Web designers focus on this effort..."
http://www.informaworld.com/smpp/section?content=a787987186&fulltext=713240928

Inclusive Web Design Principles
By culture.gov.uk.
"Inclusive design is where innovation and imagination flourish.
Meeting the needs of the widest variety of people does not inhibit
creativity. It opens our minds and inspires excellence..."
http://www.culture.gov.uk/what_we_do/telecommunications_and_online/8161.aspx


+02: CASCADING STYLE SHEETS.

CSS Regions, CSS Exclusions
By Bruce Lawson.
"At Web Directions and Opera's very own pubgeekmeetupaganza
standards.next, Stephanie Rewis and Peter Gasston discussed some of
the new proposals for layout in CSS, including the CSS Regions and
associated CSS Exclusions specs written by Adobe. For the first time,
layout is 'unboxed' and text can flow in (or around) arbitrary
shapes..."
http://www.brucelawson.co.uk/2011/css-regions-css-exclusions/

CSS Regions Prototype
By Adobe.
"This page contains information regarding a WebKit-based prototype of
CSS Regions, the proposed additions from Adobe to the W3C CSS
(Cascading Style Sheet) modules to build complex, magazine-like
layouts using web standards. Capturing in digital form the complex
layouts of a typical magazine, newspaper, or textbook requires
capabilities beyond those possible with the existing CSS modules. CSS
Regions is a proposal that describes how content creators can use some
additional basic building blocks to express complex layouts with
CSS..."
http://labs.adobe.com/technologies/cssregions/

Centering button elements and input buttons
By Roger Johansson.
"In a recent project I needed to add a button to a column on the page.
The design called for the button to be centered in the column. This
turned out to be slightly less straightforward than I initially
thought."
http://www.456bereastreet.com/archive/201106/centering_button_elements_and_input_buttons/

Discussing Alternatives for Various Sizes of the Same Image and
Introducing src Property in CSS as an Option
By Robert Nyman.
"Today I was just about to write a blog post about images and serving
different sizes depending on the device accessing it. Then the
Adaptive images post came up on the public-html at w3.org mailing list.
So let's look at that and add my thoughts..."
http://robertnyman.com/2011/05/30/discussing-alternatives-for-various-sizes-of-the-same-image-introducing-src-property-in-css-as-an-option/

2 And 3 Column Fluid CSS Layouts
By Steven Bradley.
"...The concepts for creating fluid layouts are mostly the same we
used in creating the fixed width layouts with a few key
differences..."
http://www.vanseodesign.com/css/fluid-layout-code/


+03: COLOR.

Contrast - Accessibility for Web Writers, Part 6
By Dey Alexander.
"People with low vision, age-related vision impairment or colour
blindness can have problems reading text when there is not enough
contrast between the text and background colours..."
http://www.4syllables.com.au/2011/05/accessibility-web-writers-part-6/

A Guide to CSS Colors in Web Design
By Alexander Dawson.
"With the exceptions of typography and layout, nothing has a more
profound impact on the way we design and craft websites than color -
from the visuals we showcase through images and media to the simple
choice of whether to use salmon pink or neon green to give a website
that '90s "Help, I'm going blind!" appeal. This simple guide will look
into CSS colors. You'll also find excellent color charts and tools to
help you work with color values..."
http://sixrevisions.com/css/colors-webdesign/


+04: DREAMWEAVER.

Best Tip Ever - Using Online CSS3 Tools In Dreamweaver
By Greg Rewis.
"...there is also an interesting text field that becomes active in
Live View at the top of the document window - an address field - just
like in a browser. And yes, you can type any URL into the field.
Dreamweaver, just like the browser, will load the page in Live
View..."
http://blog.assortedgarbage.com/2011/05/using-online-css3-tools-in-dw/


+05: EVALUATION & TESTING.

Making The Case For A/B Testing
By Justin Cutroni.
"We all know that web analytics is a process. And the most critical
part of that process is making changes. But deciding what changes to
make can often be very difficult. That's where website testing comes
into play..."
http://blog.clicktale.com/2011/05/28/making-the-case-for-ab-testing/

The Art of Design Research (and Why It Matters)
By Jon Freach.
"...sometimes design teams don't have the patience to see the value in
dragging out a study in an effort to make it scientifically or
statistically significant. We're just not wired that way; we prefer to
make and experiment and then analyze later. So what is research good
for?..."
http://www.theatlantic.com/life/archive/2011/05/the-art-of-design-research-and-why-it-matters/239561/


+06: EVENTS.

Design It. Build It. (DIBI)
June 7-8, 2011.
Newcastle upon Tyne, Unlined Kingdom.
http://www.dibiconference.com

Accessibility is Not a Checklist
June 11, 2011.
Baltimore, Maryland, U.S.A.
http://www.accessibilitybaltimore.org/2011/05/18/june-11-accessibility-is-not-a-checklist/

Open Web Camp III
July 16, 2011.
Palo Alto, California, U.S.A.
http://openwebcamp.org/


+07: INFORMATION ARCHITECTURE.

Tools for facilitating Feedback on Prototypes and Wireframes
By David Leggett.
Wireframes and Prototypes are an essential tool when building websites
and applications for clients. They're more than just a simple
deliverable or milestone-they function as a 'common communication
language' as Todd Zaki Warfel puts in Prototyping: A Practitioner's
Guide. Prototypes and Wireframes give us the ability to share ideas
that can otherwise be difficult to communicate, and sell designs that
might otherwise be dismissed..."
http://www.uxbooth.com/blog/tools-for-facilitating-feedback-on-prototypes-and-wireframes/


+08: JAVASCRIPT.

The void Operator in JavaScript
By Axel Rauschmayer.
"Syntax: void expr
evaluates expr and returns undefined. Its (rare) use is for contexts
where an expression is demanded, but the result has to be
undefined..."
http://www.2ality.com/2011/05/void-operator.html

Ten Oddities and Secrets About JavaScript
By Andy Croxall.
"...This article is aimed at intermediate developers who are curious
about more advanced JavaScript. It is a collection of JavaScript's
oddities and well-kept secrets..."
http://www.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/


+09: NAVIGATION.

Mobile Accessibility Tip - Use Visible Anchored Links
from Henny Swan.
"I'm not a huge fan of skip links as a solution for screen reader
users on desktop but agree wholeheartedly that visible ones are
extremely helpful for sighted keyboard only users who, unlike screen
reader users, are forced to tab through content in a linear fashion.
The real value being that they are visible - which is why I think of
them as anchored links rather than traditional skip links."
http://www.iheni.com/mobile-accessibility-tip-use-visible-anchored-links/


+10: PHP.

Object-Oriented PHP: Working with Inheritance
By Matt Doyle.
"...This tutorial explores the concept of parent and child classes;
overriding methods; final classes; abstract classes, and interfaces.
Example code included..."
http://www.elated.com/articles/object-oriented-php-working-with-inheritance/


+11: STANDARDS, GUIDELINES & PATTERNS.

Ensuring Accessibility Support in HTML5
By Judy Brewer.
"...Comments welcome through 3 August 2011...W3C has made it clear
that HTML5 must meet W3C's commitment to accessibility. Your comments
can help clarify what is needed to ensure that HTML5 provides support
for accessibility..."
http://www.w3.org/QA/2011/05/html5-lastcall-accessibility.html

HTML5 has Reached Last Call Status - Submit Feedback Until August 3
By Roger Johansson.
"On 25 May the W3C posted W3C Invites Broad Review of HTML5,
announcing that the HTML5 specification is now at Last Call and that
broad review is welcome until August 3, 2011..."
http://www.456bereastreet.com/archive/201105/html5_has_reached_last_call_status_submit_feedback_until_august_3/

HTML5 Accessibility Chops: ARIA & Validation
By Steve Faulkner.
"I tweeted the other day, suggesting people switch to the HTML5
doctype as the use of ARIA is conforming in HTML5. As things stand, if
ARIA roles, states and properties are used on HTML elements with a
doctype other than <!DOCTYPE html> a developer will get the unhelpful
error messages simply because the DOCTYPE they are using does not
recognise ARIA attributes as valid. This is not likely to change. So
make the switch..."
http://www.paciellogroup.com/blog/2011/06/html5-accessibility-chops-aria-validation/


+12: TOOLS.

WCAG 2.0 Audio Contrast Tool Help For Success Criteria 1.4.7
By eramp.
"WCAG 2.0, Success Criteria 1.4.7 is a guideline for accessible audio
files on the internet. The goal is to help people who are hard of
hearing understand the speech (foreground). This is done by making
sure that any background music or noise is very quiet. Background
music (or sound) should be at least 20dB lower than the foreground
speech."
http://www.eramp.com/WCAG_2_audio_contrast_tool_help.htm

Leveling up to HTML5
By Virginia DeBolt: Web Teacher by vdebolt
"HTML5 is getting pretty usable. I didn't say finished or official,
just usable. Doable..."
http://www.webteacher.ws/2011/05/31/leveling-up-to-html5/


+13: USABILITY.

Figuring Out How to Deal with Stupid Users
By Frank Spillers.
"There's a common belief that the problem with errors users make with
Web sites or Web apps has to do with differing intelligence levels.
Some users even blame themselves for being dumb. "Sorry about this", I
was told by an IT manager at a major financial institution, "It's just
that our users are lazy and stupid". If only, we could blame
intelligence, IQ or motivation! Waiting for smart users to use your
design is like trying..."
http://www.demystifyingusability.com/2011/05/figuring-out-how-to-deal-with-stupid-users.html

Analyzing the Impact of the Digital Fold
By Michele Hinojosa.
"In the traditional world, we talk about the importance of being
'above the fold': appearing in the top half of the front page of a
newspaper. However, on the web the picture is a little murkier.
Website visitors will use different screen resolutions, browsers,
window sizes and toolbars, essentially leading to a different 'fold'
line for every user..."
http://blog.clicktale.com/2011/05/29/analyzing-the-impact-of-the-digital-fold/

User-Interface, User-Experience and Usability Explained
By Bernhard Schokman
"So in short, when I'm 'interacting' with a website I'm using its
user-interface design. How I 'feel' and my 'preferences' when using it
is my user experience and how 'easy and intuitive' it is for me to
perform the functions I came to do, is a measure of its usability. As
you can see, it's really hard for someone to specialise in one of
these areas without an understanding of the other two."
http://www.myware.com.au/?p=628

Ubiquitous Usability
By Daniel Letts.
"For too long usability has been the preserve of geeks - a specialism
confined to websites and screens, form factors and devices. We need to
realise that usability - in other words 'how easily people can use
something to achieve a goal' shouldn't just be restricted to the lab
and the engineer. It should be something that everyone expects to get,
and everybody strives to provide. Usability should apply to all walks
of life and everything that we encounter - it should be ubiquitous. It
needs to be about the services we use and the spaces we inhabit..."
http://www.livework.co.uk/articles/ubiquitous-usability

The Only Two Things You Really Need To Know About Web Design
By Susan Weinschenk.
"...I realized that it boiled down to these two things:
1) On every page, does the visitor know what he or she is supposed to
do on that page? Is it clear why the page is there and what his or her
next action should be? 2) On every page, has the website
owner/business owner made it really clear how the visitor can take the
one action that the owner really wants and hopes the visitor to
take?..."
http://www.whatmakesthemclick.net/2011/05/31/only-two-things-really-need-know-about-web-design/


[Section one ends.]


++ SECTION TWO:

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

More information about the Webdev mailing list