[webdev] Web Design Update: May 7, 2015

Laura Carlson lcarlson at d.umn.edu
Thu May 7 06:18:59 CDT 2015


+++ WEB DESIGN UPDATE.
- Volume 13, Issue 46, May 7, 2015.

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

++ISSUE 46 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: HTML5.
07: NAVIGATION.
08: TYPOGRAPHY.
09: USABILITY.
10: XML.

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

[Contents ends.]


++ SECTION ONE: New references.

+01: ACCESSIBILITY.

Notes On Client-Rendered Accessibility
By Marcy Sutton.
"As creators of the web, we bring innovative, well-designed interfaces
to life. We find satisfaction in improving our craft with each design
or line of code. But this push to elevate our skills can be
self-serving: Does a new CSS framework or JavaScript abstraction
pattern serve our users or us as developers?..."
http://www.smashingmagazine.com/2015/05/06/client-rendered-accessibility/

8 Reasons to Embrace Website Accessibility
By Emma Grant.
"...Accessibility carries with it an economic benefit, it has social
and PR benefits, it avoids potential litigation issues, and it will
help you sleep that little bit better. Implementation is simple in a
new site, which should be using semantic markup anyway..."
http://www.webdesignerdepot.com/2015/04/8-reasons-to-embrace-website-accessibility/


+02: CASCADING STYLE SHEETS.

CSS Form Styling Module Level 1
By Tab Atkins.
"A Collection of Interesting Ideas..."
http://dev.w3.org/csswg/css-forms/


+03: DREAMWEAVER.

Suggestions from a Web Educator for the Dreamweaver Folks at Adobe
By Virginia DeBolt.
"I've been teaching Dreamweaver again. Yeah, I do it all the time, I
know. I have some ideas about what Dreamweaver needs to do to make
life easier for newbies who haven't been using the product forever
like I have..."
http://www.webteacher.ws/2015/04/30/suggestions-dreamweaver-folks-adobe/


+04: EVALUATION & TESTING.

How to Find the Sample Size for 8 Common Research Designs
By Jeff Sauro.
"It takes time to determine the right sample size, so, before you
start, be sure you know which type of computation your research design
falls into: 1) uncovering problems or insights 2) estimating a
parameter 3) making a comparison."
http://www.measuringu.com/blog/sample-size-designs.php


+05: EVENTS.

Midwest UX Design
October 1-3, 2015.
Pittsburgh, Pennsylvania, U.S.A.
http://2015.midwestuxconference.com/


+06: HTML5.

Custom Elements: is=""
By Anne van Kesteren.
"I think we reached rough consensus at the Extensible Web Summit that
is="" does not do much, even for accessibility. Accessibility is
something we need to tackle low-level by figuring out how builtin
elements work..."
https://lists.w3.org/Archives/Public/public-webapps/2015AprJun/0515.html

HTML 5.1 Placeholder Attribute
By W3C.
"Warning: Use of the placeholder attribute as a replacement for a
label can reduce the accessibility and usability of the control for a
range of users including older users and users with cognitive,
mobility, fine motor skill or vision impairments. While the hint given
by the control's label is shown at all times, the short hint given in
the placeholder attribute is only shown before the user enters a
value. Furthermore, placeholder text may be mistaken for a pre-filled
value, and as commonly implemented the default color of the
placeholder text provides insufficient contrast and the lack of a
separate visible label reduces the size of the hit region available
for setting focus on the control..."
http://www.w3.org/TR/html51/semantics.html#the-placeholder-attribute

Using WAI-ARIA in HTML - First Rule of ARIA Use
Steve Faulkner, Hans Hillen, and David MacDonald, editors.
"If you can use a native HTML element [HTML5] or attribute with the
semantics and behaviour you require already built in, instead of
re-purposing an element and adding an ARIA role, state or property to
make it accessible, then do so..."
http://www.w3.org/TR/aria-in-html/#first-rule-of-aria-use

Form Inputs - The Browser Support Issue You Didn't Know You Had
By Aaron Ladage.
"The lowly form input. It's been a part of HTML for as long as HTML
has had a formal specification; but before HTML5, developers were
hamstrung by its limited types and attributes. As the use of
smartphones and their on-screen keyboards has flourished, however,
inputs have taken on a new and incredibly important role - but they're
also riddled with browser and device inconsistencies..."
http://www.smashingmagazine.com/2015/05/05/form-inputs-browser-support-issue/


+07: NAVIGATION.

Building Nonlinear Narratives for the Web
By Senongo Akpem.
"The web operates in ways that can conflict with our traditional view
of what a 'story' is. Content is chunked, mixed, and spread across
channels, devices, and formats. How do we understand story lines,
characters, interactions, and the role of the audience, given this
information sprawl? Cue nonlinear narratives-Senongo Akpem guides us
past basic 'scrolly-telling' to immersive, sometimes surprising
experiences."
http://alistapart.com/article/building-nonlinear-narratives-for-the-web

Why It's Totally Okay to Use a Hamburger Icon
By Steven Hoober.
"...The menu icon has a long and storied history that long predates
mobile devices..."
http://www.uxmatters.com/mt/archives/2015/05/why-its-totally-okay-to-use-a-hamburger-icon.php


+08: USABILITY.

Infinite Scrolling - Impact on Assistive Technologies Series - #1 Common Issues
By Heidi Jungel.
"This blog is the first of three in the 'Infinite Scrolling- Impact on
Accessibility' series.  Before examining the common issues, it is
important to know the definition of infinite scrolling and the Section
508 and WCAG 2.0 standards that may impact users..."
http://www.ssbbartgroup.com/blog/infinite-scrolling-impact-on-assistive-technologies-series-1/

Large Touchscreens - What's Different?
By Amy Schade.
"Designing for larger-scale touchscreens requires particular attention
to input, screen focus, and privacy..."
http://www.nngroup.com/articles/large-touchscreens/

Putting the Customer First is the Best Business Case
By Gerry McGovern.
"...Giving people the answers to their most important questions
quickly and easily is what Top Tasks Management is all about."
http://www.gerrymcgovern.com/new-thinking/putting-customer-first-best-business-case

Why I Changed my Mind About UX Certification
By David Travis.
"I'll admit it: when I used to hear people advocate professional
certification in user experience, I was dismissive. Since we can't
even agree on what 'UX' is, how can we certify it? I wondered. I saw
certification as a way of creating a closed shop to exclude dissenting
voices. This is the story of why I changed my mind."
http://www.userfocus.co.uk/articles/why_i_changed_my_mind_about_ux_certification.html

Youtube's 'Big Bad Bubby' UX Bug!
By Michael Lockrey.
"This is a short summary of what appears to be a huge bug on Youtube
that makes it almost impossible to use Youtube effectively if you are
a Deaf or hard of hearing user (or someone who speaks a language other
than English) and you are reliant upon good quality captioning for
accessibility and inclusion..."
https://medium.com/@mlockrey/youtube-s-big-bad-bubby-ux-bug-4e71e32b0d24


+09: XML.

A Complete Guide to SVG Fallbacks
By Chris Coyier and Amelia Bellamy-Royds.
"The following is a guest post by Amelia Bellamy-Royds and me. Amelia
and I recently presented at the same conference together. We both
covered SVG, yet neither of us SVG fallbacks comprehensively. It's
such a huge topic, after all. While I've covered SVG fallbacks before,
it's been a few years and we figured we could do that subject better
justice now. Here we go!..."
https://css-tricks.com/a-complete-guide-to-svg-fallbacks/

How To Create SVG Arrowheads and Polymarkers - The marker Element
By Steven Bradley.
"A common graphic element drawn with SVG are arrowheads. You could
create a new one for each line, but that duplicates code. You could
reuse a graphic you defined in <defs> or <symbol> elements, but then
you have to move and rotate your arrowhead with each new line. Better
would be to make things easy on yourself and use a <marker>
element..."
http://www.vanseodesign.com/web-design/svg-markers/


[Section one ends.]


++ SECTION TWO:

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


More information about the Webdev mailing list