+++ WEB DESIGN UPDATE. - Volume 12, Issue 19, October 31, 2013. An email newsletter to distribute news and information about web design and development. ++ISSUE 19 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: HTML5. 05: JAVASCRIPT. 06: MISCELLANEOUS. 07: TOOLS. 08: TYPOGRAPHY. 09: USABILITY. SECTION TWO: 10: What Can You Find at the Web Design Reference Site? [Contents ends.] ++ SECTION ONE: New references. +01: ACCESSIBILITY. Images Of Text By Rakesh Paladugula. "If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text except for the following: (Level AA)..." http://www.maxability.co.in/2013/10/1-4-5-images-of-text/ How Video Accessibility Intersects with Engagement, SEO, and User Experience By Shannon K. Murphy. "...Let's explore the benefits of accessible video for corporate marketing and how it ties in with engagement, SEO, and user experience..." http://www.3playmedia.com/2013/10/25/how-video-accessibility-intersects-engagement-seo-user-experience/ Guidelines - Accessibility (WordPress) By wordpress.org "The Theme Accessibility Audit provides an optional theme review for themes submitted to the wordpress.org Theme Repository. Submitted themes (or theme updates) that contain the tag accessibility-ready will undergo an independent, accessibility review after they have been approved for inclusion in the Theme Repository..." http://make.wordpress.org/themes/guidelines/guidelines-accessibility/ +02: CASCADING STYLE SHEETS. Icon Fonts and User-Defined Style Sheets By Gez Lemon. "Icon fonts are vector graphics that are included in the content using the CSS content property on a before or after pseudo-class selector. As with regular fonts, icon fonts are scalable and can be styled using CSS, unlike images. They also have the benefit that they remain visible in high contrast on Windows, unlike CSS background images. The biggest drawback from an accessibility point of view is that they won't work if a user's user-defined style sheet overrides the font-family property." http://juicystudio.com/article/icon-fonts-user-defined-stylesheets.php CSS3 Inheritance Tips and Tricks By Craig Buckler. "It's easy to overlook the cascading features of stylesheets. Most developers are aware of the inherit keyword but there are a few new inheritance features in CSS3 you may not be aware of..." http://www.sitepoint.com/css3-inheritance-tips-tricks/ Float Label Pattern By Brad Frost. "Inline form labels can cause a lot of trouble, but at the same time the constraints of mobile screens force designers to do more with less space. It puts people in a weird position. Let's take a look at the pros and cons of inline labels..." http://bradfrostweb.com/blog/post/float-label-pattern/ Well Rounded - Compound Shapes in CSS By Parker Bennett. "The following is a guest post by Parker Bennett. Parker is a bit of a regular around here, known for tackling common problems with unique solutions. This time he's back at it creating complex shapes that have image backgrounds, shadows, and curves, yet are flexibl" http://css-tricks.com/well-rounded-compound-shapes-css/ +03: COLOR. Color Contrast Analyzer for Chrome - Text in Images, Gradients, PDFs and More By Greg Krase. "There are several good color contrast analysis tools available. I've come to heavily depend upon some of them for analyzing text, but they all lack some functionality that I find I'm needing. I would like to be able to analyze text within images, and analyze text over top of background images or gradients..." http://accessibility.oit.ncsu.edu/blog/2013/10/29/color-contrast-analyzer-for-chrome-text-in-images-gradients-pdfs-and-more/ +04: HTML5. The HTML5 Document Outline By Steve Faulkner. "...It is dangerous because it can lead unsuspecting developers to think that using the nesting of heading elements in sectioning elements actually has some effect for users who consume heading semantics. Overwhelmingly the opposite is true..." http://blog.paciellogroup.com/2013/10/html5-document-outline/ Date Input in HTML5 - Restricting Dates, and a Thought for Working Around Limitations By Tiffany B. Brown. "You probably know that HTML5 introduced a date input type, which constrains the value to a valid date string. largely eliminates the need for JavaScript-based date pickers such as the one found in jQuery UI. In browsers that support the type, we can pick a date using the browser's native widget. Below is an example of this widget in Chrome..." http://tiffanybbrown.com/2013/10/24/date-input-in-html5-restricting-dates-and-thought-for-working-around-limitations/ +05: JAVASCRIPT. The History of "typeof null" By Axel Rauschmayer. In JavaScript, typeof null is 'object', which incorrectly suggests that null is an object (it isn't, it's a primitive value, consult my blog post on categorizing values for details). This is a bug and one that unfortunately can't be fixed, because it would break existing code. Let's explore the history of this bug...." http://www.2ality.com/2013/10/typeof-null.html +06: MISCELLANEOUS. Responsive Design Interview Series - My Answers To Some Responsive Questions By Steven Bradley. "A couple months ago I had the privilege of being interviewed by Justin Avery as part of a collection of interviews with designers on the topic of responsive design. I say privileged given the other names in the collection and wondering how I could be considered part of a group that includes them..." http://www.vanseodesign.com/web-design/responsive-design-interview/ 10 Things You Need to Know About Responsive Web Design By Carrie Cousins. "Responsive design is all the rage these days. Almost everywhere you look someone is talking (or writing) about it..." http://www.adobe.com/devnet/html5/articles/ten-things-you-need-to-know-about-responsive-design.html Responsive Design is a Poor Man's Content Strategy By Ric van Westhreenen. "If your new website is not suitable for mobile devices, you'll miss the boat. So what happens, all of the internet is flooded with websites that are responsive. Most built according to the bootstrap concept / framework. And yes, it is awfully nice to see that the website adapts to the device that you visit the website with. But, does that communicate the message you want to send out to visitors on a smartphone or tablet?..." http://www.roodlicht.com/responsive-design-is-a-poor-mans-content-strategy/3175?lang=en +07: TOOLS. Easy Chirp 2 Soft Beta Launched By Dennis Lembree. "Web Axe author Dennis Lembree has announced the soft release of Easy Chirp 2 beta! Easy Chirp, originally named Accessible Twitter, is a web-based Twitter application which is developed to be easy to use, robust (even works without JavaScript), and of course accessible..." http://www.webaxe.org/easy-chirp-2-soft-beta-launched/ +08: TYPOGRAPHY. Designing For the Aging Eye By Ilene Strizver. "If your audience includes seniors, there are some important recommendations to take into consideration in order to attract, engage, and hold your readers' attention..." http://www.creativepro.com/article/typetalk-designing-for-the-aging-eye +09: USABILITY. Cross-Channel Usability - HealthCare.gov UX Fails By Janelle Estes. "A consistent user experience, regardless of channel, is one of the 4 key elements of a usable cross-channel experience. Consistency across channels helps build trust with customers." http://www.nngroup.com/articles/cross-channel-consistency/ What the HealthCare.gov Fiasco Teaches Us By Gerry McGovern. "If the HealthCare.gov website fiasco proves anything it is how critical a usable website is." http://gerrymcgovern.com/new-thinking/what-healthcaregov-fiasco-teaches-us HealthCare.gov's Account Setup - 10 Broken Usability Guidelines By Jen Cardello. "HealthCare.gov's account setup process is unnecessarily complex and may be contributing to backend technology failures." http://www.nngroup.com/articles/affordable_care_act_usability_issues/ [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.]