+++ WEB DESIGN UPDATE. - Volume 10, Issue 36, March 2, 2012. An email newsletter to distribute news and information about web design and development. ++ISSUE 36 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: JAVASCRIPT. 06: MISCELLANEOUS. 07: NAVIGATION. 08: PHP. 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. Assistive Technology Experiment - High Contrast By Jon Whiting. "Several months ago I decided to spend some time using a few common, but often overlooked, assistive technologies and then report on my experiences and insights. The first two posts of this series presented my recommendations on designing for users of ZoomText and Dragon NaturallySpeaking. As the final part of this series, I will cover the High Contrast options in Windows 7..." http://webaim.org/blog/high-contrast/ Accessibility Needs to be Understood as an Equally Necessary partner to any Marketing Efforts By Joe Dolson. "...An aspect of the problem for many web sites has to do with long-term business development. A business may hire an accessibility expert to review their web sites, make suggestions, or re-work their web site, but when they hire a marketing firm for long-term web site development, they can lose their accessibility very quickly if that marketing company doesn't also have a firm grasp on accessibility..." http://www.joedolson.com/articles/2012/03/we-need-to-have-a-talk-with-marketing/ Mind Map of WCAG 2.0 By Gregg Vanderheiden. http://lists.w3.org/Archives/Public/w3c-wai-gl/2012JanMar/0065.html Is There a Need for a Professional Accessibility Society? By Leonie Watson. "Is there a need for a professional accessibility society? This is the question being discussed by the accessibility cognoscenti..." http://www.nomensa.com/blog/2012/is-there-a-need-for-a-professional-accessibility-society/ +02: CASCADING STYLE SHEETS. Places It's Tempting To Use Display: None; But Don't By Chris Coyier. "By applying that class to an element you've immediately made that content 'inaccessible' by screen readers. You've probably known this forever, but still the poison apple sneaks into our code once in a while..." http://css-tricks.com/places-its-tempting-to-use-display-none-but-dont/ CSS: From Screen to Print and Beyond By Molly Holzschlag. "Revolutionary for Web design, Cascading Style Sheets (CSS) have solved and continue to solve numerous challenges in designing for the continuous media of the Web. But what of paged media, as we want with our digital readers and printed collateral? Making websites and applications attractive and logical in paged media has been at best poorly achieved without the use of additional scripts and programming..." http://h30565.www3.hp.com/t5/Feature-Articles/CSS-From-Screen-to-Print-and-Beyond/ba-p/1752 Mastering Box Shadows By Konstantin Kichinsky. "Today we will study the art of mastering shadows with CSS3. There are two types: box-shadow and text-shadow, defined respectively in the modules and CSS3 Text..." http://www.sitepoint.com/mastering-box-shadows/ Is It Time To Change Our CSS Practices? By Steven Bradley. "We've been using css as the presentation layer of web pages for quite some time. I've personally been using it for about 10 years and like many, much of my css practices were developed nearly as long ago. Is it time to change those practices?..." http://www.vanseodesign.com/css/flawed-practices/ Vendor Prefix Practicalities By Peter-Paul Koch. "I've been going through my CSS tests last week, and thought I'd jot down some notes on how the browser treat vendor prefixes. It'll bring some much-needed practicality into the discussion..." http://www.quirksmode.org/blog/archives/2012/02/vendor_prefix_p.html ***What's the Deal With Display: Inline-Block? By Joshua Johnson. "...One interesting alternative to floats that people are turning to more and more lately is to set the display value of an element to inline-block. What does this do exactly? How is it like a float? How is it different? Let's dive in and see what we can discover..." http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/ +03: COLOR. Color Contrast and Accessibility By Mike Adams. "I recently came across a tool I hadn't used before and wanted to share it and another resource for analyzing color contrasts. If we look at 1.4.3 within WCAG 2.0 it lays out the groundwork but having a tool to use is such a nice resource to have..." http://theaccesspond.com/2012/02/23/color-contrast-and-accessibility/ +04: DREAMWEAVER. Finding the CSS3 Possibilities in Dreamweaver 5.5 By Virginia DeBolt. "A brilliant examples of interface design that Dreamweaver designers use with some regularity is the CSS rule definition dialog window in Dreamweaver. This window has been approximately the same since the days of Macromedia when it was first instituted..." http://www.webteacher.ws/2012/03/01/finding-the-css3-possibilities-in-dreamweaver-5-5/ +05: JAVASCRIPT. Valid JavaScript Variable Names By Mathias Bynens. "...I decided to look into which Unicode glyphs are allowed in JavaScript variable names, or identifiers as the ECMAScript specification calls them..." http://mathiasbynens.be/notes/javascript-identifiers Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 Workshop Material By Hans Hillen and Steve Faulkner. http://dl.dropbox.com/u/573324/CSUN2012/index.html +06: MISCELLANEOUS. Future-Ready Content By Sara Wachter-Boettcher. "The future is flexible, and we're bending with it. From responsive web design to futurefriend.ly thinking, we're moving quickly toward a web that's more fluid, less fixed, and more easily accessed on a multitude of devices. As we embrace this shift, we need to relinquish control of our content as well, setting it free from the boundaries of a traditional web page to flow as needed through varied displays and contexts. Most conversations about structured content dive headfirst into the technical bits: XML, DITA, microdata, RDF. But structure isn't just about metadata and markup; it's what that metadata and markup mean. Sara Wachter-Boettcher shares a framework for making smart decisions about our content's structure..." http://www.alistapart.com/articles/future-ready-content/ The State of the Union Bog for Mobile Industry - All the Stats and Facts for 2012 "The big statistics and numbers blog! Its that time of year, the start of a new year, and we have to update and memorize new numbers. For me this annual blog is a kind of honor, a bit like the US president who gives his 'State of the Union' speech to Congress. (The state of our industry is strong!) And the blog article will get very wide coverage throughout the year as the definitive collection of the big numbers in one place..." http://communities-dominate.blogs.com/brands/2012/02/the-state-of-the-union-blog-for-mobile-industry-all-the-stats-and-facts-for-2012.html Responsive Images Community Group W3C Group. Our goal is a markup-based means of delivering alternate image sources based on device capabilities, to prevent wasted bandwidth and optimize display for both screen and print. http://www.w3.org/community/respimg/ How I Learned to Stop Worrying and Love Responsive Images By Paul Robert Lloyd. "Last week I was invited to Responsive Summit, a face-to-face discussion about Responsive Web Design. We talked about what we've learnt so far, the problems we're continuing to face and things we'd like to change..." http://paulrobertlloyd.com/2012/02/responsive_summit/ Which One: Responsive Design, Device Experiences, or RESS? By Luke Wroblewski. "As more organizations realize they need to invest heavily in multi-device Web designs, the inevitable question of 'how' comes up. Responsive Web design, separate sites, or something in between? Here's how I've tried to simplify this decision..." http://www.lukew.com/ff/entry.asp?1509 +07: NAVIGATION. Responsive Navigation Patterns By Brad Frost. "Top and left navigations are typical on large screens, but lack of screen real estate on small screens makes for an interesting challenge. As responsive design becomes more popular, it's worth looking at the various ways of handling navigation for small screen sizes. Mobile web navigation must strike a balance between quick access to a site's information and unobtrusiveness. Here's some of the more popular techniques for handling navigation in responsive designs.." http://bradfrostweb.com/blog/web/responsive-nav-patterns/ Thoughts on Responsive Navigation By Alexis Fellenius Makrigianni. "I've been thinking a lot about navigation in responsive designs lately, so when Brad Frost wrote Responsive Navigation Patterns a few days ago I thought I'd write down some thoughts on a couple of the methods he talks about..." http://lexi.se/post/18401593732/thoughts-on-responsive-navigation Building Responsive Websites: How to Handle Navigation Menus By Scott Gilbertson. "The web is moving rapidly away from its fixed-layout past into what it arguably should have been all along - a flexible medium that adapts to any screen size. While there are many aspects to the move from fixed to flexible, the overall process has been dubbed 'responsive design.' That is, designing sites that respond to different screen sizes, fluidly adapting to the wide array devices available today and the myriad more coming tomorrow." http://www.webmonkey.com/2012/02/building-responsive-websites-how-to-handle-navigation-menus/ +08: PHP. Working with Dates and Times in PHP and MySQL By Sean Hudgston. "When working in any programming language, dealing with dates and time is often a trivial and simple task. That is, until time zones have to be supported. Fortunately, PHP has one of the most potent set of date/time tools that help you deal with all sorts of time-related issues..." http://phpmaster.com/working-with-dates-and-times/ +09: STANDARDS, GUIDELINES & PATTERNS. Standards Leader Blasts HTML5 Video Copy Protection By Stephen Shankland. "Ian Hickson, editor of the HTML standard, declares that a DRM Web video from Microsoft, Google, and Netflix would be unethical and ineffectual..." http://news.cnet.com/8301-30685_3-57384129-264/standards-leader-blasts-html5-video-copy-protection/ 'Unethical' HTML Video Copy Protection Proposal Draws Criticism From W3C Reps. By Ryan Paul. "A new Web standard proposal authored by Google, Microsoft, and Netflix seeks to bring copy protection mechanisms to the Web. The Encrypted Media Extensions draft defines a framework for enabling the playback of protected media content in the Web browser. The proposal is controversial and has raised concern among some parties that are participating in the standards process..." http://arstechnica.com/business/news/2012/02/unethical-html-video-copy-protection-proposal-criticized-by-standards-stakeholders.ars +10: USABILITY. Redefining Hick's Law By Jason Gross. "Hick's Law has always been a popular reference point for designers. You'll find it cited in the endless lists of basic laws and principles that all designers should be familiar with. Given our assumed comfort level with this design cornerstone, I am surprised to see so many people getting it wrong..." http://uxdesign.smashingmagazine.com/2012/02/23/redefining-hicks-law/ Finger-Friendly Design: Ideal Mobile Touch Target Sizes By UX Movement. "In darts, hitting the bulls-eye is harder to do than hitting any other part of the dartboard. This is because the bullseye is the smallest target. This same principle can also apply to touch targets on mobile devices..." http://uxmovement.com/buttons/finger-friendly-design-ideal-mobile-touch-target-sizes/ Audiences, Outcomes, and Determining User Needs By Corey Vilhauer. "Every website needs an audience. And every audience needs a goal. Advocating for end-user needs is the very foundation of the user experience disciplines. We make websites for real people. Those real people are able to do real things. But how do we get to really know our audience and find out what these mystery users really want from our sites and applications? Learn to ensure that every piece of content on your site relates back to a specific, desired outcome - one that achieves business goals by serving the end user. Corey Vilhauer explains the threads that bind UX research to content strategy and project deliverables that deliver..." http://www.alistapart.com/articles/audiences-outcomes-and-determining-user-needs/ Bylines for Web Articles? By Jakob Nielsen. "Should you say who wrote the content on your site? Sometimes yes (for credibility), sometimes no (for brevity). And rarely in mobile." http://www.useit.com/alertbox/bylines.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.]