After my mini-lecture on UX, my coworker just looked at me and responded with “Well anyone can do it.”

As a UX professional, I was shocked and even angered that someone would devalue my skills and knowledge by saying that just anyone can weigh in on user experience. After all, we (meaning the UX team) are the ones trained in this discipline. We are the ones that know the most about UX. No one else can do it, just us.

When I think back to that conversation, I laugh at how wrong and naive I was. If I had the same conversation with that coworker today, my reaction would be a lot different. I’d agree with him whole-heartedly and talk about how a great user experience isn’t possible without input from others. I’d tell him that my most successful projects have involved business analysts, designers, developers, account executives, and various other teams.

The truth is that everyone has insight into a great user experience. As UX professionals, we can sometimes get caught between the black and white lines of our wireframes, blinded to the many different ways to create an optimal user experience. Since our discipline is constantly evolving, it’s important to be open to methodologies and approaches introduced by those outside the UX team.

Instead of focusing on job titles, education, training, and experience, we must remember the end goal: providing users with the best experience possible. Ultimately, we’re the ones responsible for activities such as user research, persona development, flow diagrams, information architecture, and wireframes. However, we’re equally responsible for communicating our ideas to others in a way that opens up the conversation to alternative approaches and ideas. In the end, everyone is a user who has unique experiences to share. It’s our job to gather tidbits from these experiences and connect them to further improve the experience we’re formulating. If we don’t consider communication and alternative idea generation our main responsibilities, how can we be sure we’re truly providing the best experience?

Over the years my mindset has definitely changed. User experience is no longer something that only the UX team can do. It’s something that everyone can and should contribute to, given the opportunity. User experience – everyone CAN do it.

I appreciate the intent of the AllFacebook post – trying to get people to focus on the quality and impact of their social media engagement instead of the largest gross metrics (like fan count and impressions). That’s great – but they missed a couple of key points:

1. The EdgeRankChecker numbers cited in the post actually use a solid methodology – comparing like pages over time, controlling for post frequency and size of Fan base. It’s too bad that’s not highlighted by AllFacebook – in the context of AllFacebook’s post the EdgeRankChecker data is a little confusing.
2. “Facebook doesn’t give us the frequency number for posts.” This is misleading at best. It’s true that there isn’t a “Frequency” column in Facebook posts. But Facebook gives us Impressions (number of times a post is seen) and Reach (number of people who see it). And since we know that:
   • Impressions = Reach * Frequency
   • We also know (from straightforward math) that
   • Frequency = Impressions / Reach
   Smart marketers will calculate their own average frequency for Facebook posts using that formula. This works not only for your Page, but for your posts as well, which will give you some insight into whether your best posts reach more people or are just seen more frequently by the same group.
3. “Your page is worth 83 percent less than what you think if, like many business owners or brand executives, you’re only looking at your total fan base count. And whatever you spent to acquire your average fan, multiply that by six, because five out of six of your fans aren’t seeing your posts.” I disagree with this on two counts:
   • What you spent is what you spent, and what you acquired is what you acquired. If you want to calculated cost per engagement activity (how much do you spend to get a comment on your post), that’s a different story.
   • No one knows the value of a fan, because no one has published the necessary research to understand how “fan-dom” improves one’s relationship with a brand.

Need some hints about the value of fans?

1. You can’t make up a formula and say that that represents the value of a fan if you want that value to be taken seriously.
2. DDB says that five out six of a Facebook Page’s fans are already customers – . If that’s true for your audience, then that would definitely impact the value of your fans.
3. Most importantly, don’t confuse cost and value – how much you spent acquiring fans has ZERO relationship to how much they’re worth to you. If you saw what happened to the US housing market between 2007 and 2010 you know what I mean. It’s easy to calculate the cost of fan acquisition; there is much more involved in finding the value of a fan because fans can provide value in many ways. They can like and comment on posts, increasing exposure when their connections see their interactions with your brand. Most importantly, all of those digital activities impact awareness, consideration, interest in – and word of mouth about – the brand, ultimately leading to purchase. To understand all these relationships (instead of just assuming them), you need a lot more than just Facebook Insights or HootSuite.

Your fans are worth the same today as they were yesterday

The most important piece that was left out of the news regarding the “Value of a Facebook Fan” is that your fans are worth the same today as they were yesterday. Whether 17% or 10% or 100% of them see your posts doesn’t change how much impact they have – or have had – on your business. What impact is that? Well, you have to do the work to calculate – with market research or well-designed loyalty programs. You need substantive research combined with predictive analytics to model the interactions of all the complex relationships that influence purchase, loyalty, and advocacy. Facebook Insights, Microsoft Excel, and some formula that somebody made up on the Internet aren’t going to explain how much your fans are worth, no matter how easy they are to use.

Javascript is an interpreted language. The opposite of interpreted code is compiled code. Languages like C++, ObjectiveC, Java and .NET are compiled to some degree or another. This means that every time Javascript code is executed, the web browser has to parse your source code line by line and run the appropriate low level commands. For compiled programs, your code is turned into low level machine code by a compiler and a binary is produced. Interpreted code has much more security checks (to keep you from crashing or hacking the browser) and more overhead than compiled code, so compiled code will always be orders of magnitude faster than interpreted code.

Javascript of course relies on compiled code to carry out many of its global functions – things that are provided by the browser or are built in parts of the language. So for example, when you call something like:

document.getElementById("MyElement")

The actual code that searches the document for that element is code that is compiled into the browser (not javascript). Or when you call somearray.reverse() that code is optimized, compiled code. It will always be faster to call a built in function than to write similar code in javascript. Eg.

var somearray = [ 'a', 'b', 'c'];
var reversedArray = [ ];
for(var i=0; i<somearray.length; i++)
{
	reversedArray.push( somearray.pop() );
}

Always slower than somearray.reverse();

When to use jQuery?

jQuery is a great help in making more complicated Javascript operations simpler and in writing browser independent code. There’s not really a strong reason why you would not want to use jQuery. The cons of jQuery are that it adds extra http requests to the page download and extra k weight to the page.

You may ask, is it faster to do

document.getElementById("MyElement")

than

$(“#MyElement”)

The answer is yes, it probably is faster since it has less overhead. Does it make a noticeable difference? Probably not. I would personally rather use jQuery and have code that is easier to read, since most things take less code to do in jQuery. jQuery also gives you a much more powerful set of features out of the box, which saves time and lets people do more. If you are in a scenario where you need to update hundreds of id’s and you are hitting a performance bottleneck, then by all means re-write those lines using the regular Javascript. Otherwise, don’t worry about it.

About Selectors

Everytime you do a selector in jQuery, jQuery searches through the DOM to find any elements that match your selector string. Some types of selectors will be slower than others; doing a selector on a class or ID will be quick, since these will use the built in Javascript functions for retrieving classed and id’d elements. Other types of selectors could be very slow and cause jQuery to need to search through large numbers of DOM elements. The best practice is to a) Keep your selectors as simple as they can be b) Use classes and id’s to address elements whenever possible as opposed to relying on nested selectors (eg: if ($(“body div .someclass a”)), and c) Save selector results when you are going to make multiple calls on a selector.

Save selector results

With jQuery, it’s very common to need to do several operations on the same DOM elements. Such as:

if ($("#filter_options ul").css("display") == "none") {
	$('#filter_options ul').show();
	…
}

Doing something like this saves jQuery from needing to look up the same thing twice.

var dropdownObj = $("#filter_options ul");
if (dropdownObj.css("display") == "none") {
	dropdownObj.show();
	...
}

‘Property depth’ – reduce number of variable lookups

Let’s say you are referencing properties of some object:

player[i].data.position.x = 55;
player[i].data.position.y = 55;
player[i].data.position.angle = 0;

It takes less operations to do it this way:

var pos = player[i].data.position;
pos.x = 55;
pos.y = 55;
pos.angle = 0;

This is because we save ourselves from having to look up the index ‘i’ in player and having to look up the property data and the property position each time. Each one of those operations probably entails searching in an array for a named variable in the javascript runtime.

General optimization techniques

Algorithmic efficiency

A way of gauging how slow an algorithm will be is to figure out how many elements need to be processed.
For example, consider the following two situations:

for(var i=0; i<A; i++)
{
	for(var j=0; j<B; j++)
	{
	}
}

Or:

for(var i=0; i<A; i++)
{
}
for(var j=0; j<B; j++)
{
}

In the first scenario, the inner loop executes every time the outer loop executes, so we end up looping A x B times. In the second scenario, we are looping A times then B times. So it’s A + B loops. Scenario 1 should be slower (assuming both accomplish the same result).

This brings us to another important point. Optimize your innermost loops (as in scenario 1). Those loops get executed many times, so even removing one or two lines of code from those will see big benefits. If you can move some code outside of the loop (such as initializing or declaring a variable), it would be faster than doing it on every pass.

Algorithmic efficiency is usually expressed using Big-O notation (see here). Typical front end code is O(1) or O(N). You won’t see some of the other values unless you start writing search algorithms or factoring numbers.

Optimize algorithms first, worry about specific line by line optimizations last

Since javascript is interpreted, there is already lots of overhead on every line of code. Work on reducing the complexity and number of lines in your script first before worrying about whether it’s faster to do:

for(var i=0; i<num; i++)
{
}

Or

while(i--)
{
}

The second one is faster BTW.

Recognize slow operations / slow rendering

People criticize Flash for being a CPU hog. Javascript animation is just as slow if not slower for doing less stuff. If your fancy glowing buttons are too CPU intensive, they may not be usable on a mobile device and will need to be removed on the mobile site (why is Javascript better than Flash again? ) It’s important to check your OS Activity Monitor (Task Manager on Windows) to check the CPU usage of the browser. If you’re pushing 50% CPU or higher, then chances are good that what you are doing won’t work well on mobile. Some things that are known to be slow when animated are drop shadows, blurs and glows. Static drop shadows may be fine, since most browsers render these once and cache the results in memory. Animating it causes it to be redrawn on every frame.

Also, if you have a page with 50 buttons that all have rollovers, be sure to test what happens when people rollover several things simultaneously. It’s easy to forget that animations in jQuery work on a queue system, so they can stack up or have unintended consequences when triggered in rapid succession. It may be necessary to stop existing animations before adding new ones (see clearQueue() ).

Slow operations

Some types of functions, even though they are calling native code are just slow. An example of this is the trig functions – Math.sin, Math.cos, Math.tan, etc. If you need to make a lot of calls to sin() and cos(), you can try using a Lookup table (essentially caching the results).

In general, not all operations are created equal. Division is slower than addition or subtraction. Binary operations (&, |, ^, etc) are the fastest of all. Sometimes a division can be rewritten as multiplication (eg: / 2.0 can be re-written as * 0.5).

Any operation that accesses storage, hardware or the network is going to be far slower than pure math or other simple operations that occur entirely on the CPU. In order of slowness: Network > Hard Drive > RAM > basic CPU operations.

These types of things are less of a concern in Javascript, but it’s good to know.

The sin of Premature Optimization

Some people take optimization to the extreme and try to optimize everything while they are writing it. This leads to cryptic, unreadable code and is a waste of your time. Most programs in need of optimization have a limited number of ‘bottlenecks’ where slowdowns occur. Optimizing other areas will usually be unnoticeable to the end user and will yield only small gains. Write clean code first, identify your bottlenecks, then re-write or optimize those sections as needed. In today’s world, it’s common for other developers to need to read your code, so it’s more important for code to be readable and easily understood than it is for every line to be optimized.

NodeJS brings the Javascript programming language to the server. It enables people to write websites, services and other server side functionality. Under the hood, Node uses Google’s speedy V8 Javascript engine (currently used in their Chrome browser) with additional API’s to handle all sorts of useful server side functions such as handling HTTP requests, TCP sockets, cryptography etc. People have written an already impressive array of modules for handling connections to databases and API’s of all kinds.

Why is it exciting?

Being able to author web apps in Javascript may be exciting to people who are already familiar with authoring front end functionality – it allows people to potentially share code between the front end and back end, and to keep consistency between all their code. However, since NodeJS still requires a large amount of work to do standard web hosting / page serving duties, I think NodeJS is far more attractive for writing specialized kinds of applications that sit on the server rather than the sorts of things a front end person might write. This includes back end processes, realtime, socket level applications like chat servers or doing expensive operations involving making multiple API calls to other servers or databases. What makes NodeJS attractive for this? Node’s API is built from the ground up to make all time consuming operations asynchronous (ie, non-blocking). While many languages offer the option of doing some things asynchronously, NodeJS really gives you no choice but to handle operations using event callbacks. This makes it an extremely good choice for certain types of operations. Consider PHP which really has no asynchronous event handling. If you need to make 10 database calls or make 10 http requests, then you have to wait for each one to finish before the next one starts processing. This ends up wasting a lot of CPU cycles, because those processes typically aren’t doing anything – they are waiting for a response from another server or system. With NodeJS, all of those requests happen at the same time. This means that the time it takes for a NodeJS script to finish would be as long as the longest request takes. With PHP, it’s the sum of the length all the requests.

Why would I want to use it?

NodeJS’s API is still fairly low-level. Setting up a full web server stack takes a decent amount of work and while people have started authoring solutions for almost every problem a web developer may face, many of those solutions are still in their infancy and lacking features. Time will tell whether NodeJS can attain the kind of ease of use that we get from something like PHP or the enterprise level security and reliability something like .NET or Java. Where NodeJS is exciting is in building some of the ‘glue’ between the front end and the back end. It can be useful for helping to optimize slow processes or developing new kinds of web services that don’t exist yet because they would be too slow or cumbersome to develop using other tools. Node is also finding some use as a way to author cloud based services.

Since NodeJS is using the same Javascript engine as Chrome, a significant amount of time has already been spent optimizing it and debugging it. That also means that NodeJS benefits from any future improvements that Google makes on V8 for Chrome.

Personal Experience

I’ve only been using Node for a couple weeks, but my initial experiences have been very favorable. My first Node project involves interfacing with the Facebook API and processing large amounts of data. I already had a working solution in PHP, but wanted to see what kind of performance gain I would get from using NodeJS. This is a perfect scenario for Node, since each Facebook call can be parallelized by using asynchronous NodeJS calls. The same goes for any calls to our database. I’m currently seeing a speedup of nearly 10x just from porting my code from PHP to NodeJS (doing no other tricks). The Node solution will allow for better scaling and lower memory usage. I was able to use two community made modules in the project – the node-facebook-client and SequelizeJS for talking to the database.

Another nice thing about using Node is that since it’s Javascript, it meshes nicely with many existing API’s (like Facebook’s) that use JSON as the preferred way to exchange data. Parsing and encoding data takes no effort. Something I hope to look into more is MongoDB, which stores data in a JSON friendly format as well. Having all your data in the same format means less time spent having to think about how to store and retrieve it.

It seems like every day a new daily deal site launches, offering subscribers another way to get 70% off everything from sushi to massages to winery tours. Groupon started the craze in Chicago in 2008, and other daily deal sites (more than 500) have been springing up
ever since.

The premise for these deals is simple. A daily deals site contacts a business directly and the two negotiate a limited time deal (usually 50% to 90% off) for a product or service. The site then distributes the deal to its large mass of subscribers, in hopes that they also share the deal with their friends.

The benefits of daily deals for businesses include exposure to new customers, potential word-of-mouth marketing, foot traffic through its doors, and a chance to highlight a popular product or service to a large quantity of consumers. Profits from the sale are split between the daily deal site and the business. Businesses can expect to get 50% of the deal price, but these back-end splits are negotiable.

Businesses should keep in mind that running a deal is not necessarily a path to quick revenue. Rather, it should be part of a broader marketing plan to drive awareness for the business, not a short-term loss leader.

Continue reading here – Insights Issue #7 – DailyDeals

By deciding to build an entirely HTML/CSS-based site, we allowed all members of our production team to touch this project, rather than limiting development to those with Flash skills. We utilized the latest and greatest features of web development to provide a seamless transition from last year’s Flash-intensive site while still offering cross- browser compatibility.

Parallax Scrolling:

Hoagiefest is filled with animated GIFs and small Flash pieces that bring life to the birds, butterflies, and blimps in our “Hoagie Wonderland.” We wanted something else, though, that would serve as “wow factor” and add more depth to the site. The answer was simple – parallax. Parallax is the effect of objects in the distance moving at a slower rate than those that are right in front of you. Scrolling through the Hoagiefest site conveys to the user a feeling of falling through the sky, and the clouds right in front of you are whizzing by while those in the background are moving ever so slightly.

Achieving this effect is quite simple but requires some extra planning. The content of our website scrolls with the page at a normal rate, but we have two extra divs that wrap around our content, each with its own repeating background full of clouds. To implement parallax scrolling, set the background-attachment of these divs to fixed. In your JavaScript, update the background-position of these divs in your scroll handler, using variations of the offset to move the background images at different rates. For example:

$(window).scroll(function() {
         var windowHt = $(window).height();
         var scrollAmt = $(window).scrollTop();
         var bgTop = $(‘#background’).offset().top;
         var offset = 0.05;
         $('#background').css({
                  ‘background-position’:
                  ‘center’ + (-(windowHt + scrollAmt - bgTop) * offset) + 'px';
         });
});

Without too much effort or code, you now have a sleek, attention-grabbing effect that will take your site to the next level.

Flash versus HTML5:

The only elements in the 2011 Hoagiefest website that we physically created in Flash are the people situated in the contest section and the cow that is grazing right above the footer. This is a drastic difference from last year’s site, which was made entirely in Flash! With the level that smart phones and tablets have penetrated our market, building a Flash-based website is no longer a viable option. Attempting to view Hoagiefest 2010 on an iPad or iPhone would strip the site of all of its value since Flash is not supported on these devices.

In years past, we would have built custom Flash players for the site’s audio and video components. This year, we leveraged JWPlayer, a pre-made audio/video player with HTML5 fallbacks to both reduce coding time and ensure cross-browser compatibility. In browsers that support Flash, an swf that you download from the Longtail Video site is embedded and pulls in the correct video or audio file. If Flash is disabled or does not exist, the HTML5 “video” or “audio” tags are automatically used for playback. Although we ran into some technical issues along the way, mainly because the JWPlayer documentation isn’t as complete as it could be, the end result of this plugin is definitely worth the effort.

Mobile:

Hoagiefest is a very robust website when viewed on a desktop computer and even an iPad. However, with the popularity of mobile browsing, we knew we’d have to develop alternate versions of the site for the iPhone, Android, and other devices (like the BlackBerry) due to the limited screen space and varying functionality of these devices.

The iPhone and Android offer an experience comparable to the desktop version of the website. The difference lies in a slimmer design that excludes any sections involving file downloads (which mobile devices do not support). Due to a lack of consistent support for media playback (audio and video) and limited JavaScript capabilities, we built an even more streamlined version of the site for non-iPhone/Android devices, such as the BlackBerry. We transformed the “Groovy Deals” into a static list and, coupled with the hoagie lineup and contest details, the most important aspects of the site are still front-and-center on these devices.

Optimization:

As you can clearly see, the Hoagiefest website is composed primarily of large PNG images, which amounts to a very hefty site. On top of this, we have video/audio files downloading and a lot of JavaScript code running as the user scrolls. Our biggest concern was the load time that users would experience when coming to our site, so we had to take various measures to get our site down to a manageable size.

In order to optimize the site, we first made sure to reduce all our images in size while still maintaining their quality. We used a combination of PunyPNG and Smush.it for lossless image compression. We also minified our CSS and JavaScript files and consolidated them in order to decrease the number of HTTP requests.

This reduced the “k-weight” of our site significantly, but it was still coming in at about 5MB. Although we couldn’t reduce the overall size of the site any further, we knew we could trim down the initial download with lazy loading (loading sections on-demand as the user scrolls). This requires replacing each image in your HTML with a link and setting the href attribute to the src of the image. In your JavaScript scroll handler, detect if you are scrolled to a specific section (by comparing the amount that the page is scrolled with the top position of the section) and replace the link with an image using the href from the link as the src of the image. Sure enough, this shaved 1.2 MB off of our initial page load.

Banner Campaign:

While HTML5 was a good choice and had many benefits for the Hoagiefest site, Flash is still used for our digital banners. Although there are plug-ins out there that allow you to convert Flash banners to HTML5, this is still a new technology that isn’t stable enough for widespread use. Our banner campaign had two phases: pre-launch and post-launch. In the pre-launch phase, we executed countdown banners to generate excitement, promote awareness, and direct customers to the pre-launch website, where they could unlock the hoagie lineup by “liking” the page.

The post-launch banners this year were more specialized and had more ad placements than in years past. In addition to ads created for YouTube and Hulu, we created an expandable banner for AIM; a full-page skin and banner ad for Pandora; a full-page takeover for Accuweather, which included a skin, banner, and animated overlay; and an interstitial ad and synchronized banners for WWE. Although HTML5 is rising in popularity, Flash is still very much alive – it is an integral part of our advertising efforts and continues to succeed in directing customers to the desired location.

Conclusion:

In the end, we managed to create an amazing, innovative site without compromising our original vision or feeling limited by the technology at hand. Now that we’ve gotten our hands dirty and have seen all that HTML5 can do, it will definitely be a key item in our development toolbox. And as Hoagiefest 2011 was revealed, we continued to overhear the same exclamation being made around the office – “We don’t even miss the Flash!”

Business to Business (BtoB) is actually more about relationships than Business to Consumer (BtoC). Whether you are selling computer services, manufacturing equipment or even staffing, you need to position your offering in terms of the value it provides to your customer. This can only happen if you understand your client’s business, and your client understands the value of your offer. Bottom line, you have to convince your client that you are an expert in your space and their business. Impossible to do in a glossy, four color brochure or even a 15 minute sales call, but how about social marketing?

Social marketing is perfect for showing value

With Social, its not about the value of your offer, its about what value you offer. Rather than trying to inundate your your prospects with Newsletters, seminars and other methods of shouting, why not do what you do best-listen and offer value. Your best salespeople are already doing this, just on a one-to-one scale. I’ll bet in your in-box right now are links shared by associates related to new product applications, new industry regulations or important industry updates. All you have to do is commit to sharing them with the public via twitter, linkedin’s discussion groups, etc. If you have survived through the past few years, you have the industry knowledge. Share it via social networking. Showcase your value.

Social marketing is faster

If you have ever tried to rally the troops to put together a newsletter, you know the pain of getting enough timely content to make it seem substantial (or ‘herding cats’). Clients need information to help them make decisions today, not for decisions they made three months ago. social marketing doesn’t need polish. social marketing doesn’t want polish. Share your insights about something interesting to your clients on a blog and tweet a link to it. Printed newsletters feel good when you open the box from the printer, but feel really heavy when you have to throw out the extras. eNewsletters of the same content just means that you saved the week of printing and mailing, not the two months of ‘herding’.

Know what matters

When you post a link using your bit.ly link shortener, you can see the data as to what articles people clicked on. You can quickly see what links are getting attention. Use this information to refine all your communications and marketing materials.

Show how well you know a niche

When someone buys a candy bar that doesn’t live up to the hype of the marketing, that person is out 50 cents. When a manufacturing team selects a vendor to renovate their packaging line, a team takes a risk committing scarce company funds to a significant project. Social networking is a great way to continue to ‘beat the drum’ and show how well you know a niche. Search engines are increasingly including social networks in their real time results, meaning that your tweet on a topic that someone googles can be the top result, even if the person doesn’t have a twitter account. Show your smarts.

Successful BtoB companies have long thrived on using industry experience and domain expertise to gain trust and win business. Social networking is merely a new conduit to expose that knowledge to the world.

Do you have a successful BtoB social networking story to share? I’d love to hear it!

jQuery Mobile Framework

jQuery Mobile is a framework that allows developers to build mobile websites in the same way that they would build websites for desktop browsers. It allows us to write code that works consistently across the most frequently used smart phone and tablet browsers. To ensure cross-browser/-device compatibility, jQuery Mobile is built on clean, semantic HTML.

Key Features

• Familiar and consistent jQuery syntax – minimal learning curve
• Compatible with all major mobile platforms – Apple iOS (3.1-4.2), Android (1.6-2.3), Blackberry 6, Palm WebOS (1.4), Opera Mobile (10.1), Opera Mini (5.02), Firefox Mobile (beta)
• Lightweight size – small file sizes and minimal image dependencies
• HTML5 markup – fast development and minimal scripting required
• Progressive enhancement approach – brings core content and functionality to all platforms and a rich, application-like experience on newer mobile platforms
• Automatic initialization – automatically initializes all jQuery Mobile widgets on a page
• Accessibility features – ensures that pages work for screen readers and other assistive technologies
• New events – streamlines touch, mouse, and cursor events with a simple API
• New plugins – enhances native controls with touch-optimized, themable controls
• Powerful theming framework – makes it easy to build highly branded experiences

Supported Platforms

Although the supported platforms offer a solid mobile experience, there are many enhancements to be made and bugs to be fixed before the 2011 stable release. By that time, developers hope to also support Blackberry 5, Nokia/Symbian, and Windows Phone 7. In addition, since jQuery Mobile is built on jQuery, all pages should also work well on desktop browsers like Safari, Firefox, Chrome, and Internet Explorer.

Mobile Page Structure

Below is the standard structure of a web page using jQuery Mobile. Each page is just a div with the attribute data-role=”page”. Any valid HTML markup can be used within a page, but divs with data-roles of “header”, “content”, and “footer” are used most often. An HTML file can also contain multiple pages that are loaded together by stacking multiple divs with data-role=”page”.

	<div data-role="page">
		<div data-role="header">...</div>
		<div data-role="content">...</div>
		<div data-role="footer">...</div>
	</div>

Auto Initialization

jQuery Mobile automatically applies many enhancements, such as creating custom inputs for a more touch-friendly experience, immediately upon execution. However, these enhancements can be easily overwritten to suit your needs (e.g. using default input styles instead of custom ones).

Page Linking

jQuery Mobile uses Ajax to automate the process of loading web pages, which creates a rich, app-like experience that can’t be achieved with standard HTTP requests. When you click on an external link, the framework sends an Ajax request and either adds the new content and animates it into view or displays an error message popup if the Ajax request fails.

Media Query Helper Classes

jQuery Mobile adds classes to a web page that mimic browser orientation and common min-/max-width CSS media queries. These classes are updated on load, resize, and orientation change, allowing you to create responsive layouts in your CSS.

Theming

The default jQuery Mobile theme includes 5 swatches (a-e). The appearance of these swatches can be altered using CSS; you can also create your own swatches for endless styling options.

Some cool things about theming:

• Rounded corners, shadows, and gradients are automatically applied to certain elements without the use of images, so files are very light and fewer server requests are needed.
• When a button or form is added to a container, it is automatically assigned a theme that matches its parent container to visually integrate the element.
• The framework includes a set of icons most often needed for mobile apps. To minimize download size, a single sprite of white icons is included and a semi- transparent black circle is added behind the icon to ensure contrast on any background.

Form Elements

All form elements begin with standard HTML controls that are enhanced to make them more attractive and easy-to-use. Browsers that don’t support the custom controls will still offer a usable experience because they are all based on native form elements.

Conclusions

Aside from a learning curve, jQuery Mobile takes on so much of the functionality for which we’ve been creating custom code. With conventional jQuery, developing a mobile website often means handwriting code to load pages using Ajax, creating animations to style elements and make the site feel more like a native app, and using a lot of images to achieve the desired look and feel – not to mention making sure that it works consistently across all major mobile devices. This framework is worth taking a deeper look at because it can save time, code, and overhead.

To me, gamification and mobile apps were the two big winners. There were also way too many Charlie Sheen and #winning jokes, but that has to be expected at a geek conference.

Crawl, Crawl, Walk

One thing that did became very clear to me as I sat through all the sessions was social media marketing is still in its infancy stage.  I heard a lot of contradictory advice, arguments over what the standards of measurement should be and audience members that were craving more examples of good and bad uses of social media.

While some people like to think social media has started to advance greatly, a lot of brands still find it surprising that asking questions is a good way to start engaging with users in social.

Even though sites like Facebook, YouTube and Twitter have now been around for 4+ years, there are still no sure-fire tactics for businesses and social media. There are no industry standards or success metrics that people can agree on.

In a morning session, a presenter talked about how the myth of failing at social media being ok for marketers should no longer be acceptable. Several hours later in a session, a panelist preached how now is the time to experiment with social media and brands that aren’t afraid to fail are doing the best to leverage this new channel. You could argue both are right.

You constantly hear things like Fan and Follower counts don’t matter, yet we champion the social media efforts of brands that have 10 million Likes on Facebook but have never answered a question a Fan left on their Wall (you know who you are).

Some of the “experts” at the conference were still citing examples of @ComcastCares and the @DellOutlet on Twitter as who is “getting” social. Who hasn’t heard those two case studies a million times by now? People were practically begging for the newest and brightest examples of what works in social media marketing but no panel or presenter I saw really supplied it. And I think things like that are a telling sign of where social media currently is.

The Eye of the Beholder

Social media marketing is still very subjective.  You have to do what works and fits for your brand. You can’t try to keep up with the Joneses in social because you will just end up wasting your time chasing the newest thing you read on Mashable.

It seemed like some people go to conferences like SXSW looking for some cool new tactic or shiny object they can instantly plug into their social media efforts and reap in the success. Unfortunately, it’s not that easy.

The biggest thing I got out of SXSW was realizing social media is still many different things to all types of businesses.  We don’t all need Tumblr blogs or our own Instagram hashtags. Having the CEO tweet won’t work for everyone. Not every brand needs a Facebook Page (that’s right I said it).

Figure out how social media fits into your brand and how at the end of the day it can help achieve your business goals. Evaluate your successes and failures on your own terms. And buckle up because social media marketing will hit its teenager phase one day, just not soon.

(photo courtesy of Sonal and Abe)

Write a tweet-it lasts longer

A comment made to a friend at a bar may reach a few outside of that circle, but not social. Almost every day, a celebrity is being questioned about a tweet. Gilbert Gottfried became Gilbert Got-fired after his tweet about Japan’s Tsunami woes was judged to be in poor taste. This joke might have been previously told to a small crowd at a comedy club while he was working out material, not the global main stage. Our tweets, message board comments and facebook status updates are digitally archived and incredibly easy to pass along.

Our desire to be authentic can backfire

One main tenant of social participation is authenticity. That’s why we all love it: we get to hear comments from the horse’s mouth. Unfortunately, this authenticity makes it impossible to speak anonymously. We can’t lend our credibility to a comment and also not be held accountable for everybody hearing it, especially the person or company we most want to comment about.

Bambi’s Mom was wrong

I’ll admit, there are times I bite my tongue when I’m upset at a company out of a sense of professionalism. But the only way brands will be get better is if they are held accountable. While comments like “brand X – You suck!” don’t help and reflect badly on the sender, comments like “airline X-next time you know you are going to strand us in Austin, a little heads up might help, u have my email” accomplish so much more. And next time, I might not mind spending a little more time in an Austin bar before departing!