+++ WEB DESIGN UPDATE. - Volume 10, Issue 23, December 1, 2011. 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: EVALUATION & TESTING. 04: EVENTS. 05: FLASH. 06: JAVASCRIPT. 07: MISCELLANEOUS. 08: NAVIGATION. 09: PHP. 10: STANDARDS, GUIDELINES & PATTERNS. 11: TOOLS. 12: USABILITY. SECTION TWO: 13: What Can You Find at the Web Design Reference Site? [Contents ends.] ++ SECTION ONE: New references. +01: ACCESSIBILITY. NC State University Moodle 2.1.1 Accessibility Evaluation By Greg Kraus. "NC State University currently uses Moodle 1.9.13 for course delivery and is assessing Moodle 2.1.1 to determine the best upgrade path. Part of this assessment is an accessibility evaluation. In the past NC State has made modifications to Moodle that were not part of the core code in order to make the environment more accessible. Moodle 2.0 and later versions introduce many changes that impact accessibility, some positively, some negatively. Some of the accessibility problems NC State had to address previously have now been resolved. These include the following..." http://accessibility.oit.ncsu.edu/reports/moodle-2-1/ HTML5 - Techniques for Providing Useful Text Alternatives Updated Steve Faulkner, editor. W3C Editor's Draft 25 November 2011 http://dev.w3.org/html5/alt-techniques/ Using HTML5 Headings By Leonie Watson. "HTML5 headings make it easy to syndicate and reuse content, without breaking the heading hierarchy. Using HTML5 headings and keeping the heading hierarchy backwards compatible proves unexpectedly complicated though. The HTML5 specification has a solution, but is it the right one?..." http://tink.co.uk/2011/11/using-html5-headings/ Top 10 Steps Towards Making Your Mobile Apps More Accessible By Stuart Dredge. "Accessibility should be high on the priority list for app developers, but where to start? Here are some ideas..." http://www.guardian.co.uk/smart-accessibility/making-your-mobile-apps-more-accessible How Expensive is Accessibility? By Karl Groves. "...Given the lack of data on this topic, I'm just as comfortable saying accessibility costs nothing as I would be using some made-up claim based on anecdotal evidence. " http://www.karlgroves.com/2011/11/30/how-expensive-is-accessibility/ The Access Board's Inability to Get Section 508 Refresh Finalized is Negligent and Counter to their Mission By Karl Groves. "I don't know why. I don't care why. What I do know is that the TEITAC Committee issued its final report to the US Access Board on April 2008, yet today (11/17/2011) , we see this..." http://www.karlgroves.com/2011/11/18/the-access-boards-inability-to-get-section-508-refresh-finalized-is-negligent-and-counter-to-their-mission/ Video Subtitling and WebVTT By Tom Leadbetter. "...A WebVTT (.vtt) file is simply plain text containing several types of information about the video..." http://html5doctor.com/video-subtitling-and-webvtt/ Validating WCAG Versions 1.0 and 2.0 through Usability Testing with Disabled Users Dagfinn Romen and Dag Svanas. "...This paper reports on a study that empirically validated the usefulness of using WCAG as a heuristic for website accessibility. Through controlled usability tests of two websites with disabled users (N = 7) and a control group (N = 6), it was found that only 27% of the identified website accessibility problems could have been identified through the use of WCAG 1.0. A similar analysis of conformance to WCAG 2.0 showed a marginal 5% improvement concerning identified website accessibility problems. Compensating for the low number of test subjects with confidence tests gave results that were still low (42% for WCAG 1.0 and 49% for WCAG 2.0, with 95% confidence). It is concluded from this that the application of WAI accessibility guidelines is not sufficient to guarantee website accessibility. It is recommended that future versions of the accessibility guidelines should be based on empirical data and validated empirically and that WAI expand their definition of accessibility to include 'usability for all' in accordance with ISO 9241-171:2008." http://www.springerlink.com/content/n22130l151258851/fulltext.html +02: CASCADING STYLE SHEETS. Multilevel Float - Simple Yet Awesome By Niels Matthijs. "Last night I solved a problem that's been bugging me for years. It turned out the solution wasn't even all that difficult, yet somehow I never came across the correct implementation before and so I'd figured it just couldn't be done. To be honest, it made me feel quite stupid, at the same time it made me realize I'm probably not the only one struggling with this. So here's a blog post for all of you who've been trying to stack elements residing in different dom levels..." http://www.onderhond.com/blog/work/mutlilevel-floats-how-to Vendor Prefixes Have Failed, What's Next? By Lea Verou. "Discussion about prefixes was recently stirred up again by an article by Henri Sivonen, so the CSS WG started debating for the 100th time about when features should become unprefixed. I think we need to think out of the box and come up with new strategies to solve the issues that vendor prefixes were going to fix. Vendor prefixes have failed and we can't solve their issues by just unprefixing properties more early..." http://lea.verou.me/2011/11/vendor-prefixes-have-failed-whats-next/ Perplexing Prefixes By Adrian A. Roselli. "...I do like the idea of vendor prefixes only in the experimental builds of browsers, but then developers may be disappointed that their favorite new bleeding edge feature won't work for regular Joe users. This isn't a simple issue, but getting developers to be more responsible and judicious in their use of these new properties would certainly help." http://blog.adrianroselli.com/2011/11/perplexing-prefixes.html Styling Buttons in iOS WebKit and -webkit-appearance:none By Roger Johansson. "I just recently ran into an issue when styling buttons that had me pulling my hair for a while. I had my buttons looking the way they were supposed to look in desktop browsers, but when I went to have a look in Safari for iOS, much of my CSS wasn't applied. This was pretty puzzling as I couldn't remember having any problems with buttons in Safari for iOS before. After taking a closer look at the CSS I was using for these particular buttons and the CSS I had used previously, I managed to find out what made the difference..." http://www.456bereastreet.com/archive/201111/styling_buttons_in_ios_webkit_and_-webkit-appearancenone/ Radial Gradient Readability By Elika Etemad (fantasai). At the CSSWG F2F last week, I raised the issue that the radial gradients we were discussing were unreadable to me, and probably therefore to much of the intended audience. It was not at all obvious by looking at the gradient syntax what the various numbers and lengths might be. http://www.css3.info/radial-gradient-readability/ Don't Forget About transition: all By Louis Lazaris. "...If you've used CSS3 transitions a lot, then you probably already knew about the 'all' keyword. I've actually been using transitions for a while and had completely forgotten about this one until recently. But definitely a 'good to know' type of thing that could come in handy and may save you a few extra lines of code." http://www.impressivewebs.com/css3-transition-all/ Responsive Web Design - Overflow Image with Vertical Centering By Ivo Herrmann. "If you want to use an image in your responsive web design you can use fluid images. But there is another way. You can set a maximum height and crop the image. If you want to learn more about it, check out the tutorial that I wrote about the overflow image cropping..." http://solemone.de/ http://solemone.de/code/responsive-web-design-overflow-image-with-vertical-centering/ CSS Media Queries and IE Fix By Serban Ghita. "...And of course they don't work on IE < 9.0, but I have a solution that I'm already using on production servers. I wrote a small JavaScript file that reads all the elements from DOM, checks which of them are destined for the current device resolution and applies them..." http://ghita.org/tipoftheday/css-media-queries-for-ie +03: EVALUATION & TESTING. Mainstreaming Web Site Usability Through Automated Usability Evaluation By Justin Mifsud. "This article contains an overview of the research that I carried out prior to developing a framework whose objective is to address this paradox. I have published most of it in a research paper in the International Journal of Human Computer Interaction (Vol 2. Issue 1. pp.10-30). I have also presented my findings at the DotNetNuke Web Connections Conference 2011 which was held at the University of Hamburg..." http://usabilitygeek.com/mainstreaming-web-site-usability-through-automated-usability-evaluation/ Psychological Usability Heuristics By Jordi Sanchez. "...I have translated Susan [Weinschenk]'s points into a checklist of heuristic principles that can be used to evaluate interfaces..." http://uxmag.com/articles/psychological-usability-heuristics Web Applications (RIA) Usability Heuristics By Jordi Sanchez. A proposal for a set of usability heuristics specifically compiled for rich internet applications (RIA). https://docs.google.com/spreadsheet/ccc?key=0An-LJr2fswPHdDJUTThJMjhXRTdXNmRUTU1WYnlsSWc&hl=en_US#gid=0 +04: EVENTS. Website Accessibility Metrics December 5, 2011. Online. http://www.w3.org/WAI/RD/2011/metrics/ +05: FLASH. Experiment - Web Without a Flash Player By Karl Dubost. "So the news is all over the Web. Adobe stopped development of its flash player for Mobile. I wanted to know how was I dependent on Flash for my Web browsing and media consumptions. So two days ago, I uninstalled flash..." http://my.opera.com/karlcow/blog/2011/11/23/experiment-web-without-a-flash-player Watch YouTube Videos Without Flash By Karl Dubost. "In my little experiment about using the Web without a Flash player, as I mentioned earlier, it becomes hard to be able to view YouTube videos. The funny thing is that I noticed that most of the time I can see videos which have been put on blog post. These videos are added through an iframe..." http://my.opera.com/karlcow/blog/2011/11/24/watch-youtube-videos-without-flash +06: JAVASCRIPT. WAI-ARIA Gets Ready for a Starring Role in HTML5 By Scott Gilbertson. "WAI-ARIA, the W3C's specification for Accessible Rich Internet Application, provides web developers with a means of annotating page elements with the roles, properties, and states that define exactly what those elements do. The added definitions help screen readers and other assistive devices navigate through your website..." http://www.webmonkey.com/2011/11/wai-aria-gets-ready-for-a-starring-role-in-html5/ ECMAScript 6 Looks Promising By Kishore Nallan. "A quick look at some new features coming up in ECMAScript 6 (ECMAScript being the standardized parent language behind JavaScript) including the 'let' keyword, default arguments, and multi-line strings." http://kishorelive.com/2011/11/22/ecmascript-6-looks-promising/ The Future of JavaScript (Video) By Dave Herman. A 50 minute presentation by Dave Herman (a Mozilla Labs engineer and TC39 representative) at YUIConf 2011 about the future of JavaScript, including features under consideration for ECMAScript 6. http://www.yuiblog.com/blog/2011/11/21/video-yuiconf2011-dherma/ 7 Common Javascript Mistakes or Confusions By Toby Ho. "While helping folks with Javascript on Stackoverflow or IRC, I've noticed some common mistakes or confusions. I've made a list of these in my little notebook and have been covering each of them in a different blog post over the last month or so. This post wraps up this series: and the 7 common Javascript mistakes or confusions are..." http://tobyho.com/2011/11/16/7-common-js-mistakes-or-confusions/ +07: MISCELLANEOUS. Origins of the Apple Human Interface By Larry Tesler and Chris Espinosa. "This is a verbatim transcript of a public lecture given on October 28, 1997. This transcript is Copyright 1997 by Computer History Museum..." http://www.computerhistory.org/events/lectures/appleint_10281997/appleint_xscript.shtml Writing Forward Compatible Websites By Boris Zbarsky. "This is a list of best practices for creating websites that do not break when browsers are updated. It's not always possible to follow all of these, but following as many of them as possible will help future-proof your website. This is especially important for intranet applications and other non-public websites where problems are likely to not be noticed during testing by browser vendors..." https://developer.mozilla.org/Writing_Forward_Compatible_Websites Twenty Years of W3C Mailing List Archives By Phil Archer. "'test again! If you get this, delete it. - sorry.' That message, with an id of 9110281334.AA06863@ nxoc01.cern.ch, is the oldest e-mail in the W3C archive. Sent twenty years ago by TimBL at 14:34 GMT+1 on 28th October 1991." http://philarcher.org/diary/2011/20yearsofmlarchives/ +08: NAVIGATION. Writing Good Link Text By Leonie Watson. "Links are like sign posts. They should tell you what you'll find when you follow them. Writing good link text isn't difficult, but there are a few things to be aware of when you do..." http://www.nomensa.com/blog/2011/writing-good-link-text/ +09: PHP. Variables and Constants By PHP Know How. "In programming, a variable means a value holder. A variable can hold the same value or the value it holds can get changed during the runtime of a program..." http://www.phpknowhow.com/basics/variables-and-constants/ Operators By PHP Know How. "Operators let you do various operations like adding two numbers, joining two strings, comparing two values etc. There are two types of operators as binary and unary. Binary needs two operands to do the operation while unary requires only one." http://www.phpknowhow.com/basics/operators/ Functions By PHP Know How. "A function is a block of code that you can call throughout your PHP script. Functions are often used for common functionalities that can occur in your PHP program. For an example think that you write a program that relates to seasonal offers. In many occasions, you would need to know the final price after a discount was given. You can define a function for this as below..." http://www.phpknowhow.com/basics/functions/ Practicing Regular Expressions with Search and Replace By Chris Roberts. "If you're just starting out with regular expressions (regex), the syntax can seem a bit puzzling at first (I would recommend Jason Pasnikowski's article as a good starting point). One of the things that make it difficult to grasp regex in the beginning is the small number of times you have a chance to use them in your code, which in turn limits the amount of practice you have using them. Professionals in any capacity, be it sports, entertainment, or development always practice - some practice more than others..." http://phpmaster.com/practicing-regular-expressions/ +10: STANDARDS, GUIDELINES & PATTERNS. Lynx Would Not be Impressed - on Semantics and HTML By Christian Heilmann. "...Semantics are like wonderful prose. You use them to deliver an enjoyable product. People are not celebrated for writing books. They are celebrated for what they filled them with. If we keep putting things on the web that have structure and get better on more sophisticated display products we are building for the future. If we point fingers at others doing it wrong we waste our time." http://christianheilmann.com/2011/11/16/lynx-would-not-be-impressed-on-semantics-and-html/ HTML5 Accessibility Chops - Using Nested Figure Elements By Steve Faulkner. If you have a number of related images (or other content) with caption text, you can use nested figure elements to associate both a group caption and an individual caption to each instance using the figcaption element..." http://www.paciellogroup.com/blog/2011/11/html5-accessibility-chops-using-nested-figure-elements/ Will the Browser Wars Invade the Mobile Web? By Arley McBlain. "When it comes to the still emerging Mobile Web realm, I think we should all be outraged about the trouble Windows Phone 7.5 can unleash..." http://sixrevisions.com/web-technology/mobile-browser-wars/ +11: TOOLS. Tidy for HTML5 "This repo is a fork of the code from tidy.sourceforge.net. This source code in this version supports processing of HTML5 documents. The changes for HTML5 support started from a patch developed by Bjorn Hohrmann..." https://github.com/w3c/tidy-html5 +12: USABILITY. Content Quality on Public University Websites By John Eric Brandt. "I found a link to this report by Siteimprove in the Accessibility group on LinkedIn this morning regarding a recent review made of the websites of 25 public universities in the United States. The study covers five major aspects of each website including which content management systems were used, how many broken links (per CMS) were discovered, misspellings, common accessibility issues, and the use of platform independent document formats..." http://jebswebs.net/blog/2011/11/content-quality-on-public-university-websites/ Severe Change and the Sudden Loss of Competence By Jared Spool. "...Four Stages of Competence. These four stages are unconscious incompetence, conscious incompetence, conscious competence, and unconscious competence. As someone learns and adapts to your design, they are working their way through the stages. The ultimate is the user who is unconsciously competent - they can seemingly move through the design with ease, accomplishing their goals without much attention to the interface itself...If you're wondering why your most effective users are really upset about sudden upgrades, I'd look to a sudden loss of competence." http://www.uie.com/brainsparks/2011/11/29/severe-change-and-the-sudden-loss-of-competence/ How To Make Forms More Usable With HTML5 By Steven Bradley. "Forms are how we interact with websites. We use forms to contact site owners, login to applications, reply to comments and so much more. Forms generally don't inspire love. We don't like filling them out or creating them. html5 forms want to help change that..." http://www.vanseodesign.com/web-design/html5-forms/ Complexity and User Experience By Jon Bolt. ""The best products don't focus on features, they focus on clarity. Problems should be fixed through simple solutions, something you don't have to configure, maintain, control. The perfect solution needs to be so simple and transparent you forget it's even there. However, elegantly minimal designs don't happen by chance. They're the result of difficult decisions. Whether in the ideation, designing, or the testing phases of projects, UX practitioners have a critical role in restraining the feature sets within our designs to reduce the complexity on projects." http://www.boxesandarrows.com/view/complexity-and-user Easier Is Better Than Better By Paul Scrivens. "In his book, The Paradox of Choice, Barry Schwartz comes to an interesting conclusion involving human choice. 'People choose not on the basis of what's most important, but on what's easiest to evaluate.'..." http://www.smashingmagazine.com/2011/11/28/easier-is-better-than-better/ [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 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.]