[webdev] Web Design Update: February 11, 2011
Laura Carlson
lcarlson at d.umn.edu
Fri Feb 11 06:33:05 CST 2011
+++ WEB DESIGN UPDATE.
- Volume 9, Issue 33, February 11, 2011.
An email newsletter to distribute news and information about web
design and development.
++ISSUE 33 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: 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.
How-To Guide for Creating Accessible Online Learning Content
By Hadi Rangin.
"...Thanks to a generous grant from the Alfred P. Sloan Foundation,
this guide explores accessibility issues and provides straight forward
advice and guidance about creating usable content whether you are a
novice or advanced author of course content..."
http://sloanconsortium.org/cannect/projectone/index.php
Five Kinds of 'alt' Text
By David Travis.
"Virtually every web designer I speak with is familiar with the 'alt'
attribute: the part of the html 'img' tag that you use to provide an
equivalent alternative for people who are unable to see the image.
This includes people who are using a screen reader or people who are
browsing the web with images turned off. What's less commonly known is
that there are five different classes of image used on web pages and
each of those images requires a different approach to writing the
'alt' attribute..."
http://www.userfocus.co.uk/articles/alt_text.html
HTML5: Techniques for Providing Useful Text Alternatives
By Steve Faulkner.
Steve provides more use cases.
http://dev.w3.org/html5/alt-techniques/
Accessible Web Design: Dyscalculia
By Steven Clark.
"As a web designer your job isn't to push (X)HTML elements around or
to bling things up with CSS… it's not even the cool dark art of
JavaScript. Your job, if anything at all, is to pursue an ongoing
study of human nature to better understand the medium, the market and
the environment that makes your client money..."
http://stevenclark.com.au/2011/02/02/accessible-web-design-dyscalculia/
Accessible Web Design: More Thoughts on Dyscalculia
By Steven Clark.
"Having thought about this a little more, although I admit that it's
time I locate and read research papers, there appear to be at least
seven issues at play with dyscalculia..."
http://stevenclark.com.au/2011/02/04/accessible-web-design-more-thoughts-on-dyscalculia/
Defining Disability - Or Trying To Anyway
By Nicolas Steenhout.
"'What is the definition of a person with a disability?'. This is such
an interesting and difficult question to answer! At first glance, it's
easy to answer - there are plenty of definitions of disability. But
digging around the question a bit more, finding a useful definition
that makes everyone happy isn't straightforward at all. University
thesis have been written on the topic. I don't claim this post will
cover everything, but it will give the reader a bit of an idea..."
http://accessibility.net.nz/blog/defining-disability-or-trying-to-anyway/
Accessibility on the Yahoo Homepage
By Ted Drake.
"Nicholas Zakas, a principal developer of the Yahoo! homepage, and
Victor Tsaran, Yahoo!'s senior accessibility manager, discuss the
strategies and methods that made on of the most visited websites in
the world fully accessible..."
http://yaccessibilityblog.com/wp/accessibility-yahoo-homepage.html
Accessibility Testing - Establishing a screen reader test plan
By Henny Swan.
"This article is not about testing with screen readers as such (I've
written about this elsewhere) but rather what needs to be considered
in order to establish a good screen reader testing plan within larger
overall accessibility and general quality assurance plans. Its written
in such a way that I hope organisations of any size or budget can
adapt and use it..."
http://www.spotlessinteractive.com/articles/accessibility/screen-reader-test-plan.php
+02: CASCADING STYLE SHEETS.
Understanding CSS Selectors
By Emily Lewis.
"I'll never forget how much of my (and, subsequently, my employer's)
time was wasted trying to work with our 'enterprise' CSS. It really
isn't all that funny when you have to deal with it. It's even more
sobering when you consider the time, money and resources wasted due to
inefficient CSS..."
http://msdn.microsoft.com/en-us/scriptjunkie/gg619394.aspx
Use Efficient CSS Selectors
By Thierry Koblentz.
"Using descendant selectors is inefficient, but when your key selector
(the rightmost selector) is a ID selector, then things get worse..."
http://www.css-101.org/descendant-selector/go_fetch_yourself.php
CSS: Clearing Floats with Overflow
By Nick La.
"One of the common problems we face when coding with float based
layouts is that the wrapper container doesn't expand to the height of
the child floating elements. The typical solution to fix this is by
adding an element with clear float after the floating elements or
adding a clearfix to the wrapper. But did you know you can also use
the overflow property to fix this problem? It's not a new CSS trick
either. It's been documented before long long ago. Today I would like
to revisit the topic along with a few tips..."
http://www.webdesignerwall.com/tutorials/css-clearing-floats-with-overflow/
HTML5 Forms Styled With CSS3
By Hyde.
"Let me start by saying that HTML5 and CSS3 are two different things.
Secondly HTML5 is still just HTML and CSS3 is still just CSS. I've
been noticing that people are confusing these two specifications with
each other and making it more complicated then it is..."
http://www.devlounge.net/code/html5-forms-styled-with-css3
New Working Draft: CSS Writing Modes Level 3
By Elika Etemad (fantasai).
"Last week a new Working Draft of the CSS Writing Modes Module Level 3
was published. This module covers BIDI and vertical text..."
http://www.w3.org/blog/CSS/2011/02/07/css3_writing_modes_wd2
+03: EVALUATION & TESTING.
Bonus Research: Do the Recruiting Yourself
By Dana Chisnell.
"...I've learned many recruiting lessons the hard way. Recruiting can
be challenging, but it can also be really interesting. I always find
that I learn a lot in the recruiting process. Here are my pointers..."
http://usabilitytestinghowto.blogspot.com/2011/02/bonus-research-do-recruiting-yourself.html
Disneyland Paris User Experience Review
By klmcdonnell.
"There's no better way to chase away the Winter blues than by booking
a holiday and having something fun to look forward to. If you can
book one that is. This usability review of the Disneyland Paris
website left me thinking 'How can a multi-billion dollar supposedly
consumer-centric business get things so wrong on their website'?..."
http://whatusersdoblog.com/2011/02/07/disneylandparis/
+04: FLASH.
Creating Accessible Flash Course
By U.S. Department of Veterans Affairs.
"...The goal of this course is to enable developers and other
personnel involved in Flash development projects to apply the
principles of accessibility to creating Section 508-compliant Flash
presentations..."
http://www.ehealth.va.gov/508/flash/index.asp
+05: JAVASCRIPT.
Screw Screen Readers
By Nicolas Steenhout.
"Implementing JavaScript should be done carefully, thinking of the
impact it may have not just on screen reader users, but people who use
only the keyboard to interact with a site, people on some mobile
devices, people stuck with older browsers, etc. Don't just think that
if the site works without JavaScript it is accessible. Don't just
think that unobtrusive JavaScript makes the site accessible."
http://accessibility.net.nz/blog/screw-screen-readers/
Broken Links
By Tim Bray.
"...There is no piece of dynamic AJAXy magic that requires beating the
Web to a bloody pulp with a sharp-edged hashbang. Please stop doing
it."
http://www.tbray.org/ongoing/When/201x/2011/02/09/Hash-Blecch
Breaking the Web with hash-bangs
By Mike Davies.
"Lifehacker, along with every other Gawker property, experienced a
lengthy site-outage on Monday over a misbehaving piece of JavaScript.
Gawker sites were reduced to being an empty homepage layout with zero
content, functionality, ads, or even legal disclaimer wording. Every
visitor coming through via Google bounced right back out, because all
the content was missing..."
http://www.isolani.co.uk/blog/javascript/BreakingTheWebWithHashBangs
Beyond Hash-Bangs: Reliance on JavaScript Is a Bad Idea
By Adrian A. Roselli.
"...Even at that most basic level you can see how poor of a decision
JavaScript reliance is."
http://blog.adrianroselli.com/2011/02/beyond-hash-bangs-reliance-on.html
Videos of Screen Readers Using ARIA
By Zoe Mickley Gillenwater.
"...I was able to find a few videos of screen readers using ARIA, and
I wanted to share the links here..."
http://zomigi.com/blog/videos-of-screen-readers-using-aria/
Tips on Learning JavaScript
By Andy Walpole.
"...Fast forward to 2011 and animated GIFs and Java applets have been
thrown into the dustbin of history; but, surprisingly, JavaScript has
enjoyed a renaissance of epic proportions. So much so that you can't
call yourself a web designer today without some knowledge of
JavaScript under your belt..."
http://thinkvitamin.com/code/tips-on-learning-javascript/
+06: MISCELLANEOUS.
People of HTML5 - John Foliot
By Chris Heilmann.
"Today we are featuring John Foliot co-chair of the subcommittee on
the accessibility of media elements in HTML5 and well-known
accessibility warrior of the wild wild web..."
http://hacks.mozilla.org/2011/02/people-of-html5-john-foliot/
Linux.conf.au 2011: The Latest and Coolest with HTML5 Video
You Tube of Silvia Pfeiffer on HTML5 Video
http://www.youtube.com/watch?v=_kazYydCmQw
+07: NAVIGATION.
Guide to Website Navigation Design Patterns
By Cameron Chapman.
"In web design, there are certain common design patterns that are used
for interaction. Site navigation has a wide variety of common and
familiar design patterns that can be used as a foundation for building
effective information architecture for a website. This guide covers
popular site navigation design patterns. For each site navigation
design pattern, we will discuss its common characteristics, its
drawbacks, and when best to use it."
http://sixrevisions.com/user-interface/navigation-design-patterns/
+08: PHP.
PHP Tutorial
By cramerz.
"In This tutorial we are going to learn one of the mostly used Server
Side Scripting language called PHP. This tutorial is for PHP
beginners, that's why we are going to start PHP from scratch. The main
purpose of this tutorial is to introduce you to some of the building
blocks of PHP so you can start making your own dynamic websites using
PHP language..."
http://www.cramerz.com/php
+09: STANDARDS, GUIDELINES & PATTERNS.
Please explain the role of the W3C in the continuing development of HTML
Email from Steve Faulkner to the W3C's Chief Executive Officer,
Jeffrey Jaffe; Head of W3C Communications, Ian Jacobs; Director, Tim
Berners-Lee; and Interaction Domain Leader, Philippe Le Hegaret.
"...What has been and is clearly missing from this public discourse is
the clear articulation (by the W3C) of the role of the W3C in HTML
development and the value proposition of the specification process
used by the W3C for HTML5..."
http://lists.w3.org/Archives/Public/www-archive/2011Feb/0011.html
HTML as a Living Standard - For and Against
By Bruce Lawson, and John Foliot.
"People have already written a number of articles either for or
against dropping the version number on HTML. Here are two contrasting
views about this news presented by me, Bruce Lawson, and John
Foliot..."
http://html5doctor.com/html5-living-standard/
W3C Priorities and Milestones in 2011
By Jeff Jaffe.
"Last year I published several posts about our efforts to establish a
new vision for the W3C organization. I wanted to update you on how we
have turned the results of the organizational vision task forces into
specific plans and actions..."
http://www.w3.org/2011/01/w3c2011
+10: TYPOGRAPHY.
Revised Font Stack
By Amrinder Sandhu.
"Serious efforts are being made to get more typeface choices on the
web to enhance web typography. Still, most of us prefer web-safe fonts
like: Verdana, Georgia, Times New Roman and Arial. Though choices are
limited, yet the number can be increased by exploring other
pre-installed fonts..."
http://www.awayback.com/revised-font-stack/
+11: USABILITY.
Writing Useful Page Titles
By Roger Johansson.
"Writing good titles for web pages (or web applications, for that
matter) is far from a new subject. A little reminder every now and
then doesn't hurt though, so here are a few simple guidelines..."
http://www.456bereastreet.com/archive/201102/writing_useful_page_titles/
Usability: User Expectations are Important
By Tim Fidgeon.
"Meeting user expectations throughout a site normally delivers good
usability. Ways to make sure you meet expectations: user research,
reviewing competitor sites and following usability guidelines..."
http://www.spotlessinteractive.com/articles/usability-research/usability-user-behaviours/user-expectations-are-important.php
Why Don't Usability Problems Get Fixed?
By Jim Ross.
"How many times has this happened to you? You've finished presenting
the results of your usability testing, heuristic evaluation, or other
user research activity, feeling great about the positive impact your
recommendations will have on a product's user experience. The audience
smiled and nodded along during your presentation. Most of them agree
with your findings and seem genuinely impressed by the work you've
done. But, later on, you face the reality that few of your
recommendations have gotten implemented fully-and many, not at all."
http://www.uxmatters.com/mt/archives/2011/02/why-dont-usability-problems-get-fixed.php
Subject-Matter Experts - Putting Users at the Center of the Design Process
By Demetrius Madrigal and Bryan McClain.
"This month we'll discuss the process of putting users at the center
of the design process and what that means in regard to both design and
product strategy. We'll also discuss some different approaches to a
user-centered design process that we've come across and outline their
positives and negatives. Finally, we'll outline the steps necessary to
make user-centered design a reality and how to get the most out of a
user-centered design process when working on different types of
products. The insights we gain from interacting directly with users
are invaluable. They can assist us greatly throughout the product
development process and ensure user adoption."
http://www.uxmatters.com/mt/archives/2011/02/subject-matter-experts-putting-users-at-the-center-of-the-design-process.php
The Nature of Choice Sets and Their Affect on Decision Making
By Colleen Roller.
"...In this column, I'll expand upon the concept of relativity and how
the context in which people make decisions significantly influences
decision outcomes. Specifically, we'll look at how the nature of a
choice set affects people's ability to decide..."
http://www.uxmatters.com/mt/archives/2011/02/the-nature-of-choice-sets-and-their-affect-on-decision-making.php
Designing Web Registration Forms for Kids
By Debra Levin Gelman.
"Designing websites for kids is a fascinating, challenging, rewarding,
and exasperating experience: you're trying to create a digital
experience for people who lack the cognitive capacity to understand
abstraction; to establish brand loyalty with people who are influenced
almost exclusively by their peers; and to communicate subjective value
propositions to people who can only see things in black-and-white.
Fortunately, it's possible to create a successful registration process
for these folks with an understanding of how their brains work. Debra
Levin Gelman explores how to design effective registration forms for
kids based on their context, technical skills, and cognitive
capabilities..."
http://www.alistapart.com/articles/designing-web-registration-forms-for-kids/
+12: XML.
Cross Platform Scalable Vector Graphics With svgweb
by Jim Ray.
"Pity Scalable Vector Graphics. It's been an official standard since
before IE6 was released yet has never found much of an audience on the
web, certainly not the one it deserves. Just as SVG was starting to
establish some browser support, along came the canvas tag, stealing
the thunder of dynamically generated client-side images. Yet despite
all the attention being paid to canvas, there's still a place for SVG,
particularly for developers looking to replace plug-ins like Flash for
data visualization. Unlike canvas or other script-only approaches, SVG
can be easily divided into design and code elements, with just a
little code to add interactivity. It even works on devices like the
iPad and iPhone. And now, thanks to svgweb and a clever use of Flash,
it works on older platforms no one could have ever imagined supporting
SVG. Jim Ray shows how."
http://www.alistapart.com/articles/cross-platform-scalable-vector-graphics-with-svgweb/
[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.]
More information about the Webdev
mailing list