[webdev] Web Design Update: July 10, 2014

Thu Jul 10 06:39:55 CDT 2014

+++ WEB DESIGN UPDATE.
- Volume 13, Issue 02, July 10, 2014.

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

++ISSUE 02 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: FLASH.
05: HTML5.
06: JAVASCRIPT.
07: MISCELLANEOUS.
08: NAVIGATION.
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.

Why Hackers Should Care About Accessibility
By Julian Taub.
"Most people think of "accessibility" as those little-used options on
their computer for disabled users. But not only does accessible design
make a piece of technology useful to all, but it also increases the
product user base and also makes it easier to use for people across
age brackets and cultural boundaries..."
http://www.fastcolabs.com/3032088/why-hackers-should-care-about-accessibility

Captioning Formats for Videos
By Lori Lane.
"A variety of captioning file formats exist, all of which differ
slightly in syntax. These different formats are used for captioning,
subtitling, karaoke, etc. in videos for both TV and on the web. Of the
many captioning file formats that are available, TTML and WebVTT are
the two that spark debates among developers. However, choosing the
correct file format is important for both accessibility and
compatibility..."
https://www.ssbbartgroup.com/blog/2014/07/08/captioning-formats-for-videos/

Provide Users with a Mechanism to Postpone Content Updates
By Denis Boudreau.
"Make sure users can control the pace at which automatic updates in
content occur.."
http://dboudreau.tumblr.com/post/90760896287/provide-users-with-a-mechanism-to-postpone-content

Converting Word to PDF or HTML - Options for Accessibility
By Terrill Thompson.
"I write a lot. I'm writing this blog post in the rich text editor
that's provided with WordPress, and I trust it will output nice clean
HTML. This is good way of working, but often my writing involves much
lengthier documents, and often I'm writing in collaboration with
others. The tool of choice for these projects tends to be Microsoft
Word, and often the final document will be published either in PDF or
HTML..."
http://terrillthompson.com/blog/517

Cleaning up Word HTML with Regular Expressions
By Terrill Thompson.
"Today I'm celebrating Independence Day by declaring independence from
presentational HTML markup!..."
http://terrillthompson.com/blog/535

Keyboard Navigation in Mac Browsers
By Becky Gibson.
"There are a few settings to be aware of when using the keyboard on a
Mac. There is a Keyboard System Preference to allow full tab key
navigation. The setting is in the keyboard pane at the bottom of the
shortcuts tab panel...."
http://www.weba11y.com/blog/2014/07/07/keyboard-navigation-in-mac-browsers/

New Accessibility Rules Coming to Airline Websites. Are You Ready?
By Ken Nakata.
"Imagine for a minute that you decide to take a vacation. You're
thinking Hawaii, Tahiti or the Alps. You grab your computer, open a
browser, type in your favorite airline and then stop. Why?
Unfortunately for 19 percent of the US population that live with
disabilities, this is the consequence when navigating to an
inaccessible website for air transportation."
http://www.tnooz.com/article/airlines-online-accessibility-regulations/

FCC Submits Report to Congress on Video Description
By Netflix Project.
"On June 30, 2014, the Federal Communications Commission (FCC)
released a Report to Congress (Report) on video description, as
required by the Twenty-First Century Communications and Video
Accessibility Act of 2010 (CVAA)..."
http://netflixproject.wordpress.com/2014/07/04/fcc-submits-report-to-congress-on-video-description/

+02: CASCADING STYLE SHEETS.

Breakpoints And The Future Of Websites
By Obinwanne Hill.
"...responsive web design has turned out to be somewhat of a case
study in the law of unintended consequences, with one of the perverse
unanticipated effects being breakpoint paranoia. But even without the
undue influence that media queries exerts on your selection of these
breakpoints, it dawns on you after much introspection that these might
not be the droids we're looking for. In this article, we'll look at
breakpoints beyond screen size and explore different possibilities and
practical approaches to using them to create truly adaptive
experiences on the web..."
http://www.smashingmagazine.com/2014/07/08/breakpoints-and-the-future-websites/

+03: COLOR.

Contrast Ratio - A New Color Contrast Tool
By Virginia DeBolt.
"Here's a very nice new tool for checking color contrast against WCAG
2.0 standards for accessibility. It was created by Lea Verou and is
called Contrast Ratio..."
http://www.webteacher.ws/2014/07/03/contrast-ratio-new-color-contrast-tool/

Support Information Conveyed by Color with Text
By Denis Boudreau.
"Make sure information conveyed through color is also conveyed through text..."
http://dboudreau.tumblr.com/post/74727772483/support-information-conveyed-by-color-with-text

Is Your Website Colorblind Friendly?
By Hello World Design.
"...Don't rely on color alone to convey messages to your website
visitors. To ensure your site is colorblind friendly, combine color
with other design techniques. Typography, grids, use of white space
and shapes can help you increase usability and create a visual
appealing website for visitors, no matter how the colors are
viewed..."
http://helloworlddesignco.com/web-design-news-portland-oregon.php?pid=51

+04: FLASH.

Creating an Accessible Media Player in Flash
By Daniel Oades.
"...With the rise of HTML5 most browsers and operating systems provide
good integration for accessibility (screen reader support, tab
controls etc) however Flash has always been problematic and requires a
lot more custom code in order to meet basic accessibility
requirements. The launch of SMP allowed us to completely rebuild our
accessibility implementation and ensure the player was designed and
coded with the BBC Accessibility Guidelines in mind..."
http://www.bbc.co.uk/blogs/internet/posts/Creating-an-accessible-media-player-in-Flash

+05: HTML5.

The Elements of HTML
By Steve Faulkner, Editor.
"A list of HTML and XHTML elements, past and present..."
http://w3c.github.io/elements-of-html/

Accessibility of Web Components
By Marcy Sutton.
"We've been talking a lot about Web Components as a community.
Encapsulation, templating, custom elements, polyfills: it's an
exciting time to be a developer! (<taco-button>, anyone?) Before we
create the next generation of soulless <div> tags, we should consider
the role of semantics in shiny, new technologies..."
http://webcomponents.org/presentations/accessibility-of-web-components-at-jsconf-us/

+06: JAVASCRIPT.

A Guide to JavaScript Modules
By jsmodules.
"The next version of JavaScript comes with a module system heavily
inspired by Node.js modules. Here's how it works..."
http://jsmodules.io/

The WAI Forward
By Heydon Pickering.
Excerpt of a chapter in Heydon's new eBook, "Apps For All: Coding
Accessible Web Applications.
"It's one thing to create a web application and quite another to keep
it accessible - independent of the device that the user is using and
its capabilities. That's why Heydon Pickering, now the accessibility
editor on Smashing Magazine, wrote an eBook Apps For All: Coding
Accessible Web Applications, outlining the roadmap for well-designed,
accessible applications..."
http://www.smashingmagazine.com/2014/07/09/the-wai-forward/

+06: MISCELLANEOUS.

For Developers, a Little UX can Go a Long Way
By Arijit Banerjee.
"It'Äôs inevitable that the software development process will continue
to evolve and the environment developers work in will continue to
change. In the future, it'Äôs likely that designers will get more
implementation savvy and developers will get more design savvy. For
today, developers need to realize the benefits of the product design
philosophy, because in the end, it'Äôs the users that matter the most.
Giving users what they want creates a base of passionate customers
that accelerates your growth and helps achieve market dominance."
http://uxmag.com/articles/for-developers-a-little-ux-can-go-a-long-way

Adapting Scrum to a UX Model
By Anindya Sengupta.
"...On a Scrum project, a UX team that does not follow Scrum as part
of its delivery model presents a serious challenge to realizing the
benefits of Scrum. To solve this problem, someone from the Development
team must serve as a point of contact and work closely with the UX
team on a regular basis to align the two teams' timelines, as well as
their expectations in terms of deliverables and requirements. This
will ensure the timely delivery of UX design artifacts, better
alignment on requirements, and a consistent process for providing
feedback to the UX team before development starts."
http://uxmatters.com/mt/archives/2014/07/adapting-scrum-to-a-ux-model.php

The 2014 M-Enabling Global Summit Videos
By Webable.tv.
Videos from the 2014 M-Enabling Global Summit held in Washington D.C.
http://www.webable.tv/Events/m_enabling_summit_2014.aspx

+08: NAVIGATION.

Low Findability and Discoverability - Four Testing Methods to Identify
the Causes
By Jennifer Cardello.
"Use IA- and UI-focused user research to determine if low findability
and discoverability are caused by site information architecture or
navigation design..."
http://www.nngroup.com/articles/navigation-ia-tests/

Mobile Menu AB Tested - Hamburger Not the Best Choice?
By James Foster.
"...Based on this and my previous AB test, a flat hamburger icon may
not be ideal on a responsive website (remember this is a website not
an app). Using the word MENU (and making it look like a button) could
be more helpful for visitors. This does not mean that users do not
understand the hamburger/sandwich 'Äì it could be that the word MENU
draws more attention...."
http://exisweb.net/menu-eats-hamburger

The Hamburger is Bad for You
By Morten Rand-Hendriksen.
"...Anecdotal and somewhat scientific evidence indicates people do not
intuitively understand the hamburger icon as an indicator of a menu
but have to learn its function. Pardon me as I feign shock and
surprise..."
http://mor10.com/hamburger-bad/

Why and How to Avoid Hamburger Menus
By Luis Abreu.
"Why and How to avoid Hamburger Menus, another excellent article
suggesting designers user Tab (or Tool) Bars rather than
hamburgers..."
http://lmjabreu.com/post/why-and-how-to-avoid-hamburger-menus/

+09: USABILITY.

Memory Recognition and Recall in User Interfaces
By Raluca Budiu.
"Showing users things they can recognize improves usability over
needing to recall items from scratch because the extra context helps
users retrieve information from memory."
http://www.nngroup.com/articles/recognition-and-recall/

Building a Business Case for Self-Service
By Gerry McGovern.
"The worst thing you could possibly do is make everything
self-service. 'Let's put everything online' has a lovely ring to it.
You hear it in government a lot. We publish everything because we're
transparent and we want to serve citizens. It's a noble idea but
unfortunately it usually ends up with an unmanageable, unfindable,
unusable online presence..."
http://www.gerrymcgovern.com/new-thinking/building-business-case-self-service

Changing YouTube Playback Speed
By Adrian Roselli.
"YouTube gives users the option to modify the playback speed of some videos..."
http://blog.adrianroselli.com/2014/07/changing-youtube-playback-speed.html

+10: XML.

Structuring, Grouping, and Referencing in SVG - The <g>, <use>, <defs>
and <symbol> Elements
By Sara Soueidan.
"SVG comes with its own ways for structuring a document by means of
certain SVG elements that allow us to define, group, and reference
objects within the document. These elements make reusing elements
easy, while maintaining clean and readable code. In this article we'll
go over these elements, highlighting the difference between them and
the advantages of each one..."
http://sarasoueidan.com/blog/structuring-grouping-referencing-in-svg/

[Section one ends.]

++ SECTION TWO:

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

Drupal Information.
http://www.d.umn.edu/itss/training/online/webdesign/drupal.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

HTML Information.
http://www.d.umn.edu/itss/training/online/webdesign/html.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.]