+++ WEB DESIGN UPDATE. - Volume 10, Issue 47, May 16, 2013. An email newsletter to distribute news and information about web design and development. ++ISSUE 47 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: HTML5. 05: INFORMATION ARCHITECTURE. 06: JAVASCRIPT. 06: MISCELLANEOUS. 08: NAVIGATION. 09: PHP. 10: STANDARDS, GUIDELINES & PATTERNS. 11: USABILITY. SECTION TWO: 12: What Can You Find at the Web Design Reference Site? [Contents ends.] ++ SECTION ONE: New references. +01: ACCESSIBILITY. Accessible Forms 2 - Required Fields and Extra Information By Roger Hudson. "This article will look at different ways to mark-up required (mandatory) form fields and provide additional information that maybe necessary to understand or correctly complete a form..." http://usability.com.au/2013/05/accessible-forms-2-required-fields-and-extra-information/ Links are Not Buttons. Neither are DIVs and SPANs By Karl Groves. "There's been one development practice we've noticed frequently that I'd like to discuss today: use of links as buttons..." http://www.karlgroves.com/2013/05/14/links-are-not-buttons-neither-are-divs-and-spans/ 10 Easy Accessibility Tips Anyone Can Use By Jared Smith. "...here are 10 simple accessibility tips that most anyone can implement today into their web site's HTML and CSS to make it more accessible..." http://webaim.org/blog/10-easy-accessibility-tips/ The 'A' Word: Accessibility as Part of UX By Leonie Watson. "...accessibility is simply usability under a magnifying glass. If you're thinking about great usability, chances are that you're already thinking about great accessibility, too..." http://www.usabilityprofessionals.org/uxmagazine/the-a-word/ Study Ranks Accessibility of Top Learning Management Systems By Dian Schaffhauser. "A University of Illinois at Urbana-Champaign study published in March comparing learning management systems has concluded that the latest crop of learning management systems evaluated have made 'significant progress' since the assessments started in 2005. However, one of the report's authors noted, 'We believe much more needs to be done'..." http://campustechnology.com/Articles/2013/05/13/Study-Ranks-Accessibility-of-Top-Learning-Management-Systems.aspx Can We Track How Many Users with Disabilities Access our Site? By Karl Groves. "...In the end, truly detecting the usage of persons with disabilities is going to be nearly impossible. The effort expended to somehow detect and track the usage patterns of persons with disabilities in order to create a so-called 'enhanced' experience would be better spent making the regular site better. Accessible design is good design and when done right can improve the experience for everyone." http://www.karlgroves.com/2013/05/13/can-we-track-how-many-users-with-disabilities-access-our-site/ Testing and Debugging iOS Accessibility for VoiceOver By Leonie Watson. "When you build an iOS app it's easy to make it VoiceOver accessible. Native UI controls have accessibility built-in as standard, and custom controls can be accessibility-enabled without difficulty..." http://blog.paciellogroup.com/2013/05/testing-and-debugging-ios-accessibility-for-voiceover/ +02: CASCADING STYLE SHEETS. Replacing Images When Printing By Roger Johansson. "It isn't all that uncommon that, after you've polished your print stylesheet to make a site look well on paper as well as on screen, you realise that the logo really doesn't look its best. It may look blurry or pixelated on paper due to having a pixel density intended for screen viewing, of course. But even worse, its edges may look ugly or it may actually be invisible because whatever is behind it when viewed on screen isn't printed..." http://www.456bereastreet.com/archive/201305/replacing_images_when_printing/ Using !important in Your Media Queries By Ian Devlin. "We sometimes hear people arguing that we shouldn't use !important in our website's CSS as it can be incredibly annoying for others who may work on the website. While I agree with this in general, I have found myself using !important with responsive design..." http://www.iandevlin.com/blog/2013/05/css/using-important-in-your-media-queries +03: DRUPAL. Taxonomy Terms in Nodes By Ade Hillier. "This tutorial is part of a new series about developing accessible themes for Drupal. Each tip is a small enhancement on its own; but together, they make a more accessible website." http://accessiblize.com/drupal-accessibility-taxonomy-terms-in-nodes +04: HTML5. The HTML5 Outline Algorithm and JAWS By Gez Lemon. "JAWS' implementation of the HTML5 outline algorithm is incorrect with IE and Firefox when the author explicitly specifies the heading levels. Fortunately, there is a relatively simple fix until JAWS finally fixes the bug." http://juicystudio.com/article/html5-outline-algorithm-jaws.php Keeping The Big Small - How To Avoid Duplicate Downloads In Responsive Images By David Newton. "The element is a new addition to HTML5 that's being championed by the W3C's Responsive Images Community Group (RICG). It is intended to provide a declarative, markup-based solution to enable responsive images without the need of JavaScript libraries or complicated server-side detection." http://mobile.smashingmagazine.com/2013/05/10/how-to-avoid-duplicate-downloads-in-responsive-images/ How to Use Video.js - The Big Picture By Greg Kraus, NC State University. "This is a high-level overview of how to use Video.js to display your videos in HTML5 pages. This assumes you know some basics about video. Using Video.js is a three step process..." http://accessibility.oit.ncsu.edu/blog/2013/05/14/how-to-use-video-js-the-big-picture/ +05: INFORMATION ARCHITECTURE. Can Card Sorting Improve the Usability of Your Designs? By Sergey Sinyakov. "Card sorting is one of the most basic, easy-to-do usability testing techniques available at your disposal. There are already plenty of articles and tutorials that discuss how to conduct card sorting activities (like this one) so I will be skipping the basics. Instead, I will share some of the benefits I have derived from conducting card sorting tests during my experience as a usability analyst..." http://designinstruct.com/web-design/card-sorting-usability-designs/ +06: JAVASCRIPT. ARIA Roles (C-D) By Rakesh Paladugula. "In continuation to our previous post ARIA roles (A-B) let us understand the roles that begin with alphabets C and D..." http://www.maxability.co.in/2013/05/aria-roles-c-d/ +07: MISCELLANEOUS. Balancing Act - Features, Budgets and Timelines By Adrian Roselli. "So much of web development is really just a snapshot in time. Within weeks, days or even hours, the landscape will change. A new browser will be released, a new technique will appear, and so on. As web developers, we often want to tweak; to implement the latest techniques and deliver a 'perfect' site. The reality is, though, budgets and timelines dictate what we can do..." http://webstandardssherpa.com/reviews/balancing-act-features-budgets-timelines/ A Few Questions and Answers about 'Mobile Web' and Sites vs. Apps By Chris Heilmann. "...Native apps on high-end devices are doing really well right now, but I can foresee that people will get bored of having to buy a new phone every year just to get new functionality that is not that important when you consider the cost. The web will stay and always be the open alternative for those who want to consume and create on their own terms instead of being dependent on the success or goals of a certain company." http://christianheilmann.com/2013/05/15/a-few-questions-and-answers-about-mobile-web-and-sites-vs-apps/ +08: NAVIGATION. Make the Most of ARIA Landmark Roles By Leonie Watson. "ARIA landmark roles are getting more common: great for accessibility. Leonie Watson explains how you can make them even more useful..." http://www.netmagazine.com/tutorials/make-most-aria-landmark-roles The Breadcrumb - Where Does it Belong By Niels Matthijs. "Once a novel concept, the breadcrumb has become one of the strongholds of just about every content-heavy website's interface out there. When you consider its place in the html though, it's a somewhat unusual component. It falls right in between the site frame and the actual content of a page, not really belonging to either. Most of the time I let the design decide where to add the breadcrumb, but here are a couple of things to consider..." http://www.onderhond.com/features/html-musings/breadcrumb-position-html +09 PHP. Functions By PHP Exercises. "Try your had at creating your own PHP functions with these exercises. They span the very simplest functions to the more complex..." http://phpexercises.com/functions-php-exercises.html Improve PHP Session Cookie Security By Simon Holywell. "The security of session handling in PHP can easily be enhanced through the use of a few configuration settings and the addition of an SSL certificate. Whilst this topic has been covered numerous times before it still bears mentioning with a large number of PHP sites and servers having not implemented these features..." http://simonholywell.com/post/2013/05/improve-php-session-cookie-security.html +10: STANDARDS, GUIDELINES & PATTERNS. View Source - Rumours of its Demise are... By Charles McCathieNevile. "...I do think it is extremely valuable to understand the idea of structured documents, and to have a rough idea of the structure of HTML, to produce documents in HTML that are suitable for wide re-use, easy presentation on a broad range of platforms, and thus to take advantage of the potential of the Web.. http://chaals.ya.ru/replies.xml?item_no=7 +11: USABILITY. Common Usability Errors to Avoid at All Costs By Marc Schenker. "One of the most important tasks on your plate as a web designer is usability. Usability is defined as a gauge of the quality of the user's experience when interacting with your website. Any website you design should always be seamless from the standpoint of the user. They should find your site easy to navigate without having to first undergo special training. Usability is normally based on several different factors..." http://www.webdesignerdepot.com/2013/05/common-usability-errors-to-avoid-at-all-costs/ Usability for Novel vs. Routine Tasks By Jakob Nielsen. "Repetitive actions on websites often work well, but when users try something new, they frequently fail." http://www.nngroup.com/articles/novel-vs-routine-tasks/ New Layouts for the Multi-Device Web By Luke Wroblewski. "Most Web page layouts rely on design patterns created for laptop and desktop computers equipped with a mouse and keyboard. As the variety of devices being used to access the Web has grown, these patterns haven't been keeping up. Designing for today's Web means considering single-handed thumb use on smartphones, two handed touch interactions on tablets, mouse and keyboard input on traditional PCs, hybrid devices, and more. Web layouts have to evolve to support this new reality..." http://www.lukew.com/ff/entry.asp?1721 [Section one ends.] ++ SECTION TWO: +12: 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 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 Flash Information. http://www.d.umn.edu/itss/training/online/webdesign/flash.html HTML5 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.]