[webdev] Web Design Update: November 11, 2011

[Laura Carlson]

+++ WEB DESIGN UPDATE.
- Volume 10, Issue 20, November 11, 2011.

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

++ISSUE 20 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: EVENTS.
05: INFORMATION ARCHITECTURE.
06: JAVASCRIPT.
07: NAVIGATION.
08: PHP.
09: STANDARDS, GUIDELINES & PATTERNS.
10: TYPOGRAPHY.
11: USABILITY.


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

[Contents ends.]


++ SECTION ONE: New references.

+01: ACCESSIBILITY.

Abbreviations - Accessibility for Web Writers, Part 14
By Dey Alexander.
"We use abbreviations because they save time when talking and writing.
However, some abbreviations are not widely used and may confuse users
if you include them in your web content..."
http://www.4syllables.com.au/2011/11/accessibility-web-writers-part-14/

Accessibility for Information Architects
By Henny Swan.
"Each member of a team plays a role in building a website or web app
that is accessible ranging from the project manager, designer,
developer, tester and Information Architect (IA). This article looks
at a few key aspects of accessibility that if anticipated at IA stage
go a long way to ensuring usable websites for people with access needs
and safeguarding against costly fixes post launch...."
http://www.spotlessinteractive.com/articles/accessibility/accessibility-for-information-architects.php

Semantic Automation
By Jared Smith.
"Semantic automation is when user agents, such as browsers and screen
readers, create meaning and relationships where the presented meaning
and relationships are missing, ambiguous, or incorrect. In short, it's
applying algorithms to try and fix things that are probably broken.
It's computers guessing for good..."
http://webaim.org/blog/semantic-automation/

A Common Accessibility Platform
By Vlad Alexander.
"...There needs to be more of a balance in favor of resources directed
towards accessibility, and it is up to us in the community of web
professionals to champion web accessibility to browser vendors. As web
professionals it is up to us to help browser vendors prioritize
features and make the kind of inclusive web we can be proud of."
http://a11ybugs.org/article.php?id=1

Struggling with WCAG 2.0 Accessibility Guidelines for Content Authors
By Rachel McAlpine.
"...as you probably know, WCAG 2.0 has tried so hard to future-proof
the guidelines that they are frequently incomprehensible. Slightly
weird terms are used that are intended to cover all possible
technologies. While this goal may be laudable, the resulting generic
terms are not plain language. For example, maybe HTML will be dead in
10 years time, so WCAG 2.0 tries not to mention HTML or web pages..."
http://contented.com/contented/2011/struggling-with-wcag-2-0-accessibility-guidelines-for-content-authors/

Not The Blog Post I Was Going To Write Today
By John Foliot.
"The user-pain inflicted by CAPTCHAs on persons with disabilities are
well known and documented..."
http://john.foliot.ca/not-the-blog-post-i-was-going-to-write-today/


+02: CASCADING STYLE SHEETS.

Fixed Positioning in Mobile Browsers
By Brad Frost.
"...Ultimately, I think this little exercise is another example of why
we need to consider diversity in our designs. Removing comfortable
assumptions, even for something seemingly as harmless as a fixed
header, can help us design better, more adaptive experiences. I
believe that we can create great, innovative mobile experiences for
best-of-breed devices without giving the middle finger to everything
else."
http://bradfrostweb.com/blog/mobile/fixed-position/

A Possible Future for CSS Selectors
By Scott Gilbertson.
"CSS has some great new tools like pseudo classes and pseudo elements
for selecting things just by where they are in the DOM. For example,
:first-child can select the first descendant of an element or
::first-letter can select the first letter of a sentence..."
http://www.webmonkey.com/2011/11/the-possible-future-of-css-selectors/

CSS Transitions - A Simple Way To Delight Your Visitors
By Steven Bradley.
"CSS3 transitions are an easy way to begin creating that delightful
experience..."
http://www.vanseodesign.com/css/transitions/

CSS Vendor Prefixes, Again...
By Daniel Glazman.
"We still have a major problem in CSS wrt CSS vendor prefixes... We
have -moz-*, -webkit-*, -ms-*, -o-* and more all over the place and we
all agree that what we have is suboptimal. During W3C Plenary Meeting
this week, we discussed CSS Gradients..."
http://www.glazman.org/weblog/dotclear/index.php?post/2011/11/05/CSS-vendor-prefixes-again

CSS3 Secrets - 10 Things You Might Not Know About CSS3 (Video)
By Lea Verou.
Lea Verou Fronteers 2011 presentation.
http://fronteers.nl/congres/2011/sessions/css3-secrets-lea-verou

The Future Of CSS - Embracing The Machine
By Inayaili de Leon.
"Designers hold CSS close to their hearts. It's just code, but it is
also what makes our carefully crafted designs come to life. Thoughtful
CSS is CSS that respects our designs, that is handcrafted with
precision. The common conception among Web designers is that a good
style sheet is created by hand, each curly bracket meticulously
placed, each vendor prefix typed in manually..."
http://coding.smashingmagazine.com/2011/11/07/the-future-of-css-embracing-the-machine/

An Inside View of the CSS Working Group at W3C
By Elika Etemad.
"The CSS Working Group is tasked with maintaining the existing CSS
standards and creating new ones. There have been many new people
joining our group lately, in addition to more non-members interacting
with us. Since it usually takes someone a year or so of participation
to figure out how the CSS WG works, I thought I'd take a moment (well,
a week; I write slowly) to explain everything."
http://fantasai.inkedblade.net/weblog/2011/inside-csswg/


+03: DREAMWEAVER.

What's New in Dreamweaver
By Scott Fegette.
"...Dreamweaver CS5.5 will help you use all the revolutionary new
potential of HTML5, CSS3, and jQuery to deliver multiscreen-aware
projects in a variety of new ways and with minimal impact to your
evolutionary workflows..."
http://www.adobe.com/devnet/dreamweaver/articles/whats-new-dwcs55.html

How Media Queries Can Make Designing for Mobile Devices Easier  (Video)
By Greg Rewis.
Greg explains features in Adobe Creative Suite 5.5 Web Premium.
http://tv.adobe.com/watch/cs-55-web-premium-feature-tour-/how-media-queries-can-make-designing-for-mobile-devices-and-different-screens-easier/

Introduction to Media Queries, Part 1
By David Powers.
"The rapid spread of mobile devices has turned the world of web design
upside down. Users no longer view web content only on traditional
desktop systems, but are increasingly using smartphones, tablets, and
other devices with a wide range of dimensions. The challenge for web
designers is to ensure that their websites look good not only on a big
screen, but also on a tiny phone and everything in between..."
http://www.adobe.com/devnet/dreamweaver/articles/introducing-media-queries.html

Introduction to Media Queries, Part 2
By David Powers.
"In this second part of this two-part tutorial series, you'll put into
practice the theory you learned in Part 1, Using media queries, to
deliver different styles to mobile phones, tablets, and desktop
computers..."
http://www.adobe.com/devnet/dreamweaver/articles/introducing-media-queries-pt2.html

Mastering Media Queries (Video)
By David Powers.
"Take a deep dive into using CSS3 media queries to create websites
that look good and work well on desktops, tablets, and mobile phones
regardless of screen size. In this session, bestselling author and
trainer David Powers explores how to optimize style rules for each
type of device depending on its features, such as width, height,
aspect ratio, and orientation. You'll also learn how to cope with
older browsers that don't support media queries and how to avoid
wasting mobile users' valuable data allowance by forcing them to
download assets intended only for larger screen sizes."
http://tv.adobe.com/watch/max-2011-design/mastering-media-queries/

CSS3 Media Queries with Dreamweaver (Video)
By Ryan Stewart.
"Developer Evangelist Ryan Stewart explains how the functionality of
media queries in Dreamweaver allows designers and developers to easily
create custom web experiences across different devices..."
http://tv.adobe.com/watch/adc-presents/css3-media-queries-with-dreamweaver/


+04: EVENTS.

How to Build an Accessible Web Application
November 15, 2011.
Washington, District of Columbia, U.S.A.
http://accessibilitydcnov11.eventbrite.com/

W3Conf: Practical Standards for Web Professionals
November 15-16, 2011.
Redmond, Washington, U.S.A.
http://www.w3.org/conf/
Videos of the presentations will be streamed live.
http://www.w3.org/conf/live.html


+05: FLASH.

What the Death of Mobile Flash Means for the Web
By Scott Gilbertson.
"Adobe Software has let slip that it plans to abandon its Flash Player
for mobile web browsers. Instead, the company will refocus its mobile
efforts on web standards like HTML5, along with tools like Adobe AIR,
which allows developers to convert Flash content into native mobile
applications..."
http://www.webmonkey.com/2011/11/what-the-death-of-mobile-flash-means-for-the-web/

Flash Isn't Going Away, Except from Your Mobile
By Adrian A. Roselli.
"You may have heard some rumors that Flash is going away. You may read
it as vindication for Steve Jobs. You may have decided web development
will now change. You may be under the impression that HTML5 can do all
the things Flash can. You can be excused when you read much of they
hype, including such link-baiting headlines as Jobs Was Right: Adobe
Abandons Mobile Flash Development, Report Says, clearly intended to
draw Apple fanboys..."
http://blog.adrianroselli.com/2011/11/flash-isnt-going-away-except-from-your.html

Flash Splash Pages
By Paul Boag.
"Jared really does have the most amazing way with words: 'When we have
clients who are thinking about Flash splash pages, we tell them to go
to their local supermarket and bring a mime with them. Have the mime
stand in front of the supermarket, and, as each customer tries to
enter, do a little show that lasts two minutes, welcoming them to the
supermarket and trying to explain the bread is on aisle six and milk
is on sale today. Then stand back and count how many people watch the
mime, how many people get past the mime as quickly as possible, and
how many people punch the mime out. That should give you a good idea
as to how well their splash page will be received'."
http://boagworld.com/tumblog/flash-splash-pages/


+06: JAVASCRIPT.

JavaScript-Created Markup Also Needs to be Semantic and Accessible
By Roger Johansson.
"Back in the day you used to be able to view source on a web page to
see the markup used to create it. These days, on many sites, a large
portion of the markup is not visible when you view source because it
is inserted by JavaScript functions..."
http://www.456bereastreet.com/archive/201111/javascript-created_markup_also_needs_to_be_semantic_and_accessible/

Terse JavaScript 101 (Part 2)
By James Padolsey.
"Some developers don't like the idea of using a language's more
idiosyncratic features because it does, potentially, make your code
less readable in the eyes of those who haven't learned the language
properly. I think it's still up for debate. While you're pondering
that, part II awaits..."
http://james.padolsey.com/javascript/terse-javascript-101-part-2/

Exploring JavaScript's Logical OR Operator
By Addy Osmani & Andree Hansson.
"In JavaScript, logical operators are used for boolean logic where a
boolean value may be returned depending on the outcome of an
expression. With the || (OR) operator, since values don't need to be
explicitly true or false (they can be truthy or falsy), the operator
can return non-boolean results when evaluated..."
http://addyosmani.com/blog/exploring-javascripts-logical-or-operator/


+07: NAVIGATION.

The Vital Importance of the First Click
By Gerry McGovern.
"If customers get the first click right they have twice as much of a
chance of completing their task than if they get it wrong."
http://www.gerrymcgovern.com/nt/2011/nt-2011-11-07-Getting-right.htm

One Thing I Don't Like About Drop-Down Menus
By Louis Lazaris.
"I don't mind drop-down menus. They give designers and information
architects options for using screen space wisely. But I think many
sites do themselves a disfavour by using them in an inconsistent
manner.
http://www.impressivewebs.com/drop-down-menu-pet-peeve/


+08: PHP.

Error Handling in PHP
By Sneha Heda.
"Errors are the most common event a developer faces when programming.
Errors can be categorized as syntactical, run-time, or logical:
missing the semicolon at the end of a statement is an example of a
syntax error; trying to connect to a database when the server is down
is an example of a run-time error; providing incorrect data to a
variable is an example of a logic error. To help reduce the number of
errors in your code, and to mitigate their effects, proper error
handling is essential in your web application. This article is a crash
course in PHP error handling."
http://phpmaster.com/error-handling-in-php/


+09: STANDARDS, GUIDELINES & PATTERNS.

Standards, Innovation, Flash, Ownership and All That
By John Allsopp.
"It's often argued (well, asserted might be a better way of putting
it) that standards are an anathema to innovation, or at the very least
a significant impediment to it..."
http://www.webdirections.org/blog/standards-innovation-flash-ownership-and-all-that/

HTML WG Update
By Sam Ruby, Paul Cotton, and Maciej Stachowiak.
The HTML Chair November 3, 2011 TPAC presenation.
http://www.w3.org/2011/Talks/TPAC/HTML5/

HTML5, So What? (Video)
By Pei Riesling.
"After a few months of waiting, we can finally hear some insights of
HTML5 from Bruce Lawson and Zi Bin Cheah at Opear Tech Break! How does
HTML5 ensures interoperability in different browsers? How is the
future of native apps vs web apps? What else cool stuff can HTML5 do?
Check out this Opera Tech Break episode!"
http://my.opera.com/techbreak/blog/2011/11/04/html5-so-what

The <time> Fiasco
By Daniel Glazman.
"And all rejoiced because <time> is back in HTML5... But one thing has
to be said: <time> is back not because it was a bad technical decision
to remove it but because the HTML WG decision policy and process were
not formally observed. In other terms, it's a loophole in the original
action of removing <time> that allowed it back. Good catch and well
done Paul (sincerely), but everyone has to understand it does not say
<time> will be back forever..."
http://www.glazman.org/weblog/dotclear/index.php?post/2011/11/05/The-time-fiasco

W3C Adds Time Element Back to HTML5
By Scott Gilbertson.
"If HTML5 editor Ian Hickson's recent decision to remove the <time>
element from the HTML5 specification left you scratching your head,
you're not alone. The W3C, the group that oversees HTML5, feels the
same way and have stepped in to override Hickson's earlier decision to
remove the widely used element from the HTML5 spec..."
http://www.webmonkey.com/2011/11/w3c-adds-time-element-back-to-html5/

This Week in HTML5
By Shelley Powers.
"This week in HTML5...in verse..."
http://burningbird.net/node/168


+10: TYPOGRAPHY.

Type Study - Sizing the Legible Letter
By Ethan Marcotte.
Type study is an ongoing series of guest posts about typography on the
web. In this article, Ethan Marcotte dishes up advice on font size..."
http://blog.typekit.com/2011/11/09/type-study-sizing-the-legible-letter/


+11: USABILITY.

Mobile UX Sharpens Usability Guidelines
By Jakob Nielsen.
"Many guidelines are similar for mobile and desktop design, but their
mobile interpretation is much more unforgiving."
http://www.useit.com/alertbox/mobile-ux-guidelines.html

Responsive IMGs - Part 1
By Jason Grigsby.
"In my post 'Where are the Mobile First Responsive Web Designs', I
noted that one of the first things I look for when trying to determine
whether or not a responsive web design is 'mobile first' is whether or
not it has a strategy for handling the IMG tag."
http://www.cloudfour.com/responsive-imgs/

Responsive IMGs Part 2 - In-depth Look at Techniques
By Jason Grigsby.
"...When I started working on this project two months ago, I thought I
would get to the end and be able to say, 'Here are the three
approaches that work best. Go download them and figure out how to
integrate them into your systems.' Oh naivety..."
http://www.cloudfour.com/responsive-imgs-part-2/

Responsive IMGs Part 3 - Future of the IMG Tag
By Jason Grigsby.
"One of common conclusion from the commenters is that our current IMG
tag isn't going to cut it. That we need some sort of replacement that
is future friendly. This isn't the first time the idea of expanding or
replacing the IMG tag has come up. I promised to collect some of these
proposals so we can discuss their relative merits..."
http://www.cloudfour.com/responsive-imgs-part-3-future-of-the-img-tag/

Responsible Responsive Images
By Jeremy Keith.
"...The solution seems clear: we need to standardise on browser
download behaviour …which is exactly what the HTML standard is doing
(along with standardising error handling)..."
http://adactio.com/journal/4997/

An Extensive Guide To Web Form Usability
By Justin Mifsud.
"Contrary to what you may read, peppering your form with nice buttons,
color and typography and plenty of jQuery plugins will not make it
usable. Indeed, in doing so, you would be addressing (in an
unstructured way) only one third of what constitutes form
usability..."
http://uxdesign.smashingmagazine.com/2011/11/08/extensive-guide-web-form-usability/


[Section one ends.]


++ SECTION TWO:

+12: 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.]