+++ WEB DESIGN UPDATE. - Volume 10, Issue 07, August 12, 2011. An email newsletter to distribute news and information about web design and development. ++ISSUE 07 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: DREAMWEAVER. 04: EVALUATION & TESTING. 05: EVENTS. 06: JAVASCRIPT. 07: MISCELLANEOUS. 08: STANDARDS, GUIDELINES & PATTERNS. 09: TOOLS. 10: USABILITY. SECTION TWO: 11: What Can You Find at the Web Design Reference Site? [Contents ends.] ++ SECTION ONE: New references. +01: ACCESSIBILITY. Headings and Labels - Accessibility for Web Writers, Part 10 By Dey Alexander. "Write descriptive headings, sub-headings and labels for content. This will help users understand what your content is about, decide if it is relevant and go directly to the information they are looking for..." http://www.4syllables.com.au/2011/08/accessibility-web-writers-part-10/ Section Headings - Accessibility for Web Writers, Part 11 By Dey Alexander. "Use headings to organise the sections or topics within an article or document. Headings break content into more manageable chunks, making a page or topic easier to use and understand. You can use visual elements (boxes, lines and so on) to complement headings, but you cannot rely on them as they will not be accessible to all users..." http://www.4syllables.com.au/2011/08/accessibility-web-writers-part-11/ AAP Provides Longdesc Feedback to W3C By Dennis E. Lembree. "...Recently the Association of American Publishers (AAP) submitted feedback on longdesc to the W3C HTML 5 Working Group. It's very well written and thought it should be shared. I obtained permission to publish the response (thanks Suzanne and Ed). Here is the main part of it..." http://webaxe.blogspot.com/2011/08/aap-provides-longdesc-feedback-to-w3c.html Video Accessibility Problems By Joe Dolson. "...Video has a number of glaring accessibility problems. There's nothing especially complicated about these issues - they should be obvious, after all - but accomplishing them at all seems to be beyond the pale at the moment. It's not that it's difficult to make video accessible. It's not that the software to do it, at least in a limited manner, is expensive or difficult to use. It's mostly two issues: laziness or ignorance..." http://www.joedolson.com/articles/2007/02/video-accessibility-problems/ Pearson Guidelines for Accessible Educational Web Media By pearsoned. "Making accessibility easier to achieve by choosing technologies (e.g. HTML, Flash) with this in mind..." http://wps.pearsoned.com/accessibility/115/29601/7577872.cw/index.html Myths About Low Vision By Wayne Dick. "Most people lump blindness and visual impairment into one group. This is a mistake that does serious harm to many people who have low vision but are not blind..." http://blog.knowbility.org/?p=346 Tools for Access to Reading By Wayne Dick. "...Do not stop using text alternatives or keyboard access just because people in VR/LV do not use them. Keep using semantic markup. Do everything you did before, but also consider how things look at screen density 100. Can you read the page reasonably? Does your page meet the Screen Density Principle at screen density 100 or even less? Would you like to interact with your page at screen density 100..." http://blog.knowbility.org/?p=374 +02: CASCADING STYLE SHEETS. What Makes For a Semantic Class Name? By Chris Coyier. "...I'd describe semantics as it relates to HTML as tags, classes, IDs, and attributes describing but not specifying the content they enclose. Let's start with an example we can probably all agree on..." http://css-tricks.com/13423-semantic-class-names/ Techniques For Gracefully Degrading Media Queries By Lewis Nyman. "...supported by most modern Web browsers. Mobile and desktop browsers that lack support will present a subpar experience to the user unless we step up and take action. I'll outline some of techniques that developers can follow to address this problem..." http://coding.smashingmagazine.com/2011/08/10/techniques-for-gracefully-degrading-media-queries/ The 'inherit' Value for CSS Properties By Louis Lazaris. "...f you want, however, you can force a property in a child element to inherit the value for that property from its parent by using the inherit value. Here's an example of how you might do this..." http://www.impressivewebs.com/inherit-value-css/ The Future of CSS Layouts By Peter Gasston. "For all the wonderful features it provides, CSS does a surprisingly poor job of the fundamentals of page layout. But options for richer, more dynamic pages are on their way, as Peter Gasston explains..." http://www.netmagazine.com/features/future-css-layouts Let the Web Move You - CSS3 Animations and Transitions By John Allsopp. "If you've been developing for, or even just using the web for more than about 15 years, you'll likely remember a time when animated effects were the bomb. Animated GIFs adorned just about every page, spinning globes, little men with jack hammers, self - winged envelopes. And if you're very unlucky, you'll remember the explosion of blinking content on the web around 1995, as the blink element in the then dominant Netscape browser took hold of the imagination of designers everywhere (for killing off the non - standard blink element alone, the web standards movement deserves at the very least a Noble Peace Prize). And perhaps the single widest JavaScript use in its earliest days was for creating image rollovers, until CSS got into the act with the hover state. In short, animation has had a long, if checkered career on the web. Then, for years, animation fell out of favour, but with the rise of JavaScript libraries, we've seen the re-??emergence of animated interfaces." http://www.webdirections.org/blog/let-the-web-move-you-css3-animations-and-transitions/ CSS3 Shapes By Demetrius Wallace. "I put together this small resource to hopefully help other designers and developers with a list of mainly geometric shapes you can perform using CSS3..." http://www.css3shapes.com CSS3 Radial Gradient Syntax Breakdown By Louis Lazaris. "A short time ago I wrote an article that broke down the syntax for coding CSS3 linear gradients from scratch. Once you get the hang of them, linear gradients are pretty simple to code. Radial gradients, on the other hand, are a little more complex. So let' s finish off what I started in that earlier post and go through the syntax for radial gradients..." http://www.impressivewebs.com/css3-radial-gradient-syntax/ +03: DREAMWEAVER. Building Mobile Pages with Dreamweaver CS5.5 By David Karlins. "Build mobile-friendly web pages based on jQuery JavaScript objects quickly and easily with Dreamweaver CS5.5. And do it without coding! David Karlins, author of Adobe Creative Suite 5 Web Premium How-Tos: 100 Essential Techniques, takes you through the Dreamweaver techniques that make this eminently possible..." http://www.peachpit.com/articles/article.aspx?p=1737104 +04: EVALUATION & TESTING. Client Reactions to User Research Findings By Jim Ross. "Sometimes, as a user researcher, I feel like an investigative reporter, unearthing sensational findings and hidden truths that will amaze and intrigue my audience. Sadly, user research findings are rarely this sensational, and it is seldom that they completely amaze and stun our clients. By client, I mean anyone for whom we're doing research-whether a consulting client, an internal client team, or a project team..." http://www.uxmatters.com/mt/archives/2011/08/client-reactions-to-user-research-findings.php Putting the 'Long' into Longitudinal: UX Lessons from Survey Research By Caroline Jarrett. "Longitudinal studies look at long-term user experience. Usually, that means over a few months or possibly a few years. But recently, at the European Survey Research Association Conference, I learned about some much longer-term studies that offer some lessons about how to conduct our rather shorter investigations..." http://www.uxmatters.com/mt/archives/2011/08/putting-the-long-into-longitudinal-ux-lessons-from-survey-research.php Kim Goodwin - Developing Effective Scenarios By Sean Carmichael. "Combining storytelling with research data can help you craft realistic scenarios to guide your design process. Getting to know the specific needs of your users allows you to address any potential problems they may have. As a consultant, Kim Goodwin uses her experience and expertise in working with teams to develop effective scenarios. In this podcast, Kim discusses the role that scenarios play in the design process with Jared Spool..." http://www.uie.com/brainsparks/2011/08/05/kim-goodwin-developing-effective-scenarios/ +05: EVENTS. HTML5 Accessibility with John Foliot August 18, 2011. San Francisco, Califorina, U.S.A. http://www.sfhtml5.org/events/26628601/ Content Strategy Forum September 5-7, 2011. London, England, United Kingdom http://2011.csforum.eu/ UserFocus 2011 September 16, 2011. Washington, District of Columbia, U.S.A. http://upadc.org/userfocus Modernizr with Faruk Ates September 29, 2011. San Francisco, Califorina, U.S.A. http://www.sfhtml5.org/events/28458331/ Codeworks December 1, 2011 in Madison, Wisconsin, U.S.A. December 3, 2011 in Nashville, Tennessee, U.S.A. December 5, 2011 in Baltimore, Maryland, U.S.A. December 7, 2011 in Raleigh, North Carolina, U.S.A. December 9, 2011 in Orlando, Florida, U.S.A. http://codeworks.phparch.com/ +06: JAVASCRIPT. What's a Closure? By Nathan Whitehead. Ever wonder what closures are and how they work? You can learn about this advanced programming concept right now through interactive lessons in JavaScript. http://nathansjslessons.appspot.com/lesson?id=1000 +07: MISCELLANEOUS. The Process and the Point By Joshua Porter. "...we should remember not to confuse the two. The process is valuableÉit's a framework for deciding what to do nextÉand we need thatÉbut it's merely a means to an end. Don't let process details distract you from solving your problem in any way possible. The Process is importantÉbut it's not the Point." http://bokardo.com/p/1850 Utilizing The Power Of Recycling In Web Design By Paul Boag. "...We will look at how we can recycle existing work (done by ourselves or others) in order to be more efficient. By doing so, we can finish projects more quickly and generate a better profit margin. The great thing about recycling is that we can all do it, whether we are a developer, designer or website owner. Let's begin our journey with the masters of recycling: developers..." http://www.smashingmagazine.com/2011/08/03/save-time-and-make-money-by-recycling/ The Web Platform - Interview with Chris Wilson, Developer Advocate Google By Bill Cullifer. "In this three minute event conclusion interview, I asked Chris to sum up the benefits of attending Open Web Camp III. I also asked Chris to share his thoughts and perspective on HTML5..." http://webprofessionals.org/the-web-platform-%E2%80%93-interview-with-chris-wilson-developer-advocate-google/ +08: STANDARDS, GUIDELINES & PATTERNS. HTML Structural Elements By W3C Wiki. "Now we've gotten to grips with the very basics of HTML, what is contained inside the document , and the different building blocks you'll most commonly use to structure different items of content inside the , at this point in the Web Standards Curriculum we will start to look at the overall structure of the HTML content, and what distinct sections the page contains..." http://www.w3.org/wiki/HTML_structural_elements#Enter_HTML5_structural_elements The Details and Summary Elements By Tom Leadbetter. "How often have you had to write some JavaScript to create an interactive widget that shows and hides some content? You might' ve even downloaded a whole JavaScript library to achieve such an effect. Well, it' s time to rejoice! HTML5 provides a way to create this toggle feature with just a few lines of HTML and no JavaScript in sight (depending on the browser, of course, but we'll come to that later). And so we introduce to you the
element..." http://html5doctor.com/the-details-and-summary-elements/ Return of the Loading Bar - Are CSS3 and HTML5 the New Flash? By Joshua Johnson. "Today we' re going to discuss a little bit about how and why Flash came to be regarded in a negative light and how we can avoid running down the same path with the modern technologies replacing it..." http://designshack.co.uk/articles/css/return-of-the-loading-bar-are-css3-and-html5-the-new-flash/ Are CSS3 and HTML5 the "New Flash"? By Craig Grannell. "Devs debate whether industry is failing to learn from past mistakes..." http://www.netmagazine.com/node/1301 HTML5, Hollow Demos and Forgetting the Basics By Bruce Lawson. "My heart sinks when I see the latest flurry of tweets about some new HTML5 demo. As someone else said, it's usually a warning that you're about to visit a browser-freezing lump of JavaScript without a hyperlink in sight..." http://www.brucelawson.co.uk/2011/html5-and-hollow-demos/ HTML5 Multimedia - A Review of Audio Codecs and File Formats By Ian Devlin. "Different audio codecs can be used to output different audio file formats, a number of which are supported by HTML5. Ian Devlin reviews them in this excerpt from his book, HTML5 Multimedia: Develop and Design..." http://www.peachpit.com/articles/article.aspx?p=1738562 +09: TOOLS. responsivepx By Remy Sharp. "Enter the url to your site - local or online: both work - and use the controls to adjust the width and height of your viewport to find exact breakpoint widths in pixels. Then use that information in your media queries to create a responsive design..." http://responsivepx.com/ +10: USABILITY. Another 10 UX Mistakes to Avoid By Neil Turner. "In a previous article I listed 10 common UX mistakes to avoid and outlined how to go about side stepping each one. Well like a modern day Hollywood franchise I'm back with 10 more because all good things need a sequel and it seemed a shame for so many important UX mistakes to be left on the proverbial cutting room floor..." http://www.uxforthemasses.com/more-ux-mistakes/ The Challenge of Targeting Late Adopters By Demetrius Madrigal and Bryan McClain. "...By understanding the challenges of targeting those users who are late adopters, we can start exploring strategies that can help us to be successful with this demographic..." http://www.uxmatters.com/mt/archives/2011/08/the-challenge-of-targeting-late-adopters.php Designing Fun By Debra Levin Gelman. "'Fun' is always going to have an emotional component. No matter how closely you follow the above process, someone is going to disagree-with your definition, ranking, tasks, or design decisions. However, by thinking critically about what it means for a site to be 'fun,' and by taking the time to define, evaluate, task and test, you' ll be able to move away from 'I' ll know it when I see it' to 'I' m confident you' ll design something I think is fun.'" http://www.alistapart.com/articles/designing-fun/ Beginner' s Guide to Responsive Web Design By Nick Pettit. "Whether you' re a beginner or a seasoned web professional, creating responsive designs can be confusing at first, mostly because of the radical change in thinking that' s required. As time goes on, responsive web design is drifting away from the pool of passing fads and rapidly entering the realm of standard practice. In fact, the magnitude of this paradigm shift feels as fundamental as the transition from table based layouts to CSS. Simply put, this is a very different way of designing websites and it represents the future. Over the past year, responsive design has become quite the hot topic in the web design community. If all the buzz has you feeling like Rip Van Winkle waking up in the 21st century, this summary will help you catch up with the times..." http://thinkvitamin.com/design/beginners-guide-to-responsive-web-design/ Responsive Web Design How-To, Useful Frameworks, Showcase By Lisa Walker. "Responsive web design is about designing and developing a website in the way that it is compatible with any device that can be used to browse the Internet. This means that a website should better have a mobile version. And a curious thing about mobile devices is that they are all so mush different! Diversity is good because it makes the world bright, but it can eventually drive the designer mad in his effort to make and tune a layout for every model of a variety of brands. This is where responsive web design comes in handy. The necessity for flexibility in the layouts is even more imperative now so that we can better accommodate the great number of browsing situations currently in place..." http://www.webdesign.org/web-design-basics/design-principles/responsive-web-design-how-to-useful-frameworks-showcase.20413.html Designing For a Responsive Web By Max Luzuriaga. "...Our old fixed-width layout approach is out of the question now. So what do we do? The answer, my dear reader, lies with Responsive Web Design..." http://webdesign.tutsplus.com/articles/design-theory/designing-for-a-responsive-web/ Create Fluid Width Videos By Chris Coyier. "CSS-Tricks' Chris Coyier talks us through different CSS and jQuery solutions to create responsive and fluid width videos that maintain aspect ratio and work with all major video hosts, including YouTube and Vimeo..." http://www.netmagazine.com/tutorials/create-fluid-width-videos [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.]