A long time ago I asked, “what does Content Management mean to you?” I got all sorts of answers. Since then I’ve thought about, written about and talked about “content” (and content managment) more than I’d care to admit. Some may find it strange that, as a designer, I’d concern myself with content so much, but to me it’s lives at the very core of what I do. Honestly, I often wonder how a designer could not be interested in content. Having said that, one thing that constantly comes up in my pondering on content is the question of what “content” really is. This is even more perplexing as technology converges and becomes more ubiquitous. Defining “content” has always been a bit tricky, and now it’s even more so. Is it simply text? Is it written? Is it text and media? Is it copy? What about something like a tag? Is that content? What about a form? Is it all of these things? Or none of them? As you can see, it’s not clear to me, and maybe it doesn’t have to be. Still, I’m curious, so I thought I’d throw it out there: what does “content” mean to you?

Ill be speaking at the Salesforce Developer Conference on Monday. This is a free event. I learned something recently: Salesforce.com is really a software-as-service platform that has applicability beyond salesforce automation. Ergo, this conference is also for software entrepreneurs. Hope... GuyKawasaki

In the early 1990s, Bruce Webster wrote and published The Art of Ware (M&T Books, 1995), a reinterpretation of Sun Tzus The Art of War. Basically, Webster applied Sun Tzus work to creating and marketing IT products. Webster recently updated... GuyKawasaki

Penelope Trunk is the author of Brazen Careerist: The New Rules for Success. She is a career columnist at the Boston Globe and Yahoo Finance. Her syndicated column has run in more than 200 publications. Earlier, she was a software... GuyKawasaki

Everybody makes mistakes, so occasionally things go wrong. One example is when Swedish design magazine Cap&Design recently published a tutorial on creating a collapsing and expanding menu.

While reading the article my jaw dropped as I realised that the tutorial uses invalid, non-semantic HTML, inline CSS and event handlers, bloated (but, amazingly, valid) CSS, and obtrusive JavaScript. In 2007.

I sent an email to the magazine's editor, who agreed that the article shouldn't have been printed and took the example code offline. Thank you very much for doing that – hopefully it will limit the number of people using the code in their projects.

Instead of just complaining about the lousy code and deriving satisfaction from making them take the code offline, I decided to recreate the menu from the tutorial in a more modern way, using leaner and more efficient HTML and CSS, and unobtrusive JavaScript. This kind of menu isn't anything new, of course. Nevertheless I think publishing this comparison of the two approaches may be useful.

The HTML

The HTML that appeared in the article is this (shortened, and with id values translated from Swedish):

1. <div id="menu">
2. <div id="mainmenu"><a href="#" onclick="toggle('submenu1')">Category 1</a></div>
3. <div id="submenu1" style="display:none">
4. <div id="submenu"><a href="#">Submenu 1</a></div>
5. <div id="submenu"><a href="#">Submenu 1</a></div>
6. </div>
7. <div id="mainmenu"><a href="#" onclick="toggle('submenu2')">Category 2</a></div>
8. <div id="submenu2" style="display:none">
9. <div id="submenu"><a href="#">Submenu 2</a></div>
10. <div id="submenu"><a href="#">Submenu 2</a></div>
11. </div>
12. <div id="mainmenu"><a href="#" onclick="toggle('submenu3')">Category 3</a></div>
13. <div id="submenu3" style="display:none">
14. <div id="submenu"><a href="#">Submenu 3</a></div>
15. <div id="submenu"><a href="#">Submenu 3</a></div>
16. </div>
17. </div>

This markup is problematic for several reasons:

1. id values must be unique, and may not be shared by several elements on the same page.
2. Using CSS to hide something (via style="display:none") and JavaScript to show it makes the hidden content inaccessible to people who browse with CSS on and JavaScript off.
3. It uses inline CSS.
4. It uses inline event handlers.
5. The menu consists of several lists of links, so list elements should be used instead of div elements.

I replaced the HTML with this:

1. <ul class="menu">
2. <li><a href="#">Category 1</a>
3. <ul>
4. <li><a href="#">Submenu 1a</a></li>
5. <li><a href="#">Submenu 1b</a></li>
6. </ul>
7. </li>
8. <li><a href="#">Category 2</a>
9. <ul>
10. <li><a href="#">Submenu 2a</a></li>
11. <li><a href="#">Submenu 2b</a></li>
12. </ul>
13. </li>
14. <li><a href="#">Category 3</a>
15. <ul>
16. <li><a href="#">Submenu 3a</a></li>
17. <li><a href="#">Submenu 3b</a></li>
18. </ul>
19. </li>
20. </ul>

The menu now consists of nested lists of links, the inline CSS and event handlers are gone, and a class name is used to allow for more than one menu on a page, should there be a need for that. Should the browser lack support for JavaScript, all sub menus will now be displayed, and the user is not prevented from navigating the site. Much better in my opinion.

The CSS

Next a look at the CSS used in the article (id selectors translated from Swedish):

1. #menu {
2. font-family: Verdana, Arial, Helvetica, sans-serif;
3. font-size: 10px;
4. font-weight: normal;
5. left: 20px;
6. top: 20px;
7. }
8. #menu #mainmenu a {
9. color: #FFFFFF;
10. text-decoration: none;
11. display: block;
12. background-color: #990066;
13. padding-top: 2px;
14. padding-right: 5px;
15. padding-bottom: 2px;
16. padding-left: 5px;
17. width: 150px;
18. position:relative;
19. }
20. #menu #mainmenu a:hover {
21. background-color: #CC6699;
22. }
23. #menu #submenu a {
24. color: #FFFFFF;
25. text-decoration: none;
26. display: block;
27. background-color: #CC0066;
28. padding-top: 2px;
29. padding-right: 5px;
30. padding-bottom: 2px;
31. padding-left: 5px;
32. width: 135px;
33. left: 15px;
34. position:relative;
35. }
36. #menu #submenu a:hover {
37. background-color: #CC6699;
38. }

While that CSS is not invalid, it is definitely not optimal, for the following reasons:

1. It suffers from what I call selectoritis, that is the use of overly specific selectors (#menu #mainmenu etc.).
2. No use of shorthand, making the CSS bulkier than necessary.
3. It uses positioning for no apparent reason.

Here is what I replaced it with:

1. .menu,
2. .menu ul {
3. margin:0;
4. padding:0;
5. list-style:none;
6. }
7. .menu {width:200px;}
8. .menu li {
9. margin:0;
10. padding:0;
11. margin-bottom:1px;
12. }
13. .menu a {
14. display:block;
15. padding:2px 5px;
16. color:#000;
17. background:#b0c23d;
18. text-decoration:none;
19. }
20. .menu a:hover {background:#d9dcb0;}
21. .menu ul li {padding-left:15px;}
22. .menu ul a {background:#ced174;}
23. .hidden {display:none;}

I removed the font declarations since font-family and font-size are normally specified elsewhere in the CSS. While I was at it I also changed the colours to make looking at the menu a bit easier on my eyes, and added some padding and a bottom margin to the links.

The JavaScript

Finally a look at the JavaScript. The article uses the following (variable names translated from Swedish):

1. function toggle(submenu) {
2. if (document.getElementById(submenu).style.display == "none")
3. document.getElementById(submenu).style.display = "block";
4. else if (document.getElementById(submenu).style.display == "block")
5. document.getElementById(submenu).style.display = "none"
6. else alert("An error occured in the menu. Contact the web master.");
7. }

The problems with this script are:

1. It doesn't check if the browser supports the method it uses.
2. It works by directly changing the element style.
3. If anything should go wrong it displays a completely useless message.

Ok, I'll admit that the script does have an advantage over my replacement: it is a lot shorter than this:

1. var toggleMenu = {
2. init : function(sContainerClass, sHiddenClass) {
3. if (!document.getElementById || !document.createTextNode) {return;} // Check for DOM support
4. var arrMenus = this.getElementsByClassName(document, 'ul', sContainerClass); // Find all menus
5. var arrSubMenus, oSubMenu, oLink;
6. for (var i = 0; i < arrMenus.length; i++) { // In each menu...
7. arrSubMenus = arrMenus[i].getElementsByTagName('ul'); // ...find all sub menus
8. for (var j = 0; j < arrSubMenus.length; j++) { // For each sub menu...
9. oSubMenu = arrSubMenus[j];
10. oLink = oSubMenu.parentNode.getElementsByTagName('a')[0]; // ...find the link that toggles it...
11. oLink.onclick = function(){toggleMenu.toggle(this.parentNode.getElementsByTagName('ul')[0], sHiddenClass); return false;} // ... add an event handler to the link...
12. this.toggle(oSubMenu, sHiddenClass); // ... and hide the sub menu
13. }
14. }
15. },
16. toggle : function(el, sHiddenClass) {
17. var oRegExp = new RegExp("(^|\\s)" + sHiddenClass + "(\\s|$)");
18. el.className = (oRegExp.test(el.className)) ? el.className.replace(oRegExp, '') : el.className + ' ' + sHiddenClass; // Add or remove the class name that hides the element
19. },
20. /* addEvent and getElementsByClassName functions omitted for brevity */
21. };
22. // Initialise the menu
23. toggleMenu.addEvent(window, 'load', function(){toggleMenu.init('menu','hidden');});

The replacement script works by adding or removing a class name instead of directly changing the style property of the sub menu elements.

The addEvent() and getElementsByClassName() functions are included in the full togglemenu.js script. If you use a JavaScript library that contains similar functions (they all do, probably) I suggest using those functions instead to avoid code bloat.

You can try it all put together on the Accessible expanding and collapsing menu demo page.

Caveats and some homework for the reader

Like I said at the beginning of this article, this has been done before. But hopefully showing the before and after versions of the HTML, CSS, and JavaScript will make it easier to see why I made the changes.

I should also note that this script does inherit a problem from the script published in the magazine: it disables the links to the top level category pages, preventing the user from navigating to them. That could be a serious problem depending on how the site is structured.

This script also does not handle multiple levels. Extending it to allow for that is no big deal, but I'd think twice before doing so. Remember that there will be a lot of links for people with JavaScript disabled to wade through.

I'll leave it as a learning exercise for the reader to alter the script so that it inserts a separate link for expanding and collapsing each sub menu and lets the top level links behave normally. And, if you want the functionality, add support for multiple levels.

Update (2007-05-30): As has been mentioned in a couple of comments, this kind of menu can also cause usability issues, making users confused when clicking a link does not open a new page. Be aware of that, and I would suggest at least styling the links in a way that makes it obvious that they contain hidden information.

Visit site to read or post comments…

Add 456 Berea Street to your Technorati favorites.

Posted in JavaScript.

My buddy, Glenn Kelman, the CEO of Redfin, had a strong reaction to last weeks post about PR by Marge Zable Fisher. So much so that he penned an alternate solution to the challenge of a good client-agency relationship: Dont... GuyKawasaki

My buddy, Glenn Kelman, the CEO of Redfin, had a strong reaction to last weeks post about PR by Marge Zable Fisher. So much so that he penned an alternate solution to the challenge of a good client-agency relationship: Dont... GuyKawasaki

Check out Launch: Silicon Valley 2007. Its a half-day conference featuring thirty tech startups who are launching new products and services. Think of it as a poor mans Demo. June 5th Noon to 6:00 pm Microsoft campus (Mountain View, California)... GuyKawasaki

Margie Zable Fisher runs theprsite.com. Every day someone tells her that he or she has been burned by a PR firm, and Margies goal is to help small business find the right PR firm. I asked her to provide the... GuyKawasaki

I recently visited the worldwide headquarters of Threadless in Chicago and took a boatload of pictures. Ive been to the offices of many startups, but few compare to Threadlesss offices in coolness. Walls covered with graffiti. An office in an... GuyKawasaki

The ability to print boarding passes for flights is a great convenience. Unfortunately, half the time youre in a hotel room when you check-in online and cant print the boarding pass. Some airlines (Northwest for one, but I always fly... GuyKawasaki

Anastasia Goodstein covers Generation Y in her blog YPulse. She has worked for Current TV, AOL, and Oxygen TV. She recently published a book that will help you understand the online activities of young people called Totally Wired: What Teens... GuyKawasaki

I liked Penelop Trunk's interview so much that I asked her for more material. Here's her list of the nine biggest workplace myths: Youll be happier if you have a job you like. The correlation between your happiness and your... GuyKawasaki

Ill be speaking at the Salesforce Developer Conference on Monday. This is a free event. I learned something recently: Salesforce.com is really a software-as-service platform that has applicability beyond salesforce automation. Ergo, this conference is also for software entrepreneurs. Hope... GuyKawasaki

Penelope Trunk is the author of Brazen Careerist: The New Rules for Success. She is a career columnist at the Boston Globe and Yahoo Finance. Her syndicated column has run in more than 200 publications. Earlier, she was a software... GuyKawasaki

Richard Stearns is the president of World Vision. This organization is a "Christian relief and development organization dedicated to helping children and their communities worldwide reach their full potential by tackling the causes of poverty." Stearns holds a bachelor???s degree... GuyKawasaki

(Last Google Reader theme post, I promise)

Before now, I’ve felt quite protective of my site skins, and have always stated “Feel free to modify the CSS to suit your own tastes, but please don’t redistribute”. This stems from vanity to be truthful – I spend a long time creating these themes, and don’t want other people getting the credit!

That was how I used to think though. As time goes on, I feel like I’m becoming more communist open when it comes to the web. Besides, I have little time to update the themes, and carry out feature/bug requests, and they’re both at a point where I’m happy with them. Sure, there’s so much you could do to them, but the original intention was to create something for myself. Which is where you come in.

These themes are now both “do what you like with them”. Take out the bits you don’t like, put in new bits, whatever. Feel free to re-distribute them anywhere you like, whether slightly tweaked or massively altered. They’re yours to do with as you please! Give them a good home and let me know what do with them (hopefully something better!)

downloads

Google Reader Theme
Bloglines Theme for Webkit & Opera
Bloglines Theme for Mozilla

Finally, to answer a much-asked question I don’t have plans to do a GMail or GCal skin, but you never know.

The International Olympic Committee (IOC) has asked Chicago to re-design its 2016 Olympic logo.

Last October, Chicago officials unveiled a logo as the visual element of their 2016 Olympic bid. The logo featured a torch with a flame that resembled the city’s skyline. It was designed to commemorate Chicago’s architectural style, while focusing on the idea of “a city that rose from the ashes” during the 1871. The orange flame looked a lot like the famous Sears Tower, whereas, the colored blue and green torch’s body represented Lake Michigan and the city’s park system including Millennium Park, respectively.

Created by Chicago-based VSA Partners Inc., the 2016 Chicago Olympic logo was featured on billboards and various merchandises including T-shirts, before it was finally turned down by the IOC earlier this week.

According to the officials of IOC, Chicago’s logo was rejected because the IOC rules stated that the candidate city logos should not “contain the Olympic symbol, the Olympic motto, the Olympic flag, and/or any other Olympic-related imagery, such as flame, torch, medal, etc.” This is in accordance to protect and advance the Olympic movement.

Chicago’s officials heartily accepted the proposal of the IOC, as it was done in the best interest of the Olympic Games. Patrick Sandusky, a spokesman for Chicago 2016, commented: “Our logo was fantastic for the domestic phase. It talked about our lake, our skyline, and our parks. We still could have that in our new logo. We just have to spend time thinking about what the best logo would be (going forward). We’re confident that we’ll have an equally fantastic logo for the international phase.”

For now, we have to wait and see what the designers will come up with this time. All eyes and hopes will be on the launch of the new Chicago 2016 logo due later this year. We, too, hope that the new logo incorporates the creativity and style of the previous one, while also fulfilling the IOC requirements.

Chicago is a candidate in the United States bid for the 2016 Olympic Games. The final selection will be made by the International Olympic Committee on October 2, 2009 in Copenhagen, Denmark from a bunch of international contenders.

Richard Stearns is the president of World Vision. This organization is a "Christian relief and development organization dedicated to helping children and their communities worldwide reach their full potential by tackling the causes of poverty." Stearns holds a bachelor’s degree... GuyKawasaki

Pam Slim provides a great list of things to do prior to making a presentation. If you make speeches, presentations, or pitches, you need to read this. Heres one more power tip: Show up with your own Countryman E6i microphone.... GuyKawasaki