[webdev] Web Design Update: April 26, 2012

Thu Apr 26 06:34:16 CDT 2012

+++ WEB DESIGN UPDATE.
- Volume 10, Issue 44, April 26, 2012.

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

++ISSUE 44 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: JAVASCRIPT.
07: MISCELLANEOUS.
08: NAVIGATION.
09: STANDARDS, GUIDELINES & PATTERNS.
10: USABILITY.

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

[Contents ends.]

++ SECTION ONE: New references.

+01: ACCESSIBILITY.

Can Assistive Technology Make a Website Accessible?
By Karl Groves.
"...There is only one place where accessibility happens: The code.
This goes for any assistive technology.  If the markup is used
improperly, if the proper controls aren't used in the proper ways, if
the client-side scripting doesn't manage focus properly and if the
controls aren't discoverable and actionable by keyboard, no assistive
technology product, service, or device will matter.  The code is where
accessibility happens and so long as companies' budgets are being
diverted to ineffective products, these budget dollars are not being
used on things that matter, like training developers and remediating
their sites."
http://www.karlgroves.com/2012/04/19/can-assistive-technology-make-a-website-accessible/

Suggestions for the New Disability.gov
By Dennis E. Lembree.
"... Every website, no matter how great the foundation, is a work in
progress and could use improvements. Disability.gov is no exception.
Here's my review of the home page..."
http://webaxe.blogspot.com/2012/04/suggestions-for-new-disabilitygov.html

A Challenge to Web Accessibility Metrics and Guidelines - Putting
People and Processes First
By Martyn Cooper, et al.
"This paper argues that web accessibility is not an intrinsic
characteristic of a digital resource but is determined by complex
political, social and other contextual factors, as well as technical
aspects which are the focus of WAI standardisation activities. It can
therefore be inappropriate to develop legislation or focus on metrics
only associated with properties of the resource..."
http://opus.bath.ac.uk/29190/3/print-it.html

Headings in HTML and PDF, a Comparison
By Duff Johnson.
"...By definition, in PDF, the "H" and "Hn" tags denote "subdivisions"
of content (we'll not get into "strongly" and "weakly" structured for
now). "Subdivision," of course, may or may not mean the same as
"importance," depending on the specific document, but either way, the
concept is distinct from the HTML 4 notion of "heading"..."
http://www.commonlook.com/The-Definition-of-Heading

+02: CASCADING STYLE SHEETS.

Hiding Content Untangled - Hiding vs. Moving Out of the Visible Viewport
By Marco Zehe.
"...It is my sincere hope that this blog post helps to clear up some
confusion about the types of 'hidden' content, the effects 'display:
none;' vs. negative positioning has, and when to use what properly. A
good rule of thumb might be: If something should remain hidden until
the user performs a conscious action, use 'display: none;'. Should
something, on the other hand, become visible when navigated to via the
keyboard, or be discoverable by screen reader users right away, use
negative positioning."
http://www.marcozehe.de/2012/04/24/hiding-content-untangled-hiding-vs-moving-out-of-the-visible-viewport/

How to Remove CSS Outlines in an Accessible Manner?
By Steve Faulkner.
"Anybody with any real world accessibility experience knows that using
CSS :focus {outline:none} as recommended in the WHATWG HTML living
standard is not a solution to any problem, it only replaces one
accessibility issue with another. This why I worked hard to get the
advice still present in the 'living standard' removed from the W3C
HTML5 specification..."
http://www.paciellogroup.com/blog/2012/04/how-to-remove-css-outlines-in-an-accessible-manner/

CSS3 Structural Pseudo-class Expressions Explained
By Louis Lazaris.
"You probably know that the CSS3 spec includes a number of structural
pseudo-classes. Four of these pseudo-classes use function-like syntax
that allow an argument to be passed in using parentheses. These
are..."
http://www.impressivewebs.com/css3-pseudo-class-expressions/

Automatic Line Breaks in Narrow Columns With CSS 3 Hyphens and Word-Wrap
By Roger Johansson.
"A problem that has always existed but has become more common lately
as more people - thanks to the popularity of responsive web design -
make their layouts adapt to narrow viewports, is the lack of automatic
hyphenation in web browsers..."
http://www.456bereastreet.com/archive/201204/automatic_line_breaks_in_narrow_columns_with_css_3_hyphens_and_word-wrap/

Saving the Day with Scoped CSS
By Arley McBlain.
"...One little known feature of HTML5 is Scoped CSS. It's an attribute
for style blocks that may change the way we tackle certain styling
challenges in the future..."
http://css-tricks.com/saving-the-day-with-scoped-css/

Some Practical Guidelines For Writing CSS
By Steven Bradley.
"Do you follow a consistent set of practices when writing your css or
do you write a few lines of css that work before move on to the next
line? Did your best practices grow organically or did you follow a set
of guidelines for writing your code?..."
http://www.vanseodesign.com/css/practical-guidelines/

Creating a Mobile-First Responsive Web Design
By Brad Frost.
"We're going to walk through how to create an adaptive web experience
that's designed mobile-first..."
http://www.html5rocks.com/en/mobile/responsivedesign/

+03: DREAMWEAVER.

Creating a Page Layout with Adobe Dreamweaver CS6
By Adobe Creative Team.
"In this lesson from Adobe Dreamweaver CS6 Classroom in a Book, you'll
learn the basics of webpage design, how to create design thumbnails
and wireframes, insert and format new components into a predefined CSS
layout, use Code Navigator to identify CSS formatting, and check for
browser compatibility..."
http://www.peachpit.com/articles/article.aspx?p=1860943

Using Web Fonts in Adobe Dreamweaver CS6
By Tom Negrino and Dori Smith.
"The @font-face rule allows you to use non-Web-safe fonts by defining
the location of a font resource, which can be either local to your
machine or external. As of CS 5.5, Dreamweaver supports @font-face.
Tom Negrino and Dori Smith show you some examples in this excerpt from
Dreamweaver CS6 Visual Quick Start."
http://www.peachpit.com/articles/article.aspx?p=1860944

+04: EVALUATION & TESTING.

Usability Testing - What Needs Fixing?
By David Hamill.
"Usability testing is too often used innapropriately in my opinion.
Compared to other research techniques, it's fairly cheap and easy to
organise. But this leads to it being used to answer research questions
it often can't answer. In this post I'll discuss how I think the UX
community is losing touch with some of the basics..."
http://www.goodusability.co.uk/2012/04/18/usability-testing-what-needs-fixed/

+05: EVENTS.

CSS Summit
July 31-August 2, 2012.
Online
http://environmentsforhumans.com/2012/css-summit/

dConstruct
September 7, 2012.
Brighton, United Kingdom
http://2012.dconstruct.org/

Fronteers
October 4-5, 2012.
Amsterdam, Netherlands
http://fronteers.nl/congres/2012

Paris Web
October 13-15, 2012.
Paris, France
http://www.paris-web.fr/

+06: JAVASCRIPT.

WAI-ARIA 1.0 Authoring Practices
By W3C.
"This WAI-ARIA Authoring Practices Guide provides readers with an
understanding of how to use WAI-ARIA [ARIA] to create accessible rich
internet applications."
http://www.w3.org/TR/wai-aria-practices/

WAI-ARIA 1.0 Primer
By W3C.
"The WAI-WAI-ARIA Primer introduces developers to the use of WAI-ARIA
[ARIA] for addressing the accessibility of dynamic Web content for
people with disabilities."
http://www.w3.org/TR/wai-aria-primer/

Roadmap for Accessible Rich Internet Applications
By W3C.
"The Roadmap for Accessible Rich Internet Applications addresses the
accessibility of dynamic Web content for people with disabilities..."
http://www.w3.org/TR/wai-aria-roadmap/

Scope and this in JavaScript
By Jack Franklin.
"Today I want to talk a little about scope in JavaScript and the this
variable. The idea of "scope" is that it's where certain functions or
variables are accessible from in our code, & the context in which they
exist & are executed in..."
http://javascriptplayground.com/blog/2012/04/javascript-variable-scope-this

Google JavaScript Style Guide
By Aaron Whyte, Bob Jervis, Dan Pupius, Eric Arvidsson, Fritz
Schneider, and Robby Walker.
http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml

+07: MISCELLANEOUS.

Implement Responsive Design with jQuery Mobile and CSS3
By Kris Hadlock.
"On its own, the jQuery Mobile framework is a great solution for
quickly creating an accessible, HTML5 markup-driven mobile website.
When paired with CSS3, things really get interesting, as it becomes
possible to create web page layouts that respond to a user's device
based on the screen resolution. This article shows how to use the
jQuery Mobile framework and CSS3 media queries to implement responsive
design in your web pages."
http://www.ibm.com/developerworks/web/library/mo-jquery-responsive-design/index.html

The State of Responsive Images
By Mat Marquis.
"Designer/developer Mat 'Wilto' Marquis takes a look at the img tag,
explains why a largest-size-fits-all approach to images is untenable
and discusses different solutions in this ongoing saga."
http://www.netmagazine.com/features/state-responsive-images

Mocking Up Is Hard To Do
By beardedstudio.
"...The more time we've spent working on responsive websites, the
clearer it's become that  mock-ups aren't very good representations of
the final product. They involve a lot of unnecessary abstraction that
results in difficulty with...Our trials with this method so far have
been very rewarding. It feels right to be creating interactions
directly in their final medium, the browser. We feel more in touch
with and inspired about our work than ever. It's clear to me now that
for years we've just been designing pictures of websites. But now,
finally, we're designing websites."
http://blog.bearded.com/post/21447195970/mocking-up-is-hard-to-do

Why We Shouldn't Make Separate Mobile Websites
By Bruce Lawson.
"There has been a long-running war going on over the mobile Web: it
can be summarized with the following question: 'Is there a mobile
Web?' That is, is the mobile device so fundamentally different that
you should make different websites for it, or is there only one Web
that we access using a variety of different devices? Acclaimed
usability pundit Jakob Nielsen thinks that you should make separate
mobile websites. I disagree...The vital point is that you never know
better than your users what content they want...how can you reliably
detect mobile browsers in order to redirect them? The fact is: you
can't..."
http://www.smashingmagazine.com/2012/04/19/why-we-shouldnt-make-separate-mobile-websites/

Browser Landscape At A Fast Pace
By Karl Dubost.
"...I was looking at the stats on statscounter between February 2012
and on one year, and I was amazed how the landscape is changing
quickly. And it will continue to change very quickly. It's one of the
reasons user agent sniffing will fail more in the future."
http://my.opera.com/karlcow/blog/2012/03/29/browser-stats

+08: NAVIGATION.

Skip Links on Mobile and Tablets
By Henny Swan.
"Skips links are mainly useful for sighted keyboard only users on
desktop and some screen reader users. While they're a recommendation
rather than a requirement of WCAG 2.0 it's a feature that many
websites built with accessibility choose to include..."
http://www.iheni.com/skip-links-on-mobile-and-tablets/

+09: STANDARDS, GUIDELINES & PATTERNS.

Let's Talk about Semantics
By Mike Robinson.
"It's time we had 'the talk'. I could get you a book or recommend some
sites from Dr Mike's special bookmarks folder, but the best way to
make sure you get the right idea is to do it myself. I'm talking about
HTML semantics. Understanding the thinking behind the naming of
elements will help your markup shine..."
http://html5doctor.com/lets-talk-about-semantics/

Progress on HTML5
By Michael[tm] Smith.
"When the HTML5 specifications advanced to Last Call, we wrote in this
forum HTML5: Are We There Yet?. We're posting here today to give an
update on progress made with the HTML5 specifications, and where we're
heading next..."
http://www.w3.org/QA/2012/04/progress_on_html5.html

+10: USABILITY.

Steph Hay - Writing Content for Usability
By Sean Carmichael.
"...Steph Hay, Co-Founder of FastCustomer comes to the rescue in her
virtual seminar, Writing Content for Usability, full of her tips for
writing compelling content. She explains that choosing the right words
and tone are essential to getting users to take action. The audience
asked a bunch of great questions during the live seminar and Steph
joins Adam Churchill to address the ones that we didn't have time for
in the podcast..."
http://www.uie.com/brainsparks/2012/04/20/steph-hay-writing-content-for-usability/

Content Modelling - A Master Skill
By Rachel Lovinger.
"A content model is a powerful tool for fostering communication and
aligning efforts between UX design, editorial, and technical resources
on a project. By clearly defining the assembly model, the content
types, and the content attributes, we can help make sure that the
envisioned content strategy becomes a reality for the content
creators. In my recent projects, I find that content modeling is more
and more in demand. It's a valuable skill for any content strategist,
especially those that strive for mastery. "
http://www.alistapart.com/articles/content-modelling-a-master-skill/

[Section one ends.]

++ SECTION TWO:

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