+++ WEB DESIGN UPDATE. - Volume 3, Issue 27, December 16, 2004. An email newsletter to distribute news and information about web design and development. ++ISSUE 27 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: COLOR. 04: EVALUATION & TESTING. 05: EVENTS. 06: JAVASCRIPT. 07: MISCELLANEOUS. 08: NAVIGATION. 09: PHP. 10: STANDARDS, GUIDELINES & PATTERNS. 11: TOOLS. 12: TYPOGRAPHY. 13: USABILITY. 14: XML. SECTION TWO: 15: What Can You Find at the Web Design Reference Site? [Contents ends.] ++ SECTION ONE: New references. +01: ACCESSIBILITY. Best Practices for User Centered Web Design By Jon Gunderson, University of Illinois at Urbana Champaign "...these practices, while inspired by the needs of people with disabilities, are designed to give all users more control and options in accessing the web resources, hence the name 'User Centered' design practices. In this approach less assumptions are made about what technologies users should use to view a web resource and more options are provided to them to use a broader range of technologies and to restyle information for their own purposes and needs. Since all users benefit from this design approach, developers can functionally test their web resources using common technologies that support interoperability and open standards to see if they meet the requirements of the practices..." http://cita.rehab.uiuc.edu/uiuc-web-best-practices.htm Access me... By Georg Gunlaug "I don't know how to create accessible web pages. I just try to avoid making them inaccessible. The following is how I go about it." http://www.gunlaug.no/contents/wd_1_03.html Is Accessibility the last great Alchemy? By Peter Rainger "Understanding the needs of the 'extra-ordinary' user has for too long been seen as a 'magic art'..." http://www.usabilitynews.com/news/article2089.asp Design for Device-Independence By Gez Lemon "Visitors to your site use a variety of input/output devices, such as a mouse, keyboard, voice, head wand, etc. You should design your pages so that visitors using any of these devices have full access. Designing pages that rely on a mouse makes the content inaccessible for those using keyboard, voice activation, or any other non-pointing device. It's generally considered that pages that allow keyboard interaction are also accessible through speech input, or using a command driven interface." http://juicystudio.com/tutorial/accessibility/deviceindependent.asp Create Tables that Transform Gracefully By Gez Lemon "Tables are probably the most misused element in HTML. Tables should be used to present tabular data, but are most often used for laying out content. Pages should be laid out using style sheets, as specified in Guideline 3 of the Web Content Accessibility Guidelines. Assistive technologies depend on the correct markup of tables. Failing to do so makes your pages inaccessible." http://juicystudio.com/tutorial/accessibility/tables.asp +02: CASCADING STYLE SHEETS. The CSS Anthology: 101 Essential Tips, Tricks and Hacks Chapter 4 - Navigation By Rachel Andrew "Build navigation, CSS-style! Rachel discusses CSS replacements for image-based navigation, and CSS tab navigation. She combines background images with CSS text to create attractive and accessible menus, and uses lists to structure navigation in an accessible way." http://www.sitepoint.com/article/1433 Style Master CSS PodGuide By Westciv "The Style Master CSS podGuide is an iPod ready edition of our renowned Complete CSS Guide. Featuring a handy overview of CSS concepts, and in-depth information for every selector, property and @rule of CSS 2.1, the CSS podGuide is a must have for any web developer with an iPod, and just one more reason to get an iPod if you don't already." http://www.westciv.com/news/podguide.html Calling for a New CSS Revolution By Daniel Glazman "Seriously, I think the time has come for us to look at what we've done, where we are, and what remains on the TODO list..." http://tinyurl.com/5p4tv +03: COLOR. Don't Rely on Colour Alone By Gez Lemon "Colour is an integral part of design, and using colours carefully can make the difference between a professional looking site, and an amateur looking site. Professional sites use colour sparingly. You don't need to grab the visitor's attention, as you already have it. They've visited your site, and usually just want the information in a clear and concise manner." http://juicystudio.com/tutorial/accessibility/colour.asp +04: EVALUATION & TESTING. Three Important Benefits of Personas By Jared M. Spool "Personas are becoming a regular staple in many of the development teams we talk to. The method helps teams make a smooth translation between requirements and design, resulting with much cleaner designs. The benefits of preventing grounding, encouraging story telling, and enhancing role playing are rarely discussed, yet very present when you see the method in full force. It's these benefits that guide our belief that personas will be a trusted method for many years to come." http://www.uie.com/articles/benefits_of_personas/ +05: EVENTS. PHP West Conferences: Web Services January 14, 2005 Vancouver, British Columbia, Canada http://www.phpwest.com/ 2005 MySQL Users Conference April 18-21, 2005 Santa Clara, California U.S.A. http://mysqluc.com/ +06: JAVASCRIPT. JavaScript Tutorial By tizag.com "Before you begin this tutorial you should have basic knowledge of HTML. Check out our Beginner and HTML tutorials. This tutorial will cover the basics of javascript, from where to place your javascript to how to use functions, along with some good programming practices you should follow. We recommend that you read a few lessons a day and practice what you have learned. This will help you to absorb the material more readily." http://www.tizag.com/javascriptT/ +07: MISCELLANEOUS. Sir Timothy John Berners-Lee By Wikipedia "Accessibility is about building web pages that can be navigated and read by everyone, regardless of disability, location, experience or technology." http://en.wikipedia.org/wiki/Tim_Berners-Lee +08: NAVIGATION. A Primer on Faceted Navigation By Steve Papa "Faceted navigation brings the double whammy of helping users far more easily find what they're looking for, while also helping content owners to far more efficiently manage content (or in reality, to make it even feasible to manage content at all.)" http://tinyurl.com/5wja4 Website Usability, Breadcrumbs And Left-Side Navigation By Meghan Whitmore "The very basis of usability is the user. How can you make sure your website is designed with your user in mind? You must first consider the natural behavior of your user in order to understand how your user will experience your site. This month, we will talk in more detail about the psychology and behavior of the human Internet customer, particularly in reference to navigation. The popularity of the Internet may have only exploded over the last decade, but there have already been numerous studies into human behavior and preferences regarding website surfing." http://tinyurl.com/3md7h +09: PHP. Track Your Visitors, Using PHP By Dennis Pallett "There are many different traffic analysis tools, ranging from simple counters to complete traffic analyzers. Although there are some free ones, most of them come with a price tag. Why not do it yourself? With PHP, you can easily create a log file within minutes. In this article I will show you how." http://tinyurl.com/6jh48 +10: STANDARDS, GUIDELINES & PATTERNS. Best Practices for PBS Member Station Websites By PBS Here are thoughtful, well-written considerations for developing a PBS website. Useful to many others, as well. http://www.pbs.org/remotecontrol/bestpractices/ Better Practice Checklists By The Australian government "The checklists below have been created to help web managers, business unit owners, and others quickly enhance their understanding of a range of issues associated with the provision of services online. The checklists are short documents which provide information in a simple, non-technical manner." http://www.agimo.gov.au/practice/delivery/checklists The Marriage of Presentation and Structure By Molly E. Holzschlag & Ethan Marcotte "Like marriage, just because you donŐt know what you're getting into doesn't mean you can't have fun with it. Forget what you already know, and expose yourself to a new layout model." http://sidesh0w.com/projects/wdw2004/ +11: TOOLS. Mozilla Accessibility Extension for testing for accessibility within a web browser By Jon Gunderson "Here at University of Illinois we are developing an extension that help people test for functional accessibility to web resources." http://cita.rehab.uiuc.edu/software/mozilla/download.html +12: TYPOGRAPHY. Usable Type By Andy Hume "UsableType contains CSS guides, and style guides for text on the web. It's new but there is already a lot of content, and it will be growing as we already have some interesting articles in the pipeline for future editions." http://usabletype.com/ +13: USABILITY. No News This Week: Only Publish What Is Useful By Gerry McGovern "If you are not an organization that creates news, then don't have a prominent news section on your website. If you have one major message, then it is perfectly okay to promote that message in the center of your homepage every day of every year." http://www.gerrymcgovern.com/nt/2004/nt_2004_12_13_web_publishing.htm Usability 101: Learnability By Tristan Louis "The concept of learnability is a key one to usability design. Basically, it boils down to how easy a system is to learn. This, in turn, can be broken down into five components..." http://www.tnl.net/blog/entry/Usability_101:_Learnability +14: XML. On Form? By Phil Jones W3C's Xforms standard has arrived. But will it take off when both Microsoft and Adobe have such a grip on the market? http://www.infoconomy.com/pages/search/group99911.adp [Section one ends.] ++ SECTION TWO: +15: 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) +++ WEB DESIGN UPDATE. - Volume 3, Issue 27, December 16, 2004. An email newsletter to distribute news and information about web design and development. ++ISSUE 27 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: DREAMWEAVER. 04: EVALUATION & TESTING. 05: EVENTS. 06: INFORMATION ARCHITECTURE. 07: JAVASCRIPT. 08: MISCELLANEOUS. 09: NAVIGATION. 10: PHP. 11: STANDARDS, GUIDELINES & PATTERNS. 12: TOOLS. 13: TYPOGRAPHY. 14: USABILITY. 15: XML. SECTION TWO: 16: What Can You Find at the Web Design Reference Site? [Contents ends.] ++ SECTION ONE: New references. +01: ACCESSIBILITY. UIUC Best Practices for User Centered Web Design By Jon Gunderson, University of Illinois at Urbana Champaign "...these practices, while inspired by the needs of people with disabilities, are designed to give all users more control and options in accessing the web resources, hence the name 'User Centered' design practices. In this approach less assumptions are made about what technologies users should use to view a web resource and more options are provided to them to use a broader range of technologies and to restyle information for their own purposes and needs. Since all users benefit from this design approach, developers can functionally test their web resources using common technologies that support interoperability and open standards to see if they meet the requirements of the practices..." http://cita.rehab.uiuc.edu/uiuc-web-best-practices.htm Access me... By Georg Gunlaug "I don't know how to create accessible web pages. I just try to avoid making them inaccessible. The following is how I go about it." http://www.gunlaug.no/contents/wd_1_03.html Is Accessibility the last great Alchemy? By Peter Rainger "Understanding the needs of the 'extra-ordinary' user has for too long been seen as a 'magic art'..." http://www.usabilitynews.com/news/article2089.asp +02: CASCADING STYLE SHEETS. The CSS Anthology: 101 Essential Tips, Tricks and Hacks Chapter 4 - Navigation By Rachel Andrew "Build navigation, CSS-style! Rachel discusses CSS replacements for image-based navigation, and CSS tab navigation. She combines background images with CSS text to create attractive and accessible menus, and uses lists to structure navigation in an accessible way." http://www.sitepoint.com/article/1433 Creating Liquid Faux Columns By Zoe Gillenwater "Web designers converting from table-based to CSS-based design are often frustrated by the seeming inability to create equal height columns in CSS, an easy task with tables. Once they learn about the famous "faux columns" technique that simulates equal height columns using a tiling background image on a container, many remain frustrated that the technique only works for fixed width designs. Not so! This article will show you how to create liquid equal height columns using cleverly constructed background images and the background-position property." http://www.communitymx.com/content/article.cfm?cid=AFC58 CSS Tutorial By tizag.com CSS basics. http://www.tizag.com/cssT/ +03: DREAMWEAVER. Integrating Dreamweaver MX 2004 with Contribute 3 By Mark Fletcher "In this article I explore the powerful integration between Contribute 3 and Dreamweaver MX 2004 that gives web designers, developers, and content contributors a powerful, cost-effective way of develop and maintain websites." http://tinyurl.com/6zcyr http://www.macromedia.com/devnet/contribute/articles/contribute_dw_inte gration.html +04: EVALUATION & TESTING. Three Important Benefits of Personas By Jared M. Spool "Personas are becoming a regular staple in many of the development teams we talk to. The method helps teams make a smooth translation between requirements and design, resulting with much cleaner designs. The benefits of preventing grounding, encouraging story telling, and enhancing role playing are rarely discussed, yet very present when you see the method in full force. It's these benefits that guide our belief that personas will be a trusted method for many years to come." http://www.uie.com/articles/benefits_of_personas/ Do It Yourself Usability Testing Your Questions Answered By Meghan Whitmore "So, if you have followed all of our Usability articles, outlining how to create useful content, layout, and navigation, then you may feel your website is set and ready and usable. WRONG! Well, it may be usable, but how do you know for sure? Many top companies spend thousands of dollars to design their websites and then never even actually look at them themselves to see how usable they are. You can test your website to see if it is working in a real-world situation. You know your website backwards and forwards; after all, you designed it. But your customers don't, and it is your customers' perception of your website that makes you your profits, so you will really want to know what their experience is like." http://tinyurl.com/3qyjd http://www.webpronews.com/webdevelopment/basicdevelopment/wpn-37-200412 10DoItYourselfUsabilityTestingYourQuestionsAnswered.html +05: EVENTS. PHP West Conferences: Web Services January 14, 2005 Vancouver, British Columbia, Canada http://www.phpwest.com/ 2005 MySQL Users Conference April 18-21, 2005 Santa Clara, California U.S.A. http://mysqluc.com/ +06: INFORMATION ARCHITECTURE. By +07: JAVASCRIPT. JavaScript Tutorial By tizag.com "Before you begin this tutorial you should have basic knowledge of HTML. Check out our Beginner and HTML tutorials. This tutorial will cover the basics of javascript, from where to place your javascript to how to use functions, along with some good programming practices you should follow. We recommend that you read a few lessons a day and practice what you have learned. This will help you to absorb the material more readily." http://www.tizag.com/javascriptT/ CSS Minimum and Maximum Sizes By Andrew Clover Here is a Javascript technique to make CSS min/max sizing work in IE/Win. http://www.doxdesk.com/software/js/minmax.html CSS Properties To JavaScript Reference Conversion By Code_Punk http://codepunk.hardwar.org.uk/css2js.htm +08: MISCELLANEOUS. Sir Timothy John Berners-Lee By Wikipedia "Accessibility is about building web pages that can be navigated and read by everyone, regardless of disability, location, experience or technology." http://en.wikipedia.org/wiki/Tim_Berners-Lee +09: NAVIGATION. A Primer on Faceted Navigation By Steve Papa "Faceted navigation brings the double whammy of helping users far more easily find what they're looking for, while also helping content owners to far more efficiently manage content (or in reality, to make it even feasible to manage content at all.)" http://tinyurl.com/5wja4 Website Usability, Breadcrumbs And Left-Side Navigation By Meghan Whitmore "The very basis of usability is the user. How can you make sure your website is designed with your user in mind? You must first consider the natural behavior of your user in order to understand how your user will experience your site. This month, we will talk in more detail about the psychology and behavior of the human Internet customer, particularly in reference to navigation. The popularity of the Internet may have only exploded over the last decade, but there have already been numerous studies into human behavior and preferences regarding website surfing." http://tinyurl.com/3md7h http://www.webpronews.com/webdevelopment/basicdevelopment/wpn-37-200412 10WebsiteUsabilityBreadcrumbsandLeftSideNavigation.html +10: PHP. Track Your Visitors, Using PHP By Dennis Pallett "There are many different traffic analysis tools, ranging from simple counters to complete traffic analyzers. Although there are some free ones, most of them come with a price tag. Why not do it yourself? With PHP, you can easily create a log file within minutes. In this article I will show you how." http://tinyurl.com/6jh48 http://www.webpronews.com/webdevelopment/basicdevelopment/wpn-37-200411 16TrackYourVisitorsUsingPHP.html PHP Tutorial By tizag.com "The goal of this tutorial is to teach you the basics of PHP..." http://www.tizag.com/phpT/ +11: STANDARDS, GUIDELINES & PATTERNS. Best Practices for PBS Member Station Websites By PBS Here are thoughtful, well-written considerations for developing a PBS website. Useful to many others, as well. http://www.pbs.org/remotecontrol/bestpractices/ Better Practice Checklists By The Australian government "The checklists below have been created to help web managers, business unit owners, and others quickly enhance their understanding of a range of issues associated with the provision of services online. The checklists are short documents which provide information in a simple, non-technical manner." http://www.agimo.gov.au/practice/delivery/checklists +12: TOOLS. Mozilla Accessibility Extension for testing for accessibility within a web browser By Jon Gunderson "Here at University of Illinois we are developing an extension that help people test for functional accessibility to web resources." http://cita.rehab.uiuc.edu/software/mozilla/download.html +13: TYPOGRAPHY. Usable Type By Andy Hume "UsableType contains CSS guides, and style guides for text on the web. It's new but there is already a lot of content, and it will be growing as we already have some interesting articles in the pipeline for future editions." http://usabletype.com/ +14: USABILITY. No News This Week: Only Publish What Is Useful By Gerry McGovern "If you are not an organization that creates news, then don't have a prominent news section on your website. If you have one major message, then it is perfectly okay to promote that message in the center of your homepage every day of every year." http://www.gerrymcgovern.com/nt/2004/nt_2004_12_13_web_publishing.htm +15: XML. On Form? By Phil Jones W3C's Xforms standard has arrived. But will it take off when both Microsoft and Adobe have such a grip on the market? http://www.infoconomy.com/pages/search/group99911.adp Should I serve application/xhtml+xml to Mozilla? By mozilla.org "...if you are using the usual HTML features (no MathML) and are serving your content as text/html to other browsers, there is no need to serve application/xhtml+xml to Mozilla. In fact, doing so would deprive the Mozilla users of incremental display, because incremental loading of XML documents has not been implemented yet. Serving valid HTML 4.01 as text/html ensures the widest browser and search engine support." http://www.mozilla.org/docs/web-developer/faq.html#accept [Section one ends.] ++ SECTION TWO: +16: 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.]