[webdev] Web Design Update: October 28, 2011

[Laura Carlson]

+++ WEB DESIGN UPDATE.
- Volume 10, Issue 18, October 28, 2011.

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

++ISSUE 18 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: EVENTS.
05: FLASH.
06: JAVASCRIPT.
07: MISCELLANEOUS.
08: NAVIGATION.
09: STANDARDS, GUIDELINES & PATTERNS.
10: TOOLS.
11: TYPOGRAPHY.
13: USABILITY.

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

[Contents ends.]


++ SECTION ONE: New references.

+01: ACCESSIBILITY.

Just a Second, Mr. G.
By John Eric Brandt.
"'Judging by the comments in the Google group 'accessible' it seems
that Google have painted themselves into a corner with their new
online apps like Google Plus and Google Docs,' Gaff says. 'Half of
them won't work with most basic screenreaders and so they add
ChromeVox to their Chrome browser. Hardly what blind folk would want,
to have to alter access technology just to use Google's stuff.'"
http://jebswebs.net/blog/2011/10/just-a-second-mr-g/

The Hidden Nuggets of WCAG2: An Introduction
By Gian Wild.
"...In this series of articles, I'll be talking about all the big
issues in accessibility: images and alt attributes, video, keyboard
accessibility, forms, tables, skip links and many more. I'll be
including concrete examples, and actual code that you can implement as
well as linking to useful how-to guides. I hope this series of
articles serves to simplify some of the more confusing areas of
WCAG2..."
http://www.sitepoint.com/the-hidden-nuggets-of-wcag2-an-introduction/

The a11y Bugs Project
By Vlad Alexander, et al.
"Why aren't more people writing alternate text for images? The
predominant reason seems to be that content authors cannot see how
alternate text is used. Some browsers don't display alternate text,
some display it in different ways, and one browser requires advanced
configuration. To fix the alternate text and other accessibility
problems, 15 accessibility experts started this project to report
accessibility bugs to browser/tool vendors in a totally new way -
collectively, as a group...We need your help, because the browser
vendors of IE, Chrome, Safari and Opera instead want to see market
demand before they will fix these 3 basic accessibility bugs. So let's
provide that demand. Let's show them that web accessibility matters to
us by signing your name below..."
http://a11ybugs.org/index.php

CROWDABILITY
"Bringing Together Accessibility Crowdsourcing Projects"
http://www.crowdability.org/

Detecting If Images are Disabled in Browsers
By Steve Faulkner.
"I received an email from an old friend and colleague pointing out
that with images disabled in the browser, the support information in
the data tables on HTML5Accessibility.com disappears. An issue and an
embarrassment! This has now been fixed..."
http://www.paciellogroup.com/blog/2011/10/detecting-if-images-are-disabled-in-browsers/

Meet the Only Web Accessibility Button at #heweb11: Keynote Welcome Video
By Karine Joly.
"Intro to this year's HighEdWeb conference keynote address."
http://collegewebeditor.com/blog/index.php/archives/2011/10/24/meet-the-only-web-accessibility-button-at-heweb11-keynote-welcome-video-by-higheredexperts-com/


+02: CASCADING STYLE SHEETS.

Essential Considerations for Crafting Quality Media Queries
By Zoe Mickley Gillenwater.
"Learn what you need to know to set up media queries that maximize
efficiency and robustness for your particular project. There are pros
and cons to making your media queries embedded versus external,
overlapping versus stacking your media queries, starting with mobile
versus desktop styles, and using conditional comments versus
JavaScript to add support for IE 8 and earlier versions..."
http://zomigi.com/blog/essential-considerations-for-crafting-quality-media-queries/

Limitations on Styling Visited Links
By Louis Lazaris.
"You might remember about a year or so ago, there was some discussion
about the potential privacy issues caused by the CSS :visited
pseudo-class. In a nutshell, it was discovered that this pseudo-class
along with some scripting, could be used by websites to 'sniff' your
web browsing history. You can read more about the problem and
subsequent solution here and here. It seems now that most of the
latest versions of all browsers have taken measures to combat this
issue. Fortunately, you can still style text links using the :visited
pseudo-class. This is a good thing, and I hope we always have that
ability. Visited links are a staple of the web, and they should
remain..."
http://www.impressivewebs.com/styling-visited-links/

Full-Width, Centered Content, Single Ele - A Quick How-To
By Niels Matthijs.
"Earlier this week I started reworking the html/css of my blog. Only
two tags far in this endeavor I already got stuck. Creating a
full-width visual row with centered content (to see what I mean, check
my header) using only one structural element wasn't as easy as I had
imagined. So I strolled the internet for solutions, what follows is a
small summary of tips and tricks to accomplish this particular visual
effect."
http://www.onderhond.com/blog/work/full-width-centered-content-single-element-design

CSS Background: There's More To Know Than You Think
By Steven Bradley.
"You likely use css backgrounds in every site you build. You give an
element a background color and tell another element to let a
background image repeat. How much do you know about all the other
background properties?..."
http://www.vanseodesign.com/css/background-properties/

What's New in CSS3 Values and Units?
By David Storey.
In CSS3 the values and units we can use in CSS properties are defined
in the appropriately named CSS Values and Units specification, with
the exception those relating to colour and images, and the pre-defined
keywords specific to individual properties.
http://dstorey.tumblr.com/post/11933972962/css3values


+03: EVALUATION & TESTING.

Getting the First Click Right
By Jeff Sauro.
"Getting the navigation right usually takes a few tries and some
testing with users.  You can test first clicks with a functioning
website, a prototype or just a boxy-wireframe. Here's how I measure
that important first click..."
http://www.measuringusability.com/blog/first-click.php


+04: EVENTS.

Two Apps Per Day: Mobile Web and iOS Design Workshop.
December 3, 2011.
New York City, New York, U.S.A.
http://www.twoappsperday.com/


+05: FLASH.

Please Provide a Usable Fallback for Flash Content
By Roger Johansson.
Since uninstalling Flash I've noticed how common it is for sites that
still use Flash to pay little or no attention to visitors that do not
have Flash Player installed. Showing a 'Missing plugin' message
instead of navigation links or even worse, the entire site, is an
efficient way of turning people away.
http://www.456bereastreet.com/archive/201110/please_provide_a_usable_fallback_for_flash_content/


+06: JAVASCRIPT.

Optimizing Long Lists Of Yes/No Values With JavaScript
Byy Lea Verou.
"Very frequently in Web development (and programming in general), you
need to store a long list of boolean values (yes/no, true/false,
checked/unchecked… you get the idea) into something that accepts only
strings. Maybe it's because you want to store them in localStorage or
in a cookie, or send them through the body of an HTTP request. I've
needed to do this countless times..."
http://coding.smashingmagazine.com/2011/10/19/optimizing-long-lists-of-yesno-values-with-javascript/

Truthy & Falsey: Truth in JavaScript
By James Padolsey.
a minimal introduction to truthy & falsey.
James Padolsey takes a look at how expressions in JavaScript can
ultimately resolve to being true or false, how to check, how to do
conversions, and some tricky cases to watch out for.
http://james.padolsey.com/javascript/truthy-falsey

Terse JavaScript 101
By James Padolsey.
James Padolsey talks about minimizing redundant clutter in your
JavaScript code. He argues that terse code aids readability (to a
point) and shares some approaches to making it so.
http://james.padolsey.com/javascript/terse-javascript-101-part-1


+07: MISCELLANEOUS.

An Event Apart - The Responsive Designer's Workflow
By Luke Wroblewski.
"In his presentation at An Event Apart in Washington DC 2011 Ethan
Marcotte talked about applying responsive web design principles and
workflows to the redesign of a major newspaper Web site. Here's my
notes from his talk on The Responsive Designer's Workflow.."
http://www.lukew.com/ff/entry.asp?1433

The Next 6 Billion
By John Allsopp.
"...To reformulate the now famous question Steve Jobs asked of John
Sculley: Do you want to make shiny products for the privileged for the
rest of your life, or do you want to come with me and change the
world?"
http://www.webdirections.org/blog/the-next-6-billion/

On UX Leadership
By Kim Goodwin.
"Managers are assigned; leaders emerge."
http://www.uie.com/articles/ux_leadership


+08: NAVIGATION.

Mobile: Navigating the Mobile Maze
By Rob Borley.
"We all know how important the mobile web has become, but what is the
right approach? Should we build an iPhone app or mobile website? This
factsheet explores your options..."
http://boagworld.com/mobile-web/mobile-maze/

Tree Testing For Effective Navigation
By James Robertson.
"'I can't find what I am looking for' is one of the most common
complains staff make about intranet content. Contributing to this
issue is poor search, and poorly named or simply missing material.
However, most often, the issue comes down to poor site structure and a
lack of good information sign-posting."
http://www.steptwo.com.au/columntwo/tree-testing-for-effective-navigation/


+09: STANDARDS, GUIDELINES & PATTERNS.

HTML5 for Web Designers
By Jeremy Keith.
"...Ladies and gentlemen, I give you: HTML5forWebDesigners.com.
Needless to say, it's all written in HTML5 making good use of some of
the new semantic elements like section, nav and figure. It's also
using some offline storage in the shape of appcache. So if you visit
the site with a browser that supports appcache, you'll be able to
browse it any time after that even if you don't have an internet
connection (and if you're trying it on an iOS device, feel free to add
it to your home screen so it's always within easy reach)..."
http://html5forwebdesigners.com/index/index.html

What We Don't Know
By Chris Coyier.
"We don't know which browser, which version of that browser, or what
kind of computer a user visiting our website is using. That's why we
have web standards we follow which gave us the ability to code one
website that (for the most part) works everywhere."
http://css-tricks.com/14664-what-we-dont-know/

When Web Standards Fail Us
By Nicholas C. Zakas.
"...I'm all for moving forward, and don't get me wrong, both TC-39 and
the W3C have done a commendable job at solving many of today's
problems. I'd just like to see more addressed so that we can stop
solving the same problems repeatedly over the next decade. In another
ten years, I don't want to be writing JavaScript to parse a cookie
string, and I don't want to be debating the best way to create a tab
control. These are all known problems that deserve attention now so
that we can move on to solving more interesting problems in the
future."
http://www.nczonline.net/blog/2011/10/03/when-web-standards-fail-us/

HTML5 Live - Rocking the Boat and Causing a Ripple
By Chris Heilmann.
"As Mozilla's representative I was asked to give a talk on how we are
faring as a movement when it comes to HTML5. In the talk Rocking the
boat - and causing a ripple I discussed the necessity to take HTML5
away from something to build cool demos in to be used in day to day
products so we can find and report bugs. I also covered a few of the
issues that are cropping up like 'best viewed with browser X' products
and trying to impress users by listing the technologies used rather
than just using them to improve the overall experience. In the end we
also list some of the new technologies and products Mozilla is working
on to make the web a real application platform that has the same
access that native applications have. The slides are embedded below
and use a modified DZSlides as the system. Focus on them and use the
cursor keys to navigate. Display bullet points by pressing space and
show and hide the notes by pressing N. Alternatively you can also see
the slides a simple web page..."
http://hacks.mozilla.org/2011/10/html5-live-rocking-the-boat-and-causing-a-ripple/

HTML5 Multimedia Tutorials on Adobe Developer Connection
By Ian Devlin.
"I'm pleased to announce that I've written a three part tutorial
series on HTML5 Multimedia for the Adobe Developer Connection. The
tutorials will cover HTML5 video, audio and also how to use the Media
API to build a simple video player. The first part of the series on
HTML5 video is now available and the other two parts will be available
over the coming weeks..."
http://www.iandevlin.com/blog/2011/10/html5/html5-multimedia-tutorials-on-adobe-developer-connection

On Semantics in HTML
By Jens O. Meiert.
"...In essence, semantics in HTML is all about who and how many agree
on the meaning of elements and ID and class names..."
http://meiert.com/en/blog/20111026/on-semantics-in-html/


+10: TOOLS.

manifestR
By John Allsopp.
"With HTML5 it is easy to provide an offline version for a website by
creating a cache manifest. The manifest is a file that contains a list
of all the assets that makes the website accessible offline. There are
several tools that help you build this manifest file and among those
is manifestR, an easy to use bookmarklet that can quickly generate the
cache manifest."
http://westciv.com/tools/manifestR/

Comprehensive Review Of Usability And User Experience Testing Tools
By Cameron Chapman.
"Usability and user experience testing is vital to creating a
successful website, and only more so if it's an e-commerce website, a
complex app or another website for which there's a definite ROI. And
running your own user tests to find out how users are interacting with
your website and where problems might arise is completely possible..."
http://uxdesign.smashingmagazine.com/2011/10/20/comprehensive-review-usability-user-experience-testing-tools/


+11: USABILITY.

Inspiration: Fluid and Responsive Design
By Nick La.
"Responsive design all started with this article by Ethan Marcotte.
Some people see it as a trend. But it is more than just a trend. It is
a new design solution - it helps to resolve the design problems
associated with the different resolutions and devices (desktop,
laptop, tablet, and mobile). I'm giong to share a list of responsive
sites that I feel are nicely done. I've categorized the list into two
categories: Responsive-only (not fluid) and Fluid & Responsive..."
http://webdesignerwall.com/trends/inspiration-fluid-responsive-design

How to Design a Mobile Responsive Website
By Elaine Simpson.
"To build a mobile site or not to build a mobile site; this is a
question at the forefront of many a discussion. There is, however,
another option: responsive web design. When, why, and how should you
go about designing a responsive website?"
http://www.uxbooth.com/blog/how-to-design-a-mobile-responsive-website/

Fancy UX Terms - What Does It Mean Across Continents?
By Yeevon Ooi.
"A few months ago I ran workshops at UXcamp Europe and UXcamp London
on How to make decisions collaboratively (without killing each other)
using the KJ method. The KJ method was invented by Jiro Kawakita and
is a brainstorming method which helps groups reach consensus quickly
and accurately especially when it involves prioritising something. A
summary of the KJ theory and some handy tips for using it can be found
in my previous blog post2. The purpose of this blog post is to share
my exciting results from the Europe and London workshops."
http://www.webcredible.co.uk/blog/user-experience-terms

E-Commerce Usability
By Jakob Nielsen.
"Sites have improved, and we now know much more about e-tailing
usability. Today, poor content is the main cause of user failure."
http://www.useit.com/alertbox/ecommerce.html


[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

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