[webdev] Web Design Update: May 16, 2013

Laura Carlson lcarlson at d.umn.edu
Thu May 16 07:07:57 CDT 2013


+++ WEB DESIGN UPDATE.
- Volume 10, Issue 47, May 16, 2013.

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

++ISSUE 47 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: HTML5.
05: INFORMATION ARCHITECTURE.
06: JAVASCRIPT.
06: MISCELLANEOUS.
08: NAVIGATION.
09: PHP.
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.

Accessible Forms 2 - Required Fields and Extra Information
By Roger Hudson.
"This article will look at different ways to mark-up required
(mandatory) form fields and provide additional information that maybe
necessary to understand or correctly complete a form..."
http://usability.com.au/2013/05/accessible-forms-2-required-fields-and-extra-information/

Links are Not Buttons. Neither are DIVs and SPANs
By Karl Groves.
"There's been one development practice we've noticed frequently that
I'd like to discuss today: use of links as buttons..."
http://www.karlgroves.com/2013/05/14/links-are-not-buttons-neither-are-divs-and-spans/

10 Easy Accessibility Tips Anyone Can Use
By Jared Smith.
"...here are 10 simple accessibility tips that most anyone can
implement today into their web site's HTML and CSS to make it more
accessible..."
http://webaim.org/blog/10-easy-accessibility-tips/

The 'A' Word: Accessibility as Part of UX
By Leonie Watson.
"...accessibility is simply usability under a magnifying glass. If
you're thinking about great usability, chances are that you're already
thinking about great accessibility, too..."
http://www.usabilityprofessionals.org/uxmagazine/the-a-word/

Study Ranks Accessibility of Top Learning Management Systems
By Dian Schaffhauser.
"A University of Illinois at Urbana-Champaign study published in March
comparing learning management systems has concluded that the latest
crop of learning management systems evaluated have made 'significant
progress' since the assessments started in 2005. However, one of the
report's authors noted, 'We believe much more needs to be done'..."
http://campustechnology.com/Articles/2013/05/13/Study-Ranks-Accessibility-of-Top-Learning-Management-Systems.aspx

Can We Track How Many Users with Disabilities Access our Site?
By Karl Groves.
"...In the end, truly detecting the usage of persons with disabilities
is going to be nearly impossible. The effort expended to somehow
detect and track the usage patterns of persons with disabilities in
order to create a so-called 'enhanced' experience would be better
spent making the regular site better. Accessible design is good design
and when done right can improve the experience for everyone."
http://www.karlgroves.com/2013/05/13/can-we-track-how-many-users-with-disabilities-access-our-site/

Testing and Debugging iOS Accessibility for VoiceOver
By Leonie Watson.	
"When you build an iOS app it's easy to make it VoiceOver accessible.
Native UI controls have accessibility built-in as standard, and custom
controls can be accessibility-enabled without difficulty..."
http://blog.paciellogroup.com/2013/05/testing-and-debugging-ios-accessibility-for-voiceover/


+02: CASCADING STYLE SHEETS.

Replacing Images When Printing
By Roger Johansson.
"It isn't all that uncommon that, after you've polished your print
stylesheet to make a site look well on paper as well as on screen, you
realise that the logo really doesn't look its best. It may look blurry
or pixelated on paper due to having a pixel density intended for
screen viewing, of course. But even worse, its edges may look ugly or
it may actually be invisible because whatever is behind it when viewed
on screen isn't printed..."
http://www.456bereastreet.com/archive/201305/replacing_images_when_printing/

Using !important in Your Media Queries
By Ian Devlin.
"We sometimes hear people arguing that we shouldn't use !important in
our website's CSS as it can be incredibly annoying for others who may
work on the website. While I agree with this in general, I have found
myself using !important with responsive design..."
http://www.iandevlin.com/blog/2013/05/css/using-important-in-your-media-queries


+03: DRUPAL.

Taxonomy Terms in Nodes
By Ade Hillier.
"This tutorial is part of a new series about developing accessible
themes for Drupal. Each tip is a small enhancement on its own; but
together, they make a more accessible website."
http://accessiblize.com/drupal-accessibility-taxonomy-terms-in-nodes


+04: HTML5.

The HTML5 Outline Algorithm and JAWS
By Gez Lemon.
"JAWS' implementation of the HTML5 outline algorithm is incorrect with
IE and Firefox when the author explicitly specifies the heading
levels. Fortunately, there is a relatively simple fix until JAWS
finally fixes the bug."
http://juicystudio.com/article/html5-outline-algorithm-jaws.php

Keeping The Big <picture> Small - How To Avoid Duplicate Downloads In
Responsive Images
By David Newton.
"The <picture> element is a new addition to HTML5 that's being
championed by the W3C's Responsive Images Community Group (RICG). It
is intended to provide a declarative, markup-based solution to enable
responsive images without the need of JavaScript libraries or
complicated server-side detection."
http://mobile.smashingmagazine.com/2013/05/10/how-to-avoid-duplicate-downloads-in-responsive-images/

How to Use Video.js - The Big Picture
By Greg Kraus, NC State University.
"This is a high-level overview of how to use Video.js to display your
videos in HTML5 pages. This assumes you know some basics about video.
Using Video.js is a three step process..."
http://accessibility.oit.ncsu.edu/blog/2013/05/14/how-to-use-video-js-the-big-picture/


+05: INFORMATION ARCHITECTURE.

Can Card Sorting Improve the Usability of Your Designs?
By Sergey Sinyakov.
"Card sorting is one of the most basic, easy-to-do usability testing
techniques available at your disposal. There are already plenty of
articles and tutorials that discuss how to conduct card sorting
activities (like this one) so I will be skipping the basics. Instead,
I will share some of the benefits I have derived from conducting card
sorting tests during my experience as a usability analyst..."
http://designinstruct.com/web-design/card-sorting-usability-designs/


+06: JAVASCRIPT.

ARIA Roles (C-D)
By Rakesh Paladugula.
"In continuation to our previous post ARIA roles (A-B) let us
understand the roles that begin with alphabets C and D..."
http://www.maxability.co.in/2013/05/aria-roles-c-d/


+07: MISCELLANEOUS.

Balancing Act - Features, Budgets and Timelines
By Adrian Roselli.
"So much of web development is really just a snapshot in time. Within
weeks, days or even hours, the landscape will change. A new browser
will be released, a new technique will appear, and so on. As web
developers, we often want to tweak; to implement the latest techniques
and deliver a 'perfect' site. The reality is, though, budgets and
timelines dictate what we can do..."
http://webstandardssherpa.com/reviews/balancing-act-features-budgets-timelines/

A Few Questions and Answers about 'Mobile Web' and Sites vs. Apps
By Chris Heilmann.
"...Native apps on high-end devices are doing really well right now,
but I can foresee that people will get bored of having to buy a new
phone every year just to get new functionality that is not that
important when you consider the cost. The web will stay and always be
the open alternative for those who want to consume and create on their
own terms instead of being dependent on the success or goals of a
certain company."
http://christianheilmann.com/2013/05/15/a-few-questions-and-answers-about-mobile-web-and-sites-vs-apps/


+08: NAVIGATION.

Make the Most of ARIA Landmark Roles
By Leonie Watson.
"ARIA landmark roles are getting more common: great for accessibility.
Leonie Watson explains how you can make them even more useful..."
http://www.netmagazine.com/tutorials/make-most-aria-landmark-roles

The Breadcrumb - Where Does it Belong
By Niels Matthijs.
"Once a novel concept, the breadcrumb has become one of the
strongholds of just about every content-heavy website's interface out
there. When you consider its place in the html though, it's a somewhat
unusual component. It falls right in between the site frame and the
actual content of a page, not really belonging to either. Most of the
time I let the design decide where to add the breadcrumb, but here are
a couple of things to consider..."
http://www.onderhond.com/features/html-musings/breadcrumb-position-html


+09 PHP.

Functions
By PHP Exercises.
"Try your had at creating your own PHP functions with these exercises.
They span the very simplest functions to the more complex..."
http://phpexercises.com/functions-php-exercises.html

Improve PHP Session Cookie Security
By  Simon Holywell.
"The security of session handling in PHP can easily be enhanced
through the use of a few configuration settings and the addition of an
SSL certificate. Whilst this topic has been covered numerous times
before it still bears mentioning with a large number of PHP sites and
servers having not implemented these features..."
http://simonholywell.com/post/2013/05/improve-php-session-cookie-security.html


+10: STANDARDS, GUIDELINES & PATTERNS.

View Source - Rumours of its Demise are...
By Charles McCathieNevile.
"...I do think it is extremely valuable to understand the idea of
structured documents, and to have a rough idea of the structure of
HTML, to produce documents in HTML that are suitable for wide re-use,
easy presentation on a broad range of platforms, and thus to take
advantage of the potential of the Web..
http://chaals.ya.ru/replies.xml?item_no=7


+11: USABILITY.

Common Usability Errors to Avoid at All Costs
By Marc Schenker.
"One of the most important tasks on your plate as a web designer is
usability. Usability is defined as a gauge of the quality of the
user's experience when interacting with your website. Any website you
design should always be seamless from the standpoint of the user. They
should find your site easy to navigate without having to first undergo
special training. Usability is normally based on several different
factors..."
http://www.webdesignerdepot.com/2013/05/common-usability-errors-to-avoid-at-all-costs/

Usability for Novel vs. Routine Tasks
By Jakob Nielsen.
"Repetitive actions on websites often work well, but when users try
something new, they frequently fail."
http://www.nngroup.com/articles/novel-vs-routine-tasks/

New Layouts for the Multi-Device Web
By Luke Wroblewski.
"Most Web page layouts rely on design patterns created for laptop and
desktop computers equipped with a mouse and keyboard. As the variety
of devices being used to access the Web has grown, these patterns
haven't been keeping up. Designing for today's Web means considering
single-handed thumb use on smartphones, two handed touch interactions
on tablets, mouse and keyboard input on traditional PCs, hybrid
devices, and more. Web layouts have to evolve to support this new
reality..."
http://www.lukew.com/ff/entry.asp?1721


[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

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


More information about the Webdev mailing list