+++ WEB DESIGN UPDATE. - Volume 12, Issue 16, October 11, 2013. An email newsletter to distribute news and information about web design and development. ++ISSUE 16 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: JAVASCRIPT. 07: MISCELLANEOUS. 08: NAVIGATION. 09: PHP. 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. Writing for the Web #2 - Titles and Headings By Linnea Ann Williams. "Titles and Headings are some of the most critical content on your website. They are content landmarks that readers use to navigate your page." https://swsblog.stanford.edu/blog/writing-web-2-titles-and-headings Edit (YouTube) Captions By Google. "Whether you're editing captions automatically generated by YouTube or tweaking captions you've added yourself, the captions in-line editor allows you to quickly and easily make changes to both the text and time codes of your captions..." https://support.google.com/youtube/answer/2734705 Designing User Interfaces for Older Adults - Myth Busters By Kate Finn. "...Many regard the WCAG 2.0 and other guidelines as being extensive-or even exhaustive-so might expect them to provide all the answers about how to design age-friendly user interfaces. However, these guidelines may not go far enough in covering special groups such as older adults. And they are simply recommendations, which companies often ignore..." http://uxmatters.com/mt/archives/2013/10/designing-user-interfaces-for-older-adults-myth-busters.php +02: CASCADING STYLE SHEETS. Flexbox Layout Isn't Slow By Paul Irish. "Old flexbox (display: box) is 2.3x slower than new flexbox (display: flex)..." http://updates.html5rocks.com/2013/10/Flexbox-layout-isn-t-slow Proportional Responsive - A Third Alternative By Niels Matthijs. "...The third option I'll be detailing here is little more than an expansion on the padding solution, but one that will save you the need for an extra structural wrapper at the cost of out of the box browser compatibility..." http://www.onderhond.com/features/css-techniques/proportional-responsive-alternative +03: DRUPAL. How to Make Your Navigation Responsive Using Responsive Menus Module in Drupal 7 By Ivan Zugec. "When you're building a Drupal website that is responsive, it's vital that the main menu is responsive as well. Users will have a tough time navigating your website if the menu hasn't been optimised for mobile devices. You don't have the luxury of a mouse cursor when you're on a mobile or tablet device, instead you navigate by using touch. So what solutions are out there for Drupal sites?" http://webwash.net/tutorials/how-make-your-navigation-responsive-using-responsive-menus-module-drupal-7 Simpler Password Reset in Drupal 7 By Dave Cohen. "Here's a helpful tip for maintainers of Drupal 7 websites, if you're as puzzled by the password reset process..." http://www.dave-cohen.com/node/1000020 Views and SQL Analogy - An Easier Way to Explain Views By Prasad Shirgaonkar. "With over 4 million downloads, Views is the most used contributed module in Drupal. Every Drupal developer knows that Views is an absolutely inevitable part of almost every Drupal project. Using Views, one can build anything from simple list of content, slideshows, jump menus to RSS feeds, JSON feeds through to contextual blocks of information and even PDF and Excel downloads of data. That's why, in the Drupal development universe, understanding & effectively using views separates novices from experts!" https://www.acquia.com/blog/drupal-views-sql-analogy-easier-way-explain-views Hands off the Content Management System By Paul Boag. "Is a content management system (CMS) a tool to democratise content creation or should it only be used by web professionals..." http://boagworld.com/content-strategy/cms/ +04: EVALUATION & TESTING. Setting the Foundation for Meaningful Critiques - Goals, Principles, Personas and Scenarios By Adam Connor. "In a recent post, Aaron talked about the importance of intent in the success of critique. Without the right intent on both sides critiques can go nowhere. Or worse, they can hurt the design, the designer and the relationship between the designer and the critics..." http://www.uie.com/articles/meaningful_critiques/ +05: EVENTS. 16th Annual Accessing Higher Ground Accessible Media, Web and Technology Conference November 4-8, 2013. Westminster, Colorado, U.S.A. http://accessinghigherground.org/ ConveyUX February 5-7, 2014. Seattle, Washington, U.S.A. http://conveyux.com/ Interaction14 February 5-8, 2014. Amsterdam, Netherlands http://interaction14.ixda.org/ IA Summit March 25-30, 2014. San Diego, California, U.S.A. http://2014.iasummit.org/ Lean UX - NYC April 10-12, 2014. New York, New York, U.S.A. http://leanuxnyc.co/nyc/ 2014 International Summit on Accessibility July 12-15, 2014. Ottawa, Ontario, Canada http://www5.carleton.ca/accessibilitysummit/ +06: JAVASCRIPT. Hitting the Accessibility High Notes with ARIA By Ted Drake. "ARIA (Accessible Rich Internet Applications) allows web developers to make their complex web applications accessible. This presentation will introduce ARIA attributes and how they establish landmarks, states, and roles. Learn how to use the basic elements that belong on every application. This presentation will also show more advanced topics, such as invalid form inputs, live regions, and fixing divitis." http://www.last-child.com/accessibility-high-notes-aria/ The JavaScript Console API By Axel Rauschmayer. "In most JavaScript engines, there is a global object console with methods for logging and debugging. That object is not part of the language proper, but has become a de facto standard, since being pioneered by the Firebug debugger. Since their main purpose is debugging, the console methods will most frequently be used during development and rarely in deployed code. This blog post gives an overview of the methods of console..." http://www.2ality.com/2013/10/console-api.html +07: MISCELLANEOUS. Development Is Design By Brad Frost. "...The unfortunate reality is that this startup is not alone in thinking that front-end development is something completely detached from the design process. That you can design everything in isolation then just throw things over the fence to get built...As multi-device Web design quickly becomes the norm, the throw-it-over-the-fence style of creating websites is going to be increasingly difficult. The modern Web design process requires intense collaboration between designers and front-end developers. Real collaboration and communication are difficult, but we must get over that awkwardness in order to overcome the design/development divide." http://bradfrostweb.com/blog/post/development-is-design/ Cards Are Fast Becoming the Best Design Pattern for Mobile Devices By Paul Adams. "We are currently witnessing a re-architecture of the web, away from pages and destinations, towards completely personalised experiences built on an aggregation of many individual pieces of content..." http://insideintercom.io/why-cards-are-the-future-of-the-web/ +08: NAVIGATION. The Need to Simplify Menus and Links By Gerry McGovern. "...Websites should be managed on the principle of self-service, and the key driver of self-service is time..." http://www.gerrymcgovern.com/new-thinking/need-simplify-menus-and-links Building an Accessible Tab Panel - An ARIA Example By Lisa Seeman. "This post is part of my series in using ARIA. This post shows how to make a tab panel accessible using ARIA..." http://www.deque.com/building-accessible-tab-panel-aria The Curious Case of Breadcrumbs in HTML By Jens O. Meiert. "Putting everything together, the simplest adequate markup for breadcrumbs seems to be..." http://meiert.com/en/blog/20131003/breadcrumbs-in-html/ +09: PHP. Responsive Images Using Picturefill and PHP By Lukas White. "One of the key challenges with responsive web design, and a subject of much discussion in recent years, is how to deal with images. Setting a max-width on image elements enables designers to allow their size to adapt to the page dimensions, but in itself that approach can lead to far bigger images being downloaded than are required..." http://www.sitepoint.com/responsive-images-using-picturefill-php/ Collection Classes in PHP By Alireza Rahmani Khalili. "A Collection class is an OOP replacement for the traditional array data structure. Much like an array, a collection contains member elements, although these tend to be objects rather than simpler types such as strings and integers..." http://www.sitepoint.com/collection-classes-in-php/ +10: STANDARDS, GUIDELINES & PATTERNS. On Encrypted Video and the Open Web By Tim Berners-Lee. "There has been a lot of response to the announcement that W3C considers content protection for video as in-scope for discussion in the HTML Working Group. In this post I can touch on some of the arguments..." http://www.w3.org/blog/2013/10/on-encrypted-video-and-the-open-web/ +11: TOOLS. Dust-Me Selectors By James Edwards. "Dust-Me Selectors is a development tool for Firefox and Opera, that scans your website to find unused CSS selectors." http://www.brothercake.com/dustmeselectors/ +12: TYPOGRAPHY. How to Make Pragmatic, Purposeful Typography Choices By James George. "If you keep these practical guidelines in mind when making type choices, your work will turn out much better, you'll likely avoid frustrating yourself with imperfect typography, and your clients message will be communicated more powerfully and effectively. I wouldn't think of them as constraints; instead, I'd consider them a way to plot a direct path toward winning typography instead of stumbling upon it somewhat randomly after a long, unnecessary trial-and-error process. Having a good mix of all of these principles will ensure that your design turns out well in the fewest possible iterations..." http://www.sitepoint.com/make-pragmatic-purposeful-typography-choices/ Responsive Webfont Icons By Jason CranfordTeague. "One of the major problems we face in responsive design is how to create icons that scale to the interface, not just for physical dimensions, but based on screen size and number of pixels per inch..." http://webstandardssherpa.com/reviews/responsive-webfont-icons +13: USABILITY. The ABC of Usability - Part 9 By Oliver McGough. "...Discover new terms, learn more of the ones you thought you knew and find out interesting, little known, details..." http://blog.usabilla.com/abc-usability-part-9/ Mobile Form Usability - Never Use Inline Labels By Jamie Appleseed. "...In summary, the general advice is to avoid inline labels in forms. The exceptions are single standalone fields or 'singular-purpose-two-field-frequently-used forms', where inline labels may be used if space efficiency and aesthetics are significant concerns..." https://baymard.com/blog/mobile-forms-avoid-inline-labels Flat Design Won't Hide Your Usability Sins By Baruch Sachs. "...Sometimes flat design works, and sometimes it doesn't...To judge the best approach, you need to understand usage patterns. You need to know how people do their work..." http://www.uxmatters.com/mt/archives/2013/10/flat-design-wont-hide-your-usability-sins.php Learning How to Communicate Visually in Documentation By Tom Johnson. "From my recent survey, one reason people said users aren't finding answers in help material is because the answer is buried under a mountain of text..." http://idratherbewriting.com/2013/10/03/learning-how-to-communicate-visually-in-documentation/ [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 Dreamweaver Information. http://www.d.umn.edu/itss/training/online/webdesign/dreamweaver.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 Flash Information. http://www.d.umn.edu/itss/training/online/webdesign/flash.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.]