[webdev] Web Design Update: October 11, 2013

Fri Oct 11 06:26:24 CDT 2013

+++ WEB DESIGN UPDATE.
- Volume 12, Issue 16, October 11, 2013.

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

++ISSUE 16 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: DRUPAL.
04: EVALUATION & TESTING.
05: EVENTS.
06: JAVASCRIPT.
07: MISCELLANEOUS.
08: NAVIGATION.
09: PHP.
10: STANDARDS, GUIDELINES & PATTERNS.
11: TOOLS.
12: TYPOGRAPHY.
13: USABILITY.

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

[Contents ends.]

++ SECTION ONE: New references.

+01: ACCESSIBILITY.

Writing for the Web #2 - Titles and Headings
By Linnea Ann Williams.
"Titles and Headings are some of the most critical content on your
website. They are content landmarks that readers use to navigate your
page."
https://swsblog.stanford.edu/blog/writing-web-2-titles-and-headings

Edit (YouTube) Captions
By Google.
"Whether you're editing captions automatically generated by YouTube or
tweaking captions you've added yourself, the captions in-line editor
allows you to quickly and easily make changes to both the text and
time codes of your captions..."
https://support.google.com/youtube/answer/2734705

Designing User Interfaces for Older Adults - Myth Busters
By Kate Finn.
"...Many regard the WCAG 2.0 and other guidelines as being
extensive-or even exhaustive-so might expect them to provide all the
answers about how to design age-friendly user interfaces. However,
these guidelines may not go far enough in covering special groups such
as older adults. And they are simply recommendations, which companies
often ignore..."
http://uxmatters.com/mt/archives/2013/10/designing-user-interfaces-for-older-adults-myth-busters.php

+02: CASCADING STYLE SHEETS.

Flexbox Layout Isn't Slow
By Paul Irish.
"Old flexbox (display: box) is 2.3x slower than new flexbox (display: flex)..."
http://updates.html5rocks.com/2013/10/Flexbox-layout-isn-t-slow

Proportional Responsive - A Third Alternative
By Niels Matthijs.
"...The third option I'll be detailing here is little more than an
expansion on the padding solution, but one that will save you the need
for an extra structural wrapper at the cost of out of the box browser
compatibility..."
http://www.onderhond.com/features/css-techniques/proportional-responsive-alternative

+03: DRUPAL.

How to Make Your Navigation Responsive Using Responsive Menus Module in Drupal 7
By Ivan Zugec.
"When you're building a Drupal website that is responsive, it's vital
that the main menu is responsive as well. Users will have a tough time
navigating your website if the menu hasn't been optimised for mobile
devices. You don't have the luxury of a mouse cursor when you're on a
mobile or tablet device, instead you navigate by using touch. So what
solutions are out there for Drupal sites?"
http://webwash.net/tutorials/how-make-your-navigation-responsive-using-responsive-menus-module-drupal-7

Simpler Password Reset in Drupal 7
By Dave Cohen.
"Here's a helpful tip for maintainers of Drupal 7 websites, if you're
as puzzled by the password reset process..."
http://www.dave-cohen.com/node/1000020

Views and SQL Analogy - An Easier Way to Explain Views
By Prasad Shirgaonkar.
"With over 4 million downloads, Views is the most used contributed
module in Drupal. Every Drupal developer knows that Views is an
absolutely inevitable part of almost every Drupal project. Using
Views, one can build anything from simple list of content, slideshows,
jump menus to RSS feeds, JSON feeds through to contextual blocks of
information and even PDF and Excel downloads of data. That's why, in
the Drupal development universe, understanding & effectively using
views separates novices from experts!"
https://www.acquia.com/blog/drupal-views-sql-analogy-easier-way-explain-views

Hands off the Content Management System
By Paul Boag.
"Is a content management system (CMS) a tool to democratise content
creation or should it only be used by web professionals..."
http://boagworld.com/content-strategy/cms/

+04: EVALUATION & TESTING.

Setting the Foundation for Meaningful Critiques - Goals, Principles,
Personas and Scenarios
By Adam Connor.
"In a recent post, Aaron talked about the importance of intent in the
success of critique. Without the right intent on both sides critiques
can go nowhere. Or worse, they can hurt the design, the designer and
the relationship between the designer and the critics..."
http://www.uie.com/articles/meaningful_critiques/

+05: EVENTS.

16th Annual Accessing Higher Ground Accessible Media, Web and
Technology Conference
November 4-8, 2013.
Westminster, Colorado, U.S.A.
http://accessinghigherground.org/

ConveyUX
February 5-7, 2014.
Seattle, Washington, U.S.A.
http://conveyux.com/

Interaction14
February 5-8, 2014.
Amsterdam, Netherlands
http://interaction14.ixda.org/

IA Summit
March 25-30, 2014.
San Diego, California, U.S.A.
http://2014.iasummit.org/

Lean UX - NYC
April 10-12, 2014.
New York, New York, U.S.A.
http://leanuxnyc.co/nyc/

2014 International Summit on Accessibility
July 12-15, 2014.
Ottawa, Ontario, Canada
http://www5.carleton.ca/accessibilitysummit/

+06: JAVASCRIPT.

Hitting the Accessibility High Notes with ARIA
By Ted Drake.
"ARIA (Accessible Rich Internet Applications) allows web developers to
make their complex web applications accessible. This presentation will
introduce ARIA attributes and how they establish landmarks, states,
and roles. Learn how to use the basic elements that belong on every
application. This presentation will also show more advanced topics,
such as invalid form inputs, live regions, and fixing divitis."
http://www.last-child.com/accessibility-high-notes-aria/

The JavaScript Console API
By Axel Rauschmayer.
"In most JavaScript engines, there is a global object console with
methods for logging and debugging. That object is not part of the
language proper, but has become a de facto standard, since being
pioneered by the Firebug debugger. Since their main purpose is
debugging, the console methods will most frequently be used during
development and rarely in deployed code. This blog post gives an
overview of the methods of console..."
http://www.2ality.com/2013/10/console-api.html

+07: MISCELLANEOUS.

Development Is Design
By Brad Frost.
"...The unfortunate reality is that this startup is not alone in
thinking that front-end development is something completely detached
from the design process. That you can design everything in isolation
then just throw things over the fence to get built...As multi-device
Web design quickly becomes the norm, the throw-it-over-the-fence style
of creating websites is going to be increasingly difficult. The modern
Web design process requires intense collaboration between designers
and front-end developers. Real collaboration and communication are
difficult, but we must get over that awkwardness in order to overcome
the design/development divide."
http://bradfrostweb.com/blog/post/development-is-design/

Cards Are Fast Becoming the Best Design Pattern for Mobile Devices
By Paul Adams.
"We are currently witnessing a re-architecture of the web, away from
pages and destinations, towards completely personalised experiences
built on an aggregation of many individual pieces of content..."
http://insideintercom.io/why-cards-are-the-future-of-the-web/

+08: NAVIGATION.

The Need to Simplify Menus and Links
By Gerry McGovern.
"...Websites should be managed on the principle of self-service, and
the key driver of self-service is time..."
http://www.gerrymcgovern.com/new-thinking/need-simplify-menus-and-links

Building an Accessible Tab Panel - An ARIA Example
By Lisa Seeman.
"This post is part of my series in using ARIA. This post shows how to
make a tab panel accessible using ARIA..."
http://www.deque.com/building-accessible-tab-panel-aria

The Curious Case of Breadcrumbs in HTML
By Jens O. Meiert.
"Putting everything together, the simplest adequate markup for
breadcrumbs seems to be..."
http://meiert.com/en/blog/20131003/breadcrumbs-in-html/

+09: PHP.

Responsive Images Using Picturefill and PHP
By Lukas White.
"One of the key challenges with responsive web design, and a subject
of much discussion in recent years, is how to deal with images.
Setting a max-width on image elements enables designers to allow their
size to adapt to the page dimensions, but in itself that approach can
lead to far bigger images being downloaded than are required..."
http://www.sitepoint.com/responsive-images-using-picturefill-php/

Collection Classes in PHP
By Alireza Rahmani Khalili.
"A Collection class is an OOP replacement for the traditional array
data structure. Much like an array, a collection contains member
elements, although these tend to be objects rather than simpler types
such as strings and integers..."
http://www.sitepoint.com/collection-classes-in-php/

+10: STANDARDS, GUIDELINES & PATTERNS.

On Encrypted Video and the Open Web
By Tim Berners-Lee.
"There has been a lot of response to the announcement that W3C
considers content protection for video as in-scope for discussion in
the HTML Working Group. In this post I can touch on some of the
arguments..."
http://www.w3.org/blog/2013/10/on-encrypted-video-and-the-open-web/

+11: TOOLS.

Dust-Me Selectors
By James Edwards.
"Dust-Me Selectors is a development tool for Firefox and Opera, that
scans your website to find unused CSS selectors."
http://www.brothercake.com/dustmeselectors/

+12: TYPOGRAPHY.

How to Make Pragmatic, Purposeful Typography Choices
By James George.
"If you keep these practical guidelines in mind when making type
choices, your work will turn out much better, you'll likely avoid
frustrating yourself with imperfect typography, and your clients
message will be communicated more powerfully and effectively. I
wouldn't think of them as constraints; instead, I'd consider them a
way to plot a direct path toward winning typography instead of
stumbling upon it somewhat randomly after a long, unnecessary
trial-and-error process. Having a good mix of all of these principles
will ensure that your design turns out well in the fewest possible
iterations..."
http://www.sitepoint.com/make-pragmatic-purposeful-typography-choices/

Responsive Webfont Icons
By Jason CranfordTeague.
"One of the major problems we face in responsive design is how to
create icons that scale to the interface, not just for physical
dimensions, but based on screen size and number of pixels per inch..."
http://webstandardssherpa.com/reviews/responsive-webfont-icons

+13: USABILITY.

The ABC of Usability - Part 9
By Oliver McGough.
"...Discover new terms, learn more of the ones you thought you knew
and find out interesting, little known, details..."
http://blog.usabilla.com/abc-usability-part-9/

Mobile Form Usability - Never Use Inline Labels
By Jamie Appleseed.
"...In summary, the general advice is to avoid inline labels in forms.
The exceptions are single standalone fields or
'singular-purpose-two-field-frequently-used forms', where inline
labels may be used if space efficiency and aesthetics are significant
concerns..."
https://baymard.com/blog/mobile-forms-avoid-inline-labels

Flat Design Won't Hide Your Usability Sins
By Baruch Sachs.
"...Sometimes flat design works, and sometimes it doesn't...To judge
the best approach, you need to understand usage patterns. You need to
know how people do their work..."
http://www.uxmatters.com/mt/archives/2013/10/flat-design-wont-hide-your-usability-sins.php

Learning How to Communicate Visually in Documentation
By Tom Johnson.
"From my recent survey, one reason people said users aren't finding
answers in help material is because the answer is buried under a
mountain of text..."
http://idratherbewriting.com/2013/10/03/learning-how-to-communicate-visually-in-documentation/

[Section one ends.]

++ SECTION TWO:

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