[DigitalScholarship] [webdev] Web Design Update: October 6, 2016

 

.

.

Date: Thu, 6 Oct 2016 06:30:31 -0500
From: Laura Carlson <lcarlson@d.umn.edu>
To: webdev <webdev@d.umn.edu>
Subject: [webdev] Web Design Update: October 6, 2016

+++ WEB DESIGN UPDATE.

– Volume 15, Issue 15, October 6, 2016.

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

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

05: INFORMATION ARCHITECTURE.

06: JAVASCRIPT.

07: MISCELLANEOUS.

08: STANDARDS, GUIDELINES & PATTERNS.

09: TOOLS.

10: TYPOGRAPHY.

11: USABILITY.

12: XML.

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

[Contents ends.]

++ SECTION ONE: New references.

+01: ACCESSIBILITY.

Alternative Text and Images

By Ire Aderinokun.

“…most websites are not made up of pure text. We have other types of
content that is not so malleable, like images. To make these
alternative forms of content more accessible, we need to provide a
text alternative of them…”

https://bitsofco.de/alternative-text-and-images/

Building Accessible Websites: What Not To Do

By Richard Gauder.

“…It’s always best to put the chocolate chips in the cookie before
baking them…”

https://www.linkedin.com/pulse/ building-accessible-websites-what-do-richard-gauder-1

Accessibility from the Ground Up: Build Captions and Usable Design

into All eLearning

By Pamela Hogle.

“Many eLearning developers assume that accessibility features, like
captioning, can be added if someone requests an accommodation. But
it’s not always possible to make existing content accessible;
designing for barrier-free access avoids potential problems…”

http://www.learningsolutionsmag.com/articles/2076/ accessibility-from-the-ground-up-build-captions-and- usable-design-into-all-elearning/

2016 Legal Update on Digital Accessibility Cases

By Lainey Feingold.

Webinar recording and slide deck of Lainey Feingold’s September 29th
presentation.

http://www.3playmedia.com/resources/webinars/legal-update-09-29-2016/

Stop Talking About Accessibility. Start Talking About Inclusive Design.

By Paul Boag.

“By talking about accessibility we marginalise it to being about
disability. In truth, making your digital services accessible benefits
everybody…”

https://envato.com/blog/stop-talking- accessibility-start-talking-inclusive-design/

Accessible Instructional Materials Bill Introduced with Higher Ed.,

Disability, Publishing, and Tech Groups’ Support

By Jarret Cummings.
“U.S. Representatives Phil Roe (R-TN) and Joe Courtney (D-CT) have
introduced the Accessible Instructional Materials in Higher Education
(AIM-HE) Act into Congress. …”

https://er.educause.edu/blogs/2016/9/ accessible-instructional-materials-bill-introduced

+02: CASCADING STYLE SHEETS.

Grid Layout is a Much Needed Step-Change for CSS

By Matt Hinchliffe.

“…CSS grid layout is nothing like the CSS grids we’re used to…”

http://maketea.co.uk/2016/09/28/css-grid-layout-is-a-step-change.html

CSS Grid Layout Module Level 1 at Candidate Recommendation

By Rachel Andrew.

“Today CSS Grid Layout has transitioned to become a Candidate
Recommendation. In this post I explain what that means, and encourage
you to get involved in these final months before we can really start
to use it…”

https://rachelandrew.co.uk/archives/2016/09/29/ css-grid-layout-module-level-1-at-candidate-recommendation/

Will We be Flattening our HTML for CSS Grids?

By Chris Coyier.

“The good news is that, as of just a few days ago, the spec is really
stable and has entered ‘Candidate Recommendation’ status. Since all
browsers have been developing against the spec, it’s likely that
widespread non-prefixed ready-to-go support will drop in all stable
browsers fairly soon. The bad news is that it will probably do-so
without subgrid support, a point that Rachel underscored well in her
talk…”

https://css-tricks.com/will-flattening-html-css-grids/

Debug Your CSS with Outline Visualizations

By Karl Dubost.

“…I often use a trick for having a better understanding of the way
the elements flow with regards to each other…”

http://www.otsukare.info/2016/10/05/debugging-css

Can We Stop Bad-Mouthing CSS in Developer Talks, Please?

By Christian Heilmann.

“…CSS is a very expressive language to build complex interfaces that
cater to a lot of varying user needs. If you can’t get your head
around that – and I am admitting that I can’t anymore – have the
decency to not belittle those who do. Applaud them for their efforts
and work with them instead.”

https://www.christianheilmann.com/2016/10/05/ can-we-stop-bad-mouthing-css-in-developer-talks-please/

+03: EVENTS.

The Paciello Group Meetup
October, 13, 2016.
Brighton, England, United Kingdom.
https://www.paciellogroup.com/blog/2016/10/ paciello-group-meetup-brighton-thursday-13th/

New CSS Layout
October 17-18, 2016.
Boston, Massachusetts, U.S.A.
http://www.oreilly.com/live-training/new-css-layout.html

DOMCODE
November 4, 2016.
Utrecht, The Netherlands.
http://conference.domcode.org/

Accessibility Toronto Camp
November 5, 2016.
Toronto, Canada.
http://www.accessibilitycampto.org/

CSS Animation
November 17-18, 2016.
Boston, Massachusetts, U.S.A.
http://www.oreilly.com/live-training/css-animation.html

+04: HTML5.

Firefox 49 Supports the HTML5 <details> and <summary> Elements

By Marco Zehe.

“As you may or may not have heard, Firefox 49 supports the HTML5
<details> and <summary> elements. Both full keyboard support and
support for assistive technologies is also available right from the
start.”

https://www.marcozehe.de/2016/10/05/ firefox-49-supports-the-html5-details-and-summary-elements/

+05: INFORMATION ARCHITECTURE.

How and When to Use an Affinity Diagram

By Jeff Sauro.

“…Creating an affinity diagram is a good first step for organizing
seemingly disconnected information. It can be low-tech (sticky notes)
or high-tech if you want to make it digital (and potentially involve
remote members). Because it is done in a group, it also has the added
benefit of allowing people to have a voice and contribute ideas.”

http://www.measuringu.com/blog/affinity-diagram.php

On Information Design (PDF)

By Petra Černe Oven and Cvetka Požar.

“The book you have before you is sediment, an old-fashioned document
that registers an event that, in Slovenia, could well represent a
utopian or at least an optimistic step into cutting-edge thought,
while, in its English version, it contributes important knowledge to
the existing, internationally recognized discipline we call
information design…”

http://www.mao.si/Upload/file/On-information-design_e-book%20.pdf

+06: JAVASCRIPT.

Add or Remove a CSS Class with Vanilla JavaScript

By Yaphi Berhanu.

“Sometimes you need to add or remove a CSS class with JavaScript, and
you don’t want to include an entire library like jQuery to do it…”

https://www.sitepoint.com/add-remove-css-class-vanilla-js/

+07: MISCELLANEOUS.

The Web Belongs To All of Us: Q&A with the Web’s Inventor, Sir Tim Berners-Lee

By Sir Tim Berners-Lee.

“…The Web…is vital to democracy and now more critical to free
expression than any other medium. The gap in empowerment between those
who use it and those who cannot is growing. For those reasons, I
believe Internet access should be a right…”

http://www.fordfoundation.org/ideas/equals-change-blog/posts/ the-web-belongs-to-all-of-us-qa-with-the-web-s-inventor-sir- tim-berners-lee/

Léonie Watson Talking Web APIs at Paris Web

By Bernard Tyers.

“…I had a quick chat with Léonie..”

http://www.ei8fdb.org/thoughts/2016/10/leonie-watson-talking-web-apis-at-paris-web/

+08: NAVIGATION.

Save Us From Skip Links

By George Gooding.

Time and time again web developers resort to hacks when web browser
vendors fail to implement basic functionality. Skip links are a hack,
browsers need to provide a solution.

https://www.epinova.no/en/blog/save-us-from-skip-links/

Why the Footer is the New Site Map

By UX Movement.

“Years ago it was common practice to place a link to your sitemap in
the footer navigation. Those days are over because the footer itself
has become the new site map…”

http://uxmovement.com/navigation/why-the-footer-is-the-new-site-map/

+09: TOOLS.

Landmarks (browser extension) (Hat Tip to Jennifer Sutton)

By Matthew Tylee Atkinson.

“Allows you to navigate a web page via WAI-ARIA landmarks, using the
keyboard or a pop-up menu…”

http://matatk.agrip.org.uk/landmarks/

+10: TYPOGRAPHY.

Your Body Text Is Too Small

By Christian Miller.

“Why website body text should be bigger, and ways to optimize it…”

https://medium.com/@xtianmiller/your-body-text-is-too-small-5e02d36dc902

Intro to Variable Fonts in Web Design

By Jake Rocheleau.

“There’s been talk for years of creating fonts that come with
adjustable sizes by default…”

http://designmodo.com/variable-fonts/

+11: USABILITY.

6 Tips for Successful Personalization

By Amy Schade.

“Well-designed personalization carefully considers the creation of
roles or types, ensures content is available for those roles, goes
beyond content, and retains some user control over the experience.”

https://www.nngroup.com/articles/personalization/

What if Your Icon Choices Ruined Your Work?

By  Catarina Borges.

“…For a good experience and UI interaction without any kind of
doubt, confusion or frustration, when you use an icon give it, in some
way, a label. It is really important, especially for icons that want
to achieve the completion of a task…”

https://www.sitepoint.com/what-if-an-icon-choice-ruined-your-work/

100 UX Design Quotes to Inspire and Motivate You

By Laura Patterson.

“…We’ve put together a compilation of 100 inspiring, tweetable
quotes from some of our favorite influencers and experts in the UX
community- even including some from before the term ‘UX’ had been
coined…”

http://www.intechnic.com/blog/ 100-ux-design-quotes-to-inspire-and-motivate-you/

+12: XML.

Hiding Inline SVG Icons from Screen Readers

By Roger Johansson.

“Icon fonts are finally being phased out in favour of a technology
that’s more fit for purpose: SVG. There are many tutorials and guides
that describe different ways in which you can use SVG icons, which is
great. I do however see an issue related to accessibility pop up now
and again, so I’d like to share a little tip about that.”

http://www.456bereastreet.com/archive/201609/ hiding_inline_svg_icons_from_screen_readers/

The SVG Path Syntax: An Illustrated Guide

By Chris Coyier.

“The <path> element in SVG is the ultimate drawing element…”

https://css-tricks.com/svg-path-syntax-illustrated-guide/

SVG has More Potential

By Mike Riethmulle.

“I think many of us are not using SVG to its full potential…”

https://madebymike.com.au//writing/svg-has-more-potential/

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

[Issue ends.]

.

.

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

.

.

.

Groups.io Links:

You receive all messages sent to this group.

View This Message (#174):

https://groups.io/g/DigitalScholarship/message/174

.

.

Advertisements

Author: jwneastro

I am a reference librarian at Temple University and a specialist in bibliographic database searching.

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