[webdev] Web Design Update: January 30, 2014

Laura Carlson lcarlson at d.umn.edu
Thu Jan 30 06:32:04 CST 2014


+++ WEB DESIGN UPDATE.
- Volume 12, Issue 32, January 30, 2014.

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

++ISSUE 32 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: HTML5.
06: JAVASCRIPT.
07: NAVIGATION.
08: TYPOGRAPHY.
09: USABILITY.

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

[Contents ends.]


++ SECTION ONE: New references.

+01: ACCESSIBILITY.

Effective January 1 - New University Web Accessibility Standard
By ITSS, University of Minnesota Duluth.
"The W3C Web Content Accessibility Guidelines 2.0 (WCAG), level AA,
now serve as Web accessibility standards for the University of
Minnesota..."
http://blog.lib.umn.edu/itsshelp/news/2014/01/effective-january-1-new-university-web-accessibility-standard.html

Endangered Species of the Web - The Image
By Christian Heilmann.
"...If the image plays an important role to the message of the
document, or represents an interactive element like a button, use an
img tag. These allow for alternative texts and error handling much
easier than CSS solutions do. If you use an img give it a sensible
alternative text, do not omit the alt attribute or give it an empty
attribute or [image]..."
http://christianheilmann.com/2014/01/23/endangered-species-of-the-web-the-image/

Provide alt Attributes for Active Images
By Denis Boudreau.
"Make sure link images have alt attribute values that properly
describe their purpose..."
http://dboudreau.tumblr.com/post/74918343534/provide-alt-attributes-for-active-images

Simple Accessibility Updates to Improve New York Times New Redesign - Part 1
By John F. Croston III.
"...I found that the New York Times had missed a lot of what I thought
were easy items, such as missing ALT text, empty or missing headings,
missing form LABELs, etc. I was able to confirm Patrick's findings. On
Saturday evening at about 6:30 PM EST with the WebAIM WAVE toolbar, I
found 115 errors...."
http://www.jfciii.com/blog/2014/01/27/simple-accessibility-updates-to-improve-new-york-times-new-redesign-part-1/

Part of the Plan - Accessibility From Design to Development
By Gerry Heaton.
"...70% of accessibility issues could have been avoided..."
http://www.visionaustralia.org/living-with-low-vision/learning-to-live-independently/using-technology-and-computers/blog---accessibility-and-assistive-technology-blog/blog/accessibility-blog/2014/01/21/accessibility-by-design-a-process-to-reduce-retrofit

Mobile APP-cessibility - A Holistic Approach
By Digital Access Team.
"It could be said that mobile devices have the most to gain from
accessibility. Not only will accessible features support various
disability groups, they can assist all users when environmental
factors come into play. Why, then, are a number of user groups being
forgotten when it comes to the accessibility of mobile apps?..."
http://www.visionaustralia.org/living-with-low-vision/learning-to-live-independently/using-technology-and-computers/blog---accessibility-and-assistive-technology-blog/blog/accessibility-blog/2014/01/21/mobile-app-cessibility-a-holistic-approach


+02: CASCADING STYLE SHEETS.

The Current Generation of CSS3 Selectors
By Louis Lazaris.
"After CSS 2.1, the W3C added a whole slew of new selectors to help us
target elements in unique ways. Just about all of these selectors have
excellent browser support, so you can - and probably should - already
be using them..."
http://www.sitepoint.com/current-generation-css3-selectors/

Embedding Video in a Responsive Site
By Rob Glazebrook.
"We live in the future, and one of the benefits of our brave new world
is the thousands of cat videos that are just a click away. Let's say
you've just found the perfect felicitous feline video to share with
all your friends. You post it to your fancy responsive website quick
as a flash (because it's the future and we can do that), but whoops:
the video doesn't fit! It's too wide, too narrow, or just awkwardly
sized. Let's fix that..."
http://www.cssnewbie.com/embedding-video-responsive-site/

CSS Variables - How To Use Custom Properties For Cascading Variables
By Steven Bradley.
"We live in the future, and one of the benefits of our brave new world
is the thousands of cat videos that are just a click away. Let's say
you've just found the perfect felicitous feline video to share with
all your friends. You post it to your fancy responsive website quick
as a flash (because it's the future and we can do that), but whoops:
the video doesn't fit! It's too wide, too narrow, or just awkwardly
sized. Let's fix that..."
http://www.vanseodesign.com/css/native-variables/

On CSS Variables
By Thomas Gossmann.
""Since Firefox supports CSS variables in their nightly build (version
29), I recently tested CSS variables (View on dabblet). While the spec
has changed over one and a half year ago to use the var-* syntax,
Atkins Jr (spec author) also explains why..."
http://gos.si/blog/on-css-variables

Px to Rem Conversion
By Estelle Weyl.
"If you have :root {font-size: 16px;} you can use the following table
to convert from PIXELS to REMS..."
http://www.standardista.com/px-to-rem-conversion-if-root-font-size-is-16px/


+03: EVALUATION & TESTING.

Expert Reviews - What Works Best?
By Janet M. Six.
"...Instead of noting each instance of a problem, you can note just
one example, indicate that it's prevalent throughout the user
interface, and describe the impact that has overall..."
http://uxmatters.com/mt/archives/2014/01/conducting-expert-reviews-what-works-best.php


+04: EVENTS.

jQuery Conference San Diego
February 12-13, 2014.
San Diego, California, U.S.A.
http://events.jquery.org/2014/san-diego/

London JS Conf
February 13, 2014.
London, England, United Kingdom
http://www.londonjsconf.com/

Snow*Mobile
February 21-22, 2014.
Madison, Wisconsin, U.S.A.
https://tito.io/sapling/snow-mbile/

Usability Week San Diego
February 24-27, 2014.
San Diego, California, U.S.A.
http://www.nngroup.com/training/san-diego/

Mobile World Congress
February  24-27, 2014.
Barcelona, Spain
http://www.mobileworldcongress.com/

The Intersection of Cloud and Mobility
March 25-27, 2014.
Gaithersburg, Maryland, U.S.A.
http://www.nist.gov/itl/cloud/intersection-of-cloud-and-mobility.cfm


+05: HTML5.

The Rock'n'roll Guide to ARIA and HTML5 (Video)
By Leonie Watson.
"Leonie's Generate Conference 2013 presentation"
http://www.youtube.com/watch?v=Fe1behOSjdU
Slides:
http://www.slideshare.net/LeonieWatson/generate-2013-09


+06: JAVASCRIPT.

Why is Progressive Enhancement so Unpopular?
By Drew McLellan.
"...Does that mean we shouldn't use JavaScript? Of course not.
Scripting in the browser is an important part of the experience of
using the web in 2014. It's my opinion that you shouldn't depend on
JavaScript running for your site to work. Build with HTML, add styling
with CSS, add behaviour with JavaScript. If the JavaScript fails, the
HTML should still work..."
http://allinthehead.com/retro/367/why-is-progressive-enhancement-so-unpopular

Prototypes Are Not Classes
By raganwald.
"JavaScript does not have classes. JavaScript has prototypes, and
prototypes are not classes. And understanding why JavaScript's
prototypes are not classes can be helpful for understanding how to
'Think in JavaScript' and indeed how to 'Think in Objects'..."
http://raganwald.com/2014/01/19/prototypes-are-not-classes.html

Binary Bitwise Operators in JavaScript
By Axel Rauschmayer.
"This blog post describes JavaScript's binary bitwise operators:
bitwise And (&), bitwise Or (|), and bitwise Xor (^)..."
http://www.2ality.com/2014/01/binary-bitwise-operators.html

Introducing an Accessible Accordion Widget
By Shaumik Daityari.
"At the dawn of the millennium, a blind gentleman successfully sued
the Sydney Organizing Committee of the Olympic Games as they had
failed to make the official website of the Olympic Games adequately
accessible to blind users. Over the years, many such cases have come
to light, and numerous acts have been passed in various countries
which make it mandatory for you to make your website adequately
accessible..."
http://www.sitepoint.com/introducing-accessible-accordion-widget/


+07: NAVIGATION.

Skip-To Widget
By PayPal Accessibility Team.
"SkipTo is a replacement for your old classic "Skipnav" link, (so
please use it as such)! The SkipTo script creates a drop-down menu
consisting of the links to the important places on a given web page.
The menu will make it easier for keyboard and screen reader users to
quickly jump to the desired location by simply choosing it from the
list of options..."
http://paypal.github.io/SkipTo/


+08: TYPOGRAPHY.

@font-face is a Nice Idea But...
By David Dorward.
"I like the idea of @font-face, but some implementations leave a
little to be desired..."
http://dorward.me.uk/blog/2014/01/24/font-face


+09: USABILITY.

Designing for Easy Interaction
By Sarah Horton and Whitney Quesenbery.
"Success in interaction design is largely a matter of following
established patterns, so people can apply what they already know to
new contexts. Using known and well-established interactive controls
goes a long way in designing for easy interaction. There are specific
considerations that will help make controls more usable for people
using assistive technologies. And there are design considerations that
make interaction more usable and enjoyable for everyone, including
people with disabilities."
http://alistapart.com/article/designing-for-easy-interaction

All Content Must Prove Value
By Gerry McGovern.
"Some believe that because they are not involved in commercial
websites they don't have to prove value. That's not true."
http://www.gerrymcgovern.com/new-thinking/all-content-must-prove-value

Cards - The Next Paradigm?
By Wan-Ting Huang.
"I'm going to share some insights about cards and explore other design
patterns that those drawn to cards might want to consider...The cards
design pattern is a smart solution for the modern web, which is both
dynamic and responsive. However, the pattern has its limitations and
might be a challenge to adopt when designing for a complex
interface..."
http://echouser.com/blog/cards-the-next-paradigm/


[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