Way before I knew anything about building websites, I was introduced to something that has changed my life. An instrument used in the hands of the Almighty to teach me about who He made me and provide small glimpses into what I was put on this earth to do.

It’s called Servants by Design – a personality profiling system from Transpersonal Technologies, LLC that, like no other, predicts how we will behave under stress as well as normal conditions. This system is based on over 30 years of research and has been validated in all sectors of life.

It has been used to build NASA teams (it was the reason Chuck Yeager never got into space) as well as educational classrooms to help teachers profile their class to improve communication. It has applications in marriage, parenting and teamwork. And now, its online thanks to a great many contributors including yours truly.

What you receive after completing the inventory is a multi-page document that details out your personality in 6 distinct parts. They are represented in the shape of a house with 6 floors. The most dominant parts of your personality are at ground level while the parts that require more energy to personify are near the attic.

The interface for taking the exam was done with trying to make the experience a bit more fun than any other tool you’ve seen. You’ll use a drag-and-drop system to answer the first section and move sliders to answer the second and third sections. I felt it was time to add something new to the way people fill these things out and thanks to jQuery and some good old-fashioned persistence, it came together quite nicely.

The platform allows us to continue to develop more specific and targeted profiles based on the input data you provide. And the nice thing is that we will use your inventory data for all products, which means you’ll only have to fill it out one time.

So, whether you want some insight into yourself or you’re looking to know how your wife or kids tick or perhaps you’d like to be able to “profile” others via one of the workshops, this is one of the best ways to spend $35 that could very well change your life. It was true for me and everyone else that I know who’s taken it.

The participants were my brother and his family and my family – not even my wife was privy to the workings of the Hunt, which meant she could play right along. We also had to do this on Friday night after the Arkansas vs. LSU game (we won’t go into detail on this subject) because Saturday was supposed to be rainy all day. Luckily, I planned for rain.

This year started with three anonymous texts to my wife, brother and his wife. Each with one word each that when you put them together kicked off the Hunt officially. The words were UNDER, WELCOME, MAT. There they found an envelope with a letter stating the Hunt was now underway should they want to play.

It gave no specific direction, and just like last year, contained a clue to the next step. On the letter were three words in red, which again, when put together led to the RETURN, AIR, VENT. Behind the filter was another envelope tacked to an exposed 2×4.

Inside that envelope was a small notebook and a piece of paper with a series of symbols on it. The notebook was a journal that I wrote like it was from 1911. In it was a short story that told of how the page with symbols was obtained and some clues about how to decipher those symbols.

Let me stop for just a minute and tell you that I thing I had just as much fun watching them try to figure this out as they were working on the puzzles. So far, it was working out just like I envisioned it.

They received a cipher as part of the story for 6 of the symbols, which were actually numbers. From the 6 given, they could build the remaining numbers and thus assign a numeric value to each symbol. My brother provided the next breakthrough when he started writing down the numeric equivalents to the alphabet. They then translated the symbols to “turkeyhunt us”, which they quickly remembered from last year as the web address for the Hunt.

They went to the computer and pulled up the website. On the home page was a congratulatory message and a riddle. Once solved, the page revealed a set of GPS coordinates. We all got our coats on while my brother programmed my GPS with the coordinates. Out the front door and down the street we went in search of the next piece of the puzzle.

After a few wrong turns, they finally got to the location and started looking for a small plastic bottle with red reflective tape on it. It didn’t take long and they had it. Inside was a QR code (mobile bar code) and when scanned with an iPhone QR app, it took them back to the website and another riddle. Solving it revealed another set of coordinates. This process happened 9 times.

Back inside and after the little kids were in bed, the bottles were all put on the table where everyone sat  staring at each other wondering what was next. One of my nephews noticed a patter on the back of each of the QR codes and quickly ascertained that each one was a piece of a larger QR code. They put it together, scanned it and had the final set of coordinates. This took them to the shed in the backyard where they found a box with the Hunt logo on the side.

It was locked with a combination lock and the code was another set of four symbols in the notebook. Inside were two boxes of BeyBlades and a stadium as well as a scroll outlining the tournament rules. It was family against family for an all out battle to ten wins. The two top winners would then battle it out for top honors and become the Turkey Hunt champion. My wife was the champion when we finished the next morning after having to call it quits so the kids could go to bed.

I almost forgot to mention that I also hid in the house a shortcut that would have allowed them to bypass the walk through the neighborhood. All they had to do was discover the clue, which was a tiny Turkey Hunt logo taped to a cabinet door. Inside the door was a small metal tube containing the location of the treasure box. Nobody found it, but now they know to look next time…

I love designing these hunts and puzzles and seeing people engage them while making memories with loved ones. If you are around next Thanksgiving and want to participate, come join us.

SWFObject has been around since October 2004 as a JavaScript method to detect not only the presence of the Flash Player, but minor versions of the Flash Player for feature readiness. Since then, it’s evolution has continued to add features that cover today’s ever-increasing code complexities. To get the SWFOjbect code as well as all other resources for this very useful tool, head over to http://code.google.com/p/swfobject/

As I stated in the overview article, this is my preferred method for Flash detection for the iPhone. This method is used on all of your SWFs and therefore inherently takes care of all detection and alternate content substitutions as part of the solution. In short, it’s simpler.

Obviously, the first thing to do is download the code and get it on your site. There are great instructions on the Google site on how to setup the include files and you also get some demo files that show how your code should look when using either the static or dynamic method.

I used hyper-linked images that looked similar to the Flash content as the alternate content so visually, there wasn’t much missing. Other than that, there isn’t much to it other than following the instructions and choosing the method that suits your content and situation better. There will probably be some trial and error that you’ll need to go through, but given an hour, you should have it just like you want it.

Here’s the JavaScript code on my example site (put inside <head> tag):

<script type=”text/javascript” src=”/Scripts/swfobject.js”></script> //the include JavaScript file
<!–Button 1 Code–>
<script type=”text/javascript”>
var flashvars = {};
var params = {};
params.wmode = “transparent”; //sets the SWF file to have a transparent background. Default is “opaque”
var attributes = {};
swfobject.embedSWF(“/assets/multimedia/PTT_Button1.swf”, “myContent1″, “174″, “40″, “9.0.0″, “”,  flashvars, params, attributes);
</script>
<!–Button 2 Code–>
<script type=”text/javascript”>
var flashvars = {};
var params = {};
params.wmode = “transparent”;
var attributes = {};
swfobject.embedSWF(“assets/multimedia/PTT_Button2.swf”, “myContent2″, “174″, “40″, “9.0.0″, “”,  flashvars, params, attributes);
</script>

And the associated content code (alternate content defined):

<!–Button 1–>
<div id=”myContent1″><a href=”html/FindTip.asp” style=”padding:4px”><img src=”assets/images/PTT_Button1.jpg” alt=”Defeat the Diaper | Find a Tip” width=”174″ height=”40″ border=”0″></a></div>

<!–Button 2–>
<div id=”myContent2″><a href=”html/GiveTip.asp”><img src=”assets/images/PTT_Button2.jpg” alt=”Defeat the Diaper | Give a Tip” width=”174″ height=”40″ border=”0″></a></div>

Given that, there is one piece of advice I can give:
Make sure you enclose the content you want SWFObject to examine in <div> tags. For those of you that code using tables, don’t try to affect a <td> as the SWFObject’s default behavior is to hide the element and this will destroy the table’s structural integrity and therefore produce undesired results.

For an example of a site that this method has been used, you can go to defeatthediaper.com – my community potty training tip site. I hope this helps and don’t forget to add the <meta> and CSS mods outlined in the overview article.

When you publish your Flash content, you have the option of publishing HTML and in the associated option for HTML publishing, there are several check-boxes related to which version of the Flash Player you want to target and whether or not you want the resultant HTML to check for the presence of the specified version or above. FIG. 1 shows what you would check to get the HTML file that checks for the presence of a version of the Flash Player.

FIG. 1

Provided you check the box shown in the figure and publish your content, you’ll get an HTML file that has the detection code in it. As you examine the code, you’ll see that the detection script looks for a specific minimal version of the Flash Player, not just the presence of the Flash Player. So, the detection script can “fail” for two reasons: 1) An insufficient version or 2) the absence of the Flash Player altogether.

Therefore it is a good practice to include the GetFlashPlayer icon linked to Adobe’s site in case they were sent to this page because of a version problem and not the absence of the Flash Player. I guess you could use the CSS mod outlined in the overview article to hide a <div> tag that includes the icon if you don’t want your iPhone users to see something they can’t act on.

The next step is to copy all of the detection code including the conditions to another HTML page and save it as the site’s default page – typically index.htm or default.htm. From there you can send your users to either the regular home page (successful detection) or an alternate page (failed detection). The alternate page is where you can customize an image-based version of the home page that can be seen by mobile browsers that don’t support the Flash Player as well as explain why they were sent there.

I then went a step further and set a session variable and checked it on every other page on the site that had Flash content so I could either substitute alternate content or hide the Flash content altogether. This has an inherent problem as the session will at some point time out and if the iPhone user closes Safari and comes back, they could be faced with a site that doesn’t know they are a non-Flash user.

To overcome this, you could call a modified version of the Flash Detection script on each of those pages that resets the session variable if the detection fails, but that starts to get pretty cumbersome and is why I eventually went to the SWFObject route. You can read about that method in THIS POST.

To see a site that uses this method, go to www.americanpiepizza.net – a Central Arkansas pizza joint with a killer menu.

Two different strategies were employed and I thought it might be fun to share them. The first is based on a technique I’ve been using for years via simple Flash Player detection. The second, uses SWFObject 2.2 and displays a non-Flash equivalent of my Flash elements for any user without an active Flash Player. Each have their merits; their pros & cons and therefore it is up to you whether or not they fit your situation.

I’ve even found a third that uses Regular Expressions to detect the use of a mobile device and redirect users to alternate pages. I decided to reject this approach because I don’t want to maintain multiple versions of my content for a given percentage of users – especially when there are alternatives for almost all scenarios. If you want to know more about how to detect mobile devices for a variety of platforms  via regex, visit http://detectmobilebrowser.com

Regardless of the method, there are two things you need to do for iPhone users. One is a META tag that needs to be inserted into your pages and the second is a CSS style inserted into your style sheet. Here are some examples:

META | The WIDTH value is whatever width your actual content container happens to be
<meta name = “viewport” content = “width = 960″>

CSS | Because the iPhone uses a full version of Safari, the device type isn’t “handheld” – it is screen, just like your laptop computer. Apple didn’t want their users to get the handheld versions of websites, but rather enjoy the full version of the site. So, adding a new CSS file with the “handheld” designation won’t change the appearance of your site on the iPhone. I’m not saying that you shouldn’t develop a handheld version of your CSS as part of your usability strategy, but it won’t do anything for your iPhone users.

Make this the last entry in your CSS file. As you can see, I’m overriding several styles if the screen width has a maximum width of 480px. Put whatever styles you need in here to make the iPhone version readable.
@media only screen and (max-device-width: 480px) {
body,td,th {
font-size: 12px;
}
.page-content {
line-height: 22px;
padding: 4px;
color:#FFFFFF;
font-size:16px;
}
}

If you’re interested in the Flash Detection method, read THIS POST outlining it. If you’d rather employ the SWFObject method, I’ve covered it in THIS POST.