[webdev] Web Design Update: June 21, 2012

Thu Jun 21 06:21:13 CDT 2012

+++ WEB DESIGN UPDATE.
- Volume 10, Issue 52, June 21, 2012.

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

++ISSUE 52 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: DREAMWEAVER.
04: EVENTS.
05: INFORMATION ARCHITECTURE.
06: JAVASCRIPT.
07: MISCELLANEOUS.
08: NAVIGATION.
09: STANDARDS, GUIDELINES & PATTERNS.
10: TOOLS.
11: TYPOGRAPHY.
12: USABILITY.
13: XML.

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

[Contents ends.]

++ SECTION ONE: New references.

+01: ACCESSIBILITY.

The Case of the Missing alt Attribute
By Joel Dolson.
"...Of the 100 most common validation errors collected by W3C Love, a
missing alt attribute comes it at number one - with almost double the
occurrences of the next most common error..."
http://www.joedolson.com/articles/2012/06/the-case-missing-alt-attribute/

How to Ensure You Pay More for Web Accessibility Than You Should
By Derek Featherstone.
"Here are our top 9 tips that help you ensure that you pay much more
for web accessibility than you should. Because who doesn't want that,
right?"
http://simplyaccessible.com/article/pay-more/

Digital Accessibility - The Commercial Realities
by Leonie Watson.
"There's a lot of talk about how badly businesses do when it comes to
digital accessibility, but little focus on why it really matters. The
impact of not getting accessibility right is damaging to businesses,
but the benefits of getting it right are very positive indeed..."
http://www.biz-works.net/index.php5?&fl=y&pgid=bp&art=271

Response to 15+ Tips to Improve Web Accessibility
By Dennis E. Lembree.
"I gave feedback in the form of a comment for the article 15+ Tips to
Improve Web Accessibility of a Website..."
http://webaxe.blogspot.com/2012/06/response-to-15-tips-to-improve-web.html

Federal District Court in Massachusetts First in Country to Hold that
the Americans with Disabilities Act Applies to Website-Only Businesses
By National Association of the Deaf.
"Judge Denies Netflix's Motion for Judgment on the Pleadings and
Allows Disability Civil Rights Case, National Association of the Deaf,
et al. v. Netflix, Case No. 3:11-cv-30168, to Move Forward..."
http://www.nad.org/news/2012/6/landmark-precedent-nad-vs-netflix

An Introduction to WebVTT and <track>
By Ian Devlin.
"...The introduction of WebVTT and the HTML5 <track> element makes it
much easier for web authors to make their video and audio more
accessible to those who, for whatever reason, are unable to access the
content in the way it is usually presented. Whilst browser support is
still nascent, a number of JavaScript polyfills allow us to make our
media more accessible now, in a way that will be understood by
browsers once support for WebVTT increases..."
http://dev.opera.com/articles/view/an-introduction-to-webvtt-and-track/

+02: CASCADING STYLE SHEETS.

Beware of @import Rules When Concatenating CSS Files
By Roger Johansson.
"...if you use any @import rules they must precede all other rules in
that file, as per the CSS 2.1 specification. So if any other than the
very first of the CSS files you concatenate has an @import rule, the
combined file will violate the specification...."
http://www.456bereastreet.com/archive/201206/beware_of_import_rules_when_concatenating_css_files/

One, Two, or Three
By Chris Coyier.
"That's how many CSS files should be loaded on any website..."
http://css-tricks.com/one-two-three/

CSS Variables
By Stoyan Stefanov.
"Weeee, CSS variables just landed in WebKit, this is pretty exciting..."
http://www.phpied.com/css-variables/

CSS Variables - WebKit Brings the CSS Jackalope to Life
By Scott Gilbertson.
"The mythical beast known as the CSS Variable is about to be released
into the wild. The WebKit team, which builds the browsing engine that
powers both the Safari and Chrome web browsers, recently landed
preliminary support for CSS Variables, which means variables will
likely turn up soon in Chrome/Chromium and Safari nightly builds..."
http://www.webmonkey.com/2012/06/css-variables-webkit-brings-the-css-jackalope-to-life/

Notes to an Agency Starting Their First Responsive Web Project
By Chris Coyier.
"This past week I talked with a design agency who was about to embark
upon their first responsive web design project. It sounded rather
app-like. They were interested in hearing about my experiences, what
to expect, what the process is like or could be like, what the
deliverables should be, things to watch out for, and things like
that..."
http://css-tricks.com/notes-agency-starting-their-first-responsive-web-project/

Responsive Web Design: Preserving Images' Aspect Ratio
By Bruce Lawson.
"...This is easily cured without trawling through the markup and
removing HTML height attributes. Simply extend your img CSS so it
reads img {max-width:100%; height:auto;} and aspect ratio is
preserved."
http://www.brucelawson.co.uk/2012/responsive-web-design-preserving-images-aspect-ratio/

New Repeating Background Image Options in CSS3
By Craig Buckler.
"In CSS2.1, the background-repeat property had four options:
no-repeat, repeat, repeat-x and repeat-y. While these are undoubtedly
useful, they don't permit finer control over the repeating process and
tiles will be clipped if they don't fit the container an exact number
of times. CSS3 introduces two new options: space and round…"
http://www.sitepoint.com/css3-background-repeat-space-round/

CSS Object Model
By Divya Manian.
Until Test the Web Forward I had just a vague idea of what CSS Object
Model does. So, it was awesome to hear from and learn about the CSS OM
from the spec co-editor Glenn Adams..."
http://nimbupani.com/css-object-model.html

Classes? Where We're Going, We Don't Need Classes!
By Heydon Pickering.
"Classes, classes, classes everywhere. What if we don't need CSS
classes at all?..."
http://coding.smashingmagazine.com/2012/06/19/classes-where-were-going-we-dont-need-classes/

+03: DREAMWEAVER.

Learn a CMS or Learn Dreamweaver?
By Stefan Mischook.
"Recently someone asked whether they should learn Dreamweaver OR
whether should they jump into a CMS like Joomla or Wordpress..."
http://www.killersites.com/blog/2012/learn-a-cms-or-learn-dreamweaver/

Advanced Design Template for jQuery Mobile
By Chris Converse.
"jQuery Mobile is a unified, HTML5-based user interface system for all
popular mobile device platforms, built on the rock-solid jQuery and
jQuery UI foundation. Its lightweight code is built with progressive
enhancement, and has a flexible, easily theme-able design. Meanwhile,
Adobe Dreamweaver CS6 features a streamlined workflow for creating a
jQuery Mobile project. In this article, you will create a simple
jQuery Mobile application with Dreamweaver CS6. The following video
walks you through the features of this Dreamweaver template for jQuery
Mobile..."
http://www.adobe.com/devnet/dreamweaver/articles/dw-template-jquery-mobile.html

+04: EVENTS.

Usability Week 2012 Conference
June 25-29, 2012 in Chicago, Illinois, U.S.A.
July 23-27, 2012 in Toronto, Canada
August 12-17, 2012 in Sydney, Australia
September 23-28, 2012 in San Francisco, California, U.S.A.
October 14-19, 2012 in London, England, United Kingdom
http://www.nngroup.com/events/

Content Strategy for Mobile
June 28, 2012.
Online
http://www.uie.com/events/virtual_seminars/content_for_mobile/

The Enterprise Mobile Revolution
July 17, 2012.
Sydney, Austrailia
http://www.steptwo.com.au/seminars/enterprise-mobile

World Usability Day
November 8, 2012.
Online
http://www.worldusabilityday.org/

International Day of People with Disability
December 3, 2012.
Online
http://www.idpwd.com.au/

+05: INFORMATION ARCHITECTURE.

7 Frequently Asked Questions on Card Sorting
By Donna Spencer.
"These frequently asked questions are found in Donna Spencer's book,
Card Sorting - Designing Usable Categories. You'll find great examples
and more detailed explanations to these questions and other card
sorting related issues in the book."
http://www.uie.com/articles/seven_questions/

+06: JAVASCRIPT.

Rich Internet App Accessibility
By Deque Systems.
"Today we have a guest post from Ryan Hemphill and Bradley Momberger
about Rich Internet App Accessibility.  Both Ryan and Brad work for
Cengage Learning - Ryan is a Senior User Experience Designer-Developer
and Brad is a Senior Software Engineer, Front End Specialist. "
http://www.deque.com/rich-internet-app-accessibility

Taking a Flance at Aria-Flowto
By Everett Zufelt.
"...It is best to build pages in a clean semantic structure. As much
as it is possible adding sections of complementary content within your
main article content is a poor design decision. If, however, you are
faced with a situation where this is necessary, using the aria-flowto
property may improve the user experience for some of your site's
visitors..."
http://zufelt.ca/blog/taking-glance-aria-flowto

Notes on Using ARIA
By Steve Faulkner.
"I have jotted down some notes on ARIA concepts and usage that may be
useful for developers."
http://www.paciellogroup.com/blog/2012/06/html5-accessibility-chops-using-aria-notes/

A Quick Introduction to WAI-ARIA
By Russ Weakley.
http://www.slideshare.net/maxdesign/a-quick-introduction-to-aria

Stumbling On the Escalator
By Christian Heilmann.
Article about people forgetting basic principles of progressive enhancement.
http://christianheilmann.com/2012/02/16/stumbling-on-the-escalator/

+07: MISCELLANEOUS.

Why Should Higher Ed Rethink Content for Responsive Web Design?
By Karine Joly.
"In preparation for the Higher Ed Redesign Web Design Summit taking
place next week (June 19-21, 2012), I had the pleasure to listen to
Sara Wachter-Boettcher, the keynote, yesterday. Sara is one of the
leading expert in content for responsive web design and is wrapping up
a book to be published in a few months by Rosenfeld Media, Content
Everywhere. I interviewed Sara a few weeks ago about the topic she
will present about next Thursday but I thought you would also enjoy a
short excerpt of her talk where she explains why it's important to
rethink content for RWD. This excerpt was recorded during the
rehearsal yesterday..."
http://collegewebeditor.com/blog/index.php/archives/2012/06/15/why-should-highered-rethink-content-for-responsive-web-design/

Silvia Pfeiffer on "A New Type of Web"
By Bruce Lawson.
"The development of networked video will lead to 'a new type of web',
predicts Silvia Pfeiffer, web video pioneer and consultant to Google.
"
http://www.netmagazine.com/interviews/silvia-pfeiffer-new-type-web

John Foliot on the New Video Formats
By Bruce Lawson.
"W3C Invited Expert John Foliot explains the difference between TTML
and WebVTT, and which one you should be using "
http://www.netmagazine.com/interviews/john-foliot-new-video-formats

Florian's Compromise
By Mathew Marquis.
"Florian joined the list by posting a brilliantly thought-out
compromise between the two syntax patterns. I'd like to share my
thoughts on this proposal here, as I feel it combines the strengths of
srcset and picture in a practical and logical way. Let's begin by
taking a look at the proposed syntax."
http://www.w3.org/community/respimg/2012/06/18/florians-compromise/

Responsive Images With WordPress' Featured Images
By Rachel McCollin.
"In this article, we'll look at how to use WordPress' built-in
featured images capability to deliver different-sized image files to
different devices..."
http://mobile.smashingmagazine.com/2012/06/14/responsive-images-with-wordress-featured-images/

+08: NAVIGATION.

Prioritization and Visual Language in Navigation
By Andy Montgomery.
"Recently I contributed an article to the user experience industry
website UX Booth.  In short, the article discusses the importance of
differentiation within navigation schemes and focuses on two
techniques in particular: prioritization and visual language..."
http://viget.com/inspire/prioritization-and-visual-language-in-navigation

+09: STANDARDS, GUIDELINES & PATTERNS.

The Cost of Performance, Part 2 Tag Cutting
By Niels Matthijs.
"...Next time you wonder whether to remove a html tag, think about its
semantic or structural value rather than its css/javascript
feasibility. Of course css and javascript restrictions might still
affect the final html, but they should never be the reason for
removing a certain tag, they can only account for extra tags. Tag
cutting comes with maintenance costs and reduces the future-proofness
of your html code, a drop in quality you shouldn't be willing to risk,
especially if you consider the minimal impact of this technique.
Performance is important, but there is more to web design than just
speed alone."
http://www.onderhond.com/blog/work/cost-of-performance-tag-cutting

The Future of HTML5 Video
By Bruce Lawson.
"What's coming next in the world of HTML5 video? Opera's Bruce Lawson
reveals what's in store and how you can incorporate the new features
into your own sites."
http://www.netmagazine.com/features/future-html5-video

+10: TOOLS.

CSS Gradient Finder
By aaronm67.
Provides CSS gradient code from a PNG.
http://gradientfinder.com/

Southstreet Progressive Enhancement Workflow
By Filament Group.
"Our tools and workflow for building fast and accessible cross-device
web applications..."
https://github.com/filamentgroup/Southstreet

+11: TYPOGRAPHY.

Fluid Type
By Trent Walton.
"Embracing the fluid & flexible aspect of responsive web design was an
easy decision, but I've been less sure-footed when it comes to
balancing that with setting type on the web..."
http://trentwalton.com/2012/06/19/fluid-type/

+12: USABILITY.

Modular And Flexible Content In Responsive Design
By Steven Bradley.
"One of the questions that comes up with responsive design is what to
do with the content? Does the same content get included everywhere or
does it change based on device? It's the first and most important
question we should be asking with any design, responsive being no
exception..."
http://www.vanseodesign.com/web-design/modular-responsive-content/

Where You Can Stick Your Social Networking Buttons
By Leonie Watson.
"...So where should you stick your social networking buttons? The
short answer is after the content you'd like people to share. Think of
it like a form. You want people to take some action once they've
completed doing something else. In this case, you want people to share
your content once they've finished reading it..."
http://www.nomensa.com/blog/2012/where-you-can-stick-your-social-networking-buttons/

Why Country Sites Are So Bad
By Jakob Nielsen.
"When a multinational company produces a localized country site,
usability is often lost. Local advertising agencies design
good-looking sites that don't communicate."
http://www.useit.com/alertbox/country-site.html

+13: XML.

What XML Can Learn from HTML; Also Known as XML5 (video)
By Anne van Kesteren.
"This XMLPrague 2012 talk will take a brief look at what it takes to
replace XML with a fully backwards compatible revision of XML that no
longer halts processing at violations of well-formedness and why that
might be worth doing."
https://www.youtube.com/watch?v=nhVfIyFPWAA

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