Ever since I’ve been involved in the Web, I’ve been fascinated by little things that make a big impact. It’s one of the reasons why I started collecting and blogging about these details, which could in some way help others grow an audience. One recurring topic early on was launch and landing pages and the strategies that creators use to expand the reach of their websites, which led to a Smashing Magazine post titled “Elements of a Viral Launch Page.”

Another interesting recurring topic is the campaign page, which you’ll find either embedded in an existing website (Foursquare’s Game of Cones and Dropbox’s Great Space Race) or as a completely independent website (Iubenda’s Orwell Test) that redirects traffic back to the source. Such campaigns have varying goals, such as to drive traffic, to raise awareness or simply to get a single person’s attention.

In this post, you’ll learn what to look out for when creating your own small campaign and how these elements fit together in existing campaigns around the Web.

What Do We Mean By “Campaign”?

The word “campaign” is traditionally defined as a military or political operation that is confined to a particular area or involves a specific type of fighting and that is intended to achieve a particular goal. That’s exactly what we mean here: A campaign is a sustained effort that is slightly beyond your day-to-day business but still connected to it in some way.

Interestingly, a campaign can be carried out with little effort, if you closely monitor what is going on around you and your brand. In the wake of PRISM, we recently ran a small campaign called Orwell Test, trying to redirect some of the attention to Iubenda, an app that generates privacy policies.

This post contains my observations and a framework for coming up with new campaigns, which you can integrate in your own marketing activities. Thus, it will include subjective opinion to complete the picture.

9 Things To Look Out For

After the Orwell Test campaign, I have been thinking about some of the reasons why it worked and how to come up with even better ways to get the word out about our startup. Obviously, the main driver here was the timing with PRISM and people’s emotional response to its outrageous reach. (Anger spreads faster and wider than joy on social networks, according to a scientific study on Weibo.)

The campaign asked a simple question: Is your company any better than the governments that collect data without informing people? This way, we made a connection with what is happening right now. We made a connection to something that people are very upset about (we’ll discuss why that’s important in the section “A Little Viral Theory” near the end), and we challenged them to think about their own behavior.

So, what things can you take advantage of, and what are some great campaigns that do?

The Elements

• Relevance
  Tell a story. What is happening now?
• Cause
  Contribute to a cause.
• Popular issue
  Geek out on a popular or niche topic.
• Competition
  Host a competition.
• Stats, stats, stats
  Infographics, shareable data, etc.
• Content
• Partnerships
• Targeting someone or something
• Creativity and innovation
• Related fields
  Branch out into something related.

This list is not exhaustive, but it’s a good framework to start with, and the examples below will provide some perspective. To understand what your campaign should look like and to make it perfect, you will have to do a bit more homework and incorporate a few additional elements: analyze your target users, set a goal for the campaign, and add viral elements.

Other Key Elements

• Persona
  Who are your target users? Build a persona.
• Goal
  What goal would you like to achieve?
• Virality
  Understand the viral loop and what it is caused by to maximize your reach. (Again, we’ll cover this in the “A Little Viral Theory” section.)

Now we’re ready to look at some examples.

1. Relevance

One of the easiest things to leverage is relevance. Something might be happening out there that you can add your own perspective to. The more relevant or innovative your contribution, the more attention you will be able to draw.

Orwell Test was born out of pure timing and our eagerness to work on something that people might appreciate. Another project that did an interesting job of capturing attention because of its content and name recognition was Prism Break, which was started by a Japanese developer and designer and posted in Reddit’s technology section and which has since taken on a life of its own.

Responding to short-lived events — for example, via Twitter — also has potential.

Sketch

When Adobe was considering discontinuing Fireworks (which it did), Sketch invited people to look at its alternative, which it was offering at a 50% discount. Sketch’s tweet resulted in 33 favorites and 299 retweets!

Tweetbot

The same thing happened with Tweetbot, which discounted its flagship app when Twitter killed off some versions of its TweetDeck app. Above is a humorous tweet by Paul Haddad, a member of the Tweetbot team. The tweet got 420 retweets and 152 favorites!

2. Cause

Another approach is to announce your support of a recurring event or cause.

Movember

Movember is a movement in which men grow moustaches in November to raise awareness about prostate cancer and to fund organizations that fight the disease. The movement is important to New Relic, which decided to donate $10 to the cause with every registration. New Relic ended up donating around $55,000 to the Movember Foundation and the Susan G. Komen foundation.

If we do the math, that’s 5500 new customers, if all of the registrations were legitimate. The campaign had a single landing page at newrelic.com/movember, organized into various sections. (It has since been removed, unfortunately, but might come back in a new version. Do visit the 404 page there, though, a great example of an actionable landing page.)

The campaign’s home was a one-pager that explained the concept of Movember and why New Relic is supporting it (the Movember Foundation is one of its clients). Visitors were invited to sign up below each of those sections (“Create your FREE account!”).

To remind people to share, the website also asked visitors to consider spreading the word below the different sections. The page’s header contained the usual Facebook, Google+ and Twitter buttons.

The last section offered the visitor the alternative of supporting a female-oriented cause. Notice how the copy taps into the altruism theme discussed earlier. It’s hard not to participate when you can support by “just sharing.”

3. Popular Issue

Being relevant could also mean building the campaign on something very popular that people identify with (a form of relevance). Below are some campaigns based on very popular issues.

Crowdfunding is all the rage these days (deservedly so), and all aspects of it are being discussed in blogs and social media and even traditional media. Nintendo played with this concept for the launch of its Game & Wario game for the Wii U.

Crowdfarter

With Crowdfarter, Nintendo built its very own Wario-themed Kickstarter-like campaign, featuring “executive updates” by Wario himself. Visitors could preorder the game, and the page explained everything they needed to know about the upcoming release.

The pages were structured to obviously reflect Kickstarter (and similar websites): video at the top, social elements along the right, and details just below.

The most important part was that the goals and donation element were connected to the sharing elements. That is, visitors could “buy” into the campaign by sharing in social media.

When the campaign had been shared a certain number of times, Wario badges would be released for downloading. The last prize was a video of the gameplay.

Makers

Nike did something similar by tapping into a popular current topic. It built and released its Makers app in July 2013. Visitors could download the app and educate themselves on how to work with materials in an environmentally sustainable way.

Quite a few sharing elements were built into this campaign. The campaign lives at its own domain, nikemakers.com, not a subdomain of nike.com. The website was built with Tumblr to appeal to people who love the platform. It also includes a video explaining how this campaign could turn into a full-blown movement. (By the way, check out Tomasz Tunguz’s post on how to start a movement for your product.)

Marauders Map

The makers of Circle, a local social network app, created a small campaign website based on a Harry Potter-style marauders map to explain what its service does, which is to track nearby friends. (The marauders map was apparently the result of a Circle hackathon.)

4. Competition

People love to compete. And people love the chance to win something, however improbable the chance of actually winning might be. A competition is always an interesting basis for a campaign.

The Great Space Race

Dropbox understands the viral loop better than anyone. When it started out, it promised free additional storage for users who referred their friends as well as for the friends themselves. This not only incentivized existing users to share, but also enticed potential users to sign up because they would clearly be getting a better deal than anyone else. Earlier this year, Dropbox decided to run the Great Space Race, which would give free Dropbox space to everyone at a student’s school (more precisely, an extra 3 GB to the student for two years, plus the additional space their school had earned).

The campaign hinged on two elements: acquiring users and activating those users. Every invitation would earn two points towards free space for the student’s school, and new users would unlock four more points by completing the “Get Started on Dropbox” guide. The points would be converted into free space for everyone at the school for two years (to a maximum of 25 GB).

Right below the simple instructions appeared the school rankings for the student’s own country, and below that the international rankings, so that the student could see where they fit in and how far they had to go. (The competition is over, but the page is still available.)

Game of Cones

Foursquare built a campaign named Game of Cones, launched around the time when the “Red Wedding” episode of Game of Thrones aired, which dominated social media for a while. Foursquare’s competition was a battle in which the ice cream shop with the most check-ins in New York City or San Francisco would win the Iron Cone.

Foursquare combined a competition with a very popular phenomenon, Game of Thrones, working with HBO to bring this campaign to its users. The sharing aspect was a combination of rooting for the various “houses” — for example, Bi-Rite and Smitten — and sharing via the hash tag #SummerIsComing.

Users were incentivized to share by “choosing their allegiance.”

Getaround Racer

Getaround repurposed a racing game into a competition for its brand in which users could “drive with style, like 007.” The winner spent a day in an Aston Martin car, with a custom-tailored suit, had a five-star dinner and spent the night in a luxurious hotel.

Users could participate in the competition by sharing their racing time in the game on Facebook.

5. Infographics, Compilations And POV

An infographic is a great campaign tool, as we all know. It compiles a few interesting facts into an easily digestible (and, thus, shareable) format. One of my all-time favorites is the Web Trend Map by iA.

iA has become well known for these infographics, repurposing metro maps into what could even be considered as posters.

Time Machine

Foursquare’s Time Machine was an interesting partnership (with Samsung’s Galaxy S4) and a good example of emotional design. The time machine took users back in time in an interactive, visual way, showing what they’ve been up to and the places they’ve visited.

If the user changed cities, the machine would take them there as well, changing locations with a small spaceship animation.

After the user had completed and seen their own history, they could check out some interesting new places around them. To finish off, they could see a colorful infographic of their own journey, which they could easily share.

Flurry

In a post titled “Why Your Marketing Campaign Sucks” on TechCrunch, Mark Suster singles out Flurry as an exceptional campaign marketer, and he introduces the term “point-of-view marketing,” which a campaign creator needs to follow in order to succeed. The gist is that it’s not all about you, but rather about why the campaign is newsworthy.

Flurry’s campaign was a simple blog post, “Christmas 2012 Shatters More Smart Device and App Download Records.” As Suster puts it:

“Flurry doesn’t talk about all of their analytics features and functions. They offer a point-of-view about their market. And they back it up with data. And journalists eat that shit up because it has all that they’re looking for: facts, charts, an angle, news, something that their readers care about, etc.”

The takeaway here is, are you painting the big picture, or just talking about yourself?

6. Content

Words. Images. Content. These form an integral subset of all of the other categories we’re talking about. All of them matter, the color choices, contrast, symmetry, balance. Yet they stand as a category of their own.

Justin Jackson perfectly captured the idea that content can be the message in his piece “This Is a Web Page.” He opens with the heart of the matter:

“There’s not much here. Just words.”

Those words garnered over 200,000 page views in just two weeks.

7. Partnership

We’ve seen partnership campaigns before. Here’s one GE pulled off on BuzzFeed.

Flight Mode

GE partnered with BuzzFeed to promote GE Aviation at the Paris Air Show. With BuzzFeed, GE created sponsored content related to aviation, and it provided a novel way to navigate the content, called “Flight Mode,” whereby users could fly towards the content they wanted to read.

It might not have revolutionized online reading, but it was a memorable campaign.

KitKat and Android

Most of you have probably seen this. The campaign launched after I had finished the final draft of this article, but I just had to squeeze it in.

Google and Nestlé have come together to promote the next version of Android, 4.4, by naming it Android KitKat, continuing Google’s convention of naming major Android releases after desserts. This dessert campaign includes an actual dessert: Android will be featured on KitKat packaging, and customers can win little prizes.

KitKat’s campaign website.

Android’s campaign website.

9. Narrow Target

An effective campaign could just as well target an extremely narrow niche audience.

“How Much to Make an App”

Ooomf is a service for people who are looking for developers and designers to make an idea happen. It recently released a side project and campaign titled “How Much to Make an App.”

The website helps users estimate the costs of a project. It targets anyone who types “How much does it cost to make an app” into a search engine. Additionally, Web professionals may send their customers this way to get an idea of what’s involved.

Sharing is enabled by the handy nature of the tool, which explains what is expected of the visitor to make their idea a reality. In general, the more useful something is to someone, the more likely they will share it.

Ooomf added two links to its website, one on the main landing page at the top, and a call to action to “submit your project” right on the website (plus a “learn more” link).

“Please Feature Us, TechCrunch”

Here’s a company that tried to increase its chances of being covered by TechCrunch by targeting the publication with a campaign page titled “Please Feature Us TC.”

The campaign never got Hipvite the coverage it sought; however, according to TJ Tan on Dribbble, it gave the company a nice flow of registrations (the app no longer exists). In an email to me, Tan explained that Hipvite’s primary goal was to attract early adopters to try out the product; the TechCrunch feature would merely have been a great bonus.

Nearbox

The team behind Nearbox wanted to meet up with Andrew Chen to discuss “growth hacking” in their area of interest (mobile). They sent him the Snapchat image above, along with the website they built. This is a great example of how to target an individual in a small campaign. They even asked people to tweet about it:

“Those guys from @Nearbox really want to meet @andrewchen http://bit.ly/YzKesU.”

It’s hard to turn down people who do things like this.

8. Creativity And Innovation

This next creative campaign is still running.

Hollywood and Vines

This campaign, called Hollywood and Vines, consists of a compilation of six-second Vine clips submitted from all over the world.

Sharing is encouraged via the usual social channels and with an email like this:

“Airbnb creates the world’s first film made entirely of Vines. Check out the project at http://www.hollywoodandvines.com/ #AirbnbHV.”

Solved by Flexbox

Creativity also means coming up with a great campaign name. “Solved by Flexbox” is a great name to support the CSS Flexbox campaign.

10. Related Area

One last option worth mentioning is to choose an area of focus that isn’t necessarily your core business, but where you can add unique insight or get a lot of views.

Speakeasy

When Speakeasy launched its product to book locations for events, instead of a typical launch party, it threw 50 parties by getting promoters to use its ticketing platform for the same weekend. The incentive for promoters posed a problem; Speakeasy wanted to host a liquor giveaway, but that wasn’t viable because of the high turnaround time that spirit brands usually have. So, it decided to make its own Vodka brand and advertise it in its emails (and on a fake website), without any explanation.

The campaign’s results were impressive: media coverage in New York and Toronto, one weekend with 45 parties in three cities, and 5000 new users.

Litense

I’ll conclude with our newest campaign at Iubenda, named Litense. We tackled a subject related to what we do, open-source licenses, and added our expertise. Because we have some experience in creating legal documents, we attempted to redesign open-source licenses to make them instantly understandable and easy to use, both for their creators and their users.

We picked the catchiest name possible, Litense, made the licenses easy to scan and read, with the help of icons, and added a few descriptive sentences of what you can do with the licenses.

To make it even easier, we host the licenses on our own servers. All the user has to do is link to the license, which will pop open in a modal window over top their page.

At the bottom of the page, we list the various licenses, with an overview to help visitors make sense of the various clauses; it also contains the only link back to Iubenda’s website. We hope the service provides value to a lot of people, people who might need Iubenda’s other services at some point. We hope the project will draw a bit of attention to Iubenda’s vision of reworking legal documents for the Web.

A Little Viral Theory

Now that you know the ingredients of a campaign, let’s look at the recipe to make it effective. You’ll usually want to follow a few rules to make as big an impact as possible.

For starters, you’ll need to bake in a bit of a viral loop. In short, you’ll need to get a viral coefficient above 1.

    viral coefficient = (average number of users invited by each active user who invites someone) × (proportion of invited users who actually join or become active) × (proportion of active users who invite others)
    

Ultimately, it comes down to eliciting a strong emotional driver that will get visitors to share. (If you’re interested in emotional design, check out Aarron Walter’s book on the topic and my earlier article). What’s the strongest driver on social networks? Anger.

Higher virality is achieved by eliciting strong emotions. Here are a few things you can do:

• Make your content visual.
  Use images, infographics, videos, GIFs. Visual content is more engaging, faster to consume and faster to activate the response you seek.
• Make the content interactive.
• Personalize the content.
• Create emotional stacking with lists.

Emotions aren’t the only thing that raises the viral coefficient. Other factors that motivate people to share are social benefit or ego appeasement.

• Exclusivity
  The viewer wants to feel in the know.
• Altruism
  The user wants to do something good.
• Self-image
  How does the shared product represent the user?
• Convenience
  Make sharing as easy as possible.

Now that we’ve covered the theory, let’s look at a recent and brilliant execution of it.

One Second on the Internet

Designly’s One Second on the Internet campaign taps into so many of the themes above, and the website has been shared like crazy. See for yourself with a live Twitter search.

Let’s review five reasons why this campaign is so effective:

1. Visual content

   

   The highly visual content centers on the blocks of bright logos. The page has the feel of an infographic, because the size of each block correlates to the number of actions performed on that platform in one second.

2. Interactivity

   

   The interaction is subtle yet important. The number in the top left of each section adjusts to the time the visitor has spent on the website relative to the block being viewed.

3. Personal

   The page is not necessarily personalized, but it surely is personal. Designly is talking about everyday things: voting on Reddit, posting to Instagram, posting to Tumblr, Skyping, tweeting, uploading to Dropbox, searching on Google, watching Youtube videos, liking on Facebook, sending email. Hey, I do that!

4. Emotional stacking

   

   The page starts with the smallest block (Reddit) and finishes with the biggest (Facebook). Then, we get a few mind-boggling (and very shareable) facts, before the invitation to click that email button.

5. Convenient sharing

   

   Notice how the sharing buttons stay with you the whole time and how Designly’s URL sits in the bottom-right of the page?

Now What?

Now it’s your turn. Go create a great campaign with what you’ve seen here (and use one of Iubenda’s newly released licenses!). Also, don’t forget to tell us in the comments about the last thing that left a lasting impression on you. And feel free to link to any campaigns you may have done.

Further Reading and Links

Here are some links from the article you shouldn’t miss:

• Full views of some of the campaigns: Great Space Race, Movember, etc.
• “Why Your Marketing Campaign Sucks,” Mark Suster, TechCrunch
• “The Secret Recipe for Viral Content Marketing Success,” Kelsey Libert, The Moz Blog
• “How to Make That One Thing Go Viral,” Upworthy
• “Elements of a Viral Launch Page,” Simon Schmid, Smashing Magazine
• “Key Ingredients to Make Your App Go Viral,” Carla White, Smashing Magazine
• “30,000 Newsletter Subscribers in 12 Months (Startup Lessons Learned),” Gregory Ciotti
• Influence: Science and Practice, Robert B. Cialdini
• Yes!: 50 Scientifically Proven Ways to Be Persuasive, Noah J. Goldstein, Steve J. Martin and Robert B. Cialdini

(al ea)

© Simon Schmid for Smashing Magazine, 2013.

The jQuery UI effects framework is modularized, just like the widget framework, allowing you to choose which parts of the package you want to use and reduce the code requirements. You can create a custom download for yourself, which takes into account dependencies between the modules.

Before looking at how to create a new effect, you should be aware of the other functionality already offered by the jQuery UI effects framework, so that you can use it when developing your own effects.

Underlying the individual jQuery UI effects modules is a core of commonly used functionality. These abilities are implemented here so that you don’t need to re-invent them and can apply them immediately to your own effects. Along with color animation, you’ll find animation from the attributes of one class to another, and several low-level functions that may be useful in developing new effects.

Color animation

The Effects Core module adds custom animation support for style attributes that contain color values: foreground and background colors, and border and outline colors. jQuery itself only allows the animation of attributes that are simple numeric values, with an optional units designator such as px, em, or %. It doesn’t know how to interpret more complex values, like colors, or how to increment those values correctly to achieve the desired transition, such as from blue to red via an intermediate purple color.

Color values are made up of three components: the red, green, and blue contributions, each with a value between 0 and 255. They can be specified in HTML and CSS in a number of different ways, as listed here:

• Hexadecimal digits—#DDFFE8
• Minimal hexadecimal digits—#CFC
• Decimal RGB values—rgb(221, 255, 232)
• Decimal RGB percentages—rgb(87%, 100%, 91%)
• Decimal RGB and transparency values—rgba(221, 255, 232, 127)
• A named color—lime

The red, green, and blue components must be separated out and individually animated from their initial values to their final ones, before being combined into the new composite color for the intermediate steps. jQuery UI adds animation steps for each affected attribute to correctly decode the current and desired colors, and to change the value as the animation runs. In addition to the color formats described in the previous list, the animate call can also accept an array of three numeric values (each between 0 and 255) to specify the color. Once these functions are defined, you can animate colors the same way you would do for other numeric attributes:

$('#myDiv').animate({backgroundColor: '#DDFFE8'});

jQuery UI contains an expanded list of named colors that it understands, from the basic red and green to the more esoteric darkorchid and darksalmon. There is even a transparent color.

Class animation

Standard jQuery lets you add, remove, or toggle classes on selected elements. jQuery UI goes one better by allowing you to animate the transition between the before and after states. It does this by extracting all the attribute values that can be animated (numeric values and colors) from the starting and ending configurations, and then invoking a standard animate call with all of these as properties to change. This new animation is triggered by specifying a duration when calling the addClass, removeClass, or toggleClass functions:

$('#myDiv').addClass('highlight', 1000);

jQuery UI also adds a new function, switchClass, which removes a class and adds a class, with the optional transition between the two states (when providing a duration):

$('#myDiv').switchClass('oldClass', 'newClass', 1000);

Common effects functions

To better support the various effects of jQuery UI, the Effects Core module provides several functions that are of use to these effects, and perhaps to your own. To illustrate how several of these functions are used, the following listing shows the relevant parts of the slide effect.

$.effects.effect.slide = function( o, done ) {
// Create element
var el = $( this ),
        props = [ "position", "top", "bottom", "left", "right", "width", "height" ],
        mode = $.effects.setMode( el, o.mode || "show" ), ...; // Determine mode of operation

// Adjust
$.effects.save( el, props ); // Save current settings
el.show();
distance = o.distance || el[ ref === "top" ? "outerHeight" : "outerWidth" ]( true );
$.effects.createWrapper( el ).css({overflow: "hidden"}); // Create wrapper for animation
...

// Animation
animation[ ref ] = ...;

// Animate
el.animate( animation, {
                       queue: false,
                       duration: o.duration,
                       easing: o.easing,
                       complete: function() {
                               if ( mode === "hide" ) {
                                       el.hide();
                               }
                               $.effects.restore( el, props ); // Restore original settings
                               $.effects.removeWrapper( el ); // Remove animation wrapper
                               done();
                       }
            });
};

You can use the setMode function to convert a mode of toggle into the appropriate show or hide value based on the current visibility of the element. If the provided mode is show or hide, it retains that value, and in this case, defaults to show if not given at all.

Before starting the animation for the effect, you might want to use the save function to remember the original values of several attributes (from the names in props) on the element, so that they can be restored when finished. The values are stored against the element using the jQuery data function.

To facilitate the movement of an element for an effect, you can wrap a container around that element with the createWrapper function to use as the reference point for the motion. Positional information is copied from the specified element onto the wrapper so that it appears directly atop the original element. The element is then positioned within the new container at its top left so that the overall effect is unnoticeable by the user. The function returns a reference to the wrapper.

Any changes to the left /right /top /bottom settings for the original element will now be relative to its original position, without affecting the surrounding elements. Having saved certain attribute values earlier, you’d use the restore function at the completion of the animation to return them to their original settings. At the same time, you should remove any wrapper that you created previously with the remove-Wrapper function. This function returns a reference to the wrapper if it was removed, or to the element itself if there was no wrapper.

There are some other functions provided by the jQuery UI Effects Core module that may be of use:

getBaseline(origin, original) This function normalizes an origin specification (a two-element array of vertical and horizontal positions) into fractional values (0.0 to 1.0) given an original size (an object with height and width attributes). It converts named positions (top, left, center, and so on) to the values 0.0, 0.5, or 1.0, and converts numeric values into the proportion of the relevant dimension. The returned object has attributes x and y to hold the fractional values in the corresponding directions. For example,

var baseline = $.effects.getBaseline(['middle', 20], {height: 100, width: 200}); // baseline = {x: 0.1, y: 0.5}

setTransition(element, list, factor, value) To apply a scaling factor to multiple attribute values at once, use this function. For each attribute name in list, retrieve its current value for element, and update that by multiplying it by factor. Set the result into the value object under the name of the attribute, and return that object from the function. For example, to reduce certain values by half, you might do this:

el.from = $.effects.setTransition(el, ['borderTopWidth', 'borderBottomWidth', ...], 0.5, el.from);

cssUnit(key) To separate a named CSS attribute (key) into its amount and units (em, pt, px, or %), returned as an array of two values, use this function. If the units aren’t one of these known types, an empty array is returned. For example,

var value = el.cssUnit('width'); // e.g. value = [200, 'px']

The functions presented in this section are used by many of the effects provided by jQuery UI. These effects are reviewed in the next section.

Existing effects

Numerous effects are provided by jQuery UI. Most of these are designed to enhance how an element appears or disappears (such as blind and drop), whereas others serve to bring your attention to an element (such as highlight and shake):

• blind: Element expands or contracts vertically (default) or horizontally from its top or left
• bounce: Element drops into or out of view and bounces a few times
• clip: Element expands or contracts vertically (default) or horizontally from its center line
• drop: Element slides into or out of view from the left (default) or top, and fades to or from full opacity
• explode: Element breaks up into sections and flies apart, or reassembles itself from flying parts
• fade: Element fades to or from full opacity
• fold: Element expands or contracts first in one direction then in the other (horizontally then vertically by default)
• highlight: Element changes background color briefly
• puff: Element decreases or increases in size, and fades to or from full opacity
• pulsate: Element fades out and in several times
• scale: Element expands or contracts from or to its center point by a percentage amount
• shake: Element moves from side to side several times
• size: Element decreases or increases in size to given dimensions
• slide: Element slides horizontally (default) or vertically from its own edge
• transfer: Element is moved and resized to match a target element

These effects may be used in conjunction with the enhanced jQuery UI show, hide, and toggle functions by providing the name of the desired effect as the first parameter. You can also supply additional options that change the behavior of the effect, the duration of the animation, and a callback function that’s triggered on completion.

$('#aDiv').hide('clip');
$('#aDiv').toggle('slide', {direction: 'down'}, 1000);

Summary

Included in the jQuery UI modules are some basic utility functions, low-level behaviors (such as drag and drop), high-level components or widgets (such as Tabs and Datepicker), and numerous visual effects. You can use these effects to enhance the presentation of elements on your web page, or to bring a particular element to the user’s attention. To assist you in creating your own effects, there’s a core of commonly used functions available.

Have you used the jQuery UI effects framework? How does it compare to native CSS tweens? Let us know your thoughts in the comments.

iResizer: Rescale photos WITHOUT Rescaling the subject (Win/Mac) – only $9.97!

Economist Simon Johnson says governments will feel the urge to suppress the crypto-currency Bitcoin.

Governments and established financial institutions are likely to launch a campaign to quash the decentralized digital currency Bitcoin, according to a leading economist and academic. Simon Johnson, a professor of entrepreneurship at MIT’s Sloan School of Management, expects Bitcoin to face political pressure and aggressive lobbying from big banks because of its disruptive nature.

Chipotle Mexican Grill if often thought of as the ultimate grub spot- a place where you can get more than you can eat for under $10.  

Not to mention, Chipotle practices what they call Food With Integrity.  

What exactly does this mean? Chipotle maintains an active effort to purchase produce from small and midsize local farms throughout the growing season and only purchases chicken and pork that are naturally and humanely raised, to name a few.  

Though it’s hard to believe, Chipotle just got even better.  

Business Insider recently published an article titled “How To Get Huge Portions At Chipotle.”

Find the life-changing article here.

You’re welcome. 

We all hit rough patches, and we all need a way to blow off steam. But depending on how you choose to do so, discretion might be in order.

               Israel’s Prime Minister is learning that the hard way.

               Benjamin Netanyahu’s Twitter feed elicited a snicker or two after it was discovered that the PM was briefly following an Iranian sex website.

               Unbecoming of a world leader? Perhaps.

               But between warning of Iran’s jean-deprivation or alerting us of its more sinister nuclear ambitions, such a high-profile job can be filled with angst and anxiety.

               Can we really blame a guy with so much on his plate for trying to liven things up a little?