Refresh Nashville

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).

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 »

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.