[webdev] Web Design Update: September 21, 2012

Laura Carlson lcarlson at d.umn.edu
Fri Sep 21 06:57:40 CDT 2012


+++ WEB DESIGN UPDATE.
- Volume 10, Issue 13, September 21, 2012.

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

++ISSUE 13 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: COLOR.
04: EVENTS.
05: NAVIGATION.
06: STANDARDS, GUIDELINES & PATTERNS.
07: TOOLS.
08: TYPOGRAPHY.
09: USABILITY.


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

[Contents ends.]


++ SECTION ONE: New references.

+01: ACCESSIBILITY.

Web Accessibility Testing: What Can be Tested and How
By Karl Groves.
"Read this if you're disinclined to read the entire list of specific
WCAG Success Criterion and look at how each can be tested..."
http://www.karlgroves.com/2012/09/15/accessibility-testing-what-can-be-tested-and-how/

EU Failing Blind People On 'E-Inclusion' Access to Information
By Dan Pescod.
"Only a tiny percentage of websites and books are fully accessible to
blind and partially sighted people - the technology is there, now we
need the political will to match it, writes campaigner..."
https://www.publicserviceeurope.com/article/2443/eu-failing-blind-people-on-e-inclusion-access-to-information


+02: CASCADING STYLE SHEETS.

CSS Media Queries
By Mozilla.
"A media query consists of a media type and at least one expression
that limits the style sheets' scope by using media features, such as
width, height, and color. Added in CSS3, media queries let the
presentation of content be tailored to a specific range of output
devices without having to change the content itself..."
https://developer.mozilla.org/en-US/docs/CSS/Media_queries

Inner Shadows in CSS - Images, Text and Beyond
By Joshua Johnson.
"...Today we're going to learn some really simple inset shadow
techniques that you can pull off with just a few lines of code. I'll
walk you through both the box-shadow and text-shadow syntax and how to
change them to pull off an inset shadows..."
http://designshack.net/articles/css/inner-shadows-in-css-images-text-and-beyond/


+03: DREAMWEAVER.

Corral Your Styles with Dreamweaver's CSS Visualization Tools
By Tom Negrino.
"Using Cascading Style Sheets (CSS) with Dreamweaver provides detailed
control of the design and display of your web pages, but hidden rules
underlying the styles might prevent you from getting the effect you
really want. Fortunately, Dreamweaver offers some powerful tools for
working with CSS. Tom Negrino, coauthor of Dreamweaver CS6: Visual
QuickStart Guide, explains how to use Dreamweaver's visualization
tools to make CSS behave."
www.peachpit.com/articles/article.aspx?p=1930040


+04: EVENTS.

Human-Computer Interaction
September 24, 2012 (9 weeks long)
Online Class
https://www.coursera.org/course/hci


+05: NAVIGATION.

Usable Landmarks Across Desktop and Mobile
By Henny Swan.
"A lot has been written about how to technically implement WAI ARIA
Landmarks but from a human perspective just how usable are they for
screen reader users..."
http://www.iheni.com/usable-landmarks-across-desktop-and-mobile/

Sticky Menus Are Quicker To Navigate
By Hyrum Denny.
"...I recently wondered whether sticky menus makes websites quicker to
navigate, and I conducted a usability study to find the answer. Let's
look at the results of the study, a few implementation techniques and
some related challenges..."
http://uxdesign.smashingmagazine.com/2012/09/11/sticky-menus-are-quicker-to-navigate/

Big Menus, Small Screens: Responsive, Multi-Level Navigation
By  Tessa Thornton.
"If you've ever worked on a responsive website, you've no doubt had to
tackle one of the trickiest problems in this emerging field:
navigation. For simple navigation, the solutions can be
straight-forward. However, if you're working on something a bit more
complex, maybe with multiple nested lists and dropdowns, a more
dramatic rearrangement may be in order..."
http://webdesign.tutsplus.com/tutorials/site-elements/big-menus-small-screens-responsive-multi-level-navigation/


+06: STANDARDS, GUIDELINES & PATTERNS.

The Truth About Structuring an HTML5 Page
By Luke Stevens.
"Part polemic, part instruction manual, The Truth About HTML5 has
ignited an interesting debate. Here we present an exclusive excerpt on
the problems around structuring in HTML5 "
http://www.netmagazine.com/features/truth-about-structuring-html5-page


+07: TOOLS.

Accessibility Inspector Extension for Firebug
"The Accessibility Inspector for Firebug gives developers the ability
to examine the accessibility features found in the Document Object
Model (DOM) of web sites and web applications. Firebug Accessibility
Inspector generates a report on accessibility problems and features of
HTML and ARIA enabled web resources. When in the HTML tab of Firebug
the accessibility report information on the DOM node can be viewed in
the new DOM+ and A11y tabs."
http://code.google.com/p/ainspector/


+08: TYPOGRAPHY.

Open-Dyslexic
By Abelardo Gonzalez.
"Open-Dyslexic is a new open sourced font created to increase
readability for readers with dyslexia..."
http://dyslexicfonts.com/


+09: USABILITY.

Applying the Pareto Principle to the User Experience
By Jeff Sauro.
"In 1906 Vilfredo Pareto, an Italian economist, observed that wealth
was unequally distributed in Italy. He noted that 80% of the land and
wealth was owned by 20% of the people..."
http://www.measuringusability.com/blog/pareto-ux.php

10 Reasons Why You Fix Bugs (and Usability Issues) as Soon as You Find Them
By Ted Boren.
"Great poster on why you fix bugs as soon as you find them. Many of
the same cases could be made for usability issues (at least the medium
to large sized ones)..."
http://northtemple.com/2012/09/19/great-poster-on-why-you-fi


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


More information about the Webdev mailing list