[webdev] Web Design Update: May 27, 2011

Laura Carlson lcarlson at d.umn.edu
Fri May 27 06:30:25 CDT 2011


+++ WEB DESIGN UPDATE.
- Volume 9, Issue 48, May 27, 2011.

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

++ISSUE 48 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: COLOR.
04: EVALUATION & TESTING.
05: EVENTS.
06: MISCELLANEOUS.
07: NAVIGATION.
08: STANDARDS, GUIDELINES & PATTERNS.
09: TOOLS.
10: USABILITY.


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

[Contents ends.]


++ SECTION ONE: New references.

+01: ACCESSIBILITY.

When Should You Invite tabindex to the Accessibility Party?
By Glenda Sims.
"I am a minimalist. I believe that simple solutions are better. So,
when it comes to tabindex, I rarely invite 'him' to the accessibility
party. Why? Because if you will just write the source code in the same
order you need the items for the visual presentation, then tabindex is
not necessary. But there are two decent reasons for using tabindex..."
http://www.glendathegood.com/blog/?p=604

Do Unobtrusive, Accessible Social Media Sharing Widgets Exist?
By Roger Johansson.
"Many clients are still asking for various bookmarking widgets for
social media. You know, the kind that shows a bunch of icons for
Twitter, Facebook, email, etc. Two popular examples are ShareThis and
AddThis, but there are others. What bugs me with every social media
sharing widget I have looked at is that they are not very keyboard
friendly, i.e. they are difficult or even impossible to use without a
mouse. They also tend to use invalid, obtrusive markup."
http://www.456bereastreet.com/archive/201105/do_unobtrusive_accessible_social_media_sharing_widgets_exist/

Overlays and Lightboxes - Keys to Success
By Derek Featherstone.
"In this article, we take a look at a fairly common pattern on the web
today: the overlay. We'll ask the question "should we use this effect
at all?" and examine what we need to do to ensure they are as
accessible as possible."
http://webstandardssherpa.com/reviews/overlays-and-lightboxes-keys-to-success/

Curing the JetBlues
By Derek Featherstone.
"Did you know that JetBlue (the US-based airline) is being sued for
their lack of accessibility on their website and on their self-serve
kiosks in airports? I didn't either, but in this article I took a
quick look at a few of the reasons why they've got some pretty serious
accessibility issues."
http://webstandardssherpa.com/reviews/curing-the-jetblues/


+02: CASCADING STYLE SHEETS.

Styling Ordered List Numbers
By Roger Johansson.
"I've always been annoyed by how difficult it is to style the numbers
of ordered lists. Quite often a design calls for something other than
just a plain figure - a different font, size, colour, background,
whatever..."
http://www.456bereastreet.com/archive/201105/styling_ordered_list_numbers/

Better Semantics with CSS Combinators and Selectors
By Chris Sealey.
"...At design school we were all taught about classes and IDs, using .
and # respectively, to directly target elements. That's enough control
to build a functional website - but it's not flexible enough to handle
a complete design shift. It also creates a lot more work than needed
by using presentational values within markup. Let's take a look at an
alternative approach to targeting those difficult-to-get-to ements."
http://designfestival.com/better-semantics-with-css-combinators-and-selectors/

When Using !important is The Right Choice
By Chris Coyier.
"...So when is the !important rule actually useful and a good idea? In
my opinion, utility classes are a good use case..."
http://css-tricks.com/when-using-important-is-the-right-choice/

Media Queries
By Eivind Uggedal.
"A collection of responsive web designs..."
http://mediaqueri.es/popular/


+03: COLOR.

Named Colors
By Estelle Weyl.
"CSS3 adds names colors from SVG and well as colors defined by Hue,
Saturation and Lighness. I've added a new page to this blog that lists
all named colors along with their hexidecimal, RGB and HSL values..."
http://www.standardista.com/new-post-on-named-colors


+04: EVALUATION & TESTING.

Capturing Meaningful and Significant User Experience Metrics
By Kim Oslob.
"How many times have you wondered how you can collect meaningful and
significant metrics to validate your research? Many researchers
struggle with this same dilemma on a daily basis. For example, how can
we know the magnitude of the issues we are detecting in a traditional
usability lab study? Surprisingly, there are many ways to capture
useful UX metrics if you have the knowledge of what solutions to use
and how to use them..."
http://www.uxmatters.com/mt/archives/2011/05/capturing-meaningful-and-significant-user-experience-metrics.php


+05: EVENTS.

Two Apps Per Day: iOS App Design Workshop for Web Designers
June 5, 2011.
San Francisco, California, U.S.A.
http://www.twoappsperday.com/


+06: MISCELLANEOUS.

Teamwork and Collaboration Across Departments
By Janet M. Six.
"In this edition of Ask UXmatters, our experts discuss how to foster
teamwork and collaboration across departments..."
http://www.uxmatters.com/mt/archives/2011/05/teamwork-and-collaboration-across-departments.php

Two Cats In A Sack - Designer-Developer Discord
By Cassie McDaniel.
"The differences between designers and developers often erupt in
pointed jabs on the Web or at conferences. Jokes or not, the jabs
create friction whose consequences are real..."
http://www.smashingmagazine.com/2011/05/13/two-cats-in-a-sack-designer-developer-discord/

8 Things They Don't Tell You About Being a Web Designer
By Jason Schubring.
"...In this article, I'll share with you 8 things I wish I had known
about web development as a profession and as an industry..."
http://sixrevisions.com/project-management/8-things-they-dont-tell-you-about-being-a-web-designer/


+07: NAVIGATION.

Tweaking Your Facets, Part I: Supporting Hierarchy with Multiple Selection
By Jaimie Sirovich.
"Faceted navigation is one of the most important breakthroughs in
modern Web site design. It provides an almost universally positive
enhancement to usability..."
http://www.uxmatters.com/mt/archives/2011/05/tweaking-your-facets-part-i-supporting-hierarchy-with-multiple-selection.php


+08: STANDARDS, GUIDELINES & PATTERNS.

W3C Invites Broad Review of HTML5
By W3C.
"W3C today called for broad review of HTML5 and five related
specifications that constitute the foundation of W3C's Open Web
Platform. At the heart of this platform, HTML5 offers powerful tools
for creating Web-based applications that will run on any device. Due
to the significant impact of this technology on industry and society,
W3C is actively seeking feedback at this phase of the standards
process..."
http://www.w3.org/2011/05/html5lc-pr.html.en

FAQ for HTML5 Last Call
By Philippe Le Hegaret and Ian Jacobs.
"...there remain open issues about some features, particularly related
to accessibility. The Working Group will address those issues during
Last Call...In order to advance the specification to W3C
Recommendation, the Working Group must resolve accessibility issues to
the satisfaction of the Director..."
http://www.w3.org/2011/05/html5lc-faq.html

HTML5 Spec Hits Last Call Status
By Paul Cotton.
"Late yesterday the W3C’s HTML Working Group announced that the HTML5
specification has reached Last Call status..."
http://blogs.msdn.com/b/interoperability/archive/2011/05/26/html5-spec-hits-last-call-status.aspx

About Obsolete Features in HTML5
By Louis Lazaris.
"...As many of you may be aware, validating your pages in HTML5 has
become a whole new adventure. Along with changes in what now
constitutes 'valid' and 'invalid' markup, the HTML5 Validator (which,
by the way, is the same tool that runs the W3C's HTML5 validator) will
provide some warnings about obsolete features in HTML5..."
http://www.impressivewebs.com/obsolete-features-html5/

A Basic HTML5 Template
By Louis Lazaris.
"This article is an excerpt from HTML5 & CSS3 for the Real World, by
Alexis Goldstein, Louis Lazaris & Estelle Weyl."
http://blogs.sitepoint.com/a-basic-html5-template/

Creating Accessible Interactive Web Apps using HTML5 (Video)
By Dominic Mazzoni, Rachel Shearer.
"Providing a basic HTML site used to be the best way to make sure your
content was accessible to all users. But times have changed, and now
you can use HTML5 techniques to provide an experience that's just as
rich and interactive for people who use assistive technology. The
emphasis of this talk will be on techniques that work today in the
latest browser versions. Techniques covered will include proper use of
ARIA along with focus management and keyboard navigation.."
http://www.google.com/events/io/2011/sessions/creating-accessible-interactive-web-apps-using-html5.html

HTML5 and Accessibility
By Bruce Lawson, Steve Faulkner.
"...The arrival of HTML5 has further muddied the water. For some,
HTML5 saves the world. For others – including many accessibility
practitioners – it is the embodiment of evil..."
http://msdn.microsoft.com/en-us/scriptjunkie/hh204741.aspx

HTML5 is More than Cool
By Robert Nyman.
"HTML5 is here to save us all: it has the cool functions, eye-dazzling
features and APIs to go around. I get to see a lot of great things
developed with HTML5, but I’d like to issue a word of caution as
well..."
http://robertnyman.com/2011/05/26/html5-is-more-than-cool/

How HTML5 Will Change The World
By Deborah Edwards-Onoro.
"At the May 23, 2011 online webinar, Robert Nyman, Molly Holzschlag,
Lachlan Hunt and Tady Walsh provided their insights and tips on HTML5
and CSS3."
http://storify.com/redcrew/how-html5-will-change-the-world

How Important Is Semantic HTML?
By Steven Bradley.
"...Semantic html is using html to reinforce structural meaning. It's
about using tags, class names, and ids that reinforce the meaning of
the content within the tags..."
http://www.vanseodesign.com/web-design/semantic-html/


+09: TOOLS.

Holmes The CSS Markup Detective
By Luke Williams.
"Holmes is stand-alone diagnostic CSS stylesheet that can highlight
potentially invalid, inaccessible or erroneous HTML(5) markup by
adding one class."
http://www.red-root.com/sandbox/holmes/


+10: USABILITY.

Redesigning vs Realigning - A Case Study
By Sacha Greif.
"Cameron Moll famously stated that 'good designers redesign, great
designers realign'. But what does that mean exactly? To get a better
understanding of the term, here's a real-life example..."
http://www.attackofdesign.com/redesigning-vs-realigning-a-case-study/


[Section one ends.]


++ SECTION TWO:

+11: 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