[webdev] Web Design Update: December 22, 2011

Laura Carlson lcarlson at d.umn.edu
Thu Dec 22 06:18:01 CST 2011


+++ WEB DESIGN UPDATE.
- Volume 10, Issue 26, December 22, 2011.

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

++ISSUE 26 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: MISCELLANEOUS.
06: JAVASCRIPT.
07: PHP.
08: STANDARDS, GUIDELINES & PATTERNS.
09: USABILITY.


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

[Contents ends.]


++ SECTION ONE: New references.

+01: ACCESSIBILITY.

Top Ten Tests for Alternatives on Mobile
By Henny Swan.
"There are a few fundamental checks you can run on mobile web content
and native apps to test screen reader support on mobile. The good news
is that while there are clearly some differences the key principles of
web accessibility on the desktop are true also for the mobile. This
applies to the mobile web, web apps and native apps..."
http://www.iheni.com/mobile-accessibility-tests-alternatives-for-screen-reader-users/

'Fix The Web' In Struggle For Survival
By Dan Jellinek.
"A ground-breaking project to enlist the power of volunteers to fix
web access problems for disabled people is at risk of closure, after
failing to secure government funding..."
http://www.headstar.com/eablive/?p=656

An Inaccessible Website: Don't Just Suck it Up
By Sarah Pulis.
"Speaking up about inaccessibility on the web is the only way to
change it, writes Sarah Pulis..."
http://www.abc.net.au/rampup/articles/2011/12/19/3393485.htm


+02: CASCADING STYLE SHEETS.

Multiple Attribute Values
By Chris Coyier.
"Elements can have multiple class names. For instance..."
http://css-tricks.com/multiple-attribute-values/

Element, Can We Style a Number of Your Children?
By html5advent2011.
When you have a growing list of things that have a complex format you
may want to make them smaller when there are more of them. This
UI-pattern is especially useful if the general overview is more
important than the details of a specific item in the list. In the
examples below we demonstrate a CSS-only technique that allows you to
style elements based on their number.
http://html5advent2011.digitpaint.nl/20/

What Happened to My Cursor!?
By html5advent2011.
Setting a custom cursor for certain elements has been around for a
while (some cursors worked even in IE 5.5). In CSS3 there are a couple
of new cursor styles you can use. Most of them are very usefull,
others not so much, but may still come in handy in some edge-cases.
http://html5advent2011.digitpaint.nl/3/index.html

Parallaxing CSS3 Backgrounds
By html5advent2011.
In 2011 scrolling was the new black. We've seen all kinds of site that
use some kind of cool way to scroll. The effect is called parallax
scrolling and has been around since the days of Super Mario Bros
(probably longer). The idea is pretty simple; you have multiple layers
which you move at different speeds to give the illusion of depth.
http://html5advent2011.digitpaint.nl/21/


+03: EVALUATION & TESTING.

When Does A Persona Stop Being A Persona?
By Jared M. Spool.
"Personas are a powerful tool in the UX toolbox. When done well, they
rally the team around a small, specific set of archetypal users. Each
team member becomes closely familiar with each of the personas, then
can create designs that closely match those persona's needs..."
http://www.uie.com/brainsparks/2011/12/15/when-does-a-persona-stop-being-a-persona/

What's The Best Way to Find People for User Research and Usability Testing?
By Dana Chisnell.
"There are lots of great sources of participants for usability studies
and other user research. The key: know what behavior you want to learn
about..."
http://usabilitytestinghowto.blogspot.com/2011/12/whats-best-way-to-find-people-for-user.html

Bending the Protocals: Useful Variations on Usability Tests
By Jared M. Spool.
"Usability tests are the workhorse technique for teams to understand
how their users interact with their design. The best teams conduct
frequent tests, giving each team member regular opportunities to learn
where their design elicits frustration and delight..."
http://www.uie.com/articles/bending_protocals


+04: EVENTS.

Info-exclusion
July 19-22, 2012.
Douro Region, Portugal
http://dsai2012.utad.pt/

An Event Apart Washington, DC
August 6-8, 2012.
Washington, DC, U.S.A.
http://aneventapart.com/2012/dc/


+05: JAVASCRIPT.

Debugging aria-label on Elements
By last-child.
"I recently helped do some testing on the new version Yahoo! Mail for
iPads and was stumped by an aria-label not working as expected. It was
one of those gotcha moments, when you realize a confusion with a
fundamental process. Are you wondering why your aria-label is not
being announced? The aria-label attribute is tempting to use in
situations where the visible text is not adequate. For instance, you
may use a background image to represent a value and you'd like the
user to know that value via an aria-label on the parent. This basic
test page will walk through the simple assumption and show how the
aria-label is meant to be used...."
http://www.last-child.com/debugging-aria-label/


+06: MISCELLANEOUS.

Mobile WebSite vs Responsive Web Design
By reliablenetworks.
"It's been obvious for a while now that mobile internet use is on the
rise, in fact some estimates suggest that as early as 2013, more
people will use mobile devices to access the internet than desktop
computers. It's equally obvious that if you're building a website now,
you need to think about accommodating mobile users..."
http://www.reliablenetworks.co.uk/Blog/web-design-2/mobile-website-vs-responsive-web-design

Mobile HTML5
Compatibility tables for iPhone, Android, BlackBerry, Symbian, iPad
and other mobile devices
http://mobilehtml5.org/


+07: PHP.

PHP for All the Things
By Matt Graham.
"PHP was originally designed for web sites and is still widely thought
of only as a programming language for the Web. But with the approaches
below and a variety of useful console libraries, PHP works great for
command line scripts, too..."
http://phpadvent.org/2011/php-for-all-the-things-by-matt-graham

Cracks in the Foundation
By Gwynne Raskind.
"PHP has been around for a long time, and it's starting to show its
age. From top to bottom, the language has creaky joints. I've decided
to take a look at how things got to this point, and what can be (and
is being) done about it. I start out pretty gloomy, but bear with me;
I promise it gets better..."
http://phpadvent.org/2011/cracks-in-the-foundation-by-gwynne-raskind

How Big Are PHP Arrays (and Values) Really? (Hint: BIG!)
By Nikic.
"In this post I want to investigate the memory usage of PHP arrays
(and values in general) using the following script as an example,
which creates 100000 unique integer array elements and measures the
resulting memory usage..."
http://nikic.github.com/2011/12/12/How-big-are-PHP-arrays-really-Hint-BIG.html

Continue Statement
By PHP Know How.
"Continue statement is used in loops to skip the current iteration and
move to next iteration. Think that you have a game and you don't show
the score of fourth stage to the player and add it at the end as a
surprise. You can implement this scenario as below using an array, a
For loop and a continue statement..."
http://www.phpknowhow.com/basics/continue-statement/

Include Files
By PHP Know How.
"PHP lets you add content of another file into your running PHP file.
It's basically like merging two files at run time. This let you have
common functions and content in one file and use them in more other
files..."
http://www.phpknowhow.com/basics/include-files/

Coding Standards
By PHP Know How.
"Sticking to coding standards help you to keep consistency and make
your code understandable to others. It's really helpful when you work
on big projects where more than one programmer may work on and that
you have to deal with great amount of code (Having no standard can
make it difficult to understand your own code after some time)..."
http://www.phpknowhow.com/basics/coding-standards/


+08: STANDARDS, GUIDELINES & PATTERNS.

Using HTML5 Headings
By Leonie Watson.
"HTML5 headings make it easy to syndicate and reuse content, without
breaking the heading hierarchy. Using HTML5 headings and keeping the
heading hierarchy backwards compatible proves unexpectedly complicated
though. The HTML5 specification has a solution, but is it the right
one?..."
http://tink.co.uk/2011/11/using-html5-headings/

New Features for HTML5 Video Playback in Firefox
By Chris Heilmann.
"As explained in this blog post by Jared Wein of the Firefox team
there are quite a few new features in Firefox when it comes to playing
HTML5 video. As an Aurora user, I am most excited about the option to
go full-screen, the ability to overlay video statistics and to save a
snapshot of the current frame as a JPG..."
http://hacks.mozilla.org/2011/12/new-features-for-html5-video-playback-in-firefox/

The Output Element
By Richard Clark.
"Across the web, you'll see a range of sites that feature calculators
for working out things like loan repayments, mortgage rates, tax,
insurance, and more. Until now, we've had no way of semantically
marking up the result of those calculations. Enter: the <output>
element..."
http://html5doctor.com/the-output-element/


+09: USABILITY.

Overloading Different Outcomes on Similar Commands can be Confusing
By Jakob Nielsen.
"Using the same command for multiple actions enhances usability if the
results are conceptually the same.
http://www.useit.com/alertbox/overloaded-commands.html

Taming Complexity
By Simon Collison.
"I'm going to step into my UX trousers for this one. I wouldn't
usually wear them in public, but it's Christmas, so there's nothing
wrong with looking silly. Anyway, to business. Wherever I roam, I hear
the familiar call for simplicity and the denouncement of complexity. I
read often that the simpler something is, the more usable it will be.
We understand that simple is hard to achieve, but we push for it
nonetheless, convinced it will make what we build easier to use.
Simple is better, right? Well, I'll try to explore that. Much of what
follows will not be revelatory to some but, like all good lessons, I
think this serves as a welcome reminder that as we live in a complex
world it's OK to sometimes reflect that complexity in the products we
build."
http://24ways.org/2011/taming-complexity


[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