[webdev] Web Design Update: December 1, 2011

Thu Dec 1 06:35:45 CST 2011

+++ WEB DESIGN UPDATE.
- Volume 10, Issue 23, December 1, 2011.

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

++ISSUE 23 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: EVALUATION & TESTING.
04: EVENTS.
05: FLASH.
06: JAVASCRIPT.
07: MISCELLANEOUS.
08: NAVIGATION.
09: PHP.
10: STANDARDS, GUIDELINES & PATTERNS.
11: TOOLS.
12: USABILITY.

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

[Contents ends.]

++ SECTION ONE: New references.

+01: ACCESSIBILITY.

NC State University Moodle 2.1.1 Accessibility Evaluation
By Greg Kraus.
"NC State University currently uses Moodle 1.9.13 for course delivery
and is assessing Moodle 2.1.1 to determine the best upgrade path. Part
of this assessment is an accessibility evaluation. In the past NC
State has made modifications to Moodle that were not part of the core
code in order to make the environment more accessible. Moodle 2.0 and
later versions introduce many changes that impact accessibility, some
positively, some negatively. Some of the accessibility problems NC
State had to address previously have now been resolved. These include
the following..."
http://accessibility.oit.ncsu.edu/reports/moodle-2-1/

HTML5 - Techniques for Providing Useful Text Alternatives Updated
 Steve Faulkner, editor.
W3C Editor's Draft 25 November 2011
http://dev.w3.org/html5/alt-techniques/

Using HTML5 Headings
By Leonie Watson.
"HTML5 headings make it easy to syndicate and reuse content, without
breaking the heading hierarchy. Using HTML5 headings and keeping the
heading hierarchy backwards compatible proves unexpectedly complicated
though. The HTML5 specification has a solution, but is it the right
one?..."
http://tink.co.uk/2011/11/using-html5-headings/

Top 10 Steps Towards Making Your Mobile Apps More Accessible
By Stuart Dredge.
"Accessibility should be high on the priority list for app developers,
but where to start? Here are some ideas..."
http://www.guardian.co.uk/smart-accessibility/making-your-mobile-apps-more-accessible

How Expensive is Accessibility?
By Karl Groves.
"...Given the lack of data on this topic, I'm just as comfortable
saying accessibility costs nothing as I would be using some made-up
claim based on anecdotal evidence. "
http://www.karlgroves.com/2011/11/30/how-expensive-is-accessibility/

The Access Board's Inability to Get Section 508 Refresh Finalized is
Negligent and Counter to their Mission
By Karl Groves.
"I don't know why. I don't care why. What I do know is that the TEITAC
Committee issued its final report to the US Access Board on April
2008, yet today (11/17/2011) , we see this..."
http://www.karlgroves.com/2011/11/18/the-access-boards-inability-to-get-section-508-refresh-finalized-is-negligent-and-counter-to-their-mission/

Video Subtitling and WebVTT
By Tom Leadbetter.
"...A WebVTT (.vtt) file is simply plain text containing several types
of information about the video..."
http://html5doctor.com/video-subtitling-and-webvtt/

Validating WCAG Versions 1.0 and 2.0 through Usability Testing with
Disabled Users
Dagfinn Romen and Dag Svanas.
"...This paper reports on a study that empirically validated the
usefulness of using WCAG as a heuristic for website accessibility.
Through controlled usability tests of two websites with disabled users
(N = 7) and a control group (N = 6), it was found that only 27% of the
identified website accessibility problems could have been identified
through the use of WCAG 1.0. A similar analysis of conformance to WCAG
2.0 showed a marginal 5% improvement concerning identified website
accessibility problems. Compensating for the low number of test
subjects with confidence tests gave results that were still low (42%
for WCAG 1.0 and 49% for WCAG 2.0, with 95% confidence). It is
concluded from this that the application of WAI accessibility
guidelines is not sufficient to guarantee website accessibility. It is
recommended that future versions of the accessibility guidelines
should be based on empirical data and validated empirically and that
WAI expand their definition of accessibility to include 'usability for
all' in accordance with ISO 9241-171:2008."
http://www.springerlink.com/content/n22130l151258851/fulltext.html

+02: CASCADING STYLE SHEETS.

Multilevel Float - Simple Yet Awesome
By Niels Matthijs.
"Last night I solved a problem that's been bugging me for years. It
turned out the solution wasn't even all that difficult, yet somehow I
never came across the correct implementation before and so I'd figured
it just couldn't be done. To be honest, it made me feel quite stupid,
at the same time it made me realize I'm probably not the only one
struggling with this. So here's a blog post for all of you who've been
trying to stack elements residing in different dom levels..."
http://www.onderhond.com/blog/work/mutlilevel-floats-how-to

Vendor Prefixes Have Failed, What's Next?
By Lea Verou.
"Discussion about prefixes was recently stirred up again by an article
by Henri Sivonen, so the CSS WG started debating for the 100th time
about when features should become unprefixed. I think we need to think
out of the box and come up with new strategies to solve the issues
that vendor prefixes were going to fix. Vendor prefixes have failed
and we can't solve their issues by just unprefixing properties more
early..."
http://lea.verou.me/2011/11/vendor-prefixes-have-failed-whats-next/

Perplexing Prefixes
By Adrian A. Roselli.
"...I do like the idea of vendor prefixes only in the experimental
builds of browsers, but then developers may be disappointed that their
favorite new bleeding edge feature won't work for regular Joe users.
This isn't a simple issue, but getting developers to be more
responsible and judicious in their use of these new properties would
certainly help."
http://blog.adrianroselli.com/2011/11/perplexing-prefixes.html

Styling Buttons in iOS WebKit and -webkit-appearance:none
By Roger Johansson.
"I just recently ran into an issue when styling buttons that had me
pulling my hair for a while. I had my buttons looking the way they
were supposed to look in desktop browsers, but when I went to have a
look in Safari for iOS, much of my CSS wasn't applied. This was pretty
puzzling as I couldn't remember having any problems with buttons in
Safari for iOS before. After taking a closer look at the CSS I was
using for these particular buttons and the CSS I had used previously,
I managed to find out what made the difference..."
http://www.456bereastreet.com/archive/201111/styling_buttons_in_ios_webkit_and_-webkit-appearancenone/

Radial Gradient Readability
By Elika Etemad (fantasai).
At the CSSWG F2F last week, I raised the issue that the radial
gradients we were discussing were unreadable to me, and probably
therefore to much of the intended audience. It was not at all obvious
by looking at the gradient syntax what the various numbers and lengths
might be.
http://www.css3.info/radial-gradient-readability/

Don't Forget About transition: all
By Louis Lazaris.
"...If you've used CSS3 transitions a lot, then you probably already
knew about the 'all' keyword. I've actually been using transitions for
a while and had completely forgotten about this one until recently.
But definitely a 'good to know' type of thing that could come in handy
and may save you a few extra lines of code."
http://www.impressivewebs.com/css3-transition-all/

Responsive Web Design - Overflow Image with Vertical Centering
By Ivo Herrmann.
"If you want to use an image in your responsive web design you can use
fluid images. But there is another way. You can set a maximum height
and crop the image. If you want to learn more about it, check out the
tutorial that I wrote about the overflow image cropping..."
http://solemone.de/
http://solemone.de/code/responsive-web-design-overflow-image-with-vertical-centering/

CSS Media Queries and IE Fix
By Serban Ghita.
"...And of course they don't work on IE < 9.0, but I have a solution
that I'm already using on production servers. I wrote a small
JavaScript file that reads all the <link> elements from DOM, checks
which of them are destined for the current device resolution and
applies them..."
http://ghita.org/tipoftheday/css-media-queries-for-ie

+03: EVALUATION & TESTING.

Mainstreaming Web Site Usability Through Automated Usability Evaluation
By Justin Mifsud.
"This article contains an overview of the research that I carried out
prior to developing a framework whose objective is to address this
paradox. I have published most of it in a research paper in the
International Journal of Human Computer Interaction (Vol 2. Issue 1.
pp.10-30). I have also presented my findings at the DotNetNuke Web
Connections Conference 2011 which was held at the University of
Hamburg..."
http://usabilitygeek.com/mainstreaming-web-site-usability-through-automated-usability-evaluation/

Psychological Usability Heuristics
By Jordi Sanchez.
"...I have translated Susan [Weinschenk]'s points into a checklist of
heuristic principles that can be used to evaluate interfaces..."
http://uxmag.com/articles/psychological-usability-heuristics

Web Applications (RIA) Usability Heuristics
By Jordi Sanchez.
A proposal for a set of usability heuristics specifically compiled for
rich internet applications (RIA).
https://docs.google.com/spreadsheet/ccc?key=0An-LJr2fswPHdDJUTThJMjhXRTdXNmRUTU1WYnlsSWc&hl=en_US#gid=0

+04: EVENTS.

Website Accessibility Metrics
December 5, 2011.
Online.
http://www.w3.org/WAI/RD/2011/metrics/

+05: FLASH.

Experiment - Web Without a Flash Player
By Karl Dubost.
"So the news is all over the Web. Adobe stopped development of its
flash player for Mobile. I wanted to know how was I dependent on Flash
for my Web browsing and media consumptions. So two days ago, I
uninstalled flash..."
http://my.opera.com/karlcow/blog/2011/11/23/experiment-web-without-a-flash-player

Watch YouTube Videos Without Flash
By Karl Dubost.
"In my little experiment about using the Web without a Flash player,
as I mentioned earlier, it becomes hard to be able to view YouTube
videos. The funny thing is that I noticed that most of the time I can
see videos which have been put on blog post. These videos are added
through an iframe..."
http://my.opera.com/karlcow/blog/2011/11/24/watch-youtube-videos-without-flash

+06: JAVASCRIPT.

WAI-ARIA Gets Ready for a Starring Role in HTML5
By Scott Gilbertson.
"WAI-ARIA, the W3C's specification for Accessible Rich Internet
Application, provides web developers with a means of annotating page
elements with the roles, properties, and states that define exactly
what those elements do. The added definitions help screen readers and
other assistive devices navigate through your website..."
http://www.webmonkey.com/2011/11/wai-aria-gets-ready-for-a-starring-role-in-html5/

ECMAScript 6 Looks Promising
By Kishore Nallan.
"A quick look at some new features coming up in ECMAScript 6
(ECMAScript being the standardized parent language behind JavaScript)
including the 'let' keyword, default arguments, and multi-line
strings."
http://kishorelive.com/2011/11/22/ecmascript-6-looks-promising/

The Future of JavaScript (Video)
By Dave Herman.
A 50 minute presentation by Dave Herman (a Mozilla Labs engineer and
TC39 representative) at YUIConf 2011 about the future of JavaScript,
including features under consideration for ECMAScript 6.
http://www.yuiblog.com/blog/2011/11/21/video-yuiconf2011-dherma/

7 Common Javascript Mistakes or Confusions
By Toby Ho.
"While helping folks with Javascript on Stackoverflow or IRC, I've
noticed some common mistakes or confusions. I've made a list of these
in my little notebook and have been covering each of them in a
different blog post over the last month or so. This post wraps up this
series: and the 7 common Javascript mistakes or confusions are..."
http://tobyho.com/2011/11/16/7-common-js-mistakes-or-confusions/

+07: MISCELLANEOUS.

Origins of the Apple Human Interface
By Larry Tesler and Chris Espinosa.
"This is a verbatim transcript of a public lecture given on October
28, 1997. This transcript is Copyright 1997 by Computer History
Museum..."
http://www.computerhistory.org/events/lectures/appleint_10281997/appleint_xscript.shtml

Writing Forward Compatible Websites
By Boris Zbarsky.
"This is a list of best practices for creating websites that do not
break when browsers are updated. It's not always possible to follow
all of these, but following as many of them as possible will help
future-proof your website. This is especially important for intranet
applications and other non-public websites where problems are likely
to not be noticed during testing by browser vendors..."
https://developer.mozilla.org/Writing_Forward_Compatible_Websites

Twenty Years of W3C Mailing List Archives
By Phil Archer.
"'test again! If you get this, delete it. - sorry.'  That message,
with an id of 9110281334.AA06863@ nxoc01.cern.ch, is the oldest e-mail
in the W3C archive. Sent twenty years ago by TimBL at 14:34 GMT+1 on
28th October 1991."
http://philarcher.org/diary/2011/20yearsofmlarchives/

+08: NAVIGATION.

Writing Good Link Text
By Leonie Watson.
"Links are like sign posts. They should tell you what you'll find when
you follow them. Writing good link text isn't difficult, but there are
a few things to be aware of when you do..."
http://www.nomensa.com/blog/2011/writing-good-link-text/

+09: PHP.

Variables and Constants
By PHP Know How.
"In programming, a variable means a value holder. A variable can hold
the same value or the value it holds can get changed during the
runtime of a program..."
http://www.phpknowhow.com/basics/variables-and-constants/

Operators
By PHP Know How.
"Operators let you do various operations like adding two numbers,
joining two strings, comparing two values etc. There are two types of
operators as binary and unary. Binary needs two operands to do the
operation while unary requires only one."
http://www.phpknowhow.com/basics/operators/

Functions
By PHP Know How.
"A function is a block of code that you can call throughout your PHP
script. Functions are often used for common functionalities that can
occur in your PHP program. For an example think that you write a
program that relates to seasonal offers. In many occasions, you would
need to know the final price after a discount was given. You can
define a function for this as below..."
http://www.phpknowhow.com/basics/functions/

Practicing Regular Expressions with Search and Replace
By Chris Roberts.
"If you're just starting out with regular expressions (regex), the
syntax can seem a bit puzzling at first (I would recommend Jason
Pasnikowski's article as a good starting point). One of the things
that make it difficult to grasp regex in the beginning is the small
number of times you have a chance to use them in your code, which in
turn limits the amount of practice you have using them. Professionals
in any capacity, be it sports, entertainment, or development always
practice - some practice more than others..."
http://phpmaster.com/practicing-regular-expressions/

+10: STANDARDS, GUIDELINES & PATTERNS.

Lynx Would Not be Impressed - on Semantics and HTML
By Christian Heilmann.
"...Semantics are like wonderful prose. You use them to deliver an
enjoyable product. People are not celebrated for writing books. They
are celebrated for what they filled them with. If we keep putting
things on the web that have structure and get better on more
sophisticated display products we are building for the future. If we
point fingers at others doing it wrong we waste our time."
http://christianheilmann.com/2011/11/16/lynx-would-not-be-impressed-on-semantics-and-html/

HTML5 Accessibility Chops - Using Nested Figure Elements
By Steve Faulkner.
If you have a number of related images (or other content) with caption
text,  you can use nested figure elements to associate both a group
caption and an individual caption to each  instance using the
figcaption element..."
http://www.paciellogroup.com/blog/2011/11/html5-accessibility-chops-using-nested-figure-elements/

Will the Browser Wars Invade the Mobile Web?
By Arley McBlain.
"When it comes to the still emerging Mobile Web realm, I think we
should all be outraged about the trouble Windows Phone 7.5 can
unleash..."
http://sixrevisions.com/web-technology/mobile-browser-wars/

+11: TOOLS.

Tidy for HTML5
"This repo is a fork of the code from tidy.sourceforge.net. This
source code in this version supports processing of HTML5 documents.
The changes for HTML5 support started from a patch developed by Bjorn
Hohrmann..."
https://github.com/w3c/tidy-html5

+12: USABILITY.

Content Quality on Public University Websites
By John Eric Brandt.
"I found a link to this report by Siteimprove in the Accessibility
group on LinkedIn this morning regarding a recent review made of the
websites of 25 public universities in the United States. The study
covers five major aspects of each website including which content
management systems were used, how many broken links (per CMS) were
discovered, misspellings, common accessibility issues, and the use of
platform independent document formats..."
http://jebswebs.net/blog/2011/11/content-quality-on-public-university-websites/

Severe Change and the Sudden Loss of Competence
By Jared Spool.
"...Four Stages of Competence. These four stages are unconscious
incompetence, conscious incompetence, conscious competence, and
unconscious competence. As someone learns and adapts to your design,
they are working their way through the stages. The ultimate is the
user who is unconsciously competent - they can seemingly move through
the design with ease, accomplishing their goals without much attention
to the interface itself...If you're wondering why your most effective
users are really upset about sudden upgrades, I'd look to a sudden
loss of competence."
http://www.uie.com/brainsparks/2011/11/29/severe-change-and-the-sudden-loss-of-competence/

How To Make Forms More Usable With HTML5
By Steven Bradley.
"Forms are how we interact with websites. We use forms to contact site
owners, login to applications, reply to comments and so much more.
Forms generally don't inspire love. We don't like filling them out or
creating them. html5 forms want to help change that..."
http://www.vanseodesign.com/web-design/html5-forms/

Complexity and User Experience
By Jon Bolt.
""The best products don't focus on features, they focus on clarity.
Problems should be fixed through simple solutions, something you don't
have to configure, maintain, control. The perfect solution needs to be
so simple and transparent you forget it's even there. However,
elegantly minimal designs don't happen by chance. They're the result
of difficult decisions. Whether in the ideation, designing, or the
testing phases of projects, UX practitioners have a critical role in
restraining the feature sets within our designs to reduce the
complexity on projects."
http://www.boxesandarrows.com/view/complexity-and-user

Easier Is Better Than Better
By Paul Scrivens.
"In his book, The Paradox of Choice, Barry Schwartz comes to an
interesting conclusion involving human choice. 'People choose not on
the basis of what's most important, but on what's easiest to
evaluate.'..."
http://www.smashingmagazine.com/2011/11/28/easier-is-better-than-better/

[Section one ends.]

++ SECTION TWO:

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