+++ WEB DESIGN UPDATE. - Volume 5, Issue 25, December 7, 2006. An email newsletter to distribute news and information about web design and development. ++ISSUE 25 CONTENTS. SECTION ONE: New references. What's new at the Web Design Reference site? http://www.d.umn.edu/goto/webdesign/ New links in these categories: 01: ACCESSIBILITY. 02: CASCADING STYLE SHEETS. 03: EVALUATION & TESTING. 04: EVENTS. 05: JAVASCRIPT. 06: MISCELLANEOUS. 07: NAVIGATION. 08: PHP. 09: TOOLS. 10: TYPOGRAPHY. 11: USABILITY. 12: XML. SECTION TWO: 13: What Can You Find at the Web Design Reference Site? [Contents ends.] ++ SECTION ONE: New references. +01: ACCESSIBILITY. What's Up with Accessibility in 2007 By Sharron Rush. "Access to the web for people with disabilities is a topic that has gained a lot of attention in the years since 1999, when Knowbility was founded. At that time, the WCAG 1.0 Guidelines were still in Draft versions. Section 508 had been reauthorized, but the standards that would define web accessibility for US government agencies had yet to be adopted. It was not at all uncommon to receive blank stares from highly experienced programmers and web developers if the subject of 'web accessibility' was introduced. As 2006 draws to a close, that has changed dramatically..." http://www.knowbility.org/newsletter/?content=Win06whatsup2007 Defining 'Accessibility' and Texas House Bill 2819 By Jim Thatcher. "...Texas House Bill 2819 makes the requirement of accessibility clear and it makes the requirement practical." http://www.knowbility.org/newsletter/?content=defining Accessibility Legislation - an Insight By Urte Meinhardt. Summary of accessibility policies by country. http://www.sapdesignguild.org/editions/edition9/policies2.asp Before and After Demonstration [DRAFT] By W3C. "The 'Before and After Demonstration' is a multi-page resource suite that shows common accessibility barriers using practical examples. The demonstration consists of an inaccessible Web site, an accessible version of the same site, as well as information about the demonstrated barriers. This demonstration does not attempt to cover every checkpoint of the Web Content Accessibility Guidelines (WCAG) nor to provide an exhaustive list of examples but to demonstrate some key aspects of Web accessibility." http://www.w3.org/WAI/EO/2005/Demo/Overview CBC Online Video: Shall we do this properly? By Joe Clark. If we're gonna start offering TV shows for download (and I'll use the word 'we' advisedly), then we have to be better than the private sector, which captions nothing...I'd like to hear a rational argument why TV broadcasts should be captioned but TV downloads shouldn't. No? Then let's continue. The only rational standard is for downloaded versions to be captioned if the original TV show was. Since CBC Television and Newsworld have 100%-captioning requirements, which they're still ignoring...in theory every show will have captions. We can do a couple of things..." http://blog.fawny.org/2006/12/04/corpse-itunes/ +02: CASCADING STYLE SHEETS. Rounded Corner Boxes the CSS3 Way By Andy Budd. "If you've been doing CSS for a while you'll know that there are approximately 3,762 ways to create a rounded corner box. The simplest techniques rely on the addition of extra mark-up directly to your page, while the more complicated ones add the mark-up though DOM manipulation. While these techniques are all very interesting, they do seem somewhat of a kludge. The goal of CSS is to separate structure from presentation, yet here we are adding superfluous mark-up to our code in order to create a visual effect. The reason we are doing this is simple. CSS2.1 only allows a single background image per element..." http://24ways.org/2006/rounded-corner-boxes-the-css3-way Methods for Testing in Multiple Versions of IE By Zoe Gillenwater. "Internet Explorer 7 (IE), released in October 2006, greatly improves its CSS rendering capabilities. However, it's only available for Windows XP and Vista, so we still have to support IE 6 ? and possibly IE 5.5 and 5.0, depending on your site's audience ? for some time to come. Unfortunately, the integration of IE into the Windows operating system, and Microsoft's refusal to allow multiple versions of it to run at the same time, have made testing web sites in various versions of the ubiquitous browser difficult. There are, however, ways it can be done, and the advent of IE 7 has brought some new methods out for our consideration. In this article I'll provide an overview of the current methods available for testing multiple versions of Windows IE and provide the pros and cons of each method so you can decide which suits you best." http://www.communitymx.com/content/article.cfm?cid=8897D Vertical Centering with a Shiv Div By Matthew Tretter. "Lots of designers have used this trick to vertically center blocks of known size in browser windows but, as Jon Hicks points out, some content may be cropped if the browser window is too small. Though it requires a little extra markup, my solution addresses this problem by positioning a shiv div instead of the content itself..." http://exanimo.com/css/vertical-centering-with-a-shiv-div Going Mobile: Development and Preparation By Joe Dolson. "...If accessibility is about ensuring your visitor's ability to use and enjoy your website, then it's not an unreasonable goal to develop a site to be usable in the maximum variety of situations. Once you become aware of the overlap between handheld browser compatibility and accessibility, it hardly seems like a major step to jump into mobile device compatibility. With the rapid growth of the handheld browser market, it's unwise not to at least consider mobile browsers while developing your website..." http://accessites.org/gbcms_xml/news_page.php?id=29#n29 Faster Development with CSS Constants By Rachel Andrew. "Anyone even slightly familiar with a programming language will have come across the concept of constants - a fixed value that can be used through your code. For example, in a PHP script I might have a constant which is the email address that all emails generated by my application get sent to." http://24ways.org/2006/faster-development-with-css-constants +03: EVALUATION & TESTING. Expert Usability Review vs. Usability Testing By Lisa Halabi. "In the usability world there are two ways of evaluating an existing website: expert usability reviews and usability testing. But what's the difference? And which one's better?" http://tinyurl.com/y2dcj9 +04: EVENTS. MX San Francisco February 2-13, 2007. San Francisco, California U.S.A. http://www.adaptivepath.com/events/2007/feb/ Computer/Human Interaction 2007 April 23-May 3, 2007. San Jose, California U.S.A. http://www.chi2007.org/ XTech 2007 May 15-17, 2007. Paris, France http://xtech.expectnation.com/event/1 +05: JAVASCRIPT. You Cannot Rely on JavaScript Being Available. Period. By Roger Johansson. "...It's very disturbing to see this trend of not giving any (or enough) thought to what will happen when a browser doesn't support the technologies you want to use. It's even more disturbing to see the JavaScript framework craze sweeping through the developer community make people use JavaScript for all sorts of things that are better done without it. JavaScript frameworks seem to have a lot in common with the DHTML libraries of the late nineties - start using them and common sense goes out the window unless you have the experience to use them right. I admit that I too went overboard with scripting around the turn of the century. But I think I learned my lesson. I really hope I did." http://tinyurl.com/yhcr7o Hide And Seek in The Head By Peter-Paul Koch. "If you want your JavaScript-enhanced pages to remain accessible and understandable to scripted and noscript users alike, you have to think before you code. Which functionalities are required (ie. should work without JavaScript)? Which ones are merely nice-to-have (ie. can be scripted)? You should only start creating the site when you've taken these decisions..." http://24ways.org/2006/hide-and-seek-in-the-head Tasty Text Trimmer By Drew McLellan. "In most cases, when designing a user interface it's best to make a decision about how data is best displayed and stick with it. Failing to make a decision ultimately leads to too many user options, which in turn can be taxing on the poor old user. Under some circumstances, however, it's good to give the user freedom in customizing their workspace. One good example of this is the 'Article Length' tool in Apple's Safari RSS reader. Sliding a slider left of right dynamically changes the length of each article shown. It's that kind of awesomely magic stuff that's enough to keep you from sleeping. Let's build one..." http://24ways.org/2006/tasty-text-trimmer JavaScript/HTML Portscanning and HTTP Auth By Stefan Esser. "Several people were researching HTML portscanning during the last days. Basically this is nothing more than requesting stuff through the link tag, because it halts page rendering and checking how long it took. A typical timing attack that people nowadays even use to break RSA keys. The funny thing about this new JavaScript-less portscanning is however that they do not mention how they want to get an IP range to scan in. A person that disables JavaScript will most probably not have Java activated and without Java there is no public method to get the victim's local IP. Considering the HTML scanning speed it might take months to scan all possible private IP addresses. If you can scan a Class-C subnet in 2 minutes then you will need more than 91 days to scan only the private IP addresses in the 10.x.x.x subnet. Have fun with that... (and especially if the interesting sites are not reachable by IP but only by hostname. So you might find out that a server is up, but you still cannot attack it)..." http://tinyurl.com/ydq7ho Bruteforcing HTTP Auth in Firefox with JavaScript By Stefan Esser. "Yesterday I blogged about a way to bypass HTTP Auth popus that used a 'abuse the server' approach. Today I will show a way to bypass HTTP auth in Firefox and in some cases bruteforce HTTP auth in Firefox in some situations..." http://tinyurl.com/ym6dth JavaScript Scanning and expose_php=On By Stefan Esser. "The good thing about images is that JavaScript can check if they are loaded and what size they are. With this ability it is trivial to detect if PHP is running on an URL if expose_php=On. Here is the little proof of concept..." http://tinyurl.com/yyj6p4 User-Proofing Ajax By Peter Quinsey. "Ajax offers the ability to avoid both needless browser behavior like page reloads and useful browser behavior like error handling. When good web apps go bad, Peter Quinsey's guidelines and techniques can help you and your users stay informed and productive." http://www.alistapart.com/articles/userproofingajax +06: MISCELLANEOUS. Interview with Simon Collison By Carolyn Wood. "...Simon Collison, aka Colly, is one of the most talented people around and he has a lot to say in my interview with him, about his design process, his love of illustration and music, working with clients, Erskine Design, and much more..." http://www.digital-web.com/articles/simon_collison/ Avoid Edge Cases by Designing Up Front By Ben Henick. "By the time they reach the coding stage, many web projects are a tangle of exceptions -- and that can make standards-based development a nightmare. Better planning may be exactly what you need to avoid markup derangement or, even worse, a dysfunctional product." http://www.alistapart.com/articles/avoidedgecases Words as Pointers, and the Meaning of Web 2.0 By Tim O'Reilly. "I had a great exchange with Steven White the other day in the comments on my entry Why Web 2.0 is More Than a Buzzword." http://radar.oreilly.com/archives/2006/11/words_as_pointe_1.html Web 2.0 = the web By John Allsopp. "Tim Berners-Lee gave us...the name 'world wide web' (and I mean quite literally gave). It's served us well for 15 years. I think it sill works well. Let's keep using it a little while longer yet eh?.." http://westciv.typepad.com/dog_or_higher/2006/12/web_20_the_web.html Web 2.0: The Power Behind the Hype By Jared M. Spool. "...Problems not withstanding, we still feel that this emerging standard, combined with other new tools, such as AJAX and open source infrastructures, makes for a new and exciting environment. There's been a tremendous amount of hype surrounding all these new developments, but, for once, we are thinking that there really is some power that is beneath the hype that is worth paying attention to." http://www.uie.com/articles/web_2_power/ Criteria for Using Web 2.0 By Alastair Campbell. "...I distilled the main issues down to three criteria. I'm not claiming anything new here, but I do keep having to stress these: 1. The end-user must have a motivation for using the functions. 2. The functionality must not hinder the business. 3. The functionality must be feasible within the technological and resource constraints of the website..." http://alastairc.ac/2006/12/criteria-for-using-web-20/ +07: NAVIGATION. More on Meaningless Link Labels By Jared Smith. "...alternative text for an image should convey the CONTENT and FUNCTION of the image. Defining function can be quite difficult. Here's a few tips..." http://webaim.org/blog/2006/12/01/meaningless_link_labels/ Why Intranet Search Fails By Gerry McGovern. "Intranet search performs miserably because most organizations do not properly manage their content..." http://www.gerrymcgovern.com/nt/2006/nt-2006-12-04-intranet-search.htm Use Sitemap Standards to Help Search Engines By Tony Patton. "Sitemaps provide a way for Web sites to specify what pages within the site should be indexed and what new content has been added. Tony Patton offers an overview of the sitemap standard..." http://builder.com.com/5100-6371_14-6140439.html Accessible Dynamic Links By Mike Davies. "Although hyperlinks are the soul of the World Wide Web, it's worth using them in moderation. Too many links becomes a barrier for visitors navigating their way through a page. This difficulty is multiplied when the visitor is using assistive technology, or is using a keyboard; being able to skip over a block of links doesn't make the task of finding a specific link any easier. In an effort to make sites easier to use, various user interfaces based on the hiding and showing of links have been crafted. From drop-down menus to expose the deeper structure of a website, to a decluttering of skip links so as not to impact design considerations. Both are well intentioned with the aim of preserving a good usability experience for the majority of a website's audience; hiding the real complexity of a page until the visitor interacts with the element..." http://24ways.org/2006/accessible-dynamic-links +08: PHP. Optimizing System Performance By George Schlossnagle. "In this second part of a two part series, you'll learn how to use debuggers and optimize performance. It is excerpted from chapter 12 of the book Zend PHP Certification, written by George Schlossnagle et al." http://www.devshed.com/c/a/PHP/Optimizing-System-Performance/ My Experience Moving to PHP5 By John Lim. "In August of this year, we decided to move from PHP4 to PHP5 for all our future PHP development..." http://phplens.com/phpeverywhere/?q=node/view/235 Querystring Functions By Dave Child. "Adding and removing variables to and from URLs using PHP is a relatively simple process admittedly, but I have a couple of functions I use often to make the process even less time-consuming..." http://www.ilovejackdaniels.com/php/querystring-functions/ Vanilla on Rails: The Coexistence of PHP and Ruby By Jesse Skinner. "I'm going to debunk another myth that might keep you from trying out Ruby on Rails (or any other new server language). MYTH: Once you start using Rails, you have to do everything in Rails..." http://tinyurl.com/ylv92o +09: TOOLS. Paparazzi! By Nate Weaver. "Paparazzi! is a small utility for Mac OS X that makes screenshots of webpages." http://www.derailer.org/paparazzi/ Screenshot Settings By Bruce Phillips. "This application is a GUI method for changing the screenshot (screen capture) settings in Mac OS X v10.4 (Tiger). Note that you can also drag-n-drop a folder onto this application to change the default location." http://scriptbuilders.net/files/screenshotsettings1.1.html +10: TYPOGRAPHY. Web Design is 95 Percent Typography By Information Architects. "95 Percent of the information on the web is written language. It is only logical to say that a web designer should get good training in the main discipline of shaping written information, in other words: Typography..." http://tinyurl.com/sj6lm Best Fonts for the Web By Kathy Marks. "For years I've been meaning to put together a "cheat sheet" of fonts and font alternatives for quick selection but never got around to it. Today I finally got so tired of Arial and Helvetica that I sat down to write a few out." http://www.kathymarks.com/archives/2006/11/best_fonts_for_the_web_1.html More About Web Fonts: Basics and a Few Surprises By Kathy Marks. "During my venture into typography, I collected a hodgepodge of information and tips on using type on the web. In the hope of making sense of it all, I've tried to organize these jottings. Most are basics that I've included as helpful reminders, but I also found a few surprises..." http://tinyurl.com/yyxngf The Font Controversy: Ems, Percentages, Pixels and Points By Kathy Marks. "To conclude these notes about fonts, I turn to the Great Size Debate. In summary, the controversy concerns what unit of measurement designers should use to size text. The topic is, of course, much more complex than that statement conveys. In fact, reams (or screens) have been written on the issue. The primary points are these..." http://tinyurl.com/y7jnu8 +11: USABILITY. The Complexity of Simplicity By Luke Wroblewski. "Though many business strategies and publications continue to trumpet the power of simplicity in the design of digital products, for lots of companies and product teams, simplicity doesn't come easy..." http://www.uxmatters.com/MT/archives/000151.php Progressive Disclosure By Jakob Nielsen. "Progressive disclosure defers advanced or rarely used features to a secondary screen, making applications easier to learn and less error-prone." http://www.useit.com/alertbox/progressive-disclosure.html How Many People Does It Take to Turn Off a Vista PC? By Charles Arthur. "Let's see: three separate teams each of eight programmers and testers and designers and a manager, plus six layers of managers for each team, plus an ubermanager for them all - that's 43. The number comes from Moishe Lettvin, who spent his 'worst' year out of seven at Microsoft working on a feature for Vista which he says 'should've been designed, implemented and tested in a week"...." http://technology.guardian.co.uk/weekly/story/0,,1959713,00.html +12: XML. Differences Between HTML and XHTML By WHATWG Wiki. "Although HTML and XHTML appear to have similarities in their syntax, they are significantly different in many ways..." http://wiki.whatwg.org/wiki/HTML_vs_XHTML Is RSS a Bad Idea? By Christina Wodtke. "Okay, admittedly I'm stirring the pot here, but I was just thinking: why do we care so much about RSS?..." http://www.eleganthack.com/archives/i_s_rss_a_bad_idea.php [Section one ends.] ++ SECTION TWO: +13: What Can You Find at the Web Design Reference Site? Accessibility Information. http://www.d.umn.edu/goto/accessibility Association Information. http://www.d.umn.edu/goto/associations Book Listings. http://www.d.umn.edu/goto/books Cascading Style Sheets Information. http://www.d.umn.edu/goto/css Color Information. http://www.d.umn.edu/goto/color Dreamweaver Information. http://www.d.umn.edu/goto/dreamweaver Evaluation & Testing Information. http://www.d.umn.edu/goto/testing Event Information. http://www.d.umn.edu/goto/events Flash Information. http://www.d.umn.edu/goto/flash Information Architecture Information. http://www.d.umn.edu/goto/architecture JavaScript Information. http://www.d.umn.edu/goto/javascript Miscellaneous Web Information. http://www.d.umn.edu/goto/misc Navigation Information. http://www.d.umn.edu/goto/navigation PHP Information. http://www.d.umn.edu/goto/php Sites & Blogs Listing. http://www.d.umn.edu/goto/sites Standards, Guidelines & Pattern Information. http://www.d.umn.edu/goto/standards Tool Information. http://www.d.umn.edu/goto/tools Typography Information. http://www.d.umn.edu/goto/type Usability Information. http://www.d.umn.edu/goto/usability XML Information. http://www.d.umn.edu/goto/xml [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/goto/webdevlist 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.]