[webdev] Web Design Update: August 12, 2011

[Laura Carlson]

+++ WEB DESIGN UPDATE.
- Volume 10, Issue 07, August 12, 2011.

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

++ISSUE 07 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: JAVASCRIPT.
07: MISCELLANEOUS.
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.

Headings and Labels - Accessibility for Web Writers, Part 10
By Dey Alexander.
"Write descriptive headings, sub-headings and labels for content. This
will help users understand what your content is about, decide if it is
relevant and go directly to the information they are looking for..."
http://www.4syllables.com.au/2011/08/accessibility-web-writers-part-10/

Section Headings - Accessibility for Web Writers, Part 11
By Dey Alexander.
"Use headings to organise the sections or topics within an article or
document. Headings break content into more manageable chunks, making a
page or topic easier to use and understand. You can use visual
elements (boxes, lines and so on) to complement headings, but you
cannot rely on them as they will not be accessible to all users..."
http://www.4syllables.com.au/2011/08/accessibility-web-writers-part-11/

AAP Provides Longdesc Feedback to W3C
By Dennis E. Lembree.
"...Recently the Association of American Publishers (AAP) submitted
feedback on longdesc to the W3C HTML 5 Working Group. It's very well
written and thought it should be shared. I obtained permission to
publish the response (thanks Suzanne and Ed). Here is the main part of
it..."
http://webaxe.blogspot.com/2011/08/aap-provides-longdesc-feedback-to-w3c.html

Video Accessibility Problems
By Joe Dolson.
"...Video has a number of glaring accessibility problems. There's
nothing especially complicated about these issues - they should be
obvious, after all - but accomplishing them at all seems to be beyond
the pale at the moment. It's not that it's difficult to make video
accessible. It's not that the software to do it, at least in a limited
manner, is expensive or difficult to use. It's mostly two issues:
laziness or ignorance..."
http://www.joedolson.com/articles/2007/02/video-accessibility-problems/

Pearson Guidelines for Accessible Educational Web Media
By pearsoned.
"Making accessibility easier to achieve by choosing technologies (e.g.
HTML, Flash) with this in mind..."
http://wps.pearsoned.com/accessibility/115/29601/7577872.cw/index.html

Myths About Low Vision
By Wayne Dick.
"Most people lump blindness and visual impairment into one group. This
is a mistake that does serious harm to many people who have low vision
but are not blind..."
http://blog.knowbility.org/?p=346

Tools for Access to Reading
By Wayne Dick.
"...Do not stop using text alternatives or keyboard access just
because people in VR/LV do not use them. Keep using semantic markup.
Do everything you did before, but also consider how things look at
screen density 100.  Can you read the page reasonably?  Does your page
meet the Screen Density Principle at screen density 100 or even less?
Would you like to interact with your page at screen density 100..."
http://blog.knowbility.org/?p=374


+02: CASCADING STYLE SHEETS.

What Makes For a Semantic Class Name?
By Chris Coyier.
"...I'd describe semantics as it relates to HTML as tags, classes,
IDs, and attributes describing but not specifying the content they
enclose. Let's start with an example we can probably all agree on..."
http://css-tricks.com/13423-semantic-class-names/

Techniques For Gracefully Degrading Media Queries
By Lewis Nyman.
"...supported by most modern Web browsers. Mobile and desktop browsers
that lack support will present a subpar experience to the user unless
we step up and take action. I'll outline some of techniques that
developers can follow to address this problem..."
http://coding.smashingmagazine.com/2011/08/10/techniques-for-gracefully-degrading-media-queries/

The 'inherit' Value for CSS Properties
By Louis Lazaris.
"...f you want, however, you can force a property in a child element
to inherit the value for that property from its parent by using the
inherit value. Here's an example of how you might do this..."
http://www.impressivewebs.com/inherit-value-css/

The Future of CSS Layouts
By Peter Gasston.
"For all the wonderful features it provides, CSS does a surprisingly
poor job of the fundamentals of page layout. But options for richer,
more dynamic pages are on their way, as Peter Gasston explains..."
http://www.netmagazine.com/features/future-css-layouts

Let the Web Move You - CSS3 Animations and Transitions
By John Allsopp.
"If you've been developing for, or even just using the web for more
than about 15 years, you'll likely remember a time when animated
effects were the bomb. Animated GIFs adorned just about every page,
spinning globes, little men with jack hammers, self - winged
envelopes. And if you're very unlucky, you'll remember the explosion
of blinking content on the web around 1995, as the blink element in
the then dominant Netscape browser took hold of the imagination of
designers everywhere (for killing off the non - standard blink element
alone, the web standards movement deserves at the very least a Noble
Peace Prize). And perhaps the single widest JavaScript use in its
earliest days was for creating image rollovers, until CSS got into the
act with the hover state. In short, animation has had a long, if
checkered career on the web. Then, for years, animation fell out of
favour, but with the rise of JavaScript libraries, we've seen the
re-??emergence of animated interfaces."
http://www.webdirections.org/blog/let-the-web-move-you-css3-animations-and-transitions/

CSS3 Shapes
By Demetrius Wallace.
"I put together this small resource to hopefully help other designers
and developers with a list of mainly geometric shapes you can perform
using CSS3..."
http://www.css3shapes.com

CSS3 Radial Gradient Syntax Breakdown
By Louis Lazaris.
"A short time ago I wrote an article that broke down the syntax for
coding CSS3 linear gradients from scratch. Once you get the hang of
them, linear gradients are pretty simple to code. Radial gradients, on
the other hand, are a little more complex. So let' s finish off what I
started in that earlier post and go through the syntax for radial
gradients..."
http://www.impressivewebs.com/css3-radial-gradient-syntax/


+03: DREAMWEAVER.

Building Mobile Pages with Dreamweaver CS5.5
By David Karlins.
"Build mobile-friendly web pages based on jQuery JavaScript objects
quickly and easily with Dreamweaver CS5.5. And do it without coding!
David Karlins, author of Adobe Creative Suite 5 Web Premium How-Tos:
100 Essential Techniques, takes you through the Dreamweaver techniques
that make this eminently possible..."
http://www.peachpit.com/articles/article.aspx?p=1737104


+04: EVALUATION & TESTING.

Client Reactions to User Research Findings
By Jim Ross.
"Sometimes, as a user researcher, I feel like an investigative
reporter, unearthing sensational findings and hidden truths that will
amaze and intrigue my audience. Sadly, user research findings are
rarely this sensational, and it is seldom that they completely amaze
and stun our clients. By client, I mean anyone for whom we're doing
research-whether a consulting client, an internal client team, or a
project team..."
http://www.uxmatters.com/mt/archives/2011/08/client-reactions-to-user-research-findings.php

Putting the 'Long' into Longitudinal: UX Lessons from Survey Research
By Caroline Jarrett.
"Longitudinal studies look at long-term user experience. Usually, that
means over a few months or possibly a few years. But recently, at the
European Survey Research Association Conference, I learned about some
much longer-term studies that offer some lessons about how to conduct
our rather shorter investigations..."
http://www.uxmatters.com/mt/archives/2011/08/putting-the-long-into-longitudinal-ux-lessons-from-survey-research.php

Kim Goodwin - Developing Effective Scenarios
By Sean Carmichael.
"Combining storytelling with research data can help you craft
realistic scenarios to guide your design process. Getting to know the
specific needs of your users allows you to address any potential
problems they may have. As a consultant, Kim Goodwin uses her
experience and expertise in working with teams to develop effective
scenarios. In this podcast, Kim discusses the role that scenarios play
in the design process with Jared Spool..."
http://www.uie.com/brainsparks/2011/08/05/kim-goodwin-developing-effective-scenarios/


+05: EVENTS.

HTML5 Accessibility with John Foliot
August 18, 2011.
San Francisco, Califorina, U.S.A.
http://www.sfhtml5.org/events/26628601/

Content Strategy Forum
September 5-7, 2011.
London, England, United Kingdom
http://2011.csforum.eu/

UserFocus 2011
September 16, 2011.
Washington, District of Columbia, U.S.A.
http://upadc.org/userfocus

Modernizr with Faruk Ates
September 29, 2011.
San Francisco, Califorina, U.S.A.
http://www.sfhtml5.org/events/28458331/

Codeworks
December 1, 2011 in Madison, Wisconsin, U.S.A.
December 3, 2011 in Nashville, Tennessee, U.S.A.
December 5, 2011 in Baltimore, Maryland, U.S.A.
December 7, 2011 in Raleigh, North Carolina, U.S.A.
December 9, 2011 in Orlando, Florida, U.S.A.
http://codeworks.phparch.com/


+06: JAVASCRIPT.

What's a Closure?
By Nathan Whitehead.
Ever wonder what closures are and how they work? You can learn about
this advanced programming concept right now through interactive
lessons in JavaScript.
http://nathansjslessons.appspot.com/lesson?id=1000


+07: MISCELLANEOUS.

The Process and the Point
By Joshua Porter.
"...we should remember not to confuse the two. The process is
valuable…it's a framework for deciding what to do next…and we need
that…but it's merely a means to an end. Don't let process details
distract you from solving your problem in any way possible. The
Process is important…but it's not the Point."
http://bokardo.com/p/1850

Utilizing The Power Of Recycling In Web Design
By Paul Boag.
"...We will look at how we can recycle existing work (done by
ourselves or others) in order to be more efficient. By doing so, we
can finish projects more quickly and generate a better profit margin.
The great thing about recycling is that we can all do it, whether we
are a developer, designer or website owner. Let's begin our journey
with the masters of recycling: developers..."
http://www.smashingmagazine.com/2011/08/03/save-time-and-make-money-by-recycling/

The Web Platform - Interview with Chris Wilson, Developer Advocate Google
By Bill Cullifer.
"In this three minute event conclusion interview, I asked Chris to sum
up the benefits of attending Open Web Camp III. I also asked Chris to
share his thoughts and perspective on HTML5..."
http://webprofessionals.org/the-web-platform-%E2%80%93-interview-with-chris-wilson-developer-advocate-google/


+08: STANDARDS, GUIDELINES & PATTERNS.

HTML Structural Elements
By W3C Wiki.
"Now we've gotten to grips with the very basics of HTML, what is
contained inside the document <head>, and the different building
blocks you'll most commonly use to structure different items of
content inside the <body>, at this point in the Web Standards
Curriculum we will start to look at the overall structure of the HTML
content, and what distinct sections the page contains..."
http://www.w3.org/wiki/HTML_structural_elements#Enter_HTML5_structural_elements

The Details and Summary Elements
By Tom Leadbetter.
"How often have you had to write some JavaScript to create an
interactive widget that shows and hides some content? You might' ve
even downloaded a whole JavaScript library to achieve such an effect.
Well, it' s time to rejoice! HTML5 provides a way to create this
toggle feature with just a few lines of HTML and no JavaScript in
sight (depending on the browser, of course, but we'll come to that
later). And so we introduce to you the <details> element..."
http://html5doctor.com/the-details-and-summary-elements/

Return of the Loading Bar - Are CSS3 and HTML5 the New Flash?
By Joshua Johnson.
"Today we' re going to discuss a little bit about how and why Flash
came to be regarded in a negative light and how we can avoid running
down the same path with the modern technologies replacing it..."
http://designshack.co.uk/articles/css/return-of-the-loading-bar-are-css3-and-html5-the-new-flash/

Are CSS3 and HTML5 the "New Flash"?
By Craig Grannell.
"Devs debate whether industry is failing to learn from past mistakes..."
http://www.netmagazine.com/node/1301

HTML5, Hollow Demos and Forgetting the Basics
By Bruce Lawson.
"My heart sinks when I see the latest flurry of tweets about some new
HTML5 demo. As someone else said, it's usually a warning that you're
about to visit a browser-freezing lump of JavaScript without a
hyperlink in sight..."
http://www.brucelawson.co.uk/2011/html5-and-hollow-demos/

HTML5 Multimedia - A Review of Audio Codecs and File Formats
By Ian Devlin.
"Different audio codecs can be used to output different audio file
formats, a number of which are supported by HTML5. Ian Devlin reviews
them in this excerpt from his book, HTML5 Multimedia: Develop and
Design..."
http://www.peachpit.com/articles/article.aspx?p=1738562


+09: TOOLS.

responsivepx
By Remy Sharp.
"Enter the url to your site - local or online: both work - and use the
controls to adjust the width and height of your viewport to find exact
breakpoint widths in pixels. Then use that information in your media
queries to create a responsive design..."
http://responsivepx.com/


+10: USABILITY.

Another 10 UX Mistakes to Avoid
By Neil Turner.
"In a previous article I listed 10 common UX mistakes to avoid and
outlined how to go about side stepping each one. Well like a modern
day Hollywood franchise I'm back with 10 more because all good things
need a sequel and it seemed a shame for so many important UX mistakes
to be left on the proverbial cutting room floor..."
http://www.uxforthemasses.com/more-ux-mistakes/

The Challenge of Targeting Late Adopters
By Demetrius Madrigal and Bryan McClain.
"...By understanding the challenges of targeting those users who are
late adopters, we can start exploring strategies that can help us to
be successful with this demographic..."
http://www.uxmatters.com/mt/archives/2011/08/the-challenge-of-targeting-late-adopters.php

Designing Fun
By Debra Levin Gelman.
"'Fun' is always going to have an emotional component. No matter how
closely you follow the above process, someone is going to
disagree-with your definition, ranking, tasks, or design decisions.
However, by thinking critically about what it means for a site to be
'fun,' and by taking the time to define, evaluate, task and test, you'
ll be able to move away from 'I' ll know it when I see it' to 'I' m
confident you' ll design something I think is fun.'"
http://www.alistapart.com/articles/designing-fun/

Beginner' s Guide to Responsive Web Design
By Nick Pettit.
"Whether you' re a beginner or a seasoned web professional, creating
responsive designs can be confusing at first, mostly because of the
radical change in thinking that' s required. As time goes on,
responsive web design is drifting away from the pool of passing fads
and rapidly entering the realm of standard practice. In fact, the
magnitude of this paradigm shift feels as fundamental as the
transition from table based layouts to CSS. Simply put, this is a very
different way of designing websites and it represents the future. Over
the past year, responsive design has become quite the hot topic in the
web design community. If all the buzz has you feeling like Rip Van
Winkle waking up in the 21st century, this summary will help you catch
up with the times..."
http://thinkvitamin.com/design/beginners-guide-to-responsive-web-design/

Responsive Web Design How-To, Useful Frameworks, Showcase
By Lisa Walker.
"Responsive web design is about designing and developing a website in
the way that it is compatible with any device that can be used to
browse the Internet. This means that a website should better have a
mobile version. And a curious thing about mobile devices is that they
are all so mush different! Diversity is good because it makes the
world bright, but it can eventually drive the designer mad in his
effort to make and tune a layout for every model of a variety of
brands. This is where responsive web design comes in handy. The
necessity for flexibility in the layouts is even more imperative now
so that we can better accommodate the great number of browsing
situations currently in place..."
http://www.webdesign.org/web-design-basics/design-principles/responsive-web-design-how-to-useful-frameworks-showcase.20413.html

Designing For a Responsive Web
By Max Luzuriaga.
"...Our old fixed-width layout approach is out of the question now. So
what do we do? The answer, my dear reader, lies with Responsive Web
Design..."
http://webdesign.tutsplus.com/articles/design-theory/designing-for-a-responsive-web/

Create Fluid Width Videos
By Chris Coyier.
"CSS-Tricks' Chris Coyier talks us through different CSS and jQuery
solutions to create responsive and fluid width videos that maintain
aspect ratio and work with all major video hosts, including YouTube
and Vimeo..."
http://www.netmagazine.com/tutorials/create-fluid-width-videos


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