[webdev] Web Design Update: May 10, 2012

Thu May 10 06:22:13 CDT 2012

+++ WEB DESIGN UPDATE.
- Volume 10, Issue 46, May 10, 2012.

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

++ISSUE 46 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: DREAMWEAVER.
04: EVALUATION & TESTING.
05: EVENTS.
06: INFORMATION ARCHITECTURE.
07: JAVASCRIPT.
08: MISCELLANEOUS.
09: NAVIGATION.
10: STANDARDS, GUIDELINES & PATTERNS.
11: TYPOGRAPHY.
12: USABILITY.

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

[Contents ends.]

++ SECTION ONE: New references.

+01: ACCESSIBILITY.

Global Accessibility Awareness Day, Surveys, More (Podcast)
By Dennis E. Lembree.
"First, Dennis and Ross discuss a variety of topics including some
current surveys and a couple articles about skip-to links. Then Dennis
speaks with @JoeDevon and @Jennison about the inaugural Global
Accessibility Awareness Day..."
http://webaxe.blogspot.com/2012/05/podcast-95-global-accessibility.html

Making Facebook Accessible
By John Eric Brandt.
"A recent posting in one of my LinkedIn groups (the Web 2.0
Accessibility Forum) motivated me to put this together..."
http://jebswebs.net/blog/2012/05/making-facebook-accessible/

WCAG 2.0 and PDF/UA
By Andrew Kirkpatrick.
"...PDF/UA provides normative technical specifications for the use of
the PDF format, defining proper structure and syntax to enable
reliable access. This includes identification of necessary tagging
structures, how to specify alternative text for images, how to ensure
correct Unicode mappings for character glyphs, and many other file,
page and object-level specifications, as well as how Reader
applications and assistive technologies can fully process PDF/UA
conforming files to maximize accessibility..."
http://blogs.adobe.com/accessibility/2012/05/wcag-2-0-and-pdfua.html

Guidelines are Only Half of the Story - Accessibility Problems
Encountered by Blind Users on the Web
By Christopher Power, Andre Freire, Helen Petrie, and David Swallow.
"This paper describes an empirical study of the problems encountered
by 32 blind users on the Web. Task-based user evaluations were
undertaken on 16 websites, yielding 1383 instances of user
problems..."
http://dl.acm.org/citation.cfm?id=2207736
Sitepoint comments on "Guidelines are Only Half of the Story":
http://www.sitepoint.com/forums/showthread.php?852325-Research-shows-adhering-to-WCAG-doesn-t-solve-blind-users-problems#yui-gen12

+02: CASCADING STYLE SHEETS.

Cross-Browser Debugging CSS
By Nicole Sullivan.
"The first principal is simply: Work with CSS, not against it..."
http://www.stubbornella.org/content/2012/05/02/cross-browser-debugging-css/

Responsive CSS That Scales
By Mark Hurrell.
"CSS for a big site is different to CSS for a small, or even medium
sized-site. The way CSS was intended, when you create a new piece of
functionality for your website you simply write some new CSS to style
it - easy..."
http://blog.responsivenews.co.uk/post/12511377569/responsive-css-that-scales

The Single Responsibility Principle Applied to CSS
By Harry Roberts.
"Having just spoken at the Front-Trends conference in Warsaw, I've
decided to expand on something which my talk mentioned a lot: classes.
My talk covered how to build big, scalable front-ends and one of the
key factors involved in doing so is sensible and generous use of
abstracted classes. One thing that really helps you achieve this is
the application of the single responsibility principle, a method used
mainly in OO programming..."
http://csswizardry.com/2012/04/the-single-responsibility-principle-applied-to-css/

My HTML/CSS Coding Style
By Harry Roberts.
"When I write HTML and CSS I have a certain set of rules and
guidelines I stick to with regards syntax and formatting. I've decided
to write them up here not to preach or tell you how to do things, but
simply to share how I like to work. If you hate the things I do that's
cool, these are not recommendations. If you like anything I do then
great; you can have it. What I would love to see is other people doing
the same; please consider writing up your coding styles, nuances and
preferences and share them about..."
http://csswizardry.com/2012/04/my-html-css-coding-style/

Vendor Tokens
By Eric A. Meyer.
"It may be that from the ashes of vendor prefixes will arise a new way
forward. As proposed by François Remy, vendor tokens would serve the
same basic purpose as prefixes with a different syntactical approach,
and with at east a couple of extra benefits. Instead of prefixing
properties, you'd instead add vendor tokens to the end of a single
declaration, much as you do !important (which of course we never ever
use, amirite?)..."
http://meyerweb.com/eric/thoughts/2012/05/08/vendor-tokens/

Google HTML/CSS Style Guide
By Google.
http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml

+03: DREAMWEAVER.

Dreamweaver CS6 - Creating Smooth Changes with the CSS Transitions Panel
By David Powers.
"The new CSS Transitions panel in Dreamweaver CS6 simplifies creating
a transition not only by automatically generating the style rules for
each browser, but also by creating the style rule for the state at the
end of the transition. In this tutorial, you'll learn how to use the
CSS Transitions panel to rotate and scale images when you mouse over
them. You'll also learn about new options for images in the Property
inspector."
http://www.adobe.com/devnet/dreamweaver/articles/css-transitions-panel.html

+04: EVALUATION & TESTING.

How to Conduct a Usability Test on a Mobile Device
By Jeff Sauro.
"But for an in-person moderated usability test on a mobile device,
here's the setup that we've found works well..."
http://www.measuringusability.com/blog/mobile-usability-test.php

Field Research is Vital When Designing Enterprise Mobile Solutions
By James Robertson.
"...When it comes to enterprise mobile solutions, it's doubly
important to conduct this type of research, for one simple reason: the
context of use..."
http://www.steptwo.com.au/columntwo/field-research-is-vital-when-designing-enterprise-mobile-solutions/

Combining In-Person and Remote Research
By Sabina Idler.
"...Most of the time, it is reasonable to not conduct in-person and
remote research simultaneously, but rather to do it sequentially,
giving them the chance to supplement each other. In general, in-person
research reveals more qualitative insights such as usability issues or
new ideas. Remote research, on the other hand, is great to underpin
these insights with numbers to verify and possibly generalize them..."
http://uxmag.com/articles/combining-in-person-and-remote-research

+05: EVENTS.

Norwegian Developers Conference
June 4-5, 2012.
Oslo, Norway
http://www.ndcoslo.com/

WebVisions
July 4-7, 2012.
Barcelona, Spain
http://www.webvisionsevent.com/

Future of Web and Mobile - London
October 15-17, 2012.
London
http://futureofwebapps.com/london-2012/landing-page

Accessing Higher Ground
November 12-16, 2012.
Westminster, Colorado, U.S.A.
http://www.colorado.edu/ATconference/

+06: INFORMATION ARCHITECTURE.

Understanding Information Architecture Differently
By Nathaniel Davis.
"the practice of information architecture has confronted the need to
solve the effects of information overload from its very beginning. It
did not begin as a struggle for better user experiences, site
planning, usability, or budgets. Information architecture arrived as a
practice specifically to address the challenges that information
abundance brought on within the context of the Internet. This is the
seemingly narrow scope of information architecture through which the
classic IA perspective survives."
http://www.uxmatters.com/mt/archives/2012/05/understanding-information-architecture-differently.php

+07: JAVASCRIPT.

JavaScript Style Guides And Beautifiers
By Addy Osmani.
"Today we're going to explore JavaScript style guides, specifically:
their importance, style guides worth reviewing and tools that can
assist in automated code beautification or style enforcement."
http://addyosmani.com/blog/javascript-style-guides-and-beautifiers/

Multiple var Statements in JavaScript; Not Superfluous
By Ben Alman.
"I'm not sure where or when it happened, but at some point the
JavaScript community decided that multiple, individual var statements
were superfluous, instead opting for a single, combined var statement
with a comma-separated list of variable declarations and assignments
whenever possible..."
http://benalman.com/news/2012/05/multiple-var-statements-javascript/

Complication is What Happens When You Try to Solve a Problem You Don't
Understand
By SIGPWNED.
"Code should be simple. Code should be butt simple. Code should be so
simple that there's no way it can be misunderstood. Good code has no
nooks. Good code has no crannies. Good code is a round room with no
corners for bugs to hide..."
http://sigpwned.com/content/complication-what-happens-when-you-try-solve-problem-you-dont-understand

+08: MISCELLANEOUS.

Responsive Image Format
By Yoav Weiss.
"...It can be done, it can be done gracefully, and it can be done with
current image formats...The web already has a "responsive" format,
which is progressive JPEG. The only issue at hand is getting the
browsers to download only the neccesary bytes of the progressive JPEG.
Here's how we can do this..."
http://blog.yoav.ws/2012/05/Responsive-image-format

Retina displays, future HiDPI modes, fluid and responsive layouts all
share the same problem - The ideal bitmap image size can only be
determined by the browser at runtime.
By Le Roux Bodenstein.
http://opensores.za.net/2012/responsive-images/

A Framework For Discussing Responsive Images Solutions
By Jason Grigsby.
"Over the last few weeks many more web developers and designers have
become engaged in the conversation surrounding responsive images. On
the whole, this is great news because the more people we have telling
browser makers that this is a legitimate issue, the more likely it is
to get addressed quickly..."
http://blog.cloudfour.com/a-framework-for-discussing-responsive-images-solutions/

Responsive Web Design: A Project-Management Perspective
By Rudy Rigot.
"Reading blogs out there, you will notice that every attempt to fix a
responsive design process is still very experimental: there are as
many offered ways as there are blog articles about it! Progress is
being made, but nothing is really set in stone at the moment. Knowing
that, the most important thing right now is to make sure you ask the
right questions at the start of each project, make the right choices,
and jump into experimentation yourself with a maximum amount of
pragmatism. If you find a good idea to make all of these challenges
smoother, please write about it and share your discoveries on the
web!"
http://dev.opera.com/articles/view/responsive-web-design-a-project-management-perspective/

Whitney Quesenbery Interview
By W Craig Tomlin.
"This is an interview with Whitney Quesenbery, one in a series of
interviews with people in our industry who have made a difference in
the usability field..."
http://www.usefulusability.com/whitney-quesenbery-interview/

+09: NAVIGATION.

Effective Presentation of a Website's Navigation
By Andy Montgomery.
"Users obtain information on the web in one of two ways: searching or
browsing. Browsing - moving through a multi-faceted content structure
- is made easier when information architects present users with an
intuitive navigation hierarchy. This article discusses two techniques
to that end..."
http://www.uxbooth.com/blog/effective-presentation-of-a-websites-navigation/

+10: STANDARDS, GUIDELINES & PATTERNS.

HTML5 Audio - The State of Play
By Mark Boas.
"...With many new advanced audio APIs being actively worked on and
plenty of improvements to the existing native audio we all know and
love, it's certainly an exciting time to revisit the heady world of
<audio>..."
http://html5doctor.com/html5-audio-the-state-of-play/

+11: TYPOGRAPHY.

Say No to Faux Bold
By Alan Stearns.
"Browsers can do terrible things to type. If text is styled as bold or
italic and the typeface family does not include a bold or italic font,
browsers will compensate by trying to create bold and italic styles
themselves. The results are an awkward mimicry of real type design,
and can be especially atrocious with web fonts. Adobe's Alan Stearns
shares quick tips and techniques to ensure that your @font-face rules
match the weight and styles of the fonts, and that you have a
@font-face rule for every style your content uses. If you're taking
the time to choose a beautiful web font for your site, you owe it to
yourself and your users to make certain you're actually using the web
font - and only the web font - to display your site's content in all
its glory."
http://www.alistapart.com/articles/say-no-to-faux-bold/

+12: USABILITY.

Computer Screens Getting Bigger
By Jakob Nielsen.
"Reasonably big monitors have finally become the most common class of
desktop computer screen, dethroning the 1024√ó768 resolution that was
long the target for web design."
http://www.useit.com/alertbox/screen_resolution.html

7 Basic Best Practices for Buttons
By Caroline Jarrett.
"Here are my basic best practices for buttons..."
http://www.uxmatters.com/mt/archives/2012/05/7-basic-best-practices-for-buttons.php

Principles of User Interface Design
By Joshua Porter.
Anew resource, Principles of User Interface Design, contains a list of
20 or so design principles.
http://bokardo.com/principles-of-user-interface-design/

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