+++ WEB DESIGN UPDATE. - Volume 9, Issue 20, November 13, 2010. An email newsletter to distribute news and information about web design and development. ++ISSUE 20 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: INFORMATION ARCHITECTURE. 06: JAVASCRIPT. 07: MISCELLANEOUS. 08: NAVIGATION. 09: STANDARDS, GUIDELINES & PATTERNS. 10: USABILITY. SECTION TWO: 11: What Can You Find at the Web Design Reference Site? [Contents ends.] ++ SECTION ONE: New references. +01: ACCESSIBILITY. Penn State Accused of Discriminating Against Blind Students By Marc Parry. "Blind students and professors suffer 'pervasive and ongoing discrimination' at Penn State University because of the widely inaccessible nature of technology used on the campus, according to a federal complaint filed today by the countryÕs largest organization of blind people..." http://chronicle.com/blogs/wiredcampus/penn-state-accused-of-discriminating-against-blind-students/28154? Complaint Filed Against Penn State University for Inaccessible Technologies By Coalition of Organizations for Accessible Technology. "On November 12, 2010, a complaint was filed with the U.S. Department of Education against Pennsylvania State University (Penn State) alleging violation of the civil rights of blind students and faculty...The accessibility problems at Penn State include: An inaccessible library website due to improper coding...Departmental websites not fully accessible to people who are the blind...An interactive course management system...'Smart' podiums - which allow professors to connect their laptops to a computer at the podium and display images and videos for students to see on a screen -- are operated by an inaccessible touchscreen keypad that controls almost all podium functions, forcing blind faculty members to have sighted assistants..." http://www.coataccess.org/node/9920 Accessibility Myths in 2010 By Roger Johansson. "Five and a half years ago I posted an article about Accessibility myths and misconceptions where I tried to explain why some commonly held beliefs about web accessibility are incorrect. Early this year, Ian Pouncey posted a few other Web accessibility myths. Here is a quick roundup of the myths from these two articles..." http://www.456bereastreet.com/archive/201011/accessibility_myths_in_2010 WCAG 2.0: Beyond Web Content Derek Featherstone. "Even though WCAG 2.0 isn't designed to be used beyond web content, its technology agnostic nature and foundation in user needs means that we can use it as a tool for assessing iPhone/iPad apps, desktop apps and more." http://simplyaccessible.com/article/wcag2-beyond-web-content/ Speed vs Accessibility By Derek Featherstone. "When it comes to crafting web sites, we often think of doing things that please search engines such as Google. This has the potential to lead us down a path where we think of Google first and users second. What happens when coding something for better optimization from Google's perspective clashes with coding something that is better for people with disabilities?" http://simplyaccessible.com/article/speed-vs-accessibility/ A Complete Beginner's Guide to Web Accessibility By Rean John Uehara. "Most beginners in development and designing will not look deeply into accessibility, the purpose of this article is to educate beginners as early as possible of the possible pitfalls and how to avoid them. It is like a cookie jar is atop the shelf and a kid is trying to reach it but can't. What happens next? Frustration enters! Not providing a way for your visitors to get a grab of that cookie jar is very not fine, http://www.1stwebdesigner.com/design/web-accessibility-guide-beginners/ Feedback on A Complete Beginner's Guide to Web Accessibility By Dennis Lembree. "Here is my feedback on a recent article A Complete Beginner's Guide to Web Accessibility on 1stWebDesigner.com. Some good points, but I'd like to clarify a few things..." http://webaxe.blogspot.com/2010/11/feedback-on-complete-beginners-guide-to.html Each PDF Page is a Painting - Why PDF 'Reading Order' is Irrelevant to Accessibility By Duff Johnson. "...PDF tags and PDF tags alone define the logical order of the document's content, and thus, its accessibility. To the extent a PDF is tagged, it might be accessible. To determine whether it is, in fact, accessible, the tags need to be checked, and if necessary, corrected to ensure correct logical order and usage. Users seeking to ensure their PDFs are accessible should focus on the tags. The "reading order" of the content on the PDF page just isn't a factor in accessibility, as we demonstrate below..." http://www.appligent.com/talkingpdf-eachpdfpageisapainting ADA Compliance Is a ÔMajor VulnerabilityÕ for Online Programs By Marc Parry. "Many universities may be vulnerable to complaints about accessibility issues in online courses because of the decentralized way they handle compliance with a federal law that protects people with disabilities from discrimination, a new report says..." http://chronicle.com/blogs/wiredcampus/ada-compliance-a-major-vulnerability-for-online-programs/28136 +02: CASCADING STYLE SHEETS. CSS Vocabulary By Divya Manian. "I realised quite late that to say something meaningful about CSS, I would have to know exactly what the terms used mean. Often, I have asked for help in forums, and have got stuck wondering how exactly to describe my problem. So I thought it would be a good idea to describe all the common terms of CSS..." http://nimbupani.com/css-vocabulary.html Developing Efficient, Streamlined CSS By Jake Rocheleau. "CSS can be compared to a sculptor's tool set; like sculptors at work, we designers use CSS to create structured layouts of websites. Over the years, this process has become more organized; rules have been put in place to create best practices of coding. In this article, we'll take a look at some ideas you can use when writing style sheets to speed up your code..." http://www.webdesignerdepot.com/2010/11/developing-efficient-streamlined-css/ Equal Height Column Layouts with Borders and Negative Margins in CSS By Thierry Koblentz. "'What? Another Equal Height Columns article? Enough already!' If this is what you think, then think again because this solution is different. It does not rely on any of the usual tricks. It does not use images, nor extra markup, nor CSS3, nor pseudo-classes, nor Javascript, nor absolute positioning. All it uses is border and negative margin. Please note that this article will also demonstrate different construct techniques and will brush up on a few concepts." http://www.smashingmagazine.com/2010/11/08/equal-height-columns-using-borders-and-negative-margins-with-css/ Should We Abolish CSS Vendor Prefixes? By Craig Buckler. "...Prefixes are a solution to a problem that rarely occurs. Browser vendors do not work in isolation: Microsoft, Apple, Mozilla, Google and Opera are all W3C members and none would implement their own feature without referring to what others were doing..." http://blogs.sitepoint.com/2010/11/12/abolish-css-vendor-prefixes/ +03: EVALUATION & TESTING. 5 Second Usability Tests By Jeff Sauro. "...Interestingly enough, the perception of website usability from the 5 second condition was statistically indistinguishable from the no time limit condition. The observed difference in average SUS scores was less than 3 points (4%)." http://www.measuringusability.com/five-second-tests.php A Step By Step Guide to Scenario Mapping By Neil Turner. "Scenario mapping is a really quick, easy and dare I say it even fun way to collaboratively create, discuss and communicate user scenarios. Scenario mapping will help you to think about your users, to think about their tasks and most importantly to think about the sort of user experience you want to provide. It will also help to ensure that your designs are grounded in the real world because scenario mapping forces you to consider the context in which a design is likely to be used. In this article I walk you though step by step how to go about creating scenario maps and why they're so damn useful in the first place..." http://www.uxforthemasses.com/scenario-mapping/ Developing Successful Personas By Luke Wroblewsk. "In her Six Rules and a Myth: The Secrets to Developing Successful Personas Innovation presentation at the User Interface 15 conference in Boston MA, Tamara Adlin outlined a set of practical ways to align stakeholder, developers, and designers using personas. Here are my notes from her talk.." http://www.lukew.com/ff/entry.asp?1241 +04: EVENTS. In Top Form: Designing and Building Accessible Forms December 9, 2010. Online. http://store.furtherahead.com/virtual-seminar/in-top-form/ Human-Computer Interaction (CHI) 2011 May 7-12, 2011. Vancouver Canada http://www.chi2011.org/ +05: INFORMATION ARCHITECTURE. Ultimate Guide to Website Wireframing By Cameron Chapman. "Most designers wireframe their designs in one way or another, even if it just involves them making quick sketches on the back of some scratch paper. Wireframing is an important part of the design process, especially for more complex projects...This guide covers what you need to know about website wireframes to get started." http://sixrevisions.com/user-interface/website-wireframing/ Online Card Sorting - Even Better Than the Real Thing? By Neil Turner. "...Is online card sorting really better than the real thing or a poor substitute for face-to-face card sorting? What are the pros and cons of online card sorting and when might you use it (or not use it) for a project? In this article I try to answer these important questions, along with outlining a few online card sorting tools that you might use for a project..." http://www.uxforthemasses.com/online-card-sorting/ Let's Get Something Straight About IA By Andrew Hinton. "Information architecture uses information as its raw material the same way building architecture uses physical materials." http://www.inkblurt.com/2010/11/10/lets-get-something-straight-about-ia/ +06: JAVASCRIPT. Sorting out JavaScript Array Sorting By Craig Buckler. "Consider the following JavaScript code: var a = [30,2,1,9,15]; a.sort(); alert(a); What would be output? If you're expecting 1,2,9,15,30, you'll be surprised..." http://blogs.sitepoint.com/2010/11/10/javascript-array-sorting/ +07: MISCELLANEOUS. What Web Designers Need to Know About EPUB By Divya Manian. "...EPUB is a publishing standard designed for reflowable content which means the book can be viewed on devices of multiple dimensions. It does this by using XHTML/CSS for rendering the book and a set of standards on top of that to store metadata that can be extracted by E-Book readers to render a table of contents and other details..." http://nimbupani.com/what-web-designers-need-to-know-about-epub.html +08: NAVIGATION. Some Usability Reminders About Using Capitals and Writing Menus By One Big Field. "...folks can't read capitals as well as lower case or leading case. And that's it, plain and simple...Menu items must be one or two words, but ideally one. That's it. Not three, nor four. And five is right out. And if your navigation is horizontal its even more important. This applies to tabs too. .." http://www.onebigfield.co.uk/blog/2010/11/some-usability-reminders-using-capitals-and-menus/ Exploring Markup for Breadcrumbs By Chris Coyier. "...I'd say that there is no super-ultimate best-possible-way to handle breadcrumb markup yet. Hopefully obviously, this really isn't a big deal. Just pick one that works for you and go with it. I just think it's interesting territory for an HTML conversation. If you have any ideas for breadcrumb markup not shown here, please share." http://css-tricks.com/markup-for-breadcrumbs/ +09: STANDARDS, GUIDELINES & PATTERNS. HTML5 Section and Article - Bringing Order to Chaos By Niels Matthijs. "If you've been reading my blog you'll know that structural significance of html is one of my pet peeves. Some time ago I wrote about the addition of the header and footer elements in html5, now it's time to get really down to business. With my ie6 graph continuing its downward spiral I believed it time to rework the html code for this blog from the ground up, leaving out all the usual ie6 restrictions and integrating as much html5 as possible. This revealed some interesting structural challenges. Say hi to the section and article elements..." http://www.onderhond.com/blog/work/html5-sectioning-document-outline Experiences Migrating From XHTML 1 to HTML5 By Brian Kelly. "The experiences in looking to migrate a Web site from use of XHTML 1 to HTML5 shows that in many cases such a move can be achieved relatively easily. However pages which contain RDFa metadata may cause validation problems which might require changes in the underlying data storage." http://ukwebfocus.wordpress.com/2010/11/10/experiences-migrating-from-xhtml-1-to-html5/ Learning to Love HTML5 By Louis Lazaris. "...While it's certainly true that HTML5 has the potential to change the web for the better, the reality is that these kinds of major changes can be difficult to grasp and embrace. I'm personally in the process of gaining a better understanding of the subtleties of HTML5′s various new features, so I thought I would discuss some things associated with HTML5 that appear to be somewhat confusing, and maybe this will help us all understand certain aspects of the language a little better, enabling us to use the new features in the most practical and appropriate manner possible...." http://www.smashingmagazine.com/2010/11/10/learning-to-love-html5/ At W3C Technical Plenary in Lyon By Joshue O Connor. "I just attended the W3C Technical Plenary meeting last week in Lyon France. I was there as a member of the HTML5 Working Group, the HTML5 Bug Triage SubTeam and the Protocols and Formats Working Group - so I was there for meetings and discussions relating largely to accessibility issues within these groups. There are over 70 working groups in the W3C..." http://www.cfit.ie/news-and-commentary-archive/562-w3c-tpac +10: USABILITY. Form Fillers and Skimmers By Jessica Enders. "Not everybody will read what you wrote...If form-fillers absolutely must see the information, put it in the question..." http://formulate.com.au/research/form-fillers-and-skimmers/ Decision Architecture - Helping Users Make Better Decisions By Colleen Roller. "What is it that makes a Web site great? In answering this question, it's sometimes valuable to take a step back and consider anew why we create Web sites...the most part, we create Web sites to get users to do somethingÉ." http://www.uxmatters.com/mt/archives/2010/11/decision-architecture-helping-users-make-better-decisions.php Seeing Is Believing (How to Design for Video) By John Sorflaten. John Sorflaten "discusses the impact of video when designing your website." http://www.humanfactors.com/downloads/oct10.asp#research Jargon Test Your Intranet By Catherine Grenfell. "...Jargon needs to be kept to a minimum on the main pages of your intranet, as not all staff have the same levels of knowledge. Simple tests can establish where your intranet stands. Intranet teams need to research staff understanding and aim for clarity on the intranet at all times." http://www.steptwo.com.au/papers/cmb_jargon/index.html [Section one ends.] ++ SECTION TWO: +11: 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.]