+++ WEB DESIGN UPDATE. - Volume 12, Issue 01, July 1, 2013. An email newsletter to distribute news and information about web design and development. ++ISSUE 01 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: DRUPAL. 05: EVENTS. 06: HTML5. 07: JAVASCRIPT. 08: MISCELLANEOUS. 09: NAVIGATION. 10: PHP. 11: TOOLS. 12: USABILITY. SECTION TWO: 13: What Can You Find at the Web Design Reference Site? [Contents ends.] ++ SECTION ONE: New references. +01: ACCESSIBILITY. Online Accessibility a Faculty Duty By Lauren Ingeno. "In a traditional classroom setting, a university or college's disability services office typically coordinates a disabled student's accommodation issues. But with the growth of online education, it is now largely the obligation of the instructors themselves to proactively design courses that are equally accessible to all students..." http://www.insidehighered.com/news/2013/06/24/faculty-responsible-making-online-materials-accessible-disabled-students Teaching Accessibility Core Rules By Denis Boudreau. "Following in the footsteps of the discussion initiated last month, allow me to go further down the path of the so-called 'accessibility core rules' as we cover the remaining accessibility principles that are operable, understandable, and robust..." http://www.deque.com/pragmatica11y-teaching-accessibility-core-rules Another Employee Accessibility Lawsuit - What HR Staff Need To Know By Karl Groves. "Most organizations are familiar with the concept that public facing web sites and applications need to be accessible. But it can't stop there-accessibility is a requirement for internal systems as well. Here's some helpful thoughts on how to approach internal web properties and applications." http://simplyaccessible.com/article/internal-systems/ Accessible, Complex Data Entry Forms By Web Standards Sherpa. "Q: If I have a form, and I want to collect tabular data, I would like to make a table with th for row and column headers and then, in each td I would like to have an input (type=text). The thing is É an input must have a label and each td should reference the th. How should this be done using a table?..." https://www.facebook.com/notes/web-standards-sherpa/accessible-complex-data-entry-forms/532373796830071 Accessibility a $12 Trillion Opportunity By Dinesh Kaushal. "...So accessibility is not a nice thing to have, it is a human right and essential tool to improve world productivity" http://dineshkaushal.blogspot.in/2013/06/accessibility-12-trillion-opportunity.html What is PDF/UA all About, Anyway? By Matt May. "The PDF/UA ('Universal Accessibility') specification, or ISO 14289, published by the International Organization for Standardization (ISO) in August of last year, was a big step forward for authors of the tools we use to create and consume PDF content..." http://blogs.adobe.com/accessibility/2013/06/pdf-ua-2.html YouTube Accessibility WebAIM Thread. "Is YouTube generally considered to be an accessible place for video content these days?..." http://webaim.org/discussion/mail_thread?thread=6004 +02: CASCADING STYLE SHEETS. Height in Percent When Parent has Min-Height and No Height By Roger Johansson. "When trying to force an element to always extend to the height of its parent I ran into some peculiar browser behaviour that I thought was worth mentioning. Here's the situation..." http://www.456bereastreet.com/archive/201306/height_in_percent_when_parent_has_min-height_and_no_height/ CSS Overflow:auto and VoiceOver By Becky Gibson. "I've been playing around a bit with Dojo Mobile. My goal is to relearn Dojo and to build an accessible Web app for iOS. Unfortunately not all of the Dojo Mobile components are fully accessible, yet (the team is working on it). The app I am building is fairly simple Ð an app to track a user's step count from a pedometer. An app of this type is a bit moot since there are sophisticated devices that do this and communicate to an app via Bluetooth. However, this app uses some basic constructs so it seemed like a real-world but simple undertaking..." http://www.weba11y.com/blog/2013/06/27/css-overflowauto-and-voiceover/ Media Queries Are Not The Answer - Element Query Polyfill By Tyson Matanich. "Responsive Web design has transformed how websites are designed and built. It has inspired us to think beyond device classifications and to use media queries to adapt a layout to the browser's viewport size. This, however, deviates from the hierarchical structure of CSS and characterizes elements relative to the viewport, instead of to their container..." http://coding.smashingmagazine.com/2013/06/25/media-queries-are-not-the-answer-element-query-polyfill/ +03: COLOR. Color and User Experience By Ashley Karr. "Proper use of color can enhance the user experience of any design as color affects humans psychologically, physiologically, and emotionally..." http://interactions.acm.org/blog/view/color-and-user-experience +04: DRUPAL. Seeking Drupal Accessibility Testers By Terrill Thompson. "If your institution is like mine, you're probably seeing more and more of your web developers building their sites using Drupal. Therefore it behooves us to ensure Drupal is accessible, and that it produces fully accessible content...If you're interested in helping out with this effort, please let me know. We need people to participate as testers from July 1-12. Also if you're planning to attend the Twin Cities DrupalCamp we'd love to have your help there too..." http://mailman1.u.washington.edu/pipermail/athen-list/2013-June/007517.html Drupal 8 Alpha Releases By Dries Buytaert. "A month ago we started the Drupal 8 alpha cycle to encourage module developers to test out Drupal 8 and to try upgrading their modules. Today, we published the second alpha release of Drupal 8: Drupal 8.x alpha 2..." http://buytaert.net/drupal-8-alpha-releases +05: EVENTS. The WAI to Web Accessibility July 16, 2013. Webinar. http://nonprofitwebinars.com/webinar/716-the-wai-to-web-accessibility/ An Event Apart Washington, D.C. August 5-7, 2013. Washington, D.C., U.S.A. http://archive.aneventapart.com/2013/dc/ An Event Apart Chicago August 26-28, 2013. Chicago, Illinois, U.S.A. http://archive.aneventapart.com/2013/chicago/ DConstruct September 9, 2013. Brighton, England, United Kingdom http://2013.dconstruct.org/ An Event Apart Austin September 30 - October 2, 2013. Austin, Texas, U.S.A. http://archive.aneventapart.com/2013/austin/ +06: HTML5. Main Element Added to HTML 5.1 By Virginia DeBolt. "The
element was added to the HTML 5 specification recently. The element name is pretty obvious in meaning, but just in case you want the W3C's definition, it is the 'main content of the body of a document or application.'..." http://www.webteacher.ws/2013/06/27/main-element-added-to-html-5-1/ The main Element By Richard Clark. "Recently,
was formally added to the W3C HTML specification. Now that the dust has settled, it's about time we dive in to find out where and when it's appropriate to use
. Let's get started..." http://html5doctor.com/the-main-element/ Is HTML5 Ready? By Remy Sharp. "Back on 20-July 2009 I launch (quickly and from a local cafe) ishtml5ready.com in response to ishtml5readyyet.com, except some point along the line, I let the domain lapse (as did ishtml5readyyet.com) - but instead of it vanishing, someone else bought the domain, and added some Amazon links (and not even to mine & Bruce's book, dagnamit!). Anyway, for the sake of prosperity, I wanted to post up the content here - since there was a mini post/rant inside the source code. Please note: this is not a new post..." http://remysharp.com/2013/06/26/is-html5-ready/ HTML is Structure By Niels Matthijs. "...Structure is important because it determines what you can do with the elements on a page and it determines the speed at which things can be moved around or changed. As long as a html element has structural meaning, I don't mind leaving it in (for the record, I don't mean pure wrapper elements as they have only one direct descendant by default), if only to allow for future adaptability. I know there are still some people who consider it overkill, but that opinion is often reflected in the quality of their css code." http://www.onderhond.com/features/html-musings/html-structure-photoshop Beyond HTML5 By Charles McCathieNevile. "The age of HTML5 has already seen seismic shifts in the ways that we use the web. Chaals Nevile casts his eyes to the horizon and wonders what might be coming next..." http://www.netmagazine.com/opinions/beyond-html5 +07: JAVASCRIPT. Basic JavaScript - An Introduction to the Language By Axel Rauschmayer. "What is the best way to learn JavaScript? If you haven't programmed before, you first have learn what programming is. If you are a programmer, though, you can take a shortcut: You already know many programming language constructs and just need to learn how they are expressed in JavaScript..." http://www.2ality.com/2013/06/basic-javascript.html Video - An Overview of ECMAScript 6 By Axel Rauschmayer. "On 2013-05-30, I held the talk 'An overview of ECMAScript 6' at Fluent Conference, in San Francisco. The video is now publicly available (go there for a larger version of the video). And yes, I was slightly jet-lagged..." http://www.2ality.com/2013/06/video-es6.html With Makes it Harder to Evolve JavaScript By Axel Rauschmayer. "JavaScript's with statement has been deprecated for a while [1]: it slows down your code and is forbidden in strict mode. Additionally, it makes it harder to evolve the language, because code that uses it is more brittle." http://www.2ality.com/2013/06/with-array.html Using JavaScript's 'toString' Method By Joshua Clanton. "Have you ever wondered why if you try to alert a plain old JavaScript object, you get the text [object Object]? That's due to JavaScript's built-in toString method. Let's take a look at how it works..." http://designpepper.com/blog/drips/using-javascripts-tostring-method JavaScript Cookbook By Raymond Camden. "The JavaScript Cookbook is a site for common JavaScript problems and solutions." http://javascriptcookbook.com/ +08: MISCELLANEOUS. Mobile Web Problems and How to Avoid Them By Brad Frost. "Two years ago Jen Simmons (@jensimmons) and I made a site called WTF Mobile Web, a Tumblr which highlights the frustrations mobile web users regularly experience. While the site is a bit cheeky, the goal isn't to cut anybody down, but rather demonstrate the challenges web creators are faced with when delivering their experiences to the plethora of desknots now accessing the Web..." http://bradfrostweb.com/blog/post/mobile-web-problems/ Serving Images Responsively By Leonie Watson. "There are two key contenders addressing the issue of serving images responsively. LŽonie Watson weighs up some of the pros and cons.." http://www.netmagazine.com/tutorials/serving-images-responsively Designing for Services Beyond the Screen By Andy Polaine. "The producer-consumer model is so ingrained in our society that we tend to treat everything like a product-a one-and-done offering that can be pushed to the market and forgotten..." http://alistapart.com/article/designing-for-services-beyond-the-screen Talking Responsive Web Design with Russ Weakley - the Transcript By Sarah Hawk. "Our Talk with the Experts session this morning was slightly earlier than usual but that didn't stop people from attending what turned out to be a very interesting session. Our expert today was one of the original SitePoint course tutors, and now one of our most popular Learnable instructors, Russ Weakley. Russ was on hand to chat about everything from frameworks to convincing clients of the ROI of going with a responsive solution. There weren't a huge number of resources that came out of the hour, but those that did are listed below." http://www.sitepoint.com/talking-responsive-web-design-with-russ-weakley-the-transcript/ Replacing 'Requirements Gathering' with Something that Works By Jared Spool. "he replacement activities of creating hypotheses, conducting research, creating scenarios, and running critiques will take more time. A lot more time. How do we do that when our schedules are already full? We have to put it into context with the rest of the project. How much time will we save by getting closer to a great design faster? How much time will we get back because everyone is on the same page about why we're doing what we're doing? We spread these activities evenly throughout the project, instead of a small box upfront. They make practically every other box in the project chart better and faster. In a weird twist of project physics, we end up saving time by spending time. Most importantly, we end up with a design that uses real requirements to create a great experience. That's what we were brought in to do in the first place." http://www.uie.com/articles/requirements_gathering/ +09: NAVIGATION. Improving Usability With Extra Navigation Keys By James Edwards. "When handling keyboard events in JavaScript, most scripts and applications tend to stick to the basic range of keys that provide core accessibility - the Tab key for serial navigation, the Arrow keys for drilling-down or for two-dimensional navigation, and the Enter and Space keys for clicking and selecting things..." http://www.sitepoint.com/improving-usability-with-extra-navigation-keys/ Don't Forget Your Redirects! By Craig Buckler. "...Some clients presume users will only ever bookmark their home page. In reality, thousands of users may have bookmarked any of your pages. Two of those are the Google and Bing bots which attempt to index everything. If you haven't budgeted to manage this issue, your site upgrade is not complete! Fortunately, the process is not difficult..." http://www.sitepoint.com/dont-forget-your-redirects/ +10: PHP. From Procedural to Object Oriented PHP By Patkos Csaba. "This tutorial was inspired by a speech given by Robert C. Martin that I watched a year or so ago. The main subject of his talk is about the possibility of picking The Last Programming Language. He addresses topics such as why should such a language exist? And what it should look like? However, if you read between the lines, there was another interesting idea that caught my attention: the limitations that each programming paradigm imposes upon on us programmers. So before we get into how we could go about converting a procedural based PHP app into an object oriented one, I want to cover a little bit of theory beforehand..." http://net.tutsplus.com/tutorials/php/from-procedural-to-object-oriented-php/ +11: TOOLS. DiagnostiCSS "Visually detect any potentially invalid or inaccessible HTML markup..." http://diagnosticss.github.io/ Firefox OS Simulator By Myk Melez. "Firefox OS Simulator is a test environment for Firefox OS. Use it to test your apps in a Firefox OS-like environment that looks and feels like a mobile phone. After installing it, go to Web Developer > Firefox OS Simulator to access its features..." https://addons.mozilla.org/en-US/firefox/addon/firefox-os-simulator/ +12: USABILITY. Website Reading - It (Sometimes) Does Happen By Jakob Nielsen. "When web content helps users focus on sections of interest, users switch from scanning to actually reading the copy." http://www.nngroup.com/articles/website-reading/ Convenience Trumps Security By Gerry McGovern. "Encryption that is very hard to crack by the NSA (the US spy agency) has existed for years. But it's not easy to use so hardly anyone uses it. We trade convenience for security." http://gerrymcgovern.com/new-thinking/convenience-trumps-security Don't Poke the Bear - Creating Content for Sensitive Situations By Kate Kiefer Lee. "We're all imperfectly human, and our readers are no exception. They have touchy subjects and insecurities and things they'd rather not talk about-and they bring them all to the table when they interact with our content..." http://alistapart.com/article/dont-poke-the-bear-creating-content-for-sensitive-situations Context, Bloody Context (Video) By Cennydd Bowles. "If you've been in the mobile field for a while, you're sick of context debates. Sure, they all start innocently, but soon enough they collapse into a sad tangle of metaphysics ('But what IS context anyway?'), lazy stereotypes, and implausible scenarios involving public transport. So let's try a fresh approach. Dictionary definitions and 'it depends' generalizations are hereby banned. Let's talk details. We'll discuss whether context even matters in modern web design, ways to find out how people will use your product, design principles for different situations, and why we've been looking at the whole thing upside-down anyway..." http://vimeopro.com/mirabeaunl/mobilism-2013/video/68916119 Sketching for Better Mobile Experiences By Lennart Hennigs. "Sketching helps you better understand the problem you are trying to solve and lets you visualize possible solutions. It is a fast and inexpensive way to brainstorm and to test out a lot of UI ideas before committing to one. Sketching speeds us the concept creation and iteration phase and makes it possible to get feedback early on, when changes are easy to make." http://uxdesign.smashingmagazine.com/2013/06/24/sketching-for-better-mobile-experiences/ [Section one ends.] ++ SECTION TWO: +13: 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.]