+++ 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@d.umn.edu 


[Issue ends.]