Now, I think the site is cool, of course. I did it, after all. But this post is more about saluting Diane for being an amazing massage therapist. She has plenty of testimonials that vouch for her; I’m adding my name to the list with this post. She is licensed by the Stage of Georgia, and is a certified neuromuscular massage therapist. This isn’t a spa type of massage. It’s a therapeutic form of massage designed to relieve pain and increase your range of motion. It’s definitely helped me deal with my own chronic, stress-related upper back pain.

I know it’s weird to hawk something like massage therapy in the middle of a recession. It seems so extravagant, no? But if you can spare the cash, I suggest making an appointment. She’s excellent.

We’re using Google Analytics for high-level analysis such as referrals and search engine traffic. But we wanted to do more robust analysis. You see our conundrum, right? How do you track “pages” and visited “links” within a single Flash movie embedded in a single HTML page?

Simple: you build your own tracking system.

For this project, I used Flash’s LoadVars() object to talk to a PHP middle layer that writes and retrieves data to and from a MySQL database.

LoadVars() allows you to send (and receive) variables from a Flash movie to (or from) a server. You need a server-side script to process that information. Variables and values are sent to the server using either GET or POST. It’s just like submitting and processing a form — and should be treated like any other user-submitted data.

When you pass data from the server back to the movie, you send it as a query string, or an encoded URL (example: ‘car1=honda%20accord&car2=chevrolet%20tahoe’). Once the variable-value pairs are loaded into the movie, you can use ActionScript to determine how the movie handles that data.

The PHP scripts and the database

There are two PHP scripts at work here. One collects the data from the movie, escapes it, and writes it to the database. The other retrieves data from the database, encodes, and returns it to the movie. We’re also using three separate database tables.

Table one contains the questions and answers contained in the movie. Each question and answer corresponds to a key. The next table tracks section visits in the aggregate. One column contains the keys from the questions and answers table. The other column keeps track of the count. I set an initial value of zero for each question-and-answer key in that column. Every time a section is visited, we update the count for that section by one. If we were using MySQL version 4.1 or later, we could have used the ON DUPLICATE KEY clause for INSERT. Instead, we’re using UPDATE syntax and adding one to the value of the count column.

The third table is where we store per-user data. We’re using server-based sessions to track visits by user. With each click, we capture the section being visited, the current session identifier, the user’s IP address and the time of the click. Collecting this user data allows us to do a few things:

• Determine where our visitors are coming from.
• Determine roughly how long people are staying on the site.
• Determine which section(s) the user has visited (and their answers).

That last portion is probably the coolest. At the end of each section of the movie, we return the user to a main menu. When that screen is loaded, a script queries the database to find which sections have been visited in that session.

Once MySQL returns those section keys, we build our query string. In my PHP code, I set each section variable equal to 1 (i.e. ‘section1=1&section22=1′). We pull this query string into our Flash movie by once again using LoadVars().

After these variables are loaded, we can use ActionScript to make the movie take a particular action. In this case, I tested to see whether the variable exists (example: if(section1){scroll_mc.gotoAndPlay(23);}). If it does, the movie goes to the scroll movie clip and plays from frame 23. If it doesn’t, the scroll movie clip plays from frame one.

All of this means we have some solid data to analyze both in terms of traffic and — because we’re tracking answers — how well our messaging is being received.

You can see the new tracking system in effect by visiting the site.

This project marks my deepest foray into JavaScript. I even incorporated a framework. Despite some minor browser-specific glitches, I’m proud of it.

Assumptions and issues

We assumed that MODA’s core web audience would be designers and edgy creatives — people who would be likely to visit with a 1024-by-768 or higher monitor resolution. Yet we did not want to mar the experience for those visiting with a lower-resolution monitor.

But whoa! We have a problem. In order for the sliding effect to work best, I had to use absolute positioning for everything. Changing the width of the outermost containing elements would throw off the whole page. How to solve? JavaScript.

Choosing a JavaScript library

Now as cool as this site is, I can’t take credit for most of the JavaScript / DOM Script code — at least not the wicked cool sliding bits. For that, I incorporated the Moo.fx library (and Mootools framework). Why?

• It’s fairly lightweight. The framework + scrolling effect is only 14KB
• It provided precisely what I needed to meet the goal
• The Clientside wiki documentation explained what I needed to know.

Given our original deadline, I needed quick-and-dirty-ish. Moo.fx met my needs.

Style sheets and DOM scripting

Most of the styles are the same for both versions of the site. Those styles are in one “global” style sheet file that all users receive. Resolution-specific styles are split into four different style sheets:

• s1000.css for 1024 or more pixel resolutions.
• s1000.ie.css which contains IE-specific hacks and styles for 1024+ pixel-wide resolutions.
• s800.css for resolutions that are less than 1024 pixels wide.
• s800.ie.css which contains IE-specific hacks for lower resolutions.

I used a smidgen of JavaScript to detect the visitor’s screen width. Then I used that value to determine which style sheets to serve to the client. I developed two DOM scripting functions — setStyle() and setStyleIE() — that will replace the s1000.css and s1000.ie.css files with s800.css and s800.ie.css if the visitor’s screen width is less than 1024 pixels.

Best practices versus what works best

While developing this site, I ran into another issue. Web development best practices suggest separating content from presentation and behavior. DOM Scripting best practices further suggest putting your external files and/or functions at the end of your document.

But in the practical world, doing so does not always provide the best user experience. For example, when I originally developed the automatic style sheet switching feature, the setStyle() and setStyleIE() functions fired when the page finished loading. The result: visitors would experience a screen flicker as s1000.css was replaced with s800.css and the browser re-rendered the page.

My solution was to commingle DOMScripting functions and HTML code so that each function would be fired as the page loaded and the affected elements were added to the node tree. Ugly from a code perspective, yes. But pretty from a user-experience point of view. The function definitions, however, live in external files and are linked to the HTML page in the header and footer of the file.

Navigation

The navigation may be the slickest part of this project. A few functions are at work here: moveToRightSpot(), doScroll(), and a series of scrollTosection functions (scrollToAbout, etc.).

When the page loads, we check to see whether there is a document fragment identifier at the end of the URL. If not, we change the location bar to http://www.museumofdesign.org/#welcome.

Each subsequent click on a navigation link updates the location bar with a new fragment identifier and triggers the appropriate scrollTo function. The scrollTo functions in turn invoke the doScroll() function, which uses the Moo.fx scrolling library.

Also, by updating the location bar, we’re adding that fragment to the browser’s history. If we leave index.php — most of the content exists in one file — using the back button will trigger the appropriate scrollTo function and return us to our last section.

If I could do it over?

I’d use more semantic HTML. I used some empty elements that could have — and should have — been all CSS. I also wish I had more time to tweak the CSS and JavaScript. I almost always see a better way to code something once I have enough time to review it.

I designed the site using Photoshop and Fireworks (I find it easier to design in Fireworks, but Photoshop is better with image manipulation). I built it with BBEdit, using XHTML 1.0 (Transitional) and CSS, which is the Institute standard.

Most of the back-end is static, although I did use PHP and MySQL to develop a job and internship management database and search interface. Job listings are also available as an RSS feed.

For fun, I created a CSS-driven demo of sorts. It’s a screen shot of the web site, with “notes” about some of the home page’s fancier features. It doesn’t work in Internet Explorer (I will write some JavaScript so that it will), so you will need to view it using Firefox, Safari or Opera.

Plus: today’s link dump

Discussion: MySpace and Deleting Online Predators Act (DOPA)

From the interview: The media often reference a Crimes Against Children report that states one in five children receive a sexual solicitation online. A careful reading of this report shows that 76% of the unwanted solicitations came from fellow children. This includes unwanted date requests and sexual taunts from fellow teens. Of the adult solicitations, 96% are from people 18-25; wanted and unwanted solicitations are both included.

getAttribute href bug

IE doesn’t handle it according to the spec. [Via Ajaxian]

Race, Class and Racism

An interview from a month ago on Radio Open Source with Jane Elliott, from the documentary A Class Divided, which also features one of my SXSWBFF, Baratunde.

I programmed the sign up, confirm and unsubscription pages. The actual mailer is still at version 0.1a, and incorporates the html.mime.mail class by from phpguru.org

I’ve still got some stuff to fix and tweak on the other internal pages, but it’s mostly ready to go. If you’re in Atlanta, by all means, sign up.

Technorati: Atlanta

Even better, they’re listed in date order — not by publication date.

And while you’re here, please visit my latest excuse not to leave the house: Cultured Wino, a wine blog.

Elsewhere on the web

• Via Anil Dash: Understanding Language: The best explanation I have thus far seen about why Ebonics is a good thing.
• Pew & the State of Blogging by Kaye Trammell (and a related blog post from the Industry Standard).
• "What Once Was Good–or Good Enough–No Longer Is" by Jay Posen looks at why newspapers are losing ground online (and my own related post about why newspapers don’t “get” online).
• Molly Holzschlag reveals the “Untold Mysteries of CSS.”

And, if you haven’t done so already, please donate to one of the following charities to help South Asia’s tsunami victims:

• Red Cross
• Unicef
• Oxfam International
• Doctors Without Borders
• Habitat for Humanity

The plan is to write about über-geeky things here, and more business-focused posts there. Although maybe I?¢‚Ǩ‚Ñ¢ll take a page from the 37Signals playbook and post about whatever.

The new design is all XHTML and CSS, though it probably doesn?¢‚Ǩ‚Ñ¢t validate just yet. Let me know what you think, or if anything breaks in your browser.

It used to be available only via e-mail. But with some simple P H P scripting, each week’s newsletter is also available online.

My latest project is near launch. It’s a simple 1-page web presence and install of phpList for the Atlanta Metro chapter of the Morehouse College alumni association. Keep in mind that some of the content still needs to be filled in. See the site.

If you like what you see, consider hiring my firm. Check out our portfolio. Then download our rate sheet [PDF] and a planning document [MS Word]