[webdev] Web Design Update: November 4, 2011

Laura Carlson lcarlson at d.umn.edu
Fri Nov 4 06:19:44 CDT 2011 

+++ WEB DESIGN UPDATE.
- Volume 10, Issue 19, November 4, 2011.

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

++ISSUE 19 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: JAVASCRIPT.
06: PHP.
07: STANDARDS, GUIDELINES & PATTERNS.
08: TOOLS.
09: USABILITY.
10: XML.

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

[Contents ends.]


++ SECTION ONE: New references.

+01: ACCESSIBILITY.

The Hidden Nuggets of WCAG2 - Information Relationships
By Gian Wild.
"The Information and Relationships Success Criterion is a very complex
requirement. Unlike other success criterion, it is not sufficient to
comply with only one or two of the listed techniques – it is important
to comply with all the relevant techniques. This means that this
success criterion covers a wide range of requirements – in fact it
covers many WCAG1 checkpoints, such as table headers, headings, coding
lists etc."
http://www.sitepoint.com/the-hidden-nuggets-of-wcag2-information-relationships/

Measuring Accessibility
By Roger Hudson.
There has been much discussion, and some arguments, about how to
determine the accessibility of websites. Unfortunately, this is often
polarised around two simplistic choices: A compliance/conformance
based approach that usually involves a checklist of criteria; or, some
form of user testing by people who have different disabilities and/or
who rely on different assistive technologies. Both approaches have
their strength and limitations, and neither can provide a reliable
declaration about the accessibility of a site on its own.
http://www.dingoaccess.com/accessibility/measuring-accessibility/

Design with Accessibility in Mind
By Glenda Sims.
"I'm often asked to create the business case for building
accessibility in to your web process. Most organizations are very
responsive when I explain the benefits of universal design, the
crossover between accessibility and usability, as well as
accessibility and mobile design. By the time I explain the search
engine optimization benefits, they are often salivating and ready to
commit to accessibility. But, what happens when I'm working with a
company that is inaccessible but already has decent SEO? I remind them
that the litigation risks are real and the cost of retrofitting for
accessibility is significantly higher than designing with
accessibility in mind from the beginning. The thoughts I want etched
into their minds are..."
http://www.glendathegood.com/blog/?p=623

Assistive Technology Experiment: Dragon NaturallySpeaking
By Jon Whiting.
"This is a continuation of a series of posts about my personal quest
to learn more about some common assistive technologies. In my first
post, I outlined my experiences with ZoomText. Since then, I have
become more familiar with the speech recognition software Dragon
NaturallySpeaking (Premium) by Nuance..."
http://webaim.org/blog/at-experiment-dragon/


+02: CASCADING STYLE SHEETS.

CSS Media Queries on @import Rules
By Phil Archer.
"This page applies CSS Media Queries to an @import rule. It's designed
to show how you can conditionally import a stylesheet based, in this
case, on viewport width. Desktop browsers ignore any viewport
declaration so that the viewport is whatever the actual width of the
browser window is - and that's something you can easily change to see
how this works..."
http://philarcher.org/diary/2011/importrules/

A Case Study in Responsive Design
By Dan Sheerman.
"Over the last couple of days, I've had the task of taking the
Boagworld site and implementing all its responsive goodness. We went
live quietly, so you will now be able to resize this very post as
you're reading it..."
http://boagworld.com/dev/a-case-study-in-responsive-design/

CSS Borders: The Basics And Rounded Corners
By Steven Bradley.
"Last week I walked through the css background property. The other
half of the same W3C spec covers borders and so today I want to begin
a walk though of css borders..."
http://www.vanseodesign.com/css/borders-rounded-corners/

Demystifing Nth-Child in CSS
By Neal Grosskopf.
"I'm not going to lie, using nth-child has always made my brain hurt
when using it in CSS. Maybe it's the fact that math is involved and
for the most part, I can avoid math in most other areas of CSS except
this. I'm certainly not the first person to take a crack at explaining
it but I thought I'd give it a try..."
http://www.nealgrosskopf.com/tech/thread.php?pid=80

A Call for ::nth-everything
By Chris Coyier.
"With CSS3, we have positional pseudo class selectors to help us
select specific elements when there are no other distinguishing
characteristics other than where it is in the DOM in relation to it's
siblings.."
http://css-tricks.com/14771-a-call-for-nth-everything/


+03: EVALUATION & TESTING.

Measuring Usefulness
By Jeff Sauro.
"...it doesn't matter how easy to use a product is if people don't
find it useful.  Usefulness is the holy-grail of product design, it's
often even more important than revenue (think YouTube). How can we
predict what people will use?..."
http://www.measuringusability.com/blog/usefulness.php


+04: EVENTS.

Accessible Forms
November 14 - December 6, 2011.
Online Course
http://courses.cita.uiuc.edu/formsonline/

WebAIM Training
March 28-29, 2012.
Logan, Utah, U.S.A.
http://webaim.org/training/


+05: JAVASCRIPT.

Get Started with JavaScript
By IBM.
"Get a foundational understanding of the JavaScript language. Learn
the basics of working with JavaScript, and understand the libraries
you can use in development. Then use the practice exercise to explore
basic JavaScript concepts such as creating variables, using operators,
defining and accessing arrays, writing conditional statements,
structuring functions, and using loops..."
http://www.ibm.com/developerworks/training/kp/wa-kp-getstartedjs/index.html

Expanding Text Areas Made Elegant
By Tim Murtaugh.
An expanding text area is a mutli-line text input field that expands
in height to fit its contents. Commonly found in both desktop and
mobile applications, such as the SMS composition field on the iPhone,
it's a good choice when you don't know how much text the user will
write and you want to keep the layout compact; as such, it's
especially useful on interfaces targeted at smartphones. Yet despite
the ubiquity of this control, there's no way to create it using only
HTML and CSS, and most JavaScript solutions have suffered from
guesswork, inaccuracy, or a lack of elegance...until now..."
http://www.alistapart.com/articles/expanding-text-areas-made-elegant/

Why a WAI-ARIA Developer Portal is Important
By Aaron Leventhal.
"Making dynamic web content accessible is a huge challenge. WAI-ARIA
is the best available solution today. It's supported in all major
browsers and enables almost any dynamic content to be made accessible
- that's great. Accessibility is really important. But man oh man,
understanding WAI-ARIA is not easy for developers, who aren't always
born as accessibility experts..."
http://accessgarage.wordpress.com/2011/11/01/324/


+06: PHP.

Using the Ternary Operator
By Amanda Steigerwalt.
"You're probably already familiar with PHP's if statement. It's very
similar to its counterparts in many other programming languages and
represents one of the most fundamental concepts in programming. The if
statement is easy to understand and easy to master...But there's a way
to build on this concept.."
http://phpmaster.com/using-the-ternary-operator/


+07: STANDARDS, GUIDELINES & PATTERNS.

HTML5 or XHTML? Polyglot Documents Mean You Don't Have To Choose
By Phil Archer.
"...Converting an XHTML document into a polyglot document is easy. By
following a few relatively simple rules - some of which actively
encourage good practice - your markup can be parsed as either XML or
HTML5. Add in an HTML5 shiv (I use the one created by Remy Sharp) and
you're good to go with a document that is very likely to work as you'd
expect in just about any browser."
http://philarcher.org/diary/2011/polyglot/

Working With HTML5 Multimedia Components - Part 1, Video
By Ian Devlin.
"This tutorial introduces you to the video element, its attributes,
and the different types of video that can be used with it. It is the
first tutorial in a three-part series that covers the video element,
the audio element, and custom controls for working with both
elements..."
http://www.adobe.com/devnet/html5/articles/html5-multimedia-pt1.html

Working with HTML5 Multimedia Components - Part 2, Audio
By Ian Devlin.
"In Part 1 of this three-part series on working with HTML5 multimedia
components, I focused on embedding video in web pages using HTML5. Of
course, most videos include audio, and if you want to embed audio
files into your web pages you can  achieve this with HTML5 just as
easily."
http://www.adobe.com/devnet/html5/articles/html5-multimedia-pt2.html

HTML5 Kills <time>, Resurrects <u>
By Adrian A. Roselli.
"...Given all the ongoing tweaks to the HTML5 specification by WHATWG,
my opinion that dropping the version number and making it a living
document with no set versions is flawed. As developers who want to be
on the bleeding edge start to integrate elements and attributes from a
specification that's not fully baked, this moving target just means
more refactoring and ultimately cost or delays to the end users and/or
clients. "
http://blog.adrianroselli.com/2011/10/html5-kills-resurrects-occupyhtml5.html

Goodbye HTML5 <time>, hello <data>!
By Bruce Lawson.
It's with great sadness that I inform you that the HTML5 <time>
element has been dropped, and replaced by a more generic - and thus
less useful - <data> element. The pubdate attribute has been dropped
completely, so there is now no simple way to indicate the publication
date of a work.
http://www.brucelawson.co.uk/2011/goodbye-html5-time-hello-data/

Timeless
By Jeremy Keith.
"When I first heard that Hixie had removed all traces of the time
element from the ongoing HTML spec, my knee-jerk reaction was 'This is
a really bad idea!' But I decided not to jump in without first
evaluating the arguments for and against the element’s removal. That's
what I've been doing over the past week and my considered response
is..."
http://adactio.com/journal/4982/


+08: USABILITY.

Mobile Web Physician, Heal Thyself
By Phil Archer.
"...Guess what I've never done until now? Made this site
mobile-friendly. OK, I have now. There's still more to do but as of
now this site uses a variety of techniques to try to present content
in a way that can be read on desktop, tablet or mobile. Doing so has
made me think long and hard about some of the things I've been
teaching over the last three years and putting them into practice has
been very instructive."
http://philarcher.org/diary/#physician

Multi-Device Web Design: An Evolution
By Luke Wroblewski.
"As mobile devices have continued to evolve and spread, so has the
process of designing and developing Web sites and services that work
across a diverse range of devices. From responsive Web design to
future friendly thinking, here's how I've seen things evolve over the
past year and a half..."
http://www.lukew.com/ff/entry.asp?1436

Mobile Web Content Adaptation Techniques
By ronan.
"his article will help you pick from amongst the many techniques for
building a mobile website. It doesn't describe how to do it, rather it
instead tries to help you to pick the right approach..."
http://mobiforge.com/starting/story/mobile-web-content-adaptation-techniques

Why Headlines Attract More Attention Than Images
By uxmovement.
"When websites show content, they'll usually use a headline and image.
Headline and image quality is important in getting the user's
attention. However, the headline will always get the most attention no
matter what. Here's why..."
http://uxmovement.com/content/why-headlines-attract-more-attention-than-images/

Five Easy Ways to Improve Your Homepage
By Kim Krause Berg.
"It's easy to overlook important information that your website
visitors may need when they first arrive to your homepage. While
landing pages are helpful in guiding searchers to your site,
eventually even these folks will find themselves on your homepage.
Everyone has the same basic questions. These questions revolve around
Who, Where, What, When, Why and How. Answering them is fun, and not as
obvious as you might believe. Using them as guides for credibility,
trust, persuasiveness and desirability is an added bonus for your
overall conversion rates. Don't settle for a brief welcome statement
that offers no guidance or spark of interest. These six words can help
you add some zing..."
http://cre8pc.com/2011/10/27/five-easy-ways-to-improve-your-homepage/

When Credibility and Trust Matter More than Usability
By Jeff Sauro.
"The first step in building a successful website is to provide
something people want or need-like a product, information or service.
After that, it better be easy to use.  Now you may start to get users
telling their friends, tweeting about your website and posting it to
Facebook..."
http://www.measuringusability.com/blog/credibility.php

Dark Patterns -Deception vs. Honesty in UI Design
By Harry Brignull.
"Deception is entwined with life on this planet. Insects deceive,
animals deceive, and of course, we human beings use deception to
manipulate, control, and profit from each other. It's no surprise,
then, that deception appears in web user interfaces; what is
surprising is how little we talk about it. All the guidelines,
principles, and methods ethical designers employ to design usable
websites can be subverted to benefit business owners at the expense of
users. Study the dark side so you can take a stand against unethical
web design practices and banish them from your work..."
http://www.alistapart.com/articles/dark-patterns-deception-vs.-honesty-in-ui-design/


+09: XML.

Best Practices for Getting Started with SVG
By Jennifer Yu.
"...In this post, I offer ideas for when to use SVG in your HTML5 Web
sites and outline some best practices to help you get started with
SVG..."
http://blogs.msdn.com/b/ie/archive/2011/10/27/best-practices-for-getting-started-with-svg.aspx


[Section one ends.]


++ SECTION TWO:

+10: 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