+++ WEB DESIGN UPDATE. - Volume 17, Issue 03, July 12, 2018. An email newsletter to distribute news and information about web design and development. ++ISSUE 03 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: EVALUATION & TESTING. 04: EVENTS. 05: HTML. 06: JAVASCRIPT. 07: MISCELLANEOUS. 08: STANDARDS, GUIDELINES & PATTERNS. 09: TOOLS. 10: USABILITY. SECTION TWO: 11: What Can You Find at the Web Design Reference Site? [Contents ends.] ++ SECTION ONE: New references. +01: ACCESSIBILITY. Introducing Accessibility for Teams By Maya Benari. "…We distilled what we learned into a quick-start guide for embedding accessibility and inclusive design into a team's workflow…Each person on a team, whether you're a manager, designer, or developer, has a role to play. Your responsibilities are different depending on your role…" https://digital.gov/2018/07/10/introducing-accessibility-for-teams/ Accessibility Developer Guide By Access for All and Accessibility Alliance. "If you want to learn about accessible website development, you are at the right place…" https://www.accessibility-developer-guide.com/ Learn to Create Inclusive Design Experiences with Accessibility at a Glance Videos By Deborah Edwards-Onoro. "…The series aims to offer helpful tips and recommendations for creating inclusive design experiences, with short videos…" https://www.lireo.com/accessibility-at-glance-videos-inclusive-design/ Exploring WCAG 2.1 - 2.5.4 Motion Actuation By Becky Gibson. "Our series on the new WCAG 2.1 Success Criteria continues with the next success criterion within the new 2.5 Input Modalities guideline: 2.5.4 Motion Actuation…" https://knowbility.org/blog/2018/WCAG21-254MotionActuation/ The Current State of Modal Dialog Accessibility By Scott O'Hara. "…to truly get a handle on the current state of modal dialog accessibility, one should be aware of the current issues facing both native and custom (ARIA) modal dialogs…" https://developer.paciellogroup.com/blog/2018/06/the-current-state-of-modal-dialog-accessibility/ WCAG Checklist By Yale University. https://usability.yale.edu/web-accessibility/articles/wcag-checklist Settlement Agreement Between The United States of America and Teachers Test Prep Under the Americans With Disabilities Act By The US Department of Justice. "…TTP will ensure all of its online video content has captions. For the purposes of this agreement, captions are defined as the visual display of the audio portion of a video file that is consistent with the Web Content Accessibility Guidelines (WCAG) 2.0 AA Guideline 1.2.2 or Guideline 1.2.4 (for live video). TTP represents that its current closed captioning provided in its online videos is compliant with these guidelines…" https://www.ada.gov/ttp_sa.html +02: CASCADING STYLE SHEETS. Pattern Library First: An Approach For Managing CSS By Rachel Andrew. "CSS can be hard to manage across a project, especially when you need to include media queries for various breakpoints and fallbacks for older browsers. In this article, we will take a look at using Fractal to manage components which use CSS Grid…" https://www.smashingmagazine.com/2018/07/pattern-library-first-css/ Gallery Grid With CSS Grid By Laura Kalbag. "CSS Grid Layout is great. My site layout is fairly simple, so had no need for lots of grid-I only used it for lining up comments and avatars on old blog posts." https://laurakalbag.com/gallery-grid-with-css-grid/ +03: EVALUATION & TESTING. The Practical Role of Automated Web Accessibility Testing Tools By Hiram Kuykendall. "…By understanding the limitations and costs associated with automated accessibility testing packages, organizations can strengthen their existing accessibility programs and create long-term, sustainable, accessible websites and web applications." https://www.microassist.com/digital-accessibility/role-web-accessibility-testing-tools/ Field Studies Should Inform Intranet Redesign By Therese Fessenden. "Observing users in their natural work environment provides realistic context and representative data, unveils mismatches between users' mental models and designers' beliefs about them, and builds empathy with end users." https://www.nngroup.com/articles/field-studies-intranet-redesign/ Five Takeaways from the UXPA 2018 Conference By Tom Tullis. "When I attend a conference I'm pretty happy if I come away from it with at least one practical takeaway per day of the conference…" https://medium.com/@tomtullis/five-takeaways-from-the-uxpa-2018-conference-17e1b2e48c48 Interpreting Single Items from the SUS By Jeff Sauro. "…Single measures, such as satisfaction, brand attitude, task ease, and likelihood to recommend, also exhibit sufficient test-retest reliability and little if anything may be gained by using multiple items…" https://measuringu.com/sus-items/ +04: EVENTS. JSConf US 2018 August 21-23, 2018. Carlsbad, California, U.S.A. https://2018.jsconf.us/ CoderCruise August 30-September 3, 2018. Fort Lauderdale, Florida, U.S.A. https://www.codercruise.com/ Nordic.js September 6-7, 2018. Stockholm, Sweden http://nordicjs.com/ The UX Conference September 7, 2018. London, England, United Kingdom http://theuxconf.com/ DrupalCon Europe September 10-14, 2018. Darmstadt, Germany https://www.drupaleurope.org/ +05: HTML. Demand Refunds for Invalid HTML in Courses By Adrian Roselli. "…If you are taking courses to improve your development skills or learn new technologies, whether online or in real life, you should be comfortable demanding a refund if you know the material is wrong…" http://adrianroselli.com/2018/07/demand-refunds-for-invalid-html-in-courses.html +06: JAVASCRIPT. Searchbox Role By Suman Damera. "…if this search form control cannot be constructed with html input type search for some reason then we are left with the option of using new aria1.1 searchbox role to make this custom control accessible…" http://www.sumandamera.com/searchbox-role/ +07: MISCELLANEOUS. 9 Famous Faces on What they Love About the Web By Web Foundation. "For the past three decades, the internet and the web have been an empowering force for forging connections, learning, earning, and building global networks. Let's take a moment to appreciate the power of connectivity. Here's what some famous faces have to say about it…" https://webfoundation.org/2018/07/9-famous-faces-on-what-they-love-about-the-web/ +08: STANDARDS, GUIDELINES & PATTERNS. Guidelines for Brutalist Web Design By David Copeland. "Raw content true to its construction…" https://brutalist-web.design/ Components and Concerns By Jeremy Keith. "…My point is this: Separating structure, presentation, and behaviour is a good idea. Separating an interface into components is a good idea. Those two good ideas are not in conflict…" https://adactio.com/journal/14103 Web Components in 2018 By James Milner. "…Web Components are not a single technology. Instead, they are series of browser standards defined by the W3C allowing developers to build components in a way the browser can natively understand. These standards include: HTML Templates and Slots…Shadow DOM… Custom Elements…" https://www.sitepen.com/blog/2018/07/06/web-components-in-2018/ +09: TOOLS. Augmenting Empathy: Simulating Low-Vision Conditions with CSS, SVG and WebRTC (Video) By Shwetank Dixit. Shwetank's CSSconf EU 2018 presentation. "…This talk is a story of how I talked to persons with low vision and their family members, and tried to make tools to help people understand how people with various low-vision conditions see the world. Through the power of CSS, SVG and WebRTC, we’ll take a look at how to simulate low-vision conditions and what it taught me about empathy…" https://www.youtube.com/watch?v=aWoeK2SFSpI Accessibility Inspector in Mozilla FireFox 61 and Beyond By Rakesh Paladugula. "Accessibility Inspector is now built into Mozilla FireFox 61. This feature will give a wonderful opportunity for the accessibility testers and consultants to review the accessibility properties of any element and provide a detailed description for the audit report. In this article let us understand , how to enable it and use the feature…" http://www.maxability.co.in/2018/07/accessibility-inspector-in-firefox/ +10: USABILITY. Hick's Law: Designing Long Menu Lists (Video) By Katie Sherwin. "Hick's Law (or the Hick-Hyman Law) says that the more choices you present to your users, the longer it takes them to reach a decision. However, combining Hick's Law with other design techniques can make long menus easy to use." https://www.youtube.com/watch?v=pbbTOzArcWQ The Availability Heuristic (Video) By Lexie Martin. "People make decisions based on the information that is most readily available to them. Understanding how the availability heuristic works will help you design for the way people think." https://www.youtube.com/watch?v=vqmLIbGV568 Better Research, Better Design, Better Results By Sam Wright and James Macnamara. "Most web professionals like to see their influence felt in web design projects as early as possible, in order to make sure what they have to say gets heard. Yet often SEOs and content marketers are asked to step in post-launch when the design work is more or less complete. However, there are very real benefits, ranging from better UX to lower costs to using SEO-focused data such as keyword research as a springboard for design and development, rather than having to turn to it further down the line." https://www.smashingmagazine.com/2018/07/better-research-design-results/ No More FAQs: Create Purposeful Information for a More Effective User Experience By Lisa Wright. "Putting the right information in the right place to best support user (and company) goals requires carefully targeted content and good information architecture (IA) … and definitely no FAQs! However attractive the FAQ 'solution' might seem at times, using it makes information hard to find, access and maintain, and generally hinders task completion. Discussing the limitations of-and alternatives to-FAQs, Lisa Wright is on a mission to banish them forever, or at the very least make them more effective if you have to include them." http://alistapart.com/article/no-more-faqs-create-purposeful-information-for-a-more-effective-user-experi New Research Findings on 'Accounts and Self-Service' UX By Edward Scott. "At Baymard the research team has just spent 2,866 hours usability testing and researching e-commerce Accounts & Self-Service features, layouts, content, and designs - leading to our new research study on Accounts & Self-Service UX.…" https://baymard.com/blog/new-research-accounts-self-service [Section one ends.] ++ SECTION TWO: +11: 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.]