[SportMed] [webdev] Web Design Update: February 23, 2017

 

.

.

Date: Thu, 23 Feb 2017 06:22:16 -0600
From: Laura Carlson <lcarlson@d.umn.edu>
To: webdev <webdev@d.umn.edu>

Subject: [webdev] Web Design Update: February 23, 2017

+++ WEB DESIGN UPDATE.

– Volume 15, Issue 35, February 23, 2017.

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

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

Four Levels of Accessibility Customisation

By Alastair Campbell.

“There are some interesting discussions on customisation going on with
the work on WCAG 2.1, the much anticipated (I hope) update to the Web
Content Accessibility Guidelines…”

https://alastairc.ac/2017/02/four-levels-of-accessibility-customisation/

Today, I Learned About the Accessibility Tree

By Michael Schofield.

“The accessibility tree and the DOM tree are parallel structures…”

http://libux.co/today-learned-accessibility-tree/

An Overview of PDF Inaccessibility

By Jon Metz.

“There’s a lot of help online about making Portable Document Format
(PDF) accessible. Even with all the advice out there, I still
encounter people who find it difficult to make their documents
friendly to people with disabilities…”

https://www.paciellogroup.com/blog/2017/02/pdf-inaccessibility/

Not All Screen Reader Users Are Blind

By Adrian Roselli.

“The title says it all…the best approach to making a web site
accessible (to screen readers or not) is by using proper HTML. If done
well, ARIA is only needed for complex controls (tabs, trees,
carousels, …). Screen reader users still benefit the same way
sighted users do from hidden elements, particularly visual (and in
this case auditory) assaults such as mega menus.”

http://adrianroselli.com/2017/02/not-all-screen-reader-users-are-blind.html

Learn How to Use ChromeVox Next Screen Reader (Videos)

By Deborah Edwards-Onoro.

“…One of the new features I think many people may have overlooked in
Chrome 56 was the new ChromeVox screen reader…”

https://www.lireo.com/learn-to-use-chromevox-next-screen-reader-videos/

Modal Dialogs and Accessibility: A Tricky Minefield

By Shwetank Dixit.

“…One of the most common pain points we find are inaccessible modal
dialogs…”

http://blog.barrierbreak.com/2017/02/14/modal-dialogs-and-accessibility-a-tricky-minefield/

Utilitarianism, Pragmatism/ Practicalism, and Perfection

By Karl Groves.

“I feel strongly that every person has an intrinsic sense of what is
‘right’ and what is ‘wrong’…”

http://www.karlgroves.com/2017/02/21/ utilitarianism-pragmatism-practicalism-and-perfection/

+02: CASCADING STYLE SHEETS.

Deep Dive CSS: Font Metrics, line-height and vertical-align

By Vincent De Oliveira.

“Line-height and vertical-align are simple CSS properties. So simple
that most of us are convinced to fully understand how they work and
how to use them. But it’s not. They really are complex, maybe the
hardest ones, as they have a major role in the creation of one of the
less-known feature of CSS: inline formatting context…”

http://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align

Updated Working Drafts: CSS Display, CSS Sizing, CSS Box Alignment

By Tab Atkins Jr.

“The CSS Working Group has published several updated Working Drafts…”

https://www.w3.org/blog/CSS/2017/02/17/display-sizing-align-update/

A Box Alignment Cheatsheet

By Rachel Andrew.

“…I’m doing a lot of work around the CSS Grid Layout and related
specifications, and have created some detailed notes for myself about
how various things work and interact with each other…”

https://www.rachelandrew.co.uk/archives/ 2017/02/20/a-box-alignment-cheatsheet/

Toolbars, Keyboards, and the Viewports

By Peter-Paul Koch.

“All mobile browsers have two viewports. The layout viewport
constrains your CSS - width: 100% means 100% of the layout viewport -
while the visual viewport describes the area of the page the user is
currently seeing. This visualisation of the two viewports might be
useful as a reminder. Today’s article studies what happens when these
viewports change size. It also studies the resize event…”

https://medium.com/samsung-internet-dev/ toolbars-keyboards-and-the-viewports-10abcc6c3769

+03: DRUPAL.

Drupal 8’s Web Accessibility Improvements

By Rich Lawson.

“…Drupal 8 comes packed with loads of new web accessible features
that help people with disabilities drastically improve their website
navigation…”

https://thoughts.duoconsulting.com/ blog/drupal-8-web-accessibility-improvements

+04: EVALUATION & TESTING.

5 Steps to Quick-Start A/B Testing

By Jennifer Leigh Brown.

“The debate was about the best color for the toolbar on the webpage…”

http://www.uxbooth.com/articles/5-steps-to-quick-start-ab-testing/

+05: EVENTS.

State of UX: Trends in Tools and Techniques
March 9, 2017.
Minneapolis, Minnesota, U.S.A.
http://uxpamn.org/event-2471158

JS Remote Conf
March 15-16, 2017.
Online
https://devchat.tv/conferences/js-remote-conf-2017

Midwest PHP
March 17-18, 2017.
Bloomington, Minnesota, U.S.A.
http://2017.midwestphp.org/

UX in the City Oxford
March 20-21, 2017.
Oxford, England, United Kingdom.
http://uxinthecity.net/2017/oxford/

Front
May 9-10, 2017. (Correct date)
Salt Lake City, Utah, U.S.A.
https://www.frontutah.com/saltlakecity

+06: HTML5.

Accessible Form Placeholder Text

By Zoltan Hawryluk.

“…I personally am not a huge fan of placeholder text, and avoid them
whenever possible (the simplest solutions are the ones easiest to
implement). Any form field hints should be marked up using
aria-labelledby instead. However, if for some reason you really need
to use placeholder text, this script is a good tool to have in your
back pocket”

http://www.useragentman.com/blog/ 2017/02/20/accessible-form-placeholder-text/

Beyond XML: Making Books with HTML

By Dave Cramer.

“An overview of Hachette’s trade book publishing system.”

https://www.xml.com/articles/2017/02/20/beyond-xml-making-books-html/

+07: JAVASCRIPT.

JavaScript Without Loops

By James Sinclair.

“…These iteration functions are a great example of why (well-chosen)
abstractions are so useful and elegant…”

http://jrsinclair.com/articles/2017/javascript-without-loops/

JavaScript’s Journey Through 2016

By Tara Manicsic.

“…Every year there seems to be more and more ways to use JavaScript
and 2016 turned out to be no different…”

http://developer.telerik.com/topics/ web-development/javascripts-journey-2016/

+08: MISCELLANEOUS.

What is a Web Developer?

By Peter-Paul Koch.

“Last week I was the target of a good old-fashioned internet witch
hunt when I dared to propose that you should be able to work without
tools (frameworks, libraries, and so on) in order to be a web
developer…”

http://www.quirksmode.org/blog/archives/2017/02/what_is_a_web_d.html

On Design Tools and Processes

By Viljami Salminen.

“…Our design products are becoming more and more dynamic, but our
tools still treat them as blank canvases to paint on. Why?…”

https://viljamis.com/2017/design-tools-processes/

The Secret History of Hypertext

By Alex Wright.

“The conventional history of computing leaves out some key thinkers…”

https://www.theatlantic.com/technology/archive/ 2014/05/in-search-of-the-proto-memex/371385/

+09: NAVIGATION.

Hamburger Menus Hurt UX Metrics (Video)

By Kara Pernice.

“Summary of user research on the effect of reduced visibility of the
main navigation on websites when used in both mobile and desktop
settings.”

https://www.youtube.com/watch?v=rdeoPuPzONg

+10: STANDARDS, GUIDELINES & PATTERNS.

Validating HTML5 Documents

By Louis Lazaris.

“… the validator will let you know if your markup conflicts with the
specification, so it’s still a valuable tool when developing your
pages…”

https://www.sitepoint.com/validating-html5-documents/

+11: TOOLS.

WAVE Accessibility Extension 1.0.3 (FireFox Extension)

By WebAIM.

The WAVE FireFox Extension is back: “Evaluate web accessibility within
the Firefox browser. When activated, the WAVE extension injects icons
and indicators into your page to give feedback about accessibility and
to facilitate manual evaluation.”

https://addons.mozilla.org/en-US/firefox/addon/wave-accessibility-tool/

+12: TYPOGRAPHY.

Getting Started with Variable Fonts

By Richard Rutter.

“The following is an unedited extract from my forthcoming book…”

http://clagnut.com/blog/2389/

Introducing OpenType Variable Fonts

By John Hudson.

“Version 1.8 of the OpenType font format specification introduces an
extensive new technology, affecting almost every area of the format.
An OpenType variable font is one in which the equivalent of multiple
individual fonts can be compactly packaged within a single font
file…”

https://medium.com/@tiro/https-medium-com-tiro- introducing-opentype-variable-fonts-12ba6cd2369

+13: USABILITY.

Beyond Usability: 3 User Experiences Reshaping Their Industries

By Sarah Gibbons.

“Rent the Runway, Uber, and Airbnb challenge the traditional
experiences of their industries.”

https://www.nngroup.com/articles/3-user-experiences-reshaping-industries/

Narrative Biases: When Storytelling HURTS User Experience

By Kathryn Whitenton.

“Over reliance on narrative details and assumptions about
cause-and-effect explanations can lead to errors in judgment by UX
practitioners.”

https://www.nngroup.com/articles/narrative-biases/

The UX of Voice: The Invisible Interface

By Jason Amunwa.

‘…In this post, we’re going to explain some of the profound
implications of the rise of voice interaction for UX design. Just as
the internet began as a playground of raw new technical capability
that embraced the guiding principles of intuitive, user-friendly
product design over time, so too I see today’s voice-enabled tools and
devices in their infancy, with limitless potential ready to be
unlocked through innovative, user-centered design…”

http://www.dtelepathy.com/blog/design/ the-ux-of-voice-the-invisible-interface

How to Not Utterly Ruin Your Mobile App’s User Interface

By Luke Konior.

“…I’ve seen every one of these mistakes made by designers of all
levels of experience. There’s no shame in that - a good UI design is a
multifaceted challenge, and it’s easy to overlook some aspects of
it…”

https://medium.freecodecamp.com/how-to-not-
utterly-ruin-your-mobile-apps-user-interface-8433cee6477d

[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

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

[Issue ends.]

.

.

-=-=-=-=-=-=-=-=-=-=-=-

*
Groups.io Links:

You receive all messages sent to this group.

View/Reply Online (#687):

https://groups.io/g/SportMed/message/687

View All Messages In Topic (1):

https://groups.io/g/SportMed/topic/4414635

*
*
-=-=-=-=-=-=-=-=-=-=-=-

Attachments area
Preview YouTube video Hamburger Menus Hurt UX Metrics (Kara Pernice)

Hamburger Menus Hurt UX Metrics (Kara Pernice)
Advertisements
Standard

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s