Loading ...
Sorry, an error occurred while loading the content.

42376[webdev] Web Design Update: July 3, 2014

Expand Messages
  • David P. Dillard
    Jul 3, 2014
      .



      Date: Thu, 3 Jul 2014 09:38:05 -0500
      From: Laura Carlson <lcarlson@...>
      To: webdev <webdev@...>
      Subject: [webdev] Web Design Update: July 3, 2014




      +++ WEB DESIGN UPDATE.



      - Volume 13, Issue 01, July 03, 2014.




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




      ++ISSUE 01 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: COLOR.

      04: DRUPAL.

      05: EVENTS.

      06: HTML5.

      07: INFORMATION ARCHITECTURE.

      08: JAVASCRIPT.

      09: MISCELLANEOUS.

      10: NAVIGATION.

      11: TOOLS.

      12: USABILITY.




      SECTION TWO:



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



      [Contents ends.]





      ++ SECTION ONE: New references.



      +01: ACCESSIBILITY.



      The WAVE Accessibility Tool (Tutorial)

      By Laura Carlson.

      "...In this workshop we will take a look at submitting a page for the
      WAVE's evaluation, reading a WAVE report, checking problems, and
      strengths and limitations of automated tools..."

      http://www.d.umn.edu/itss/training/online/wave/



      Do It Yourself Transcripts and Captions

      By Deborah Edwards-Onoro.

      "This is part 3 in an ongoing series on transcripts and captions for
      videos and podcasts..."

      http://www.lireo.com/diy-transcripts-captions/



      WordPress Themes Suck at Accessibility: It's Time to Fix It

      By Sarah Gooding.

      "...One feature, however, sets Simone apart - a heavy emphasis on
      accessibility. Rand-Hendriksen believes that the accessibility-ready
      tag should be required for all WordPress themes. 'My main inspiration
      for accessibility is that I want everyone, regardless of accessibility
      challenges, to be able to access all content on the web in the way
      they want and/or need,' he said. To that end, he has educated himself
      on the requirements for making a WordPress theme accessible. He is,
      however, only one among a very small minority of theme developers to
      do so..."

      http://wptavern.com/wordpress-themes-suck-at-
      accessibility-its-time-to-fix-it



      An Accessible Design Maturity Continuum

      By David Sloan.

      "We spend an increasing amount of time helping organizations develop a
      culture and practice of accessible user experience (AUX). We believe
      that the chances of creating more inclusive, more effective, more
      enjoyable digital resources and experiences are increased if
      accessibility and diversity are integrated into the design approach
      right from the start. However, this typically requires a significant
      change in thinking and in practice within the organization. In order
      to help make this change, it can be useful to identify an
      organization's level of what we call accessible design maturity..."

      http://blog.paciellogroup.com/2014/06/accessibility-maturity-continuum/



      The Visual-Only Icon Problem

      By Joe Dolson.

      "...Font icons are awesome. They're easy, flexible, scale nicely, load
      quickly (as long as you're not going crazy with them) - but they need
      some support to have alternative text. Please, take that extra step to
      provide it!"

      https://www.joedolson.com/articles/2014/06/visual-icon-problem/



      Do Not Rely on a Single Sensory Characteristic to Identify Content

      By Denis Boudreau.

      "Make sure indications in web pages are not depending on a single
      sensory perception..."

      http://dboudreau.tumblr.com/post/90650860297/
      do-not-rely-on-a-single-sensory-characteristic-to



      Use the title Element to Notify Users of Required Fields Left Blank

      By Denis Boudreau.

      "Make sure users are notified of required fields left blank as soon as
      the page reloads..."

      http://dboudreau.tumblr.com/post/90449811047/
      use-the-title-element-to-notify-users-of-required



      Avoid Background Sounds When Sharing Audio Files

      By Denis Boudreau.

      "Make sure audio files that contain speech information don't have
      background sounds"

      http://dboudreau.tumblr.com/post/90346259827/
      avoid-background-sounds-when-sharing-audio-files




      +02: CASCADING STYLE SHEETS.



      Keep the Focus Outline

      By Adrian Roselli.

      "...What's so frustrating is that the useful style is then overridden
      with this harmful declaration: a:focus {outline: none;} This override
      greatly decreases the usability and accessibility of the site.
      Unfortunately, this practice is still common on many more sites across
      the web. As a web developer, one of the simplest accessibility tests
      you can do is unplug your mouse. Two quick things to review as part of
      that: Can you interact with all controls with only the keyboard? Can
      you tell which item has focus?..."

      http://blog.algonquinstudios.com/2014/06/24/keep-the-focus-outline/



      CSS Variables (video)

      By Ben Schwarz.

      "A head-first dive into the past, present and future of all things
      variable in CSS. And if this floats your boat, you need to get along
      to the Engineering Track at Web Directions 2014."

      http://www.webdirections.org/resources/ben-schwarz-css-variables/




      +03: COLOR.



      Accessible Contrast with Less and Sass

      By Mike Riethmuller.

      "Contrast is a critical factor in web design, it's important to get
      right because it has a strong influence on the visual aesthetic, but
      it's especially important for readability and accessibility of text on
      the page..."

      http://blog.madebymike.com.au/accessible-contrast-ratios-with-less-sass/




      +04: DRUPAL.



      WAI-ARIA, Requiring Alt Text, and Other Accessibility Features Now in Drupal 8

      By Amber Matz.

      "On Drupal.org, Drupal 8 promotion is in full-swing. Features and
      benefits are being touted and summarized right and left. One of the
      categories of improvement summed up on the Drupal 8 features page is
      'Accessibility.' I went digging for more information on how
      accessibility improvements have been integrated in Drupal 8 and I
      found a number of resources on the effort to improve accessibility in
      D8. Here's the summary of what's been done according to Drupal.org..."

      http://drupalize.me/blog/201406/accessibility-features-drupal-8




      +05: EVENTS.



      Accessing Social Media
      July 17, 2014.
      Washington, DC, U.S.A.
      http://www.fcc.gov/events/accessing-social-media
      Live stream will be at:
      http://www.fcc.gov/live




      +06: HTML5.



      Label and Name Inputs Properly

      By Google.

      "Forms are hard to fill out on mobile. The best forms are the ones
      with the fewest inputs. Good forms provide semantic input types. Keys
      should change to match the user's input type; users pick a date in a
      calendar. Keep your user informed. Validation tools should tell the
      user what they need to do before submitting the form."

      https://developers.google.com/web/fundamentals/
      input/form/label-and-name-inputs



      The time Element

      By Ty Strong.

      "The <time> element in HTML represents a machine-readable date, time,
      or duration. It can be useful for creating event scheduling,
      archiving, and other time-based functions. WordPress uses the time
      element in the default theme. Reddit uses the time element as well."

      http://css-tricks.com/time-element/



      With Components, Google Agitates for a Revolution in Web Development

      By Joab Jackson.

      "At the Google I/O conference this week, the company vigorously
      lobbied developers to adopt a new programming model, one that could,
      the company asserted, make it radically easier to build Web
      applications."

      http://mobile.techworld.com/news/applications/3527786/
      with-components-google-agitates-for-a-revolution-in-web-development/




      +07: INFORMATION ARCHITECTURE.



      The Difference Between Information Architecture (IA) and Navigation

      By Jennifer Cardello.

      "IA is the information backbone of the site; navigation refers to
      those elements in the UI that allow users to reach specific
      information on the site..."

      http://www.nngroup.com/articles/ia-vs-navigation/




      +08: JAVASCRIPT.



      Using ARIA in HTML

      By Steve Faulkner.

      "ARIA (WAI-ARIA if you want to be formal) is a set of attributes that
      you can add to HTML elements..."

      http://html5doctor.com/using-aria-in-html/



      ARIA-dropeffect (Property)

      By Rakesh Paladugula.

      "Functionalities such as drag and drop are quite common with rich
      internet applications. Accessibility of dragging an object or
      component from the source region of the page and dropping them at the
      target region is a tough task especially with screen readers and
      keyboards."

      http://www.maxability.co.in/2014/06/aria-dropeffect-property/



      Building an Accessible Disclosure Button - Using Web Components

      By Cedric Trevisan.

      "Web components are the next step in building modern web applications
      and a great way to prototype accessible widgets. Today we are going to
      build a disclosure widget, by extending the native HTML button
      element."

      http://blog.paciellogroup.com/2014/06/
      accessible-disclosure-button-using-web-components/




      +09: MISCELLANEOUS.



      The Web Ahead Episode 74 - HTML Semantics with Bruce Lawson

      By Jen Simmons.

      "HTML5 brought more semantic elements to HTML. How's that going? Why
      should developers use semantic HTML? Bruce Lawson join Jen Simmons to
      discuss HTML, semantics, accessibility, ARIA roles, microformats,
      microdata, RDFa, web components, and more."

      http://5by5.tv/webahead/74




      +10: NAVIGATION.



      The Changing Nature of Search Behavior

      By Gerry McGovern.

      "Search is just one part of the jigsaw puzzle of customer behavior. It
      needs to be considered in the context of the customer's task."

      http://gerrymcgovern.com/new-thinking/changing-nature-search-behavior




      +11: TOOLS.



      Tenon.io

      By Karl Groves.

      "Tenon is built by developers for developers and offers
      JavaScript-aware accessibility testing. We think you're going to love
      it." Test it at:

      http://tenon.io/#testnow



      Color Contrast Analyzer for Chrome - Download Feature

      By Greg Kraus.

      "I just updated the Color Contrast Analyzer for Chrome with a new
      feature that lets you download the resulting image analysis as a PNG
      file..."

      http://accessibility.oit.ncsu.edu/blog/2014/06/20/
      color-contrast-analyzer-for-chrome-download-feature/



      W3C Spell Checker

      By W3C.

      "This tool allows you to check the spelling of a web page. It
      currently only supports English and French..."

      http://www.w3.org/2002/01/spellchecker




      +12: USABILITY.



      Scrolljacking and Accessibility - Are we Breaking the Web?

      By Shaumik Daityari.

      "...In this post, we will look at a handful of websites employing this
      method and how users with assistive technologies might access them.
      Accessibility is the practice of making a website features available
      to users with all abilities and disabilities. People with visual,
      cognitive and motor disabilities use assistive technologies (AT) to
      navigate the web. As web developers, it is our duty to make sure that
      our websites are compatible with these technologies. In this post, we
      will use the screen reader NVDA and attempt to access the websites
      through the keyboard only. The web browser used for the purpose is
      Chrome 35...."

      http://www.sitepoint.com/scrolljacking-accessibility/



      Realistic or Flat Design? Be Style Agnostic

      By Kent Eisenhuth.

      "When creating a new visual design for a software user interface,
      don't just adopt the popular style of the year. Instead, get to know
      your audience by conducting user research, then deliver a design
      that's appropriate for that audience. In this article, I'll offer some
      process tips that will help you to make your next visual design
      project a success...."

      http://www.uxmatters.com/mt/archives/2014/06/
      realistic-or-flat-design-be-style-agnostic.php



      What to Do When Your Boss Insists That You Use Pop-Up Banner Advertising?

      By Janet M. Six.

      "..."Explain the value of the more usable design and address any
      objections that the stakeholder might have...More often than not
      research and analysis will direct design appropriately..."

      http://www.uxmatters.com/mt/archives/2014/06/
      what-to-do-when-your-boss-insists-that-you-use-
      pop-up-banner-advertising.php



      Are Hollow Icons Really Harder to Recognize Than Solid Icons? A Research Study

      By Curt Arledge.

      "...an icon's style doesn't exist in isolation, but interacts with
      other attributes like color to create compounding effects on
      usability. Furthermore, less than half of the icons in my set of 20
      performed better in a solid style than a hollow style. A different set
      of icons would likely result in a different overall result..."

      http://viget.com/inspire/
      are-hollow-icons-really-harder-to-recognize-a-research-study




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





      [Issue ends.]




      .

      .