+++ WEB DESIGN UPDATE. - Volume 10, Issue 26, December 22, 2011. An email newsletter to distribute news and information about web design and development. ++ISSUE 26 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: MISCELLANEOUS. 06: JAVASCRIPT. 07: PHP. 08: STANDARDS, GUIDELINES & PATTERNS. 09: USABILITY. SECTION TWO: 10: What Can You Find at the Web Design Reference Site? [Contents ends.] ++ SECTION ONE: New references. +01: ACCESSIBILITY. Top Ten Tests for Alternatives on Mobile By Henny Swan. "There are a few fundamental checks you can run on mobile web content and native apps to test screen reader support on mobile. The good news is that while there are clearly some differences the key principles of web accessibility on the desktop are true also for the mobile. This applies to the mobile web, web apps and native apps..." http://www.iheni.com/mobile-accessibility-tests-alternatives-for-screen-reader-users/ 'Fix The Web' In Struggle For Survival By Dan Jellinek. "A ground-breaking project to enlist the power of volunteers to fix web access problems for disabled people is at risk of closure, after failing to secure government funding..." http://www.headstar.com/eablive/?p=656 An Inaccessible Website: Don't Just Suck it Up By Sarah Pulis. "Speaking up about inaccessibility on the web is the only way to change it, writes Sarah Pulis..." http://www.abc.net.au/rampup/articles/2011/12/19/3393485.htm +02: CASCADING STYLE SHEETS. Multiple Attribute Values By Chris Coyier. "Elements can have multiple class names. For instance..." http://css-tricks.com/multiple-attribute-values/ Element, Can We Style a Number of Your Children? By html5advent2011. When you have a growing list of things that have a complex format you may want to make them smaller when there are more of them. This UI-pattern is especially useful if the general overview is more important than the details of a specific item in the list. In the examples below we demonstrate a CSS-only technique that allows you to style elements based on their number. http://html5advent2011.digitpaint.nl/20/ What Happened to My Cursor!? By html5advent2011. Setting a custom cursor for certain elements has been around for a while (some cursors worked even in IE 5.5). In CSS3 there are a couple of new cursor styles you can use. Most of them are very usefull, others not so much, but may still come in handy in some edge-cases. http://html5advent2011.digitpaint.nl/3/index.html Parallaxing CSS3 Backgrounds By html5advent2011. In 2011 scrolling was the new black. We've seen all kinds of site that use some kind of cool way to scroll. The effect is called parallax scrolling and has been around since the days of Super Mario Bros (probably longer). The idea is pretty simple; you have multiple layers which you move at different speeds to give the illusion of depth. http://html5advent2011.digitpaint.nl/21/ +03: EVALUATION & TESTING. When Does A Persona Stop Being A Persona? By Jared M. Spool. "Personas are a powerful tool in the UX toolbox. When done well, they rally the team around a small, specific set of archetypal users. Each team member becomes closely familiar with each of the personas, then can create designs that closely match those persona's needs..." http://www.uie.com/brainsparks/2011/12/15/when-does-a-persona-stop-being-a-persona/ What's The Best Way to Find People for User Research and Usability Testing? By Dana Chisnell. "There are lots of great sources of participants for usability studies and other user research. The key: know what behavior you want to learn about..." http://usabilitytestinghowto.blogspot.com/2011/12/whats-best-way-to-find-people-for-user.html Bending the Protocals: Useful Variations on Usability Tests By Jared M. Spool. "Usability tests are the workhorse technique for teams to understand how their users interact with their design. The best teams conduct frequent tests, giving each team member regular opportunities to learn where their design elicits frustration and delight..." http://www.uie.com/articles/bending_protocals +04: EVENTS. Info-exclusion July 19-22, 2012. Douro Region, Portugal http://dsai2012.utad.pt/ An Event Apart Washington, DC August 6-8, 2012. Washington, DC, U.S.A. http://aneventapart.com/2012/dc/ +05: JAVASCRIPT. Debugging aria-label on Elements By last-child. "I recently helped do some testing on the new version Yahoo! Mail for iPads and was stumped by an aria-label not working as expected. It was one of those gotcha moments, when you realize a confusion with a fundamental process. Are you wondering why your aria-label is not being announced? The aria-label attribute is tempting to use in situations where the visible text is not adequate. For instance, you may use a background image to represent a value and you'd like the user to know that value via an aria-label on the parent. This basic test page will walk through the simple assumption and show how the aria-label is meant to be used...." http://www.last-child.com/debugging-aria-label/ +06: MISCELLANEOUS. Mobile WebSite vs Responsive Web Design By reliablenetworks. "It's been obvious for a while now that mobile internet use is on the rise, in fact some estimates suggest that as early as 2013, more people will use mobile devices to access the internet than desktop computers. It's equally obvious that if you're building a website now, you need to think about accommodating mobile users..." http://www.reliablenetworks.co.uk/Blog/web-design-2/mobile-website-vs-responsive-web-design Mobile HTML5 Compatibility tables for iPhone, Android, BlackBerry, Symbian, iPad and other mobile devices http://mobilehtml5.org/ +07: PHP. PHP for All the Things By Matt Graham. "PHP was originally designed for web sites and is still widely thought of only as a programming language for the Web. But with the approaches below and a variety of useful console libraries, PHP works great for command line scripts, too..." http://phpadvent.org/2011/php-for-all-the-things-by-matt-graham Cracks in the Foundation By Gwynne Raskind. "PHP has been around for a long time, and it's starting to show its age. From top to bottom, the language has creaky joints. I've decided to take a look at how things got to this point, and what can be (and is being) done about it. I start out pretty gloomy, but bear with me; I promise it gets better..." http://phpadvent.org/2011/cracks-in-the-foundation-by-gwynne-raskind How Big Are PHP Arrays (and Values) Really? (Hint: BIG!) By Nikic. "In this post I want to investigate the memory usage of PHP arrays (and values in general) using the following script as an example, which creates 100000 unique integer array elements and measures the resulting memory usage..." http://nikic.github.com/2011/12/12/How-big-are-PHP-arrays-really-Hint-BIG.html Continue Statement By PHP Know How. "Continue statement is used in loops to skip the current iteration and move to next iteration. Think that you have a game and you don't show the score of fourth stage to the player and add it at the end as a surprise. You can implement this scenario as below using an array, a For loop and a continue statement..." http://www.phpknowhow.com/basics/continue-statement/ Include Files By PHP Know How. "PHP lets you add content of another file into your running PHP file. It's basically like merging two files at run time. This let you have common functions and content in one file and use them in more other files..." http://www.phpknowhow.com/basics/include-files/ Coding Standards By PHP Know How. "Sticking to coding standards help you to keep consistency and make your code understandable to others. It's really helpful when you work on big projects where more than one programmer may work on and that you have to deal with great amount of code (Having no standard can make it difficult to understand your own code after some time)..." http://www.phpknowhow.com/basics/coding-standards/ +08: STANDARDS, GUIDELINES & PATTERNS. 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/ New Features for HTML5 Video Playback in Firefox By Chris Heilmann. "As explained in this blog post by Jared Wein of the Firefox team there are quite a few new features in Firefox when it comes to playing HTML5 video. As an Aurora user, I am most excited about the option to go full-screen, the ability to overlay video statistics and to save a snapshot of the current frame as a JPG..." http://hacks.mozilla.org/2011/12/new-features-for-html5-video-playback-in-firefox/ The Output Element By Richard Clark. "Across the web, you'll see a range of sites that feature calculators for working out things like loan repayments, mortgage rates, tax, insurance, and more. Until now, we've had no way of semantically marking up the result of those calculations. Enter: the element..." http://html5doctor.com/the-output-element/ +09: USABILITY. Overloading Different Outcomes on Similar Commands can be Confusing By Jakob Nielsen. "Using the same command for multiple actions enhances usability if the results are conceptually the same. http://www.useit.com/alertbox/overloaded-commands.html Taming Complexity By Simon Collison. "I'm going to step into my UX trousers for this one. I wouldn't usually wear them in public, but it's Christmas, so there's nothing wrong with looking silly. Anyway, to business. Wherever I roam, I hear the familiar call for simplicity and the denouncement of complexity. I read often that the simpler something is, the more usable it will be. We understand that simple is hard to achieve, but we push for it nonetheless, convinced it will make what we build easier to use. Simple is better, right? Well, I'll try to explore that. Much of what follows will not be revelatory to some but, like all good lessons, I think this serves as a welcome reminder that as we live in a complex world it's OK to sometimes reflect that complexity in the products we build." http://24ways.org/2011/taming-complexity [Section one ends.] ++ SECTION TWO: +10: 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.]