[webdev] Web Design Update: December 19, 2013

Laura Carlson lcarlson at d.umn.edu
Thu Dec 19 06:38:06 CST 2013 

+++ WEB DESIGN UPDATE.
- Volume 12, Issue 26, December 19, 2013.

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

++ISSUE 26 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: ASSOCIATIONS.
03: CASCADING STYLE SHEETS.
04: DRUPAL.
05: EVALUATION & TESTING.
06: EVENTS.
07: HTML5.
08: INFORMATION ARCHITECTURE.
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.

Accessible E-Learning
By W3C Web Accessibility Initiative.
Proceedings from the December 16, 2013 Accessible E-Learning Symposium.
http://www.w3.org/WAI/RD/2013/e-learning/#proceedings

Text Alternatives for Decorative Images
By Julie Grundy.
"By default, all images on a web page are announced by screenreader
software. As we talked about in our Best Practices post on text
alternatives, alt attributes on image elements give you the
opportunity to explain their content and purpose to people who can't
see them..."
http://simplyaccessible.com/bpow/decorative-images/

Create Section 508-Compliant Videos on Your Government Websites
By howto.gov.
"This guidance was created by an interagency group of 508 experts
based upon currently available research..."
http://www.howto.gov/social-media/video/508-compliant-video-guide

YouTube - Captioning Someone Else's YouTube Videos Using JWPlayer
By Art Morgan.
"We've had articles about this topic in our CaptionSync Support Center
knowledge base for quite awhile, but recently we had a request from
our friends at WebAIM to make a publicly available post about the
process that could be shared with people who don't have a CaptionSync
account..."
http://blog.captionsync.com/youtube-captioning-someone-elses-youtube-videos-using-jwplayer/

Accessibility Isn't a Buzzword, It's Personal
By Scott Kellum.
"Accessibility isn't about screen readers, contrast, or big fonts.
Accessibility is about people..."
http://scottkellum.com/2013/12/12/accessibility-isnt-a-buzzword.html

DOJ Joins Suit Against H&R Block, Saying Website Violates ADA
By Andrea Billups.
"The Justice Department has announced that it will intervene in a
private lawsuit filed against national tax preparation firm H&R Block,
saying its website does not allow sufficient access for people with
disabilities..."
http://www.newsmax.com/US/justice-H-R-Block-ADA-blind/2013/12/11/id/541274

Safeway Web Accessibility Settlement Agreement
By Law Office of Lainey Feingold.
"This is the settlement agreement about the accessibility of Safeway's
online grocery delivery website. The company worked on this initiative
in Structured Negotiations with individual customers with visual
impairments in California and Washington State. The Safeway shoppers
were represented by the Law Office of Lainey Feingold and Linda
Dardarian of the Oakland, California civil rights firm Goldstein,
Borgen, Dardarian & Ho..."
http://lflegal.com/2013/12/safeway-web/


+02: ASSOCIATIONS.

International Association of Accessibility Professionals
"The mission of the International Association of Accessibility
Professionals (IAAP) is to define, promote and improve the
accessibility profession globally through networking, education and
certification in order to enable the creation of accessible products,
content and services."
http://accessibilityassociation.org/


+03: CASCADING STYLE SHEETS.

Tracking Printed Pages (or How to Validate Assumptions)
By Adrian Roselli.
" I set about creating a dead-simple technique to track when print
styles are called using Google Analytics. I already used Google
Analytics' event tracking feature to track what links on my home page
are clicked, whether in my footer, in different content areas or in
the carousel that graces the bulk of the home page. All I needed was
to extend this same process to track print styles..."
http://webstandardssherpa.com/reviews/tracking-printed-pages/

Quick Tip - Text Characters as Visual Separators
By Karl Groves.
"I've been running into these pretty frequently lately so I figured
I'd throw something together about it: text characters as visual
separators..."
http://www.karlgroves.com/2013/12/17/quick-tip-text-characters-as-visual-separators/

What You May Not Know About the Z-Index Property
By Steven Bradley.
"The z-index property in CSS seems simple enough, but there's a lot to
discover beneath the surface if you really want to understand how it
works. In this tutorial we'll clarify the inner workings of z-index,
by looking at stacking contexts and a few practical examples."
http://dev.tutsplus.com/articles/what-you-may-not-know-about-the-z-index-property--webdesign-16892

About Variables in CSS and Abstractions in Web Languages
By Chris Coyier.
"Variables are coming to CSS. They already have implementations, so
there is no stopping it now..."
http://css-tricks.com/abstraction-in-web-languages-and-variables-and-stuff/

Learn CSS, Not the Framework
By Scott Kellum.
"I constantly see people in this industry just dumping styles into
their sites with no regard for what those styles are doing and how
they actually work. You, the person making the website, need to think
critically about what UI pattern is appropriate for your content, what
styles reflect the voice of that content, and how that CSS might bloat
your stylesheet. You should never have to bend or break the needs of
your content to satisfy a framework."
http://scottkellum.com/2013/12/11/ui-kit-is-dead.html#learn-css-not-the-framework

Happy 17th Birthday CSS
By John Allsopp.
"CSS1 became a W3C Recommendation (one of the very earliest) on this
day (if you're on the appropriate side of the international dateline)
back in 1996. 17 years, which is quite a long time in the technology
world (it actually predates the W3C's first HTML specification, HTML
3.2 by about 4 weeks). And what a long way it has come..."
http://www.webdirections.org/blog/happy-17th-birthday-css/


+04: DRUPAL.

Understanding Forms in Drupal
By Abbas Suterwala.
"Drupal helps you create and process forms right inside your module.
The APIs Drupal offers make it very simple to make an addition or
modification of your form as the forms are arrays and even the
validation and submission happens in a different function. This
modular approach keeps the form code in your module clean and easy to
maintain. You also do not need to bother with the HTML details of the
form if you use the Drupal form API - all the HTML is auto-generated.
Have fun creating your next form in your Drupal module"
http://www.sitepoint.com/understanding-forms-drupal/


+05: EVALUATION & TESTING.

Competitive Usability Evaluations - Learning from Your Competition
By Amy Schade.
"Data on what works well or poorly on other sites saves you from
implementing useless features and guides UX investments to features
that your users need."
http://www.nngroup.com/articles/competitive-usability-evaluations/


+06: EVENTS.

WebVisions New York
April 3-4, 2014.
New York, New York, U.S.A.
http://www.webvisionsevent.com/new-york/

WebVisions Barcelona
April 3-4, 2014.
Barcelona, Spain
http://www.webvisionsevent.com/barcelona/

Accessibility Summit
April 4-5, 2014.
Washington, D.C., U.S.A.
http://accessibilitysummit.org/

The Future Of Web Design
April 7-9 2014.
London, England, United Kingdom
http://futureofwebdesign.com/london-2014/

Web for All Conference
April 7-9, 2014.
Seoul, South Korea.
http://www.w4a.info/2014/


+07: HTML5.

HTML5 Form Validation
By Ian Oxley.
"...In this article we've walked through applying HTML5 form
validation to a booking form client-side without using any JavaScript,
and pointed out some accessibility issues to be wary of.  We then
looked at how new CSS3 pseudo-classes can be used to give visual cues
to the user as to which fields are required and options, and which
contain valid or invalid data. Finally we covered how to disable HTML
form validation, and detect whether form validation was available or
not in case we have to support browsers that are yet to support this
feature..."
http://www.sitepoint.com/html5-form-validation/

Subtitles and Captions With WebVTT
By Tiffany B. Brown.
"One drawback of HTML5 multimedia is accessibility. For hearing
impaired users, audio and video content is nearly-useless without an
alternative. This is where the track element and WebVTT come in
handy..."
http://tiffanybbrown.com/2013/12/14/subtitles-and-captions-with-webvtt/

WebVTT Discussions at FOMS
By Silvia Pfeiffer.
"At the recent FOMS (Foundations of Open Media Software and Standards)
Developer Workshop, we had a massive focus on WebVTT and the state of
its feature set. You will find links to summaries of the individual
discussions in the FOMS Schedule page. Here are some of the key
results I went away with..."
http://blog.gingertech.net/2013/12/18/webvtt-discussions-at-foms/


+08: INFORMATION ARCHITECTURE.

Avoid Category Names That Suck
By Hoa Loranger.
Categories and hypertext act as signs and should give people a strong
indication of what will happen even before they click on the link.
People avoid clicking on unknown items or, even worse, ignore them all
together.
http://www.nngroup.com/articles/category-names-suck/

The Power of Personas
By Brad Colbow and Indi Young.
"...Personas are a product of a larger process of building something
called a Mental Model."
http://uxmas.com/2013/the-power-of-personas


+09: JAVASCRIPT.

Demystifying this in JavaScript
By Nicolas Bevacqua.
"In this post I want to shed some light on this in JavaScript
hopefully bring some clarity to how this works. It's not all dark
magic, learning about this can be tremendously helpful to your
development as a JavaScript programmer. The inspiration for this post
comes from my recent work on the latest chapter for my upcoming book
on JavaScript Application Design (note: you can purchase the early
access edition now) in which I'm writing about how scoping works..."
http://flippinawesome.org/2013/12/09/demystifying-this-in-javascript/

Promises, Promises
By Stuart Langridge.
"I am not going to explain exactly what promises are, other than to
say: they're a way of making your asynchronous code look like it's
synchronous, because async code is hard to write, hard to understand,
and hard to debug 3. The important point to take away is: you can
start using promises now, and hardly anything will change in your
code. So you should do that..."
http://kryogenix.org/days/2013/12/12/promises-promises

ARIA Examples
By Heydon Pickering.
"Some practical ARIA examples to enhance your application accessibility..."
http://heydonworks.com/practical_aria_examples/

ARIA-autocomplete
By Rakesh Paladugula.
"An aria-autocomplete property is used when the suggestions of user
input items are known. The values of the aria-autocomplete can be
none, inline, list or both..."
http://www.maxability.co.in/2013/12/aria-autocomplete/


+10: MISCELLANEOUS.

Responsive Images - The Issues We Want To Solve
By Steven Bradley.
"...The most significant of the issues revolve around performance. How
do we deliver only the most appropriate image without requiring all
images be downloaded? Is it ok to deliver multiple images as long we
don't leave visitors waiting for content? Are there solutions where
the image itself adapts so only a single image is needed..."
http://www.vanseodesign.com/web-design/responsive-image-issues/

The Responsive Hover Paradigm
By Jenn Lukas.
"...There is no one-size-fits-all solution when it comes to hover
patterns. Design for your content. If you are providing important
information about driving directions or healthcare, you might want to
err on the side of designing for touch only. If you are behind an
educational site and trying to entice more traffic and sign-ups, or a
more immersive e-commerce site selling pies, then hover activity can
help support your content and engage your visitors without being a
detriment. While content can be our top priority, let's not forget
that our designs and interactions, hovers included, can have a great
positive impact on how visitors experience our site. Hover wisely,
friends."
http://24ways.org/2013/the-responsive-hover-paradigm/


+11: NAVIGATION.

Web Accessibility - Skip Navigation Links
By Andrew Jones.
"...One of the most common techniques in web accessibility is the
'Skip Navigation' link, sometimes referred to as 'Skip to Content.'
There are a couple of reasons why this feature is used on most
accessible websites..."
http://blog.bignerdranch.com/4455-web-accessibility-skip-navigation-links/


+12: STANDARDS, GUIDELINES & PATTERNS.

Web Standards for Writers
By Georgina Laidlaw.
"Remember the bad old days of all those 'writing for the web'
articles? Now, people writing for the web don't just have other
writers to rely on for advice-they have real, live standards to
follow! Hooray! Here, I've pulled together some of those standards,
and explained why they're useful, and for what kinds of web writing.
If you have others to add, we'd love to hear about them too..."
http://www.sitepoint.com/web-standards-writers/


+13: USABILITY.

The Interface That Gives
By Matt Morphett.
"...By designing systems that give first and then ask for input
subsequently, perhaps we can build the kind of relationship with our
users that we hope for with our kids around Christmas time."
http://uxmas.com/2013/the-interface-that-gives

Collapsible Header Sections - More Problematic Than Helpful
By Tom Johnson.
"I'm a flip-flopper when it comes to collapsible sections. Sometimes I
think they're great, and other times I think they're problematic..."
http://idratherbewriting.com/2013/12/11/collapsible-header-sections-more-problematic-than-helpful/

How Not to Throw Out 125 Million Dollars When Creating Applications
By W Craig Tomlin.
"...By incorporating usability testing and conducting user-centered
design as part of your application development process you will ensure
your design is user-friendly and successful. Failure to do so risks
the potential of your application not being used, which can waste 125
Million Dollars and four years of work.  As has been said before,
Failure is Not an Option!"
http://www.usefulusability.com/how-not-to-throw-out-125-million-dollars/

The Web Content and Web Marketing Dilemma
By Gerry McGovern.
"Marketing needs to change its obsession with short term thinking
about new customers and instead focus on building long term
relationships with existing ones. Content professionals need to change
their obsession with content and instead become obsessed with the
people who need their content."
http://www.gerrymcgovern.com/new-thinking/web-content-and-web-marketing-dilemma


[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.]

More information about the Webdev mailing list