+++ WEB DESIGN UPDATE.
- Volume 10, Issue 04, July 21, 2011.

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

++ISSUE 04 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: FLASH.
07: JAVASCRIPT.
08: MISCELLANEOUS.
09: NAVIGATION.
10: STANDARDS, GUIDELINES & PATTERNS.
11: TOOLS.
12: TYPOGRAPHY.
13: USABILITY.


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

[Contents ends.]


++ SECTION ONE: New references.

+01: ACCESSIBILITY.

Video Captioning Essentials
By Commission of Deaf, DeafBlind and Hard of Hearing Minnesotans.
"...a self-study course designed to help managers master the basic tools needed to deliver captioned web videos that are useful, cost-effective, and satisfy legal and regulatory requirements..."
http://www.mncdhh.org/captioningessentials/

Internet Video Closed Captioning Rules Due in January
By Deborah D. McAdams.
"Internet video closed-captioning rules are due to be delivered in January..."
http://deafnewstoday.blogspot.com/2011/07/new-captioning-rules.html

Page Titles: Accessibility for Web Writers, Part 8
By Dey Alexander.
"Descriptive page titles help users find content, decide if it's relevant, orient themselves when they have multiple pages or tabs open, and re-find content using browser functions..."
http://www.4syllables.com.au/2011/07/accessibility-for-web-writers-part-8/

Cross-Device Website Accessibility
By Colin Beckingham.
"Users are increasingly reading complex websites on computers with both large and small screens. Different devices offer various strengths and weaknesses when it comes to communicating with customers. In a context of sales and marketing, this article offers concrete observations on helpful practices to leverage this new reality."
http://www.ibm.com/developerworks/web/library/wa-cross-deviceaccess/index.html

How Assistive Technology Works - Video Demonstrations
By The University of Dundee.
"Understanding how disabled people use the web is a very important step towards becoming aware about web accessibility..."
http://www.dundee.ac.uk/ics/services/web/accessibility/howassistivetechnologyworksvideodemonstratio/

DOJ Delays Web Accessibility Regulations
By The Law Office of Lainey Feingold.
"...The delay in official Justice Department regulations does not mean website owners and developers can or should delay in making websites accessible. Both the ADA and the laws of California and other states already require accessible websites. And the Web Content Accessibility Guidelines promulgated by the Web Accessibility Initiative are internationally accepted accessibility criteria for which significant guidance and resources are readily available. Federal and state law have long prohibited discrimination against people with disabilities, and in the 21st century, web accessibility is a key aspect of that non-discrimination mandate..."
http://lflegal.com/2011/07/web-delay/


+02: CASCADING STYLE SHEETS.

Responsive Web Design Using Compass - Part 2
By Lyssandro Reis.
"...In this experiment, we have a strong focus on the technical part of a responsive design. All I have done was to convert a non-responsive page, into a responsive one. What I have learnt from this experiment, goes beyond the fact that the page adjusts itself to the width of the browser; we need to consider also the context in which the user is in while reading our content, what are the singularities of the devices and make the effort to offer the best experience possible..."
http://surgeworks.com/blog/responsive-web-design-using-compass-pt2

CSS Attribute Selectors: How and Why You Should Be Using Them
By Joshua Johnson.
"Today we're going to learn about Attribute Selectors. What are they? How do I use them? What are the new CSS3 Attribute selectors? We'll answer these questions and more..."
http://designshack.co.uk/articles/css/css-attribute-selectors-how-and-why-you-should-be-using-them/

Learning To Use The :before And :after Pseudo-Elements In CSS
By Louis Lazaris.
"If you've been keeping tabs on various Web design blogs, you've probably noticed that the :before and :after pseudo-elements have been getting quite a bit of attention in the front-end development scene - and for good reason. In particular, the experiments of one blogger - namely, London-based developer Nicolas Gallagher - have given pseudo-elements quite a bit of exposure of late."
http://coding.smashingmagazine.com/2011/07/13/learning-to-use-the-before-and-after-pseudo-elements-in-css/

Little CSS Stuff Newcomers Get Confused About
By Chris Coyier.
'If your a pro, it's easy to forget the confusion you felt when you just started learning CSS. Just for fun, let's try and remember some of those little weird confusing moments. I'll start us out by listing some random ones I remember and have picked up on while helping others recently. Then you folks take it from there in the comments..."
http://css-tricks.com/13317-little-css-stuff-newcomers-get-confused-about/

CSS3 Radial Gradients
By John Allsopp.
"We recently took a detailed look at linear gradients in CSS3. If you've not read that, you might like to spend a few minutes doing so, as the concepts are very similar, and I don't spend quite as much time in this article on the fundamentals of gradients which I've already covered..."
http://www.webdirections.org/blog/css3-radial-gradients/

Big vs. Small: Challenges in Responsive Web Design
By Cameron Chapman.
"...designers should create designs that adapt to the needs of each browser, regardless of the device..."
http://www.webdesignerdepot.com/2011/05/big-vs-small-challenges-in-responsive-web-design/

Don't Use IDs in CSS Selectors?
By Oli Studholme.
"Recently I came across the post by Matt Wilcox called CSS Lint is harmful, ranting about the useful free tool CSS Lint. The 'Don't use IDs in selectors' suggestion seems to have offended Matt the most, but I was surprised that many commenters also mentioned this as being a reason to avoid CSS Lint. This surprised me, as smart people have been saying prefer classes to IDs for a while now. The article was light on reasons why this suggestion might be bad, but it boils down to..."
http://oli.jp/2011/ids/


+03: DREAMWEAVER.

Dreamweaver CS5.5 Studio Techniques - Progressive Enhancement with HTML5 and CSS3
By David Powers.
"In this chapter, you'll learn how to apply progressive enhancement to a website for a fictitious hotel..."
http://www.peachpit.com/articles/article.aspx?p=1733641


+04: EVALUATION & TESTING.

Pairing Up Usability Testing with A/B Testing
By Shanshan Ma.
"One of the challenges usability professionals constantly face is showing the value of usability testing through quantifiable results. Convincing a client to invest É in usability testing often requires some concrete numbers that explicitly tell what the return on the investment in usability testing will be..."
http://www.uxmatters.com/mt/archives/2011/07/pairing-up-usability-testing-with-ab-testing.php


+05: EVENTS.

Leadership Exchange in Arts and Disability Conference
August 18-20, 2011.
Louisville, Kentucky, U.S.A.
http://www.kennedy-center.org/accessibility/education/lead/

Accessibility Camp Montreal
August 26, 2011.
Montreal, Canada
http://www.a11ymtl.org/

Introduction to W3C Mobile Web and Application Best Practices
September 5 - October 24, 2011.
Online.
http://www.w3.org/Mobile/training/mobile_course/

International PHP Conference 2011
October 9-12, 2011.
Rheingoldhalle, Mainz, Germany
http://phpconference.com/

WebAIM Training
October 12-13, 2011.
Logan, Utah, U.S.A.
http://webaim.org/training/


+06: FLASH.

Why Opposing HTML5 And Flash Is Nonsense
By Fred Cavazza.
"HTML5 is a hot topic, which is a good thing. The problem is that 99% of what's been written has been about HTML5 replacing Flash. Why is that a problem? Because not only is it irrelevant, but also it prevents you from seeing the big picture about interoperability..."
http://blogs.forbes.com/fredcavazza/2011/07/17/why-opposing-html5-and-flash-is-a-non-sense


+07: JAVASCRIPT.

Essential JavaScript Design Patterns For Beginners
By Addy Osmani.
An Open-source mini-book. "At the beginning of this book I will be focusing on a discussion about the importance and history of design patterns in any programming language. If you're already sold on or are familiar with this history, feel free to skip to the chapter 'What is a Pattern?' to continue reading..."
http://addyosmani.com/resources/essentialjsdesignpatterns/book/?

Javascript Done Right
By Dirk Ginader.
Dirk's Open Web Camp III presentation slides.
http://www.slideshare.net/ginader/javascript-done-right-open-web-camp-iii

Traverse the Document Object Model With JavaScript
By Sebastiano Armeli-Battana.
"Web developers are, of course, familiar with JavaScript and the Document Object Model (DOM). While DOM provides a neutral interface for abstracting XML/HTML documents, JavaScript provides an implementation of this interface that lets you interact with web pages. In this article, explore the JavaScript bindings of DOM and learn how to manipulate a web document for peak performance. An example application illustrates DOM methods and properties, and how to attach handlers to DOM events..."
http://www.ibm.com/developerworks/web/library/wa-jsdomupdate/index.html

The Problem With Implied Globals In JavaScript
By Schalk Neethling.
"One of the pitfalls a lot of JavaScript developers get caught by, especially when starting out, are implied globals. So what is an implied global?..."
http://expansive-derivation.ossreleasefeed.com/2011/07/quick-tip-the-problem-with-implied-globals-in-javascript/


+08: MISCELLANEOUS.

The Age of Responsive Design
By Denise Jacobs.
'Welcome to episode eleven. In today's podcast, Denise Jacobs talks about a new era in designing for the Web - The Age of Responsive Design'
http://designfestival.com/designfestival-podcast-11-the-age-of-responsive-design/

Visual Designers Are Just As Important As UX Designers
By Andy Budd.
"As I explained in my previous post, user experience design is a multidisciplinary activity which includes psychology, user research, information architecture, interaction design, graphic design and a host of other disciplines. Due to the complexity of the field a user experience team will typically be made up of individuals with a range of different specialisms..."
http://www.andybudd.com/archives/2011/07/visual_designers_are_just_as_important_a/

Are Print Designers Doomed? An Important Look at the Facts
ByJoshua Johnson.
"We constantly hear blanket statements about how print is in decline and the future of design is digital. Meanwhile, many print-only designers wonder if they should be taking steps to begin the overwhelming journey of learning a new career..."
http://designshack.co.uk/articles/business-articles/are-print-designers-doomed-an-important-look-at-the-facts/


+09: NAVIGATION.

The 10 Commandments of SEO - Part 1
By Kristen Holden.
"...Ethical SEO isn't rocket science. Build a website with content that is aimed at your end users. Group that content in logical ways that makes it easy to associate with specific topics. Make it easy for users to share your content with their friends. Resist the temptation to take short-cuts when building links or outsourcing work, and ensure that your site architecture is up to scratch..."
http://www.sitepoint.com/the-10-commandments-of-seo-part-1/


+10: STANDARDS, GUIDELINES & PATTERNS.

Web Standards Curriculum
W3C Wiki.
"What follows is a list of all the articles within the web standards curriculum, which will give you an essential grounding in HTML5, CSS, JavaScript, accessibility, and the other topics you need to be a modern web developer/designer. Reading them in order makes the most sense, but they are written to work individually, so you can dip in and out as it suits you, if you need to hone individual skills. Note: This material was originally published as part of the Opera Web Standards Curriculum, available as Introductory material, written by Chris Mills..."
http://www.w3.org/wiki/Web_Standards_Curriculum
Chris Mills' Web Standards Curriculum Announcement:
http://my.opera.com/ODIN/blog/2011/07/15/web-education-moving-forward-opera-wsc-goes-to-the-w3c

HTML5 Battles Still To Be Won
By Chris Heilmann.
Slides and audio from Chris' Open Web Camp presentation.
http://hacks.mozilla.org/2011/07/html5-battles-still-to-be-won-a-talk-at-open-web-camp-iii/

Notes from Writing HTML5 Media
By Shelley Powers.
"This last weekend I finished my latest book for O'Reilly: HTML5 Media. This is one of O'Reilly's shorter books (about 100 pages), primarily focused at the eBook market, though you can get a hard copy with print-on-demand..."
http://tech.burningbird.net/article/notes-writing-html5-media 

HTML5 Guidelines for Web Developers: Structure and Semantics for Documents
By Klaus Forster and Bernd Oggl.
"HTML5 offers a compact set of new structural elements that facilitate a clear page structure without detours via class or id. Klaus Forster and Bernd Oggl give you a tour of the structure and semantics for documents..."
http://www.informit.com/articles/article.aspx?p=1729269

HTML5 Fundamentals, Part 1: Getting Your Feet Wet
By Grace Walker.
"HTML5 reflects the monumental changes in the way you now do business on the web and in the cloud. This article is the first in a four-part series designed to spotlight changes in HTML5, beginning with the new tags and page organization and providing high-level information on web page design, the creation of forms, the use and value of the APIs, and the creative possibilities that Canvas provides..."
http://www.ibm.com/developerworks/web/library/wa-html5fundamentals/index.html

HTML5 Fundamentals, Part 2: Organizing Inputs
By Grace Walker.
"HTML5 reflects the monumental changes in the way you now do business on the Web and in the cloud. This article is the second in a four-part series designed to spotlight changes in HTML5, beginning with the new tags and page organization and providing high-level information on web page design; the creation of forms; the use and value of the APIs; and, finally, the creative possibilities that Canvas provides. This second part introduces the concept of HTML5 form controls and touches on the role of JavaScript and CSS3..."
http://www.ibm.com/developerworks/web/library/wa-html5fundamentals2/

HTML5 Fundamentals, Part 3: The Power of HTML5 APIs
By Grace Walker.
"HTML5 reflects the monumental changes in the way you now do business on the web and in the cloud. This article is the third in a four-part series designed to spotlight changes in HTML5, beginning with the new tags and page organization and providing high-level information on web page design, the creation of forms, the use and value of the APIs, and, finally, the creative possibilities that Canvas provides. This installment introduces HTML5 APIs, using an example page to demonstrate functions."
http://www.ibm.com/developerworks/web/library/wa-html5fundamentals3/

HTML5 Fundamentals, Part 4: The Final Touch
By Grace Walker.
"HTML5 reflects the monumental changes in the way we now do business on the web and in the cloud. This article, the fourth in a four-part series designed to spotlight changes in HTML5, introduces the HTML5 Canvas element, using several examples to demonstrate functions..."
http://www.ibm.com/developerworks/web/library/wa-html5fundamentals4/


+11: TOOLS.

mediaQuery Bookmarklet
By Rob Tarr.
"...I figured that if we had a tool that would show us exactly what size the viewport was, we would know what media queries would be active. Taking it one step further, I thought why shouldn't the tool just tell me which media query just fired? So, I wrote this little bookmarklet. It parses the included CSS files of the current page and creates an array of media query declarations. It then sets up listeners using the matchMedia method to trigger events when media queries change..."
http://seesparkbox.com/foundry/media_query_bookmarklet

RDFaCE
Ali Khalili and Soren Auer.
"RDFaCE is an RDFa Content Editor based on TinyMCE. It supports different views for semantic content authoring and uses existing Semantic Web APIs to facilitate the annotation and editing of RDFa contents..."
http://aksw.org/Projects/RDFaCE


+12: TYPOGRAPHY.

CSS3 @font-face Design Guide
By Nick La.
"Although CSS3 @font-face is supported by most major browsers (IE, Firefox, Chrome, and Safari), but not all. When it doesn't, your custom fonts might break the layout or come out with undesired results. In this article, I will explain the common issues with using custom fonts, picking the matching fallback web safe fonts, and how to create a perfect fallback font style with Modernizr..."
http://webdesignerwall.com/tutorials/css3-font-face-design-guide


+13: USABILITY.

Mobile First
By Luke Wroblewski.
Luke's archived Mobile First presentation in video, audio and PDF.
http://www.lukew.com/presos/preso.asp?26

Picking A Mobile Support Strategy For Your Website
By Matt Lawson.
"...mobile strategies can vary massively from website to website, depending on what the company wants to offer visitors. For example, eBay's strategy will be very different from an individual's strategy for a portfolio website, which might simply be to improve readability for those viewing on a mobile device..."
http://www.smashingmagazine.com/2011/07/11/picking-a-mobile-support-strategy-for-your-website/

Responsive by Default
By Andy Hume.
"If you think about it, responsive layout is not a new thing. Open a simple HTML file in a web browser, and the content automatically adapts to fit the width of that browser..."
http://blog.andyhume.net/responsive-by-default

Content Choreography
By Trent Walton.
"The concept of permanently placing content on a web page for a single browsing width or resolution is becoming a thing of the past. Media-queried responsive & adaptive sites afford us the ability to re-architect content on a page to fit its container, but with this exciting new potential come equally exciting challenges. "
http://trentwalton.com/2011/07/14/content-choreography/

Understanding the Elements of Responsive Web Design
By Jason Gross.
"Responsive web design is undoubtedly a hot topic in web design right now. To some degree, the popularity of the concept of responsive web design is well deserved because site users are increasingly diversifying their methods of accessing a website. iPad, iPhone, Android mobile devices, desktops, netbooks - we're in a time where our web designs must function in a multitude number of ways. Let us explore the meaning and principles behind responsive web design..."
http://sixrevisions.com/web_design/understanding-the-elements-of-responsive-web-design/

20 More Responsive Web Designs
By Prakash.
"Few weeks ago we have done an inspirational article about responsive web design that featured some of amazing responsiveweb design. In this roundup we have showcase 20 more responsive web design which uses CSS media queries to achive this and along with few tutorials that will help you to learn more about responsive web design..."
http://acrisdesign.com/2011/07/20-more-responsive-web-designs/

The Difference (and Relationship) Between Usability and User Experience
By Justin Mifsud.
"After web site accessibility, 'user experience' (abbreviated as UX) is probably the phrase that most people tend to confuse usability with. .."
http://usabilitygeek.com/the-difference-between-usability-and-user-experience/

Opening Links in a New Window
By Matt Lawson.
"inks that opened in a new window have always been a sticky point when it comes to accessibility; ever since the Web Content Accessibility Guidelines (WCAG) 1.0 were released way back in 1999. These guidelines made it clear that pop-up windows should be avoided whenever possible..."
http://www.nomensa.com/blog/2011/opening-links-in-new-window/

Popular Mistakes in Universal Web Design
By Dennis Lembree.
"With today's snazzy and competitive 'Web 2.0' and social media world, universal design is many times forgotten. It's bewildering as to why since there are many social, technical, financial, and legal reasons which support universal design practices. Let's discuss some of the more prevalent issues in websites today, and how they relate to the main universal design principles..."
http://designfestival.com/popular-mistakes-in-universal-web-design/


[Section one ends.]


++ SECTION TWO:

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