[webdev] Web Design Update: September 9, 2013

[David P. Dillard]

.


.



Date: Mon, 9 Sep 2013 06:36:45 -0500
From: Laura Carlson <lcar...@d.umn.edu>
To: webdev <web...@lists.d.umn.edu>
Subject: [webdev] Web Design Update: September 9, 2013

+++ 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:lcar...@d.umn.edu




[Issue ends.]



.



.