[webdev] Web Design Update: July 9, 2015

Thu Jul 9 06:10:05 CDT 2015

+++ WEB DESIGN UPDATE.
- Volume 14, Issue 02, July 9, 2015.
An email newsletter to distribute news and information about web
design and development.

++ISSUE 02 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: DRUPAL.
04: EVALUATION & TESTING.
05: EVENTS.
06: HTML5.
07: JAVASCRIPT.
08: MISCELLANEOUS.
09: NAVIGATION.
10: TOOLS.
11: TYPOGRAPHY.
12: USABILITY.

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

[Contents ends.]

++ SECTION ONE: New references.

+01: ACCESSIBILITY.

Styling Forms Accessibly
By Amanda Cheung.
"Let's take a look at how we can create better user experiences for
users filling out our web forms through accessibility..."
http://www.uxbooth.com/articles/styling-forms-accessibly/

Does a Simple Data Table Need to Expose Row and Column Headers?
By Sailesh Panchang.
"A question gets asked sometimes, "Do both row and column headers in a
simple data table need to be identified as header cells?" This is not
a rhetorical question. So here is my answer: Yes, a simple data table
must have both row and column headers marked up..."
http://www.mindoversight.com/?p=77

Data Tables: Exposing Row Headers
By Sailesh Panchang.
"Here is a bank statement presented as a simple data table. Rows in
the table cannot be clearly identified by reference to a single
attribute like transaction type or its date or description..."
http://www.mindoversight.com/?p=83

3 Ways to Improve Accessibility in Your Designs
By Deborah Edwards-Onoro.
"No matter if you're a content strategist, designer, developer, or
user experience professional, you've probably heard that creating
accessible designs restricts you from being creative.  It's an excuse,
says Geri Coady, to not include accessibility in your workflow.
Design for everyone, she says..."
http://www.lireo.com/3-ways-improve-accessibility-designs/

Five Goofy Things Medium Did That Break Accessibility
By Nick Santos.
"Medium Engineering recently had an accessibility fixit. We found some
goofy things! But we're trying to do better. We wanted to share some
of what we found..."
https://medium.com/medium-eng/five-goofy-things-medium-did-that-break-accessibility-3bc804ae818d

Introducing AccessibleUX.org
By AccessibleUX.org.
"Welcome to AccessibleUX.org, a community of practice joining
accessibility and user experience..."
http://accessibleux.org/

Why Open Source Needs Accessibility Standards
By Shaun Gillies.
"As the user base of open source software continues to grow,
developers have the responsibility of making their software accessible
to all potential users, including people with disabilities..."
http://opensource.com/life/15/2/why-open-source-needs-accessibility-standards

+02: CASCADING STYLE SHEETS.

Working with Shapes in Web Design
By Robin Rendle.
"When we make a new component on a website, we're effectively creating
rectangles of different sizes, whether we realise it or not. But what
happens if we want to experiment a little? How many different ways are
there to make shapes?..."
https://css-tricks.com/working-with-shapes-in-web-design/

Container Queries - Once More Unto the Breach
By Mat Marquis.
"Media queries have been the go-to tool in building responsive sites,
allowing us to resize and recombine modules to suit multiple contexts,
layouts, and viewports. But relying on fixed viewport sizes can
quickly twist stylesheets into Gordian knots. We still need a
future-friendly way to manage responsive CSS. Mat Marquis explores the
problem and the progress toward the solution-and issues a rallying
call."
http://alistapart.com/article/container-queries-once-more-unto-the-breach

Using CSS nth-child Selector
By CSS Newbies.
"CSS's nth-child selector is a very useful tool that allows you to
single out only certain html elements to style without having to add
any class or id tags."
http://www.cssnewbie.com/using-css-nth-child-selector/

Pseudo-Classes, Pseudo-Elements, and Colon Notation
By Ire Aderinokun.
"...in this article, I explore the difference between pseudo-elements
and pseudo-classes and which colon syntax should be used...."
http://bitsofco.de/2015/pseudo-classes-pseudo-elements-and-colon-notation/

What a CSS Code Review Might Look Like
By Geoff Graham.
"...CSS can be written in a number of ways, and the best way is often
subjective to the project. I'm definitely not trying to get dogmatic
with a post like this, but instead lay the foundation for what could
be a starting point for getting the most out of CSS before it is
released..."
https://css-tricks.com/what-a-css-code-review-might-look-like/

+03: DRUPAL.

Accessibility Testing, Tools, and QUAIL
By Kevin Miller.
"...spoke with Kevin Miller, lead web developer at Cal State Monterey
Bay. He's been working with Drupal for more than six years and is
making great contributions, especially in the area of
accessibility..."
https://www.acquia.com/resources/podcasts/acquia-podcast-98-meet-kevin-miller-accessibility-quail

+04: EVALUATION & TESTING.

Why You Should Conduct an Expert Review Before User Testing
By Jack Josephy.
"Expert reviews are a technique used by UX researchers to evaluate the
usability of a website or other digital product. Unlike usability
testing with real users, expert reviews involve researchers running
through standard website user journeys against a set of design
guidelines or heuristics and taking notes on usability violations..."
http://www.webcredible.com/blog-reports/blog/why-you-should-conduct-an-expert-review-before-user-testing

How to Statistically Test Preference Data
By Jeff Sauro.
"...There are actually a number of reasonable ways to analyze
preferences though (binomial test, confidence interval test,
Chi-Square Goodness of Fit test and McNemar Exact test). I'll start
with the approach I use and recommend: the binomial test with
confidence intervals..."
http://www.measuringu.com/blog/preference-data.php

+05: EVENTS.

NCDevCon Conference
September 26-27, 2015.
Raleigh, North Carolina U.S.A.
http://ncdevcon.com/

Made by Few
October 1-3, 2015.
Little Rock, Arkansas, U.S.A.
http://madebyfew.com/

Paris Web
October 1-3, 2015.
Paris, France
https://www.paris-web.fr/

World Usability Congress
October 7-8, 2015.
Graz, Austria
http://www.worldusabilitycongress.com/

Fronteers
October 8-9, 2015.
Amsterdam, The Netherlands
https://fronteers.nl/congres/2015

+06: HTML5.

Building a Semantic Calendar in HTML5
By Ian Devlin.
"Recently, developer Wilfred Nas asked an interesting question on
Twitter with regards to calendars being traditionally marked up in
HTML with tables, and should they perhaps be lists instead. This got
me thinking if we could make calendar markup more semantic using
HTML5's time element..."
http://www.iandevlin.com/blog/2015/07/html5/building-a-semantic-calendar-in-html5

Over the Edge: Web Components are an Endangered Species
By Chris Heilmann.
"...What we need is a base to start from. In the browser and in a
browser that users have and doesn't ask them to turn on a flag.
Without that, Web Components are doomed to become a 'too complex'
standard that nobody implements but instead relies on libraries..."
http://christianheilmann.com/2015/07/01/over-the-edge-web-components-are-an-endangered-species/

+07: JAVASCRIPT.

An Introduction To WAI-ARIA's Roles, States, And Properties
By Steven Bradley.
"Assistive devices, like screen readers, need to understand web
content and applications before they can communicate the information
to persons with disabilities. Much of the time the HTML we write
provides those semantics. Sometimes it doesn't, and that's where
WAI-ARIA comes in..."
http://www.vanseodesign.com/web-design/wai-aria-introduction/

WAI-ARIA: Awesome for Everyone (Video)
By Matt Long.
"Even if you're using proper HTML semantics, which is the foundation
of an accessible site, people dependent on assistive technologies may
still not interpret your site the way you intended, or they may still
be missing out on some of your awesome content. ARIA is here to help.
You'll learn a little about what semantic HTML is, and how you can use
ARIA to your advantage."
https://www.youtube.com/watch?v=RQ942hMBSXA

Digital Publishing WAI-ARIA Module 1.0
By W3C.
"Digital Publishing WAI-ARIA Module 1.0 is available for review as a
First Public Working Draft. This specification extends WAI-ARIA 1.1 to
facilitate automated processing and accessibility support for digital
publications."
http://www.w3.org/TR/dpub-aria-1.0/
Call For Review:
https://lists.w3.org/Archives/Public/w3c-wai-ig/2015JulSep/0004.html

+08: MISCELLANEOUS.

'Web Design Is Dead.' No, It Isn't.
By Vitaly Friedman.
"Every now and then we see discussions proclaiming a profound change
in the way we design and build websites. Be it progressive
enhancement, the role of CSS or, most recently, web design itself
being dead. All these articles raise valid points, but I'd argue that
they often lack objectivity and balance, preferring one side of the
argument over another one..."
http://www.smashingmagazine.com/2015/07/08/web-design-is-dead-no-it-isnt/

+09: NAVIGATION.

A More Accessible Multi-Level Dropdown Navigation
By Ire Aderinokun.
"One of the biggest accessibility issues I see, and face myself, are
with navigation menus, particularly multi-level drop-down menus. So
this week, I decided to work on creating the most accessible
multi-level dropdown menu I could..."
http://bitsofco.de/2015/accessible-multi-level-dropdown-navigation/

+10: TOOLS.

The W3C Mobile Checker
By W3C.
"The Mobile Checker is a tool for Web developers who want to make
their Web page or Web app work better on mobile devices..."
https://validator.w3.org/mobile-alpha/

+11: TYPOGRAPHY.

Death to Icon Fonts
By Seren Davies.
Seren covers some of the problems icon fonts pose for dyslexics in
this London Web Standards talk slide deck.
https://speakerdeck.com/ninjanails/death-to-icon-fonts

+12: USABILITY.

Don't Force Users to Register Before They Can Buy
By Amy Schade.
"Guest checkout with optional registration on e-commerce sites
simplifies the purchase process and invites users to register when
they feel comfortable, rather than forcing unwanted registration."
http://www.nngroup.com/articles/optional-registration/

Ad Placement for Mobile
By Aurora Bedford.
"Extra care is required when designing mobile page layouts that
include advertisements, due to the limited screen real estate
available. Ads must be displayed where they will not create false
floors nor block users from reaching relevant content."
http://www.nngroup.com/articles/ad-placement-mobile/

Moving from a World of Producing to a World of Connecting
By Gerry McGovern.
"Chaos on the Web is uncontrolled publishing, uncontrolled growth,
uncontrolled production of features and things and stuff. We must move
to a work culture that focuses as much on the maintenance and
improvement of what we already have, as on the production of new
stuff. But more importantly, we must develop our skills of linking and
bridge building. Because in a network, that's where the real value
lies."
http://www.gerrymcgovern.com/new-thinking/moving-world-producing-world-connecting

[Section one ends.]

++ SECTION TWO:

+13: 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

Drupal Information.
http://www.d.umn.edu/itss/training/online/webdesign/drupal.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

HTML Information.
http://www.d.umn.edu/itss/training/online/webdesign/html.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.]