[webdev] Web Design Update: April 17, 2013

Wed Apr 17 06:11:40 CDT 2013

+++ WEB DESIGN UPDATE.
- Volume 10, Issue 43, April 17, 2013.

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

++ISSUE 43 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: HTML5.
06: JAVASCRIPT.
07: MISCELLANEOUS.
08: NAVIGATION.
09: PHP.
10: XML.

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

[Contents ends.]

++ SECTION ONE: New references.

+01: ACCESSIBILITY.

Seeking Predictors of Web Accessibility in U.S. Higher Education Institutions
By Terrill Thompson et. al.
"...This study has contributed to an understanding of the
accessibility of IT at postsecondary institutions by exploring the
impact of policies and campus conversations on the accessibility of
campus websites and PDFs..."
http://itd.athenpro.org/volume13/number1/thompson.html

Accessibility Front and Center
By Bruce Maas.
"Action item 1. When meeting with vendors of software that is
delivered through the web, and when hiring web developers, let them
know that your institution is committed to the Web Content
Accessibility Guidelines..."
http://www.educause.edu/ero/article/accessibility-front-and-center

Accessible Data Tables
By Leonie Watson.
"The days of using tables to design sites are gone. But, advises
Leonie Watson, you should still put some thought into tabular data..."
http://www.netmagazine.com/tutorials/accessible-data-tables

Making Accessible Icon Buttons
By Nicholas C. Zakas.
"...Do you know the best way to make a <button> that just has an icon
accessible? title, aria-label, hidden text?..."
http://www.nczonline.net/blog/2013/04/01/making-accessible-icon-buttons/

DOJ May Apply ADA Accessibility Guidelines to Websites
By Brian T. Horowitz.
"U.S. Department of Justice updates to the Americans With Disabilities
Act could broaden guidelines on Website accessibility for the
disabled."
http://www.eweek.com/enterprise-apps/doj-may-apply-ada-accessibility-guidelines-to-websites/

Web 4 All
By University of Southampton.
http://www.southampton.ac.uk/web4all/

+02: CASCADING STYLE SHEETS.

Conditional Sibling Class Names for IE Patching
By Roger Johansson.
"Traditionally, web developers have been using either CSS hacks or
conditional comments to target different versions of Internet Explorer
with CSS fixes. In the last few years more and more people have
started using conditional class names, more or less as described by
Paul Irish in Conditional Stylesheets vs CSS Hacks? Answer:
Neither..."
http://www.456bereastreet.com/archive/201304/conditional_sibling_class_names_for_ie_patching/

Accessible CSS Transitions
By Chris Bateman.
"Here's a simple example: we want to animate a container open and
closed, perhaps as part of an expand/collapse treatment..."
http://cbateman.com/blog/accessible-css-transitions/

How to Modify a WordPress Stylesheet for a Child Theme
By Virginia DeBolt.
"...Modifying a WordPress stylesheet for a child theme is a relatively
simple process..."
http://www.webteacher.ws/2013/04/10/how-to-modify-a-wordpress-stylesheet-for-a-child-theme/

Advanced Cross-Browser Flexbox
By Chris Mills.
"The CSS Flexible box module level 3 - or Flexbox for short - brings
with it a lot of power and some very exciting possibilities for web
development, allowing us to put together complex site layouts easily
and rapidly, and dispensing with some of the illogical hacks and
kludges that we've traditionally used. I dealt with the basics of
Flexbox in my article Flexbox: fast track to layout nirvana? In this
article I will go a bit further, looking at a more advanced example,
and using Modernizr to serve different styles to browsers with
differing levels of flexbox support, providing the best level of cross
browser support currently available."
http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

CSS Grid Layout - What has Changed?
By Rachel Andrew.
"Towards the end of last year I did some research into the proposed
CSS Grid Layout module for my book CSS3 Layout Modules for Five Simple
Steps and also an article for 24 Ways. Both of these were heavily
based on the Internet Explorer 10 implementation, as that was (and is)
the only real implementation of Grid so far."
http://www.rachelandrew.co.uk/archives/2013/04/10/css-grid-layout---what-has-changed/

Media Queries are a Hack
By Ian Storm Taylor.
"The big buzzwords in CSS these days are 'modular' and
'responsive'-and for good reasons. But we're still trying to achieve
those goals with the wrong tool: Media Queries. What we actually need
is a tool that doesn't exist yet: Element Queries..."
http://ianstormtaylor.com/media-queries-are-a-hack/

+03: DRUPAL.

Drupal is Not a CMS
By Larry Garfield.
"The disconnect is that Drupal is not a Content Management System
(CMS), nor has it been one for some time. Drupal is a Content
Management Framework (CMF), from which you can build a CMS tailored
specifically for your needs."
http://www.palantir.net/blog/drupal-not-cms

+04: EVALUATION & TESTING.

Eight Lessons in Mobile Usability Testing
By Tania Lang.
"If you're new to mobile usability testing, fear not. It is not as
hard as you might think but there are some key differences from
testing a traditional website in a lab that you need to be aware
of..."
http://uxmag.com/articles/eight-lessons-in-mobile-usability-testing

Strength of User Research Evidence
By Jakob Nielsen.
"Usability findings derived from a broad base of diverse studies have
higher credibility than those based on many users with a single
stimulus."
http://www.nngroup.com/articles/ux-evidence/

+05: HTML5.

Farewell, Hgroup
By Bruce Lawson.
"The <hgroup> elements is removed from HTML 5.1. It was defined as
'typically used to group a set of one or more h1-h6 elements - to
group, for example, a section title and an accompanying subtitle.'..."
http://www.brucelawson.co.uk/2013/farewell-hgroup/

HTML 5.1 Nightly Draft. 4.13 Common idioms without dedicated elements
Steve Faulkner, Editor.
"HTML does not have a dedicated mechanism for marking up subheadings,
alternative titles or taglines. Here are the suggested
alternatives..."
http://www.w3.org/html/wg/drafts/html/master/common-idioms.html

+06: JAVASCRIPT.

JavaScript Quirk 2: Two Non-Values - Undefined and Null
By Axel Rauschmayer.
"Most programming languages have only one value for 'no value' or
'empty reference'. For example, that value is null in Java. JavaScript
has two of those special values: undefined and null. They are
basically the same (something that will change with ECMAScript 6, as
will be explained in the last post of this series), but they are used
slightly differently..."
http://www.2ality.com/2013/04/quirk-undefined.html

ARIA Roles (A-B)
By Rakesh Paladugula.
"Role attribute 1.0, the roles model of Accessible Rich Internet
Applications (WAI-ARIA) has become the Public recommendation by w3c
(External website)on 28th March, 2013. Keeping the importance of ARIA
roles in mind we have started providing the explanation of each role
attribute in coming posts. The posts on roles will be broken down in a
alphabetical order for quick and easy reference...."
http://www.maxability.co.in/2013/04/aria-roles-a-b/

Detecting Touch: It's the Why, not the How
By  Patrick H. Lauke and Robert Nyman.
"One common aspect of making a website or application 'mobile
friendly' is the inclusion of tweaks, additional functionality or
interface elements that are particularly aimed at touchscreens. A very
common question from developers is now 'How can I detect a
touch-capable device?'..."
https://hacks.mozilla.org/2013/04/detecting-touch-its-the-why-not-the-how/

Get Your JavaScript in Order
By Mike Byrne.
"Mike Byrne provides the lowdown on a simpler way to structure your
JavaScript - that should help prevent it fragmenting into messy,
brain-bashing gobbledygook..."
http://www.netmagazine.com/tutorials/get-your-javascript-order

+07: MISCELLANEOUS.

Is A Dedicated Mobile Design Ever Appropriate?
By Steven Bradley.
"...Sometimes it might make sense to present an optimized version as a
dedicated design. Most sites will never need to go dedicated. The
responsive solution will be optimized enough. When it isn't a
dedicated design can be added as another layer on top of the
responsive layer."
http://www.vanseodesign.com/web-design/dedicated-mobile-appropriate/

+08: NAVIGATION.

Five Steps to More Usable Links
By James Reece.
"So what are the rules for using links? How can we make them perform
better? As a set of guidelines to help improve the usability of your
links, I've dug through some research on the topic and added my own
thoughts..."
http://www.realadventure.co.uk/web/steps-usable-links/

Keep the Underline
By Dennis Lembree.
"You want an accessible, usable website? Then please don't remove the
underline on text links, particularly in the main content.
Unfortunately this design trend continues on the web (and the same
could be said about those awful form input labels that act like
placeholders, ugh). Why? For accessibility, users with color blindness
or low vision may have trouble distinguishing links from regular text
when the underline is missing..."
http://www.webaxe.org/keep-the-underline-text-links/

+09: PHP.

Scrum - An Agile Project's Best Friend
By David Shirey.
"In an earlier article I wrote, we took a general look at project
management and discussed what some of its pitfalls are that should be
avoided. As part of that, I mentioned that you should, as much as
possible, be using an Agile methodology, particularly Scrum, to manage
development. I'd like to follow that up with a look at Scrum and at
how we can use it to tame our projects..."
http://phpmaster.com/scrum-an-agile-projects-best-friend/

+10: XML.

Responsive Images - Clown Car Technique
By Estelle Weyl.
"...We can use media queries within SVG to serve up the right image.
The beauty of the 'Clown Car' technique is that all the logic remains
in the SVG file. I've called it the 'Clown Car' technique since we are
including (or stuffing) many images (clows) into a single image file
(car)..."
http://www.standardista.com/responsive-images-clown-car-technique/

[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

Drupal Information.
http://www.d.umn.edu/itss/training/online/webdesign/drupal.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

HTML5 Information.
http://www.d.umn.edu/itss/training/online/webdesign/html.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.]