[webdev] Web Design Update: January 10, 2013

Laura Carlson lcarlson at d.umn.edu
Thu Jan 10 06:19:18 CST 2013


+++ WEB DESIGN UPDATE.
- Volume 29, Issue 29, January 10, 2013.

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

++ISSUE 01 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: MISCELLANEOUS.
07: NAVIGATION.
08: STANDARDS, GUIDELINES & PATTERNS.
09: TOOLS.
10: USABILITY.

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

[Contents ends.]


++ SECTION ONE: New references.

+01: ACCESSIBILITY.

Things I Learned by Pretending to be Blind for a Week
By David Ball.
"I'm a full visually-able user and I love looking at websites. I know
though, that not everyone experiences websites in the same way.
Browsing websites at different screen sizes is a hot topic at the
moment, but lets not forget that it's not just mobile users that
experience websites differently, blind users experience them in a way
you might not even realise..." Hat Tip to Gez Lemon.
http://blog.silktide.com/2013/01/things-learned-pretending-to-be-blind-for-a-week/

HTML5 Caption Element and Headings
By Gez Lemon.
"Last year, I had an interesting conversation with my colleague Hans
Hillen, who suggested using regular HTML heading elements within the
data table's caption element. This technique is legal in HTML5, and
ensures that not only is there an accessible name for the data table,
but that screen reader users can also navigate using headings..."
http://juicystudio.com/article/HTML5_caption_element_headings.php

Accessible Browser Validation in HTML5
By Gez Lemon.
"HTML5 allows you to specify several useful input types, such as
email, url, and so on. When I updated Juicy Studio, I implemented the
email and url input types along with the required attribute for the
comment section. The email and url input types and required attribute
are implemented in the latest versions of Firefox, Chrome, and Opera,
but only the Firefox implementation is completely accessible..."
http://juicystudio.com/article/accessible_browser_validation_html5.php

Layout Tables and Repair Techniques
By Gez Lemon.
"...The table element should only be used for describing data tables,
rather than using tables for layout purposes. If layout tables
absolutely cannot be avoided, then using role="presentation" is
effective at ensuring that redundant table information isn't announced
to screen reader users. However, this can't be relied on alone when
form controls within fieldset legend elements are in layout tables for
JAWS users..."
http://juicystudio.com/article/layout_tables_repair_techniques.php

Acrobat XI Accessibility
By Matt May.
"On behalf of the Adobe Accessibility team, I'd like to welcome you
all to 2013. We've got a big year ahead of us, and we're starting with
some new documentation for Acrobat XI..."
http://blogs.adobe.com/accessibility/2013/01/acrobat-xi-accessibility-documentation.html

The Future of WCAG - Maximising its Strengths Not its Weaknesses
By Jonathan Hassell.
"2012 was a year of real ups and downs for the de-facto Standards for
web accessibility, WCAG 2.0..."
http://www.hassellinclusion.com/2013/01/wcag-future/

Amazon Accused of Noncompliance With Video Captioning Rules
By Phil Johnson.
"Deaf and hard of hearing consumer groups accuse Amazon of not
captioning streaming videos in compliance with the 21st Century
Communications and Video Accessibility Act.."
http://www.itworld.com/it-management/332699/amazon-accused-noncompliance-video-captioning-rules

Podcast #97: Responsive Design and Accessibility
By Dennis E. Lembree.
"Dennis speaks with George Zamfir on his background, his activity in
Toronto, and how Responsive Web Design (RWD) can benefit web
accessibility..."
http://www.webaxe.org/podcast-97-responsive-design-and-accessibility/


+02: CASCADING STYLE SHEETS.

All You Need to Know About CSS Transitions
By Alex Maccaw.
"CSS3 transitions bring simple and elegant animations to web
applications, but there's a lot more to the spec than first meets the
eye. In this post I'm going to delve into some of the more complicated
parts of CSS transitions, from chaining and events to hardware
acceleration and animation functions..."
http://blog.alexmaccaw.com/css-transitions

CSS Gradients
By Peter-Paul Koch.
"...The problem with gradients is that they are a syntactic nightmare.
The gradient spec writers and browser makers changed their mind not
once but twice. Thus we have three sets of syntax, and all three
occasionally crop up even today. I call these old, middle, and new
syntax..."
http://www.quirksmode.org/blog/archives/2013/01/css_gradients.html


+03: EVALUATION & TESTING.

Improving Your Website Usability Tests
By Damian Rees.
"...If you want to improve your usability testing technique, there is
no substitute for doing more tests. However, as I've highlighted here,
you can try to be aware of how the design of your tasks and how you
interact with the participant can affect the outcome of your
research..."
http://uxdesign.smashingmagazine.com/2013/01/08/improving-your-website-usability-tests/


+04: EVENTS.

Interaction Design Association Conference (IxDA)
January 27-31, 2013.
Toronto, Canada
http://www.ixda.org/conference

Mobile Web 1: Best Practices
Starts February 1, 2013.
Six week online class
http://www.w3devcampus.com/mobile-web-and-application-best-practices-training/

In Control
February 17-19, 2013.
Orlando, Florida, U.S.A.
http://2013.incontrolconference.com/

INDATA Full Day Training: Apps, Apps, Apps!
February 22, 2013.
Indianapolis, Indiana, U.S.A.
http://www.indatafulldaywintertraining2013.eventbrite.com/

Educause Midwest Regional Conference
March 18-20, 2013.
Chicago, Illinois, U.S.A.
http://www.educause.edu/midwest-regional-conference


+05: JAVASCRIPT.

Using ARIA in HTML
Steve Faulkner, Editor.
"This document is intended as a practical guide for developers. It
suggests what ARIA attributes to use on HTML elements. Suggestions are
based on implementation realities. It has no official standing within
the W3C. It is not intended as a static resource and will be updated
as new information arises..."
http://dvcs.w3.org/hg/aria-unofficial/raw-file/tip/index.html

Revisiting JavaScript Objects
By Lakshan Perer.
"...One of the main focuses of ES5, has been to improve the
JavaScript's object structure and manipulation. The features it
introduced do make lot of sense, especially if you're working with
large and complex applications..."
http://www.laktek.com/2012/12/29/revisiting-javascript-objects/

Shadow DOM 101
By Dominic Cooney.
"...Web Components is comprised of four parts: Templates, Shadow DOM,
Custom Elements and Packaging. Shadow DOM addresses the DOM tree
encapsulation problem. The four parts of Web Components are designed
to work together, but you can also pick and choose which parts of Web
Components to use. This tutorial will show you how to use Shadow DOM.
Shadow DOM is currently only available from Chrome 25, which is why
the API has a webkit prefix..."
http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/


+06: MISCELLANEOUS.

A Comparison of Methods for Building Mobile-Optimized Websites
By Johan Johansson.
"There's a debate over which technique of creating mobile-ready
websites is the best..."
http://sixrevisions.com/mobile/methods-mobile-websites/

Interview with Ian Hickson, HTML Editor
By Bruce Lawson.
"Hot on the heels of our interview with Robin Berjon, editor of HTML5
at W3C, over the weekend I interviewed Ian Hickson, editor of HTML
'The Living Standard' at WHATWG and, arguably, the most influential
individual working on the Web today."
http://html5doctor.com/interview-with-ian-hickson-html-editor/


+07: NAVIGATION.

Neutered Links: A.K.A. Removing the href Attribute
By Ted Drake.
"There's an old programming saying: Garbage in, Garbage out. This
helps people explain why all sorts of things don't work. Concentrate
on using the best content possible if you want a successful product,
web page, mobile app, or chocolate covered cream puff. I've seen a new
inaccessibility pattern appear with links that are not keyboard
accessible. This article will explain the problem, solution, and
provides a helpful bookmarklet for finding these neutered links on
your page..."
http://www.last-child.com/links-without-href-attribute/


+08: STANDARDS, GUIDELINES & PATTERNS.

Everything Old is New
By John Foliot.
"...we, the masses that feed the internet every day, have a
responsibility to ensure that the web works for everyone, not just
Chrome users. We do that by using and supporting Web Standards..."
http://john.foliot.ca/everything-old-is-new/

The Harsh Truth About HTML5's Structural Semantics, Part 1
By Luke Stevens.
"HTML's structural elements - article, section, nav and aside - are,
at first glance, some of the easiest parts of the HTML5 specification
to understand..."
http://www.webdesignerdepot.com/2013/01/the-harsh-truth-about-html5s-structural-semantics-part-1/


+09: TOOLS.

Longdesc Chrome Plugin
By Chris Kennish.
"Highlights and provides right-click access to image long
descriptions, where provided."
https://chrome.google.com/webstore/detail/longdesc/haohljalgapbacpkfefnmhiadanhejmb

RoboBraille
By The RoboBraille Consortium.
"RoboBraille is an email service which can convert digital text
documents into either Braille or audio files..." Supported input file
types are .doc, .docx, .pdf, .txt, .xml, .html, .htm, .rtf, .epub,
.mobi, .tiff, .tif, .gif, .jpg, .bmp, .pcx, .dcx, .j2k, .jp2, .jpx,
.djv and .asc
http://www.robobraille.org/frontpage
RoboBraille YouTube Video:
http://www.youtube.com/watch?v=-cAVp0dnzoc


+10: USABILITY.

When Infinite Scroll Doesn't Work
By Dmitry Fadeyev.
"...An infinite scroll works well for something like Twitter where
you're linearly consuming an endlessly flowing stream of data without
looking for anything in particular, but for search results pages where
people are looking for a specific item and where the location of all
the items the user has viewed matter, the paginated interface wins
out."
http://www.usabilitypost.com/2013/01/07/when-infinite-scroll-doesnt-work/

6 Essential Mobile Email Design Best Practices with Examples
By Christian Watson.
"A recent report and infographic from ReturnPath shows that mobile
email usage has now clearly surpassed its desktop and webmail
counterparts, which ties with data from Campaign Monitor showing the
same trend. Given that mobile email use shows no sign of slowing, here
are six key best practices, with examples, for creating attractive and
effective emails for mobile devices..."
http://www.smileycat.com/miaow/archives/003028.php


[Section one ends.]


++ SECTION TWO:

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