[webdev] Web Design Update: September 3, 2013

[Laura Carlson]

+++ WEB DESIGN UPDATE.
- Volume 12, Issue 10, September 3, 2013.

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

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

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

[Contents ends.]


++ SECTION ONE: New references.

+01: ACCESSIBILITY.

Alt Text is for More than Just Screen Readers
By Derek Featherstone.
"Good alt text is seen as critical for people that use screen readers.
But it doesn't stop there. We need to consider the effect of alt text
on people that also rely on good, accurate alt text: people that use
voice recognition software."
http://simplyaccessible.com/bpow/alt-text-voice/

The Pointerless Web (Video)
By Nicholas Zakas.
The first of a 5-part presentation. All five have good info.
http://www.youtube.com/watch?v=ZoLOyyS5700

Accessibility In UX Design - Tales From The Field
By Libby Heasman.
"I'm always amazed when I embark on a new client project at just how
overlooked accessibility can be in the UX space..."
http://uxmastery.com/accessibility-in-ux-design-tales-from-the-field/

Modal Window Focus Management
By Jeff Smith.
"For what appears to be such a simple concept, modal windows create
incredibly complex interactions on the web. For users that rely on
devices and software other than a mouse to navigate, the complexity is
increased..."
http://simplyaccessible.com/bpow/modal-focus/

The Digital Divide and People with Disabilities
By Lainey Feingold.
"On August 23, 2013, the New York Times published my letter to the
editor about the digital divide and people with disabilities..."
http://lflegal.com/2013/08/digital-divide/

WebAIM's Hierarchy for Motivating Accessibility Change
By Jared Smith.
"...We at WebAIM spend at least as much time motivating for change as
we do educating on implementation details. I've compiled my thoughts
into WebAIM's Hierarchy for Motivating Accessibility Change..."
http://webaim.org/blog/motivating-accessibility-change/


+02: CASCADING STYLE SHEETS.

CSS Generated Content is Not Content
By Karl Groves.
"...If what you're working with is content, it must be part of the
DOM. That means using actual content and not CSS generated content.
The inclusion of additional icons and the like can be an improvement,
in terms of overall usability, but the additional icons must be in the
foreground."
http://www.karlgroves.com/2013/08/26/css-generated-content-is-not-content/

The CSS Regions Module - Control Where Content Flows
By Steven Bradley.
"Would you like more control of your content and how it flows through
your layout? Would you like an easy way to create more complex
layouts? How about an easy way to independently style sections of a
document, without complicated css rules that overwrite each other? If
you answered yes to any of these questions, then css regions might be
what you're looking for..."
http://www.vanseodesign.com/css/regions/

Force Margin/Space Between List and Floated Image
By Perishable Press.
"If you're displaying floated images in your posts, you may notice
that margins of lists and other block-level elements seem to
'collapse', as shown in this screenshot from the 2013 redesign..."
http://perishablepress.com/margin-list-floated-image/


+03: EVALUATION & TESTING.

5 Lessons Learned from 100,000 Usability Studies
By Phil Sharp.
"...One of the best ways to test out your site categorization is to
sit someone down in front of your site and ask them to find a specific
item without using internal search. This is simple, fast, powerful,
and very painful to watch..."
http://moz.com/blog/5-lessons-learned-from-100000-usability-studies

How We Do User Research in Agile Teams
By Leisa Reichelt.
"Getting user research into Agile teams in a way that is timely,
relevant and actionable is a challenge that teams the world over are
tackling. Working effectively in agile has recently been the driver of
some fairly significant changes to the way our researchers work at
GDS."
http://digital.cabinetoffice.gov.uk/2013/08/30/how-we-do-user-research-in-agile-teams/

Seeing the Elephant - Defragmenting User Research
By Lou Rosenfeld.
"Silos: good for grain, awful for understanding customer behavior.
Just as we favor the research tools that we find familiar and
comfortable, large organizations often use research methods that
reflect their own internal selection biases. As a result, they miss
out on detecting (and confirming) interesting patterns that emerge
concurrently from different research silos. And they likely won’t
learn something new and important. IA thought leader Lou Rosenfeld
explains how balance, cadence, conversation, and perspective provide a
framework enabling your research teams to think across silos and
achieve powerful insights even senior leadership can understand."
http://alistapart.com/article/seeing-the-elephant-defragmenting-user-research

Connected UX
By Aarron Walter.
"Your inbox overflows with customer emails suggesting features and
improvements. Instead of benefiting, you feel overwhelmed by an
unmanageable deluge. You conduct usability tests, user interviews, and
competitive analyses, creating and sharing key insights. Yet within
months, what you learned has been lost, forgotten, or ignored by
someone in a different department. What if you could sift, store, and
share all your customer learning in a way that breaks down silos,
preserves and amplifies insights, and turns everyone in your
organization into a researcher? MailChimp’s user experience director
Aarron Walter tells how his team did it. You can, too."
http://alistapart.com/article/connected-ux


+04: EVENTS.

MobileUXCamp DC
September 14, 2013.
Washington, D.C., U.S.A.
http://mobileuxcamp.com/

Edge Conference
September 23, 2013.
New York, New York, 2013.
http://edgeconf.com/

Design It. Build It. (DIBI)
October 7-8, 2013.
Gateshead, England, United Kingdom
http://www.dibiconference.com/

Delight
October 7-8, 2013.
Portland, Oregon, U.S.A.
http://delight.us/conference/

The Digital Barn 3
October 11-12, 2013.
Barnsley, England, United Kingdom
http://makedo.in/thedigitalbarn/

Accessibility Camp DC
October 12, 2013.
Washington, D.C., U.S.A.
http://accesscampdc13.eventbrite.com/

Mobilize
October 16-17, 2013.
San Francisco, California, U.S.A.
http://event.gigaom.com/mobilize/


+05: HTML5.

HTML5 picture Element
By Christopher Schmitt.
"...Proposed to be a part of HTML5, the <picture> element is a
solution that is both complete and in need of no additional scripts or
third-party services to do the job. The syntax is as follows..."
http://html5hub.com/html5-picture-element/

Using <b> and <i> Elements
By W3C.
"The HTML5 specification redefines b and i elements to have some
semantic function, rather than being purely presentational. However,
the simple fact that the tag names are 'b' for bold and 'i' for italic
means that people are likely to continue using them as a quick
presentational fix. This article explains why that can be problematic
for localization (and indeed for restyling of pages in a single
language), and echoes the advice in the specification intended to
address those issues..."
http://www.w3.org/International/questions/qa-b-and-i-tags

The HTML5 progress Element
By Pankaj Parashar.
"Here is the basic markup for the progress element..."
http://css-tricks.com/html5-element/


+06: INFORMATION ARCHITECTURE.

Information Architecture - More Than Just a Pretty Menu
By Chris Nodder.
"Information architecture (IA) is actually 'the structural design of
shared information environments.' It's no good just having a
well-thought-through menu system for your site. Once you get people to
where they need to be, the content needs to be arranged in the way
they expect, using words they understand. Knowing how your users think
about and self-categorize your site's content should be central to
your whole design effort. It boils down to finding out how your users
think about and categorize the concepts, tasks, and activities that
your product deals with, and then creating an architecture that
matches this world view..."
http://blog.lynda.com/2013/08/28/information-architecture-more-than-just-a-pretty-menu/


+07: JAVASCRIPT.

Javascript Best Practices, Part 1
By Christian Heilmann.
"This guide, the first in a two part series, was adapted from a
popular slideshow by Christian Heilmann, a Web Evangelist at Mozilla.
Though JavaScript has a few notoriously tricky features, it's more
important than ever in software development. This list of best
practices uses code samples and side-by-side examples to help you
write more readable, efficient code..."
http://www.thinkful.com/learn/javascript-best-practices-1/

Protecting Objects in JavaScript
By Axel Rauschmayer.
"This blog post is a quick refresher of how objects can be protected
in JavaScript. There are three levels of protection.."
http://www.2ality.com/2013/08/protecting-objects.html

The Dark Shadow of The DOM
By James Edwards.
"Shadow DOM is designed to address the encapsulation problems that
plague some kinds of web development. But anything you put in a Shadow
DOM is inaccessible to browser-based screenreaders, so you can only
use it for empty elements which contain no content or informational
attributes. With that requirement, Shadow DOM only provides half a
solution; and half a solution to this problem is no solution at
all..."
http://www.sitepoint.com/dark-shadow-dom/

Easy Fixes to Common Accessibility Problems
By Todd Kloots.
"Making a site or application accessible can seem so overwhelming that
it can completely stall efforts before they begin. But sometimes
simple changes can provide the necessary momentum while resulting in
significant improvements for users. So, in the spirit of small things
that make a big difference, here's a list of fixes for common
accessibility problems."
http://yahoodevelopers.tumblr.com/post/59489724815/easy-fixes-to-common-accessibility-problems


+08: MISCELLANEOUS.

Responsive Web Design is Solid Gold
By Jason Grigsby.
"A few years ago I wrote an article entitled CSS Media Query for
Mobile is Fool's Gold. It garnered a lot of attention at the time, and
I still see people reference it..."
http://blog.cloudfour.com/responsive-web-design-is-solid-gold/

Ethan Marcotte on Web Design, Accessibility and Why it Matters to
Journalists, Digital Storytellers
By Miranda Mulligan.
"... I think we can include that richness in a way that's maybe a bit
more responsible: we can include JavaScript in a way that our pages
will still work without it, and build lighter, nimbler pages, and so
on. To me, that's a really interesting design challenge..."
http://knightlab.northwestern.edu/2013/08/26/ethan-marcotte-on-web-design-accessibility-and-why-it-matters-to-journalists-digital-storytellers/

10 Tips for Designing a Mobile-Friendly Website
By Oleg Lola.
"Structuring a mobile-friendly website means rethinking the design
process for a variety of screens across multiple mobile platforms.
While tablets may be able to handle your full website, screens of
smartphones are limited in terms of space, and yours is the task of
providing their owners with a completely different user experience,
which must undoubtedly be positive. How you achieve that could involve
many different steps and approaches. In my experience, however, some
basic guidelines have emerged that are common to just about all
projects involving design for mobile. Here are 10 tips that may help
you."
http://www.sitepoint.com/10-tips-designing-mobile-friendly-website/


+09: NAVIGATION.

Accessible Dropdown Menus
By Ted Drake.
"...How does your site navigation measure up? It's easy to test. Just
push your mouse to the side and try tabbing through your web page. Are
you able to navigate the submenus? What happens when you focus on a
top level menu item and hit the enter key? What happens when you use
the arrow keys? The escape key? If your answer is nothing, you will
need to update to an accessible drop down menu."
http://www.last-child.com/accessible-dropdown-menus/

Accessible Dropdown Menus
By Terrill Thompson.
"...Dropdown and flyout menus on websites are great for reducing
clutter, simplifying page content, and providing a consistent
navigation structure that (if done well) makes it easy to find content
from anywhere on the site. Unfortunately, very few of the dynamic
menus in use today are fully accessible..."
http://terrillthompson.com/blog/202

Accessible Mega Menu
By Adobe.
"The navigation menu at the top of this page demonstrates how one can
implement an accessible mega menu as a jQuery plugin. It is modeled
after the mega menu on adobe.com but has been simplified for use by
others. An brief explanation of our interaction design choices can be
found in a blog post at Mega menu accessibility on adobe.com..."
http://adobe-accessibility.github.io/Accessible-Mega-Menu/


+10: PHP.

A Look at PHP's Continuing Evolution
By Larry Garfield.
"PHP is not a young language. As of 2013, it's 18 years old; that's
old enough to vote. Many upstart languages have appeared over the
years to try and unseat PHP as the "lingua franca" of web applications
but it still commands over 80% of the web market. One reason for PHP's
popularity is no doubt the ease with which new developers can get
started with it, but just as important is the fact that PHP has been
evolving for all those 18 years..."
https://www.acquia.com/blog/look-phps-continuing-evolution


+11: USABILITY.

Content as Medium
By Matt Gemmell.
"...We want the words. We want words that have been lovingly prepared,
and agonised over. We want them when they're ready, not served up
haphazardly with artificial deadlines and incomplete information. The
faddish buzzwords of interactivity (for its own sake) and 'digital
experiences' are fading in the rear-view mirror, hopefully for good.
In their place, we find much more comfortable words: simplicity,
focus, and quality...A return to the quietness and cleanliness of the
page as an unnoticed backdrop, with the single spotlight falling
squarely on well-considered words."
http://mattgemmell.com/2013/08/29/content-as-medium/

Why Consistent Language Matters
By Georgina Laidlaw.
"We've talked a lot about using consistent language in your app or
product interfaces, and in the help pages, emails, and other materials
that surround them. But why does consistency matter so much?..."
http://www.sitepoint.com/consistent-language-matters/

Subheadings - Perhaps the Most Useful Technique in Technical Writing
By Tom Johnson.
"...help is either too long so users can't find the answer, or help is
too short so users can't find the answer. Is this a paradox that is
resolvable? Can something be both long and short at the same time?...
http://idratherbewriting.com/2013/08/23/subheadings-perhaps-the-most-useful-technique-in-technical-writing/

Design is About Relationships (Video)
By Josh Brewer.
"It's easy to get so caught up in theory and process that we forget
that design is about relationships. It's not about Photoshop comps or
bytes of code. It's about people. And content. And, especially today,
their devices. It's about the interplay between content and form,
between real-time data and how, when, and why we share and consume it.
It's about enabling connections where they couldn't have existed
before. It's about focusing on creating experiences that are more
meaningful, more delightful, and ultimately, more human."
http://www.designersandgeeks.com/events/design-is-about-relationships


[Section one ends.]


++ SECTION TWO:

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