Maybe it isn’t the norm to book your next dental check-up online, but the Web seems such an easy tool to initiate in-person, face-to-face relationships, to take my interaction with you offline and making it tangible. Maybe I’ve been too caught up in the world of social media and have slowly lost sight of this very human interaction until I was being asked to go offline. (How strange that there was an actual person behind the website!) Social media represents the best and worst of this idea. I can quickly mobilize people around me with a quick event invite, but there are more relationships that will never go beyond creating a minor buzz in the cacophony of a never-ending news feed of status updates.

I’m not quite sure why I was so annoyed at being asked to call the dentist. I suppose it was just being asked to do the thing I was trying to circumvent and then realizing that I hadn’t really yet done the thing I had been putting off. And, of course, there was the fact that the form existed and was inviting me to use it. I did expect at some point that I’d actually have to go see the dentist, no matter how my appointment came into fruition; I wasn’t secretly hoping I’d get a calendar event notice of a virtual exam.

So maybe the problem is my perception of the Web. I often find that sites fall short of making me feel truly connected to other people, even in the social media sphere, and I’m surprised when something online goes offline. Maybe it just takes a lot for me to feel someone through the sphere of the Web, though it does happen on occasion. Maybe this was the disconnect with the dentist; I felt no personalization in the practice’s site and while it was easy to impulsively, and impersonally, fill out a contact form, I wasn’t comfortable enough to pick up the phone.

I do want to get to know you through your site, and I will usually look for you first on the Web. In a lot of ways, the Internet has become the primary way I meet a lot people for the first time. So it makes sense that there should be an element of “offline” online. And as a designer this proved to be a valuable thought exercise. If I don’t create sites that are personal and human, visitors won’t perceive them to be that way. You really do get back what you put up.

There have been two main online studies so far. First, their Color Study is a pretty hysterical survey released earlier this year to help determine what color should represent the band. Second, their Song Study, released April 8, is a clever way to get you to listen to and choose the songs that will go on the new album.

Choose your favorite songs

The Song Study is pretty simple—you listen to around 30 seconds of each song and pick the 12 you like. Then you pick your favorite song of the bunch, enter some basic contact info and see what the rest of the voters chose. Its beauty is in its simplicty—get people to listen to your music by giving them a say in what happens to it. I must admit I am a Devo fan, but even if I wasn’t, chances are, had I come across this site, I would have still listened to most of the songs and voted. People love to respond to surveys, especially when the results directly benefit them.

See the voting results

This site is also a great example of video used well on a website. So often it feels like video on websites is an after thought, just slapped on to say its there. But here the video doesn’t overwhelm or slow things down to a crawl—it provides useful information and humor. It takes a simple design and brings it to life.

And when you get right down to it that’s why it is such a great example of good interactive marketing—it keeps the focus to one objective and executes it very well.

Unvarnished is a website that allows any user to set up profiles about any person and then populate those profiles with content. That’s right – this site encourages visitors to provide unsolicited and anonymous feedback about other individuals. With no effort made to corroborate the identities of posters or the validity of the content posted, this site amounts to little more than a forum for character assassination, defamation and libel. As such, Unvarnished represents a new low on the web and a new area of concern when attempting to manage one’s online reputation.

If Unvarnished gets traction and attracts users, its content will undoubtedly consist primarily of sour-grapes complaints, innuendo and half-truths posted by disgruntled and biased individuals. The potential for damage to career and reputation is obvious and alarming. More troubling, perhaps, is the fact that Unvarnished is clearly counting upon these concerns to drive their user numbers, hoping that individuals sign up in order to correct false information in profiles bearing their names and take other steps to protect themselves from like abuse.

All in all, Unvarnished represents a new low for the internet and a shockingly pessimistic and repulsive business model, akin to holding people’s careers hostage. It is my hope that Unvarnished meets with a quick and quiet death.

1. Grids
   • Reset - reset the default font styling in all major browsers
   • Column grid

   A set of classes or styles, which you can use to generate a grid. This is extremely helpful if you want to layout a site quickly. Most often these grids provide a centered layout of some xxx px, which can be split into any number of columns that you wish.

   • Typography

   A set of classes which prescribe the default font sizes and the type of fonts to use. For example,<h1> bold 36px Verdana and <h2> bold 30px Verdana

   • Icons

   A set of icons that are widely used. Although the default icons may not be useful or ideal for everyone, they can act as a placeholder. Typically they include icons such as RSS feed, user add/delete, buttons etc

   • Styles for form elements

   This is very helpful, if the website that you are developing includes lot of forms. Frequently the grids provide ways to develop inline and block styles for form elements.

   • Scripts/Tools

   Scripts to minify/compress the css. These could help you save bandwidth. My personal preference is the Yahoo UI compressor, which can compress both your css and js.

CSS Grids are widely used to handle the differences between various browser implementations and to simplify common tasks. Of the various grids - 960.gs, YUI grid, Blueprint, Bluetrip seem to be ones that are widely used.

CSS grids typically include the following -

You can choose one or more of the available components from a CSS Framework depending on your situation. Be advised, there is no one framework that can be used for handling all the styles/issues that you have in mind. Each CSS framework is designed with a set of principles in mind, while being flexible enough to allow addition of other styles.

2. OO approaches to write/generate CSS

First of all, CSS is not object oriented and is not a programming language. The sole purpose of CSS is to let the browser know how to display or render a HTML element. Object oriented approaches to CSS, are targeted at redundancies in writing CSS.

For example, consider the following CSS
#container #content #header .title { font-size: 16px; }
#container #content #header .sub-title { font-size: 12px; }

You see the problem? If you change the name of the ‘#content’ to ‘#newcontent’, within your html markup, then you end up changing all occurrences of #content in your CSS.

SaSS and xCSS are attempts at applying the DRY (Do not Repeat Yourself) programming paradigm to CSS. They typically rely on a programming language such as PHP or ruby to generate CSS. For example, SaSS converts

#box
:border 0
:color black
.orange
:border 1px orange

to

#box {
border: 0;
color: black;
}
#box .orange {
border: 1px orange;
}

Combine this with the abilities to use variables, mixins and templates. You can see how useful it could be in managing the css for a big corporate website.

We look forward to hear about any good frameworks or tools that we might have missed as part of this blog post.

In web terminology, mashup is a method of aggregating the information from various web sources. Yahoo Pipes and YQL tools, developed by the Yahoo Developer Network, combine publicly available XML and JSON formatted information.  If we were to develop a website which needs information from multiple sources, we pull in the data, query upon it to filter content and then aggregate the information (mashup) and to form the desired data.

An example use case for Yahoo Pipes -  What if you only want to get the content about social media, advertising and brand from site like Mashable and get the content about Iphone development from site like Nettuts.   Yahoo Pipes allows you to filter the data based on category and aggregate the data with other feeds and get your own RSS feed.    Here is a simple example of a Mashup RSS feed based on the content from Mashable and Nettuts sites -  http://pipes.yahoo.com/pipes/pipe.info?_id=dbefd2aa4ab255961919c6b17d2a0a0c

YQL is a SQL-like language that lets you query, filter, and join data across Web services.  All the data available from various services like Twitter, Flickr, Yelp and other social web is put in the form of tables.  Using Open Data Tables, anyone can make their data YQL-accessible. Open Data Tables enable developers to add tables for any data on the Web to our stable of API-specific tables.

Combined YQL and Yahoo Pipes allow us to query, filter multiple data streams and create a new cohesive information streams/feeds. These powerful Web2.0 technologies make complex web development into a seamless task. With Web2.0, user contributed text is flooding the internet and filtering and mashing the data into a meaningful contextual form is the heart of simplicity.

Shirt.Woot! accomplishes something that few sites can, the ability to keep visitors coming back daily. The concept is simple; every day there’s a new t-shirt design pulled from a derby of submissions, the shirt is available for purchase in limited quantity. Sometimes shirts sell out (and quickly), which only means you have to come back earlier tomorrow to make sure you don’t miss another opportunity for a t-shirt advertising sliced bread. I know what you’re thinking… you’re sorry you missed that one last week, but no, you can’t have mine.

I like everything about Shirt.Woot! It’s simple, but attractive. There aren’t too many bells and whistles, but enough to make the site look professional in its quirky sort of a way. The copy is witty and often produces an audible chuckle. I can actively participate in the voting process for future designs, and I like supporting independent designers out there submitting their artwork. I can take pity on poor unwanted designs available for purchase in the Danger Zone, scoffing at everyone else who did not appreciate Mug Shot as much as I did.

My point with this post is simple: every site needs a little Shirt.Woot! flare. The best designed sites aren’t necessarily the most flashy. Sometimes five pages and a big yellow “I want one!” button is all it takes to keep a captive audience. Or maybe all it really takes is content that is not static or unvaried, content that gives the promise of something new to come back to tomorrow. Regardless of whether or not your site is trying to sell a product or just share information, viewing your site content as a living organism, i.e. active and live, and making it easy for visitors to engage with, will ensure that visitors want to keep tabs on you.

Out of curiosity, I decided to go through the SXSW schedule and see what I’d be missing. As I dug through the massive schedule of events, I realized I’d be missing out, BIG TIME. So just for fun, I put together my very own wishlist of events for the week to remind me of how lame I am for not going.

Some selected highlights include…

Friday, March 12:

• The Young and the Digital
• Beauty in Web Design
• A Touchy History of the Future
• Time + Social + Location. What’s Next In Mobile Experiences?
• Grizzly Bear, ‘Forest’

Saturday, March 12:

• Jason Fried (of 37 Signals)
• Chris Brogan and Julien Smith
• Supermeet-Up!
• IFC Films Party

Sunday, March 13:

• Wow, That’s Cool… Fun With HTML5 Video
• Hubble 3D
• Jimmy Tupper VS. The Goatman of Bowie

Monday, March 14:

• Come as You Are Yoga
• Twitter Indispensable Tools Seminar

Tuesday, March 13:

• World Cup 2010: Engaging U.S. Soccer Fans Online
• Interactive Infographics
• SXSW Interactive Closing Party Hosted by (mt) Media Temple

Since the interactive portion ends early, the rest of the week would include a deep cultural immersion in the ways of Austin (READ: awesome food, awesome live music, amazing film and animation). Highlights would go as follows:

• Heypenny, ‘Copcar’
• Texas Shorts
• SATURDAY NIGHT
• We don’t care about music anyway…
• Beijing Taxi
• Royal Bangs
• Japandroids

Plus, as a Texan native, I’m sorely missing the taste of the world’s best Tex-Mex, particularly from Guero’s, Matt’s El Rancho, Maudie’s, The Screaming Goat, and, oh… I could go on and on.

And you should. If you go to this year’s SXSW extravaganza, I want to hear about it. Let me know how much I missed out. Let me know what your favorite events were. Let me know your strategy for maximizing your time down there (you’ll definitely need one).

To get started, here’s a full listing of SXSW events. Have FUN, and we’ll see you next year!

The site (it’s more of a single page actually) has the basic Google style and contains several simple, but useful tools. It’s also the first time in a while that I’ve seen individual content blocks work together to create such a cohesive whole. The video is the star here, but is enhanced by audio options, map tracking and a travel guide.

You can use the map to jump to any section of the trip, or visit the highlights by selecting one of the options from the travel guide. As a bonus, you can choose a variety of soundtrack options to make the experience complete. Personally I prefer the “rumble of the wheels”—it’s quite soothing when paired with the video.

My biggest quibble with the site is that it misses out on a huge opportunity to convert users by failing to provide an easy way to learn more about the route. They provide a link to the Russian Railways website, but it just goes to the home page. A link to a Trans Siberian Railways landing page or even the Trans Siberian Railways section of the website would be much more effective. The omission of sharing tools is also a drawback and severely limits the impact word-of-mouth marketing could have. That’s such a shame too, since it’s definitely a site worth sharing.

Until recently, the media industry had taken a watch and wait approach to mobile advertising. We understood the ubiquitous nature of the device. In fact, we’ve been chomping at the bit to tap into its reach. And it’s not just reach that makes mobile an attractive medium. The attachment we have with our mobile device−always on, always nearby− is what we truly covet. It’s human nature to trust those things on which we depend. Trust moves the consumer to choose our brand over the competition. Mobile ostensibly offers an expeditious path to trust. There is an abundance of demographic data available on mobile users which can be leveraged to engage the best prospects with relevant content. Trust follows relevance.

The industry has needed a lightning rod to ignite digital media buyers to action. Smartphone’s strides in functionality, information sharing, faster access to email and the internet coupled with rapid market growth are accelerating the maturity cycle and allowing mobile to emerge as an effective medium. Google’s acquisition of AdMob and Apple’s purchase of Quattro Wireless will help those companies meet the demand for display advertising. Publishers have taken notice, are signing up to them and creating new inventory. Brands should follow suit by optimizing their websites for a mobile browser.

A mobile campaign in Adwords is a simple way to learn basics, manipulate variables and analyze results in a controlled setting. From there explore the diverse capabilities available from AdMob, Quattro Wireless, 12Snap and Proximity Blue. Check out this demo from Jag Tag for an innovative strategy that is capable of delivering audio, video and pictures to a mass mobile audience. The artistic, 2D barcode works on every camera and wireless network to reach 90% of all mobile users. http://www.jagtag.com/jagtag-demo.

Whether the best path to the prospect is connecting them to your mobile website or serving digital content through SMS, effective mobile strategies exist and more are being tested every day. It’s a really fun time to think creatively about a digital strategy that includes mobile. The data is present to support it in the mix. Brands are ready and willing to test it. The industry, buoyed by dramatic increases in smartphone sales is meeting expectations. By funding a mobile strategy now, you’ll reward clients with positive return on investment in a medium in which the early adoptors are experiencing impressive results.

Imagine, if you will, the following scene:

I am a member of your key demographic. I am web-savvy and spend between 10 and 15 hours a week online. I have been using a prominent search engine to research products and services your company offers. Due to the search engine optimization efforts in which your company invests, links to your website are featured prominently in my organic search results. I click on one such link…I am taken to your primary landing page…and your online sales video auto-plays, replete with background music and voice-over at full blare.

Congratulations! You have just alienated a member of your target audience. In fact, you have created a monumentally bad first impression that will greatly reduce the likelihood that I will ever click through to your URL again.

How have you accomplished this so quickly? By attempting to seize control of our interaction and dictate the terms of our online conversation. In the above scenario, your decision to force-feed me your online sales video via auto-play is akin to someone attempting to dominate a real-world conversation by yelling more loudly than the other participants. At best, this tactic is ineffective. At worst, it is downright insulting.

Don’t be rude. Don’t be that person who attempts to dominate the interaction. Allow your site visitors to control their experience on your website to the fullest possible degree. After all, you are paying for each and every visitor (through SEO, SEM, web design, online promotions, banners, etc., etc.). Why in the world would you risk alienating them when you finally get them to your site?

According to the poet John Donne, there are those who listen and those who wait to speak. Your online marketing efforts will perform better if you are one of the former.