+++ WEB DESIGN UPDATE. - Volume 14, Issue 02, July 9, 2015. An email newsletter to distribute news and information about web design and development. ++ISSUE 02 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: 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. Styling Forms Accessibly By Amanda Cheung. "Let's take a look at how we can create better user experiences for users filling out our web forms through accessibility..." http://www.uxbooth.com/articles/styling-forms-accessibly/ Does a Simple Data Table Need to Expose Row and Column Headers? By Sailesh Panchang. "A question gets asked sometimes, "Do both row and column headers in a simple data table need to be identified as header cells?" This is not a rhetorical question. So here is my answer: Yes, a simple data table must have both row and column headers marked up..." http://www.mindoversight.com/?p=77 Data Tables: Exposing Row Headers By Sailesh Panchang. "Here is a bank statement presented as a simple data table. Rows in the table cannot be clearly identified by reference to a single attribute like transaction type or its date or description..." http://www.mindoversight.com/?p=83 3 Ways to Improve Accessibility in Your Designs By Deborah Edwards-Onoro. "No matter if you're a content strategist, designer, developer, or user experience professional, you've probably heard that creating accessible designs restricts you from being creative. It's an excuse, says Geri Coady, to not include accessibility in your workflow. Design for everyone, she says..." http://www.lireo.com/3-ways-improve-accessibility-designs/ Five Goofy Things Medium Did That Break Accessibility By Nick Santos. "Medium Engineering recently had an accessibility fixit. We found some goofy things! But we're trying to do better. We wanted to share some of what we found..." https://medium.com/medium-eng/five-goofy-things-medium-did-that-break-accessibility-3bc804ae818d Introducing AccessibleUX.org By AccessibleUX.org. "Welcome to AccessibleUX.org, a community of practice joining accessibility and user experience..." http://accessibleux.org/ Why Open Source Needs Accessibility Standards By Shaun Gillies. "As the user base of open source software continues to grow, developers have the responsibility of making their software accessible to all potential users, including people with disabilities..." http://opensource.com/life/15/2/why-open-source-needs-accessibility-standards +02: CASCADING STYLE SHEETS. Working with Shapes in Web Design By Robin Rendle. "When we make a new component on a website, we're effectively creating rectangles of different sizes, whether we realise it or not. But what happens if we want to experiment a little? How many different ways are there to make shapes?..." https://css-tricks.com/working-with-shapes-in-web-design/ Container Queries - Once More Unto the Breach By Mat Marquis. "Media queries have been the go-to tool in building responsive sites, allowing us to resize and recombine modules to suit multiple contexts, layouts, and viewports. But relying on fixed viewport sizes can quickly twist stylesheets into Gordian knots. We still need a future-friendly way to manage responsive CSS. Mat Marquis explores the problem and the progress toward the solution-and issues a rallying call." http://alistapart.com/article/container-queries-once-more-unto-the-breach Using CSS nth-child Selector By CSS Newbies. "CSS's nth-child selector is a very useful tool that allows you to single out only certain html elements to style without having to add any class or id tags." http://www.cssnewbie.com/using-css-nth-child-selector/ Pseudo-Classes, Pseudo-Elements, and Colon Notation By Ire Aderinokun. "...in this article, I explore the difference between pseudo-elements and pseudo-classes and which colon syntax should be used...." http://bitsofco.de/2015/pseudo-classes-pseudo-elements-and-colon-notation/ What a CSS Code Review Might Look Like By Geoff Graham. "...CSS can be written in a number of ways, and the best way is often subjective to the project. I'm definitely not trying to get dogmatic with a post like this, but instead lay the foundation for what could be a starting point for getting the most out of CSS before it is released..." https://css-tricks.com/what-a-css-code-review-might-look-like/ +03: DRUPAL. Accessibility Testing, Tools, and QUAIL By Kevin Miller. "...spoke with Kevin Miller, lead web developer at Cal State Monterey Bay. He's been working with Drupal for more than six years and is making great contributions, especially in the area of accessibility..." https://www.acquia.com/resources/podcasts/acquia-podcast-98-meet-kevin-miller-accessibility-quail +04: EVALUATION & TESTING. Why You Should Conduct an Expert Review Before User Testing By Jack Josephy. "Expert reviews are a technique used by UX researchers to evaluate the usability of a website or other digital product. Unlike usability testing with real users, expert reviews involve researchers running through standard website user journeys against a set of design guidelines or heuristics and taking notes on usability violations..." http://www.webcredible.com/blog-reports/blog/why-you-should-conduct-an-expert-review-before-user-testing How to Statistically Test Preference Data By Jeff Sauro. "...There are actually a number of reasonable ways to analyze preferences though (binomial test, confidence interval test, Chi-Square Goodness of Fit test and McNemar Exact test). I'll start with the approach I use and recommend: the binomial test with confidence intervals..." http://www.measuringu.com/blog/preference-data.php +05: EVENTS. NCDevCon Conference September 26-27, 2015. Raleigh, North Carolina U.S.A. http://ncdevcon.com/ Made by Few October 1-3, 2015. Little Rock, Arkansas, U.S.A. http://madebyfew.com/ Paris Web October 1-3, 2015. Paris, France https://www.paris-web.fr/ World Usability Congress October 7-8, 2015. Graz, Austria http://www.worldusabilitycongress.com/ Fronteers October 8-9, 2015. Amsterdam, The Netherlands https://fronteers.nl/congres/2015 +06: HTML5. Building a Semantic Calendar in HTML5 By Ian Devlin. "Recently, developer Wilfred Nas asked an interesting question on Twitter with regards to calendars being traditionally marked up in HTML with tables, and should they perhaps be lists instead. This got me thinking if we could make calendar markup more semantic using HTML5's time element..." http://www.iandevlin.com/blog/2015/07/html5/building-a-semantic-calendar-in-html5 Over the Edge: Web Components are an Endangered Species By Chris Heilmann. "...What we need is a base to start from. In the browser and in a browser that users have and doesn't ask them to turn on a flag. Without that, Web Components are doomed to become a 'too complex' standard that nobody implements but instead relies on libraries..." http://christianheilmann.com/2015/07/01/over-the-edge-web-components-are-an-endangered-species/ +07: JAVASCRIPT. An Introduction To WAI-ARIA's Roles, States, And Properties By Steven Bradley. "Assistive devices, like screen readers, need to understand web content and applications before they can communicate the information to persons with disabilities. Much of the time the HTML we write provides those semantics. Sometimes it doesn't, and that's where WAI-ARIA comes in..." http://www.vanseodesign.com/web-design/wai-aria-introduction/ WAI-ARIA: Awesome for Everyone (Video) By Matt Long. "Even if you're using proper HTML semantics, which is the foundation of an accessible site, people dependent on assistive technologies may still not interpret your site the way you intended, or they may still be missing out on some of your awesome content. ARIA is here to help. You'll learn a little about what semantic HTML is, and how you can use ARIA to your advantage." https://www.youtube.com/watch?v=RQ942hMBSXA Digital Publishing WAI-ARIA Module 1.0 By W3C. "Digital Publishing WAI-ARIA Module 1.0 is available for review as a First Public Working Draft. This specification extends WAI-ARIA 1.1 to facilitate automated processing and accessibility support for digital publications." http://www.w3.org/TR/dpub-aria-1.0/ Call For Review: https://lists.w3.org/Archives/Public/w3c-wai-ig/2015JulSep/0004.html +08: MISCELLANEOUS. 'Web Design Is Dead.' No, It Isn't. By Vitaly Friedman. "Every now and then we see discussions proclaiming a profound change in the way we design and build websites. Be it progressive enhancement, the role of CSS or, most recently, web design itself being dead. All these articles raise valid points, but I'd argue that they often lack objectivity and balance, preferring one side of the argument over another one..." http://www.smashingmagazine.com/2015/07/08/web-design-is-dead-no-it-isnt/ +09: NAVIGATION. A More Accessible Multi-Level Dropdown Navigation By Ire Aderinokun. "One of the biggest accessibility issues I see, and face myself, are with navigation menus, particularly multi-level drop-down menus. So this week, I decided to work on creating the most accessible multi-level dropdown menu I could..." http://bitsofco.de/2015/accessible-multi-level-dropdown-navigation/ +10: TOOLS. The W3C Mobile Checker By W3C. "The Mobile Checker is a tool for Web developers who want to make their Web page or Web app work better on mobile devices..." https://validator.w3.org/mobile-alpha/ +11: TYPOGRAPHY. Death to Icon Fonts By Seren Davies. Seren covers some of the problems icon fonts pose for dyslexics in this London Web Standards talk slide deck. https://speakerdeck.com/ninjanails/death-to-icon-fonts +12: USABILITY. Don't Force Users to Register Before They Can Buy By Amy Schade. "Guest checkout with optional registration on e-commerce sites simplifies the purchase process and invites users to register when they feel comfortable, rather than forcing unwanted registration." http://www.nngroup.com/articles/optional-registration/ Ad Placement for Mobile By Aurora Bedford. "Extra care is required when designing mobile page layouts that include advertisements, due to the limited screen real estate available. Ads must be displayed where they will not create false floors nor block users from reaching relevant content." http://www.nngroup.com/articles/ad-placement-mobile/ Moving from a World of Producing to a World of Connecting By Gerry McGovern. "Chaos on the Web is uncontrolled publishing, uncontrolled growth, uncontrolled production of features and things and stuff. We must move to a work culture that focuses as much on the maintenance and improvement of what we already have, as on the production of new stuff. But more importantly, we must develop our skills of linking and bridge building. Because in a network, that's where the real value lies." http://www.gerrymcgovern.com/new-thinking/moving-world-producing-world-connecting [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.]