[webdev] Web Design Update: July 15, 2011

[Laura Carlson]

+++ WEB DESIGN UPDATE.
- Volume 10, Issue 03, July 15, 2011.

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

++ISSUE 03 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: BOOKS.
03: CASCADING STYLE SHEETS.
04: DREAMWEAVER.
05: EVALUATION & TESTING.
06: EVENTS.
07: INFORMATION ARCHITECTURE.
08: MISCELLANEOUS.
09: NAVIGATION.
10: PHP.
11: STANDARDS, GUIDELINES & PATTERNS.
12: TOOLS.
13: TYPOGRAPHY.
14: USABILITY.

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

[Contents ends.]


++ SECTION ONE: New references.

+01: ACCESSIBILITY.

Say What? Google Works to Improve YouTube Auto-Captions for the Deaf
By Larry Greenemeier.
"Google continues to develop speech-recognition software that can
automatically generate captions for all videos posted to YouTube, but
challenges remain..."
http://www.scientificamerican.com/article.cfm?id=google-youtube-auto-caption

YouTube Caption Tools Part 2
By Terrill Thompson.
"This week I'm at the AHEAD conference, and Sean Keegan, Jayme
Johnson, Ken Petri and I have teamed up for four presentations on
video accessibility, including an all-day pre-conference session. I
also gave a national webinar on Tuesday, live from my hotel room, on
this same topic..."
http://terrillthompson.blogspot.com/2011/07/youtube-caption-tools-part-2.html

Top 5 Web Accessibility Pitfalls
By Scott Hollier.
Followers of the W3C's Web Content Accessibility Guidelines (WCAG)
working group and Web Accessibility Initiative (WAI) Interest Group
would have seen a number of emails recently on software packages that
claim to be all-in-one web accessibility solutions.
http://www.mediaaccess.org.au/online-media/w3c-column/top-5-web-accessibility-pitfalls

How to Author a Super Accessible Website
By Ranjith Kumar.
"...As a web designer we create experiences for the users and put them
in the front seat, with our decisions relating to the interface.
Equally important as following best practices and standards is to
design UI for systems that are accessible to all types of users -
Accessible Design, is what we should be aiming for..."
http://www.1stwebdesigner.com/design/author-a-super-accessible-website/

Accessibility of Internal Apps and Intranets
By Bruce Lawson.
"...Saying accessibility doesn't matter on internal-facing pages or
intranets is simply a way of saying that your company has a
discriminatory recruitment policy. You're saying that your company
doesn't and won't have disabled workers..."
http://www.brucelawson.co.uk/2011/accessibility-of-internal-apps-and-intranets/

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. Well meaning people cite accommodations for people
who are blind as examples of things that work for all people who are
blind or visually impaired. Even experts do this too. This includes
many advocacy groups, national, regional and local governments,
institutions and even the W3C WCAG Working Group. These groups
recognize and address the needs of blindness and non-visual readers,
but they frequently exclude the most critical needs of visual readers
with low vision from standards and policies..."
http://blog.knowbility.org/?p=346

Form Mark-Up - The Holy Grail of Front-End Development
By Niels Matthijs.
Sure I've talked about forms before, but never about the real thing. I
wrote a piece on tabular forms and a quick css post on styling equal
height forms, but the traditional, full-length, expanded form I've
tried to avoid so far. The reason is pretty straight-forward: I've
never really felt at ease with the code I've been using. That's not to
say that the code I will deliver in this article is absolutely
perfect, but at least it shows some interesting connections to other
popular web components and it serves as a solid starting point for
future improvements.
http://www.onderhond.com/blog/work/form-html-markup-conceptual

The Difference Between Web Site Usability and Accessibility
By Justin Mifsud.
"In various instances during my research I come across articles and
recommendations that tend to confuse usability with accessibility. The
objective of this post is to establish the link between the two terms
while outlining their differences. In order to do so, it is important
to first understand what is web site usability and web site
accessibility..."
http://usabilitygeek.com/the-difference-between-web-site-usability-and-accessibility/

Writing for Everyone
By Char James-Tanny.
"...making your writing more accessible for those with disabilities
also makes it easier for everyone else to read..."
http://blogaccessibility.com/writing-for-everyone/


+02: BOOKS.

Marcotte, Ethan. Responsive Web Design, A Book Apart, 2011.


+03: CASCADING STYLE SHEETS.

Adaptive and Mobile Design with CSS3 Media Queries
By Nick La.
"Screen resolution nowsaday ranges from 320px (iPhone) to 2560px
(large monitor) or even higher. Users no longer just browse the web
with desktop computers. Users now use mobile phones, small notebooks,
tablet devices such as iPad or Playbook to access the web. So the
traditional fixed width design doesn't work any more. Web design needs
to be adaptive. The layout needs to be automatically adjusted to fit
all display resolution and devices. This tutorial will show you how to
create a cross-browser adaptive design with HTML5 & CSS3 media
queries."
http://webdesignerwall.com/tutorials/adaptive-mobile-design-with-css3-media-queries

How To Use Media Queries For Device Targeting
By Steven Bradley.
"Media queries are a way to serve different css rules to different
devices and device characteristics. They're the final piece in
allowing us to create designs that are truly responsive to our
audience and how our visitors choose to view our sites."
http://www.vanseodesign.com/css/media-queries/

Respond to Different Devices With CSS3 Media Queries
Emily P. Lewis.
"...The goal isn't to make a site look the same across all viewing
experiences, nor is it to target a specific device (like an 'iPhone
site'). Instead, responsive design uses media queries to detect the
client resolution and adjust to fill the display accordingly..."
http://msdn.microsoft.com/en-us/scriptjunkie/gg619395.aspx

Using the Viewport Meta Tag to Control Layout on Mobile Browsers
By Mozilla.
"A typical mobile-optimized site contains something like the following..."
https://developer.mozilla.org/en/Mobile/Viewport_meta_tag#Viewport_basics

CSS Transitions and Media Queries
By Elliot Jay Stocks.
"While coding up the site for our Insites Tour, I happened across an
accidental feature: a smooth transition on growing / shrinking type
and image sizes when I resized the browser window. This isn't
particularly groundbreaking and has probably been put into use by
others, but as I personally haven't seen it used elsewhere on the web,
I thought it'd be good to make a note of this happy accident..."
http://elliotjaystocks.com/blog/css-transitions-media-queries/

Debugging CSS Media Queries
By Johan Brook.
"In Responsive Web Design we're working with different states, widths,
and viewport sizes. Fluidity and adaptive behavior is a hot subject
nowadays, and it's perfectly justified when looking at today's mobile
browser landscape. We achieve this with CSS's Media Queries. But
sometimes it can be messy - I'm gonna share a quick tip for indicating
(with pure CSS) which media query that has actually kicked in..."
http://johanbrook.com/design/css/debugging-css-media-queries/


+04: DREAMWEAVER.

Customizable Starter Design for Multiscreen Development
By Chris Converse.
"Read the article to learn about key advantages of using media queries
and the features of this template, preview and download the template
and related files and assets, and watch a short video to get an
overview of the template's features..."
http://www.adobe.com/devnet/dreamweaver/articles/dw-template-media-queries.html

The Secret of Building a Table with Dreamweaver
By Virginia DeBolt.
"...If you want to built a table for your web page that does use best
practice rules and will be responsive to every potential situation,
there are a lot of things in Dreamweaver that you should not do. I'm
going to show you what not to do, explain why, and give you a best
practice alternative..."
http://www.webteacher.ws/2011/07/13/the-secret-of-building-a-table-with-dreamweaver/


+05: EVALUATION & TESTING.

12 Website Usability Testing Myths
By Jacob Creech.
"...here are a number of different myths floating about saying that
improving usability takes too long, costs too much or doesn't really
do anything useful to these sites and services. As someone who works
on a website usability testing tool I hear these myths far too often,
and I'd like to dispell them permanently..."
http://www.intuitionhq.com/blog/2011/07/website-usability-testing-myths/


+06: EVENTS.

Accessibility Camp Toronto
September 24, 2011.
Toronto, Canada
http://www.accessibilitycampto.org/

Accessibility Summit
September 27, 2011.
Online
http://environmentsforhumans.com/2011/accessibility-summit/

Future of Web Design
November 7-9, 2011.
New York, New York, U.S.A.
http://futureofwebdesign.com/new-york-2011/

World Usability Day
November 10, 2011.
Everywhere
http://www.worldusabilityday.org/

Accessing Higher Ground
November 14-18, 2011.
Westminster, Colorado, U.S.A.
http://www.colorado.edu/ATconference/

Ottawa Accessibility Unconference
December 2, 2011.
Ottawa, Canada
http://a11yyow.ca/


+07: INFORMATION ARCHITECTURE.

Helping Users Find Content and Take Action
By Paul Boag.
"A successful website should enable users to find the content they
require as quickly as possible, while encouraging them to complete
your desired course of action. In this post I examine how to achieve
these demanding objectives."
http://boagworld.com/season/2/episode/s2e4/


+08: MISCELLANEOUS.

Terrill Thompson Interview - Web Accessibility for All
By Dian Schaffhauser.
"...Campus Technology talked with Thompson about the importance of
accessibility for all campus constituents and common pitfalls to avoid
when creating accessible online sites..."
http://campustechnology.com/articles/2011/07/07/web-accessibility-for-all.aspx


+09: NAVIGATION.

HTML5 Accessibility Chops: ARIA Landmark Support
By Steve Faulkner.
"The ARIA landmark roles can be used in HTML5 to markup regions of a
page. Landmark roles add a new means to navigate page content for
users of supporting assistive technology. They can be used on
semantically neutral elements such as the div element or they can be
added, to HTML5 elements that have  implied semantics such as header
or footer, to fill in current gaps in accessibility support..."
http://www.paciellogroup.com/blog/2011/07/html5-accessibility-chops-aria-landmark-support/

15 Usability Guidelines for Designing Web Site Links
By Justin Mifsud.
"...In the list below, I have compiled what I think are the 15 most
important guidelines for making your web site links more usable..."
http://usabilitygeek.com/15-usability-guidelines-for-designing-web-site-links/


+10: PHP.

My Favorite Programming Mistakes
By Paul Tero.
"Over my programming career, I have made a lot of mistakes in several
different languages. In fact, if I write 10 or more lines of code and
it works the first time, I'll get a bit suspicious and test it more
rigorously than usual. I would expect to find a syntax error or a bad
array reference or a misspelled variable or something..."
http://coding.smashingmagazine.com/2011/07/07/my-favorite-programming-mistakes/


+11: STANDARDS, GUIDELINES & PATTERNS.

Document Outlines (HTML5)
By Mike Robinson.
"Document outlines have changed a bit in HTML5. For a start, they're
actually in the spec! The HTML5 Doctor is here to explain what
document outlines are, how to make good ones, and why you should
care..."
http://html5doctor.com/document-outlines/


+12: TOOLS.

css3-mediaqueries-js
By Wouter van der Graaf.
"A JavaScript library to make IE 5+, Firefox 1+ and Safari 2
transparently parse, test and apply CSS3 Media Queries. Firefox 3.5+,
Opera 7+, Safari 3+ and Chrome already offer native support"
http://code.google.com/p/css3-mediaqueries-js/


+13: TYPOGRAPHY.

Typographers: the Original UX Designers
By Kim Cullen.
"...Recently something inspired to me to crack open the bible of print
typography, 'The Elements of Typographic Style,' by Robert Bringhurst.
As a student this dense book, first published almost 20 years ago, was
the bane of my existence. But revisiting it I was struck by how the
rules of good typography reflect those of effective UX design.  Below
are a couple quotes that resonated with both the type and UX nerd in
me..."
http://adaptivepath.com/ideas/typographers-the-original-ux-designers1


+14: USABILITY.

The Fold Exists But Does it Matter?
By Emily Smith.
"Digging around the web will unearth a heavy bias against the fold..."
http://designfestival.com/the-fold-exists-but-does-it-matter/

The Power of the Written Word
By Gerry McGovern.
"The Web reflects the return to dominance of the written word."
http://www.gerrymcgovern.com/nt/2011/nt-2011-07-11-Power-words.htm

New Ideas in Web Form Design
By Luke Wroblewski.
"One of the nice things about working on your own product is that you
can try new ideas at your own discretion. So over the past few weeks,
we've been exploring new interactions for common Web forms on Bagcheck
and I've been writing articles about the results."
http://www.lukew.com/ff/entry.asp?1367

Fixing Forms is Easy...No?
By Jessica Enders.
"Learning best practices is a crucial part of being able to design
good forms, but it's not all you need. As this article will describe,
sometimes the biggest challenges are less tangible and require
'softer'skills."
http://formulate.com.au/articles/fixing-forms-easy/

The Mobile Web is Not Going Away
By Gary Barber.
"...You know what is becoming a real pain point. Non responsive
designed web sites. The ones that don't scale well on mobile devices,
sadly they are still the norm..."
http://manwithnoblog.com/2011/07/10/the-mobile-web-is-not-going-away/

Developing a Progressive Mobile Strategy
By Dave Olsen.
Dave Olsen's slides from HEWEB Rochester.
http://www.slideshare.net/dmolsenwvu/developing-a-progressive-mobile-strategy

Responsive Web Design - A Quick Guide and Creative Examples
By Waheed Akhtar.
"The devices and browsers are increasing day by day that need to work
with your website. It's not enough to just have a mobile version and a
browser version and we really can't create each version for iPad,
iPhone, Android mobiles, tablets, television, netbooks, desktops with
high and low resolution screens. Our website design should not only be
more flexible, but more adaptive to the media that renders them.
Designers should create designs that adjust to the needs of each
browswer, regardless of the device. The time is to think how we can
make web design process which work for decade and it's possible only
with Responsive Web Design. Lets take a look in key feature element of
Responsive Web Design..."
http://www.boostinspiration.com/web-design/responsive-web-design-quick-guide-creative-examples/

Developing SEO Friendly Websites with Responsive Web Design
By Dimitris Zotos.
"Responsive web design is a different approach of web design as we
know it today. What you actually can achieve is to create a flexible
layout that dynamically fits into the screen of every device at any
resolution, from desktop to laptop and from browser supported
smartphones to retina displays and so on. In fact, this can be done
with an efficient use of media queries. The benefit here is obvious;
this technique enables web developers to create one version of the
website that fits all devices. Of course creating such flexible
content requires more effort from both web designers and
developers..."
http://www.webseoanalytics.com/blog/developing-seo-friendly-websites-with-responsive-web-design/

The Big Web Show - Responsive Web Design
By Jeffrey Zeldman.
"Dan and Jeffrey talk with guest Ethan Marcotte. Topics include
designing and coding for the likes of the Sundance Film Festival and
New York Magazine, and the joys of responsive web design, working
remotely, and more..."
http://5by5.tv/bigwebshow/9


[Section one ends.]


++ SECTION TWO:

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