[webdev] Web Design Update: July 31, 2014

Thu Jul 31 06:37:03 CDT 2014

+++ WEB DESIGN UPDATE.
- Volume 13, Issue 05, July 31, 2014.

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

++ISSUE 05 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: EVALUATION & TESTING.
05: EVENTS.
06: HTML5.
07: JAVASCRIPT.
08: MISCELLANEOUS.
09: NAVIGATION.
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.

Accessibility and Security
By Nicolas Steenhout.
"Did you hear about the double arm amputee who was refused service at
a bank because he could not provide a thumbprint? Did you hear about
the online petition to increase services for blind folks, that blind
folks couldn't sign because of CAPTCHA? These are examples of security
practices that cause barriers to people with disabilities. We don't
set out to create barriers, but some policies or code can have
unintended consequences. Security can create barriers to access for
users, with or without disabilities. However security doesn't have to
reduce accessibility...
http://incl.ca/accessibility-and-security/

The Accessibility Tree - A Training Guide
By Bryan Garaventa.
"... As a developer, it's taken me many years to figure out that there
are several very important layers to accessibility for web
technologies, and how to recognize them during the process of
development. It took my involvement with the WAI Protocols and Formats
Working Group to really cement these concepts into place for me, and
to put things into perspective. It really should not have to be this
difficult though, not for me, or anybody else. This is especially true
for developers, upon whose proverbial head all accessibility issues
eventually land. So my goal with writing this, is to provide a single
comprehensive explanation of what these layers of accessibility are,
and how developers can recognize them during the process of
development, so that accessible web technologies will be easier to
diagnose and build in the future..."
http://whatsock.com/training/

Modal Windows - 10 Accessibility Tips
By Natalie Collins.
"...Because of their usefulness modal windows are being utilised more
frequently in website user interface design. However, and despite
their handiness, modal windows can have serious accessibility issues
associated with them if they are designed incorrectly..."
http://www.accessiq.org/news/news/2014/07/modal-windows-10-accessibility-tips

Conversations About Social Media Accessibility
By Jennifer Smith.
"...don't let your messages miss a large and growing market of
individuals with disabilities. Create content that contributes to
improving the Web for everyone. It's time to move from awareness to
action and progressively changing things for the better. Not just for
the largest minority, but for all of us."
http://danyablog.com/2014/07/11/conversations-about-social-media-accessibility/

Provide a Second Video Version Complete With Audio Description
By Denis Boudreau.
"Make sure videos are provided in two versions, one with audio
description and one without..."
http://dboudreau.tumblr.com/post/93013232652/provide-a-second-video-version-complete-with-audio

Accessibility Standards, Cloud Computing and Innovation
By Tracy Mitrano.
"What difference does cloud computing make with regard to
accessibility? As a governance, compliance, and matter of risk
management, the answer is essentially 'no difference.' Accessibility
is as much a compliance issue as privacy, security, and export
control..."
http://www.insidehighered.com/blogs/law-policy-and-it/accessibility-standards-cloud-computing-and-innovation

Question About Touchscreens and Blind Users
By Derek Featherstone.
"Q: I just heard that touchscreen devices like the iPhone are really
useful for blind users. What do I need to know?..."
http://webstandardssherpa.com/ask-the-sherpas/touchscreens-and-blind-users

'Accessibility Ready' WordPress Themes
By George Williams.
"Long a fan of the content-management-system software WordPress, I'm
encouraged and impressed by the developers who are working to make
WordPress as accessible as possible to a wide variety of users
(including people with disabilities)..."
http://chronicle.com/blogs/profhacker/accessibility-ready-wordpress-themes/55683

+02: CASCADING STYLE SHEETS.

Ten CSS One-Liners to Replace Native Apps
By Hakon Wium Lie.
"Hakon Wium Lie is the father of CSS, the CTO of Opera, and a pioneer
advocate for web standards. Earlier this year, we published his blog
post, 'CSS Regions Considered Harmful.' When Hakon speaks, whether we
always agree or not, we listen. Today, Hakon introduces CSS Figures
and argues their case..."
http://alistapart.com/blog/post/ten-css-one-liners-to-replace-native-apps

Fixed and Inflexible
By Tyler Sticka.
"Even before smartphones came along and dashed any hope for a
960-pixel-wide web, designers and organizations have struggled with
the challenge of prioritizing and composing content that scrolls..."
http://blog.cloudfour.com/fixed-and-inflexible/

Guide to Responsive-Friendly CSS Columns
By Katy Decorah.
"The following is a guest post by Katy Decorah (edited by Jason
Morris). Katy was researching CSS columns and how they can work
responsively, as there wasn't much information she could find out
there on the subject. So, like a hero, she wrote it all up. Here's
Katy..."
http://css-tricks.com/guide-responsive-friendly-css-columns/

Full-Width Pinned Layouts with Flexbox
By Zoe Mickley Gillenwater.
"Learn how to use flexbox to pin two things to opposite ends of the
viewport with a heading centered in between. Using media queries and
flexbox's re-ordering capabilities, we can make this layout pattern
even more responsive."
http://zomigi.com/blog/full-width-pinned-layouts-with-flexbox/

3.14 Things I Didn't Know About CSS (Video)
By Mathias Bynens.
"This talk will showcase a series of obscure CSS fun facts, such as
CSS syntax gimmicks and quirks, weird tricks that involve CSS in one
way or another, and security vulnerabilities that are enabled by
(ab)using CSS in unexpected ways..."
http://vimeo.com/100264064

+03: COLOR.

Contrast Rebellion
By Zoltan Gocza and Richard Gazdi.
"...Because a website's content is primarily there to be read don't
give your visitors a headache only because gray or any other
low-contrast font color looked better on the design comps than black.
Remember: Content does not equal illustration...Let's put an end to
this low-contrast, light gray nonsense and use typography for its
purpose:
making text readable."
http://contrastrebellion.com/

+04: EVALUATION & TESTING.

How I Audit a Website for Accessibility
By Marcy Sutton.
"Client-side web applications like Distiller are growing in numbers.
We love snappy, responsive user interfaces and JavaScript libraries
that encourage separation of concerns. But without attention paid to
keyboards and assistive technologies, our apps won't be usable by
people with disabilities. Ideally, we would build with accessibility
in mind from the beginning...that's definitely the best approach (and
the most fun). But if you do find yourself working on a code-base with
room for accessibility improvement, having a collection of best
practices and testing tools will make it easier to get started..."
http://substantial.com/blog/2014/07/22/how-i-audit-a-website-for-accessibility/

+05: EVENTS.

Accessibility Summit
September 10, 2014.
Online
http://environmentsforhumans.com/2014/accessibility-summit/

W3C HTML5 Training
September 22, 2014 Start date.
Online
http://www.w3devcampus.com/html5-w3c-training/

W3C Responsive Web Design
October 2, 2014 Start date.
Online
http://www.w3devcampus.com/responsive-web-design-w3c/

+06: HTML5.

The Web Manifest Specification
By Marcos Caceres and Bruce Lawson.
"...Don't start coding for this stuff yet; it's still in flux and
subject to change. We draw it to your attention as it's a statement of
intent: Firefox, Opera and Google have been discussing this because we
want the web to be able to compete with proprietary app platforms. The
open web may not be too big to fail - but it's too important to fail."
http://html5doctor.com/web-manifest-specification/

+07: JAVASCRIPT.

What are Implicit ARIA Roles?
By Virginia DeBolt.
"For a while now, I've been seeing mentions of implicit ARIA roles as
something web designers and developers should be aware of and know how
to use..."
http://www.webteacher.ws/2014/07/23/implicit-aria-roles/

Understanding Synchronous vs Asynchronous
By Estelle Weyl.
"To get a file or data from a server or issue a JavaScript command
synchronously, we issue the command to get the file/data from the
operating system or other JS function and we wait for the answer. In
the meantime, our single browser UI thread is occupied. The server or
Javascript cannot execute anything else. If our program is a web
server and we get another request for a different file from a
different user, our program cannot process that second request until
the first file is read. This is why you need to be careful when you
issue synchronous commands on a node server or in the JavaScript in
your user's browser..."
http://www.standardista.com/understanding-synchronous-vs-asynchronous/

+08: MISCELLANEOUS.

[Video+Transcript]: The Web is Dead? - My talk at TEDx Thessaloniki
By Christian Heilmann.
"...All in all, apps to me are a step back to the time that I replaced
with the internet. A time when software came in a consumable format
without me knowing what's going on. In a browser, I can highlight part
of the text, I can copy it into your email and send it to you. I can
translate it. I can be blind and listen to a website. I can change
things around. I can delete parts of it if it's too much content
there. I can use an ad blocker if I don't like ads. On apps, I don't
have any of that..."
http://christianheilmann.com/2014/07/24/video-the-web-is-dead-my-talk-at-tedx-thessaloniki/

The Principles of Adaptive Design
By Brad Frost.
"...Of course there's a whole lot more to creating a great
multi-device than fluid grids, flexible media, and media queries. The
core tenets of responsive design are obviously important, and over the
last few years they've helped the Web community better cope with the
never-ending flood of Web-enabled devices. But those three ingredients
are just the tip of the iceberg...."
http://bradfrostweb.com/blog/post/the-principles-of-adaptive-design/

+09: NAVIGATION.

Hey, You There - The Trouble with Audience-Based Navigation
By Cath Richardson.
"As you may have noticed, we've recently been hard at work developing
and testing a new navigation for GOV.UK. In doing this, we've often
asked ourselves 'why shouldn't we just say, in our navigation, who
this particular piece of information is for?'. It seems so simple and
user-focused. But whenever we've tested this audience-based navigation
approach, it's run into problems."
https://insidegovuk.blog.gov.uk/2014/07/18/hey-you-there-the-trouble-with-audience-based-navigation/

+10: TOOLS.

Top 10 Tools for Better Understanding Users
By Paul Boag.
"On the first episode of season 10 we look at the top 10 tools for
better understanding users. There really is no excuse not to test..."
http://boagworld.com/season/10/episode/1001/

+11: USABILITY.

Icon Usability
By Aurora Bedford.
"A user's understanding of an icon is based on previous experience.
Due to the absence of a standard usage for most icons, text labels are
necessary to communicate the meaning and reduce ambiguity."
http://www.nngroup.com/articles/icon-usability/

A Definitive Guide to Sensible Form Validations
By Laurie Hawkins.
"Here is one of form validation error messages that made me laugh
aloud" 'invalid last name. Please enter a valid last name'. The form
(or the souls that coded that form) decided my last name is bad and
imagine, they want me to build a valid last name too..."
http://www.html-form-guide.com/best-practices/form-validations-definitive-guide.html

+12: XML.

Understanding SVG Coordinate Systems & Transformations (Part 1) - The
viewport, viewBox, & preserveAspectRatio
By Sara Soueidan.
"SVG elements aren't governed by a CSS box model like HTML elements
are. This makes positioning and transforming these elements trickier
and may seem-at first glance-less intuitive. However, once you
understand how SVG coordinate systems and transformations work,
manipulating SVGs becomes a lot easier and makes a lot more sense. In
this article we're going to go over three of the most important SVG
attributes that control SVG coordinate systems: viewport, viewBox, and
preserveAspectRatio."
http://sarasoueidan.com/blog/svg-coordinate-systems/

Understanding SVG Coordinate Systems & Transformations (Part 2) - The
transform Attribute
By Sara Soueidan.
"SVG elements can be transformed by scaling, translating, skewing, and
rotating-much like HTML elements can be transformed using CSS
Transforms. However, there are certain inevitable differences when it
comes to the coordinate systems used and affected by these
transformations. In this article we'll go over the SVG transform
attribute and CSS property, covering how to use it, and things you
should know about SVG coordinate system transformations..."
http://sarasoueidan.com/blog/svg-transformations/ß

[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

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