[webdev] Web Design Update: January 31, 2013

Laura Carlson lcarlson at d.umn.edu
Thu Jan 31 06:15:29 CST 2013


+++ WEB DESIGN UPDATE.
- Volume 10, Issue 32, January 31, 2013.

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

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

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

[Contents ends.]


++ SECTION ONE: New references.

+01: ACCESSIBILITY.

What do You Want to Know About Accessibility?
By Karl Groves.
"As teachers, we are always on the hunt for more insight into what
people want to know more about -- in part, to see what the current
state of industry understanding is about accessibility and how we
might help everyone create more accessible sites and applications.
What better way than to ask? Here's the results of some recent
research and a clear question--what do you want to know more about?"
http://simplyaccessible.com/article/want-to-know/

Accessible Data Tables with Static Headers
By Gez Lemon.
"There are several techniques for creating tables with static header
rows, but very few of the examples I have come across are accessible
or do not work cross-browser. This post looks at some of the current
solutions, and outlines a method using WAI-ARIA to fix the
accessibility issues of the more popular techniques..."
http://juicystudio.com/article/accessible_data_tables_static_headers.php

Labels in Input Fields Aren't Such a Good Idea
By Laura Kalbag.
"There's something that's been bothering me lately. It seems to be
some kind of form interface trend where the labels for text inputs are
placed inside the fields themselves..."
http://laurakalbag.com/labels-in-input-fields-arent-such-a-good-idea/

ARIA-label, labelledby, describedby
By Rakesh Paladugula.
"ARIA-label, ARIA-labelledby and ARIA-describedby properties defines
accessible ways of providing labels for form fields when straight way
is not possible. In certain situations general <label> tag cannot be
provided for various reasons."
http://maxability.co.in/2013/01/25/aria-label-labelledby-describedby/

Getting Started with OS X VoiceOver
By A11Y Project.
"VoiceOver is the assistive software built into OS X. It provides a
richer set of keyboard shortcuts for navigating a website and reads
sections of the page aloud based on the current focus. It's a great
way to test the accessibility of a project because it's always readily
at-hand: you can toggle VoiceOver on/off by..."
http://a11yproject.com/posts/getting-started-with-voiceover/

Air Carrier Access Act - Web Accessibility Requirements
By Timothy Stephen Springer.
"U.S. and foreign air carriers operating flights to or selling tickets
to the U.S. public are required to ensure that the public-facing
content of websites that they own or control conforms to the Web
Content Accessibility Guidelines (WCAG) 2.0 Level A and Level AA. If
enacted, the proposed requirements will not just apply to U.S. air
carriers' public-facing pages; they will also apply to foreign
carriers' public-facing pages that are used to advertise or sell to
the U.S. public for air transportation that begins or ends in the
U.S..."
https://www.ssbbartgroup.com/blog/2013/01/29/air-carrier-access-act-web-accessibility-requirements/


+02: CASCADING STYLE SHEETS.

Media Query Width and Vertical Scrollbars
By Roger Johansson.
"Media queries are a great tool for changing a website's layout
depending on parameters like viewport width, but it can be very
annoying when browsers do not do the same thing. An obvious example is
whether or not a vertical scrollbar, should one exist, is included
when the viewport's width is calculated..."
http://www.456bereastreet.com/archive/201301/media_query_width_and_vertical_scrollbars/

How to Order CSS Selectors, a Draft
By Jens O. Meiert.
"There are a number of ways to write style sheets. The domain of style
guides, many of them go into some detail. What I, despite my work on a
number of style guides, including the Google HTML and CSS style guide,
have so far missed, is a conclusive reference to sort selectors and
rules..."
http://meiert.com/en/blog/20130130/how-to-order-css-selectors/


+03: EVENTS.

Digital 360 Conference
March 5-6, 2013.
Baltimore, Maryland, U.S.A.
http://digital360.systemsalliance.com/

HighEdWeb New England
March 18, 2013.
Hadley, Massachusetts, U.S.A.
http://ne.highedweb.org/

High Ed Web Regional Florida
April 22, 2013.
Gainsville, Florida, U.S.A.
http://fl.highedweb.org/

HighEdWeb Michigan
May 20-21, 2013.
Flint, Michigan, U.S.A.
http://mi.highedweb.org/

UX - The User Experience
June 6-7, 2013.
Penn State, Pennsylvania, U.S.A.
http://webconference.psu.edu/

CSS Day
June, 14, 2013.
Amsterdam, The Netherlands
http://cssday.nl/

HOW Design Live
June 23-26, 2013.
San Francisco, California, U.S.A.
http://www.eiseverywhere.com/ehome/index.php?eventid=47001&tabid=95658


+04: INFORMATION ARCHITECTURE.

Mobile Prototyping - A New Paradigm
By Alexis Piperides.
""Designers and UX professionals use design techniques like sketches,
wireframes and mockups to visualise a website during the design
process. Can these web design techniques also be used for mobile app
design - or is it time for change?"
http://www.netmagazine.com/features/mobile-prototyping-new-paradigm


+05: JAVASCRIPT.

Arrays in JavaScript
By Axel Rauschmayer.
"This blog post goes deeply into how arrays work in JavaScript: they
are much more like objects than you might think..."
http://www.2ality.com/2012/12/arrays.html

Two Things About Conditionals in JavaScript
By Rebecca Murphey.
"Just a quick post, inspired by Laura Kalbag's post, which included
this gem: 'We shouldn't be fearful of writing about what we know. Even
if you write from the most basic point of view, about something which
has been 'around for ages', you'll likely be saying something new to
someone.'"
http://rmurphey.com/blog/2012/12/10/js-conditionals/

JavaScript 'this' in Different Contexts
By Louis Lazaris.
"JavaScript has a reserved keyword called this that references
something different depending on where you are in a JavaScript
program..."
http://www.impressivewebs.com/javascript-this-different-contexts/


+06: MISCELLANEOUS.

Retina Ready Images and Responsive Web Design
By Paula Borowska.
"I want you to clearly understand what Retina Display is. In the
simplest of terms, it means a high definition display, that's it..."
http://designmodo.com/responsive-retina-images/

Responsive Design on a Budget
By Mark Perkins.
"Over the last year or so we've seen an increasing emphasis put on the
performance aspect of building responsive websites, which is great -
there's no point building a beautiful, scalable, touch-friendly site
if it uses up half your monthly bandwidth allowance just to load the
homepage..."
http://clearleft.com/thinks/responsivedesignonabudget/

Tales of the Old Wild Web
By Michael J. Socolow.
"Someday we'll tell our grandchildren about our first interaction with
the Web. We'll tell them we called it "surfing," and regale them with
mythic tales of newspaper sites offering all their content free..."
http://chronicle.com/article/Tales-of-the-Old-Wild-Web/136687

How to Get Programmers to Change User Interfaces
By Tom Johnson.
"I received the following question from a reader..."
http://idratherbewriting.com/2013/01/26/how-to-get-programmers-to-change-user-interfaces/


+07: NAVIGATION.

CSS - Responsive Navigation Menu
By Nick La.
"Previously I wrote a tutorial on how to make a mobile navigation for
responsive design, now I've discovered a new technique to produce a
responsive menu without having to use Javascript. It uses clean and
semantic HTML5 markup. The menu can be aligned left, center or right.
Unlike the previous tutorial where it is clicked to toggle, this menu
toggles on hover which is more user friendly. It also has an indicator
to show the active/current menu item. It works on all mobile and
desktop browsers including Internet Explorer..."
http://webdesignerwall.com/tutorials/css-responsive-navigation-menu

Navigation in Lists - To Be or Not To Be
By Chris Coyier.
"If you Google around on whether or not you should use lists as the
markup for navigation on websites, you'll find no debate. Every
article suggest that yes you should. The vast majority of tutorials
you read will use lists for navigation. The vast majority of templates
you see will use lists for navigation. But is this ubiquitous markup
pattern absolutely correct? Let's see..."
http://css-tricks.com/navigation-in-lists-to-be-or-not-to-be/


+08: PHP.

What is the Best Programming Language to Learn in 2013?
By Craig Buckler.
"An interesting article caught my eye at jobstractor.com - the
programming language trends review. The company analyzed more than
60,000 job vacancies during 2012 to produce a chart of the most
sought-after technologies..."
http://www.sitepoint.com/best-programming-language-of-2013/


+09: STANDARDS, GUIDELINES & PATTERNS.

HTML5 in Six Steps
By Andy Hume.
"The six steps below will take you only minutes to implement and are
the first steps in adopting HTML5. Each one provides some small
benefit to either you as a developer or your users..."
http://blog.andyhume.net/html5-in-six-steps/

Using HTML 5.1
By Steve Faulkner.
"If you an HTML author or developer - use the HTML 5.1 Nightly edition
of the HTML specification..."
http://www.paciellogroup.com/blog/2013/01/using-html-5-1/

Figuring Out
By Jeremy Keith.
"A recent simplequiz over on HTML5 Doctor threw up some interesting
semantic issues. Although the figure element wasnt the main focus of
the article, a lot of the comments were concerned with how it could
and should be used. This is a subject that has been covered before on
HTML5 Doctor. It turns out that we may have been too restrictive in
our use of the element, mistaking some descriptive text in the spec
for proscriptive instruction..."
http://adactio.com/journal/6010/

Web Standards Aren't Just About HTML and CSS
By Paul Boag.
"If you have worked on the web for any length of time you will have
heard of web standards. Web standards are a set of best practice for
building the web and they attempt to establish a common approach for
all those developing websites..."
http://boagworld.com/design/web-standards-arent-just-about-html-and-css/

DRM in HTML5
By Manu Sporny.
"A few days ago, a new proposal was put forward in the HTML Working
Group (HTML WG) by Microsoft, Netflix, and Google to take DRM in HTML5
to the next stage of standardization at W3C. This triggered another
uproar about the morality and ethics behind DRM and building it into
the Web..."
http://manu.sporny.org/2013/drm-in-html5/


+10: TOOLS.

The MotherEffingToolConfuser
By Karl Groves.
"Many academic papers dealing with web accessibility make use of
automated tools as part of their research. For instance, one recently
published paper did a comparative analysis of the Forbes 250.
Unfortunately, the tool in use did not test the DOM of the pages it
analyzed..."
http://www.karlgroves.com/2013/01/23/the-mothereffingtoolconfuser/


+11: USABILITY.

Complexity is Good, Simplicity Overrated
By Don Norman.
"The mark of the great designer is the ability to provide the
complexity that people need in a manner that is understandable and
elegant. Simplicity should never be the goal. Complex things will
require complexity. It is the job of the designer to manage that
complexity with skill and grace."
http://www.jnd.org/dn.mss/complexity_is_good_.html

A-Z of Better Web Writing
By Dey Alexander.
"If you want to write better web content, here's an A-Z that should
help. It covers attributes of quality content and issues you should be
aware of as a web writer..."
http://www.4syllables.com.au/2013/01/a-z-better-web-writing/

Don't Use Automatic Image Sliders or Carousels, Ignore the Fad
By Brad Frost.
"I'm sure you've come across dozens, if not hundreds of image sliders
or carousels (also called 'rotating offers'). You might even like
them. But the truth is that they're conversion killers..."
http://conversionxl.com/dont-use-automatic-image-sliders-or-carousels-ignore-the-fad/

15 Mobile UX Facts and Insights
By Jeff Sauro.
"Here are 15 data points to help in answering some common questions
about mobile usage and behavior. I've included as many sources as
possible so you can double check our conclusions..."
http://www.measuringusability.com/blog/ux-mobile.php


[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.]


More information about the Webdev mailing list