[webdev] Web Design Update: September 27, 2013

Fri Sep 27 16:31:05 CDT 2013

+++ WEB DESIGN UPDATE.
- Volume 12, Issue 14, September 27, 2013.

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

++ISSUE 14 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: EVALUATION & TESTING.
04: EVENTS.
05: JAVASCRIPT.
06: MISCELLANEOUS.
07: PHP.
08: USABILITY.

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

[Contents ends.]

++ SECTION ONE: New references.

+01: ACCESSIBILITY.

Audio Control
By Rakesh Paladugula.
"Sometimes we observe websites playing music in the background
immediately when the page is loaded in the browser. This music
distracts the users of screen readers who operate the computer with
audio output. The screen reader users will not be able to operate the
computer unless the volume of the music is decreased, completely muted
or turned off. When I say decrease the volume please note that the
volume of the music should be decreased or turned off not the overall
system volume. If such option is not provided, some set of user groups
cannot perceive any information from the website..."
http://www.maxability.co.in/2013/09/audio-control/

Fieldset Legend, Aria-describedby, and Radiogroup Role
By Ted Drake.
"...As with ARIA in general, use semantic, valid HTML as the basis for
your web applications. This will reduce your div complexity and
provide the expected behaviors without compromise. When this is not
possible, use the role='radiogroup' to provide more context to radio
buttons and use aria-describedby for grouped form elements."
http://www.last-child.com/legend-aria-describedby/

Supporting the Next Generation of Accessible Technology Developers
By David Sloan.
"This weekend sees the European final of the SS12 Coding for a Cause
competition, where teams of university and college students compete to
produce the best piece of accessible software..."
http://blog.paciellogroup.com/2013/09/supporting-next-generation-accessible-developers/

Episode 9 - Developing an Accessible Website (Video)
By Human Resources Professionals Association TV.
In part two of accessible websites, Harold Jeepers meets Boris, the
world's greatest (and most feared) graphic designer. Boris learns some
lessons about accessibility and agrees to make some 'magnificent'
changes. A high-five goes awry for the marketing team."
http://www.youtube.com/watch?v=s21FcoACJ0I

Making Web Sites Accessible Without Sacrificing Aesthetics
By Simon Norris.
"The Web Accessibility Initiative aimed to improve Web usability for
those with disabilities. But fifteen years after its launch,
organizations still widely ignore online accessibility. Far too often,
people believe that designing for accessibility means compromising an
attractive design. As a result, a myriad of misconceptions have
emerged, which often prevent organizations from making a determined
effort to integrate accessibility into the design of their Web sites..."
http://uxmatters.com/mt/archives/2013/09/making-web-sites-accessible-without-sacrificing-aesthetics.php

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.

Responsive Scrollable Tables
By Roger Johansson.
"Over six years ago I wrote a short post about preventing HTML tables
from becoming too wide. The solutions I offered in that post involve
using table-layout:fixed to lock down the width of tables. While that
may work in some cases, it often will not be very pleasant to use..."
http://www.456bereastreet.com/archive/201309/responsive_scrollable_tables/

Why the Focus Indicator is Important (Video)
By Kate Bradbury.
"This video explains why the focus indicator is important and how to
make it accessible..."
http://www.nomensa.com/blog/2013/why-the-focus-indicator-is-important/

Responsive Design Overview for UB CIT
By Adrian Roselli.
Adrian's presenation slides.
http://www.slideshare.net/aardrian/responsive-design-overview-for-ub-cit

An Insider's View of Mobile-First Design - Don't Make These Mistakes
By Luke Wroblewski.
"Everyone from users to entrepreneurs to advertisers loves the
'mobile' category because those products are always with us, always
on, and instantly accessible. But these opportunities are also design
constraints..."
http://www.wired.com/opinion/2013/09/designing-for-mobile-means-ditching-deeply-ingrained-pc-instincts/

A Complete Guide to the Table Element
By Chris Coyier.
"The <table> element in HTML is used for displaying tabular data. You
can think of it as a way to describe and display data that would make
sense in spreadsheet software. Essentially: columns and rows. In this
article we're going to look at how to use them, when to use them, and
everything else you need to know..."
http://css-tricks.com/complete-guide-table-element/

Solved By Flexbox - Cleaner, Hack-Free CSS
By Philip Walton.
"...This site is not another CSS framework. Instead, its purpose is to
showcase problems once hard or impossible to solve with CSS alone, now
made trivially easy with Flexbox. And with Internet Explorer 11 and
Safari 6.1 now in beta, Flexbox will soon be supported in every modern
browser..."
http://philipwalton.github.io/solved-by-flexbox/

+03: EVALUATION & TESTING.

Getting More Out of Usability Testing - Understanding Product Usage
Over Time
By Paula Barraza.
"Understanding the relationship between a product and its users over a
period of time is a key aspect of user research that is often
overlooked. By including a long-term testing approach as part of your
UX research plan, you will develop a more comprehensive model of user
engagement and a better understanding of how and why engagement
changes over time."
http://uxmatters.com/mt/archives/2013/09/getting-more-out-of-usability-testing-understanding-product-usage-over-time.php

+04: EVENTS.

The Ultimate Developer Event
November 20-22, 2013.
Boston, Massachusetts, U.S.A.
http://ultimatedeveloperevent.com/boston-2013/

UX People
November 30, 2013.
Minsk, Belarus
http://uxpeople.by/

dotJS
December 2, 2013.
Paris, France
http://www.dotjs.eu/

Ski PHP 2014
January 17-18, 2014.
Salt Lake City, Utah
https://www.skiphp.com/

ConFoo Conference
February 24-28, 2014.
Montreal, Canada
http://confoo.ca/en

+05: JAVASCRIPT.

Responsive Accessible Data Tables with jQuery
By Dylan Barrell.
"...In order to solve the aforementioned problems, the a11yfy jQuery
plugin needs to: Get the AT to treat a sequentially laid-out table as
a table, and Get columnar tables to switch from columnar format on the
desktop to row format on a smartphone at the responsive breakpoint..."
http://www.deque.com/responsive-accessible-data-tables-jquery

Fat Arrow Functions in JavaScript
By Robcee.
"Since sometime back in the heady days of Firefox 22, Firefox gained
the ability to use Fat Arrow Functions in JavaScript. Users of
CoffeeScript (or, I guess, C#) will be familiar with the syntax. We've
been using these in Firefox DevTools code for nearly 6 months..."
http://robcee.net/2013/fat-arrow-functions-in-javascript/

ARIA Roles S
By Rakesh Paladugula.
"The following roles begin with the alphabet S. Click on each link to
navigate to its description."
http://www.maxability.co.in/2013/09/aria-roles-s/

+06: MISCELLANEOUS.

Future Friendly
By Dave Olsen.
"Disruption will only accelerate. The quantity and diversity of
connected devices - many of which we haven't imagined yet - will
explode, as will the quantity and diversity of the people around the
world who use them..."
http://futurefriend.ly/

The Growing Intricacies of Responsive Web Design
By Devanshi "Nikki" Garg.
"Web design trends often take off rapidly, then quickly fade to
obscurity. While most critics would agree that responsive Web design
(RWD) won't be going away any time soon, it is important to realize
that the approach has not yet fully matured and is continuing to
evolve. As the Web development community continually refines its
techniques and creates new approaches, responsive Web design promises
to become an increasingly popular solution to delivering holistic
design for the mobile ecosystem. The approach is here to stay--and
it's about to get a lot more intricate."
http://uxmatters.com/mt/archives/2013/09/the-growing-intricacies-of-responsive-web-design.php

Responsive Interview with John Allsopp
By Responsive Web Design Weekly.
"John Allsopp shouldn't be a stranger to anyone, after all I think he
was the first person to begin guiding us towards a responsive future
when he penned A Dao of Web Design for A List Apart - April 2000..."
http://responsivedesignweekly.com/interview/responsive-interview-john-allsopp/

Sustainable Web Design
By Janmes Christie.
"Do you know your website's carbon footprint? Or how to lower it?
Emissions standards have been set for the automotive, construction,
and telecommunications industries, yet the internet's carbon footprint
is growing out of control: a whopping 830 million tons of CO2
annually-larger than that of the entire aviation industry. At least 40
percent of that falls partially under the responsibility of people who
make websites. It's time for web designers to do our part. James
Christie explains how to slim our obese websites and simultaneously
attack our industry's carbon footprint, using methods that
conveniently dovetail with good business practice and future-friendly
design."
http://alistapart.com/article/sustainable-web-design

The Web Runs on Electricity and We're Running Out
By Dorian Peters.
"It's a humbling thought, but as web professionals, nothing we create
actually exists when the power goes out. As we increase the number of
devices in our world, planning for a connected web of things in hopes
that the poor will be liberated, education will be free, and our
fridges will tell us we're out of lettuce, we fail to acknowledge that
we scarcely have enough fossil fuels to maintain the current state for
long. Web designers need to be part of the solution-and the situation
is more hopeful than you may think. Dorian Peters shows how we can
exercise the surprising power that lies in seemingly small designerly
decisions to help our industry not only survive, but create positive
impact worldwide."
http://alistapart.com/article/the-web-runs-on-electricity-and-were-running-out

+07: PHP.

Continuous Deployment Revisited
By David Shirley.
"In an earlier article I talked about what Continuous Deployment was
and how it fits into the modern programming process. We took a small
swipe at how it works, but some people (okay, one person) felt that I
could have gone into more detail and they were right. So, here's a
more detailed description of how Continuous Deployment works in the
trenches and how it can change your life..."
http://www.sitepoint.com/continuous-deployment-revisited/

+08: USABILITY.

Responsive Web Design for Corporate UX Design
By Janet M. Six.
In this edition of Ask UXmatters, our experts discuss responsive Web
design within the context of corporate UX design."
http://uxmatters.com/mt/archives/2013/09/responsive-web-design-for-corporate-ux-design.php

How Does Flat Design Damage and Improve Usability?
By Steven Bradley.
"...Flat design probably reduces usability for some in the short term.
It's stripping away metaphors that some have relied on for years.
Fewer and fewer people need those metaphors though, and in time new
visual metaphors will be with us to help replace those that are being
removed...To focus on the word flat and see only the lack of depth is
to miss the point. Flat design is more than removing depth. It also
brings more attention to design fundamentals that, if anything, will
lead to an overall improvement in usability, even if less buttons are
recognized as buttons. Flat design done wrong is just flat. Flat
design done well removes some visual depth cues in order to return to
the fundamentals and it provides many more cues beyond depth to
communicate."
http://www.vanseodesign.com/web-design/flat-design-usability/

[Section one ends.]

++ SECTION TWO:

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