[webdev] Web Design Update: July 21, 2011

[Laura Carlson]

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


[Issue ends.]