[webdev] Web Design Update: August 24, 2012

Laura Carlson lcarlson at d.umn.edu
Fri Aug 24 06:35:08 CDT 2012 

+++ WEB DESIGN UPDATE.
- Volume 10, Issue 09, August 24, 2012.

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

++ISSUE 09 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: EVALUATION & TESTING.
05: EVENTS.
06: INFORMATION ARCHITECTURE.
07: JAVASCRIPT.
08: MISCELLANEOUS.
09: NAVIGATION.
10: STANDARDS, GUIDELINES & PATTERNS.
11: USABILITY.

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

[Contents ends.]


++ SECTION ONE: New references.

+01: ACCESSIBILITY.

Notes on Accessible CSS Image Sprites
By Steve Faulkner.
"The issue of CSS image sprites has been raised again on the Web
Accessibility Initiative Interest Group mailing list. Here is the
advice we provide on the issue..."
http://www.paciellogroup.com/blog/2012/08/notes-on-accessible-css-image-sprites/

10 Ways to Make Your Content Portable and Accessible
By Martha Rotter.
"Martha Rotter, freelance web developer and co-founder of Idea
magazine, explains how you can make your content portable but
discovers quite a few accessibility issues with digital magazines..."
http://www.netmagazine.com/features/10-great-ways-make-your-content-portable-and-accessible

The Basics of Blog Accessibility
By Cori Shirk.
"...This post outlines 10 ways to improve accessibility on your blog..."
http://www.readbelowthefold.com/web-accessibility/the-basics-of-blog-accessibility.html

Hands Free Browsing - An Interview With Kim Patch
By Henny Swan.
"I first got to know Kim Patch when we worked together on the W3C User
Agent Accessibility Working Group. As a resident of the Web since it's
inception and a long term voice input / non mouse user I was always
fascinated to hear what she had to say about making web content, and
how a browser interprets that content, accessible..."
http://www.iheni.com/hands-free-browsing-an-interview-with-kim-patch/

Judge For Yourself, Is Ticketmaster Audio CAPTCHA Usable?
By Kelly Ford.
"Much has been written about the accessibility challenges posed by
CAPTCHA systems on the internet. Today the most common solution to
address accessibility for individuals who are blind is to have some
sort of audio replacement for the typical visual verification of
characters in an image. Shortcomings of this solution aside, this is
the system that Ticketmaster uses when you attempt to purchase
tickets..."
http://blog.kellyford.org/archives/2012/08/judge_for_yours.html

Selling Accessibility - Positive Factors (External)
By Karl Groves.
"This is the third post in a series of posts on Selling Accessibility..."
http://www.karlgroves.com/2012/08/18/selling-accessibility-positive-factors-external/

What is the Incentive to Build an Accessible Web Site?
By Virginia DeBolt.
"...Really, what's the incentive for most of the people building
websites to learn and use accessibility principles and practices?..."
http://www.webteacher.ws/2012/08/17/what-is-the-incentive-to-build-an-accessible-web-site/

What'd You Do with Your Summer? Google Intern Brings Inline Caption
Editing to YouTube
By Josh Ong.
"...YouTube has supported caption files for a while, but this new
feature adds the ability to make changes to captions directly online
instead of having to change the entire file. It's not the snazziest of
launches, but it should do a lot toward making the site's videos even
more accessible...."
http://thenextweb.com/google/2012/08/14/google-intern-launches-inline-caption-editing-youtube/


+02: CASCADING STYLE SHEETS.

Let's Talk About CSS Variables
By Tab Atkins Jr.
"If you didn't know, CSS is adding Variables to the language..."
http://www.xanthir.com/blog/b4KT0

CSS Variables, Why We Drop the $foo Notation
By Daniel Glazman.
"CSS Variables... A major request from the Web Authors' community since 1998..."
http://www.glazman.org/weblog/dotclear/index.php?post/2012/08/17/CSS-Variables%2C-why-we-drop-the-%24foo-notation

Responsive Line Breaks
By Dan Mall.
"I often come across the problem of widows and orphans when using
fully fluid grids, so here are 2 techniques I use to avoid them as
much as possible..."
http://danielmall.com/articles/responsive-line-breaks/

Extreme specificity overriding a CSS ID with 256 chained Classes
By The CSS Ninja.
The other day Chris Coyier created a test case demonstrating that
chaining together 256 classes will give it greater specificity than an
id, in theory it shouldn't. But in IE, Mozilla and WebKit browsers it
does, Opera on the other hand upholds the specificity. Not familiar
with CSS specificity then take a look at Estelle Weyl's hilariously
informative specifishity chart..."
http://www.thecssninja.com/css/extreme-specificity

Accumulating List-Valued Properties in CSS
By Tab Aktins.
"Several properties in CSS (and more every day) are "list-valued";
that is, the property accepts a comma-separated list of an arbitrary
number of identical (or nearly identical) values. Examples of this are
the background property (and all of its subproperties), the
text-shadow and box-shadow properties, and the animation and
transition properties (and all of their subproperties)."
http://www.xanthir.com/blog/b4KZ0

Cascading Attribute Sheets
By Tab Aktins.
"I recently participated in an internal thread at Google where it was
proposed to move a (webkit-specific) feature from an attribute to a
CSS property, because applying it via a property is much more
convenient..."
http://www.xanthir.com/blog/b4K_0


+03: DREAMWEAVER.

Adding Text to Your Pages in Adobe Dreamweaver CS6
By Tom Negrino, Dori Smith.
"In this chapter, you'll learn how to get text onto your page and
apply structure using headings and lists. You'll also learn how to use
basic HTML text styles to change the look of your text..."
http://www.peachpit.com/articles/article.aspx?p=1927738&WT


+04: EVALUATION & TESTING.

Ending the Opinion Wars - Fast, Collaborative Design Direction
By Dana Chisnell.
"'ve seen it dozens of times. The team meets after observing people
use their design, and they're excited and energized by what they saw
and heard during the sessions. They're all charged up about fixing the
design. Everyone comes in with ideas, certain they have the right
solution to the remedy frustrations users had. Then what happens?.."
http://usabilitytesting.wordpress.com/2012/08/18/ending-the-opinion-wars-fast-collaborative-design-direction/

Usability Testing of Fruit (Video)
By Kelly Franznick.
"Have you ever wondered what would happen if you did a usability test
of fruit? We did. Blink Interactive created this fun look at something
near and dear to our hearts - usability testing. We hope you enjoy
it..."
http://www.blinkux.com/insights/blog/usability-testing-fruit/


+05: EVENTS.

Mobile 2.0 Conference
September 11, 2012.
San Francisco, California, U.S.A.
http://mobile2event.com/

2012 Boston Accessibility Conference
September 15, 2012.
Boston, Massachusetts, U.S.A.
http://a11y-bos.org/faqs

Web Developers Conference
October 19, 2012.
Bristol, U.K.
http://2012.webdevconf.com/

Build Web Conference
November 12-16, 2012.
Belfast, Ireland
http://2012.buildconf.com/

MobX Conference
November 16-17, 2012.
Berlin, Germany.
http://mobx2012.blogspot.com/

Text Customization for Readability Symposium
November 19, 2012.
Online.
http://www.w3.org/WAI/RD/2012/text-customization/


+06: INFORMATION ARCHITECTURE.

Designing Screens Using Cores and Paths
By Jim Kalbach, Karen Lindemann.
"...Cores and Paths is a technique to guide you through the process of
creating straight paths to the core offerings on your site..."
http://www.boxesandarrows.com/view/designing-screens

The Gadfly of Information Architecture (Video)
By Saul Wurman.
"At a sprightly 77 years, Mr Wurman is the author of scores of books
on technology and design, and is credited with having coined the term
"information architect". During the interview, he was true to his
eccentric, irascible self, which has inspried many to his causes. 'We
can't make use of success or failure from one place or another because
we have no common language,' he says metaphorically. 'We also have no
common language in medicine. We have very few common languages,' he
says. 'You need common filters. In all this big data, you need
filters, because often innovation comes from this filter, because you
can see a pattern. And I'm interested in those patterns.'"
http://www.economist.com/blogs/graphicdetail/2012/06/qa-richard-saul-wurman

The Difference Between Information Architecture and UX Design
By Darren Northcott.
"Next to explaining what I do for a living, the second question I most
frequently hear is: 'What's the difference between Information
Architecture and User Experience?' The line always seems to blur
between the two, even though there's clearly a difference. How should
I go about explaining it?..."
http://www.uxbooth.com/blog/the-difference-between-ia-and-ux-design/

What Should You Know About Content Before You Design?
By Steven Bradley.
"Content informs design. You can't design a website without an
understanding of what content will be on it..."
http://www.vanseodesign.com/web-design/content-before-design/

The User We've Left Out - The Content Governor
By Jared Spool.
"Jared shares "the concept of a content governor and why you should
consider this person a user of your site"
http://www.uie.com/articles/content_governor/


+07: JAVASCRIPT.

JavaScript Events And Responding To The User
By Christian Heilmann.
"Today, let's get back to the basics of events and get you in the mood
to start playing with them..."
http://coding.smashingmagazine.com/2012/08/17/javascript-events-responding-user/

Datatable to Barchart Without Images, Libraries or Plugins
By Christian Heilmann.
"Following the results of a survey on library use by developers I was
asked to make it easier to do a head to head comparison of the data of
one of the questions. I thought it'd be interesting to start a dynamic
bar chart from scratch and it is incredible just how easy these things
are nowadays..."
http://christianheilmann.com/2012/08/16/datatable-to-barchart-without-images-libraries-or-plugins/


+08: MISCELLANEOUS.

Responsive HTML5 Video
By Ian Devlin.
"Recently I was building a one page site, the centre piece of which
was a video. Naturally I went with HTML5 video with a Flash fallback,
but I also wanted to make the site, and the video, responsive. There
are a couple of ways of approaching this..."
http://www.iandevlin.com/blog/2012/08/html5/responsive-html5-video

Responsive Design - Sensors, Systems, And Actuators
By Steven Bradley.
"I've been talking about various aspects of responsive design for a
few months now and while there are plenty of topics that could still
be covered, I thought it was time to wrap up this series and move on
to some other things..."
http://www.vanseodesign.com/web-design/responsive-sensors-systems-actuators/

Thoughts on Adding a Type Attribute (to the picture element).
Bt Brett Jankord.
"...some thoughts I've put together for adding a type attribute to
source tags in the picture element..."
http://www.w3.org/community/respimg/2012/08/21/thoughts-on-adding-a-type-attribute-2/

Responsive Image Protocol Proposal
By Francois Remy.
These days, many people advocate for the use 'image sets'. Meanwhile,
image sets is just a way to put more burden on the developer by asking
him to specify two image urls in his markup if he want to support
high-resolution screens (phones, tablets, and high-end notebooks).
http://fremycompany.com/BG/2012/Responsive-Image-Protocol-proposal-908/

Separate Mobile Website Vs. Responsive Website
By Brad Frost.
"...It just so happens that the two US presidential candidates have
chosen different mobile strategies for their official websites. In the
red corner is Republican candidate Mitt Romney's dedicated mobile
website, and in the blue corner is incumbent Barack Obama's responsive
website..."
http://mobile.smashingmagazine.com/2012/08/22/separate-mobile-responsive-website-presidential-smackdown/

Tim Berners-Lee's Original World Wide Web Browser
By cern.
"A screen shot taken from a NeXT computer running Tim Berners-Lee's
original WorldWideWeb browser..."
http://info.cern.ch/NextBrowser.html


+09: NAVIGATION.

Examples of Skip Links on Some Bank Sites
By Steve Faulkner.
"While discussing long descriptions on the HTML working group mailing
list I took a look at how some sites provide skip links as an example
of contingent visible display of content as a more palatable design
concept for some accessibility features, as against always displayed
or always visually hidden..."
http://www.paciellogroup.com/blog/2012/08/examples-of-skip-links-on-some-bank-sites/


+10: STANDARDS, GUIDELINES & PATTERNS.

Using the HTML5 Placeholder Attribute
By Leonie Watson.
"HTML5 has changed the way we build websites and online applications.
It introduces lots of new features, many of which make inclusive
design much more achievable..."
http://tink.co.uk/2012/08/using-the-html5-placeholder-attribute/


+11: USABILITY.

Recent Research in User Experience
By Peter Hornsby.
"In this column, let's take a look at some recent technology
developments that promise to change the landscape of user experience
in the months and years to come..."
http://www.uxmatters.com/mt/archives/2012/08/recent-research-in-user-experience.php


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

More information about the Webdev mailing list