[webdev] Web Design Update: December 9, 2011

[Laura Carlson]

+++ WEB DESIGN UPDATE.
- Volume 10, Issue 24, December 9, 2011.

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

++ISSUE 24 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: EVENTS.
04: FLASH.
05: JAVASCRIPT.
06: MISCELLANEOUS.
07: NAVIGATION.
08: PHP.
09: STANDARDS, GUIDELINES & PATTERNS.
10: TYPOGRAPHY.
11: USABILITY.
12: XML.

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

[Contents ends.]


++ SECTION ONE: New references.

+01: ACCESSIBILITY.

The Hidden Nuggets of WCAG2: When Not to Use ALT Attributes
By Gian Wild.
"So, just when should you not use an ALT attribute? Short answer:
never. You must always have an ALT attribute if you have an IMG
element. Always. No ifs, no buts, no maybes..."
http://www.sitepoint.com/the-hidden-nuggets-of-wcag2-when-not-to-use-alt-attributes/

What is Web Accessibility?
By Nick Pettit.
"Web accessibility can sometimes be a controversial topic, but a fiery
dialogue is a healthy sign of just how much people really care. While
opinions may vary on specific issues, one thing is clear: Equal access
to information is paramount in the digital age..."
http://thinkvitamin.com/user-science/accessibility/what-is-web-accessibility/

How to Make the Web More Accessible?
By Vlad Alexander.
"We have the know-how to make the web more accessible; what we're
lacking is the will to act on it. The a11y bugs project is a new grass
roots effort that aims to spur the stakeholders in web technology into
action, to make the web more usable for everyone..."
http://a11ybugs.org/article.php?id=2

Board Releases New Draft of ICT Rule for Public Comment
By The Access Board.
"The U.S. Access Board has released for public comment a second
Advance Notice of Proposed Rulemaking (ANPRM) that includes a revised
draft of updated accessibility requirements for information and
communication technology (ICT) covered by Section 508 of the
Rehabilitation Act and Section 255 of the Telecommunications Act of
1996. This latest version includes changes made in response to public
feedback received on an earlier draft issued last year..."
http://www.access-board.gov/news/ict-draft-rule.htm

Talk is Cheap - Screen Reader Testing on Mobile
By Henny Swan.
"Testing your content on mobile need not be as painful as you think.
If you have an Android and iOS device then you already either have a
free mobile screen reader in your pocket or it's a short download
away. This is a quick guide to get you set up..."
http://www.iheni.com/talk-is-cheap-screen-reader-testing-on-mobile/

Web Accessibility Metrics - 'What Are They For Then?'
By Martyn Cooper.
"Yesterday I participated in the W3C's, Web Accessibility Initiative's
(WAI) Website Accessibility Metrics Online Symposium.  Details and
access to the papers and presentations of the symposium is available
at: http://www.w3.org/WAI/RD/2011/metrics/. This blog post is not an
attempt to give a comprehensive report of the symposium but to air
some of my thinking about it and how it relates to ongoing work I am
involved in at the Open University where I am employed as a Senior
Research Fellow with an internal consultancy role on accessibility..."
http://martyncooper.wordpress.com/2011/12/06/web-accessibility-metrics/

Alexa 100 Accessibility Errors
By Jared Smith.
"...The table below outlines errors for the home pages of the Alexa
Top 100 US sites .."
http://webaim.org/blog/alexa-100-accessibility-errors/


+02: CASCADING STYLE SHEETS.

CSS Selectors 101
By Virginia DeBolt.
"I'm preparing some handouts for an 8 hour continuing ed class in
Cascading Style Sheets I'll be teaching at UNM. The class doesn't get
a book so I have to write everything up myself. I thought I'd share
some of the handouts here. The first installment: CSS Selectors..."
http://www.webteacher.ws/2011/12/07/css-selectors-101/

Numbering In Style
By Chris Coyier.
"...applying numbered counters is not limited to ordered lists. For
instance, let's say you wanted to number the question and answer pairs
of a FAQ list..."
http://css-tricks.com/15358-numbering-in-style/

Understanding CSS's vertical-align Property
By Louis Lazaris.
'...The vertical-align property is one of those features of CSS that
sounds pretty self-explanatory, but can cause problems for CSS
beginners. I think even many CSS veterans have had problems figuring
this one out at times. In this post, I'll try to cover it in an
understandable manner..."
http://www.impressivewebs.com/css-vertical-align/

The Difference Between Width:auto and Width:100%
By Roger Johansson.
"When adapting a layout for different viewport widths (a.k.a.
responsive design) or media (like print), it's common to reset any
float and width values on major layout blocks to linearise their
display..."
http://www.456bereastreet.com/archive/201112/the_difference_between_widthauto_and_width100/

Responsive Web Design in Three Steps
By Nick La.
"Step 1. Meta Tag...Step 2. HTML Structure...Step 3. Media Queries..."
http://webdesignerwall.com/tutorials/responsive-design-in-3-steps

3 Things You Never Thought to Do With Media Queries
By Joshua Johnson.
"...The purpose of this article is more exploratory than educational.
The intention is to start a discussion about whether or not media
queries hold potential for purposes other than responsive design...."
http://designshack.net/articles/css/3-things-you-never-thought-to-do-with-media-queries/


+03: EVENTS.

9th International Cross-Disciplinary Conference on Web Accessibility
April 16-17, 2012.
Lyon, France
http://www.w4a.info/2012/


+04: FLASH.

Flash is Dead! Long Live Flash!
By Adrian Roselli.
"A lot of news has been made of Adobe's recent move to end development
of the Flash player for mobile devices (such as your smartphone or
tablet). Even people outside of the tech community have heard about it
and are trying to understand what it really means. I wrote up the
details last month (Flash Isn't Going Away, Except from Your Mobile)
and tried to remind everyone that Adobe isn't giving up on Flash, it's
just changing its direction on its mobile player based on industry
trends..."
http://blog.algonquinstudios.com/author/aroselli/


+05: JAVASCRIPT.

Conditional Loading for Responsive Designs
By Jeremy Keith.
"...what happens when you apply your media queries for larger
viewports and you do have sidebars and multiple columns? Well, you can
load in that nice-to-have content using the same kind of Ajax
functionality that Paul described in his article last year. The
difference is that you first run a quick test to see if the viewport
is wide enough to accommodate the subsidiary content. This is
conditional delayed loading...This was just a simple example but I
hope it illustrates that conditional loading could become an important
part of the content-first responsive design approach."
http://24ways.org/2011/conditional-loading-for-responsive-designs

Clean Conditional Loading
By Jeremy Keith.
"...But …it doesn't feel very DRY to have that 640 pixel breakpoint
repeated in two places: once in the CSS and once in the JavaScript. It
feels even ickier if I'm using ems for my media query breakpoints (as
I often do) while using pixels in JavaScript..."
http://adactio.com/journal/5042/

>From WAI-ARIA to HTML5 and back…or maybe not?
By Marco Zehe.
"The new version of our form is much improved over the version we had
originally. It still contains some WAI-ARIA where it makes sense,
since there is no native HTML5 alert box yet. But the rest is HTML5.
The JavaScript code is a bit less bloated since we don't have to do
our own validation any more, and we benefit from all the builtin
constraint validation mechanisms..."
http://www.marcozehe.de/2011/12/05/from-wai-aria-to-html5-and-back-or-maybe-not/

That 'JavaScript Not Available' Case
By Christian Heilmann.
"...All in all, the question of JavaScript dependence reaches much
further than just the technical issues. It questions old best
practices and has quite an impact on maintainability..."
http://christianheilmann.com/2011/12/06/that-javascript-not-available-case/


+06: MISCELLANEOUS.

There Is No Mobile Web - Conference Presentation (Video)
By Jeremy Keith.
"The video of the opening keynote I delivered at the Breaking
Development conference in Nashville earlier this year. It expands on
the One Web presentation I gave at DIBI, focusing on the language we
use to talk about our approaches to web development."
http://vimeo.com/32143919

Responsive Design is Irresponsible
By Kevinjohn Gallagher.
"I've been thinking of how to write this for little while, knowing
that should anyone read it, I'll be condemned as a heretic and outcast
from the web community (and lets be honest, I'm already living on the
edge)..."
http://kevinjohngallagher.com/2010/06/responsive-design-is-irresponsible/

Detect And Redirect Users For Mobile Development
By Karl Dubost.
"I have read today this long list of tips for Mobile Development. The
tip about Detect and Redirect Users is not given with enough care
outlining the issues related to user agent sniffing. So I left a
comment. And I thought it might be useful for more people and I need
to keep some of the points I made in there for memories..."
http://my.opera.com/karlcow/blog/2011/12/06/detect-and-redirect-users-for-mobile-development

Notes on Adaptive Images (yet again!)
By Bruce Lawson.
"All the cool kids are doing responsive design, it seems. This means
fluid designs, having some hot media query action to reformat your
layout depending on screen size, and ensuring your images are flexible
so they don't break out of container, generally by setting them to
{max-width:100%;}..."
http://www.brucelawson.co.uk/2011/notes-on-adaptive-images-yet-again/

Responsive Images and Transparent Content Negotiation in HTTP
By Karl Dubost.
"...This issue has been solved a long time ago… It is called
content-negociation. The ability to serve different representations
depending on the headers sent by the client..."
http://my.opera.com/karlcow/blog/2011/12/08/responsive-images-and-transparent-content-negotiation-in-http

Podcast 93: Teaching Mistakes
By Dennis E. Lembree.
"Dennis talks briefly about a couple of his recent presentations, a
few other presentations and articles, and has a great conversation
with Katherine Lynch..."
http://webaxe.blogspot.com/2011/12/podcast-93-teaching-mistakes.html


+07: NAVIGATION.

Visited Links Can Only be Differentiated by Colour
By Roger Johansson.
"Showing whether a link on a web page has been visited or not can be
very useful. One example that many will be familiar with is how it
helps you know which links you have already followed from a Google
search results page - links to pages you have already visited are a
different colour than the other links..."
http://www.456bereastreet.com/archive/201112/visited_links_can_only_be_differentiated_by_colour/


+08: PHP.

Dates and Times
By Evert Pot.
"...The truth is dates and times are hard..."
http://phpadvent.org/2011/dates-and-times-by-evert-pot

If Else and Switch Case
By PHP Know How.
"If Else and Switch Case are control structures that let you execute
code segments based on given conditions. These build up the dynamic
behavior of PHP..."
http://www.phpknowhow.com/basics/if-else-and-switch-case/

Loops
By PHP Know How.
"Loops let you execute a block of code number of times. Loops often
come into play when you work with arrays. Rather than writing same
piece of code for each array element, it's preferred to use a loop
where the particular code block is written only once..."
http://www.phpknowhow.com/basics/loops/

Basic Debugging
By PHP Know How.
"Debugging means tracing down errors in your programs and correcting
them. PHP doesn't come with a built-in debugger. So, PHP recommends
some third party tools for debugging. However for basic debugging, we
can use few functions available in PHP. These would be sufficient to
troubleshoot most of the errors that can occur in your PHP
programs..."
http://www.phpknowhow.com/basics/basic-debugging/

Break Statement
By PHP Know How.
"Break statement is used to get out of running loops. It's also used
in Switch Case control structures to stop execution of next case
statements..."
http://www.phpknowhow.com/basics/break-statement/


+09: STANDARDS, GUIDELINES & PATTERNS.

HTML5 Canvas Accessibility Discussions 2009-2011
By Steve Faulkner.
"Charles Pritchard has taken the time to provide an email overview of
Canvas accessibility discussions which have taken place on the
public-canvas-api over the past 3 years. I have reformatted it here
and added some headings, as it is an excellent resource for
understanding where we have been and where we are with HTML5 canvas
accessibility..."
http://www.paciellogroup.com/blog/2011/12/html5-canvas-accessibility-discussions-2009-2011/

Reverse Ordered Lists in HTML5
By Louis Lazaris.
"With all the hype surrounding the new APIs and the fancy parts of
CSS3, I had almost forgotten about the new reversed attribute that
allows you to write a descending list of numbered items, as opposed to
the default ascending list of numbered items..."
http://www.impressivewebs.com/reverse-ordered-lists-html5/


+10: TYPOGRAPHY.

Styling Text 101
By Virginia DeBolt.
"Here's another of the handouts I prepared for a Continuing Ed class
in CSS at UNM..."
http://www.webteacher.ws/2011/12/08/styling-text-101/

Creating Custom Font Stacks with Unicode-Range
By Drew McLellan.
"Any web designer or front-end developer worth their salt will be
familiar with the CSS @font-face rule used for embedding fonts in a
web page. We've all used it - either directly in our code ourselves,
or via one of the web font services like Fontdeck, Typekit or Google
Fonts..."
http://24ways.org/2011/unicode-range


+11: USABILITY.

Love Your Devices: Adaptive Web Design with Media Queries, Viewport and More
By Chris Mills.
"It's time again to reflect on happiness and well being: that of
yourselves and the members of the public who consume the web content
and services you create. Today we are going to talk about getting more
satisfaction from battery-powered devices..."
http://dev.opera.com/articles/view/love-your-devices-adaptive-web-design-with-media-queries-viewport-and-more/

Collaborative Development for a Responsively Designed Web
By Paul Robert Lloyd.
"In responsive web design we've found a technique that allows us to
design for the web as a medium in its own right: one that presents a
fluid, adaptable and ever changing canvas..."
http://24ways.org/2011/collaborative-development-for-a-responsively-designed-web

How To Achieve Simplicity In Design
By Steven Bradley.
"In his now classic book Art and Visual Perception, Rudolph Arnheim
noted that people will perceive and interpret ambiguous or complex
shapes as the simplest form possible. There's something inherent in us
that prefers the simple to the complex..."
http://www.vanseodesign.com/web-design/simplicity/

Subliminal User Experience
By Chris Sealey.
"...The purpose of this article is not to provide technical how-tos,
as the functionality is, in most cases, quite simple and could be
implemented in a myriad of ways. Rather, it will present a handful of
ideas for enhancing the experience of an interface at a deeper level
of design without relying on the container..."
http://24ways.org/2011/subliminal-user-experience

Another Case for Using Top Aligned Form Labels
By UX Movement.
"By now, most designers should know that top aligned labels allow
users to fill out forms faster than left aligned labels. This makes
sense when you read and understand why and the research that verifies
this fact. If that reason alone isn't enough to convince you to use
top aligned labels, here are a couple more reasons why they work best
for most users..."
http://uxmovement.com/forms/another-case-for-using-top-aligned-form-labels/

Better Usability Through Consistent Design
By Web Page Mistakes.
"Using a consistent design throughout your website or blog adds to the
usability of the site. It also adds accessibility and search engine
optimization features. A site designed with the user in mind improves
the overall experience when visiting the site which in turn results
in..."
http://www.webpagemistakes.ca/usability-consistent-design/


+12: XML.

What is XHTML5?
By Richard Ishida.
"There appears to be some confusion about XHTML1.0 vs XHTML5. Here is
my best shot at an explanation of what XHTML5 is..."
http://rishida.net/blog/?p=747


[Section one ends.]


++ SECTION TWO:

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