[webdev] Web Design Update: November 7, 2013

Thu Nov 7 06:57:23 CST 2013

+++ WEB DESIGN UPDATE.
- Volume 12, Issue 20, November 8, 2013.

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

++ISSUE 20 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: HTML5.
05: INFORMATION ARCHITECTURE.
06: JAVASCRIPT.
07: MISCELLANEOUS.
08: TOOLS.
08: USABILITY.

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

[Contents ends.]

++ SECTION ONE: New references.

+01: ACCESSIBILITY.

Displaying Multiple Errors on a Form
By Jeff Smith.
"In this week's Best Practice of the Week (BPOW), we show you how to
handle displaying multiple errors on a form."
http://simplyaccessible.com/bpow/error-summary/

Electronic Accessibility (For Web Developers)
By The University of California.
"Anyone who codes static web pages or dynamic web applications must
ensure that the content is accessible to individuals with
disabilities, including visually and hearing impaired people. The
following guidelines represent the most basic steps for improving the
accessibility of websites and reflect good development standards. See
Advanced tips for guidelines on more complex topics."
http://www.ucop.edu/electronic-accessibility/web-developers/index.html

Electronic Accessibility (For Content Developers)
By The University of California.
"Anyone developing content (text, images, video, etc.) for inclusion
in online publications or systems must ensure that all the necessary
elements are provided to make the content accessible to individuals
with disabilities, including visually and hearing impaired people.
http://www.ucop.edu/electronic-accessibility/content-developers/index.html

Views of a Faculty Member - Accessibility From Where I Stand
By Kimberly Snow.
"We invited Kimberly Snow from The Department of Special Education and
Rehabilitation at Utah State University to write a guest blog post.
She wrote on her her experiences with accessibility as a faculty
member."
http://ncdae.org/blog/accessibility-from-where-i-stand/

Presentation Template - Making the Case for Web Accessibility
By Jonathan Chetwynd.
"We have had several requests from folks who would like help creating
content they could use as they work to obtain buy-in from others at
their institution (e.g., Administrative decision makers, faculty and
staff)..."
http://ncdae.org/blog/presentation-template/

Help Ensure Online Course Content is Accessible to Students With Disabilities
By Disability Compliance for Higher Education.
"Among students with certain disabilities, distance learning is often
preferable to brick-and-mortar courses for a variety of reasons. For
one, those with social disorders don't have to interact with others in
person. And those with mental health problems who fear being
stigmatized if others learn about their conditions don't have to worry
as much when they take online classes..."
http://www.disabilitycomplianceforhighereducation.com/Article-Detail/help-ensure-online-course-content-is-accessible-to-students-with-disabilities.aspx

Word Press Accessibility
By Joe Dolson.
"WP Accessibility provides fixes for common accessibility issues in
your WordPress site..."
http://wordpress.org/plugins/wp-accessibility/

+02: CASCADING STYLE SHEETS.

Hidden Label Firefox Bug
By Gez Lemon.
The standard method for hiding text visually to retain a clean design
but provide context for screen reader users is to use the CSS clip
technique. Due to browser bugs with the clip property, other
declarations are used to make this technique work correctly across
different browsers.
http://juicystudio.com/article/hidden-label-firefox-bug.php

Using 'aria-labelledby' as a Styling Hook
By Jamie Hill.
"...and then stumbled on the aria-labelledby attribute. It turns out
that this makes for a perfectly semantic styling hook..."
http://thelucid.com/2013/10/30/using-aria-labelledby-as-a-styling-hook/

Think Modularly
By Bridget Stewart.
"Think modularly: standardize repeated patterns in the HTML and CSS
for greater flexibility and easier maintenance."
http://webstandardssherpa.com/reviews/think-modularly

13 Scary Cool Things I Learned at CSS Dev Conf 2013
By Andrew Jones.
"Last week, I attended CSS Dev Conference, the 'conference devoted
solely to CSS, the design language of the web'..."
http://blog.bignerdranch.com/4203-13-scary-cool-things-i-learned-at-css-dev-conf-2013/

Which CSS Measurements To Use When
By Dudley Storey.
"What follows is a list of suggestions, not absolute rules. If you
have a differing opinion or working practice (and a rationale to back
it up), please share in the comments..."
http://demosthenes.info/blog/775/Which-CSS-Measurements-To-Use-When

Advanced Layout Made Easy with CSS Regions
By Beth Dakin and Mihnea-Vlad Ovidenie.
"CSS regions are an exciting technology that make it easier than ever
to create rich, magazine-like layouts within web content. Regions have
been under development in WebKit for a while now, and we're delighted
to tell you that they are available for use in Safari on iOS 7, Safari
7 on Mavericks, and Safari 6.1 on Mountain Lion..."
https://www.webkit.org/blog/3078/advanced-layout-made-easy-with-css-regions/

Killer Responsive Layouts With CSS Regions
By C.J. Gammon.
"As Web designers, we are largely constrained by the layout features
available to us. Content placed inside a container will often
naturally extend the container vertically, wrapping the content. If a
design requires elements to remain a certain height, then our options
are limited. In these cases, we can only add a scroll bar or hide the
overflow. The CSS Regions specification provides a new option..."
http://coding.smashingmagazine.com/2013/11/05/killer-responsive-layouts-with-css-regions/

+03: EVALUATION & TESTING.

How to Get the Most From Your Website A/B Testing
By Mitch Schneider.
"In today's conversion-driven digital markets, A/B testing is a
fundamental tool that takes the guesswork out of website optimization.
It is a great way to quickly try to improve the design and performance
of your web pages."
http://blog.clicktale.com/2013/11/06/how-to-get-the-most-from-your-website-ab-testing/

+04: HTML5.

Cite and Blockquote - Reloaded
By Steve Faulkner.
"The definitions of the blockquote and cite elements in the HTML
specification have recently been updated. This article explains what
the changes mean for developers..."
http://html5doctor.com/cite-and-blockquote-reloaded/

+05: INFORMATION ARCHITECTURE.

Information Architecture - Beyond Web Sites, Apps, and Screens
By Nathaniel Davis.
"I recently asked the Twitterverse to suggest some information
architecture topics that would be worth discussing in my UXmatters
column. In response, I received a single tweet from @ToonDoctor
(Toon)"
http://www.uxmatters.com/mt/archives/2013/11/information-architecture-beyond-web-sites-apps-and-screens.php

+06: JAVASCRIPT.

Perpetuating Terrible JavaScript Practices
By Chris Heilmann.
"...All in all, I am really disappointed to see code like this in a
brand new book about bleeding edge technology using JavaScript. This
is not by design, this is plain and simple laziness and bad editing.
JavaScript has become incredibly powerful and is used in a lot of
cases for business critical functionality. In a closed environment
like a SmartTV there is nothing at all wrong about that. What is wrong
though is educating new developers to write code that was maybe needed
to support IE4 or Netscape2 and even back then was the lazy and hard
to maintain way of doing it. If you write some instructions or
tutorials, please, for the sake of the quality of the next generation
of developers..."
http://christianheilmann.com/2013/10/31/perpetuating-terrible-javascript-practices/

+07: MISCELLANEOUS.

Responsive Web Design - Relying Too Much on Screen Size
By Luke Wroblewski.
"As people continue to go online using an ever increasing diversity of
devices, responsive Web design has helped teams build amazing sites
and apps that adapt their designs to smartphones, desktops, and
everything in between. But many of these solutions are relying too
much on a single factor to make important design decisions: screen
size..."
http://www.lukew.com/ff/entry.asp?1816

Responsive Design, Screens, and Shearing Layers
By Ethan Marcotte.
"Luke Wroblewski wrote a blog entry that's been rattling around in my
head for a couple days now. In it, he raises some concerns he has
about responsive design's 'over-reliance' on screen width. Go check it
out, if you're interested, but I'll excerpt a bit:.."
http://unstoppablerobotninja.com/entry/responsive-web-design-screens-and-shearing-layers/

On Using Browser Viewports to Understand Screens
By Luke Wroblewski.
"The ever eloquent Ethan Marcotte published a reply to my article
about relying too much on screen size in responsive Web design. I
couldn't be happier to see him blogging again and truthfully I kind of
miss the good old days of back and forth blog posts about important
Web design issues. So here we go..."
http://www.lukew.com/ff/entry.asp?1817

+08: TOOLS.

Using the WAVE Toolbar (Video)
By Easter Seals Crossroads.
YouTube video outlines how to use the WAVE toolbar
(http://wave.webaim.org/toolbar) to evaluate web site accessibility.
http://www.youtube.com/watch?v=7l75f9Jzweg

+09: USABILITY.

Explicitly State the Difference Between Options
By Jakob Nielsen.
"When the key difference(s) between UI choices are implied or buried,
users often select the wrong option or miscomprehend the features."
http://www.nngroup.com/articles/explicit-differences/

Form Design Quick Fix - Group Form Elements Effectively Using White Space
By Marieke McCloskey.
Improve the layout of your online forms by placing form labels near
the associated text field and by grouping similar fields.
http://www.nngroup.com/articles/form-design-white-space/

[Section one ends.]

++ SECTION TWO:

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