Thinkubator – A Thoughtprocess Interactive Blog

This article in the Boston Globe doesn’t talk about web design directly, but it presents fascinating data about a number of things that influence the success of websites. The concept ( “easy = true” ) is simple, but the ramifications are profound. Or maybe I just THINK they’re profound because the concept is easy?

Today, I was putting together a proof-of-concept for a new website design that included a media ’slider’ on the home page. I did a bit of searching and came across the Easy Slider 1.7 plugin which uses jQuery to simplify this task. Score! We love jQuery here at TPI because it takes heavy-coding Javascript tasks and makes them really simple to accomplish and usually more interactive and fun.

This plugin seemed to have all we needed except one thing. There was a choice in navigation between arrows left and right (previous and next) OR numeric/individual item navigation below. (For this case, we’ll use actual ‘Sliders’ as our representation of the easySlider. Hungry yet?)

For the design we’re envisioning, both systems needed to be utilized. It seemed like a simple fix and I set about combining both  navigation types to show up at the same time. Problem. For some reason, the next/previous buttons weren’t behaving properly when you used the numeric navigation below to choose an item! If you clicked on an item in the numeric nav, the next button would inexplicably send the gallery zooming off into space and then slowly return to the first item in the list.

How do we fix this!? Good ol’ scheming and know-how to the rescue! I’ll give you the quick-and-dirty since I’m pretty sure that’s what you’re interested in, anyway.

First, to show both navigations, go into easySlider1.7.js and find this part:

if(options.controlsShow){
var html = options.controlsBefore;
if(options.numeric){
html += '<ol id="'+ options.numericId +'"></ol>';
} else {
if(options.firstShow) html += '<span id="'+ options.firstId +'"><a href=\"javascript:void(0);\">'+ options.firstText +'</a></span>';
html += ' <span id="'+ options.prevId +'"><a href=\"javascript:void(0);\">'+ options.prevText +'</a></span>';
html += ' <span id="'+ options.nextId +'"><a href=\"javascript:void(0);\">'+ options.nextText +'</a></span>';
if(options.lastShow) html += ' <span id="'+ options.lastId +'"><a href=\"javascript:void(0);\">'+ options.lastText +'</a></span>';
};

html += options.controlsAfter;
$(obj).after(html);
};

And change it to this:

if(options.controlsShow){
var html = options.controlsBefore;
if(options.numeric){
html += '<ol id="'+ options.numericId +'"></ol>';
if(options.firstShow) html += '<span id="'+ options.firstId +'"><a href=\"javascript:void(0);\">'+ options.firstText +'</a></span>';
html += ' <div id="arrows"><span id="'+ options.prevId +'"><a href=\"javascript:void(0);\">'+ options.prevText +'</a></span>';
html += ' <span id="'+ options.nextId +'"><a href=\"javascript:void(0);\">'+ options.nextText +'</a></span></div>';
if(options.lastShow) html += ' <span id="'+ options.lastId +'"><a href=\"javascript:void(0);\">'+ options.lastText +'</a></span>';
} else {
if(options.firstShow) html += '<span id="'+ options.firstId +'"><a href=\"javascript:void(0);\">'+ options.firstText +'</a></span>';
html += ' <span id="'+ options.prevId +'"><a href=\"javascript:void(0);\">'+ options.prevText +'</a></span>';
html += ' <span id="'+ options.nextId +'"><a href=\"javascript:void(0);\">'+ options.nextText +'</a></span>';
if(options.lastShow) html += ' <span id="'+ options.lastId +'"><a href=\"javascript:void(0);\">'+ options.lastText +'</a></span>';
};

html += options.controlsAfter;
$(obj).after(html);
};

Then find this part:

if(options.numeric){
for(var i=0;i<s;i++){
$(document.createElement("li"))
.attr('id',options.numericId + (i+1))
.html('<a rel='+ i +' href=\"javascript:void(0);\">'+ (i+1) +'</a>')
.appendTo($("#"+ options.numericId))
.click(function(){
animate($("a",$(this)).attr('rel'),true);
});
};
} else {
$("a","#"+options.nextId).click(function(){
animate("next",true);
});
$("a","#"+options.prevId).click(function(){
animate("prev",true);
});
$("a","#"+options.firstId).click(function(){
animate("first",true);
});
$("a","#"+options.lastId).click(function(){
animate("last",true);
});
};

And change it to this:

if(options.numeric){
for(var i=0;i<s;i++){
$(document.createElement("li"))
.attr('id',options.numericId + (i+1))
.html('<a rel='+ i +' href=\"javascript:void(0);\">'+ (i+1) +'</a>')
.appendTo($("#"+ options.numericId))
.click(function(){
animate($("a",$(this)).attr('rel'),true);
});
};
$("a","#"+options.nextId).click(function(){
animate("next",true);
});
$("a","#"+options.prevId).click(function(){
animate("prev",true);
});
$("a","#"+options.firstId).click(function(){
animate("first",true);
});
$("a","#"+options.lastId).click(function(){
animate("last",true);
});
} else {
$("a","#"+options.nextId).click(function(){
animate("next",true);
});
$("a","#"+options.prevId).click(function(){
animate("prev",true);
});
$("a","#"+options.firstId).click(function(){
animate("first",true);
});
$("a","#"+options.lastId).click(function(){
animate("last",true);
});
};

NOW, to make it work properly (and here’s the kicker), parseInt!!!!!

Find the ‘animate’ function (~line 140):

function animate(dir,clicked){
if (clickable){
clickable = false;
var ot = t;
switch(dir){
case "next":
t = (ot>=ts) ? (options.continuous ? t+1 : ts) : t+1;
break;
case "prev":
t = (t<=0) ? (options.continuous ? t-1 : 0) : t-1;
break;
case "first":
t = 0;
break;
case "last":
t = ts;
break;
default:
t = dir;
break;
};

And insert this itttty bitty little parseInt:

function animate(dir,clicked){
if (clickable){
clickable = false;
var ot = t;
t = parseInt(t);
switch(dir){
case "next":
t = (ot>=ts) ? (options.continuous ? t+1 : ts) : t+1;
break;
case "prev":
t = (t<=0) ? (options.continuous ? t-1 : 0) : t-1;
break;
case "first":
t = 0;
break;
case "last":
t = ts;
break;
default:
t = dir;
break;
};

Thats it! Wow, that seemed a lot harder than it was. We figured out that the two navigations were treating the current item differently (one as an integer, one as a string – who knew!) so basically we’re just telling them all to be integers so both methods will work the same.

For reference, here’s another little proof of concept we drew up. Sliders. Get it? We’re hilarious, i know. (click the pickles OR the ketchup. CRAZY!) easySlider plugin ‘Sliders’ demo

For the most part, the idea behind sending holiday cards to clients is about showing appreciation and spreading a little goodwill, right? So does it really matter if your good intentions arrive on actual paper? The answer: maybe.

At the risk of looking cheap, lazy and/or impersonal, e-cards are best left to businesses who fit one or more of the following criteria:

• Tech/Web Companies
• Environmentally-Related Companies
• Environmentally-Conscious Companies*

*Good rule of thumb here is whether your business walks the walk on evironmental responsibility the other 365 days a year in ways that are recognizable enough for your clients to be aware of them.

Done well, an e-card from a business like those described above can be an even better approach  to spreading good cheer in a personal and fun way than traditional holiday cards. Speaking of…take a gander at what we drummed up for our ‘09 holiday card! (Tooting our own horn? No, not us!)

If you’re iffy on the geek-talk surrounding video on the web, you’re not alone. Like everything technical, there are multiple layers of complexity to ‘appreciate’, and nothing is static — it all changes over time. What you knew yesterday is obsolete today. In fact it was probably obsolete yesterday! So what’s the average human to do? Reference a handy visual-aid, of course:

Sure, this isn’t the complete picture. Why isn’t early MPEG on here? What about player technologies, like Flash Player? Where’s YouTube? Honestly, I left those things off because they dilute the minuscule amount of humor I’m working with here… but, I’ll justify it this way: the story of video quality on the web is mostly about the advancement (and adoption) of compression algorithms — the underlying mathemagic that squeezes video down to something less than than mammoth-magnitude. (I’m not kidding about the magic: one second of uncompressed standard-definition video is about 30MB. Compressed with h.264, it’s about 63KB. That’s a reduction of about 500:1!)

The point is, walk before you run. Know that h.264 and MPEG4 are the compressors that pass for ‘good’ on the web right now, and you won’t be left behind with Australopithecus and the other IE6 users. Then note this: that last guy in the diagram still has a way to go…

If you’re anything like the crew here at TPI, you probably aren’t taking much of a break this holiday season. Staying busy is the name of the game and we certainly do our best to keep the machine running as much as possible. That said, we sincerely hope you DO get some time to relax, spend time with those most important to you and maybe even take a few minutes to improve your business for 2010! I know, I know… who has time for reading when there so many cookies, candy and pies around just calling your name?! The truth is that investing time in your business (even when you’re not ‘working’) by reading about relevant marketing strategies, business models and successful (and not-so-successful) stories can give valuable insight into areas where your own techniques might be lacking.

To that end, I’ve taken the liberty of compiling a short list (in no particular order) of some great marketing and business books to light your fire and help jumpstart your business in 2010 with new fervor, focus and inspiration. A lot of ideas in these books aren’t earth-shattering, new and different ideas, but common sense practices that sometimes fall by the wayside in business and want for a good reminder. The key is using the good advice you find. Good advice only works if you put it into practice.

Admittedly, I haven’t ready all of these books. For what its worth, its a list I’ve compiled from other business leaders I follow and have been written by or invaluably helpful to them. That’s good enough for me and I will undoubtedly be picking up a few of these to read on a few cold nights this winter.

Have you already read any of these? What are your thoughts? We’d love to add to our library as well so definitely leave us a comment with your own recommendations!

Happy Reading!

1. How to Win Friends and Influence People – Dale Carnegie: An oldie but a goodie. A nice reminder on how the key to being successful is all in how you treat the people around you.

2. Citizen Marketers: When People Are the Message – Ben McConnell and Jackie Huba: If you’re curious about social media and how it might relate to your business, this one is a good resource.

3. Love Is the Killer App – Tim Sanders: I haven’t read this one but its definitely on my list. Its also about dealing with people but with an emphasis on networking and sharing information.

4. Good to Great – Jim Collins: Need I say more? Which one will YOUR business be?

5. Just Ask a Woman: Cracking the Code of What Women Want and How They Buy – Mary Lou Quinlan: This was recommended to me and I’m actually looking forward to reading it. Discover the power of the female buyer!

6. Blue Ocean Strategy – W. Chan Kim and Renée Mauborgne: All about the ‘blue ocean’ of uncrowded and untapped market space.

7. The Long Tail – Chris Anderson: From the Editor-in-Chief of Wired Magazine. If anyone will know about the future of business, this is the guy.

8. How To Be That Guy – Scott Ginsberg: This guy started wearing a nametag everywhere as an experiment and learned a lot about how people responded to it. Now he shares how to be unforgettable.

9. Selling the Invisible: A Field Guide to Modern Marketing – Harry Beckwith: Selling the way you do business and treat customers, rather than a product. Because everyone wants good customer service!

10. Purple Cow – Seth Godin: And just for good measure, Mr. Godin is considered one of the most brilliant minds in marketing. Read this one.

Here at TPI, we love Shadowbox. It is a very clean and simple way of displaying a photo gallery or playing a video on a website. To play a .mp4 video on a site, you would normally initiate the Shadowbox player like this:

<script type="text/javascript>
     Shadowbox.init({
          players: ["img", "qt"]
     });
</script>

And then use an anchor to make the image or text clickable like this:

<a rel="shadowbox" href="my_video.mp4" title="My Video Title">
     Watch The Video
</a>

This works, but it relies on the fact that the clients browser has the quicktime plugin installed. Some of you already know that the Flash player can play .mp4 video files. The Flash plugin is installed on almost all browsers, so it would be ideal if the .mp4 videos would play in the Shadowbox JW Player instead.

Lucky for us, Shadowbox has an option that lets you decide what extensions work with which players. In this case, we want .mp4 videos to use the “flv” player rather than the “qt” player. Here’s how you do it:

<script type="text/javascript">
     var customExt = {
          img:["png","jpg","jpeg","gif","bmp"],
          swf:["swf"],
          flv:["flv", "mp4"],
          qt:["dv","mov","moov","movie"],
          wmp:["asf","wm","wmv"],
          qtwmp:["avi","mpg","mpeg"],
          iframe:["asp","aspx","cgi","cfm","htm","html",
                  "jsp","pl","php","php3","php4","php5",
                  "phtml","rb","rhtml","shtml","txt","vbs"]
     };
     Shadowbox.init({
          players: ["img", "flv"],
          ext: customExt
     });
</script>

Normally, the “qt” player plays all “.mp4″ files. Simply move the “mp4″ extension to the “flv” property. Using this method, you can decide which extensions use which players in Shadowbox.

Now, when a user clicks the Shadowbox link, the .mp4 video uses the “flv” player and plays in the JW Player:

<a rel="shadowbox" href="my_video.mp4" title="My Video Title">
     Watch the .mp4 video in the JW Player.
</a>

I’m not a big fan of Internet Explorer (which is probably as nice as I can say it).  With its lack of support for new technologies, various inconsistencies with other browsers and it’s own versions, and somewhat unstable rendering/processing of web pages, it’s no wonder Firefox, Safari, and Chrome are quickly luring Internet Explorer’s users away.  However, there’s still a segment of users out there that use Internet Explorer for a few reasons:  it’s what they’re used to, they have no need to upgrade/use another browser, their IT department scoffs at anything new/not paid for, or there’s still a game out there running on ActiveX and they can’t part with.  Support for this segment of users has hindered new development in web technologies for years, and has resulted in countless hacks and workarounds to get Internet Explorer on the same page as other browsers.

As HTML5 and faster Javascript engines become common place, it’s becoming increasingly tempting for developers to want to abandon Internet Explorer users and simply provide them with an upgrade path away from Microsoft.  However, there might just be a compromise that lets developers use the newest technologies, while still keeping Internet Explorer users within their comfort zone.  This compromise is Google Chrome Frame.  This new Google project aims to take the Google Chrome browser, and place it inside the Internet Explorer shell as a plugin.  Much like how Flash works within Internet Explorer, so does Chrome Frame.  If a user installs Chrome Frame (which is very simple and didn’t require a restart for IE8), they can view the web as if nothing was different.  However, if they visit a page that requires newer technologies, a developer can put a <meta /> tag in the page that triggers Chrome Frame.  The user will not notice any difference in the way the browser works (other than new features and faster rendering/processing).

This could just be the best solution for newer sites that wish to take advantage of new technologies Internet Explorer will be slow to adopt (if they even adopt the new technologies at all).  New features such as the <audio /> and <canvas /> tags will make the web much more friendly and consistent to develop for.  A faster, more modern Javascript engine means new APIs such as Geocoding and better user interface features such as animations and drag and drop support.  With these new features already starting to show up in Google Chrome, why wait for Internet Explorer to catch up, when they’re just a plugin away.

“First – and understand this, Harry, ’cause it’s very important – not all wizards are good. Some of them go bad.” – Rubeus Hagrid (Harry Potter and the Sourcerer’s Stone)

The world’s most lovable half-giant delivered a very important life message to Harry Potter in the statement above. Fortunately for Harry, he learned this lesson from a friend, rather than learning things the hard way. If only everyone could be so lucky…

To work their magic, SEO strategists make use of a variety of complex and ever-evolving tactics that can be difficult to explain, and even harder for those who are less than web-savvy to understand. To further complicate matters, not all SEO methods and professionals are created equal, and this uneven relationship can make it all too easy for web novices to end up getting scammed.

So put on your Sorting Hats. Here are a few simple rules to help you ensure that you are not one of the unfortunate many to get scammed by dark wizards.

Run away (Disapparate if you can) from:

• Companies that claim that they will optimize your site through “meta tag optimization and submission to the search engines.” It is well known that this tactic will no longer accomplish anything in terms of increasing search engine rankings
• Anyone who guarantees you a certain position in the search engines. Since the search engines run on their own proprietary algorithms, no one can guarantee a particular ranking
• Read fine print. Many companies use questionable tactics to meet their “guarantees”
• Be wary of anyone who won’t tell you what they are doing to your site, or says that they can do all of their work behind the scenes without changing the appearance of your site. The odds are that person is either doing nothing at all or engaging in some risky SEO strategies that can ultimately lead to a penalty for your website

Keep in mind:

• A high ranking is not everything when it comes to measuring SEO success. If you get a top ranking for a keyword phrase that doesn’t deliver relevant traffic to your website, then it has no value to your business. Having a lower ranking for a high converting keyword is far more valuable than being number one for some obscure phrase that no one searches. You and your SEO consultant should work together to find the appropriate keyword phrases for your business
• The SEO consultant you are working with should be concerned about your overall marketing objectives. SEO is just one component of an integrated marketing strategy, so understanding a client’s business is a vital part of any successful SEO strategy
• Be an active participant in the planning phases for your SEO project. Be sure to give frequent feedback on keyword suggestions, copywriting and site architecture recommendations
• Before any work begins, outline a detailed plan for measuring success with your SEO consultant. Specify what metrics will be tracked, what kind of reports will be generated and how often you will hold a review to discuss key accomplishments and next steps

Good news web developers…IE6’s time has finally come. According to this article on CNN, IE6, although a decent browser when it was released 8 YEARS AGO, is now a huge stumbling block to the web’s evolution (no secret there). It’s estimated that as many as 25% of web users are still using IE6, slowing down the web and creating headaches for web developers.

However, there is a growing movement on the web to kill the dinosaur once and for all. This site provides a snippet of code that will encourage users to upgrade their browsers for betting online experience. That’s all well and good to persuade average Joe internet user, but what about the many companies out there who use corporate applications written specifically for IE6? Do they represent the “death” of the death of IE6?

I recently had a client ask me if email marketing was dead. He was interested in considering it as part of his marketing strategy, but he wondered if it was “you know, old, and not effective anymore.”

Au contraire, my friend. Email marketing is alive and well, and still gaining ground as an effective marketing tool. Let’s look at some supporting evidence:

• 73% of email marketers say they are planning to increase email’s priority in their future marketing plans. eROI (2009)
• 50% said they’re more likely to buy products from companies who send them email, whether their purchases are online or at a place of business. – Epsilon “Branding Survey” (Feb 2009)
• 80% of Marketers Report Email Is Strongest Performing Media Buy Ahead of Search and Display. – Datran Media, “Marketing & Media Survey” (2008)
• 44% of email users said email inspired at least one online purchase, and 41% said it prompted at least one offline purchase. – JupiterResearch’s The Social and Portable Inbox (2008)

Pretty impressive stats. I also explained to the client that I had just received an email coupon from a favorite retailer that very morning and was planning to make a purchase on my lunch, as I often do. Seriously, my inbox is liquid gold for retailers.

So knowing that email marketing is alive and well, let’s look at some statistics related to email marketing best practices:

• Get to the Point With Your Subject Line. Emails with shorter subject lines significantly outperform emails with longer subject lines. 38 to 47 characters is the average number of characters that show up in the subject line of 57% of all U.S. email recipients’ email programs. – Epsilon (2009)
• Just Say No to Hump Day. Open rates are highest on Mondays, Tuesdays, and the weekends. – MailerMailer (2008)
• People like email with coffee and sandwiches. A recent eROI study found that 49.4% of marketers testing email find sending mid-day (10am-2pm) to be best, while 31.5% find start of the business day (6AM – 10AM) best.
• Beware of Frequency Freakout. A Jupiter Research Study showed that 40% of respondents stated the #1 reason they stopped subscribing to opt-in emails was because they were getting too many offers. While there is no magic number for how frequently you should send an email, the largest percentage of marketers choose to send weekly.