[webdev] Web Design Update: November 30, 2017

classic Classic list List threaded Threaded
1 message Options
Reply | Threaded
Open this post in threaded view
|

[webdev] Web Design Update: November 30, 2017

David Dillard
Administrator



.




Date: Thu, 30 Nov 2017 06:29:10 -0600
From: Laura Carlson <[hidden email]>
To: webdev <[hidden email]>
Subject: [webdev] Web Design Update: November 30, 2017



+++ WEB DESIGN UPDATE.


- Volume 16, Issue 23, November 30, 2017.



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



++ISSUE 23 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: EVALUATION & TESTING.

05: EVENTS.

06: INFORMATION ARCHITECTURE.

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.




24 Accessibility

By Experts From Around the World.

A series of 24 articles devoted to digital accessibility begins
December 1 and runs through December 24.

http://24a11y.com



Beware Smushed Off-Screen Accessible Text

By J. Renée Beach.

"My colleague, Matt King, encounters a lot of friction when using web
UIs. Matt uses a screen reader to access the web…"

https://medium.com/@jessebeach/ 
beware-smushed-off-screen-accessible-text-5952a4c2cbfe



How to Test Video Players for Accessibility

By Patrick Loftus.

"One-third of all online activity is spent watching video content, and
video traffic accounts for 69% of all global consumer internet
traffic…"

http://www.3playmedia.com/2017/11/29/test-video-players-accessibility/



3 Easy Steps to City Website Accessibility for WCAG 2.0 AA

By Martin Lind.

"Guest columnist Martin Lind has website accessibility tips for
headings and tags, required for WCAG 2.0 AA…"

https://efficientgov.com/blog/2017/11/27/ 
3-easy-steps-city-website-accessibility-wcag-2-0-aa/



J. Courtney Cunningham Settles Website Accessibility Lawsuit Against
City of Miami

By PRWEB.

"Suit guarantees closed captioning for all videos on the city's website…"

http://www.prweb.com/releases/2017/11/prweb14956094.htm




+02: CASCADING STYLE SHEETS.




On the Growing Popularity of Atomic CSS

By Ollie Williams.

"Even if you consider yourself a CSS expert, chances are that at some
point on a large project you've had to deal with a convoluted,
labyrinthine stylesheet that never stops growing. Some stylesheets can
feel like a messy entangled web of inheritance…"

https://css-tricks.com/growing-popularity-atomic-css/



Common Responsive Layouts with CSS Grid (and some without!)

By Jo Franchetti.

"Example code for you to try out, change and make your own…"

https://medium.com/samsung-internet-dev/common- 
responsive-layouts-with-css-grid-and-some-without-245a862f48df



Learn CSS Grid in 5 Minutes

By Per Harald Borgen.

"A quick introductions to the future of website layouts…"

https://medium.freecodecamp.org/learn-css-grid-in-5-minutes-f582e87b1228



Performance of CSS Selectors Is Still Irrelevant

By Jens Oliver Meiert.

"Selector performance is not something to optimize for…"

https://meiert.com/en/blog/performance-of-css-selectors-2/




+03: COLOR.




OS High Contrast versus Inverted Colors

By Adrian Roselli.

"There are different ways to make a web page more easy to read, but
there are two options that come directly from the operating system
that many developers and designers seem to confuse — high contrast and
inverted colors…"

http://adrianroselli.com/2017/11/ 
os-high-contrast-versus-inverted-colors.html




+04: EVALUATION & TESTING.



DIY Recruiting: How to Find Participants for Your Research

By Ania Mastalerz.

"One thing is inevitable in user research - at some point you're going
to have to find some people to take part in it. Finding them isn't
always easy…"

https://medium.com/mixed-methods/
diy-recruiting-how-to-find-participants-for-your-research-6f9a05dd1a33



Can I Leave This One Out? The Effect of Dropping an Item From the SUS

By James R. Lewis and Jeff Sauro.

"There are times when user experience practitioners might consider
using the System Usability Scale (SUS), but there is an item that just
doesn't work in their context of measurement…"

http://www.uxpajournal.org/dropping-item-sus/



SUPR-Qm: A Questionnaire to Measure the Mobile App User Experience

By Jeff Sauro and Paree Zarolia.

"In this paper, we present the SUPR-Qm, a 16-item instrument that
assesses a user's experience of a mobile application…"

http://www.uxpajournal.org/supr-qm-measure-mobile-ux/



True Intent Survey: Understanding Why Users Visit Your Site

By Chris Gray.

"…The key ingredient to running a successful True Intent Survey is an
appropriate level of granularity with the reason for visiting (top
tasks)…"

http://www.nomat.com.au/true-intent-survey/



Predicting Post-Task User Satisfaction With Weibull Analysis of Task
Completion Times

By Bernard Rummel.

"Task completion times have been shown to follow Weibull
distributions, with parameters reflecting different aspects of the
task solution process…"

http://www.uxpajournal.org/user-satisfaction-weibull-task-times/



3 Signs Your Team Isn't Doing Enough User Research

By Sarah Doody.

"…My advice about doing research is simple: start small, but just
start. Don't let yourself or your team argue subjectively in another
feature debate. Don't launch another feature that's more complicated
than it needs to be. And don't confuse your users with with a poor
first experience that doesn't solve an immediate problem for them."

https://uxmastery.com/3-signs-team-isnt-enough-user-research/




+05: EVENTS.




Digital Accessibility Lightning Talks & Holiday Social
December 6, 2017.
Chicago, Illinois, U.S.A.
https://www.meetup.com/a11ychi/events/238768965/
Live stream: https://goo.gl/jrovdH
Live captions: https://goo.gl/ga8zxN



Inclusive PDFs by Design
December 12, 2017.
Online
http://aem.cast.org/about/events/2017/12/inclusive-pdfs-by-design.html



Mobile Screen Readers 101 - Hands On for Developers & Designers
January 4, 2018.
Chicago, Illinois, U.S.A.
https://www.meetup.com/a11ychi/events/237005990/



PEAT Talks: Expanding Accessibility Awareness in Higher Ed
January 18, 2018.
Online.
http://www.peatworks.org/content/webinars/2018/01/Teach-Access



Smashing Conf London 2018
February 7-8, 2018.
London, England, United Kingdom
https://www.smashingmagazine.com/events/london-2018/



Advanced CSS Layouts With Flexbox and CSS Grid
February 9, 2018.
London, England, United Kingdom
https://www.smashingmagazine.com/workshops/ 
advanced-css-layouts-with-flexbox-and-css-grid-london/



Webstock
February 12-16, 2018.
Wellington City, New Zealand
https://www.webstock.org.nz/18/




+06: INFORMATION ARCHITECTURE.




Generating Wireframe Boxes with CSS and HTML5

By Eric A. Meyer.

I was recently noodling around with some new layout ideas for An Event
Apart's speaker pages (e.g., Chris Coyier's or Jen Simmons') and
wanted to share the ideas with other members of the team.  But what I
really wanted to show was wireframes to convey basic arrangement of
the pieces, since I hadn't yet done any time polishing details…"

http://meyerweb.com/eric/thoughts/2017/11/27/ 
generating-wireframe-boxes-with-css-and-html5/




+07: JAVASCRIPT.




A Content Slider

By  Heydon Pickering.

"Carousels (or 'content sliders') are like men. They are not literally
all bad - some are even helpful and considerate. But I don't trust
anyone unwilling to acknowledge a glaring pattern of awfulness. Also
like men, I appreciate that many of you would rather just avoid
dealing with carousels, but often don't have the choice. Hence this
article…"

https://inclusive-components.design/a-content-slider/




+08: MISCELLANEOUS.




If You're Going Out Of San Francisco… (Video)

By Bruce Lawson.

Bruce's ffconf 2017 presentation.

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




+09: NAVIGATION.




Global Navigation to Improve Website

By Priscilla Esser.

"When you're designing a new website, application, or other product,
you always start with the global idea and structure before addressing
more detailed issues. …"

https://www.interaction-design.org/literature/ 
article/implement-global-navigation-to-improve-website-usability




+10: TOOLS.




Web Captioner

By  Curt Grimes.

"Web Captioner is a web-based speech recognition tool that displays a
real-time transcription in your browser. "

https://webcaptioner.com/help/general/what-is-web-captioner/




+11: TYPOGRAPHY.




Typography for Glanceable Reading: Bigger Is Better

By Page Laubheimer.

"Fonts to support glancing at individual words should be larger, in
noncondensed widths, and uppercase over lowercase."

https://www.nngroup.com/articles/glanceable-fonts/



Centered Text is Good for Wedding Invitations and Wine Labels, not for the Web

By Deborah Edwards-Onoro.

"…Improve readability of your content by using left-justified text
instead of centered text. It's easier and faster to read text that
doesn't force the reader to search for the beginning of each line."

https://www.lireo.com/centered-text-is-good- 
for-wedding-invitations-and-wine-labels-not-for-the-web/




+12: USABILITY.




Zigzag Image-Text Layouts Make Scanning Less Efficient

By Kim Flaherty.

"Decorative images used in an alternating list layout caused users to
stumble when scanning the page in an eyetracking study. Users scanned
efficiently on pages where text and imagery were vertically aligned."

https://www.nngroup.com/articles/zigzag-page-layout/



Dark Patterns Harm Usability

By Zip Board.

"Any tricks on websites and apps that make users sign up for or buy
things they did not intend to, or mislead and manipulate users are
called dark patterns…"

https://blog.zipboard.co/dark-patterns-harm-usability-5b75e293e7a7



Are Notifications A Dark Pattern?

By Andrew Wilshere.

"Have you ever had a nightmare where you were literally drowning in
little red notification badges…"

http://trydesignlab.com/blog/are-notifications-a-dark-pattern-ux-ui/



Form Field Usability: Consider Using Localized Input Masks for 'Phone'
and Other Restricted Inputs (64% Don't)

By Edward Scott.

"Input masks can help users enter data in restricted inputs, but there
are many details to get right to ensure input masks work well for
users…"

https://baymard.com/blog/input-masking-form-field



Video Backgrounds Suck. Ban Them From Your Website

By Michiel Heijmans.

"'I just love those video backgrounds and we need them on our new
website.' No, you don't…"

https://yoast.com/video-backgrounds-suck/



Ask Alexa (To Better Understand Your Users)

By John Cutler.

"I've been using this exercise recently, and have mentioned it at a
handful of conferences…"

https://hackernoon.com/ask-alexa-to-better-understand-your-users-cb3b1fd04a1c




[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:[hidden email]





[Issue ends.]




--