Responsive design is the hottest topic in front-end Web development right now. It’s going to transform the Web into an all-singing, all-dancing, all-devices party, where we can access any information located anywhere in the world. But does responsive design translate well from the text-heavy Web design blogosphere to the cold hard reality of commercial systems?

Rumors came through our office grapevine that management was looking to revamp our mobile presence. There was talk of multiple apps being built externally that could be used on some of the major mobile devices. Our team had been getting familiar with responsive design and put forward a proposal of doing away with device-specific apps and developing a single responsive website that could be served to both desktop and mobile users. After a few hasty demos and prototypes, the idea was accepted and we began work.

The brief: make our current website, Airport-Hotels.uk, responsive while retaining the existing layout for users on browsers of 1000 pixels and up.

The following is what we picked up along the way.

Starting With Desktop Is OK

The general consensus now seems to be “mobile first.” I agree. Starting with a single(ish)-column mobile website is the easiest way to get your CSS off to a great start. However, we use an external design agency, so the time and cost of a new mobile-first design was not feasible. It was left to the front-end developer to translate the existing design onto screens of smaller dimensions.

The solution was to break up the website into smaller blocks (or nuggets), which could then be positioned differently as the browser’s width increased. This led to our first base media query, which contained the main branding elements, with minimal layout information. Because the nuggets were of a fairly fixed size, we had a foundation for creating a grid for each of our major media queries. Anything that wasn’t deemed to be a “nugget,” such as a larger block of text, would be responsive and fill in the gaps that the nuggets couldn’t.

While this method is not as good a practice as “mobile first,” it does have the advantage of being faster and cheaper than a full redesign. And you pick up great knowledge along the way for when resources do become available for something more substantial.

Less Is More

When getting your feet wet with media queries, you’re tempted to go all out, but do you need to? Theoretically, you could serve a completely different design to each device. While this would be spectacular and self-satisfying, maintaining it would be a nightmare. We ended up using the default media queries in Andy Clarke’s 320 and Up framework, containing four breakpoints (1382 pixels was not in the brief). Looking back now, we could have removed at least one of those queries, possibly two.

We’ve been gathering statistics in the weeks since the website’s release, and by far the majority of our customers are running browsers either of 320 × 480 pixels or on full desktops. We could hit over 85% of our user base by focusing on these resolutions, while cutting down on development time and maintenance.

This was especially evident on our availability page, which easily contains the most information of any of the pages in our booking flow. In the end, rather than try to serve the perfect design to each device width, we moved much of the CSS for the largest media query to the size below: less maintenance, less fuss, and more time to work on the UX (and, importantly to the business, to make bookings).

Ability Sniffing Is Not Enough

When I first saw tools like Modernizr, I thought they would change everything. I suppose they have, but don’t rely on them too much. Mobile browsers have more inconsistencies than any desktop I have ever seen. Even WebKit-based browsers can render things completely differently. With debugging tools at a minimum, it’s like we’ve been thrust back into the pre-developer toolbar era of IE bug fixing. Luckily, that’s one of my favorite things.

Exploring this strange new world of bugs became one of the major aspects of the project. A few of my favorites are highlighted below. Hopefully, they won’t trip you up.

CSS Columns

I love CSS columns. I had been wanting to use them for a while; but, other than small personal projects, nothing with appropriate content came up. While trying to work out the best layout for our website on a 320-pixel device, I realized that, rather than generating columns using floats or inline blocks, we could reduce the layout CSS to just a few lines by creating CSS columns. With most major mobile Web browsers being based on WebKit and Opera, this seemed to be a fairly reasonable solution and appeared to lay out everything perfectly. Great!

Here is the original code for the 320-pixel media query:

.product {
    -moz-column-count: 2;
    -moz-column-gap: 5px;
    -webkit-column-count: 2;
    -webkit-column-gap: 5px;
    column-count: 2;
    column-gap: 5px;
}

And here is the updated solution (roughly speaking — the actual code was much longer):

.product>div {
    width: 49%;
    float: left;
    margin: 0.5%;
}

Unfortunately, the column specification isn’t quite ready yet. On BlackBerrys and some HTC Android phones, our form elements (specifically, the buttons) became unclickable. The layout was perfect — we checked that the CSS was accepted with Modernizr, and all the links worked — and yet you couldn’t click the “Book” button. Back to the drawing board with that one.

We ended up using a more standard float-based column layout.

CSS Gradients

Gradients were another excellent instance of browser idiosyncrasies. We used a lot of CSS gradients in this redevelopment to replace some images. This should have saved the user’s bandwidth and made redesigns and maintenance faster.

On WebOS (with a WebKit-based browser), though, CSS gradients would render as completely black unless used on a form input element. It was baffling. In the end, we figured out that it was a bug in the implementation of -webkit-linear-gradient. We’ve learned that the bug has been fixed in the upcoming version, so this might not be an issue in the future.

Here is the offending CSS:

.ppcHeader {
    background: #73bff1; /* Old browsers */
    background: -moz-linear-gradient(left, #73bff1 0%, #009ff7 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#73bff1), color-stop(100%,#009ff7)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, #73bff1 0%,#009ff7 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, #73bff1 0%,#009ff7 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(left, #73bff1 0%,#009ff7 100%); /* IE10+ */
    background: linear-gradient(left, #73bff1 0%,#009ff7 100%); /* W3C */
    margin-bottom: 20px;
}

(Bear in mind that CSS gradients add a heavy load to the browser’s rendering engine, so if you are using a lot of them, switching them off for mobile might be wise.)

JavaScript on BlackBerry 5.0 and Opera Mini

Basically, JavaScript does not work on Blackberry 5.0. BlackBerry tries, but it’s so inconsistent and buggy that it’s not worth it. We were reliably advised by Peter-Paul Kochs to just resort to device sniffing and to turn off any JavaScript. This is another reason to make sure your websites are progressively enhanced by falling back to non-JavaScript versions.

Meanwhile, Opera Mini works fine with JavaScript, but each of a website’s pages is rendered on Opera’s servers and then essentially compressed into a big image before being sent to the mobile device. This is great for the user because it can reduce bandwidth to 10% of the normal browsing experience. On the other hand, if you have onkeyup validation in your forms, this can be a problem because each call to the JavaScript would require refreshing the entire page from the server.

Forms Drop Users

This was and still is one of the major problems with mobile browsing on our e-commerce website. In order to make a purchase on an average website, the user has to fill in a lot of information: names, addresses, credit-card details, the list goes on and on. While typing on mobile has gotten much easier, navigating large forms is a frustrating and laborious process.

Our mockup payment page had 22 form inputs that needed some kind of interaction. These were required either to make a successful booking, to provide information to the product supplier after booking or for our own sales and data purposes.

The question became (as it always seems to be with mobile), what could we remove and what did we have to keep? Well, we tried to take the middle path, which is currently in development or might even be live by the time you read this.

We chose to split our payment process into two stages. Because our users can save more on their purchase by booking early, our first payment stage asks for the very minimum of information required in order to confirm a booking: name, car registration and credit-card details. This gives the user the best price available and chalks up another booking for us. Part two of the payment process is to gather the rest of the information required to “complete” the booking. This second stage can be filled out at the user’s convenience, either immediately or later on using our online booking management system. This eases any frustration caused by having to fill out a large form.

Good UI != Good UI

A good user interface means something completely different on mobile devices — and even tablets for that matter. Many of the user-friendly features we have implemented on our desktop website would just be bad ideas on these smaller mouse-less devices.

Lightboxes

Lightboxes were all the rage a few years ago. They were a convenient and pretty way to display a small amount of content or something that wasn’t worth loading a new page for. In IE 7 and up, you can position lightboxes using position: fixed, which is great. On mobile devices, though, browsers do not implement position: fixed, or they implement it in an odd way to prevent non-mobile-ready websites from not working at all. This will ruin any lightboxes.

We recommend just loading a new page for lightbox content: less JavaScript, easier and fast. A new tab would also be fine, but due to the infancy of tabbed browsing on mobile devices, maintaining the flow is probably a better idea for now.

Hovers

Content that is only visible via hovering obviously doesn’t work on touchscreens. What used to be an easy way to hide content while keeping it accessible has become a bit of a nightmare to deal with. We tried just removing the hover and showing the content, to see what would happen. The iPhone actually handles hovers fairly well, translating them into tap events. On Android, you need to click and hold for a little while to prevent the default action of clicking the link (our links are anchor-tag-based).

In the end, modifying the code that handles the hovers (assuming it’s JavaScript) and adding a tap event seemed to be the best solution. This allowed us to preserve the design’s aesthetic, while keeping as much functionality as possible for mobile users.

if( document.createTouch ) {
    this.addEvent(c[j],'tap',this.tipOver,false);
} else {
    this.addEvent(c[j],'mouseover',this.tipOver,false);
    this.addEvent(c[j],'mouseout',this.tipOut,false);
}

Date Picker

Our date-picker calendar was one of the biggest hurdles to overcome in the UI. We have a text input that allows the user to enter a date. Prior to the date-picker, our solution was a dynamically generated select box, but that caused confusion among many users because they might have remembered the day of the week they were flying on but not the date. So, we added the jQuery UI Datepicker to make filling in the search form one step easier.

However, what was one step forward for convenience on the desktop was one step back on mobile. Focusing the text input would open both the date picker and the phone’s keyboard, thus obscuring the date picker.

Our next option was to use the HTML5 date input. Because this element was released so recently, browsers are still playing catch up, and implementations vary wildly. It’s just as rough on desktop, with Firefox still rendering it as a text input, Chrome adds an up/down selector and forces the date format, while Opera actually renders a calendar just like the jQuery UI Datepicker. This solution still requires the date-picker JavaScript, but it forces the format, which can actually make it less user-friendly. While the concept is great and the solution will be great once the bugs are ironed out, we found that the date type input is not yet ready for commercial use in this fashion.

Our eventual solution (not yet live) was to use a JavaScript “touch event” query to generate a more mobile-friendly date picker than the standard jQuery UI one. This creates an iOS-styled triple drop-down menu for day, month and year and is user-friendly on mobile devices. The no-JavaScript backup can be either a text input or a select drop-down menu. Have a look at the code for yourself.

Fix IE First

The final point, which reflects the complexity of mobile development, is how to fit old versions of IE into this new technology. IE 8 and below ignores media queries, which presents a rather sticky problem when your entire website is based on them. There are several solutions to this, which we’ll explore below.

JavaScript Polyfills

I can think of two great JavaScript polyfill options for media queries. The first is Respond.js, which continually monitors the browser’s width, parses the CSS and then serves the correct styles for that width. This is a great solution if you need the website to respond on IE 8 and below. The main issue is the time between the document loading and the JavaScript kicking in; the website is initially displayed using the base style sheet, usually the mobile view, before it “jumps” to the full desktop version. Obviously, this doesn’t look great on a desktop monitor, and if the user is on an old browser, then their computer and Internet connection will probably be slow, too, which means that the jump time could be even longer.

The other JavaScript option here is the Chrome frame, which achieves the same end and has the same disadvantages. This solution isn’t bad, but just not right for our implementation.

Include All Media Queries

This is one of my favorite options for responsive websites and is also used in the latest version of the 320 and Up boilerplate. Create a separate CSS file for each device width; and for IE, serve them all to the user, with no media queries. With a mobile-first approach and a couple of fixed widths in your IE style sheet, this will serve the full-sized version of the website to users of outdated browsers. This solution is fast, simple and easy to maintain.

A Separate IE Style Sheet Entirely

Finally, given the right conditions, you could just write a completely separate IE style sheet, full of conditional comments to load the full desktop version of the website. Theoretically, this need only contain small amounts of layout information; but given that many of these styles will be reproduced in your media queries for wider widths, it can cause maintenance issues down the line. Duplicating code is never a good idea, which makes me wary of this solution.

Interestingly, we used this solution in the end, but with a twist. We used a PHP plugin in our template files to combine, compress and cache our CSS files. Due to some issues with the cache in IE, we were already generating a separate cached CSS file for IE users. We added a couple of lines to the PHP file to strip out media queries entirely as it combines and compresses the CSS. This method delivers the results of the “include all media queries” solution, while allowing the option for inline media queries in the style sheet. Because of the way we organized the CSS, this turned out to be the best solution for the project.

Conclusion

After all that, we finally have the first version of our responsive booking flow. I like to think that this epitomizes “mobile-ready.” We aren’t necessarily mobile-optimized, but our feet are on the bottom rung of a tall ladder that climbs to a great system that works perfectly on all devices. This is the starting point, if you will.

Was it worth it? It’s been a long journey, with a lot of head scratching and learning on our feet fast, but that’s what Web development is about, and I wouldn’t have it any other way. You can’t be perfect the first time round, and you don’t have to be. The point is that this technology is ready now, and the sooner you start using it, the better prepared you’ll be for the mobile market as it comes running at you. In the next few years, we’re hoping to see JavaScript network APIs that will allow Web users to add purchases directly to their monthly phone bill. I expect the mobile e-commerce market will explode at that point. Will you be ready?

(al) (da) (il)

© Gavyn McKenzie for Smashing Magazine, 2012.

Smashing Magazine Feed

  

Many dismiss copywriting as something that ad agency people do. Truthfully, all of us need to pay close attention to copywriting if we want to achieve our business objectives.

The goal of a “regular” text is to inform or entertain. The goal of Web copy (and ideally your website in general) is to get people to do something—to sign up, make a purchase, or something similar. Hiring a professional copywriter can be very expensive, which is one of the reasons why this is a valuable skill to have yourself.

“I don’t need to learn copywriting, I write based on how it sounds to me.”

Think you don’t need to learn copywriting?

David Ogilvy, the father of modern advertising, addressed this in his book Ogilvy on Advertising. One of his copywriters told him that he had not read any books about advertising; he preferred to rely on his own intuition.

Ogilvy asked him: “Suppose your gallbladder has to be removed this evening. Will you choose a surgeon who has read some books on anatomy and knows where the gallbladder, is or someone who relies on his own intuition?”

What distinguishes top experts from mediocre players is that the best know more. You can write better copy if you know more about it.

The Process Of Writing Great Copy

Everything is easier with the right process. If your approach to copywriting is “I’ll just try to be convincing”, you’re setting yourself up for failure.

You don’t even need to be a “natural writer” to come up with excellent copy, you just need the right process and some key principles about writing copy that sells.

The best processes are simple, as those are the ones you actually use.

Here are the six steps of effective copywriting process:

1. Research: customer, product and competition.
2. Outline and guideposts.
3. Draft copy.
4. Conversion boost.
5. Revise, rearrange.
6. Test.

And now let’s get to the details:

1. Research

This is often the most time-intensive part of your copywriting.

“You don’t stand a tinker’s chance of producing successful advertising unless you start doing your homework. I have always found this extremely tedious, but there is no way around it.”
— David Ogilvy

David Ogilvy had the task to do copywriting for a Rolls Royce ad. He spent three weeks reading about it before he came up with the headline and the rest of the copy. While he was talking about advertising, it equally applies to your website copy—the goal is to get people to do something.

Ogilvy’s famous Rolls Royce ad.

You need to figure out why people buy the product, how they buy it, what they use it for, and what really matters to them. If you don’t have this figured out, you really cannot write a copy that works. When it’s your own business that you’re writing copy for, things go much faster, of course, as you know the product and the competition.

Gauge the Competition

You need to be aware of your direct competition, how they present their product, and what claims they seem to be making. If you are not selling something unique, you are selling as much for your competition as you are selling for yourself. Being “like” others or choosing to be “one of the leading providers of” is a losing strategy.

Neuromarketing research tells us that differentiating our claims is the key to talking to the old brain, the decision making part of our brain. Our whole business identity should be different from the competition, and the claims we’re making about our product should stand out.

Get Out of the Office

The answers are not in your office and you won’t have eureka-moments at brainstorming meetings (working solo is far more effective anyway). You have to interview people. Don’t waste time interviewing random people, you need to talk to your ideal customers and find out what’s on their minds.

Find out what they think about your kind of product, what language they use when they talk about it, what attributes are important to them, and what promises would most likely convince them to buy it. Pick the last 10 to 20 customers (who still remember their purchasing experiences), and ask them these questions (recording the interviews is a good idea, but ask for permission):

• Who are you? What do you do? (customer profile)
• What does our product help you do? (helps you understand how they use it, tells you words they use to describe our product)
• Which parameters did you compare on different options? (which features matter)
• What were the most important ones? (key pains to solve)
• Which alternatives did you consider? (competitors we have to look at)
• What made you choose our product? (our key advantage)
• What were the biggest hesitations and doubts before the purchase? (things we have to address in the copy)
• Were there questions you needed answers to, but couldn’t find any? (necessary information to provide)
• What information would have helped you make the decision faster? (same as above)
• In which words would you recommend it to somebody you know? (words they use to describe our product)

Take note of the exact wording they use. Your copy needs to match the conversation in your customer’s mind. If you talk about “scribing devices” and he needs a pen, there’s a mismatch.

My point is that when customers see the product described in words they have in their mind already, then you’ve got their attention.

2. Outline And Guideposts

Next step: write the outline. Guideposts are the markers that help you write the content.

Writing an outline usually only takes a few minutes and provides a road map for the rest of the project. It allows you to complete the work faster and ensures that you stick to the flow.

The outline structure will depend on the page you’re writing the copy for. The main pages you need a well thought-out copy in place are your home page and product pages.

Here are outline templates I personally use, and you can copy them. I’ve tweaked and tested them over the years, and this model works the best for me.

Home Page Copy

Your home page copy structure depends a lot on your business. A nail salon would have a different approach from an e-commerce store; a website selling mobile app design courses is different from a hosting company. Hence, it’s basically impossible for me to give you an outline template for your home page.

What IS universal is the value proposition. Every home page needs one (unless you’re a very well-known brand)

A value proposition is a promise of value to be delivered. It’s the primary reason a prospect should buy from you. The value proposition is usually a block of text with a visual.

There is no one right way to go about it, but I suggest you start with the following formula:

• Headline:
  What is the end-benefit you’re offering, in one short sentence. Can mention the product and/or the customer. Attention grabber.
• Sub-headline or a two-to-three sentence paragraph:
  A specific explanation of what you do/offer, for whom, and why is it useful.
• Bullet points:
  List the key benefits or features.

Here’s a list of useful value proposition examples you can check out.

Product Page Copy Outline

Product page is where you sell the value of your product and where the user takes action (adds to cart, sign up, makes a purchase, etc.).

1. Name of the product.
2. Value proposition: what’s the end-benefit of this product and who is it for?
3. Specific and clear overview of what the product does and why is that good (features and benefits).
4. What’s the pain that it solves? Description of the problem.
5. List of everything in the product (e.g. curriculum of the course, list of every item in the package, etc.).
6. Technical information: parameters, what do you get and how does it work?
7. Objection handling. Make a list of all possible FUDs (fears, uncertainties, doubts) and address them.
8. Bonuses (what you get on top of the offer).
9. Money-back guarantee (+ return policy).
10. Price.
11. Call to action.
12. Expectation setting: what happens after you buy?

What you now have in place is like a skeleton. Next step would be to start writing the draft version of the copy by filling in the blanks.

3. Draft Copy

Start filling in the blanks in the template above, and keep these points in mind for the style of your writing.

Avoid Jargon and Blandvertising

The goal of the copy is to connect with the reader, and guide them towards an action.

“Human relationships are about communicating. Business jargon should be banished in favor of simple English. Simplicity is a sign of truth and a criterion of beauty. Complexity can be a way of hiding the truth.”
— Helena Rubinstein

Using complicated, fancy words does not make you seem any smarter or your solution any better—it just turns everybody off. Who wants to read something that doesn’t feel like it’s written for them? Talk to people like a real human. If you wouldn’t use a phrase on your website in a conversation with a customer, then don’t use it.

In addition to fancy words, avoid meaningless phrases. What do “on-demand marketing software”, “integrated solutions” or “flexible platform” really mean anyway?

Or useless phrases like “changing the way X is done”, “paradigm shifting …” or “exceeding customer expectations”—stop the nonsense. These bland phrases have long lost any meaning, and you will just waste precious attention time. You can see a list of the top 100 most overused buzzwords and marketing speak in press releases here.

Another thing to avoid—superlatives and hype. Saying things like “the best”, “world leader”, “once-in-a-lifetime opportunity” will just ruin your integrity. People don’t believe such claims anyway (even if they’re true).

What to do instead? Be specific.

Be Specific

Specificity converts.

“Clearer and more specific subject lines convert better.”
— Bob Kemper, Senior Director of Sciences, MECLABS.

While in that specific quote Bob was focused on subject lines, this principle applies equally well to all copywriting. Specific is believable, specific is attractive, specific is convincing. Don’t be vague, be specific.

“We have the best coffee in the world” vs “Our estate earned the ‘world’s best coffee’ title at the Specialty Coffee Association of America’s Roasters Guild for the third year in a row.” Which claim is more believable?

You can use a superlative if you back it up.

Here’s an example. Can you understand what they offer?

Specific headline. Specific call to action with a specific explanation of what they get when they sign up. Specific benefits listed. Specific image to show the product in action.

It Has to Be About Them

Remember the old brain I mentioned before?

Our brains have three layers, and the oldest part—the old brain—is the decision-making part.

The “Old Brain” is the part that humans and their predecessors have had the longest—like 450 million years or so. So the part of the brain that controls decisions is fairly primitive and mostly concerned with survival.

If your copy is about you (your product, your company) and not the prospect (his problems, his life), you will fail. Make it about them. Too many companies start by stating “our company was founded…”, “we offer …” or something especially useless like “welcome to your website”.

Instead of saying “we specialize in dog training”, say “train your dog in two weeks”—move the focus from you to the benefit they will receive. People care about themselves—not you—and whether your website can be helpful in some way.

How Much Information Should I Provide?

Tests have shown that 79% of people don’t read, they just skim. However, 16% read everything.

Those 16% are your main target group, the most interested people. If people are not interested in what you are selling, it doesn’t matter how long or short your sales copy is. If they are interested, you should give them as much information as possible.

Complete information is the best sales copy. A study by IDC showed that 50% of the uncompleted purchases were due to lack of information. They can always skip parts and click the “buy” button once they have the information they need. But if they read through the whole thing and they’re still not convinced, then you have a problem.

This is why you should always strive to say everything that can possibly be said about your product. You cannot be there in person to explain and answer the questions, so your copy needs to do it for you.

All at Once or Make Them Click?

Long form copy works just great, but it’s not necessary to provide all the information on a single page. It’s okay to move supplemental information onto a different page (layer, popup, etc.) and just link to it.

For instance, Amazon often hides full technical information of products behind a link—since it’s only interesting to the hardcore tech savvy customers (and most customers are not).

Full technical details available after clicking a link.

The important thing is that all the information needed to make the decision is on a single page. Don’t make people work click to read stuff that you want them to read anyway (like features, benefits, testimonials, pricing, etc.).

When, Where and If at All Should I Show the Price?

Some people think that the price drives readers away, and they should hide it somehow—or make it hard to get to. While there is truth in that sometimes, it’s mostly false.

Consider this:

1. People always want to know how much things cost.
2. If you don’t publish the price, have a “get a quote” form instead. But if your competition does, they may get the client.

You should always make the price easy to find, but for more complex / expensive products communicate the value before the price.

Let’s say you’re selling a copper vase. Price: $ 990.

Seems expensive. But what if you knew that it was designed by Andy Warhol and previously used by Kurt Cobain? If you know who these people are and respect them, this changes everything, and it might seem like a steal instead.

So communicate value before price.

If your price is cheap, you want people to know it. If it’s expensive, the price qualifies the right people who are convinced to buy your copy. Giving price details also convinces your reader of the image and brand value of your product.

4. Conversion Boost

Once you have the content in place, it’s time to give it a conversion boost. The goal of the website copy is to convert the reader into a buyer (or subscriber, lead, etc.). There are certain things we can do to improve the conversion rate (the percentage of readers that take action) of the copy.

We’ll use three guides here to make the copy sell better:

• Conversion frameworks.
• Science of persuasion.
• Neuromarketing research.

Conversion boost. Image credit APM Alex.

Conversion Frameworks and Why They Matter

Conversion frameworks are a structured approach for increasing website conversion rates. The most prominent ones have been fine-tuned over the years and have been proven to boost sales.

While the conversion frameworks apply to a website as a whole, they can also be used as frameworks to improve sales copy.

There are many conversion frameworks around, let’s use one of them as an example:

C = 4m + 3v + 2(i-f) – 2a

This is not a lesson in physics, but a conversion formula developed by Marketing Experiments. Translation:

C = Probability of conversion
m = Motivation of user (when)
v = Clarity of the value proposition (why)
i = Incentive to take action
f = Friction elements of process
a = Anxiety about entering information

Summary: The probability of conversion depends on the match between the offer and visitor motivation + the clarity of the value proposition + (incentives to take action now—friction)—anxiety. The numbers next to each character signify the importance of them.

How to apply this to your copy:

• Is your value proposition easy to understand and perfectly clear? Would everyone understand what you offer and how it’s beneficial to them?
• Go through your copy and see if there’s any way to make your statements clearer.
• Communicate value: don’t just list features, turn them into benefits.
• Make a list of all possible questions, doubts and objections that prospects might have in the buying process. Address them.
• Make the buying or signup process as easy as possible, remove everything that is not absolutely necessary.
• Add microcopy: explain why you need certain data and what happens after they give it to you.
• Provide full information: what happens after they buy, what can they expect, when is the product shipped, what’s the delivery time.
• Add risk reversal: what kind of guarantees are in place? What happens if they don’t like it, or it’s not what they thought, etc?

The Science of Persuasion

Persuasion has been researched thoroughly. Mr. Cialdini is undoubtedly the biggest authority on the field. His books are bestsellers and have been on the “must-read” list for marketers and copywriters for years.

In his research, Cialdini came up with six scientific principles of persuasion that will help guide you to become more effective at getting people to do what you want. In case you’re not familiar with those principles, then here’s the summary:

Principle 1: Reciprocity
People feel obligated to give back to others who have given to them.
How to use it: teach your prospect something useful in your copy, give away free stuff, and better yet—add value to your prospects long before you even start to sell them something.

Principle 2: Liking
We prefer to say “yes” to those we know and like.
How to use it: talk/write like a human, connect with the reader, share details about yourself. Blog. Be friendly and cool (like Richard Branson, Oprah, Gary V).

Principle 3: Social Proof
People decide what’s appropriate for them to do in a situation by examining and following what others are doing.
How to use it: show how many others are already using your product. Show off your numbers. Use testimonials. Link to 3rd-party articles.

Principle 4: Authority
People rely on those with superior knowledge or perspective for guidance on how to respond AND what decisions to make.
How to use it: Demonstrate your expertise. Show off your resume and results. Get celebrity (in your niche) endorsements.

Principle 5: Consistency
Once we make a choice/take a stand, we will encounter personal and interpersonal pressure to behave consistently with that commitment.
How to use it: Start small and move up from there. Sell something small at first (a no-brainer deal), even if you make no money on it. They now see themselves as your customer, and will most likely return to make a larger purchase.

Principle 6: Scarcity
Opportunities appear more valuable when they are less available.
How to use it: Use time or quantity limited bonuses. Limit access to your product. Promote exclusivity.

What Neuromarketing Teaches Us

Research in neuromarketing (put together in this book) reveals interesting things about our brains.

Neuromarketing study in action. Image credit: SMI Eye Tracking.

We’re usually trying to talk to the “new brain”—the sophisticated one—but it’s the brute “old brain” that makes all the decisions, so we need to dumb it down. Here’s the formula for talking to the old brain:

Selling probability = Pain x Claim x Gain x (Old Brain)³

1. First you need to identify the prospect’s pain and make sure they acknowledge the pain before you start to sell them anything. Then, you’ve got to differentiate your claims from your competitors. The strongest claim is the one that eliminates the strongest pain.
2. Next, you have to show convincing proof to back the claims up. The “Old Brain” is resistant to new ideas and concepts, so your proof must be very convincing. Show tangible evidence, data, before & after comparisons, testimonials, and case studies.
3. In order to reach the old brain, you need to start with a “grabber”—something that really gets the attention (“if you’re selling fire extinguishers, start with fire”, like Ogilvy said). Second—the “Old brain” is visual, so use a big picture to illustrate and reinforce your message. Visuals get to the brain much faster than words. Best visuals show contrast—before/after, beginning/end, then/now.

How to apply it to your copy:

• Start with a grabber—something that evokes emotion.
• Address the pain from the get-go.
• Use a big picture next to your value proposition, one that the prospect can identify with.
• Are your claims different from the competition?
• Add proof to your claims in all possible formats.

5. Revise And Rearrange

Done with conversion boosting? Now enjoy a full night of sleep and come back to the copy in the morning.

A fresh look a day later will help you spot inconsistencies, missing information, and flaws in the general flow of the copy. Use this time to add more information, rearrange the order of different blocks and fix the typos (spelling mistakes can cost you customers).

Before you publish the sales copy, it always pays to get two or three other people to read it and give you feedback. You want feedback from your ideal customers—do they get any questions that were left unanswered? Is there any part that needs to be made clearer? And peers—other marketers or entrepreneurs. What could make the offer better and more credible?

Once the editing is complete, you can make it live on your website. Don’t guess whether the headline or value propositions are as good as they can be, immediately launch two versions of the copy and test them.

6. Test

There is no good way to predict how well the copy will do. Sometimes the conversion rates can skyrocket overnight. Sometimes the new copy turns out to be a downright dud.

You need to test your copy. Image credit Horia Varlan.

Maybe it’s because the offer is weak. Perhaps the headline is the bottleneck. It’s impossible to put the finger on the problem as all you have are hypothesis. The only way to know is to test.

Don’t trust a copywriter who says he always writes killer copy on his first try. Nobody does.

Most common problems:

• Your value proposition is poor.
• The offer doesn’t match the audience’s needs.
• The headline is weak.
• It’s not clear how the visitor benefits from this.

Start with A/B testing value propositions, and go from there.

Conclusion

Writing great copy is a skill you have to learn just like anything else. Use the outline and the tips to get started on the right track. Stephen King, the famous writer, said that if you want to be a writer, you must do two things above all others: read a lot and write a lot. I believe the same goes for writing great copy.

The best Web copy is not the one that uses sophisticated persuasion and mind manipulation techniques. The best copy provides full information about the product, its benefits, and makes it clear whether it’s the right one for the user.

(jvb) (il)

© Peep Laja for Smashing Magazine, 2012.

Smashing Magazine Feed

  

In my nearly two decades as an information architect, I’ve seen my clients flush away millions upon millions of dollars on worthless, pointless, “fix it once and for all” website redesigns. All types of organizations are guilty: large government agencies, Fortune 500s, not-for-profits and (especially) institutions of higher education.

Worst of all, these offending organizations are prone to repeating the redesign process every few years like spendthrift amnesiacs. Remember what Einstein said about insanity? (It’s this, if you don’t know.) It’s as if they enjoy the sensation of failing spectacularly, publicly and expensively. Sadly, redesigns rarely solve actual problems faced by end users.

I’m frustrated because it really doesn’t have to be this way. Let’s look at why redesigns happen, and some straightforward and inexpensive ways we might avoid them.

The Diagnostic Void

Your users complain about your website’s confounding navigation, stale content, poor usability and other user experience failures. You bring up their gripes with the website’s owners. They listen and decide to take action. Their hearts are in the right place. But the wheels quickly come off.

Most website owners don’t know how to diagnose the problems of a large complex website. It’s just not something they were ever taught to do. So, they’re put in the unfortunate, uncomfortable position of operating like country doctors who’ve suddenly been tasked to save their patients from a virulent new pandemic. It is their responsibility, but they’re simply unprepared.

Sadly, many website owners fill this diagnostic void — or, more typically, allow it to be filled — with whatever solution sounds best. Naturally, many less-than-ethical vendors are glad to dress up their offerings as solutions to anyone with a problem — and a budget. The tools themselves (search engines, CMS’, social apps) are wonderful, but they’re still just tools — very expensive ones, at that — and not solutions to the very specific problems that an organization faces. Without proper diagnostics to guide the configuration of tools, any resulting improvements to the user experience will be almost accidental.

Sometimes design agencies are brought in to fill the diagnostic void. And while not all agencies are evil, a great many follow a business model that depends on getting their teams to bill as many hours as they can and as soon as possible. Diagnostics can slow the work down (which is why clients rarely include a diagnostic phase in their RFPs). So, many agencies move to make a quick, tangible impression (and make their clients happy) by delivering redesigns that are mostly cosmetic.

A pretty face can last only a few years, but by then the agency is long gone. Invariably, the new owner wishes to make their mark by freshening or updating the website’s look. And another agency will be more than happy to oblige. Repeat ad nauseam, and then some.

Oh, and sometimes these redesigns can be pricey. Like $ 18 million pricey.

See why I’m so grouchy?

Forget the Long Tail: The Short Head Is Where It’s At

Whether you’re a designer, researcher or website owner, I’ve got some good news for you: diagnostics aren’t necessarily difficult or expensive. Better yet, you’ll often find that addressing the problems you’ve diagnosed isn’t that hard.

And the best news? Small simple fixes can accomplish far more than expensive redesigns. The reason? People just care about some stuff more than they care about other stuff. A lot more. Check this out and you’ll see:

This hockey-stick-shaped curve is called a Zipf curve. (It comes from linguistics: Zipf was a linguist who liked to count words… but don’t worry about that.) Here it is in dragon form, displaying the frequency of search queries on a website. The most frequently searched queries (starting on the left) are very, very frequent. They make up the “short head.” As you move to the right (to the esoteric one-off queries in the “long tail”), query frequency drops off. A lot. And it’s a really long tail.

This is absolutely the most important thing in the universe. So, to make sure it’s absolutely clear, let’s make the same point using text:

In this case, tens of thousands of unique queries are being searched for on this university website, but the first one accounts for 1.4% of all search traffic. That’s massive, considering that it’s just one query out of tens of thousands. How many short-head queries would it take to get to 10% of all search traffic? Only 14 — out of tens of thousands. The 42 most frequent queries cover over 20% of the website’s entire search traffic. About a hundred gets us to 30%. And so on.

It’s Zipf’s World; We Just Live in It

This is very good news.

Want to improve your website’s search performance? Don’t rip out the search engine and buy a new one! Start by testing and improving the performance of the 100 most frequent queries. Or, if you don’t have the time, just the top 50. Or 10. Or 1 — test out “campus map” by actually searching for it. Does something useful and relevant come up? No? Why not? Is the content missing or mistitled or mistagged or jargony or broken? Is there some other problem? That, folks, is diagnostics. And when you do that with your website’s short head, your diagnostic efforts will go a very long way.

The news gets better: Zipf is a rule. The search queries for all websites follow a Zipf distribution.

And the news gets even jump-up-and-down-and-scream-your-head-off better: Zipf is true not only for your website’s search queries. Your content works the same way! A small subset of your website’s content does the heavy lifting. Much of the rest has little or no practical value at all. (In fact, I’ve heard a rumor that 90% of Microsoft.com’s content has never, ever been accessed. Not once. But it’s a just a rumor. And you didn’t hear it here.) Bottom line: don’t redesign all of your content — focus on the stuff that people actually need.

You’ll also see a short head when it comes to your website’s features. People need just a few of them; the rest are gravy.

And there’s more. Of all the audience types that your website serves, one or two matter far more than the others. What tasks do those audience types wish to accomplish on your website? A few are short-head tasks; the rest just aren’t that important.

As you can see, the Zipf curve is everywhere. And fortunately, the phenomenon is helpful: you can use it to prioritize your efforts to tweak and tune your website’s content, functionality, searchability, navigation and overall performance.

Your Website Is Not A Democracy

When you examine the short head — of your documents, your users’ tasks, their search behavior and so forth — you’ll know where to find the most important problems to solve. In effect, you can stop boiling the ocean…

… and start prioritizing your efforts to diagnose and truly solve your website’s problems.

Now, let’s put these short-head ideas together. Below is a report card for an academic website that starts with the short head of its audience:

In other words, of all the audience types this university website has, the three most important are people who might pay money to the university (applicants,) people who are paying money now (students) and people who will hopefully pay money for the rest of their lives (alumni). How do we know they’re the most important audiences? We could go by user research; for example, the analytics might suggest that these audiences generate more traffic than anyone else. Or perhaps the university’s stakeholders believe that these are the most important ones in their influence and revenue. Or some combination of both. Whatever the case, these three audiences likely swamp all other segments in importance.

Then, we would want to know the short-head tasks and information needs of each audience type. We might interview stakeholders to see what they think (column 2). And we might perform research — user interviews and search analytics, for example — to find out what users say is most important to them (column 3).

Of course, as the good folks at xkcd demonstrate, stakeholders and users don’t always see things the same way:

That’s why talking to both stakeholders and users is important. And once you’ve figured out the short head for each, you’ll need to earn your salary and, through some careful negotiation, combine your takes on each audience type’s needs. That’s what we’ve done in column 4.

Finally, in column 5, we’ve tested each task or need and evaluated how well it works. (Because it’s a university-related example, letter grades seemed appropriate.) You can do this evaluation in an expensive, statistically significant way; but really, enough research is out there to suggest that you don’t need to spend a lot of time and money on such testing. More importantly, these needs and tasks are often fairly narrow and, therefore, easy to test.

So, after testing, we can see what’s not going well. Finding information on “mentoring” is hard for applicants. And current students have a devil of a time when they “look up grades.”

Now we’re done diagnosing the problems and can begin making fixes. We can change the title of the “Paired Guidance Program” page to “Mentoring.” We can create a better landing page for the transcript application. The hard part, diagnostics, is out of the way, and we can now fix and tune our website’s performance as much as our resources allow.

From Project To Process To Payoff

These fixes are typically and wonderfully small and concrete, but because they live in the short head, they make a huge and lovely impact on the user experience — at a fraction of the cost of a typical redesign.

The tuning process itself is quite simple. It’s what we used to arrive at the report card below:

If you repeat this simple process on a regular basis — say, every month or quarter — then you can head off the entropy that causes fresh designs and fresher content to go rotten. Thus, the redesign that your organization has scheduled for two years from now can officially be canceled.

Your website’s owners ought to be happy about all this. And you should be, too: rather than tackling the project of getting your website “right” — which is impossible — you can now focus on tweaking and tuning it from here on out. So, forget redesigns, and start owning and benefiting from a process of continual improvement.

Special Thanks – Illustrations

Eva-Lotta is a UX Designer and Illustrator based in London, UK where she currently works as an interaction designer at Google. Besides her daytime mission of making the web a more understandable, usable and delightful place, she regularly takes sketchnotes at all sorts of talks and conferences and recently self-published her second book. Eva-Lotta also teaches sketching workshops and is interested in (something she calls) visual improvisation. Exploring the parallels between sketching and improvisation, she experiments with the principles from her theater improvisation practice to inspire visual work.

(al)

© Louis Rosenfeld for Smashing Magazine, 2012.

Smashing Magazine Feed

Then a few months ago, in response to an article here, a W3C Responsive Images Community Group formed—and proposed a simple-to-understand HTML picture element capable of serving responsive images. The group even delivered picture functionality to older browsers via two polyfills: namely, Scott Jehl’s Picturefill and Abban Dunne’s jQuery Picture. The WHATWG has responded by ignoring the community’s work on the picture element, and proposing a more complicated img set element.

Which proposed standard is better, and for whom? Which will win? And what can you do to help avert an “us versus them” crisis that could hurt end-users and turn developers off to the standards process? ALA’s own Mat Marquis explains the ins and outs of responsive images and web standards at the turning point.
A List Apart

  

The idea behind this project was to produce a consistent set of buttons that could be used for the range of social actions frequently taken in Web applications. These actions are often important goals for users, such as connecting third-party accounts or sharing content to third-party platforms, so their appearance has to be attractive and clear.

The standard buttons provided by third parties (such as Facebook, Twitter and SoundCloud) vary in size, style and interactivity. A consistent button set could reduce a lot of that visual noise and inconsistency. Furthermore, having it in CSS format means that changing the text for certain actions would be a breeze for developers, and it also allows administrators of non-English websites to translate labels into their native languages.

The button set was designed from the beginning to require no extra markup, and the elements used are entirely the choice of the (semantically considerate) designer. All buttons are fully scalable and customizable, and they degrade gracefully on older browsers, although the aesthetics in IE 6 and 7 are admittedly inferior to image-based alternatives.

No raster images or sprites were used. Instead, vector icons were inserted using a custom font file, an @font-face rule and pseudo elements. For more information, John Hicks has an informative write-up on this technique.

Download The Button Set For Free

This button set is free to use and extend, personally or commercially. No attribution is required.

• Preview
• Demo
• Download the package (ZIP, 147 KB)
• GitHub repository (handwritten CSS)
• Sass framework (six buttons) (by @adamstac)

Features

• 100%-vector CSS3 buttons
• @font-face icons and custom font files
• 72 services supported
• Button and icon versions supported
• Em sizing for full scalability
• Generic primary and secondary action buttons for consistency
• Graceful degradation on older browsers

Preview

Screenshots of each set are below. Or view a live demo.

Usage

The button set was designed with simplicity and semantics in mind. No unnecessary or extra markup is required, and button types are called through class names. Call the zocial.css file on your page (make sure the font files and the zocial.css file are in the same directory). Buttons can be displayed with the following markup:

<button class="zocial facebook">Sign in with Facebook</button>

The parent element is agnostic, so you may use <a>, <div> or <button>, but it must contain a child <span> element. [Thanks, Lea!]

To choose buttons from the set, include the appropriate class name for the service, such as .dropbox, .linkedin or .twitter.

Icon versions can be displayed by including an extra .icon class, as follows:

<a class="zocial quora icon">Follow me on Quora</a>

More code samples are available on the Zocial page.

(al)

© Sam Collins for Smashing Magazine, 2012.

Smashing Magazine Feed

  

Myths have developed around and researchers have studied how the human brain juggles creativity and organization. Popular theory tells us that the left brain is structured and logical, while the right brain is artistic and imaginative, and that all human beings use predominantly one side of the other.

Working in a creative field means challenging that theory, or else challenging the schedules and deadlines that managers impose on writers, designers and other creatives. As a project manager in a UX design agency, as well as a writer, I believe it is necessary to challenge both the assumptions about schedules and the belief that creativity implies disorganization.

Can Creativity Be Scheduled?

There’s a quick and easy answer to this question. Yes!

You’re shaking your head now. You’re thinking about how much you hate deadlines and how your designs suffer from the 9:00 to 5:00 schedule imposed by your manager. You’re remembering the sketches or creative writing you did in college at 3:00 in the morning. Sathish Manohar expresses it well in his article “Why 9 to 5”:

“Knowledge work solely depends on creativity of the workers. But, still some how, knowledge work-places got modeled around factories. Employees had to work 9-5, be creative between 9-5, and go home… This is a problem, We cannot schedule the brain to be creative at any given time.”

Yet I’ve spent years trying to merge my creative-writing personality with my project-management skill set and day job. Recently I realized that writing by the light of the moon results in over-caffeinated mornings and sloppy grammar, and still I continued—after all, isn’t that what creativity is all about? I’ve always been able to empathize with my designers, who want nothing more than free reign to be creative when the mood hits. But as a project manager, I also strive to create a working environment where designers and content strategists can be productive and efficient—and where we can deliver mockups on a deadline.

The solution turned out to be easier than you might expect. Spontaneous creativity is not the only way. In fact, as a content strategist, designer or even developer, you are paid for your ability to turn on the creative faucet. So, what goes into creating on command?

1. Create A Routine

“Be regular and orderly in your life so that you may be violent and original in your work.”

– Gustave Flaubert, author

Flaubert did not write on a deadline, and yet he found that following an orderly routine improved his ability to be creative. This holds true for most people. Being able to “do your best work” at 3:00 am is no coincidence: you are training your brain to get those creative juices flowing when the moon is high and the workday is long over. This is fantastic if you don’t have anywhere to be in the morning; but for many of us, 3:00 am is not a great time to be inspired.

Instead, develop a routine that trains your creative juices to kick in at more convenient times. This could mean setting the alarm for 8:00 am, making breakfast and then sitting down with a journal to begin sketching as you eat. It could mean emailing yourself a to-do list before bed, with inspirational quotes to greet you the moment you open your email. Maybe you need a lunchtime scrum every day to energize and focus. Within two weeks, these mini-kickoffs will begin to signal to your brain, “Now is when we begin the creative work of the day.”

2. Take Your Time

“A single meeting can blow a whole afternoon, by breaking it into two pieces each too small to do anything.”

– Paul Graham, essayist and programmer

Distractions are a powerful creativity-blocker. Even the best routine can be waylaid by mandatory meetings, important phone calls and constant emails. If you are a freelancer in charge of your own schedule, try to relegate meetings to the very beginning or end of the day. If a manager schedules your client meetings and internal reviews, talk to them about the benefits of opening up large blocks of time for creative work.

At Above the Fold, we make a point of scheduling around the “maker’s schedule.” Paul Graham sums up the maker’s schedule in his essay, “Maker’s Schedule, Manager’s Schedule”:

“When you’re operating on the maker’s schedule, meetings are a disaster. A single meeting can blow a whole afternoon, by breaking it into two pieces each too small to do anything hard in. Plus you have to remember to go to the meeting. That’s no problem for someone on the manager’s schedule. There’s always something coming on the next hour; the only question is what. But when someone on the maker’s schedule has a meeting, they have to think about it…. I find one meeting can sometimes affect a whole day. A meeting commonly blows at least half a day, by breaking up a morning or afternoon.”

Therefore, at Above the Fold, we hold internal reviews at 5:00 pm, check-in meetings at lunchtime, and client calls first thing in the morning. This gives our creative team the time they crave to get engrossed in projects, without interruption.

This doesn’t solve the issue of interruption via email, of course. Try scheduling specific “Check email” times into your day—again, first thing in the morning, just before your lunch break or at the end of the day works well. Make sure your team is aware that you will not be responding to emails immediately, and suggest they call you or come find you if something is urgent and relevant to the current project. Team members can be surprisingly understanding and can quickly grasp the difference between imperative and interesting.

3. Use Your Team

“Separate brainstorming (idea generation) from synthesis (putting it all into a flowing post).”

– Tim Ferriss, author

Having large blocks of time available and scheduling them into your day sounds well and good, but how do you convince your brain that the time has come to get in the zone and ignore distractions?

Taking a page out of the Agile development book, try starting with a variation on pair programming. Pair programming is designed to help developers break down complex tangles of code with the simple rationale that two heads are better than one. The same is true for kicking off any other sort of creative block of time. Instead of working together all day, kick off the day with a 10-minute group brainstorming session. Nothing focuses the creative mind faster than talking through project details, and 10 minutes can lead to a far more productive three hours of synthesis.

Don’t have a team to kick around ideas with? Hit up a few colleagues on Twitter or Skype. We have found that many in the content and design worlds are happy to help, and you can offer to help in return.

4. Warm Up Your Muscles

“Major league players aren’t the only professionals that regularly practice. We’ve met musicians, firemen, pilots, and surgeons, all of who regularly practice their skills.”

– Jared M. Spool, founding principal of User Interface Engineering

Athletes warm up their muscles before starting their real work, and so should creative thinkers. A good warm-up helps you practice basic skills, focus your mind and improve the work to come. In addition, taking 10 minutes to warm up allows you to separate your ideas from the plethora of ideas surrounding you.

A few hundred years ago, visual stimulation was hard to come by, and artists were influenced primarily by their surroundings. Now, our surroundings contain hundreds of representations of our surroundings and of other people’s interpretations of their surroundings. Finding your own voice can be difficult amid the clutter.

The following quick warm-ups can bring you back to basics and isolate what makes your creative voice unique. Some of these suggestions even include using someone else’s work as a starting point—but making it your own.

1. Write your thoughts down in a journal.
2. Doodle for 10 minutes in a sketchpad.
3. Copy the first sentence of a book, and then write a one-page story that begins with that sentence.
4. Create three variations of a landing page based on different mood themes (happy, scary, sad, etc.).

None of these warm-ups should take more than 10 minutes, and each offers a different way to reconnect you to your creative spirit. From here, you might find it easier to begin thinking about new and different ideas, and even jumpstarting a project that has felt stale.

5. Save The Best For Last

“Laziness in a white collar job has nothing to do with avoiding hard physical labor. “Who wants to help me move this box!” Instead, it has to do with avoiding difficult (and apparently risky) intellectual labor.”

– Seth Godin, entrepreneur, author and speaker

Most creative jobs come with a catch, such as having to respond to client emails, send invoices or email writing samples. It’s not uncommon for these boring, “uncreative” tasks to turn into a means of procrastination. You feel as though you can’t set a task aside because it must be done; but because you don’t want to do it, you procrastinate—effectively avoiding both your creative work and your busywork.

Invoices and emails and bills are quick tasks, so we don’t feel as though delaying them by an hour or two costs much. But the hour you spend avoiding a five-minute task eats away at your creative time. What’s more frightening is the possibility that you’re actively using these tasks to avoid your creative work. As Seth Godin explains, this is due to “lizard brain”:

“The [lizard brain, or resistance,] is the voice in the back of our head telling us to back off, be careful, go slow, compromise. The resistance is writer’s block and putting jitters and every project that ever shipped late because people couldn’t stay on the same page long enough to get something out the door.”

We’ve all dealt with lizard brain, and many of the suggestions in this article can help combat it. But how do you remove the procrastinations that are genuine work, the busywork that must be done but just gets in the way?

Try setting aside one morning a week (Monday is a good day) to devote to the boring tasks. Relegate email reminders of the busywork to a “Monday” folder. Keep all physical folders and to-do lists for that work away from your desk. Of course, you don’t want to wake up one day and realize you forgot to pay the bills, but you won’t forget housekeeping chores like that if you assign them to a specific time slot—and not that generic “tomorrow.”

One more tip: don’t sit in your creative spot to do the busywork. The area for busywork will quickly get cluttered with to-do notes that have nothing to do with the creative work that you need to accomplish. Do the necessary evils somewhere else to avoid distracting yourself the next time you begin your “real” work.

Untamed Creativity

Saying that a wild creative mind can’t be tamed sounds romantic, but romanticism will serve you better in your actual products than in your schedule. The advice above will help you schedule your mind, enhance your creativity and use team members, time constraints and even deadlines to your advantage. Give your creative mind the structure and security it needs to run wild.

Other Resources

Here are some more resources on creative productivity:

• “Develop a UX Practice of Practicing,” Jared Spool
  Find ways to warm up before work.
• “Quieting the Lizard Brain,” Seth Godin
  Learn more about the dreaded lizard brain and why we get in our own way.
• Gamestorming, Dave Gray
  Explore activities to get you brainstorming in a group. Gray’s book and his Gamestorming website are full of activities and ideas.
• “How Creativity Works,” Jonah Lehrer
  An interview about all different types of creativity.
• Time Management for Creative People, Mark McGuinness
  This free eBook deals with how to better structure your creative time.

What other tips and tools help you to be creatively productive?

(al) (il)

© Marli Mesibov for Smashing Magazine, 2012.

Smashing Magazine Feed

  

The Web has become increasingly interactive over the years. This trend is set to continue with the next generation of applications driven by the real-time Web. Adding real-time functionality to an application can result in a more interactive and engaging user experience. However, setting up and maintaining the server-side real-time components can be an unwanted distraction. But don’t worry, there is a solution.

Cloud hosted Web services and APIs have come to the rescue of many a developer over the past few years, and real-time functionality is no different. The focus at Pusher, for example, is to let you concentrate on building your real-time Web applications by offering a hosted API which makes it quick and easy to add scalable real-time functionality to Web and mobile apps. In this tutorial, I’ll show how to convert a basic blog commenting system into a real-time engaging experience where you’ll see a comment made in one browser window "magically" appear in a second window.

Why Should We Care About The Real-Time Web?

Although the Real-Time Web is a relatively recent mainstream phrase, real-time Web technologies have been around for over 10 years. They were mainly used by companies building software targeted at the financial services sector or in Web chat applications. These initial solutions were classed as "hacks". In 2006 these solutions were given an umbrella term called Comet, but even with a defined name the solutions were still considered hacks. So, what’s changed?

In my opinion there are a number of factors that have moved real-time Web technologies to the forefront of Web application development.

Social Media Data

Social media, and specifically Twitter, has meant that more and more data is becoming instantly available. Gone are the days where we have to wait an eternity for Google to find our data (blog posts, status updates, images). There are now platforms that not only make our data instantly discoverable but also instantly deliver it to those who have declared an interest. This idea of Publish/Subscribe is core to the real-time Web, especially when building Web applications.

Increased User Expectations

As more users moved to using applications such as Twitter and Facebook, and the user experiences that they deliver, their perception of what can be expected from a Web application changed. Although applications had become more dynamic through the use of JavaScript, the experiences were seldom truly interactive. Facebook, with it’s real-time wall (and later other realtime features) and Twitter with it’s activity stream centric user interface, and focus on conversation, demonstrated how Web applications could be highly engaging.

WebSockets

Earlier on I stated that previous solutions to let servers instantly push data to Web browsers were considered "hacks". But this didn’t remove the fact that there was a requirement to be able to do this in a cross-browser and standardised way. Our prayers have finally been answered with HTML5 WebSockets. WebSockets represent a stardardized API and protocol that allows realtime server and client (web browser) two way communication over a single connection. Older solutions could only achieve two-way communication using two connections so the fact the WebSockets use a single connection is actually a big deal. It can be a massive resource saving to the server and client, with the latter being particularly important for mobile devices where battery power is extremely valuable.

How are Real-Time Technologies being used?

Real-time Web technologies are making it possible to build all sorts of engaging functionality, leading to improved user experiences. Here are a handful of common use cases:

• Realtime Stats – The technology was first used in finance to show stock exchange information so it’s no surprise that the technology is now used more than ever. It’s also highly beneficial to sports, betting and analytics.
• Notifications – when something a user is interested in becomes available or changes.
• Activity Streams – streams of friend or project activity. This is commonly seen in apps like Twitter, Facebook, Trello, Quora and many more.
• Chat – the 101 or real-time Web technology but still a very valuable function. It helps delivery instant interaction between friends, work colleagues, customers and customer service etc.
• Collaboration – Google docs offers this kind of functionality within its docs, spreadsheets and drawing applications and we’re going to see similar use cases in many more applications.
• Multiplayer Games – The ability to instantly deliver player moves, game state changes and score updates is clearly important to multiplayer gaming.

In the rest of this tutorial I’ll cover building a basic blog commenting system, how to progressively enhance it using jQuery and finally I’ll also progressively enhance it using the real-time Web service I work for, Pusher, which will demonstrate not just how easy it can be to use real-time Web technology, but also the value and increased engagement that a real-time factor can introduce.

Creating Generic Blog Commenting System

Start from a Template

I want to focus on adding real-time commenting to a blog post so let’s start from a template.

This template re-uses the HTML5 layout defined in the post on Coding An HTML 5 Layout From Scratch and the file structure we’ll start with is as follows (with some additions that we don’t need to worry about at the moment):

• css (dir)
  • global-forms.css
  • main.css
  • reset.css
• images (dir)
• index.php

HTML

The template HTML, found in index.php, has been changed from the HTML5 Layout article to focus on the content being a blog post with comments. You can view the HTML source here.

The main elements to be aware of are:

• <section id="content"> – the blog post content
• <section id="comments"> – where the comments are to appear. This is where the majority of our work will be done

Comments

Now that we’ve got the HTML in place for our blog post and for displaying the comments we also need a way for our readers to submit comments, so let’s add a <form> element to collect and submit the comment details to post_comment.php. We’ll add this at the end of the <section id="comments"> section wrapped in a <div id="respond">.

<div id="respond">

	<h3>Leave a Comment</h3>

	<form action="post_comment.php" method="post" id="commentform">

		<label for="comment_author" class="required">Your name</label>
		<input type="text" name="comment_author" id="comment_author" value="" tabindex="1" required="required">

		<label for="email" class="required">Your email;</label>
		<input type="email" name="email" id="email" value="" tabindex="2" required="required">

		<label for="comment" class="required">Your message</label>
		<textarea name="comment" id="comment" rows="10" tabindex="4"	 required="required"></textarea>

		<-- comment_post_ID value hard-coded as 1 -->
		<input type="hidden" name="comment_post_ID" value="1" id="comment_post_ID" />
		<input name="submit" type="submit" value="Submit comment" />

	</form>

</div>

Comment Form CSS

Let’s apply some CSS to make things look a bit nicer by adding the following to main.css:

#respond {
	margin-top: 40px;
}

#respond input[type='text'],
#respond input[type='email'],
#respond textarea {
	margin-bottom: 10px;
	display: block;
	width: 100%;

	border: 1px solid rgba(0, 0, 0, 0.1);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
	-ms-border-radius: 5px;
	-khtml-border-radius: 5px;
	border-radius: 5px;

	line-height: 1.4em;
}

Once the HTML structure, the comment form and the CSS are in place our blogging system has started to look a bit more presentable.

Handling Comment Submission

The next step is to write the PHP form submission handler which accepts the request and stores the comment, post_comment.php. You should create this file in the root of your application.

As I said earlier I’m keen to focus on the real-time functionality so a class exists within the template that you’ve downloaded which encapsulate some of the standard data checking and persistence functionality. This class is defined in Persistence.php (you can view the source here), is in no way production quality, and handles:

• Basic validation
• Basic data sanitization
• Very simple persistence using a user $ _SESSION. This means that a comment saved by one user will not be available to another user.

This also means that we don’t need to spend time setting up a database and all that goes with it and makes post_comment.php very simple an clean. If you wanted to use this functionality in a production environment you would need to re-write the contents of Persistence.php. Here’s the code for post_comment.php.

<?php
require('Persistence.php');

$  db = new Persistence();
if( $  db->add_comment($  _POST) ) {
	header( 'Location: index.php' );
}
else {
	header( 'Location: index.php?error=Your comment was not posted due to errors in your form submission' );
}
?>

The above code does the following:

1. Includes the Persistence.php class which handles saving and fetching comments.
2. Creates a new instances of the Persistence object and assigns it to the variable $ db.
3. Tries to add the comment to the $ db. If the comment is successfully added it redirects back to the blog post. If it fails the redirection also occurs but some error text is appended to an error query parameter.

Displaying the Comments with the Blog Post

The final thing we need to do to have our Generic Blog Commenting System up and running is to update the blog page, index.php, to fetch and display the comments from the Persistence object.

• Since this isn’t a real blogging system we’ll hard code the $ comment_post_ID value to be 1.
• Include the Persistence.php class and fetch the comments from it. Comments are associated with a blog post using a unique $ comment_post_ID.

<?php
require('Persistence.php');
$  comment_post_ID = 1;
$  db = new Persistence();
$  comments = $  db->get_comments($  comment_post_ID);
$  has_comments = (count($  comments) > 0);
?>

Since we now have the $ comment_post_ID accessible via PHP we should update the HTML for the comment form to use this value.

<input type="hidden" name="comment_post_ID" value="<?php echo($  comment_post_ID); ?>" id="comment_post_ID" />

We now have all the comments related to the blog post referenced by the $ comments variable we need to display them on the page. To do this we need to update the PHP in index.php to iterate through them and create the required HTML.

<ol id="posts-list" class="hfeed<?php echo($  has_comments?' has-comments':''); ?>">
	<li class="no-comments">Be the first to add a comment.</li>
	<?php
		foreach ($  comments as $  comment) {
			?>
			<li><article id="comment_<?php echo($  comment['id']); ?>" class="hentry">
				<footer class="post-info">
					<abbr class="published" title="<?php echo($  comment['date']); ?>">
						<?php echo( date('d F Y', strtotime($  comment['date']) ) ); ?>
					</abbr>

					<address class="vcard author">
						By <a class="url fn" href="#"><?php echo($  comment['comment_author']); ?></a>
					</address>
				</footer>

				<div class="entry-content">
					<p><?php echo($  comment['comment']); ?></p>
				</div>
			</article></li>
			<?php
		}
	?>
</ol>

You’ll notice that if the value of $ has_comments is true an additional CSS class is applied to the ordered list called has-comments. This is so we can hide the list item with the "Be the first to add a comment" message when comments are being displayed using CSS:

#posts-list.has-comments li.no-comments {
	display: none;
}

Now that all this is in place we have a functional blog commenting system. If you would like to start writing your code from this basic functioning blog commenting system you can also download the code completed up to here.

Progressive Enhancement With jQuery

The first step in making our blog commenting system feel less like a Web page and more like an application is to stop page reloads when a user submits a comment. We can do this by submitting the comments to the server using an AJAX request. Since jQuery is probably the defacto standard for cross browser JavaScript functionality we’ll use it here. Although I’m using jQuery here, I’d also like to highlight that it’s a good idea to not always use jQuery. Instead, analyze your scenario and make a considered decision because there are some cases where you are best not to.

In an attempt to try and keep as much scripting (PHP and JavaScript) from the index.php file we’ll create a new folder for our JavaScript and in there a file for our application JavaScript. The path to this fill should be js/app.js. This file should be included after the jQuery include.

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="js/app.js"></script>

Capture the Comment Form Submission

When the page is ready bind to the submit event of the form.

$  (function() {
	$  ('#commentform').submit(handleSubmit);
});

When the form is submitted and the handleSubmit function is called the comment data we want to send to the server is extracted from the form. There are more elegant ways of fetching the data from the form but this approach clearly shows where we’re getting the values from and the data object we are creating.

function handleSubmit() {
	var form = $  (this);
	var data = {
		"comment_author": form.find('#comment_author').val(),
		"email": form.find('#email').val(),
		"comment": form.find('#comment').val(),
		"comment_post_ID": form.find('#comment_post_ID').val()
	};

	postComment(data);

	return false;
}

function postComment(data) {
	// send the data to the server
}

POST the Comment with AJAX

Within the postComment function make a POST request to the server passing the data that we’ve retrieved from the form. When the request is made an additional HTTP header will be sent to identify the request as being an AJAX request. We want to do this so that we can return a JSON response if it is an AJAX request and maintain our basic functionality if it isn’t (for more information on this see Detected AJAX events on the Server). We also define two handlers; postSuccess for handling the comment being successfully stored and postError to handle any failures.

function postComment(data) {
	$  .ajax({
		type: 'POST',
		url: 'post_comment.php',
		data: data,
		headers: {
			'X-Requested-With': 'XMLHttpRequest'
		},
		success: postSuccess,
		error: postError
	});
}

function postSuccess(data, textStatus, jqXHR) {
	// add comment to UI
}

function postError(jqXHR, textStatus, errorThrown) {
	// display error
}

Dynamically Updating the User Interface with the Comment

At this point the comment data is being sent to the server and saved, but the AJAX response isn’t providing any meaningful response. Also, the comments section isn’t being updated to show the newly submitted comment so the user would have to refresh the page to see it. Let’s start by writing the code to update the UI and test that functionality.

If you are thinking "Hang on a minute! We don’t have all the data we need from the Web server to display the comment" then you are correct. However, this doesn’t stop us writing the code to update the UI and also testing that it works. Here’s how:

function postSuccess(data, textStatus, jqXHR) {
	$  ('#commentform').get(0).reset();
	displayComment(data);
}

function displayComment(data) {
	var commentHtml = createComment(data);
	var commentEl = $  (commentHtml);
	commentEl.hide();
	var postsList = $  ('#posts-list');
	postsList.addClass('has-comments');
	postsList.prepend(commentEl);
	commentEl.slideDown();
}

function createComment(data) {
	var html = '' +
	'<li><article id="' + data.id + '" class="hentry">' +
		'<footer class="post-info">' +
			'<abbr class="published" title="' + data.date + '">' +
				parseDisplayDate(data.date) +
			'</abbr>' +
			'<address class="vcard author">' +
				'By <a class="url fn" href="#">' + data.comment_author + '</a>' +
			'</address>' +
		'</footer>' +
		'<div class="entry-content">' +
			'<p>' + data.comment + '</p>' +
		'</div>' +
	'</article></li>';

	return html;
}

function parseDisplayDate(date) {
	date = (date instanceof Date? date : new Date( Date.parse(date) ) );
	var display = date.getDate() + ' ' +
								['January', 'February', 'March',
								 'April', 'May', 'June', 'July',
								 'August', 'September', 'October',
								 'November', 'December'][date.getMonth()] + ' ' +
								date.getFullYear();
	return display;
}

The code above does the following:

• Within the postSuccess function we clear the form values and call displayComment.
• displayComment first calls the createComment function to create the list item (<li>) HTML as a String.
• We then convert the HTML to a jQuery object using $ (commentHtml) and hide the element.
• The comment list item is then prepended to the comments ordered list (<ol>). The list also has a class called has-comments added to it so we can hide the first list item which contains the "Be the first to comment" statement.
• Finally, we call commentEl.slideDown() so that the comment is shown in what is becoming the standard "here’s a new item" way.

The functionality is now implemented but we want to test it out. This can be achieved in two ways:

• The displayComment is a global function so we can call it directly using the JavaScript console of the browser.
• We can bind to an event on the page that triggers a fake update which calls the displayComment function

Let’s go with the latter and bind to the "u" key being released by binding to the keyup event. When it is, we’ll create a fake data object containing all the information required to create a new comment and pass it to the displayComment function. That comment will then be displayed in the UI.

Hit the "u" key a few times and see the comments appear.

$  (function() {

	$  (document).keyup(function(e) {
		e = e || window.event;
		if(e.keyCode === 85){
			displayComment({
				"id": "comment_1",
				"comment_post_ID": 1,
				"date":"Tue, 21 Feb 2012 18:33:03 +0000",
				"comment": "The realtime Web rocks!",
				"comment_author": "Phil Leggetter"
			});
		}
	});

});

Great! We now know that our displayComment function works exactly as we expect it to. Remember to remove the test function before you go live or you’ll really confuse your user every time they press "u".

Detect and Responding to the AJAX request

All that’s left to do is update the post_comment.php file to detect the AJAX call and return information about the newly created comment.

Detecting the AJAX request is done by checking for the X-Requested-With header:

$  ajax = ($  _SERVER[ 'HTTP_X_REQUESTED_WITH' ] === 'XMLHttpRequest');

Once we know the request is an AJAX request we can update the code to respond with an appropriate status code and the data representing the comment. We also need to ensure that the original functionality is maintained. The post_comment.php code now looks as follows:

<?php
require('Persistence.php');

$  ajax = ($  _SERVER[ 'HTTP_X_REQUESTED_WITH' ] === 'XMLHttpRequest');

$  db = new Persistence();
$  added = $  db->add_comment($  _POST);

if($  ajax) {
	sendAjaxResponse($  added);
}
else {
	sendStandardResponse($  added);
}

function sendAjaxResponse($  added) {
	header("Content-Type: application/x-javascript");
	if($  added) {
		header( 'Status: 201' );
		echo( json_encode($  added) );
	}
	else {
		header( 'Status: 400' );
	}
}

function sendStandardResponse($  added) {
	if($  added) {
		header( 'Location: index.php' );
	}
	else {
		header( 'Location: index.php?error=Your comment was not posted due to errors in your form submission' );
	}
}
?>

Key points from the above code are:

• The $ db->add_comment($ _POST) call returns the data from the added comment which is assigned to the $ added variable.
• By setting the response Content-Type to “application/json” we tell jQuery to convert the returned string into a JavaScript object. For more information on calling JSON Web services see A Beginner’s Guide To jQuery-Based JSON API Clients.
• The 201 status code indicates a successful call and also that a resource (the comment) was created by the call.

The blog commenting system now works in a much more dynamic way, instantly showing the user that their comment has been posted without refreshing the page. In addition, the way the we’ve added the JavaScript based functionality to the page means that if JavaScript is disabled or a JavaScript file fails to load that the system will fallback to the standard functionality we first implemented.

Getting Real-Time—Finally!

As with any "from scratch" tutorial it can take a bit of time to get to the really interesting part, but we’re finally here. However, all the work we’ve up in has been worth it. Because we’ve built our commenting system up in a progressively enhanced way, plugging Pusher into it is going to be really easy

What is Pusher?

At the start of the tutorial we said that we would use Pusher to add the realtime functionality to the application. But what is Pusher?

Pusher is a hosted service for quickly and easily adding realtime features into Web and mobile applications. It offers a RESTful API that makes it really easy to publish events from any application that can make a HTTP request and a WebSocket API for realtime bi-directional communication. You don’t even need to use the APIs directly as there are server (PHP, Ruby, node.js, ASP.NET, Python and more) and client (JavaScript, iOS, Android, .NET, ActionScript, Arduino and more) libraries available in a host of technologies which means you can add realtime functionality to an app within minutes ‐ I’m confident you’ll be surprised just how easy!

Sign up for Pusher and get your API Credentials

In order to add Pusher-powered real-time functionality to a Web application you first need to sign up for a free Sandbox account. After you have signed up you’ll be taken to the Pusher dashboard where you’ll see that a "Main" application has been created for you. You’ll also see you are in the "API Access" section for that application where you can grab your API credentials.

For ease of access create a pusher_config.php file and define the credentials in there so we can refer to them later:

<?php
define('APP_ID', 'YOUR_APP_ID');
define('APP_KEY', 'YOUR_APP_KEY');
define('APP_SECRET', 'YOUR_APP_SECRET');
?>

In your version of pusher_config.php be sure to replace the values which being ‘YOUR_ with your actual credentials.

You should also require this in your index.php file. We should also make the APP_KEY available to the JavaScript runtime as we are going to need it to connect to Pusher.

<?php
require('pusher_config.php);
?>

<script>
var APP_KEY = '<?php echo(APP_KEY); ?>';
</script>

Real-time JavaScript

The first thing you need to do when adding Pusher to a Web application is include the Pusher JavaScript library and connect to Pusher. To connect you’ll need to use the key which you grabbed from the Pusher dashboard. Below you can see all that is required to hook up the front-end application to Pusher.

Include the Pusher JavaScript library after the app.js include:

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://js.pusher.com/1.11/pusher.min.js"></script>
<script src="js/app.js"></script>

Add the Pusher functionality to app.js:

var pusher = new Pusher(APP_KEY);
var channel = pusher.subscribe('comments-' + $  ('#comment_post_ID').val());
channel.bind('new_comment', displayComment);

This probably looks too easy to be true, so here are the details about what the above code does:

• var pusher = new Pusher(APP_KEY);
  Creates a new instance of a Pusher object and in doing so connects you to Pusher. The application to use is defined by the APP_KEY value that you pass in and that we set up earlier.
• var channel = pusher.subscribe('comments-' + $ ('#comment_post_ID').val());
  Channels provide a great way of organizing streams of real-time data. Here we are subscribing to comments for the current blog post, uniquely identified by the value of the comment_post_ID hidden form input element.
• channel.bind('new_comment', displayComment);
  Events are used to further filter data and are ideal for linking updates to changes in the UI. In this case we want to bind to an event which is triggered whenever a new comment is added and display it. Because we’ve already created the displayComment function we can just pass in a reference to the call to bind.

Sending Real-Time Events using the Event Creator

We can also test out this functionality without writing any server-side code by using the Event Creator for your app which can also be found in the Pusher dashboard. The Event Creator lets you publish events on a channel through a simple user interface. From the code above we can see that we want to publish an event named "new_comment" on the "comments-1" channel. From the earlier test function we also have an example of the test data we can publish.

Real-time PHP

Again, we’ve proven that our client-side functionality works without having to write any server-side code. Now lets add the PHP code we need to trigger the new comment event as soon as a comment is posted in our comment system.

Pusher offers a number of server-side libraries which make it easy to publish events in addition to helping with functionality such as private channel authentication and providing user information for presence channels. We just want to use the basic event triggering functionality in the post_comment.php file so we need to download the Pusher PHP library (direct zip file download).

Once you’ve downloaded this zip file, unzip it into the directory along with your other files. Your file structure will now look something like this:

• index.php
• css (dir)
• images (dir)
• post_comment.php
• pusher_config.php
• Persistence.php
• squeeks-Pusher-PHP (dir)
  • lib (dir)
    • Pusher.php

An event can be triggering in just a few lines of code:

<?php
require('squeeks-Pusher-PHP/lib/Pusher.php');
require('pusher_config.php');

$  pusher = new Pusher(APP_KEY, APP_SECRET, APP_ID);
$  pusher->trigger('comments-1', 'new_comment', array(
	"comment_post_ID" => 1,
	"date" => "Tue, 21 Feb 2012 18:33:03 +0000",
	"comment" => "The realtime Web rocks!",
	"comment_author" => "Phil Leggetter"
));
?>

However, we need to apply a some additional logic before we trigger the event:

• Check that the comment was added.
• Extract the unique comment identifier from the $ added array.
• Build the text to identify a channel name for the submitted comment.
• Trigger a new_comment event on the channel with the $ added data. Note: The library automatically converts the $ added array variable to JSON to be sent through Pusher.

Therefore the full post_comment.php file ends up looking as follows:

<?php
require('Persistence.php');
require('squeeks-Pusher-PHP/lib/Pusher.php');
require('pusher_config.php');

$  ajax = ($  _SERVER[ 'HTTP_X_REQUESTED_WITH' ] === 'XMLHttpRequest');

$  db = new Persistence();
$  added = $  db->add_comment($  _POST);

if($  added) {
	$  channel_name = 'comments-' . $  added['comment_post_ID'];
	$  event_name = 'new_comment';

	$  pusher = new Pusher(APP_KEY, APP_SECRET, APP_ID);
	$  pusher->trigger($  channel_name, $  event_name, $  added);
}

if($  ajax) {
	sendAjaxResponse($  added);
}
else {
	sendStandardResponse($  added);
}

function sendAjaxResponse($  added) {
	header("Content-Type: application/json");
	if($  added) {
		header( 'Status: 201' );
		echo( json_encode($  added) );
	}
	else {
		header( 'Status: 400' );
	}
}

function sendStandardResponse($  added) {
	if($  added) {
		header( 'Location: index.php' );
	}
	else {
		header( 'Location: index.php?error=Your comment was not posted due to errors in your form submission' );
	}
}
?>

If you run the app now in two different browser windows you’ll see that as soon as you submit a comment in one window that comment will instantly ("magically") appear in the second window. We now have a real-time commenting system!

But…, we’re not done quite yet. You’ll also see that the comment is shown twice in the window of the user who submitted it. This is because the comment has been added by the AJAX callback, and by the Pusher event. Because this is a very common scenario, especially if you’ve built an application in a progressively enhanced way as we have, the Pusher server libraries expose a way of excluding a connection/user from receiving the event via Pusher.

In order to do this you need to send a unique connection identifier called a socket_id from the client to the server. This identifier can then be used to define who will be excluded.

function handleSubmit() {
	var form = $  (this);
	var data = {
		"comment_author": form.find('#comment_author').val(),
		"email": form.find('#email').val(),
		"comment": form.find('#comment').val(),
		"comment_post_ID": form.find('#comment_post_ID').val()
	};

	var socketId = getSocketId();
	if(socketId !== null) {
		data.socket_id = socketId;
	}

	postComment(data);

	return false;
}

function getSocketId() {
	if(pusher && pusher.connection.state === 'connected') {
		return pusher.connection.socket_id;
	}
	return null;
}

The changes we’ve made are:

• A new function called getSocketId has been added to get the socket_id. It wraps a check to ensure that the pusher variable has been set and also that the client is connected to Pusher.
• The handleSubmit has been updated to check to see if a socket_id is available. If it is, this information is posted to the server along with the comment data.

On the server we need to use the socket_id parameter if it is present and therefore exclude the connection and user who submitted the comment, or pass in null if it’s not:

$  channel_name = 'comments-' . $  added['comment_post_ID'];
$  event_name = 'new_comment';
$  socket_id = (isset($  _POST['socket_id'])?$  _POST['socket_id']:null);

$  pusher = new Pusher(APP_KEY, APP_SECRET, APP_ID);
$  pusher->trigger($  channel_name, $  event_name, $  added, $  socket_id);

And as simple as that we have a fully realtime enabled blog commenting system and we only send messages to users who really need to see them. As with the AJAX functionality the realtime functionality has been added in a progressively enhancing way, to ensure it doesn’t impact on any other functionality. You can find the a demo running here and the completed solution in the realtime commenting repository in github.

Good Real-Time App Development Practices

Real-time application development shares common good development practices with general Web development. However, I thought I would share a couple of tips that can come in particularly handy.

Use Browser Developer Tools

When you start doing a lot of JavaScript development the browser developer tools becomes your best friend. It’s the same when adding realtime functionality to your Web app, not only because you are using JavaScript, but also because the JavaScript library you are using is likely to be doing some reasonably complex things internally. So, the best way of understanding what is going on and if your code is using it as expect is to enable logging which usually goes to the developer console. All major browser vendors now offer good developer tools which include a console:

• Firebug addon for Firefox
• Google Chrome Developer Tools
• Internet Explorer F12 developer tools
• Opera Dragonfly
• Safari Developer Tools

The Pusher JavaScript library provides a way to hook into the logging functionality. All you need to do is assign a function to the Pusher.log static property. This function will then receive all log messages. You can do what you like within the function but best practice is to log the messages to the developer console. You can do this as follow, ensuring the code it executed after the Pusher JavaScript library include:

Pusher.log = function(msg) {
	if(window.console && window.console.log) {
		window.console.log(new Date().getTime() + ': ' + msg);
	}
};

The code above checks to make sure the console and log function is available – it’s not in older browsers – and then logs the messages along with a timestamp to the JavaScript console. This can be incredibly handy in tracking down problems.

Check Connectivity

Any good real-time technology will maintain a persistent connection between the client (web browser) and the Web server or service. Sometimes the client will lose connectivity and when the client isn’t connected to the Internet the real-time functionality won’t work. This can happen a lot with applications running on mobile devices which rely on mobile networks. So, if your application relies on that connectivity and functionality then it’s important to deal with scenarios where the client isn’t connected. This might be by displaying a message to tell the user they are offline or you might want to implement some alternative functionality.

The Pusher JavaScript library exposes connectivity state via the pusher.connection object, which we briefly saw earlier when fetching the socket_id. Binding to state changes and implementing your required functionality is quite simple as it follows the same mechanism as binding to events on channels:

var pusher = new Pusher(APP_KEY);

pusher.connection.bind('state_change', function(states) {
	Pusher.log('Connection state changed from: ' + states.previous + ' to ' + states.current);
});

Conclusion

We’re seeing real-time functionality appearing in a large number of high profile applications: some have it at the core of what they offer whilst others use it sparingly. No matter how it is used the end goal is generally the same; to enhance the user experience and keep users engaged with an application. By converting a basic blog commenting system into a more engaging communication platform I hope I’ve demonstrated that the functionality and experience can easily be layered on existing application.

The ease of access to this technology is a relatively new thing and we’ve only just touched the potential uses for the technology. Real-time stats, instant news updates, activity streams, social interaction, collaboration and gaming are just a few common uses but as more developers become aware of, and comfortable with, the technology I’m confident that we’re going to see some truly amazing innovation. An "Internet of Real-Time Things?"?

© Phil Leggetter for Smashing Magazine, 2012.

Smashing Magazine Feed

  

Interaction designers create wireframes in tools such as Adobe Illustrator, OmniGraffle and Microsoft Visio. Originally, these wireframes were primitive shapes drawn to represent various UI elements. Many of us cannot imagine life without them.

There are, however, reasons to consider moving to the cloud to do interaction design. In short, today’s cloud-based tools are:

• Optimized for collaboration,
• Editable anywhere,
• Interactive,
• Published in real time,
• Self-maintaing (the user doesn’t need to update software),
• Payable monthly,

Emailing your old static designs will feel old fashioned once you see what these tools can do. Going a step further, there are tools for the user review process, too. Just upload your ideas, from simple mockups to final layouts, link them together, and share them for comment.

(Image credit: baldiri)

This article walks you through the current selection of cloud-based tools and provides some recommendations. The number of offerings and amount of functionality are pretty vast. For the sake of brevity, we’ll address two functions: prototyping and wireframing. But if you’re intrigued, you might want to explore cloud-based image editing, mind-mapping tools and other UX activities. These tools are already out there, and surprisingly good.

Prototyping

For our purposes, prototyping involves uploading images (screens) and linking them together via hotspots. Once these are set up, the prototype is published and available to reviewers for usability testing, commenting or both.

Review criteria
Here are the fundamentals that a product should support in order to compete in this space:

• Quick uploading process,
• Support for several source image file formats,
• Easy linking between pages,
• Support for feedback from end users.

Some items aren’t available as of this writing:

• The ability to nudge images in line without having to recreate them;
• The ability to create interactive objects and layer them (such as a menu bar that appears on every page).

InVision

What it does
Create your screens in your favorite tool and upload them to InVision. Then add hotspots; a hotspot links to another page. This is great if you live and die by the comp (Photoshop file). For example:

1. Create a new project. Think of a project as a collection of previously generated comps that you are going to tie together as a prototype via InVision.



2. Upload your files to this new project (the images in this article are PNGs).



3. In “Build” mode, create the hotspots. Basically, you are linking together the prototype. If you have all of the collateral that you need, this will go quite fast — exactly as you’d want it to work.

Observations
The application works as advertised. It enables the user to quickly wire up prebuilt comps, wireframes and sketches. The tutorials also explain useful actions, such as creating hotspots that will be the same on multiple pages (these are called “templates” in InVision).

Speaking of templates, they expose both a major advantage and a major disadvantage of this tool: if the uploaded images are not placed perfectly, then the templates will not line up properly. One would want the ability to adjust the x and y coordinates of any image so that they line up perfectly without having to change the source files. On the upside, if you’ve done the prep work right or you’ve made your hotspots large enough, you can fudge this a bit, and the templates really accelerate the build process.

A number of usability issues have made me scratch my head. For example, the first time I tried adding a hotspot to the search input field, the “Link to…” modal dialog was off to the left side of the browser, which made it impossible to save or cancel the dialog. I then tapped the “Update screen” at the bottom of app to refresh the screen. It turns out that in InVision speak, “Update” = “Replace.” I was afraid to refresh the browser because there is no indication of whether the application saves automatically. So, in the end, I switched to “Preview” and then back to “Build.”

Once you’re familiar with the quirks, however, the application is useful. If you’re a designer or want to work offline to generate wireframes, then give this app a hard look.

• Upload process
  Drag and drop, or browse the file system
• Supported file formats
  JPG, PNG and GIF
• Linking pages
  Easier than the others tested because of templates
• User feedback
  Easy, nested
• Marquee clients
  eBay, Google, Intuit, Whole Foods and many others. Very impressive.

FieldTest

In spirit, FieldTest (in private beta) serves the same space as InVision. The designer uploads prebuilt comps, wireframes and the like to FieldTest, ties them together, and then publishes them for review. One advantage is that FieldTest leverages device gestures. In short, you can “play” FieldTest prototypes on your iOS, Android or Windows Phone 7 device and have it respond to gestures. Combined with the built-in screen transitions, this is a powerful function for mobile app designers.

As with InVision, screens are grouped into “prototypes” (projects). Including them in a project means that they can be linked to and from other screens. The process is the same, too: create the prototype collateral, link it together via hotspots, and publish it for review. For comparison’s sake, here are the hotspot configurations for the two apps.

This demonstrates the differences in approach. On the top is FieldTest. It allows a user to choose between gestures (the prototype I built was an iPhone app). The gestures are tap, long tap, swipe, swipe left and swipe right. Multiple gestures can be active for the same hotspot, which is particularly cool and gives a realistic experience of various actions. On the bottom is InVision, whose ace is templates. The author can create a template for several controls that appear together, and they can reuse that template on several screens.

Observations
If I were to choose between these prototyping tools, FieldTest would be my choice, largely because I build mobile applications. Having listeners for multiple gesture types makes for a more realistic prototype. If the app were Web-based, then InVision is more mature.

FieldTest still has work to do, though. In the beta, gestures such as up and down are missing. Templating as InVision does is really useful. It streamlines the addition of hotspots. Another area for improvement is in comments, and allowing a prototype’s end user to provide feedback.

There are other usability nits. For example, FieldTest includes a status bar at the top of each screen. I have yet to figure out why someone would want this, and it’s not optional. So, if you take a screenshot on an iPhone, you’ll have to edit it to remove this status bar, only for FieldTest to put it back.

Try it out for yourself on the prototype built for this review. Please note, there is no down gesture, so if you want to try that, gesture from right to left (like when advancing through pictures in iPhoto).

• Upload process
  Browse the file system
• Supported file formats
  JPG, PNG and GIF
• Linking pages
  Fairly easy
• User feedback
  Enables gestures on the device, which is great.
• Marquee clients
  In private beta

ClickDummy

ClickDummy is another competitor in this space and has the same process as the others. The user uploads materials and then links them together through hotspots. The link function is a “tool” contained in a drawer (i.e. a UI element that slides in and out from one side of the screen).

Observations
This drawer seems innocent enough, but it creates unnecessary hurdles for the user. In an attempt to simplify the problem, it has added confusion and multiple steps to an easy process. How? The user has to toggle between this tool drawer and the page-picker drawer a lot. The page picker also has to be overloaded in order to provide both functions (selecting a page, as in navigation, and selecting a page, as in a hotspot target).

A second issue: the website says that the user can drag and drop images onto the pages drawer. This doesn’t work in my (Chrome) browser. It instead replaces the current page with the image. After a panicked “Backspace,” the user is restored to their project but has lost their location and has to start over.

Another point: this all-important drawer is closed when the app launches. It took about five minutes to determine that the app was working, and this after weeks of looking at apps in this space.

Lastly, unlike both of the apps reviewed above, this one has no compelling feature that makes the additional effort worth the time. In future, hopefully, the addition of some product differentiation, combined with a rework of the primary use case, would make this application worth another look.

You can see the output from this exploration for yourself.

• Upload process
  Drag and drop, or browse the file system.
• Supported file formats
  JPG, PNG and GIF
• Linking pages
  Most difficult of those tested
• User feedback
  Easy to test, but comments require registration
• Marquee clients
  Not provided

Wireframes

Think of a wireframe as a black and white low-fidelity screen mockup. The mockups I create also include call-outs to give the development team additional context.

In the process, the user will create an account, create a project, and then land on a blank screen. The user then drag and drops UI controls (radio buttons, text input fields and so forth) onto the page.

Once the project is saved, a permalink can be given out for people to see your work. If you change a screen, it will auto-magically show your updates the next time that URL is opened (or refreshed) by a team member. This last point is what the cloud is all about: everyone always has the same (i.e. current) version of your work. Changes are instantaneously available whenever the wireframe is saved.

Compared to most offline tools, the library of available objects is focused on low-fidelity UX. Don’t expect to create gradients or to use a pencil tool.

Review criteria
Here are some basics that are fairly universal in my experience:

• Robust set of standard UI controls
  If the tool doesn’t have off-the-shelf drop-downs, toggles, cover flows and the rest, then creating those controls will require additional work.
• Good as a documentation medium
  Plan on your development team using your wireframes to dictate the logic and layout of the application.
• Good for making wireframe clones, templates or whatever you want to call them
  Not surprisingly, all of the iPhone wireframes I create have the app’s name at the top. I want to do this on the first wireframe and not have to do it again.
• Responsive
  It all takes place in a Web browser. If the application is slower than a locally running application, then your productivity will suffer. Case in point: a year or two ago, I created about 50 wireframes for a project. Each page took a minute to load. To see my changes reflected, another minute. Trust me, this gets old quickly.
• Not written in Flash
  “Dear development teams who write these tools: I love Flash, Flex and the rest. Not as much as I love my iPad, however. I want to edit my work across form factors. It’s all drag and drop, right?”

Here’s what you won’t see right away from the tools out there:

• An extensive stencil library or the ability to easily create and reuse stencils
  OmniGraffle excels at this. Don’t expect Yahoo to create a stencil library for Mockingbird anytime soon.
• A wide user base
  Momentum is building, and there are believers. This is still a minority position and will be for some time. I would say customer support is great, but the more people use these tools, the better the tools will become.
• Font selection
  I won’t dwell on this, but you can tell there is still some lively debate about what a wireframe should and should not communicate just by looking at what features are included in any given product.

Balsamiq

As with the prototyping tools, wireframes — or “mockups” in Balsamiq-speak — are organized into projects. From there, things change. Tools like InVision and FieldTest assume that you have created your pages or screens in another tool. In Balsamiq (and Mockingbird, discussed next), the tool is designed for wireframe creation, with extremely limited functionality for prototyping.

1. Create a new mockup.



2. Drag and drop an off-the-shelf UI control from the ones available.



3. Configure the control to your needs. This is noteworthy, because Balsamiq provides a number of important options. For example, there is one toggle to put the iPhone in landscape orientation instead of portrait.



4. Add the rest of your UI controls; document for the development team; and publish.

Observations
Having worked with some other tools, I’ve become a fan of Balsamiq. A great UI control library and easy object configuration are two areas where this tool excels. There are some areas for improvement, though. First, and I’m sure the development team is tired of hearing it, the sketching style is fine for those who understand low-fidelity mockups, but you probably wouldn’t want to show the mockups to your CEO.

A second gripe is that the editing tool is built in Flash, so work is limited to platforms that support it.

On the upside, a few non-obvious pros:

• The icon set is great. I’ve noticed that only one icon is not in the box: Bluetooth. Anything else I’ve needed has been available.
• In addition to drag and drop, there’s a great quick-add feature. After typing in a few characters of the name of a UI control, a filtered list appears, allowing you to add controls quickly.
• Balsamiq has an odd markup language that, once mastered, allows the user to add common things. For example, + Add and sub-menu, > translates to:

And here’s the rundown:

• UI controls
  More than 70, including iPhone-specific
• Good for documentation?
  Call-outs are one of the controls; drag and drop them onto the canvas.
• Good at duplicating screens?
  Yes.
• Responsive?
  Yes. You will forget you are working in the cloud.
• Written in Flash?
  Yes.

Mockingbird

Mockingbird is also a wireframing tool, and a good one at that. In some ways, it compares favorably to Balsamiq: Mockingbird’s editor isn’t Flash-based; it uses an unobtrusive font; and adding UI controls is (almost) comparable to Balsamiq.

The process is similar, too. Here’s the outcome:

Observations
More professional, right? On the surface, it is more polished, but there are some subtle shortcomings. For example, one cannot left-justify text in an input field. Also, I couldn’t get the icons to all be exactly the same size (36 pixels). And so forth.

There are some logistical hurdles as well. Many of the controls are primitive. To add a call-out, like ones in yellow above, you actually have to add two objects: the yellow circle and the black text. And when a control is added via the quick-add function, the filtering text is not cleared, so after every addition, one has to clear the previous query. Put practically, this mockup took about four times as long to create as the Balsamiq version.

• UI controls
  Fewer than Balsamiq, and no mobile-specific controls.
• Good for documentation?
  Call-outs are created with circles and overlaid text.
• Good at duplicating screens?
  Yes.
• Responsive?
  Mostly — don’t use Chrome.
• Written in Flash?
  No.

Mockup Builder

Another entry in the wireframing space is Mockup Builder. Functionally, it lies somewhere between Mockingbird and Balsamiq. It has a fairly good library of controls — in fact, it’s the only cloud-based solution with native Android controls (Ha!). Moreover, I find its aesthetic better than that of competitors.

Like the others, Mockup Builder starts with a blank canvas, and the user drag and drops controls onto the canvas for configuration.

Here’s the mockup created for this review:

Again, the mockup is fairly clean, but there are some issues: the icons use some funny clipping, and they do not scale properly. The user cannot toggle the various defaults for the iPhone, such as the gray bars at the top and bottom of the screen.

Observations
This tool is a little too buggy for everyday use. For example, the notes to accompany illustrations are in Lorem Ipsum text. Also, when copying text from the Web and pasting into a multi-line text area, the text does not wrap to the control’s width — meaning that the text shows exactly one line, and the user has to use the control’s handles to wrap it. I also wanted to show two paragraphs of text but could not figure out how to insert a “Return” in the text.

Another grievance: the tool could use more polish. For example, the screen surface on the iPhone control is narrower than the keyboard, so the user has to resize the keyboard by hand. When that’s done, the “e” is missing in the button. I understand that these are minor, but one would expect these t’s to be crossed off before moving away from a beloved tool like OmniGraffle.

• UI controls
  More than the others, including iPhone- and Android-specific ones
• Good for documentation?
  Call-outs are one of the controls; drag and drop them onto the canvas.
• Good at duplicating screens?
  Yes.
• Responsive?
  Yes.
• Written in Flash?
  No.

Conclusion

Cloud-based tools are now available and well designed for UX work. Many of the features in the offerings above are not available in software running locally on your machine. While this space is still growing, I’ve been working in the cloud for the past two years and cannot imagine going back.

Collaboration is instantaneous, and the tools are optimized for the right activities: wireframing and testing with users. In fact, these apps have several unexpected and delightful features, and you might find yourself walking away from your favorites, too.

Of course, there are valid reasons to avoid working in the cloud. Stay with your old standbys if any of the following apply:

• Your IT department disapproves.
  This is a hot-button issue. All of these tools protect your information, but this is still worth considering.
• You expect the polish of offline tools.
  These tools are for early adopters. Still, they are Web applications, so they will evolve. That’s what happens on the Web. You’ll just wake up one morning to find some annoyance removed or a key feature added.
• Your project is big.
  If you plan on a 200-screen flow, you will feel a steady degradation in performance. That said, I’ve just completed a 70-pager with one of these tools and was just starting to notice some minor falloff.
• You think in terms of “deliverables,” with a complete set of create-once mockups.
  Many of these tools have coauthoring functionality (if the roles are set up that way). In my experience, however, no one has actually changed anything, even if I wanted them to.
• Your Internet connection is a problem.
  But that’s not to say that you’ll lose data whenever the network is interrupted.

These could be a deal-breaker for some. But these tools are free to try, and some are so simple that you might get hooked in five minutes (as I did a few years ago). Almost all of the research for this article was done with free trials. Given the ease with which you can try these out, you have every reason to go out and see whether one or more is right for you.

If you have another favorite, we’d love to learn about it. The space is ever changing!

(al)

© Erik Perotti for Smashing Magazine, 2012.

Smashing Magazine Feed