[webdev] Web Design Update: October 17, 2013

Thu Oct 17 06:34:54 CDT 2013

+++ WEB DESIGN UPDATE.
- Volume 12, Issue 17, October 17, 2013.

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

++ISSUE 17 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: DREAMWEAVER.
05: DRUPAL.
06: EVALUATION & TESTING.
07: EVENTS.
08: HTML5.
09: JAVASCRIPT.
10: MISCELLANEOUS.
11: NAVIGATION.
12: STANDARDS, GUIDELINES & PATTERNS.
13: USABILITY.

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

[Contents ends.]

++ SECTION ONE: New references.

+01: ACCESSIBILITY.

Infinite Inputs - Welcome to the Party
By Henny Swan.
"Multiple ways of inputing and accessing information on the web is
standard in accessibility but with the proliferation of mobile,
tablets, touch, games consoles, kiosks (you name it) things are
changing."
http://www.iheni.com/infinite-inputs-welcome-to-the-party/

What Does Responsive Web Design Have to do with Accessibility?
By Jonathan Avila.
"A lot..."
https://www.ssbbartgroup.com/blog/2013/07/11/what-does-responsive-web-design-have-to-do-with-accessibility/

Longdesc Links, History, Future
By Dennis Lembree.
"Recently I Twittered daily about longdesc, the classic unsung HTML
attribute which supports long descriptions of images. Here's a summary
of the tweets/links..."
http://www.webaxe.org/longdesc-links-history-future/

Notes on Guidelines For Speech accessible HTML for Dragon NaturallySpeaking
By Steve Faulkner.
"...The document 'Guidelines For Speech accessible HTML for Dragon
NaturallySpeaking' includes poor guidance for HTML developers that
contradicts web standards and may lead to less accessible content. As
such it should not be used or cited as a credible resource."
http://blog.paciellogroup.com/2013/10/notes-guidelines-speech-accessible-html-dragon-naturallyspeaking/

Including Error Messages in Labels
By Jeff Smith.
"In this week's Best Practice of the Week (BPOW), we show you an easy
trick for making sure that all users are notified when form data
contains errors."
http://simplyaccessible.com/bpow/error-messages-in-labels/

What is This Thing and What Does It Do?
By Karl Groves.
Karl's slides from his Paris Web presentation.
http://dom.karlgroves-sandbox.com/slides/

+02: CASCADING STYLE SHEETS.

Arranging Elements from Top to Bottom instead of Left to Right (float: down?)
By Chris Coyier.
"Reader Marcin A wrote in with this question about a simple unordered
list in which they wanted the elements to be arranged in vertical
order (top to bottom) instead of horizontal (left to right)..."
http://css-tricks.com/arranging-elements-top-bottom-instead-left-right-float/

Initial-scale=1 makes Safari iOS React to Orientation Change
By Peter-Paul Koch.
"One common problem on iOS is that, when you use a meta viewport tag
with width=device-width, the page doesn't react to an orientation
change. On the iPhone the page becomes 320px wide and on the iPad
768px, regardless of whether you're in portrait or in landscape mode.
Sometimes this is annoying."
http://www.quirksmode.org/blog/archives/2013/10/initialscale1_m.html

+03: COLOR.

We Can't Rely on Color
By James Edwards.
"A recent article by Georgina Laidlaw on the flat UI design style got
me thinking about the accessibility implications of this trend, and
especially how it affects the use of color to convey information.
So I thought it would be useful to review these implications, have a
look at the accessibility requirements regarding the use of color, and
discuss some of the ways in which we can meet them...What concerns me
is that we're throwing away design components which actually served an
important purpose - powerful and well-understood visual cues, like
borders, bevels and shadows. A design response to this will inevitably
be more reliance on color and typography, and this in turn might lead
to more accessibility problems."
http://www.sitepoint.com/cant-rely-color/

+04: DREAMWEAVER.

Adding Text to Your Pages in Dreamweaver CC
By Tom Negrino and Dori Smith.
"The main message of most websites is conveyed by the site's text, and
a major part of your job in working with any site will be adding,
modifying, and styling that text. Dreamweaver gives you the tools you
need to effectively put text on your pages and get your message
across..."
http://www.peachpit.com/articles/article.aspx?p=2130937

+05: DRUPAL.

Creating a Menu Position Rule Programatically
By John Bickar.
"The Menu Position module provides a powerful way for Drupal to create
'virtual' menu items, and provides a graphical user interface to do
so. However, as a developer, sometimes you want to create those rules
in code. Here's how..."
https://swsblog.stanford.edu/blog/creating-menu-position-rule-programatically

+06: EVALUATION & TESTING.

Remote Usability Tests: Moderated and Unmoderated
By Amy Schade.
"Remote usability testing allows you to get customer insights when
travel budgets are small, timeframes are tight, or test participants
are hard to find."
http://www.nngroup.com/articles/remote-usability-tests/

+07: EVENTS.

Accessibility - It is Important
Online Workshop
This material is available through December 15, 2013.
https://www.atomiclearning.com/au/accessibility_wkshp

Madison PHP Conference
November 16, 2013.
Madison, Wisonsin, U.S.A.
http://www.MadisonPHPConference.com

M-Enabling Summit Conference
June 9-10, 2014.
Washington, D.C., U.S.A.
http://g3ict.org/events/schedule/event_overview/p/eventId_467/id_1058

+08: HTML5.

Using the HTML5 Section Element
By Leonie Watson.
"...The section element is not a div...The section element is a
thematic container...The section element should have a heading..."
http://blog.paciellogroup.com/2013/10/using-html5-section-element/

HTML5 Accessibility Presentation
By Steve Faulkner.
Stevs's slides from his Paris Web presentation.
https://docs.google.com/presentation/d/1gnQg-3jQSytv60ozANjM7BK-OhiP7elf13P5oXHT6CM/present

+09: JAVASCRIPT.

JavaScript Fundamentals
By Azat Mardanov.
"JavaScript inherits the best traits of pure mathematics, LISP and C#
which leads to a great deal of expressiveness (and, arguably, fun).
You can read more about expressive power in languages via this post."
http://flippinawesome.org/2013/10/07/javascript-fundamentals/

ARIA Roles T
By Rakesh Paladugula.
"The following ARIA roles begin with the letter 'T'..."
http://www.maxability.co.in/2013/10/aria-roles-t/

JS Responsibilities (Video)
By Brendan Eich.
JavaScript's creator gave a talk at JSConf EU about the current state
of JavaScript, what's coming along for the language next, and what
things need to be done. There's lots of technical stuff about the
language and its syntax to enjoy in just 30 minutes.
http://youtu.be/IXIkTrq3Rgg

+10: MISCELLANEOUS.

resimagecrop -  Responsive Image Solution
By Ian Devlin.
"...It's a simple RESS based PHP script called resimagecrop.php that
takes a number of arguments and returns an image based on the values
of those arguments..."
http://www.iandevlin.com/blog/2013/10/responsive-web-design/resimagecrop-a-responsive-image-solution

A Consensus to the Responsive Image Problem?
By Craig Buckler.
"Responsive Web Design is a simple technique until you consider
images. There are a number of issues.."
http://www.sitepoint.com/consensus-responsive-image-problem/

+11: NAVIGATION.

Full-Width Justified Vertically Centered Navbar
By Roger Johansson.
"In a couple of recent projects I've faced designs where the main
navigation bar gave me more trouble than usual. These are the
prerequisites that make the problem tricky to solve..."
http://www.456bereastreet.com/archive/201310/full-width_justified_vertically_centered_navbar/

+12: STANDARDS, GUIDELINES & PATTERNS.

The W3C is a Restaurant
By David Bruant.
"A fantasy lives in the head of a large number of people about the
role of the W3C in the web ecosystem. This fantasy is that the W3C
would decide what gets in the web platform and what doesn't, or even
that the W3C would set a vision for the web. This is completely
false..."
http://longtermlaziness.wordpress.com/2013/10/08/the-w3c-is-a-restaurant/#post-334

What is EME?
By Henri Sivonen.
"It was suggested at the Mozilla Summit that there isn't good
information around about what Encrypted Media Extensions (EME)
actually is. Since I'm on the HTML working group and have been reading
the email threads about EME there, I thought that I could provide an
introduction that explains things that may not be apparent from the
specification itself."
http://hsivonen.fi/eme/

+13: USABILITY.

Flat UI and Forms
By Jessica Enders.
"Though some decry flat user interfaces as pure fashion, or as the
obvious response to skeuomorphic trends, many designers have embraced
the flat approach because the reduction in visual styling (such as
gradients, drop shadows, and borders) creates interfaces that feel
simpler and cleaner. Trouble is, most flat UIs are built with a focus
on the provision of content, with transactional components (i.e.,
forms) receiving very little attention. So what happens when flat UIs
and forms collide? User experiences can, and often do, suffer. Keep
your flat forms from failing by using controlled redundancy to
communicate difference."
http://alistapart.com/article/flat-ui-and-forms

iOS 7 User-Experience Appraisal
By Raluca Budiu.
Flat design hides calls to action, and swiping around the edges can
interfere with carousels and scrolling.
http://www.nngroup.com/articles/ios-7/

Fight Against 'Right-rail Blindness'
By Hoa Loranger.
"As an adaptation to information overload, web users have trained
themselves to divert their attention away from areas that seem
unimportant or look like advertising. When designed well, sidebars can
effectively increase content discoverability and usability."
http://www.nngroup.com/articles/fight-right-rail-blindness/

[Section one ends.]

++ SECTION TWO:

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