BlogmyQuery – BMQ

Editor’s note: This article is the second piece in our new series introducing new, useful and freely available tools and techniques presented and released by active members of the Web design community (the first article covered PrefixFree, a new tool be Lea Verou). ZURB are well-known for their wireframing and prototyping tools and in this post they present their recent tool, Foundation, a framework to help you build prototypes and production code that’s truly responsive.

You’ve probably already heard about responsive design, which is website design that responds to the device constraints of the person viewing it. It’s a hot topic right now, and with good reason: alternative devices outsell desktop PCs 4 to 1 already, and within three years more Internet traffic in the US will go through mobile devices than through laptops or desktops.

All of this is forcing a convergence on what Jeremy Keith calls the “one Web�: a single Web that doesn’t care what device you’re on, how you’re viewing content or how you’re interacting with it.

What we found at ZURB was that while the concept of one Web is strong and the need for responsive websites great, the tools to help us quickly build that way just didn’t exist. That’s why we built Foundation, a framework to help you build prototypes and production code that’s truly responsive.

The Problem with Global CSS

For years at ZURB, we used and refined a global CSS file that included a nice 960 grid, typography styles, buttons and other common elements. The trouble with our global CSS was that none of these pieces were written to be used by others, so they required a good deal of ramping up and training, with no great documentation.

Our CSS style guide had a lot of good global elements, but it wasn’t well documented, and it certainly wasn’t ready for other devices.

The bigger problem was that it wasn’t designed to be responsive or mobile-friendly in any way. We were stuck in the same rut that a lot of designers are in: creating a 1000-pixel-wide canvas, putting a 960 grid on it, and calling it a day. Our tools were built to support that workflow. So, we rewrote it into Foundation, a framework for everyone to be able to rapidly prototype in a responsive way.

Foundation is an MIT-licensed framework that includes a nestable arbitrary-width responsive grid; mobile styles, buttons and typography; layout affordances such as tabs and pagination; forms; and useful JavaScript plugins. We wrote or packaged all of these pieces to achieve a few goals:

1. Quickly train new designers, inside and outside ZURB, to use a common framework;
2. Rapidly prototype websites for desktops and any mobile device;
3. Easily customize and complete the prototype to turn it into production code for particular projects or clients.

The first goal can’t be overstated; the value of having a single set of styles and best practices that the team can iterate on as a whole and communicate to our clients is tremendous. We can ramp up new designers much more quickly, build things faster and work together more easily. On one recent project, we even got a volunteer sufficiently up to speed on Foundation that we could collaborate on code — and it took only about 15 minutes.

So, How Does Foundation Work?

The core of Foundation can be summed up in a few points:

• A 12-column, percentage-based grid with an arbitrary maximum width.
  The grid can be nested and used for quite complex layouts, and it works all the way back to IE 7. The grid reshuffles itself for smaller devices.
• Image styles that disregard pixels.
  Images in Foundation are scaled by the grid to different widths.
• UI and layout elements.
  Foundation includes common pieces such as typography and forms, as well as tabs, pagination, N-up grids and more.
• Mobile visibility classes.Rapidly prototyping is partly about having built-in functionality to tailor the experience.
  Foundation lets you very quickly hide and show elements on desktops, tablets and phones.

We deliberately built Foundation as a starting point, not as a style guide. We’ve included some styles to help you rapidly build something clickable and usable, but not something stylistically complete. Everything in Foundation is meant to be customized, including button styles, form styles (even custom radio, checkbox and select elements), typography, and layout elements such as tabs.

The Grid

A lot of grids are floating around, including some very good ones right here on Smashing Coding. Grid systems have a few issues, though, and we built Foundation to tackle them… well, some of them.

Fluidity

One of the critical pieces of device-agnostic design is having a fluid layout that conforms to the size (and orientation) of the device. Foundation’s grid is completely fluid, with percentage-based widths and margins, and it works all the way back to IE 7 (but not IE 6 — philosophically speaking, acting like IE 6 doesn’t exist makes sense at this point). The HTML markup is pretty simple. Here’s an example of the grid in use, where we nest it for a more complex layout:

<div class="row">
  <div class="eight columns">
	<p>…</p>
	<div class="row">
	  <div class="six columns">
	    <h5>Another Section (.six.columns)</h5>
	    <p>…</p>
  </div>
	  <div class="six columns">
	    <h5>Another Section (.six.columns)</h5>
	    <p>…</p>
	  </div>
      </div>
    <p>Now the nested row has been closed, and we're back to the original eight-column section.</p>
  </div>
</div>

You can check out the above code on this example page.

Here are some of the built-in grid constructs, all of which scale with the browser window.

Responsiveness

The second critical piece is for the grid to be able to easily adapt to small devices and their unique constraints. We tackled this in three ways:

• On small devices (such as phones), the grid simply stacks vertically, with every column running the full width.
• We’ve also included block-grid classes, which are definitions for ULs that can be two-up through five-up and that remain a grid even on very small devices.
• And we have mobile visibility classes. These are a group of styles that enable you to quickly try things out by hiding and showing elements on different kinds of devices. You can attach classes like so:

<div class="hide-on-phones">
	<p>This is a paragraph that we don't want to see on small devices.</p>
</div>
<div class="show-on-phones">
	<p>This paragraph will be shown only on phones, not on tablets or desktops.</p>
</div>

Another interesting use for the classes is to prototype a common mobile consideration: placing mobile navigation at the bottom, as opposed to its more common placement at the top. You could do this:

<nav class="hide-on-phones">
  <ul>
    <li><a href=#>…<a></li>
    <li><a href=#>…<a></li>
    <li><a href=#>…<a></li>
  </ul>
</nav>
…
<nav class="show-on-phones">
  <dl class="mobile tabs">
    <dd><a href="#">…</a></dd>
    <dd><a href="#">…</a></dd>
    <dd><a href="#">…</a></dd>
  </dl>
</nav>

Foundation lets you write code once and show it on different devices easily.

Semantics

This one is tricky. A very compelling case is to be made that grid systems are by nature not semantic. This is partly true; they’re still descriptive of their function, but they do break the separation of data and display.

We didn’t want to base the Foundation framework on another extension, such as LESS. LESS is a great tool enabling you to use variables, shortcuts and more in your CSS, but we didn’t want to have to rely on it and add another barrier to using Foundation. The recent article we mentioned above actually fixed the data and display issue of grids by using LESS, which is awesome, but Foundation doesn’t fix that. Here’s why…

All of these methods are a stopgap. The replacement technique might come out next month or next year, but really all of these tools will change drastically in the very near future. Tools like LESS help us get a little closer to a very clean solution, but at a higher technology and learning cost. We wanted Foundation to be the fastest way to prototype for all kinds of devices, so we paid a small price for truly separated markup.

Rapid Prototyping Examples

Let’s look at a recent example for which Foundation was used. Every year, we do a 24-hour design marathon for a local non-profit, usually producing new marketing collateral and a new website. This year, we chose Rebekah Children’s Services, a great organization that helps with adoptions and takes care of disadvantaged kids.

This year, we wanted to build a website that was really responsive, and we had very little time to do it. Using just Foundation, we started prototyping the website based on some sketches we had done. In two hours, we managed to build this prototype.

Using Foundation, we built the prototype on the left in two hours (including every screen), and then started modifying it until it became the final website on the right.

It’s not terribly pretty, but it did give us something we could click around in, add copy to and iterate on. In the prototype, we used only a bare minimum of custom styles to more accurately represent the intended visuals.

Once we completed the prototype, we were able to complete the visual design and apply it to the existing Foundation code base to produce the final website. The final website retains all of Foundation’s framework, with the new styles applied on top of it.

How to Further Tailor the Experience

We recently launched an app through which to give traditional design feedback on mockups and websites. It’s called Spur, and it has been great fun for us; not only is it in our wheelhouse (for design feedback), but building a responsive Web app was an awesome opportunity.

Spur has a number of tools and actions, as well as some simple forms and a fairly complex JavaScript- and HTML-loading animation. Adapting all of this to mobile devices could have been really painful, but by starting with Foundation, we cut down on that considerably and prototyped the app quickly.

Spur on a desktop is different than Spur on a mobile device such as an iPhone.

Spur helped us get more comfortable with the constraints of a given device, including screen size, orientation, tap target size and copy. Spur is simpler on smaller devices, but it’s not stripped down. You can still capture a page, view it through the various filters, and share it with someone else.

Rapid Prototyping Is Required Now

The days of creating a blank Photoshop canvas and laying down a 960 grid are over, even if some of us are still working in that shared fantasy world. Mobile devices — or, let’s just say, devices beyond just laptops and desktops — are already prevalent and will only become more ubiquitous.

Don’t build a desktop website that’s pixel-perfect before thinking about other devices; get used to designing for several different sizes, and then quickly prototype your design to get a feel for the flow, function and interaction.

We built Foundation to help us do this faster and to develop better websites and apps for us and our clients. We feel so strongly about the need for this that Foundation is MIT-licensed and completely free to use, forever. If you try it out and have success with it, let us know. We’d love to hear about it, just as we’d love to hear about bugs or issues that you’ve run into.

We’re excited about this watershed moment in Web design (and in connectivity and data availability), and you should be, too: our industry will change more in the next three years than it has in its entire history. We hope this helps.

(al)

© ZURB for Smashing Magazine, 2011.

A visitor comes to your website all giddy to learn more about your product, when suddenly a snazzy slideshow loads with some snap. Impressed, they go to register and are greeted by a most elegant modal window. At this point they are finally overjoyed by the velociraptor that suddenly charges across their screen. They don’t know why but they like it.

Crafting a polished and unique experience for your users is becoming ever more critical as the Web gets more overloaded. Standing out is hard. To the rescue come frameworks such as jQuery, which offer a modular, highly customizable experience for your visitors.

Today, we are thrilled to introduce two new jQuery plug-ins that were developed exclusively for Smashing Magazine readers to liven up your developer tool belts: Orbit, a new slider; Reveal, a modal plug-in; and Raptorize, an effect plug-in that will literally bring your page to life.

Why Create Our Own?

Quickly, before diving into the details, some background would be helpful. There are hundreds of jQuery image and content sliders and probably thousands of modal plug-ins. So, why create our own? We wrote these for a number of reasons, the most important ones being:

• Flexibility
  We use these plug-ins for clients, internal projects, our apps and a number of other places. We can easily tweak and re-use the code for specific and special implementations.
• Experience
  There is no better way to learn how to create better plug-ins and code than to do it yourself and release it publicly. Orbit has undergone a number of iterations and rewrites, which we learned from. Reveal has undergone only a few. We got Raptorize right the first time and haven’t had to update it.
• Better interactions and development
  Perhaps the biggest driver was that, across our team, we used a number of plug-ins that have different quirks and features, but none of them nailed the features and interactions that we wanted. Developing plug-ins allowed us to work from a uniform codebase, iterate and optimize our work.

Have a look at a couple of our previous articles:

• Spicing Up Your Website with jQuery Goodness
  Demonstrates several creative techniques for increasing usability with jQuery.
• Stronger, Better, Faster Design with CSS3
  Introduces some powerful uses of the upcoming CSS3 standard.

Orbit: jQuery Image Slider

First up is our new jQuery slider, Orbit. At a mere 4 KB, Orbit can handle images, linked images and straight-up content blocks. Setting it up takes just a few minutes, and it has some styles out of the box. We started working on Orbit because of all the many jQuery image sliders, none seemed straightforward to implement or had nice default styles. After several iterations and releases, the addition and removal of a number of features and some serious learning, we had a plug-in that perfectly fit our needs.

Let’s dive into the code, shall we?

The Code

To get started, you’ll need jQuery and the Orbit plug-in (make sure jQuery is attached first).

<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.orbit.min.js" type="text/javascript"></script>

Now we can quickly hook up the CSS that we need:

<link rel="stylesheet" href="css/orbit.css">

Finally, let’s dig into the mark-up.

<div id="featured">
   <img src="overflow.jpg" alt="Overflow: Hidden No More" />
   <img src="captions.jpg"  alt="HTML Captions" />
   <img src="features.jpg" alt="and more features" />
</div>

Just a couple of notes before moving on:

1. Orbit will dynamically determine the height and width of your set of images and scale accordingly, but make sure that all of your images are the same size or else the larger ones will peek out at the sides.
2. You’ll notice that the id of the parent div is featured, but it doesn’t have to be. When you call the Orbit plug-in, you can set your own selector, and then the magical orbit class will be applied.

All we need to do now is activate the Orbit plug-in.

<script type="text/javascript">
   $(window).load(function() {
      $('#featured').orbit();
   });
</script>

There you have it: Orbit, implemented and ready to be used with all of the default settings. To see more options, clean up the slider and do more advanced customization, please continue reading.

Neato Options

Of course, you’ll want some other features like HTML captions, bullet navigation (with thumbnails), and using content instead of images. Here’s the low-down on how to get these going.

Here are all of the plug-in parameters and their default states. The options are commented out to the right. Go nuts!

$('#featured').orbit({
  animation: 'fade',               // fade, horizontal-slide, vertical-slide, horizontal-push
  animationSpeed: 800,             // how fast animations are
  timer: true,                     // true or false to have the timer
  advanceSpeed: 4000,              // if timer is enabled, time between transitions
  pauseOnHover: false,             // if you hover pauses the slider
  startClockOnMouseOut: false,     // if clock should start on MouseOut
  startClockOnMouseOutAfter: 1000, // how long after MouseOut should the timer start again
  directionalNav: true,            // manual advancing directional navs
  captions: true,                  // do you want captions?
  captionAnimation: 'fade',        // fade, slideOpen, none
  captionAnimationSpeed: 800,      // if so how quickly should they animate in
  bullets: false,                  // true or false to activate the bullet navigation
  bulletThumbs: false,             // thumbnails for the bullets
  bulletThumbLocation: '',         // location from this file where thumbs will be
  afterSlideChange: function(){}   // empty function
});

Full HTML Captions

Orbit has full HTML captions, so you can add styles, links, lists or whatever else your coding heart desires.

1. Add a span with the class orbit-caption and an ID of your choosing after the slider div. Put whatever HTML you’d like to appear in the caption inside. They’re block level, so anything goes.
2. Add the span ID you chose to the data-caption attribute of the corresponding image tag.

Check it out:

<div id="featured">
   <img src="overflow.jpg" alt="Overflow: Hidden No More" />
   <img src="captions.jpg"  alt="HTML Captions" data-caption="#htmlCaption" />
   <img src="features.jpg" alt="and more features" />
</div>
<!-- Captions for Orbit -->
<span class="orbit-caption" id="htmlCaption">I'm a badass caption</span>

Want to animate those captions? Just change the captionAnimation parameter (fade, slideOpen, none).

Bullet Navigation

Getting a new bullet navigation is as easy as passing a parameter when you call the Orbit function. The bullet navigation is natively an unordered list, but in the example and in the kit we’ve replaced them with nice little round bullets. (Changing this is a just a matter of changing the CSS to whatever you’d like.)

<script type="text/javascript">
   $(window).load(function() {
      $('#featured').orbit({
         bullets: true
      });
   });
</script>

Orbit can now pull thumbnails for your bullet navigation! First, create your thumbnail and save it somewhere in your file directory. Below is the HTML, CSS and JavaScript to make it work:

<!-- THE MARKUP -->

<div id="featured">
   <img src="overflow.jpg" alt="Overflow: Hidden No More" />
   <img src="captions.jpg"  alt="HTML Captions" data-thumb="captions-thumb.jpg"/>
   <img src="features.jpg" alt="and more features" />
</div>

// The JS
<script type="text/javascript">
$(window).load(function() {
   $('#featured').orbit({
      'bullets' : true,
      'bulletThumbs': true,
      'bulletThumbLocation': 'orbit/'
   });
});
</script>

/* The CSS: Just provide a width and height for the thumb.
All bullet navigation thumbs will have a class added "has-thumb"
*/

.orbit-bullets li.has-thumb {
   width: 100px;
   height: 75px; }

Using Text

Orbit is text-compatible, too. It can be mixed with images, but just make sure your text is in a div tag and has a background of some type (otherwise the images behind it will be visible). To make the text look nice, give it a background (so that other images in Orbit don’t bleed behind it). Just drop it right into the mark-up, this way:

<div id="featured">
   <div class="content" style="">
      <h1>Orbit does content now.</h1>
      <h3>Highlight me: I'm text.</h3>
   </div>
   <img src="overflow.jpg" alt="Overflow: Hidden No More" />
   <img src="captions.jpg"  alt="HTML Captions" />
   <img src="features.jpg" alt="and more features" />
</div>

Using only text? Orbit relies on image sizes to get its dimensions. However, you can just go into the Orbit CSS and find the .orbit div declaration and set it to the exact pixel width and height you want.

Making Orbit Shine

Orbit looks fairly reasonable out of the box (so to speak), but getting a real polish requires a couple more bits of work: in particular, getting a load before images pop in, and adding fixes for some less fortunate browsers (i.e. IE).

Glorious, Seamless Loading State

For those in pursuit of the ultimate polish, we’ve made it easy to create a simple loading state for your slider. Add the following declaration anywhere in the CSS (just replace featured with your slider’s ID, and use your own images’ widths and heights):

   #featured {
      width: 940px;
      height: 450px;
      background: #000 url('orbit/loading.gif') no-repeat center center; overflow: hidden; }
   #featured img,
   #featured div { display: none; }

Apply the CSS to your unique slider ID, because the plug-in won’t know the ID until after it loads. Adding this CSS will prevent any unstyled content from flashing before the plug-in finishes loading. These styles are in the demo CSS in the kit.

Non-Relative Positioning

The way Orbit works is that your container gets wrapped by another container. This means that if you are positioning your slider absolute or want to center it with margin: 0 auto, applying these to your slider’s ID (#featured in this example) won’t work. The best way to solve this is to put all positioning pieces on your ID and div.orbit-wrapper.

#featured, div.orbit-wrapper {
   position: absolute;
   top: 50px;
   left: 50px;
}

Note: You could also just position the parent container of the Orbit slider if there is one.

As we all know, IE is not a designer or developer’s best friend, but we’ll try to make it easy on you. As of version 1.1, Orbit works in IE7+, but because CSS3 transforms and RGBa aren’t available, we have to perform some magic to fix the timer and caption default background. The easiest way to fix these issues is to hide the timer and to use Microsoft’s proprietary alpha solution. You can use the following conditional declaration in the header of your document.

<!--[if IE]>
   <style type="text/css">
      .timer { display: none !important; }
      div.caption { background:transparent;
      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);
      zoom: 1; }
   </style>
<![endif]-->

Reveal: jQuery Modals Made Easy

You can create beautiful modal windows on your page with our jQuery Reveal plug-in. Modal windows allow developers to make critical information stand out. Setting up Reveal modals takes only three easy steps. Attach the needed files, drop in the modal mark-up, then add an attribute to your button.

We created Reveal because we couldn’t find a simple solid solution. We often used and reused our own scripts to create modals because existing plug-ins were too heavy (they allowed for Flash integration and a hundred other things), and they didn’t use basic CSS to create flexible, reusable code. We think we’ve solved both of these issues with Reveal.

Reveal is useful because it’s easy to implement, compatible with modern browsers (with some graceful degradation, of course) and lightweight (coming in at only 1.75 KB). What this means for you is that it’s fast, sexy and just works.

Let’s see how you can get Reveal working!

Step 1: Attach the Required Files

/* Attach the Reveal CSS */
<link rel="stylesheet" href="reveal.css">

/* jQuery needs to be attached */
<script src="jquery.min.js" type="text/javascript"></script>

/* Then just attach the Reveal plug-in */
<script src="jquery.reveal.js" type="text/javascript"></script>

Clearly, you need the Reveal kit (.zip) to do this, so please download it first.

Step 2: The Modal Mark-Up

<div id="myModal" class="reveal-modal">
   <h1>Modal Title</h1>
   <p>Any content could go in here.</p>
   <a class="close-reveal-modal">&#215;</a>
</div>

Just give your modal div the class reveal-modal and a unique ID (we’ll use the ID to launch this modal). The anchor with the class close-reveal-modal provides a button to close the modal (although by default, clicking the faded black background will also close the modal). Placing the mark-up just before the closing body tag is usually best.

Step 3: Attach Your Handler

<a href="#" data-reveal-id="myModal">Click Me For A Modal</a>

By putting the data-reveal-id attribute on the anchor, the plug-in, when clicked, matches the value of the data-reveal-id attribute (in this case, myModal) with an HTML element with that ID. Basically, put the data-reveal-id attribute on an object, and make its value the ID of your modal.

While the data-reveal-id is a great way to make firing a modal easy, it will often need to be fired programatically. That’s easy enough, too:

/* Programmatic Launching Of Reveal */

<script type="text/javascript">
$(document).ready(function() {
   $('#myButton').click(function(e) {
      e.preventDefault();
      $('#myModal').reveal();
   });
});
</script>

Options

Good plug-ins have options, and this one has just a few, but important ones:

$('#myModal').reveal({
   animation: 'fadeAndPop',                 // fade, fadeAndPop, none
   animationspeed: 300,                     // how fast animations are
   closeonbackgroundclick: true,            // if you click background will modal close?
   dismissmodalclass: 'close-reveal-modal'  // the class of a button or element that will close an open modal
});

If you are wondering how to use the options when you’re using the data-reveal-id implementation, it’s easy: just take the option and add the data- before it, and pass a valid value. Here it is with the default values:

<a href="#" data-reveal-id="myModal"
data-animation="fadeAndPop" data-animationspeed="300"
data-closeonbackgroundclick="true" data-dismissmodalclass="close-reveal-modal"
>Click for a modal</a>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="jquery-1.4.3.min.js"></script>')</script>
<script src="jquery.raptorize.1.0.js"></script>
<script type="text/javascript">
   $(window).load(function() {
      $('.myButton').raptorize();
   });
</script>

//The options for this plug-in
<script type="text/javascript">
   $(window).load(function() {
      $('.button').raptorize({
         'enterOn' : 'click', //timer, konami-code, click
         'delayTime' : 5000 //time before raptor attacks on timer mode
   });
});
</script>

© ZURB for Smashing Magazine, 2011.

Since the beginning of time, people have exploited the human desire to sin so that they could achieve their goals. Finding out what causes people to sin helps us understand the triggers which prompt people to take an action. The Web has made it even easier to exploit these tendencies to sin, in order to build user engagement and excitement about your service or product. In this article we’ll show examples of how successful companies exploit the tendency to conduct all the famous Seven Deadly Sins, and in turn generate momentum with their website visitors. Ready? Let’s roll.

Sin #1: Pride

Pride is defined as having an excessively high opinion of oneself. You must remember someone from your school days who had an extremely high sense of their personal appearance or abilities. That’s pride at work. On the Web, this sin will help you sell your product. Every website visitor wants to be associated with a successful service that other people might find impressive.

People want to say: “Yes, Fortune 500 companies use this tool and I use it as well,� or “Yes, I got on the homepage of Dribbble in front of thousands of other designers; that’s the type of work I do.� In all these examples, people are proud of their achievements and the website helps them show their pride. Here are examples of this first sin in action:

Showing off your customers. People want to use tools that big brands use. SEOmoz does a great job of fronting up the logos of famous companies that pay for their tools, with a simple call to action prompting you to be as successful as these top brands. This entices users to try this tool: “I want to use something big brands use.”

Full Interactive View | Summary view

Fronting up the top users. People want to be considered the best. You are proud to be nominated or picked to be the best. You brag about it to your friends. You mention your accomplishments to your significant other. You want to to be picked as the best one, over thousands of others. Dribbble fronts up top designs on their homepage. This forces people to use their website more and more, to get to the top. A little pride on your site just might get many more customers to use your service.

Full Interactive View | Summary view

Sin #2: Gluttony

Most people think of gluttony in terms of eating. However, the more generic definition of this sin is over-consuming something to the point that it is wasted. It’s a desire to consume more than you can possibly consume. On the Web, companies use this sin to seduce the user into signing up by promising an endless supply of goods.

How many times have you seen “Unlimited� as one of the motivators to get you to buy a tool or service? We are a consumer generation. We want more and more awesome functionality and coolness for our money. The more a website promises us for our money, the more likely you are to sign up. Here are examples of this sin in action:

Full Interactive View | Summary view

The unlimited gluttony of features for a cheap price drives people to sign up for a product or service. If you want to attract user’s attention, create a valuable offer and provide unlimited resources for customers to use or collect.

Full Interactive View | Summary view

Sin #3: Sloth

In the modern view, “sloth” means laziness and indifference. Let’s face it, some of us are extremely lazy by nature. If we don’t have to do something, we’d rather not do it. On the Web, this sin is seen as making tasks overly simple and easy for potential customers. Products and services which “do all the hard work for youâ€� win customers over. Here are some examples of this technique in action:

Making posting a blog post ridiculously easy from anywhere. Posterous is another example of sloth. Don’t want to invest too much time in a blog post? Want to just email or text message your blog post to post it? Solved. Now you don’t have to worry about the formatting, the look and feel, or any other details. You just email the text for your blogs and Posterous takes care of all the details.

Making finances ridiculously easy. Mint is a great example of sloth. Who really wants to spend their time looking for the best interest rates for their savings accounts? Who wants to track their spending? All I have to do is give Mint my financial details and it will tell me where I’m overspending, and also look through thousands of banks to give me the best deals. The tagline reads: “We download and categorize your balances and transactions automatically every day—making it effortless to see graphs of your spending, income, balances, and net worth.� I could do all this on my own, but I’m lazy, and I want someone else to do this for me.

Sin #4: Envy

Envy is when you want something others have. You’re so envious of people that have a status or possession you want, that you’re willing to do what ever it takes to get. On the Web you see this in envy for reward points, followers, friends, and private invites. Here are examples of this in action:

Achieving a status. Mayorship in Foursquare is a great example of this. Ever hear something like this from someone you know: “Who has the mayorship of the Starbucks I go to? Oh, he has only 35 check-ins. I’ll totally beat him next week.â€� People want that “mayor” status. They’re envious of the person that has it. This drives people to use Foursquare more and more to achieve that status.

Full Interactive View | Summary view

Rockmelt is a web browser that can be downloaded only per invite. The developers portray the browser as “your browser, re-imagined.â€� They ask folks who want to join, to connect via Facebook and request an invite. Once you’ve done it, your friends on Facebook who already use Rockmelt can see that you asked for an invite and send you one through the browser’s interface.

You might also check up on whether existing members share invite codes on Twitter. This exclusivity creates envy in people who don’t have invites. This envy fuels their desire to constantly seek an invite to Rockmelt, all the time. Once you actually become a user of the tool, you feel like you’re part of an exclusive club and are strongly encouraged to engage with the tool.

Give people something to envy on your website, and you’ll see more loyal users engaging with your service or product.

Sin #5: Lust

Lust is usually thought of as excessive sexual desire. On the Web, this sin translates into our desire to buy sexy, shiny things which not all of us can afford. Websites use interactivity with large, bold, rotating images to seduce us into buying the gadget. Here is an example of lust in action:

Providing the ability to play around and view the product. In web design, lust is often triggered by professional product photography which appears shining, attractive and exclusive in its own right. Rolex’s website is an example of this. The sliding gallery encourages the site visitors to explore the site which is not just a showcase of Rolex’s products, but rather an exhibition of company’s image, style, philosophy and branding.

Rolex tells the story about the quality of its products, their precision and aesthetic appeal. Notice how the designers provide animations and various views for each product, making it more interesting and desireable.

Volkswagen does a good job of seducing people into buying their cars. Its interactive website lets you customize and build your own version of the car you’re interested in. It is even possible to paint the car in whichever color you like. The process of pimping your car in the way you want, makes you lust over the car you’ve just “created.” In this example, our lust for shiny things is exploited. The more we interact with the Volkswagen website, the more we want to buy their product.

Full Interactive View | Summary view

Sin #6: Greed

Greed is an overly excessive pursuit of status, power and wealth. It’s the desire to have more than you need or deserve. The pursuit is so strong that one would go through any means necessary to fulfill it. On the Web, this sin is seen in the desire to gain influence, followers and power.

Being hungry for more Twitter followers. Twitter is the perfect example of a website where all of us are hungry for more followers. The famous wars of Ashton Kutcher, Oprah, CNN and Britney Spears for more followers, shows us how greed gets the best of us. The more followers we have, the more influence we have over people. All of us are greedy for these followers.

Getting power through more Digg followers. The original model behind Digg was very simple: you “digg” a specific piece of news, or a website. Your friends see this, and “digg” this same article, moving it to the top. The top articles on the Digg homepage get millions of people checking them out. The more friends you have, the easier it is for you to move any news to the top. A person who has 500,000 friends can move a story to the top of Digg in minutes, as opposed to someone who is just starting out. People at the top have much more power over everyone else. The greed for friends on Digg is what keeps us hungry for more.

In these examples above, we are hungry to gain influence and power and want to engage with the  service to fulfill our goal.

Sin #7: Wrath

Last but not least, wrath is defined as uncontrolled feelings of rage, anger and hatred. On the Web, this sin is used by companies to generate gossip and buzz around their product or service.

Encouraging criticism. Amazon is a perfect example of using wrath to create controversy and more engagement with the product. The website fronts up the most helpful critical review, right beside the most helpful, favorable review. This prompts the shoppers to respond to these reviews and to add their own reviews, as they try the product out.

Full Interactive View | Summary view

Catering to frustration. The Consumerist is a perfect example of using consumer frustration to generate content and activity on a website. Giving angry shoppers the ability to vent and to express their frustrations, generates tremendously long discussions and activity on the website. The concept of consumer anger is rooted deep in the Consumerist tagline:

Furthermore, as you use the website and vent your anger about products, you get even more worked up about banners such as these (found on the Consumerist website):

Conclusion

You can now see in what way the results sinning on the Web generate for your business. Keep in mind that when companies try to get their customers to sin too hard, it’s usually very apparent and often results in drawing potential customers away. It’s important to maintain a good balance between sin and common sense. Next time you’re creating a website for a product or service, think back to these examples of the Seven Deadly Sins in action and see how you can use them to your advantage. Now go out there and get your customers to sin. What are you waiting for?

(ik)(vf)

© ZURB for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: customers, envy, gluttony, greed, lust, pride, seven deadly sins, sloth, visitors, wrath