Refresh Nashville

While Refresh Nashville remains on hiatus trying to redefine itself, we encourage everyone to attend the upcoming BarCamp Nashville event.

Our first meeting was held a couple weeks ago at Sitening. We had a good first meeting turn out. We mostly hung out in the conference room — eating and drinking — and talked about different design and programming related topics. This is the list of topics we discussed:

Topics & Links

• Webdesigners Tools (from from WellStyled.com)
• Web Developer’s Handbook
• CSS Reboot
• Fangs (screen reader emulation for Firefox)
• TinyMCE (JavaScript HTML WYSIWYG editor)
• Google Accessible Search
• Accesibility Toolset (from Accessify)
• iStockphoto

CSS Reboot

A common project we discussed during the meeting was CSS Reboot:

The CSS Reboot is a community event for web professionals and enthusiasts. Every November 1st and May 1st at 18:00 GMT, Rebooters from all over the world launch their standards based website redesigns simultaneously; bringing traffic, interest and a little respect to their sites. There are no prizes or arbitrary winners, just great exposure and the knowledge that we all participated in something great. Read more about the CSS Reboot history.

The idea is to pick one or more sites that utilize modern design techniques (XHTML & CSS) that are being redesigned. Each redesigned website needs to be completed and launched by November 1st, 2006. CSS Reboot is an excellent opportunity to bring attention and traffic to your website(s).

Ever since we launched Google Accessible Search in July, one of the most oft-requested features has been the addition of advanced search capabilities similar to those available on the main Google Search page. In response, we’ve added an advanced search link at http://labs.google.com/accessible in order to refine your searches in various ways. The order of results will continue to take the accessibility of the search results into account.

Here are the types of advanced queries you can perform:

• restrict search to portions of a page, e.g., the title
• restrict search to results in a given language
• restrict searches to web pages found during a given time period
• restrict searches to content in a given file format

And a lot more that won’t fit on the margin of this page — for complete details, see our Advanced Search Tips.”

(Via Google Blog - Live.)

A List Apart recently published an article entitled, “12 Lessons for Those Afraid of CSS and Standards.”

The first lesson was, “Everything you know is wrong… sort of.” That lesson set the stage up for the critical difference between using standards based and non-standards based markup.

At the implementation level, this lesson is about the differences between table markup and semantic markup:

Table vs. Semantic Markup

Table markup	Semantic markup	Implications
Linear	Hierarchical	Design for the information, not in spite of it.
Procedural	Functional	Put things where they belong.
Location-based	Contextual	Let the markup describe what something is, before you let it describe where something is.
Defines constraints	Defines domains	You don’t need to push the envelope, because it will change its shape to suit your needs.

The remaining lessons offer thoughtful and compelling reasons why designers should seriously consider moving towards standards based Web design. Full Article »

Second Annual Global Event Launches Website and Event Registration at International Conference

Boston, Massachusetts: June 12, 2006 — On June 12, 2006, The Usability Professionals’ Association (UPA) is launching its official Website www.worldusabilityday.org and event registration for the second annual World Usability Day at the UPA International Conference in Broomfield Colorado. World Usability Day 2006, a global series of events will be held on November 14, 2006 and promote awareness of the benefits of usability engineering and user-centered design. Activities will be held at the local level worldwide, and will include events hosted by corporations, organizations, universities and individuals. This year’s focus is accessibility and inclusion. The theme is “Making life Easy.”

In its first year, World Usability Day 2005 was a tremendous success. UPA, along with its allied organizations coordinated 115 events in 35 countries lasting 36 hours that attracted over 10,000 attendees at site locations, and thousands of online participants.

“The overwhelming response to World Usability Day 2005 far exceeded our expectations and have energized our efforts for 2006, ” noted Elizabeth Rosenzweig, Director of World Usability Day. ” We already have regional liaisons in place around the world; and have developed a Web-based system to enable local leaders to submit their events on our Website and register local volunteers.” Rosenzweig added, ” our goals for 2006 include growing the number and size of the events worldwide and offering additional webcasting features that enable World Usability Day to be even more accessible. In order to accomplish this, we will need more event leaders and volunteers as part of the World Usability Day team!”

This year’s World Usability Day Sponsors to date include: Intuit, SAP, TechSmith and Apogee. Additional sponsorship opportunities are available and can be found on the Website.

Any organization or individual with an interest in user-centered design and “making the world work better” is invited to participate in this event. Details for submitting a local event, volunteering, sponsoring or participating are available at www.worldusabilityday.org.

The Usability Professionals’ Association is an international, non-profit, professional association with more than 2000 members in the US and 35 other countries. Members are specialists in evaluating and designing products that are easy to learn and use. The organization provides its members with a wide variety of professional services. Through outreach the UPA:

• Shares information about the skills and approach of usability professionals in meeting needs for usable products.
• Acts as an advocate for usability in consumer, corporate and governmental software, products and web sites.
• Educates the general public about the usability.

For more information, contact:

The Usability Professionals’ Association
140 N. Bloomingdale Rd.
Bloomingdale, IL 60108-1017
email: office@upassoc.org
web: http://www.usabilityprofessionals.org/

One of the most important aspects of a usable navigation is the ability to know where you are. This is generally accomplished by using a visual indicator, like changing the color or size of a button. On this website, the menu item’s text color changes from orange to green, and an orange line appears underneath the text — all of which designates the section of the site your located in.

One way to achieve that is to create a style for the menu item you want selected. For example, you can name the class “select,” and add it as an attribute to the menu item’s anchor element.


<ul>

  <li><a class=”select” href=”/events/”>Events</a></li>

  <li><a href=”/blog/”>News</a></li>

  <li><a href=”/contact/”>Contact</a></li>

</ul>


The problem with that method is that you have to manually add the select class to the appropriate menu item on each page. It also keeps you from storing the menu as an include file, because there isn’t a way to specify which menu item should be selected.

Fortunately, there is a solution, and it doesn’t involve any programming. The trick is to specify an ID attribute in the BODY element of each page that corresponds with a menu item. Using the technique below, I was able to put the menu in an include file and specify the correct menu selector, all with just CSS.

Menu Include File

The include file contains the HTML that makes up the menu. Instead of using select, I assign a unique class for each menu item.


<ul>

  <li><a class=”events” href=”/events/”>Events</a></li>

  <li><a class=”blog” href=”/blog/”>News</a></li>

  <li><a class=”contact” href=”/contact/”>Contact</a></li>

</ul>


Page Elements

On each page I set up a PHP include that maps to the Menu Include File.


<? include '../inc/nav.inc'; ?>


I also specify an ID attribute in the BODY element that relates to the section where the page is located.


<body id=”events”>


CSS

In order to turn on the selector for the appropriate menu item, specify the BODY ID and then the class related to the section’s menu item.


body#events #head ul li a.events,
body#blog #head ul li a.blog,
body#contact #head ul li a.contact {
  border-bottom:3px solid #e3c45b;
  color:#7e9c45;
}


Using this method, all you need to do is update the Menu Include File if you want to change any part of the navigation. It’s a simple technique that doesn’t require any PHP logic or individual page updates.