[webdev] Web Design Update: September 9, 2013

[Laura Carlson]

+++ WEB DESIGN UPDATE.
- Volume 12, Issue 11, September 9, 2013.

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

++ISSUE 11 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: DRUPAL.
05: EVALUATION & TESTING.
06: EVENTS.
07: HTML5.
08: JAVASCRIPT.
09: MISCELLANEOUS.
10: TOOLS.
11: USABILITY.
12: XML.

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

[Contents ends.]


++ SECTION ONE: New references.

+01: ACCESSIBILITY.

Making an Accessible Form with ARIA, Part 2
By Lisa Seeman.
"In this blog we are going to use ARIA to make an accessible form with
validation checking; however, you can also use this as an example of
how to use ARIA to make any dynamic content accessible."
http://www.deque.com/making-accessible-form-aria-part-2

Accessibility Through Video Captions
By Alastair Campbell.
"Video captions are important for accessibility and search engines.
Edit YouTube captions to prevent bloopers, says Alastair Campbell..."
http://www.netmagazine.com/tutorials/accessibility-through-video-captions

BPOW - Title Attributes
By Joanna Briggs.
 "Title attributes seem to end up everywhere. And, you really don't
need them because most of the time they're just creating redundant
information. For people with screenreaders, they might hear the title
and the text - or just the link text. But, title attributes also have
an impact on low vision users who use screen magnification."
http://simplyaccessible.com/bpow/title-attributes/

3.2.3.2 The Title Attribute
HTML 5.1 Nightly Spec.
"...Relying on the title attribute is currently discouraged as many
user agents do not expose the attribute in an accessible manner as
required by this specification (e.g. requiring a pointing device such
as a mouse to cause a tooltip to apear, which excludes keyboard-only
users and touch-only users, such as anyone with a modern phone or
tablet)..."
http://www.w3.org/html/wg/drafts/html/master/dom.html#the-title-attribute

Creating Accessible PDF Documents In Adobe Acrobat XI
By National Center on Disability and Access to Education (NCDAE).
Select Tools from the upper right corner, then select Action Wizard >
Make Accessible from the sidebar. Select Start button.
http://www.ncdae.org/resources/cheatsheets/acrobat-xi.php

Accessible Mozilla - Tech Overview of Firefox 25
By Alexander Surkov.
"...longdesc attribute is exposed in Firefox context menu (see bug) as
"View description" menu item. Right click on the image having a
longdesc allows you to see it in new tab..."
http://asurkov.blogspot.ca/2013/09/accessible-mozilla-tech-overview-of.html

Think About ARIA Roles When Choosing a WordPress Theme
By Virginia DeBolt.
"ARIA landmark roles are used to improve accessibility and provide
useful navigation points that a screen reader recognizes and can find
quickly..."
http://www.webteacher.ws/2013/09/06/think-aria-roles-choosing-wordpress-theme/


+02: CASCADING STYLE SHEETS.

The CSS Grid Layout Module - Flexible Structures for Content
By Steven Bradley.
"I often suggest that designing with a grid is a good idea. Developing
them in html and css sometimes feels like a hack, though. Developers
certainly build grids for use online and there are a variety of
frameworks you can use that do the work for you. Still, wouldn't it be
nice to have some native css for creating grids? That native css is on
its way in the form of the CSS Grid Layout Module..."
http://www.vanseodesign.com/css/grid-layout-module/

CSS Grids - Examples and Code for Common Layouts
By Steven Bradley.
"Earlier in the week I walked through the css grid layout module.
There was a lot to cover and as the post grew long I saved some real
examples for today."
http://www.vanseodesign.com/css/grid-examples-and-code/

CSS3 Transformations 101 - What are Transformations?
By Craig Buckler.
"This is the first in a five-part series about CSS3 2D and 3D
transformations. Each article can be read individually or out of
order..."
http://www.sitepoint.com/css3-transformations-101/


+03: COLOR.

Update to Color Contrast Tester
By Joe Dolson.
"So, I originally wrote my color contrast evaluator in September of
2008. Now, 5 years later, there are some key differences that merit an
update..."
http://www.joedolson.com/articles/2013/09/update-color-contrast-tester/


+04: DRUPAL.

Kevin Miller - Accessibility Testing, Tools, and QUAIL
By Jeffrey McGuire.
"I spoke with Kevin Miller, lead web developer at Cal State Monterey
Bay. He's been working with Drupal for more than six years and is
making great contributions, especially in the area of
accessibility..."
http://acquia.com/resources/podcasts/acquia-podcast-98-meet-kevin-miller-accessibility-quail

A Video Introduction to Drupal 8
By  Steve Burge.
"...During the presentation, I give you a tour of the new features and
admin interface changes in Drupal 8..."
http://www.ostraining.com/blog/drupal/video-intro-to-drupal-8/


+05: EVALUATION & TESTING.

The 6 Simplest Web Accessibility Tests Anyone Can Do
"What if I told you that the WCAG 2.0 recommendation by the W3C is 36
pages, printed?..."
http://www.karlgroves.com/2013/09/05/the-6-simplest-web-accessibility-tests-anyone-can-do/

Web Accessibility Testing Tools - Who tests the DOM?
By Karl Groves.
"Amazingly, of those which I could use, only two actually tested the
DOM: SortSite and Opquast. In other words, if you're using a free
online service to test your website's accessibility, use SortSite or
Opquast..."
http://www.karlgroves.com/2013/09/06/web-accessibility-testing-tools-who-tests-the-dom/

Website Accessibility Testing - Automated Testing vs. Human Evaluation
By Access iQ.
"A research paper that investigates the use of evaluation tools has
shown the importance of using a mixture of testing methodologies in
order to accurately assess the accessibility of a website. Such
methods include the use of automated testing, manual expert evaluation
and user testing."
http://www.accessiq.org/news/news-features/2013/08/website-accessibility-testing-automated-testing-vs-human-evaluation

Internet Activity Bias Causes Lumpy User Behavior
By Jakob Nielsen.
"Dramatic differences in how much people use the web on different days
can distort simplistic interpretations of site analytics."
http://www.nngroup.com/articles/internet-activity-bias/

Flexible Usability Testing - 10 Tips to Make your Sessions Adapt to
Your Clients' Needs
By Jakob Nielsen.
"For testing assignments where client teams are ready, willing and
able to take immediate action, being flexible with tasks within and
between participants can offer better bang for your buck."
http://www.nngroup.com/articles/flexible-usability-testing/


+06: EVENTS.

W3C HTML5 Training
September 30 - November 10, 2013.
Online.
http://www.w3devcampus.com/html5-w3c-training/

MobileCON
October 16-18, 2013.
San Jose, California, U.S.A.
http://mobilecon2013.com/

Midwest UX
October 17-19, 2013.
Grand Rapids, Michigan, U.S.A.
http://2013.midwestuxconference.com/

Big Design Events
October 17-20, 2013.
Dallas, Texas, U.S.A.
http://bigdesignevents.com/

Web Development Conference (WDC)
October 18, 2013.
Bristol, England, United Kingdom
http://2013.webdevconf.com/

The Realtime Conference
October 18-19, 2013.
Portland, Oregon, U.S.A.
http://2013.realtimeconf.com/

User Interface 18 Conference
October 21-23, 2013.
Boston, Massachusetts, U.S.A.
http://ui18.uie.com/


+07: HTML5.

Homeopathic HTML Solutions
By Christian Heilmann.
"...In order to reap the rewards of clean and semantic markup, you
need to think about meaning first and then about code or markup.
Writing intelligent, beneficial HTML is an exercise in organising and
describing; you could say labeling. It is not about using HTML as the
tool to create things that look impressive..."
http://christianheilmann.com/2013/09/03/homeopathic-html-solutions/

Working with Text in HTML
By Elizabeth Castro and Bruce Hyslop.
"This chapter from HTML and CSS: Visual QuickStart Guide, 8th Edition
explains which HTML semantics are appropriate for different types of
text, especially (but not solely) for text within a sentence or
phrase."
http://www.peachpit.com/articles/article.aspx?p=2124990


+08: JAVASCRIPT.

JavaScript for Designers
By Rachel Nabors.
"We will cover...a handful of all the things: Vanilla JS and
ECMAScript, objects, functions, the DOM..."
http://rachelnabors.com/javascript-for-designers/

Progressive Enhancement. Still Alive and Kickin'.
By Dan Mall.
"...Step 1: write some HTML. This is already where a lot of people get
it wrong; this is where problem #1 happens. Stop writing JavaScript
controllers, don't worry about routing yet, put your database schema
on hold. Create structural markup for the data..."
http://danielmall.com/articles/progressive-enhancement/

JavaScript's Type System
By Axel Rauschmayer.
"This blog post examines JavaScript's type system. It answers
questions such as: Is JavaScript dynamically typed? Weakly typed? What
is coercion?..."
http://www.2ality.com/2013/09/types.html

ARIA Roles P-R
By Rakesh Paladugula.
"The following ARIA roles begin with the letters P and R. Click the
link to jump to its detailed description..."
http://www.maxability.co.in/2013/09/aria-roles-p-r/


+09: MISCELLANEOUS.

Why Responsive Web Design Can Transform Higher Education Recruiting
By Steffan Berelowitz.
"...for higher education marketers, RWD is becoming mission-critical
in helping recruit prospective students, keep current students engaged
and provide value to alumni, particularly on mobile devices..."
http://doteduguru.com/id9564-why-responsive-web-design-can-transform-higher-education-recruiting.html

By Any Other Name
By Jeremy Keith.
I'm not a fan of false dichotomies. Chief among them on the web is the
dichotomy between documents and applications, or more broadly,
'websites vs. web apps'..."
http://adactio.com/journal/6246/

New Poll - Is There a Line Between Web Apps and Web Sites?
By Chris Coyier.
"Every once in a while I'll hear people say something along the lines
of "well that's for web sites, but it's not really relevant for web
apps." That implies there is some kind of line that separates the two.
Different needs and rules that change the game and alter the
conversation around them. Is it true?..."
http://css-tricks.com/new-poll-line-web-apps-web-sites/


+10: TOOLS.

Describler
By Doug Schepers.
"Describler allows you to make your SVG images accessible and
reusable. It shows you all of the text content of your SVG in an
editable list, including both visible text and metadata, and makes it
easy for you to add descriptive content, or change the text that's
already there. And you can use the 'audio preview' feature to hear how
your SVG sounds in common screenreaders."
http://describler.com/

Accessibility Audit and Element Properties (Chome extension)
"This extension will add an Accessibility audit, and an Accessibility
sidebar pane in the Elements tab, to your Chrome Developer Tools..."
https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb


+11: USABILITY.

5 Common Punctuation Problems to Avoid
By Georgina Laidlaw.
"...For those working on interfaces, typos can seem like the biggest
text-related issue you'l face. Sadly, they're not. The partner in
crime of the innocent typo is the punctuation error..."
http://www.sitepoint.com/5-common-punctuation-problems-avoid/


+12: XML.

Current State of Authoring Accessible SVG
By Doug Schepers.
"SVG has a few metadata features intended specifically for
accessibility, and also provides the ability to use real text instead
of images for textual content, just like HTML. This combination of
text and metadata serves as one of the cornerstones of SVG's
accessibility; there are other features, such as scalability and
navigation features, but this post will focus on the descriptive
capabilities of SVG."
http://schepers.cc/authoring-accessible-svg


[Section one ends.]


++ SECTION TWO:

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