+++ WEB DESIGN UPDATE. - Volume 9, Issue 49, June 2, 2011. An email newsletter to distribute news and information about web design and development. ++ISSUE 49 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: COLOR. 04: DREAMWEAVER. 05: EVALUATION & TESTING. 06: EVENTS. 07: INFORMATION ARCHITECTURE. 08: JAVASCRIPT. 09: NAVIGATION. 10: PHP. 11: STANDARDS, GUIDELINES & PATTERNS. 12: TOOLS. 13: USABILITY. SECTION TWO: 14: What Can You Find at the Web Design Reference Site? [Contents ends.] ++ SECTION ONE: New references. +01: ACCESSIBILITY. Equal Opportunity for Learning: Accessibility and Education By Glenda Sims. "Today I read very powerful words about the right for everyone to have equal access to education from the U.S. Office of Civil Rights. If you are in edu, do all your students, regardless of disabilities, have equal access to course content? See what the Office of Civil Rights has to say..." http://www.glendathegood.com/blog/?p=610 Screen-Reader Problems Uncovered In Olympics Ticket Site By Dan Jellinek. "Some blind web users may not have been able to buy tickets for next year's London Olympics due to the partial inaccessibility of the tickets website, testing by the charity AbilityNet has found..." http://www.headstar.com/eablive/?p=588 Forms Within Tables - Doodle and Accessibility By Terrill Thompson. "I'm writing this blog post for at least three reasons..." http://terrillthompson.blogspot.com/2011/05/forms-within-tables-doodle-approach-to.html What Frustrates Screen Reader Users on the Web: A Study of 100 Blind Users By Jonathan Lazara, Aaron Allena, Jason Kleinmana, Chris Malarkeya. "In this study, 100 blind users, using time diaries, recorded their frustrations using the Web. The top causes of frustration reported were (a) page layout causing confusing screen reader feedback; (b) conflict between screen reader and application; (c) poorly designed/unlabeled forms; (d) no alt text for pictures; and (e) 3-way tie between misleading links, inaccessible PDF, and a screen reader crash. Most of the causes of frustration, such as inappropriate form and graphic labels and confusing page layout, are relatively simple to solve if Webmasters and Web designers focus on this effort..." http://www.informaworld.com/smpp/section?content=a787987186&fulltext=713240928 Inclusive Web Design Principles By culture.gov.uk. "Inclusive design is where innovation and imagination flourish. Meeting the needs of the widest variety of people does not inhibit creativity. It opens our minds and inspires excellence..." http://www.culture.gov.uk/what_we_do/telecommunications_and_online/8161.aspx +02: CASCADING STYLE SHEETS. CSS Regions, CSS Exclusions By Bruce Lawson. "At Web Directions and Opera's very own pubgeekmeetupaganza standards.next, Stephanie Rewis and Peter Gasston discussed some of the new proposals for layout in CSS, including the CSS Regions and associated CSS Exclusions specs written by Adobe. For the first time, layout is 'unboxed' and text can flow in (or around) arbitrary shapes..." http://www.brucelawson.co.uk/2011/css-regions-css-exclusions/ CSS Regions Prototype By Adobe. "This page contains information regarding a WebKit-based prototype of CSS Regions, the proposed additions from Adobe to the W3C CSS (Cascading Style Sheet) modules to build complex, magazine-like layouts using web standards. Capturing in digital form the complex layouts of a typical magazine, newspaper, or textbook requires capabilities beyond those possible with the existing CSS modules. CSS Regions is a proposal that describes how content creators can use some additional basic building blocks to express complex layouts with CSS..." http://labs.adobe.com/technologies/cssregions/ Centering button elements and input buttons By Roger Johansson. "In a recent project I needed to add a button to a column on the page. The design called for the button to be centered in the column. This turned out to be slightly less straightforward than I initially thought." http://www.456bereastreet.com/archive/201106/centering_button_elements_and_input_buttons/ Discussing Alternatives for Various Sizes of the Same Image and Introducing src Property in CSS as an Option By Robert Nyman. "Today I was just about to write a blog post about images and serving different sizes depending on the device accessing it. Then the Adaptive images post came up on the public-html@w3.org mailing list. So let's look at that and add my thoughts..." http://robertnyman.com/2011/05/30/discussing-alternatives-for-various-sizes-of-the-same-image-introducing-src-property-in-css-as-an-option/ 2 And 3 Column Fluid CSS Layouts By Steven Bradley. "...The concepts for creating fluid layouts are mostly the same we used in creating the fixed width layouts with a few key differences..." http://www.vanseodesign.com/css/fluid-layout-code/ +03: COLOR. Contrast - Accessibility for Web Writers, Part 6 By Dey Alexander. "People with low vision, age-related vision impairment or colour blindness can have problems reading text when there is not enough contrast between the text and background colours..." http://www.4syllables.com.au/2011/05/accessibility-web-writers-part-6/ A Guide to CSS Colors in Web Design By Alexander Dawson. "With the exceptions of typography and layout, nothing has a more profound impact on the way we design and craft websites than color - from the visuals we showcase through images and media to the simple choice of whether to use salmon pink or neon green to give a website that '90s "Help, I'm going blind!" appeal. This simple guide will look into CSS colors. You'll also find excellent color charts and tools to help you work with color values..." http://sixrevisions.com/css/colors-webdesign/ +04: DREAMWEAVER. Best Tip Ever - Using Online CSS3 Tools In Dreamweaver By Greg Rewis. "...there is also an interesting text field that becomes active in Live View at the top of the document window - an address field - just like in a browser. And yes, you can type any URL into the field. Dreamweaver, just like the browser, will load the page in Live View..." http://blog.assortedgarbage.com/2011/05/using-online-css3-tools-in-dw/ +05: EVALUATION & TESTING. Making The Case For A/B Testing By Justin Cutroni. "We all know that web analytics is a process. And the most critical part of that process is making changes. But deciding what changes to make can often be very difficult. That's where website testing comes into play..." http://blog.clicktale.com/2011/05/28/making-the-case-for-ab-testing/ The Art of Design Research (and Why It Matters) By Jon Freach. "...sometimes design teams don't have the patience to see the value in dragging out a study in an effort to make it scientifically or statistically significant. We're just not wired that way; we prefer to make and experiment and then analyze later. So what is research good for?..." http://www.theatlantic.com/life/archive/2011/05/the-art-of-design-research-and-why-it-matters/239561/ +06: EVENTS. Design It. Build It. (DIBI) June 7-8, 2011. Newcastle upon Tyne, Unlined Kingdom. http://www.dibiconference.com Accessibility is Not a Checklist June 11, 2011. Baltimore, Maryland, U.S.A. http://www.accessibilitybaltimore.org/2011/05/18/june-11-accessibility-is-not-a-checklist/ Open Web Camp III July 16, 2011. Palo Alto, California, U.S.A. http://openwebcamp.org/ +07: INFORMATION ARCHITECTURE. Tools for facilitating Feedback on Prototypes and Wireframes By David Leggett. Wireframes and Prototypes are an essential tool when building websites and applications for clients. They're more than just a simple deliverable or milestone-they function as a 'common communication language' as Todd Zaki Warfel puts in Prototyping: A Practitioner's Guide. Prototypes and Wireframes give us the ability to share ideas that can otherwise be difficult to communicate, and sell designs that might otherwise be dismissed..." http://www.uxbooth.com/blog/tools-for-facilitating-feedback-on-prototypes-and-wireframes/ +08: JAVASCRIPT. The void Operator in JavaScript By Axel Rauschmayer. "Syntax: void expr evaluates expr and returns undefined. Its (rare) use is for contexts where an expression is demanded, but the result has to be undefined..." http://www.2ality.com/2011/05/void-operator.html Ten Oddities and Secrets About JavaScript By Andy Croxall. "...This article is aimed at intermediate developers who are curious about more advanced JavaScript. It is a collection of JavaScript's oddities and well-kept secrets..." http://www.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/ +09: NAVIGATION. Mobile Accessibility Tip - Use Visible Anchored Links from Henny Swan. "I'm not a huge fan of skip links as a solution for screen reader users on desktop but agree wholeheartedly that visible ones are extremely helpful for sighted keyboard only users who, unlike screen reader users, are forced to tab through content in a linear fashion. The real value being that they are visible - which is why I think of them as anchored links rather than traditional skip links." http://www.iheni.com/mobile-accessibility-tip-use-visible-anchored-links/ +10: PHP. Object-Oriented PHP: Working with Inheritance By Matt Doyle. "...This tutorial explores the concept of parent and child classes; overriding methods; final classes; abstract classes, and interfaces. Example code included..." http://www.elated.com/articles/object-oriented-php-working-with-inheritance/ +11: STANDARDS, GUIDELINES & PATTERNS. Ensuring Accessibility Support in HTML5 By Judy Brewer. "...Comments welcome through 3 August 2011...W3C has made it clear that HTML5 must meet W3C's commitment to accessibility. Your comments can help clarify what is needed to ensure that HTML5 provides support for accessibility..." http://www.w3.org/QA/2011/05/html5-lastcall-accessibility.html HTML5 has Reached Last Call Status - Submit Feedback Until August 3 By Roger Johansson. "On 25 May the W3C posted W3C Invites Broad Review of HTML5, announcing that the HTML5 specification is now at Last Call and that broad review is welcome until August 3, 2011..." http://www.456bereastreet.com/archive/201105/html5_has_reached_last_call_status_submit_feedback_until_august_3/ HTML5 Accessibility Chops: ARIA & Validation By Steve Faulkner. "I tweeted the other day, suggesting people switch to the HTML5 doctype as the use of ARIA is conforming in HTML5. As things stand, if ARIA roles, states and properties are used on HTML elements with a doctype other than a developer will get the unhelpful error messages simply because the DOCTYPE they are using does not recognise ARIA attributes as valid. This is not likely to change. So make the switch..." http://www.paciellogroup.com/blog/2011/06/html5-accessibility-chops-aria-validation/ +12: TOOLS. WCAG 2.0 Audio Contrast Tool Help For Success Criteria 1.4.7 By eramp. "WCAG 2.0, Success Criteria 1.4.7 is a guideline for accessible audio files on the internet. The goal is to help people who are hard of hearing understand the speech (foreground). This is done by making sure that any background music or noise is very quiet. Background music (or sound) should be at least 20dB lower than the foreground speech." http://www.eramp.com/WCAG_2_audio_contrast_tool_help.htm Leveling up to HTML5 By Virginia DeBolt: Web Teacher by vdebolt "HTML5 is getting pretty usable. I didn't say finished or official, just usable. Doable..." http://www.webteacher.ws/2011/05/31/leveling-up-to-html5/ +13: USABILITY. Figuring Out How to Deal with Stupid Users By Frank Spillers. "There's a common belief that the problem with errors users make with Web sites or Web apps has to do with differing intelligence levels. Some users even blame themselves for being dumb. "Sorry about this", I was told by an IT manager at a major financial institution, "It's just that our users are lazy and stupid". If only, we could blame intelligence, IQ or motivation! Waiting for smart users to use your design is like trying..." http://www.demystifyingusability.com/2011/05/figuring-out-how-to-deal-with-stupid-users.html Analyzing the Impact of the Digital Fold By Michele Hinojosa. "In the traditional world, we talk about the importance of being 'above the fold': appearing in the top half of the front page of a newspaper. However, on the web the picture is a little murkier. Website visitors will use different screen resolutions, browsers, window sizes and toolbars, essentially leading to a different 'fold' line for every user..." http://blog.clicktale.com/2011/05/29/analyzing-the-impact-of-the-digital-fold/ User-Interface, User-Experience and Usability Explained By Bernhard Schokman "So in short, when I'm 'interacting' with a website I'm using its user-interface design. How I 'feel' and my 'preferences' when using it is my user experience and how 'easy and intuitive' it is for me to perform the functions I came to do, is a measure of its usability. As you can see, it's really hard for someone to specialise in one of these areas without an understanding of the other two." http://www.myware.com.au/?p=628 Ubiquitous Usability By Daniel Letts. "For too long usability has been the preserve of geeks - a specialism confined to websites and screens, form factors and devices. We need to realise that usability - in other words 'how easily people can use something to achieve a goal' shouldn't just be restricted to the lab and the engineer. It should be something that everyone expects to get, and everybody strives to provide. Usability should apply to all walks of life and everything that we encounter - it should be ubiquitous. It needs to be about the services we use and the spaces we inhabit..." http://www.livework.co.uk/articles/ubiquitous-usability The Only Two Things You Really Need To Know About Web Design By Susan Weinschenk. "...I realized that it boiled down to these two things: 1) On every page, does the visitor know what he or she is supposed to do on that page? Is it clear why the page is there and what his or her next action should be? 2) On every page, has the website owner/business owner made it really clear how the visitor can take the one action that the owner really wants and hopes the visitor to take?..." http://www.whatmakesthemclick.net/2011/05/31/only-two-things-really-need-know-about-web-design/ [Section one ends.] ++ SECTION TWO: +14: 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.]