[webdev] Web Design Update: December 11, 2009

Laura Carlson lcarlson at d.umn.edu
Fri Dec 11 04:12:29 CST 2009


+++ WEB DESIGN UPDATE.
- Volume 8, Issue 24, December 11, 2009.

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/goto/webdesign/
New links in these categories:

01: ACCESSIBILITY.
02: CASCADING STYLE SHEETS.
03: DREAMWEAVER.
04: EVALUATION & TESTING.
05: EVENTS.
06: INFORMATION ARCHITECTURE.
07: JAVASCRIPT.
08: MISCELLANEOUS.
09: NAVIGATION.
10: PHP.
11: STANDARDS, GUIDELINES & PATTERNS.
12: TYPOGRAPHY.
13: USABILITY.

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

[Contents ends.]


++ SECTION ONE: New references.

+01: ACCESSIBILITY.

Global Accessibility Policy - Technology Changes, Civil Rights Do Not
By Cynthia Waddell.
"The UN Convention on Rights of Persons with Disabilities addresses the 
rights of 650 million persons with disabilities and impacts two billion 
persons worldwide, including family members of persons with 
disabilities..."
http://www.headstar.com/eablive/?p=374

Involving Users in Web Projects for Better, Easier Accessibility
By W3C WAI.
"Involving people with disabilities from the beginning of a project 
helps you better understand accessibility issues and implement more 
effective accessibility solutions. It also broadens your perspective in 
a way that can lead you to discover new ways of thinking about your 
product that will make it work better for more people in more 
situations..."
http://www.w3.org/WAI/users/involving.html

Safari, WebKit and alt Text for Missing Images
By Roger Johansson.
"One of the purposes of the alt attribute is to provide alternate text 
that can be shown when an image cannot be displayed, either because it 
is missing or broken, or because the user has disabled images in their 
(graphical) web browser. Most graphical web browsers do display alt 
text in place of missing images, but there is one notable exception: 
Safari and most other WebKit-based browsers (iCab, Shiira, Chrome). In 
those browsers, all you get when an image is missing is either a small 
blue icon with a question mark in it or a broken image icon."
http://tinyurl.com/yd57je7

PDF is Only Partially Accessible
WebAIM Thread.
"Based on many of the responses from the WebAIM list, as well as from my
own research, I conclude that well structured and tagged PDF is
partially but not completely accessible..."
http://webaim.org/discussion/mail_thread.php?thread=4042
Discussion continues at:
http://webaim.org/discussion/mail_thread.php?thread=4045

United States Disability Statistics: Measurement and Sources
By Joseph Dolson.
"On Wednesday of last week, I published an article on disability 
statistics in Practical eCommerce magazine. Although there's nothing 
particularly wrong with the article, I find myself wanting to publish a 
follow up article with more detail on the statistics. Statistics are 
complicated beasts, and I feel that detailed explication of sources and 
statistical problems is well worth while...if you can't wait for Google 
to automatically caption the home videos of your kids opening their 
Christmas presents, you can use another, lesser-known, and equally free 
service..."

Captioning and YouTube
By John Eric Brandt.
"...Google is rolling this out with a select group of partners and on 
specific channels. My understanding is that Google will simply start 
captioning videos in these groups using this new automatic system. 
Anyone who knows anything about captioning knows that automatic systems 
are fraught with problems..."
http://jebswebs.net/blog/2009/12/captioning-and-youtube/


+02: CASCADING STYLE SHEETS.

Don't Lose Your :focus
By Patrick H. Lauke.
"For many web designers, accessibility conjures up images of blind 
users with screenreaders, and the difficulties in making sites 
accessible to this particular audience. Of course, accessibility covers 
a wide range of situations that go beyond the extreme example of 
screenreader users. And while it's true that making a complex site 
accessible can often be a daunting prospect, there are also many small 
things that don't take anything more than a bit of judicious planning, 
are very easy to test (without having to buy expensive assistive 
technology), and can make all the difference to certain user groups. In 
this short article we'll focus on keyboard accessibility and how 
careless use of CSS can potentially make your sites completely 
unusable..."
http://24ways.org/2009/dont-lose-your-focus

Style Fieldsets like a Pro
By Virginia DeBolt.
"Just a few CSS rules can make your fieldset look like it was styled by 
a pro. A fieldset is used to organize forms into sections that can be 
identified with labels called legends. We're going to start this 
discussion looking at a fieldset with no legend. We'll get to legends 
in a bit..."
http://www.webteacher.ws/2009/12/10/style-fieldsets-like-a-pro

18 CSS Compression Tools and Techniques
By Joshua Johnson.
"...This post will examine several techniques you can use to optimize 
your CSS as well as several online tools that can automatically 
compress your code..."
http://tinyurl.com/ykdmahf

Front-End Code Reusability with CSS and JavaScript
By Trevor Morris.
"Most web standards-based developers are more than familiar with 
creating their sites with semantic HTML with lots and lots of CSS. With 
each new page in a design, the CSS tends to grow and grow and more 
elements and styles are added. But CSS can be used to better effect..."
http://tinyurl.com/yguxdhl

The Case for the Use of Display:None
By Gary Barber.
"...Sometimes we forget about the bigger picture, about the people we 
are building the sites for.  A few weeks ago at the UPA Perth (chapter 
in formation) meeting, Teressa from the Disability Services Commission 
demonstrated with her screen reader (JAWS) why the display:none is 
sometimes a good thing...."
http://tinyurl.com/yfuqac4

The Parallax Header: How I Do It
By Kyle Weems.
"...First, creating the right group of images. Secondly, with some 
simple CSS and HTML. Lastly, with a surprisingly short JS script..."
http://www.cssquirrel.com/2009/12/04/the-parallax-header-how-i-do-it/


+03: DREAMWEAVER.

Use Built-In Dreamweaver CS4 Capabilities to Check Your Website Before 
Going Live
By Charles Anderson.
"You just finished building a new website. Before uploading it to a 
server, spend some time checking on how well it functions or first time 
visitors may be last time visitors. Dreamweaver CS4 includes a number 
of tools for testing websites for functionality before putting it up 
for the world. Link Checker Broken links on a website are one of the 
world..."
http://www.brighthub.com/internet/web-development/articles/58681.aspx


+04: EVALUATION & TESTING.

What To Do With the Data: Moving from Observations to Design Direction
By Dana Chisnell.
"What is data but observation? Observations are what was seen and what 
was heard. As teams work on early designs, the data is often about 
obvious design flaws and higher order behaviors, and not necessarily 
tallying details. In this article, let's talk about tools for working 
with observations made in exploratory or formative user research."
http://tinyurl.com/yjo46mm

Is There a Difference in Usability Data from Remote Unmoderated Tests 
and Lab-Based Tests?
By Jeff Sauro.
"Why isn't usability testing done more?  And when it is done why is the 
sample size small? One major reason is the cost. It takes a lot of 
money and time to bring users into a lab and conduct a usability test. 
Even if users don't get compensated for their time, it still takes a 
lot of time for a test facilitator to prepare for and attend each test. 
Each additional user tested takes more time?one reason sample sizes 
tend to be small. Is it possible to get the same data by having users 
test themselves?"
http://www.measuringusability.com/unmoderated-testing.php

Benefits of Online, Unmoderated User Testing
By Henri Stetter.
"For most usability professionals lab-based research is the only game 
in town. However, with the growth of Web 2.0 and Web 3.0 technologies 
online, unmoderated user testing (also known as remote unmoderated or 
asynchronous user testing) is gaining traction and being used not only 
as a complement to, but in many cases as, an alternative to traditional 
lab-based research..."
http://www.usabilitynews.com/news/article6125.asp

Usability Testing with Time Constraints | Remote Usability Testing
By Janet M. Six.
"In this Ask UXmatters column?which is the third in a three-part series 
of columns focusing on usability?our experts discuss: 1. conducting 
usability testing when time is limited 2. using remote usability 
testing techniques..."
http://tinyurl.com/yegv3s5

A Summary of User Research Methods
By Patrick Kennedy.
"...In this article I give a quick overview of the methods I commonly 
use, broken down in to main categories..."
http://www.gurtle.com/ppov/2009/12/06/a-summary-of-user-research-methods


+05: EVENTS.

Open Source Conference (OSCON)
July 19-23, 2010.
Portland, Oregon, U.S.A.
http://en.oreilly.com/oscon

An Event Apart - Minneapolis
July 26-27, 2010.
Minneapolis, Minnesota, U.S.A.
http://aneventapart.com/2010/minneapolis/


+06: INFORMATION ARCHITECTURE.

Where Wireframes Are Concerned
By Andy Rutledge.
"Wireframes can be useful, valuable artifacts for informing the 
designer's process, but they often fail miserably as a first-step 
deliverable for clients..."
http://www.andyrutledge.com/where-wireframes-are-concerned.php

Sketchy Wireframes
By Aaron Travis.
"When it comes to user interface documentation, wireframes have long 
been the tool of choice. However, using traditional diagramming tools 
like Visio, OmniGraffle, and InDesign, most wireframes today look the 
same as their ancestors did from a decade ago ? assembled with rigid, 
computer-drawn boxes, lines and text. While these artifacts have served 
us well, they can also be slow to produce, burdened with unnecessary 
detail and give a false impression of 'completion.” To compensate for 
the drawbacks of traditional wireframes, many practitioners put aside 
the computer in favor of simple pencil sketches or whiteboard drawings. 
This speeds up the ideation process, but doesn't always produce 
presentable or maintainable documentation. There is a growing 
popularity toward something in the middle: Computer-based sketchy 
wireframes. These allow computer wireframes to look more like quick, 
hand-drawn sketches while retaining the reusability and polish that we 
expect from digital artifacts."
http://www.boxesandarrows.com/view/sketchy-wireframe

Tree Testing
By Dave O'Brien.
A big part of information architecture is organization ? creating the 
structure of a site. For most sites ? particularly large ones ? this 
means creating a hierarchical 'tree' of topics. But to date, the IA 
community hasn't found an effective, simple technique (or tool) to test 
site structures. The most common method used?closed card sorting?is 
neither widespread nor particularly suited to this task. Some years 
ago, Donna Spencer pioneered a simple paper-based technique to test 
trees of topics. Recent refinements to that method, some made possible 
by online experimentation, have now made 'tree testing' more effective 
and agile.
http://www.boxesandarrows.com/view/tree-testing


+07: JAVASCRIPT.

Submitting Forms via Javascript: Button vs. Link vs. Other?
WebAIM Thread.
"Assuming Javascript is enabled (I know that, itself, can be an
accessibility issue) what are the pros/cons of using various elements
to act as the trigger for submission?..."
http://webaim.org/discussion/mail_thread.php?thread=4043


+08: MISCELLANEOUS.

Letting Go of John Hancock
By Bjorn Enki.
"Because clients expect everything to be faster, better, and simpler, 
web professionals must take an instant, foolproof, paperless, modern 
approach to how clients approve proposals and sign contracts. 
Implementing an instantaneous contract agreement helps to get projects 
off the ground, attract clients on tight timelines, and prevent 
potential delays. All it takes is a little PHP and some PDF magic."
http://www.alistapart.com/articles/letting-go-of-john-hancock/

Needs + Resources + Location + Schedule + Budget = Scope
By Whitney Hess.
"Now that you've convinced a client they want to work with you, it's up 
to you to define the terms of your working agreement..."
http://tinyurl.com/yjstxmv


+09: NAVIGATION.

Cameras, Music, and Mattresses: Designing Query Disambiguation 
Solutions for the Real World
By Greg Nudelman.
"Our language is limited and imperfect. Typically, people type search 
queries quickly and with little forethought, so queries are definitely 
less than perfect..."
http://tinyurl.com/ybo4t8l


+10: PHP.

Comprehensible Code
By Paul Jones.
"Reading code is hard work. Here are some reasons why, along with some 
tips on how to make it easier for other developers to understand your 
code..."
http://phpadvent.org/2009/comprehensible-code-by-paul-jones


+11: STANDARDS, GUIDELINES & PATTERNS.

HTML5: Tool of Satan, or Yule of Santa?
By Bruce Lawson.
"...what HTML5 can you reasonably expect to be able to use reliably 
cross-browser in the early months of 2010? The answer is that you can 
use more than you might think, due to the seasonal tinsel of 
feature-detection and using the sparkly pixie-dust of IE-only VML (but 
used in a way that won't damage your Elf)..."
http://24ways.org/2009/html5-tool-of-satan-or-yule-of-santa

Should Error Messages be Displayed for Corrupt HTML5?
By Vlad Alexander.
"One of the primary reasons HTML is authored incorrectly today is 
because Web browsers do not display error messages when processing 
corrupt documents (constructed or transmitted incorrectly). Web browser 
vendors like to refer to these kinds of error messages as "draconian", 
i.e. unduly punitive. Why?..."
http://rebuildingtheweb.com/en/error-messages/

Your Questions Answered #4
By Richard Clark.
"Here we go with another post rounding up your HTML5 questions and 
sharing the answers with the world. We cover a wide range of topics 
this time, including ARIA, storage, offline capabilities, and document 
outlines, so read on to find the answers."
http://html5doctor.com/your-questions-answered-4/

Canvas and SVG - Which Should I Use When?
By Daniel Davis.
"As use of HTML5 is spreading, canvas and SVG (Scalable Vector 
Graphics) are being more widely used to create images within a web 
page. They are both supported by all major browsers (except Internet 
Explorer 8 and below) and are open alternatives to Flash for animation 
and graphic interaction. Why do we need two image-creation methods, 
however, and when should either be used?..."
http://my.opera.com/ODIN/blog/canvas-and-svg-which-should-i-use-when

Microformats: Boon or Bane?
By Jeff Atwood.
"...It feels like a hacky overload. While you could argue this is no 
different than the web and HTML in general -- a giant wobbly teetering 
tower of nasty, patched-together hacks -- something about it 
fundamentally bothers me. Now, all that said, I still think 
microformats are useful and worth implementing, if for no other reason 
than it's too easy not to..."
http://www.codinghorror.com/blog/archives/001314.html


+12: TYPOGRAPHY.

Type-Inspired Interfaces
By Dan Mall.
"One of the things that terrifies me most about a new project is the 
starting point. How is the content laid out? What colors do I pick? 
Once things like that are decided, it becomes significantly easier to 
continue design, but it's the blank page where I spend the most time..."
http://24ways.org/2009/type-inspired-interfaces


+13: USABILITY.

Short-Term Memory
By Jakob Nielsen.
"The human brain is not optimized for the abstract thinking and data 
memorization that websites often demand. Many usability guidelines are 
dictated by cognitive limitations."
http://www.useit.com/alertbox/short-term-memory.html

The Content Strategist as Digital Curator
By Erin Scime.
"As the digital landscape becomes increasingly complex, and as 
businesses become ever more comfortable using the web to bring their 
product and audience closer, the techniques and principles of museum 
curatorship can inform how we create online experiences?particularly 
when we approach content. Erin Scime shows us how."
http://www.alistapart.com/articles/content-strategist-as-digital-curator

10 (Obvious) Usability Crimes
By Adrian Roselli.
"Having stumbled across the article '10 Usability Crimes You Really 
Shouldn't Commit', I can see that the suggestions are pretty obvious, 
and the number 10 is probably more arbitrary than based on some natural 
break in severity. However, there are some things in the article I have 
been repeating for years that people just don't get. And this article 
uses He-Man graphics, which makes it even cooler."
http://blog.adrianroselli.com/2009/12/10-obvious-usability-crimes.html

Optimization: Applying Moore's Law to User Experience
By Peter Hornsby.
"...If we are to take significant steps forward in the state of the art 
for UX design, we need to continually question our base assumptions and 
refresh our knowledge about where the boundaries of human performance 
lie. Human brains are capable of adapting to changing situations and 
understanding new concepts. If the rewards of innovation are 
sufficiently great, we can change our current conceptions about what 
computer systems should be. While it is possible that the current state 
of the art is the best we can manage, I hope not."
http://tinyurl.com/yl48cso

10 Things to Consider When Writing for the Web
By Rob Mills.
"Writing for the web is a challenge. There are usually word length 
restrictions, the fact that users scan rather than read every word, and 
sometimes style guides to adhere to. There are enough writing tips 
online to keep you reading for longer than you probably desire. Here 
are 10 tips that have been the most useful to me..."
http://tinyurl.com/yf2xs95

The Construction of Instruction
By Relly Annett-Bake.
"If the world were made to my specifications, all your clients would be 
happy to pay for a web writer to craft every sentence into something as 
elegant as it was functional, and the client would have planned the 
content so that you had it just when you asked, but we both know that 
won't happen every time..."
http://24ways.org/2009/the-construction-of-instruction

Make It Difficult to Read
By Dmitry Fadeyev.
...There is no one right way to write content for the Web, just 
different approaches for different circumstances. Knowing your 
objectives can help you choose your strategy, just be sure to consider 
all options, especially the less obvious ones."
http://www.usabilitypost.com/2009/12/08/make-it-difficult-to-read/


[Section one ends.]


++ SECTION TWO:

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

Accessibility Information.
http://www.d.umn.edu/goto/accessibility

Association Information.
http://www.d.umn.edu/goto/associations

Book Listings.
http://www.d.umn.edu/goto/books

Cascading Style Sheets Information.
http://www.d.umn.edu/goto/css

Color Information.
http://www.d.umn.edu/goto/color

Dreamweaver Information.
http://www.d.umn.edu/goto/dreamweaver

Evaluation & Testing Information.
http://www.d.umn.edu/goto/testing

Event Information.
http://www.d.umn.edu/goto/events

Flash Information.
http://www.d.umn.edu/goto/flash

Information Architecture Information.
http://www.d.umn.edu/goto/architecture

JavaScript Information.
http://www.d.umn.edu/goto/javascript

Miscellaneous Web Information.
http://www.d.umn.edu/goto/misc

Navigation Information.
http://www.d.umn.edu/goto/navigation

PHP Information.
http://www.d.umn.edu/goto/php

Sites & Blogs Listing.
http://www.d.umn.edu/goto/sites

Standards, Guidelines & Pattern Information.
http://www.d.umn.edu/goto/standards

Tool Information.
http://www.d.umn.edu/goto/tools

Typography Information.
http://www.d.umn.edu/goto/type

Usability Information.
http://www.d.umn.edu/goto/usability

XML Information.
http://www.d.umn.edu/goto/xml

[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/goto/webdevlist
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