+++ WEB DESIGN UPDATE. - Volume 10, Issue 18, October 28, 2011. An email newsletter to distribute news and information about web design and development. ++ISSUE 18 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: STANDARDS, GUIDELINES & PATTERNS. 10: TOOLS. 11: TYPOGRAPHY. 13: USABILITY. SECTION TWO: 14: What Can You Find at the Web Design Reference Site? [Contents ends.] ++ SECTION ONE: New references. +01: ACCESSIBILITY. Just a Second, Mr. G. By John Eric Brandt. "'Judging by the comments in the Google group 'accessible' it seems that Google have painted themselves into a corner with their new online apps like Google Plus and Google Docs,' Gaff says. 'Half of them won't work with most basic screenreaders and so they add ChromeVox to their Chrome browser. Hardly what blind folk would want, to have to alter access technology just to use Google's stuff.'" http://jebswebs.net/blog/2011/10/just-a-second-mr-g/ The Hidden Nuggets of WCAG2: An Introduction By Gian Wild. "...In this series of articles, I'll be talking about all the big issues in accessibility: images and alt attributes, video, keyboard accessibility, forms, tables, skip links and many more. I'll be including concrete examples, and actual code that you can implement as well as linking to useful how-to guides. I hope this series of articles serves to simplify some of the more confusing areas of WCAG2..." http://www.sitepoint.com/the-hidden-nuggets-of-wcag2-an-introduction/ The a11y Bugs Project By Vlad Alexander, et al. "Why aren't more people writing alternate text for images? The predominant reason seems to be that content authors cannot see how alternate text is used. Some browsers don't display alternate text, some display it in different ways, and one browser requires advanced configuration. To fix the alternate text and other accessibility problems, 15 accessibility experts started this project to report accessibility bugs to browser/tool vendors in a totally new way - collectively, as a group...We need your help, because the browser vendors of IE, Chrome, Safari and Opera instead want to see market demand before they will fix these 3 basic accessibility bugs. So let's provide that demand. Let's show them that web accessibility matters to us by signing your name below..." http://a11ybugs.org/index.php CROWDABILITY "Bringing Together Accessibility Crowdsourcing Projects" http://www.crowdability.org/ Detecting If Images are Disabled in Browsers By Steve Faulkner. "I received an email from an old friend and colleague pointing out that with images disabled in the browser, the support information in the data tables on HTML5Accessibility.com disappears. An issue and an embarrassment! This has now been fixed..." http://www.paciellogroup.com/blog/2011/10/detecting-if-images-are-disabled-in-browsers/ Meet the Only Web Accessibility Button at #heweb11: Keynote Welcome Video By Karine Joly. "Intro to this year's HighEdWeb conference keynote address." http://collegewebeditor.com/blog/index.php/archives/2011/10/24/meet-the-only-web-accessibility-button-at-heweb11-keynote-welcome-video-by-higheredexperts-com/ +02: CASCADING STYLE SHEETS. Essential Considerations for Crafting Quality Media Queries By Zoe Mickley Gillenwater. "Learn what you need to know to set up media queries that maximize efficiency and robustness for your particular project. There are pros and cons to making your media queries embedded versus external, overlapping versus stacking your media queries, starting with mobile versus desktop styles, and using conditional comments versus JavaScript to add support for IE 8 and earlier versions..." http://zomigi.com/blog/essential-considerations-for-crafting-quality-media-queries/ Limitations on Styling Visited Links By Louis Lazaris. "You might remember about a year or so ago, there was some discussion about the potential privacy issues caused by the CSS :visited pseudo-class. In a nutshell, it was discovered that this pseudo-class along with some scripting, could be used by websites to 'sniff' your web browsing history. You can read more about the problem and subsequent solution here and here. It seems now that most of the latest versions of all browsers have taken measures to combat this issue. Fortunately, you can still style text links using the :visited pseudo-class. This is a good thing, and I hope we always have that ability. Visited links are a staple of the web, and they should remain..." http://www.impressivewebs.com/styling-visited-links/ Full-Width, Centered Content, Single Ele - A Quick How-To By Niels Matthijs. "Earlier this week I started reworking the html/css of my blog. Only two tags far in this endeavor I already got stuck. Creating a full-width visual row with centered content (to see what I mean, check my header) using only one structural element wasn't as easy as I had imagined. So I strolled the internet for solutions, what follows is a small summary of tips and tricks to accomplish this particular visual effect." http://www.onderhond.com/blog/work/full-width-centered-content-single-element-design CSS Background: There's More To Know Than You Think By Steven Bradley. "You likely use css backgrounds in every site you build. You give an element a background color and tell another element to let a background image repeat. How much do you know about all the other background properties?..." http://www.vanseodesign.com/css/background-properties/ What's New in CSS3 Values and Units? By David Storey. In CSS3 the values and units we can use in CSS properties are defined in the appropriately named CSS Values and Units specification, with the exception those relating to colour and images, and the pre-defined keywords specific to individual properties. http://dstorey.tumblr.com/post/11933972962/css3values +03: EVALUATION & TESTING. Getting the First Click Right By Jeff Sauro. "Getting the navigation right usually takes a few tries and some testing with users. You can test first clicks with a functioning website, a prototype or just a boxy-wireframe. Here's how I measure that important first click..." http://www.measuringusability.com/blog/first-click.php +04: EVENTS. Two Apps Per Day: Mobile Web and iOS Design Workshop. December 3, 2011. New York City, New York, U.S.A. http://www.twoappsperday.com/ +05: FLASH. Please Provide a Usable Fallback for Flash Content By Roger Johansson. Since uninstalling Flash I've noticed how common it is for sites that still use Flash to pay little or no attention to visitors that do not have Flash Player installed. Showing a 'Missing plugin' message instead of navigation links or even worse, the entire site, is an efficient way of turning people away. http://www.456bereastreet.com/archive/201110/please_provide_a_usable_fallback_for_flash_content/ +06: JAVASCRIPT. Optimizing Long Lists Of Yes/No Values With JavaScript Byy Lea Verou. "Very frequently in Web development (and programming in general), you need to store a long list of boolean values (yes/no, true/false, checked/uncheckedÉ you get the idea) into something that accepts only strings. Maybe it's because you want to store them in localStorage or in a cookie, or send them through the body of an HTTP request. I've needed to do this countless times..." http://coding.smashingmagazine.com/2011/10/19/optimizing-long-lists-of-yesno-values-with-javascript/ Truthy & Falsey: Truth in JavaScript By James Padolsey. a minimal introduction to truthy & falsey. James Padolsey takes a look at how expressions in JavaScript can ultimately resolve to being true or false, how to check, how to do conversions, and some tricky cases to watch out for. http://james.padolsey.com/javascript/truthy-falsey Terse JavaScript 101 By James Padolsey. James Padolsey talks about minimizing redundant clutter in your JavaScript code. He argues that terse code aids readability (to a point) and shares some approaches to making it so. http://james.padolsey.com/javascript/terse-javascript-101-part-1 +07: MISCELLANEOUS. An Event Apart - The Responsive Designer's Workflow By Luke Wroblewski. "In his presentation at An Event Apart in Washington DC 2011 Ethan Marcotte talked about applying responsive web design principles and workflows to the redesign of a major newspaper Web site. Here's my notes from his talk on The Responsive Designer's Workflow.." http://www.lukew.com/ff/entry.asp?1433 The Next 6 Billion By John Allsopp. "...To reformulate the now famous question Steve Jobs asked of John Sculley: Do you want to make shiny products for the privileged for the rest of your life, or do you want to come with me and change the world?" http://www.webdirections.org/blog/the-next-6-billion/ On UX Leadership By Kim Goodwin. "Managers are assigned; leaders emerge." http://www.uie.com/articles/ux_leadership +08: NAVIGATION. Mobile: Navigating the Mobile Maze By Rob Borley. "We all know how important the mobile web has become, but what is the right approach? Should we build an iPhone app or mobile website? This factsheet explores your options..." http://boagworld.com/mobile-web/mobile-maze/ Tree Testing For Effective Navigation By James Robertson. "'I can't find what I am looking for' is one of the most common complains staff make about intranet content. Contributing to this issue is poor search, and poorly named or simply missing material. However, most often, the issue comes down to poor site structure and a lack of good information sign-posting." http://www.steptwo.com.au/columntwo/tree-testing-for-effective-navigation/ +09: STANDARDS, GUIDELINES & PATTERNS. HTML5 for Web Designers By Jeremy Keith. "...Ladies and gentlemen, I give you: HTML5forWebDesigners.com. Needless to say, it's all written in HTML5 making good use of some of the new semantic elements like section, nav and figure. It's also using some offline storage in the shape of appcache. So if you visit the site with a browser that supports appcache, you'll be able to browse it any time after that even if you don't have an internet connection (and if you're trying it on an iOS device, feel free to add it to your home screen so it's always within easy reach)..." http://html5forwebdesigners.com/index/index.html What We Don't Know By Chris Coyier. "We don't know which browser, which version of that browser, or what kind of computer a user visiting our website is using. That's why we have web standards we follow which gave us the ability to code one website that (for the most part) works everywhere." http://css-tricks.com/14664-what-we-dont-know/ When Web Standards Fail Us By Nicholas C. Zakas. "...I'm all for moving forward, and don't get me wrong, both TC-39 and the W3C have done a commendable job at solving many of today's problems. I'd just like to see more addressed so that we can stop solving the same problems repeatedly over the next decade. In another ten years, I don't want to be writing JavaScript to parse a cookie string, and I don't want to be debating the best way to create a tab control. These are all known problems that deserve attention now so that we can move on to solving more interesting problems in the future." http://www.nczonline.net/blog/2011/10/03/when-web-standards-fail-us/ HTML5 Live - Rocking the Boat and Causing a Ripple By Chris Heilmann. "As Mozilla's representative I was asked to give a talk on how we are faring as a movement when it comes to HTML5. In the talk Rocking the boat - and causing a ripple I discussed the necessity to take HTML5 away from something to build cool demos in to be used in day to day products so we can find and report bugs. I also covered a few of the issues that are cropping up like 'best viewed with browser X' products and trying to impress users by listing the technologies used rather than just using them to improve the overall experience. In the end we also list some of the new technologies and products Mozilla is working on to make the web a real application platform that has the same access that native applications have. The slides are embedded below and use a modified DZSlides as the system. Focus on them and use the cursor keys to navigate. Display bullet points by pressing space and show and hide the notes by pressing N. Alternatively you can also see the slides a simple web page..." http://hacks.mozilla.org/2011/10/html5-live-rocking-the-boat-and-causing-a-ripple/ HTML5 Multimedia Tutorials on Adobe Developer Connection By Ian Devlin. "I'm pleased to announce that I've written a three part tutorial series on HTML5 Multimedia for the Adobe Developer Connection. The tutorials will cover HTML5 video, audio and also how to use the Media API to build a simple video player. The first part of the series on HTML5 video is now available and the other two parts will be available over the coming weeks..." http://www.iandevlin.com/blog/2011/10/html5/html5-multimedia-tutorials-on-adobe-developer-connection On Semantics in HTML By Jens O. Meiert. "...In essence, semantics in HTML is all about who and how many agree on the meaning of elements and ID and class names..." http://meiert.com/en/blog/20111026/on-semantics-in-html/ +10: TOOLS. manifestR By John Allsopp. "With HTML5 it is easy to provide an offline version for a website by creating a cache manifest. The manifest is a file that contains a list of all the assets that makes the website accessible offline. There are several tools that help you build this manifest file and among those is manifestR, an easy to use bookmarklet that can quickly generate the cache manifest." http://westciv.com/tools/manifestR/ Comprehensive Review Of Usability And User Experience Testing Tools By Cameron Chapman. "Usability and user experience testing is vital to creating a successful website, and only more so if it's an e-commerce website, a complex app or another website for which there's a definite ROI. And running your own user tests to find out how users are interacting with your website and where problems might arise is completely possible..." http://uxdesign.smashingmagazine.com/2011/10/20/comprehensive-review-usability-user-experience-testing-tools/ +11: USABILITY. Inspiration: Fluid and Responsive Design By Nick La. "Responsive design all started with this article by Ethan Marcotte. Some people see it as a trend. But it is more than just a trend. It is a new design solution - it helps to resolve the design problems associated with the different resolutions and devices (desktop, laptop, tablet, and mobile). I'm giong to share a list of responsive sites that I feel are nicely done. I've categorized the list into two categories: Responsive-only (not fluid) and Fluid & Responsive..." http://webdesignerwall.com/trends/inspiration-fluid-responsive-design How to Design a Mobile Responsive Website By Elaine Simpson. "To build a mobile site or not to build a mobile site; this is a question at the forefront of many a discussion. There is, however, another option: responsive web design. When, why, and how should you go about designing a responsive website?" http://www.uxbooth.com/blog/how-to-design-a-mobile-responsive-website/ Fancy UX Terms - What Does It Mean Across Continents? By Yeevon Ooi. "A few months ago I ran workshops at UXcamp Europe and UXcamp London on How to make decisions collaboratively (without killing each other) using the KJ method. The KJ method was invented by Jiro Kawakita and is a brainstorming method which helps groups reach consensus quickly and accurately especially when it involves prioritising something. A summary of the KJ theory and some handy tips for using it can be found in my previous blog post2. The purpose of this blog post is to share my exciting results from the Europe and London workshops." http://www.webcredible.co.uk/blog/user-experience-terms E-Commerce Usability By Jakob Nielsen. "Sites have improved, and we now know much more about e-tailing usability. Today, poor content is the main cause of user failure." http://www.useit.com/alertbox/ecommerce.html [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 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.]