[webdev] Web Design Update: July 1, 2013

[Laura Carlson]

+++ WEB DESIGN UPDATE.
- Volume 12, Issue 01, July 1, 2013.

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

++ISSUE 01 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: EVENTS.
06: HTML5.
07: JAVASCRIPT.
08: MISCELLANEOUS.
09: NAVIGATION.
10: PHP.
11: TOOLS.
12: USABILITY.

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

[Contents ends.]


++ SECTION ONE: New references.

+01: ACCESSIBILITY.

Online Accessibility a Faculty Duty
By Lauren Ingeno.
"In a traditional classroom setting, a university or college's
disability services office typically coordinates a disabled student's
accommodation issues. But with the growth of online education, it is
now largely the obligation of the instructors themselves to
proactively design courses that are equally accessible to all
students..."
http://www.insidehighered.com/news/2013/06/24/faculty-responsible-making-online-materials-accessible-disabled-students

Teaching Accessibility Core Rules
By Denis Boudreau.
"Following in the footsteps of the discussion initiated last month,
allow me to go further down the path of the so-called 'accessibility
core rules' as we cover the remaining accessibility principles that
are operable, understandable, and robust..."
http://www.deque.com/pragmatica11y-teaching-accessibility-core-rules

Another Employee Accessibility Lawsuit - What HR Staff Need To Know
By Karl Groves.
"Most organizations are familiar with the concept that public facing
web sites and applications need to be accessible. But it can't stop
there-accessibility is a requirement for internal systems as well.
Here's some helpful thoughts on how to approach internal web
properties and applications."
http://simplyaccessible.com/article/internal-systems/

Accessible, Complex Data Entry Forms
By Web Standards Sherpa.
"Q:  If I have a form, and I want to collect tabular data, I would
like to make a table with th for row and column headers and then, in
each td I would like to have an input (type=text). The thing is … an
input must have a label and each td should reference the th. How
should this be done using a table?..."
https://www.facebook.com/notes/web-standards-sherpa/accessible-complex-data-entry-forms/532373796830071

Accessibility a $12 Trillion Opportunity
By Dinesh Kaushal.
"...So accessibility is not a nice thing to have, it is a human right
and essential tool to improve world productivity"
http://dineshkaushal.blogspot.in/2013/06/accessibility-12-trillion-opportunity.html

What is PDF/UA all About, Anyway?
By Matt May.
"The PDF/UA ('Universal Accessibility') specification, or ISO 14289,
published by the International Organization for Standardization (ISO)
in August of last year, was a big step forward for authors of the
tools we use to create and consume PDF content..."
http://blogs.adobe.com/accessibility/2013/06/pdf-ua-2.html

YouTube Accessibility
WebAIM Thread.
"Is YouTube generally considered to be an accessible place for video
content these days?..."
http://webaim.org/discussion/mail_thread?thread=6004


+02: CASCADING STYLE SHEETS.

Height in Percent When Parent has Min-Height and No Height
By Roger Johansson.
"When trying to force an element to always extend to the height of its
parent I ran into some peculiar browser behaviour that I thought was
worth mentioning. Here's the situation..."
http://www.456bereastreet.com/archive/201306/height_in_percent_when_parent_has_min-height_and_no_height/

CSS Overflow:auto and VoiceOver
By Becky Gibson.
"I've been playing around a bit with Dojo Mobile. My goal is to
relearn Dojo and to build an accessible Web app for iOS. Unfortunately
not all of the Dojo Mobile components are fully accessible, yet (the
team is working on it). The app I am building is fairly simple – an
app to track a user's step count from a pedometer. An app of this type
is a bit moot since there are sophisticated devices that do this and
communicate to an app via Bluetooth. However, this app uses some basic
constructs so it seemed like a real-world but simple undertaking..."
http://www.weba11y.com/blog/2013/06/27/css-overflowauto-and-voiceover/

Media Queries Are Not The Answer - Element Query Polyfill
By Tyson Matanich.
"Responsive Web design has transformed how websites are designed and
built. It has inspired us to think beyond device classifications and
to use media queries to adapt a layout to the browser's viewport size.
This, however, deviates from the hierarchical structure of CSS and
characterizes elements relative to the viewport, instead of to their
container..."
http://coding.smashingmagazine.com/2013/06/25/media-queries-are-not-the-answer-element-query-polyfill/


+03: COLOR.

Color and User Experience
By Ashley Karr.
"Proper use of color can enhance the user experience of any design as
color affects humans psychologically, physiologically, and
emotionally..."
http://interactions.acm.org/blog/view/color-and-user-experience


+04: DRUPAL.

Seeking Drupal Accessibility Testers
By Terrill Thompson.
"If your institution is like mine, you're probably seeing more and
more of your web developers building their sites using Drupal.
Therefore it behooves us to ensure Drupal is accessible, and that it
produces fully accessible content...If you're interested in helping
out with this effort, please let me know. We need people to
participate as testers from July 1-12. Also if you're planning to
attend the Twin Cities DrupalCamp we'd love to have your help there
too..."
http://mailman1.u.washington.edu/pipermail/athen-list/2013-June/007517.html

Drupal 8 Alpha Releases
By Dries Buytaert.
"A month ago we started the Drupal 8 alpha cycle to encourage module
developers to test out Drupal 8 and to try upgrading their modules.
Today, we published the second alpha release of Drupal 8: Drupal 8.x
alpha 2..."
http://buytaert.net/drupal-8-alpha-releases


+05: EVENTS.

The WAI to Web Accessibility
July 16, 2013.
Webinar.
http://nonprofitwebinars.com/webinar/716-the-wai-to-web-accessibility/

An Event Apart Washington, D.C.
August 5-7, 2013.
Washington, D.C., U.S.A.
http://archive.aneventapart.com/2013/dc/

An Event Apart Chicago
August 26-28, 2013.
Chicago, Illinois, U.S.A.
http://archive.aneventapart.com/2013/chicago/

DConstruct
September 9, 2013.
Brighton, England, United Kingdom
http://2013.dconstruct.org/

An Event Apart Austin
September 30 - October 2, 2013.
Austin, Texas, U.S.A.
http://archive.aneventapart.com/2013/austin/


+06: HTML5.

Main Element Added to HTML 5.1
By Virginia DeBolt.
"The <main> element was added to the HTML 5 specification recently.
The element name is pretty obvious in meaning, but just in case you
want the W3C's definition, it is the 'main content of the body of a
document or application.'..."
http://www.webteacher.ws/2013/06/27/main-element-added-to-html-5-1/

The main Element
By Richard Clark.
"Recently, <main> was formally added to the W3C HTML specification.
Now that the dust has settled, it's about time we dive in to find out
where and when it's appropriate to use <main>. Let's get started..."
http://html5doctor.com/the-main-element/

Is HTML5 Ready?
By Remy Sharp.
"Back on 20-July 2009 I launch (quickly and from a local cafe)
ishtml5ready.com in response to ishtml5readyyet.com, except some point
along the line, I let the domain lapse (as did ishtml5readyyet.com) -
but instead of it vanishing, someone else bought the domain, and added
some Amazon links (and not even to mine & Bruce's book, dagnamit!).
Anyway, for the sake of prosperity, I wanted to post up the content
here - since there was a mini post/rant inside the source code. Please
note: this is not a new post..."
http://remysharp.com/2013/06/26/is-html5-ready/

HTML is Structure
By Niels Matthijs.
"...Structure is important because it determines what you can do with
the elements on a page and it determines the speed at which things can
be moved around or changed. As long as a html element has structural
meaning, I don't mind leaving it in (for the record, I don't mean pure
wrapper elements as they have only one direct descendant by default),
if only to allow for future adaptability. I know there are still some
people who consider it overkill, but that opinion is often reflected
in the quality of their css code."
http://www.onderhond.com/features/html-musings/html-structure-photoshop

Beyond HTML5
By Charles McCathieNevile.
"The age of HTML5 has already seen seismic shifts in the ways that we
use the web. Chaals Nevile casts his eyes to the horizon and wonders
what might be coming next..."
http://www.netmagazine.com/opinions/beyond-html5


+07: JAVASCRIPT.

Basic JavaScript - An Introduction to the Language
By Axel Rauschmayer.
"What is the best way to learn JavaScript? If you haven't programmed
before, you first have learn what programming is. If you are a
programmer, though, you can take a shortcut: You already know many
programming language constructs and just need to learn how they are
expressed in JavaScript..."
http://www.2ality.com/2013/06/basic-javascript.html

Video - An Overview of ECMAScript 6
By Axel Rauschmayer.
"On 2013-05-30, I held the talk 'An overview of ECMAScript 6' at
Fluent Conference, in San Francisco. The video is now publicly
available (go there for a larger version of the video). And yes, I was
slightly jet-lagged..."
http://www.2ality.com/2013/06/video-es6.html

With Makes it Harder to Evolve JavaScript
By Axel Rauschmayer.
"JavaScript's with statement has been deprecated for a while [1]: it
slows down your code and is forbidden in strict mode. Additionally, it
makes it harder to evolve the language, because code that uses it is
more brittle."
http://www.2ality.com/2013/06/with-array.html

Using JavaScript's 'toString' Method
By Joshua Clanton.
"Have you ever wondered why if you try to alert a plain old JavaScript
object, you get the text [object Object]? That's due to JavaScript's
built-in toString method. Let's take a look at how it works..."
http://designpepper.com/blog/drips/using-javascripts-tostring-method

JavaScript Cookbook
By Raymond Camden.
"The JavaScript Cookbook is a site for common JavaScript problems and
solutions."
http://javascriptcookbook.com/


+08: MISCELLANEOUS.

Mobile Web Problems and How to Avoid Them
By Brad Frost.
"Two years ago Jen Simmons (@jensimmons) and I made a site called WTF
Mobile Web, a Tumblr which highlights the frustrations mobile web
users regularly experience. While the site is a bit cheeky, the goal
isn't to cut anybody down, but rather demonstrate the challenges web
creators are faced with when delivering their experiences to the
plethora of desknots now accessing the Web..."
http://bradfrostweb.com/blog/post/mobile-web-problems/

Serving Images Responsively
By Leonie Watson.
"There are two key contenders addressing the issue of serving images
responsively. Léonie Watson weighs up some of the pros and cons.."
http://www.netmagazine.com/tutorials/serving-images-responsively

Designing for Services Beyond the Screen
By Andy Polaine.
"The producer-consumer model is so ingrained in our society that we
tend to treat everything like a product-a one-and-done offering that
can be pushed to the market and forgotten..."
http://alistapart.com/article/designing-for-services-beyond-the-screen

Talking Responsive Web Design with Russ Weakley - the Transcript
By Sarah Hawk.
"Our Talk with the Experts session this morning was slightly earlier
than usual but that didn't stop people from attending what turned out
to be a very interesting session. Our expert today was one of the
original SitePoint course tutors, and now one of our most popular
Learnable instructors, Russ Weakley. Russ was on hand to chat about
everything from frameworks to convincing clients of the ROI of going
with a responsive solution. There weren't a huge number of resources
that came out of the hour, but those that did are listed below."
http://www.sitepoint.com/talking-responsive-web-design-with-russ-weakley-the-transcript/

Replacing 'Requirements Gathering' with Something that Works
By Jared Spool.
"he replacement activities of creating hypotheses, conducting
research, creating scenarios, and running critiques will take more
time. A lot more time. How do we do that when our schedules are
already full? We have to put it into context with the rest of the
project. How much time will we save by getting closer to a great
design faster? How much time will we get back because everyone is on
the same page about why we're doing what we're doing? We spread these
activities evenly throughout the project, instead of a small box
upfront. They make practically every other box in the project chart
better and faster. In a weird twist of project physics, we end up
saving time by spending time. Most importantly, we end up with a
design that uses real requirements to create a great experience.
That's what we were brought in to do in the first place."
http://www.uie.com/articles/requirements_gathering/


+09: NAVIGATION.

Improving Usability With Extra Navigation Keys
By James Edwards.
"When handling keyboard events in JavaScript, most scripts and
applications tend to stick to the basic range of keys that provide
core accessibility - the Tab key for serial navigation, the Arrow keys
for drilling-down or for two-dimensional navigation, and the Enter and
Space keys for clicking and selecting things..."
http://www.sitepoint.com/improving-usability-with-extra-navigation-keys/

Don't Forget Your Redirects!
By Craig Buckler.
"...Some clients presume users will only ever bookmark their home
page. In reality, thousands of users may have bookmarked any of your
pages. Two of those are the Google and Bing bots which attempt to
index everything. If you haven't budgeted to manage this issue, your
site upgrade is not complete! Fortunately, the process is not
difficult..."
http://www.sitepoint.com/dont-forget-your-redirects/


+10: PHP.

 From Procedural to Object Oriented PHP
By Patkos Csaba.
"This tutorial was inspired by a speech given by Robert C. Martin that
I watched a year or so ago. The main subject of his talk is about the
possibility of picking The Last Programming Language. He addresses
topics such as why should such a language exist? And what it should
look like? However, if you read between the lines, there was another
interesting idea that caught my attention: the limitations that each
programming paradigm imposes upon on us programmers. So before we get
into how we could go about converting a procedural based PHP app into
an object oriented one, I want to cover a little bit of theory
beforehand..."
http://net.tutsplus.com/tutorials/php/from-procedural-to-object-oriented-php/

+11: TOOLS.

DiagnostiCSS
"Visually detect any potentially invalid or inaccessible HTML markup..."
http://diagnosticss.github.io/

Firefox OS Simulator
By Myk Melez.
"Firefox OS Simulator is a test environment for Firefox OS. Use it to
test your apps in a Firefox OS-like environment that looks and feels
like a mobile phone. After installing it, go to Web Developer >
Firefox OS Simulator to access its features..."
https://addons.mozilla.org/en-US/firefox/addon/firefox-os-simulator/


+12: USABILITY.

Website Reading - It (Sometimes) Does Happen
By Jakob Nielsen.
"When web content helps users focus on sections of interest, users
switch from scanning to actually reading the copy."
http://www.nngroup.com/articles/website-reading/

Convenience Trumps Security
By Gerry McGovern.
"Encryption that is very hard to crack by the NSA (the US spy agency)
has existed for years. But it's not easy to use so hardly anyone uses
it. We trade convenience for security."
http://gerrymcgovern.com/new-thinking/convenience-trumps-security

Don't Poke the Bear - Creating Content for Sensitive Situations
By Kate Kiefer Lee.
"We're all imperfectly human, and our readers are no exception. They
have touchy subjects and insecurities and things they'd rather not
talk about-and they bring them all to the table when they interact
with our content..."
http://alistapart.com/article/dont-poke-the-bear-creating-content-for-sensitive-situations

Context, Bloody Context (Video)
By Cennydd Bowles.
"If you've been in the mobile field for a while, you're sick of
context debates. Sure, they all start innocently, but soon enough they
collapse into a sad tangle of metaphysics ('But what IS context
anyway?'), lazy stereotypes, and implausible scenarios involving
public transport. So let's try a fresh approach. Dictionary
definitions and 'it depends' generalizations are hereby banned. Let's
talk details. We'll discuss whether context even matters in modern web
design, ways to find out how people will use your product, design
principles for different situations, and why we've been looking at the
whole thing upside-down anyway..."
http://vimeopro.com/mirabeaunl/mobilism-2013/video/68916119

Sketching for Better Mobile Experiences
By Lennart Hennigs.
"Sketching helps you better understand the problem you are trying to
solve and lets you visualize possible solutions. It is a fast and
inexpensive way to brainstorm and to test out a lot of UI ideas before
committing to one. Sketching speeds us the concept creation and
iteration phase and makes it possible to get feedback early on, when
changes are easy to make."
http://uxdesign.smashingmagazine.com/2013/06/24/sketching-for-better-mobile-experiences/


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