Declarative Programming And The Web

Go to Source

Like most web developers, I spend my days giving instructions to computers. These instructions generally involve some input (a request for a web page), some logic (get the right content from a database) and some output (send the content to the requesting browser). This process of telling a computer how to perform a task, such as generating a web page, is what we commonly call “programming,” but it’s only a subset of programming: imperative programming.

There’s another type of programming, declarative programming, that most web developers also use every day but don’t often recognize as programming. With declarative programming, we tell a computer what, not how. We describe the result we want, and the details of how to accomplish it are left to the language interpreter. This subtle shift in approach to programming has broad effects on how we build software, especially how we build the future web.

So, let’s take a moment to investigate declarative programming and the web we can build with it.

Hidden In Plain Sight

Declarative languages tend to fade into the background of programming, in part because they’re closer to how we naturally interact with people. If you’re talking with a friend and you want a sandwich, you don’t typically give your friend step-by-step instructions on how to make the sandwich. If you did, it would feel like programming your friend. Instead, you’re far more likely to talk about the result you want, such as “Please make me a sandwich” (or, perhaps, “Sudo make me a sandwich1”). If your friend is willing and able to follow this instruction, then they would translate the phrase “Make me a sandwich” into a series of steps, such as finding a loaf of bread, removing two slices, applying toppings, etc.

01-sandwich-opt

This type of result-focused instruction is how declarative programming works, by leaving the logic of how to implement requests to the system that is interpreting the language (for example, your friend). When we want an image in an HTML document, for example, we simply include an <img> tag, and then the system that interprets the HTML (typically, a browser) would handle all of the steps needed to display that image, such as fetching it from a server, determining where exactly to render it, decoding the binary data, scaling the image and rendering it to the screen. We don’t have to explain any of this, so we often forget that it’s all happening and that someone programmed both how it happens and how that complex process is derived from a simple <img>.

Another factor that makes declarative programming hard to see as programming on the web is that it “just works.” A lot of work went into making languages like HTML, CSS and SQL capable of providing enough clarity on what needs to be accomplished that the steps required to achieve a result can be determined without detailed instruction. But most web developers began using these declarative languages long after the hard work2 of building them was complete, so we just see them as normal and ordinary and just a natural part of the way the web works3.

When web developers do get involved in declarative programming before the interesting work is done, it’s typically while developing an API for a website. Most APIs are implemented via declarative programming. Rather than provide a way to give a website step-by-step instructions, APIs usually have a simple language that can be used to express the desired result. When we want to get some tweets from Twitter’s API, for example, we give a description of the tweets we want, such as “everything from @A_single_bear.” If the API is imperative, we would instead describe the specific steps we want Twitter to implement on our behalf, explaining how to load, format and return the tweets. Thankfully, the API hides all of that logic behind a simple declarative language, so we only need to describe what we want, not how to get it.

Two Paths Forward

Once we realize how widespread declarative programming languages are on the web, it’s hard to imagine the web without them. Hard, but not impossible. As JavaScript has grown to be ubiquitous, the tools we would need for an imperative-only web are easy to find. We could swap out HTML and CSS for rendering directly in JavaScript4. We could swap out SQL for a JavaScript-native database5 (or two6). And we could swap out calls to declarative web APIs with imperative calls to JavaScript functions, even across the gap between client and server7.

We could put all of this together and entirely stop using declarative languages on the web, even before we get into more advanced technologies heading in our direction, like asm.js8. We can, now, build the web equivalent of mainframes: large, powerful systems built not as a collection of disparate parts but as a cohesive whole. We can now JavaScript all the things9. We’ve tried this before, with technologies like Java and ActiveX. And some organizations, such as AOL, have even had success building a less messy web-like stack. The difference this time is that the technology available to build these “mainframes” is part of the open web stack, so that anyone can now make their own self-contained web-like stack.

An imperative-only JavaScript web is enticing if we understand the web as open technologies and connected documents. But if we expand our understanding of the web to include connected systems, then declarative programming is a key part of how we connect those systems. With that understanding, we should be heading in another direction. Rather building more complex systems by replacing declarative programming languages with imperative programming, we should be wrapping more and more of our imperative code in more and better declarative languages, so that we can build future complex systems on top of our current work. Rather than looking at JavaScript as the modern Java or C++, we should be treating it as the modern shell script, a powerful tool for connecting other tools.

By defining the implementation details in the language itself, declarative programming allows imperative languages such as JavaScript, PHP and Ruby to use the results as steps in more complex behaviors. This has the advantage of making a behavior available to a variety of languages, including languages that don’t exist yet, and it also gives us a solid foundation on which to build higher. While we could build our own document-rendering system in JavaScript or Python, we don’t need to because HTML has already solved that problem. And we can reuse that solution in any imperative language, freeing us to solve new, larger problems. JavaScript can draw an image on a canvas and place it into a document with HTML. Your friend can make you a sandwich and a fresh lemonade. But we’ll get to this future web only by valuing declarative programming as an approach worth maintaining, now that it’s no longer the only option.

Declarative First

When we start building a tool on the web, we often jump right into making it do what we want it to do. A declarative-first approach would instead start with defining a language to succinctly describe the results we want. Before we build a new JavaScript library for building sandwiches (or, of course, another10), let’s consider how we might describe the results in a declarative programming language. One option would look something like {"bread": "rye", "cheese": "cheddar"}, while another would look more like <sandwich><cheddar /><rye /></sandwich>. There are many choices to make when designing a declarative language, from high-level format choices (JSON? XML? YAML?) to details of data structure (is cheese an attribute of a sandwich entity or an entity in the sandwich’s toppings list?). Making these decisions early could improve the organization of your later imperative implementation. And in the long run, the declarative language might prove to be more important than the amazing sandwich-making implementation, because a declarative language can be used far beyond an individual implementation.

02-sandwich-opt

We can see some of the advantages of a declarative-first approach in public projects that have taken both approaches. For example, three years ago the Sunlight Foundation started working on a project to make it easier for people to contact members of the US Congress. They began with a Ruby app to automate the submission of contact forms, Formageddon11. This year, they launched a new declarative-first effort toward the same goal, the Contact Congress12 project, starting with a declarative language that describes contact forms13.

The activity14 graphs15 and timelines of the two projects make it clear which approach won out, but the benefits of the declarative approach go beyond the direct results. The YAML files produced by the declarative approach can be used to build apps like Formageddon, but they can also be used for other purposes, ones not even intended by their creators. For example, you could build an app to analyze the descriptions of contact forms to see which topics members of Congress expect to hear about from their constituents.

Successful declarative programming is in some ways more challenging than imperative programming. It requires clear descriptions, but also requires knowing enough about imperative implementation to know what needs describing. You can’t just tell an app where a form is and expect a valid submission, nor can you say <greatwebsite> to a browser and get what you want. But if you’re up for the challenge, the rewards of a declarative-first approach are also greater. Declarative languages often outlive their imperative implementations.

Try starting your next web project with declarative programming. See what languages you can find that already describe what you’re making, and write your own simple languages when you can’t find anything. Once you have a declarative definition of what you want to make, build it with an interpreter of those languages. You’ll probably end up making something more useful than you would have with an imperative-first approach to the same problem, and you’ll improve your imperative approach in the process.

(al, ml)

Footnotes

  1. 1 http://xkcd.com/149/
  2. 2 http://www.w3.org/2005/10/Process-20051014/tr
  3. 3 https://www.goodreads.com/quotes/39828-i-ve-come-up-with-a-set-of-rules-that-describe
  4. 4 http://vps2.etotheipiplusone.com:30176/redmine/projects/emscripten-qt/wiki
  5. 5 http://www.taffydb.com/
  6. 6 https://github.com/kripken/sql.js
  7. 7 https://www.meteor.com/
  8. 8 http://asmjs.org/
  9. 9 http://www.quickmeme.com/img/8d/8d30a19413145512ad5a05c46ec0da545df5ed79e113fcf076dc03c7514eb631.jpg
  10. 10 https://github.com/sudo-js/make-me-a-sandwich
  11. 11 https://github.com/sunlightlabs/formageddon
  12. 12 https://github.com/unitedstates/contact-congress/
  13. 13 https://github.com/unitedstates/contact-congress/blob/master/documentation/schema.md
  14. 14 https://github.com/sunlightlabs/formageddon/graphs/code-frequency
  15. 15 https://github.com/unitedstates/contact-congress/graphs/code-frequency

The post Declarative Programming And The Web appeared first on Smashing Magazine.

Fullscreen Form Interface

Go to CODROPS [source]</a

FullscreenForm

View demo Download source

Today we’d like to share a fullscreen form concept with you. The idea is to extend the minimal form concept and only show one question or form field at a time in fullscreen. The user can enter data in a distraction-free way and it allows to add some fancy animations for the fields. Once all the fields have been filled or moved through, we show a summary in the final step. Here the input data can still be reviewed and corrected. In this final step the form can also be submitted.

Please note that this is a highly experimental component and it was only tested with the latest browsers that support animations, 3D transforms and HTML5 form elements.

The form has a couple of elements: the form fields (each being shown individually), a dot navigation on the right side (this allows to go back to already filled questions), a number indicator that shows the current step in the form, a continue button that will move to the next field, some details inside of the form fields, like a info icon and a couple of custom inputs, like the fullscreen color picker from the Inspiration for Custom Select Elements post.

The following show the initial view of the form:

FullscreenForm01

Here’s an example of the info tooltip and a filled email field:
FullscreenForm02_infoexample

For smaller screens we have a different layout with adjusted elements:
FullscreenForm03_Mobile
Image credit: Flat iPhone by UIPixels.com

When all fields have been navigated through, we reach the final review step where the form can be corrected and submitted:
FullscreenForm04_Review

The main idea behind the implementation was to take each field (in our case a list item of an ordered list) and display one at a time. When navigating to the next or previous field, animation classes are applied to the exiting and coming fields which make the inner parts (i.e. the label and input) move up or down with delays.

The form script has a couple of options, mainly to show/hide the control elements and a callback for when the review state is reached:

// show progress bar
ctrlProgress : true,

// show navigation dots
ctrlNavDots : true,

// show [current field]/[total fields] status
ctrlNavPosition : true,

// reached the review and submit step
onReview : function() { return false; }

The data-attribute data-input-trigger used in a field (i.e. a list element in our custom form), will trigger the form to move to the next field if the respective input of that field has been entered, meaning, a value was selected.

We hope you enjoyed this experiment and find it inspiring!

View demo Download source

10 rules for designing emails your customers will want to read

Go to Source

thumbnailEmail continues to be one of the most popular ways that companies interact with their customers. As with everything else in the design world, how you design an email will have a tremendous impact on things like the click rate and the retention of your subscribers.

When you design for email, you should make the most of the fleeting opportunity you have to make an impression on your subscribers. One of the Cialdini principles of persuasion applies here: if you offer your readers great value through your email, they’ll gladly reciprocate by taking the time to read through and click on any links.

Of course, designing for email also entails responsive email design since almost half of all email opens today occur on a mobile device. Here are the can’t-miss components of successful email design.

 

1) Transparency counts

Double-check the kinds of subject lines, copy, sender names and even preheaders that you use. Never make any of these ambiguous or confusing for your readers. Otherwise, they’ll be so much likelier to mark your emails as junk or outright delete them.

Instead, always tell your readers your identity, what they’re reading and what the benefits of reading will be. The trick is to get all of this information as close to the top of your email as you can. Having all this information stare your readers in the face as soon as they open your email means your proposition won’t be ignored.

This example shows two emails where the sender name’s in a huge font, the subject line’s crystal clear and the benefits of reading are staring the subscriber right in the face.

10 rules for designing emails your customers will want to read

 

2) Follow a conventional pattern

This is the one time when being conventional and not doing something unexpected helps your cause. People are going to expect certain commonalities in all emails they open. For instance, when designing for handheld devices, be sure to make big as well as easily clickable and tappable buttons for your links. It’s best to even make them 100% of the width of the screen because users want to tap with either thumb!

If you place additional links in the copy of your email, make sure that they appear in contrasting and bold colors to make them stand out and scream for attention. Never put links too close together since it would be annoying if users accidentally tap the wrong link.

Finally, see to it that you also make the advantages of clicking so obvious that they can’t be missed. A good way of achieving this is to combine the advantages of a click with the button itself. For example, ideal button copy would be “get your free demo now.”

Here’s a good example of using bold colors in email links to get the attention of readers.

10 rules for designing emails your customers will want to read

 

3) Minimalism: say more with less

No one makes time to read that much, especially mobile users, so don’t write a lot in your email copy. Readers will simply scan the email for stuff that holds their interest instead of reading the entire email word-for-word. Split up the chunks of text into small pieces that are easier to consume.

A marketing email, for example, has the objective of getting readers to click back to your website. Don’t stall this intended outcome with a long piece of text. At any rate, longer text just makes it so much more tempting for readers to send your email to the trash.

See these examples of how minimalist emails appear in Evomail.

10 rules for designing emails your customers will want to read

 

4) Promote scan-friendly reading

Readers love to scan emails, so make them easy to scan. You’ll accomplish this by dividing your text into delineated and orderly chunks that get right to the point. The use of crystal-clear headings and the emphasis of significant concepts in bold will empower your scanning subscribers to get to the gist straightaway.

Geico’s transactional email illustrates scan-friendly emails to the hilt.

10 rules for designing emails your customers will want to read

 

5) Say as much as you want, just later on

Design your email copy so that the most gripping and shorter details come first; only include your longer content after that. This way, you aren’t making any of your readers slog through the longer content, save for the ones who really want to read the longer content. So there is a place for longer content in email marketing, but it just has to come in the right place in the email.

 

6) Reiterate the call to action

In marketing emails, the call to action is the whole reason for sending your readers the email to begin with. It therefore pays to repeat the call to action later on in the email, particularly if your email has longer content. No one wants to scroll all the way back to the beginning of the email to see the call to action again.

MailChimp’s email repeats its call to action at the top and then again at the bottom.

10 rules for designing emails your customers will want to read

 

7) Limit the number of choices

An excess of choices in your email will cause a cognitive overload on your subscribers, so they’ll be that much less likely to actually go ahead and make a decision. Ponder carefully over just what the minimum requirement would be to get a reader to click to go to your site. You want to just gradually introduce this necessary detail to the reader. If you give him too much information at the beginning, then he’ll be likelier to abandon his task.

 

8) Rely on that whitespace

Whitespace is very effective even in email design. Whitespace is highly useful when it comes to breaking apart crucial bits of information to make it easier for the reader to absorb important details. If you’ve got a lot of elements that are the same size as well as weight, then incorporating whitespace allows readers’ eyes to focus on the stuff that matters. Without whitespace, your email body can appear as a formless, huge block that readers may just skip over.

Here, you can see how whitespace focuses the reader’s attention to the marketing message.

10 rules for designing emails your customers will want to read

 

9) A special word on responsive email design

Today, people are looking at their mobile devices around 150 times a day! In addition, 4 out of 5 people will delete emails if they fail to look good on their mobile devices. All this means that you have to focus more intently on bringing your message across to your readers more efficiently than ever.

The media query @media is used in responsive email design. @media is a unique set of CSS styles that behave like either dynamic rules or conditional statements. They can help you create emails that are more readable on various screen sizes.

What they do is identify a device’s screen size and then various sets of rules that apply to said screen size. Based on specifically what you want to accomplish, media queries may be easy or hard to implement. Note that these won’t work in all email clients and also need more planning as well as testing than ordinary emails.

Based on your specific screen size, media types define the exact CSS styles to utilize. Essentially, this media type says, if your email’s viewed on a screen size that’s 480px or smaller, use the following CSS.

So that would be: @media screen and (max-width: 480px)

Responsive email support

Currently, not all handheld devices and clients support responsive email. That’s why designers must keep abreast of what devices and clients support responsive email. That’s why it’s a really good idea to actually test your emails out in a bunch of different devices and clients, so that you can be sure.

Here is where responsive emails are currently supported:

  • Android 4.x Email OEM app
  • iOS Mail app
  • Windows Phone 7.5
  • BlackBerry Z10
  • BlackBerry OS7

Here is where responsive emails are currently not supported:

  • Android Gmail app
  • iPhone Gmail app
  • iPhone Yahoo Mail app
  • iPhone Mailbox app
  • Blackberry OS5
  • Android Yahoo Mail app
  • Windows Phone 7
  • Windows Phone 8
  • Windows Mobile 6.1 

 

10) Design email for readers

As with all other aspects of web design, the job of designers is to design for the user in order to enhance the user experience. That has to be priority number one. Otherwise, your emails won’t be a big hit with your readers and subscribers.

There are so many things to consider, everything from transparency and following a conventional pattern to minimalism and whitespace. If you want to reach folks on mobile, you have to also figure in responsive email design. Keeping these tips in mind will greatly help with your email click rate.

 

Featured image/thumbnail, email image via Shutterstock.

Full Smashing Library (60+ eBooks + 1 year of updates) – only $45!
10 rules for designing emails your customers will want to read

Source

Selling The Value Of The Web To Small-Town Clients

Go to Source

Selling your services as a freelancer or a small shop is tough enough as it is. Selling to a small-town business that might not even see the need for a website adds an extra level of difficulty in turning a profit.

I’ve provided web design services to small-town businesses for the past few years, having had many happy outcomes, but also a lot of negative experiences from which I’ve learned hard lessons. One of the most important things I’ve learned is how to sell the value of the web. Many of my clients needed to be convinced that a website would actually be good for their business. A lot of them were almost naive about the web and about the impact and reach that a professional website and online strategy would have for their small business, even one whose target market lies within a 15-kilometer radius.

My experience with selling to small-town clients comes from running my tiny web design shop, Hetzel Creative, for three years now in rural Iowa. I started from a blank canvas after having moved to this town and building a clientele that now includes over 80 small businesses, mostly in southwest Iowa. I’ve gotten to the point that most new businesses around here are referred to my company, on the strength of my successful track record and portfolio.

For the purpose of this article, let’s assume you live in a rural town like mine, with a population of about 5,000. You’re a great designer and developer, and the compelling idea of breaking out on your own drives you to look for your first client. You’ve landed a meeting with Ned’s Remodeling. Ned heard about you through mutual friends and is interested in a website for his small construction company.

After your initial meeting, in which you gathered information, you hit Ned with the numbers.

That much to build me a website?!” Ned is shocked. “Forget it! I have a nephew who could give it a shot for free.”

Now’s your chance to sell the value of the web.

A Website Is An Investment

Cash flow is often tight for small businesses, and you don’t have the luxury of dealing with department heads who aren’t closely tied to the money they’re spending. When a small-business owner writes a check, that money is very dear to them. So, Ned is obviously going to be put back when he hears a realistic estimate of what a properly designed and developed website should cost. Still, the only thing more important to him than his bank account (and his family, friends, etc.) is the future and growth of his company. The trick, then, is to sell Ned on a website’s return on investment.

Educating clients on the ROI a website can bring is a great first step to closing deals.1
Educating clients on the potential return on investment of a website is a great first step to closing the deal. (Image credit: Philip Taylor2)

Aside from the popular “Your business will be open 24/7” argument, you can sell Ned on a professionally designed and strategic website in many ways. Listed below are just a few, but you can easily get creative and tailor your responses to different clients, whose understanding of the web will probably vary.

Everything Is Trackable

With just a free Google Analytics3 account, you can track so many more metrics for a website than you can with print ads and other traditional advertising channels. This is a wonderful selling point, because it will reassure Ned that he can always look at the metrics and visualize whether his investment in the website is paying dividends. And if the results are not ideal, then those metrics will tell you what to tweak.

Your Image, The Way You Want It

A website serves as a central online destination for the whole brand. Ned needs to know that without a website (or with one that is poorly designed or that lacks compelling content), his online image will stretch as far as Google reviews or the Better Business Bureau. That might not give potential customers enough information for them to pick up the phone, especially if a competitor is dominating local search results for home remodeling and has a website that projects a compelling, trustworthy image.

Effective Advertising

The money spent on online advertising to drive prospective clients to a website is much more manageable and trackable than money spent on traditional advertising like newspaper ads, flyers and phone book listings. Online ads and listings, SEO and web content are in a unique category of advertising. Not getting as many hits as you would like? Adjust! Change your content and experiment. Not on the first page of Google for a particular term? Optimize! Rewrite some content and change some keywords.

Spend your advertising dollars to get your website into a high-traffic area that your target audience will see. Spending as much as, if not more than, an offline budget for online advertising is a no-brainer because you get so many metrics and insights on how an online campaign is performing. Ned wouldn’t have such control and accuracy with his advertising if he didn’t have a website, so this is a great point to sell him on the investment.

Productivity Enhancement

This is probably the last thing Ned expects from a website, but if properly thought out, a website can certainly enhance a small business’ overall productivity and free up time that is used for manual tasks. Take a simple contact form. More people are willing to submit a form online than to pick up the phone. It’s just easier and a lower barrier. Not only will Ned gain more leads, but now he has more time to research thoughtful answers than he would have had he gotten questions over the phone. And he can set aside a certain time of the day for written questions, which is better than being distracted by a phone call while drawing a blueprint or repairing a roof.

You Get What You Pay For

If you’ve convinced Ned that he needs a website for his business, then his most pressing concern will still be the wad of cash he’ll have to drop to pay for it. Even if he does view a website as an investment, investing in anything without some disposable income is still tough. At this point, he’s probably thinking of ways to spend the absolute least that he can, which is most easily done by pushing you to the backburner to find someone cheaper.

Educating your client on why they need a website and why you’re the right person to deliver it is all that’s standing between you and that money.4
Educating your client on the importance of a website and why you’re the right person to deliver it is all that’s standing between you and the money they’re willing to spend. (Image credit: Tax Credits5)

The key here is to make absolutely sure that Ned understands he will get what he pays for. You could remind him that he would advise his own potential clients not to trust just anyone to remodel their home; likewise, he should be willing to do the same for the online face of his business. Clients should trust experts to perform the services that they’re good at. Sure, he could get a free WordPress theme or use some cookie-cutter website-building service, but that’s like using duct tape and cardboard to fix a broken window. It might work, but you wouldn’t get the efficiency and beauty that a professional would provide.

Explain The Possibilities

Many people like Ned simply don’t know what they can achieve with a website: bill payments, sales, content management, newsletter registration, customer portal, email drip campaigns, subscriptions — the list goes on. If Ned is clear on what can be done, he’ll understand that an expert is needed to pull it all off.

Make sure, however, that you’re not just selling a list of features. You want him to see you as a partner who will share in the joy of the success that your services will bring. The features are only part of what a client wants. After all, thousands of freelancers can design and code as well as you can. Ned has to trust that the other guys don’t care as much about him and his success as you do.

The Importance Of Design

Even in a small town, where your reputation hangs almost solely on word of mouth, having a professional image is still critical. You understand this because you’re a designer, but Ned probably doesn’t. Without getting too deep into research on brand recognition, make sure you can back up your claim that good design is important to Ned’s small business. Here’s a great quote from a Razorfish’s report on branding6 that you can have ready (it’s five years old but still makes a great point):

According to our findings, 65% of consumers report that a digital brand experience has changed their opinion (either positively or negatively) about a brand or the products and services a brand offers… For those brand marketers still neglecting (or underestimating) digital, it’s as if they showed up to a cocktail party in sweatpants.

Break Out A Statistics Sheet

If Ned still needs convincing on why he needs you, show him some statistics. I’ve prepared a document for new clients that lists statistics on the number of Americans online, the number of people browsing on mobile devices (for selling a responsive solution), figures on how consumers are persuaded by a brand’s online image, and more.

Plenty of statistics are available for you to refer to in your sheet, like this one from a September 2013 report by BIA Kelsey7:

94& of the consumers surveyed have gone online for local shopping purposes within the last six months. Among those surveyed, 59.5% have completed a local purchase of merchandise or services online, within the last six months.

Or this one, from a September 2013 survey by Web.com and Toluna8:

83% of surveyed US consumers reported that having a website and using social media was a factor considered of high importance when choosing small businesses.

Or this one, from a June 2012 survey by 99designs9 (a great one to show Ned that others in his position think professional design is important):

80% of small business owners consider the design of their logos, websites, marketing materials and other branding tools either “very important” or “important” to the success of their companies.

Analyze Competitors

Another great way to convince Ned of the need for a website is simply to do a Google search right in front of him. If “glenwood iowa remodeling” brings up a list of all of his competitors, then he’ll see that he’s missing out. Even if you don’t offer SEO, Ned has to have a website in order to optimize it. If you do offer some SEO (or even include basic optimization in your service), then Google some of your current clients in front of him to show how you have helped companies get to the top of search results. Just don’t lead the client on if you don’t have the results to show for it — especially if they can so easily check how capable you really are.

Aside from search rankings, analyze some of Ned’s competitors’ in front of him. Point out what’s good and not so good about them. I always like to tell clients what I would do differently with their competitors’ websites because that helps them understand our expertise in a context they’re familiar with.

Bring Social Into The Mix

Several clients have come to me looking for the whole online package: website, Facebook page, Twitter account and branding, etc. Other clients had to be sold on these “extra” services. If you’re looking for extra angles to hook clients, offer a broad range of services, because — let’s face it — Facebook and Twitter are highly visible these days (Ned probably has a Facebook account already). The average client already has (or at least should have) an active Facebook page for interacting with customers and marketing to the public. So, offering a social strategy, or at the very least designing a nice profile and cover photo, is usually an easy sell.

Facebook for Business.10
Facebook strategies and promotional designs are good services for clients who are looking for the full package. (Image: Sean MacEntee11)

Beware of working with clients who solely want to use Facebook or Twitter, though. Many small businesses start with Facebook as their only online presence. While it’s a cheap way to get online, clients need to understand that their social pages should ultimately drive people to their “home”: their website.

How Did We Meet Ned In The First Place?

Contact with a prospective client can come from many different sources. The things that have always landed me contracts are word of mouth and a strong portfolio. Of course, I had to build my reputation for people to refer me, and that can be done in various ways.

The single most important thing that I did for my small business was to join the local Chamber of Commerce. I got leads simply from being listed on its website as a trusted local service provider, but the more important leads came from attending its events and talking to people. I never went to an event (coffee nights, banquets, golf outings, etc.) to land a contract that day. Rather, I went to become more acquainted with other business owners and to build their trust so that, when they did need a website, they would call me first.

Other ways to get your name out there include joining a committee (I was on the Chamber of Commerce’s marketing committee), attending events for entrepreneurs (who are your target market, after all), doing some pro bono work if you’re starting out, and giving current clients 10% off their next invoice if they refer you to someone. Just being around other business owners and making friendships in their circles should be enough to get you at least one contract; if you do a great job with them, the referrals will start coming in.

I’ve definitely tried things that don’t work, too. For instance, don’t waste your time on newspaper ads, cold calling, phone book listings or mass emails. You’re in the business of selling value, not just a service. Your best clients will arise from trusted relationships and from their belief in your ability to increase their bottom line.

Above all, make sure that your own website is killer. Experiment with different content until you’re at the top of search results for local web design and development. Of course, make sure to show off all of your latest and greatest projects. Case studies do a great job of selling (especially if the website visitor is in the same industry being profiled). Plenty of resources are out there to help with your online strategy, so don’t skimp on the quality of your website.

The Sky’s The Limit

Hopefully, this article serves as inspiration for those of you with the same target demographic. Keep in mind that working in a small town is not necessarily your best bet to raking in a ton of money and designing glamorous websites. But you’ll sleep well knowing that you’re benefiting the community by providing expert services. And keep your eye out for other markets to get into. With the number of fully distributed companies on the rise, you can do business with just about anyone from the comfort of your home.

Remember that selling to small-town businesses is a lot about education. Ned doesn’t know just how much value a website can provide. Educating him on the possibilities and the state of the web might just convince him to go with you, without your even having to explain “why me.”

(ml, al)

Footnotes

  1. 1 https://www.flickr.com/photos/9731367@N02/6988181354
  2. 2 https://www.flickr.com/photos/9731367@N02/
  3. 3 http://google.com/analytics/
  4. 4 https://www.flickr.com/photos/76657755@N04/7408506410
  5. 5 https://www.flickr.com/photos/76657755@N04/
  6. 6 http://feed.razorfish.com/feed09/the-bottom-line/
  7. 7 http://www.biakelsey.com/Research-and-Analysis/SMB-and-Consumer-Research/Consumer-Commerce-Monitor/
  8. 8 http://www.emarketer.com/Article/Consumers-Favor-Small-Businesses-of-Their-Customer-Focus/1010771
  9. 9 http://99designs.com/customer-blog/99designs-business-design-survey/
  10. 10 https://www.flickr.com/photos/smemon/4646164016
  11. 11 https://www.flickr.com/photos/smemon/4646164016

The post Selling The Value Of The Web To Small-Town Clients appeared first on Smashing Magazine.

The best free WordPress plugins for August 2014

Go to Source

thumbnailLadies, Gents… welcome back! It’s time for another round of WordPress plugins that you might just find useful. As per usual, I’ve installed every plugin listed here and given it a test.

We have a variety of plugins, too. Some of them add features to WordPress, integrate with third-party services (which seems to be a theme this month), or merely refine existing features.

As always, let us know in the comments if we’ve missed one of your favorites, or if you have any feedback on the plugins we’ve featured.

Conversion optimization by 40Nuggets

Okay, this plugin has its pros and cons. First off, allow me to state its purpose: increase your conversions.

It integrates your WordPress install with the 40nuggets website to create Call to Action (CTA) campaigns, for free.

These CTAs are delivered by modal windows. I know. The thought makes me sick too. I just really, really hate it when an unsolicited modal window comes out of nowhere, blocks the rest of the page, and forces you to deal with it before you can continue browsing the site.

But it’s like any tool: it’s all about how you use it. From the admin interface, you can change the modal window to a “slide-in” affair which won’t disrupt the experience too badly. Pair this with the plugin’s advanced CTA campaign options and conversion reports, you have a powerful tool for attracting new, regular readers.

What’s more, the whole thing is driven by what’s called an “Algorithmic Intelligence”, which will decide when is the best time to show a notification to an individual user. If you want more refined control, you can set the calls to action to show themselves after a certain number of page views.

Other features I like: you can choose to display CTAs only to anonymous users, and how often to show them to an individual user (I’d recommend only once). You can also choose to show them after the user has spent a specific amount of time on the site. You can customize the design of the slide-in CTA, or code your own. You can set CTAs to remain inactive if an individual user has already seen a different one. You can make them appear only in certain subsections of your site.

Features I don’t like: Well, the traditional modal windows aside, you can set these Calls to Action to appear when a user tries to leave your website. I hate that. I REALLY hate that. You can also set them to appear on every page view, and other annoying things like that.

In other words, this plugin has the potential to be a powerful and useful tool for increasing your regular readership. It could also be used to nag your users into leaving forever. Be careful with it.

(Crazy idea: have a slide-in notification that shows up maybe once or twice a month with no call to action, just a compliment for your readers. “You’re awesome!”, that sort of thing.)

The best free WordPress plugins for August 2014

 

WPCore plugin manager

This is one of my favorites for the month. It makes use of another third-party service; but again, it’s free.

WPCore allows you to create collections (lists) of plugins hosted on wordpress.org. Then, using their WordPress plugin, you can install/activate the entire collection in one go.

While signing up for their service will allow you to create your own collections, either public or private, you don’t need to. There are a number of public collections of plugins that anyone can use.

For people who make a lot of WordPress sites, this could drastically streamline the initial set-up, especially if you use a lot of plugins.

The best free WordPress plugins for August 2014

 

Resume Builder

I’ve never really thought of using WordPress for building résumés visually, but this tool makes it quite easy. You get the standard introduction section, skill list, and so on. But then, you can build more detailed, customized sections for your résumé.

Then, you can use shortcodes to call in each section individually, should you so desire, giving you more precise control over the layout on the front end.

Since the résumés themselves are custom post types, you can create and post any number of them. The potential use cases for this plugin are interesting to ponder. Perhaps a site where anyone in a particular location/industry can post their résumé? It could also be used to build a directory of local celebrity profiles, or any number of things you can imagine.

The best free WordPress plugins for August 2014

 

Esty360

The misspelled title aside — an error that doesn’t exactly inspire confidence — this is a simple and reliable way to display the contents of your Etsy shop on your WordPress site.

I won’t go into too much detail here. It’s integrated with an online store, and it works. Those who want to know more should check out the official documentation.

The best free WordPress plugins for August 2014

 

Instagram Feed

Need a quick and easy way to pull your own, non-private, Instagram feed onto a post or page with a shortcode? Now you have it.

Install it, and head over to the configuration options. The layout can be percentage-based, but it’s not quite responsive. Further configuration of the gallery layout will require editing some CSS yourself.

The best free WordPress plugins for August 2014

 

SVG Support

WordPress normally doesn’t allow for the uploading of SVG files into the media library for security reasons. If you want to work with SVG files, install this plugin, and go.

Additionally, it makes things easier for those who want to use CSS to style their SVG images directly. If you have multiple authors on your WordPress site, you can limit the ability to upload SVG images to Administrators.

The best free WordPress plugins for August 2014

 

Remove problematic formatting options from tinyMCE

I know I have, more than once, felt a certain amount of trepidation when handing over websites to my clients. When provided with WYSIWYG functionality, they will almost invariably use it, sometimes to disastrous effect.

In other words, they’ll try to right-align (or center) something that should not be right-aligned (or centered) and screw your layout all to hell.

There are ways around this, and many plugins designed to manage TinyMCE, allowing you to customize it to your will. This one, despite its unwieldy name, does not allow for feature-by-feature customization. Instead, it provides a set of reasonable defaults, and leaves it at that.

Mind you, there’s nothing to stop your clients from making seventy-eight percent of their text ALL-CAPS AND BOLD TOO; but there’s only so much you can do.

 

GuideMe

Handing a WordPress site you just built over to someone else, and want to give them some easy visual references? This tool allows you to select any public page or post on your site, and tie tooltip notes to any element on that page/post.

These tooltips will only display to logged-in site administrators, and they are crazy easy to manage. What’s more, because they are tied to specific elements, and not absolute positions, they work just fine with responsive layouts.

The best free WordPress plugins for August 2014

 

Junk Deleter

Warning: back up your database before you try this one!

Junk Deleter promises to clean up your database, making it run faster. How does it do this? Well, here’s a list of everything it cleans out:

  • Old drafts (the ones that have not been edited in the past X days).
  • Post revisions.
  • Automatically created drafts (auto-drafts).
  • Posts in the trash section.
  • Orphan postmeta entries (the postmeta whose post no longer exists in the database).
  • Pending comments older than X days
  • Comments in the spam section
  • Comments in the trash section
  • Pingbacks and trackbacks
  • Orphan comment meta entries

This cleanup can be performed on a weekly or monthly basis. I installed it on my test install, tried the cleanup, and nothing broke. That’s the closest thing to a guarantee that you’ll get out of me.

 

Bonus: Romance admin color scheme

Are you building a WordPress website for Barbie? Do you like pink? Do you want your WordPress admin side to be pink? Get your pink UI here!

Okay, speaking from a usability standpoint, I think this plugin could be improved with a bit more contrast, especially in the navigation bar on the left. The main shade of pink used is a bit too light, and makes my eyes blur the white text.

I’d also take the word “Romance” out of the title. I’ve never actually understood what the color has to do with the concept. Besides, everyone knows romance is red (at least in North America…).

Fun Skitch Font Family (all 11 fonts) – only $9!
The best free WordPress plugins for August 2014

Source

How Limitations Led To My Biggest App Store Success and Failure

Go to Source

Look at your calendar. If you’re anything like me, all you see are meetings, places to go, things to do, people to meet and not a lot of white space. Few people love their calendar. So, we set out to change that, and we learned a lot in the process.

Our app is an iPhone app that flips your calendar upside down and lets you focus on the free time in your day, instead of all the busy time. The app itself has been around since 2011, but the story of how it came to be and what our team ultimately learned is one that I have been wanting to tell for quite some time. It’s the story of how limitations led to my biggest success in the App Store — and my biggest failure.

This is the story of how the App “Free Time” came to be and what our team ultimately learned in the process.1
This is the story of how the App “Free Time” came to be and what our team ultimately learned in the process. (View large version2)

Embracing Limitations

At its core, the app (called “Free Time”) is all about exactly that, free time. But, as most software projects tend to go, while it was conceived in simplicity (answering the question, “When am I free?”), Free Time came into the world with a few more features than expected and a lot more complexity. We were in college when I came up with the idea. I was bouncing back and forth between classes, alternating schedules from one day to the next, and trying to find time to get together with my friends. In 2010, more than a few companies were trying to solve the same scheduling problem (Tungle.me3, Doodle4, When Is Good5, Scheduly6, etc.). Everyone was grappling with the same fundamental issue: When are people free and how do we get them together?

Most of those companies spent or continue to spend millions of dollars building complex infrastructure to support in-the-cloud calendar scraping and mutual time resolution (i.e. figuring out when two people, in potentially different time zones, are both available). It sounds simple but it really isn’t, and thankfully we didn’t know that.

This brings me to my first major takeaway: Embrace your limitations. At the time, our limitations seemed significant:

  • We didn’t have any funding.
  • We didn’t know how to build a server.
  • We had no idea how complex calendars and time-based calculations were.
  • We had never sold an app in the App Store.

Limitations can be tricky, but they can also hold hidden benefits. I couldn’t pay anyone, so my friend and designer Houston learned to design for mobile; my freshman roommate, Nathan, learned about calendrical calculations and C++; and I learned Objective-C. We were scrappy and bootstrapped, but we made it work.

Because the three of us didn’t have any money and we didn’t know how to build a server, we built everything within the app (even the mutual time resolution), and we launched a product that is infinitely scaleable and that, to this day, has no inherent costs other than Apple’s annual developer fee. Not many app developers in this day of hyper-connectivity can make this claim.

Because we had no idea how complex calendars are, we actually thought this app was going to be a walk in the park. It wasn’t, but if we had known the ins and outs and complexities of time, I have no doubt we wouldn’t even have started.

So, if you’re feeling limited or constrained, don’t. Limitations can make a big difference and could ultimately lead to your most creative moments.

37signals likes to think of constraints differently7:

Constraints are often advantages in disguise. Forget about venture capital, long release cycles, and quick hires. Instead, work with what you have.

The Launch

We launched roughly eight months after we started building the app. It was nights and weekends mostly for the three of us, but we finished it, put it up in the store and breathed a momentary sigh of release.

The Calm Before the Storm

We were in review for seven long painful days. I had submitted a few small apps before, so I knew the drill, but this time the wait was excruciatingly long. On the seventh day (coincidentally, the same day we were graduating from college), I got a push notification from iTunes Connect: Free Time had been approved and was in the App Store. There was a lot of high-fiving and celebration; we told our friends to download the app, and we posted about it on Facebook and Twitter. At the time, we didn’t really have a marketing plan; we had talked to a few people but hadn’t really drummed up a lot of interest thus far. As far as we were concerned, graduating from college and launching an app was plenty for one week.

We graduated on a Thursday, and by Friday three hundred people had downloaded the app. We were blown away and went to sleep that night convinced that this was a first-day fluke and that no one else would find it. The next day, the same thing happened, another three hundred people. This kept up until Apple featured it as a “New and Noteworthy” app one week after it hit the store.

Being featured in the App Store is like throwing gasoline on a fire. It set off an explosion of downloads, support emails (both positive and negative), media requests, etc. It was one of the most exciting and terrifying experiences: packing up our belongings, thinking about “the real world,” and getting emails from people in Qatar who were using the app and finding a lot of bugs.

The next few weeks were chaotic as we pushed out new updates, responded to media inquiries and tried to figure out what had just happened.

The Results

Eventually, things quieted down. We kept pushing out updates to address user concerns, and a few years later, here we are. I like when developers share numbers, so here are some fun ones from Free Time:

  • Downloads
    To date, more than 200,000 people have downloaded the app. Other than our website and social pages, we haven’t done any marketing.
  • Countries
    The app has been used in more than 150 countries around the world (and we still only support English). Surprisingly, the US accounts for only 48% of all revenue and 35% of users.
  • Time spent
    Since we started tracking anonymous session usage two months after launching, users of Free Time have spent a combined two years using the app — a little ironic considering that it’s all about saving people time.
  • Accolades
    The app has been written about and profiled by CNN, ReadWriteWeb, Lifehacker and AppAdvice and has been featured by Apple a handful of times.
  • Money
    The app was free when we started out, which is part of the reason why it was downloaded so much. Even so, through in-app purchase and eventually a paid model, revenue from Free Time has paid for a cup of coffee for the three of us every day for the past three years — certainly not enough to sustain any of us, but something to be proud of nonetheless. In addition to revenue, our work on Free Time helped each of us find a job that pays the bills.
We did a few things right, but this article is about what we did wrong.8
We did a few things right, but this article is about what we did wrong. (View large version9)

So, we did a few things right, but I’d rather tell you about what we did wrong, and what we learned in the process.

Throughout the process of building the app, launching it in the App Store and dealing with the onslaught of users (and complaints) from across the world, we learned a great deal about the shortcomings of the app and about the reality of the way people think about their apps and their calendars.

1. Changing Perspectives And Letting People See Between The Lines Is A Great Way To Stand Out

When we started prototyping the app, we built it to be a really fast way to dispatch an email to a friend or colleague who wants to know your availability on a particular day. That was it, nothing more. To enable this behavior, the time between your events became a button that you could tap to share. That actually ended up inverting the weight of the calendar’s UI and placing more importance on the inverse (the free time).

The time between events became a button, inverting the weight of the calendar’s UI and placing more importance on the the free time.10
The time between events became a button, inverting the weight of the calendar’s UI and placing more importance on the the free time. (View large version11)

By inverting what was traditionally expected of a calendar UI, we stuck out, and every time we showed off the app, we got the same response: “That’s really neat and makes a lot of sense.” To be honest, we stumbled upon it, but that changed perspective enabled us to see something we all knew in a new and interesting way. As a result, we garnered a lot of attention with a relatively simple change to something that everyone takes for granted.

Drew Olanoff of The Next Web said:

Free Time will completely change the way you look at your calendar.

Apps don’t need to be new and novel ideas, and they don’t have to create an industry out of thin air. The way to build a great app is to focus on something simple, even something that everyone takes for granted, and then make it better. The transportation app Uber is novel and unique for a lot of reasons, but at the end of the day it’s just a better way to hail a cab. All that the developers did was change people’s perspective and make something better.

2. Get Ready To Iterate

Initially, we designed and redesigned the app more times than our designer Houston would have liked. When building your own app, learn to embrace this, because iteration and refinement are key ingredients of a successful app.

While the functionality remained mostly the same, the design emphasis and navigation changed dramatically.12
Our first iteration is on the left, and what we ended up launching is on the right. While the functionality remained mostly the same, the design emphasis and navigation changed dramatically. (View large version13)

Don’t be afraid to start in one place and end up somewhere completely different. With each iteration, we tried to incorporate new learning and new feedback. By getting a rough proof of concept out to beta testers early, we were able to identify some key flaws in our presentation and concepts.

Our First Notion of Sharing

In our early iterations, sharing was a separate activity, and since we had started with a tabbed architecture, putting sharing in its own tab made sense. Through early beta testing, we quickly realized that you mustn’t let a user act on their day without the context of what is happening on that particular day. The view we started with only showed availability, but without the surrounding events, our testers were confused and unable to correlate their availability with the calendar.

Without the surrounding events, our testers were confused and unable to correlate their availability with the calendar.14
Without the surrounding events, our testers were confused and unable to correlate their availability with the calendar. (View large version15)

A New Inline Approach

This second iteration not only adopted a new color scheme to provide better contrast between free time and busy time, but also incorporated free time right on top of the regular calendar.

The second iteration provided better contrast between free time and busy time.16
The second iteration provided better contrast between free time and busy time. (View large version17)

This improved context, and it gave users the information they needed to act on their free time without having to change tabs and switch context. It also enabled users to see their calendar in a new way and gave many the value they were looking for even if they didn’t want to act on that free time.

The Final Product

In our final iteration, we increased the calendar space to show as many events as possible. We also made sharing a modal activity that users could toggle from any screen. By focusing more on the calendar’s UI, we were able to incorporate the notion of selectable free time right inline and in a way that would be comfortable for users who are familiar with Apple’s Calendar app.

In the final iteration the calendar space was increased to show as many events as possible.18
In the final iteration the calendar space was increased to show as many events as possible. (View large version19)

But iteration never stops. Now that we were done with the app, we had to update the icon.

After being done with the app, we had to update the icon.20
After being done with the app, we had to update the icon. (View large version21)

3. Iterate Doesn’t Mean “Add More”

We also failed to realize in our iterations that we could have (and should have) removed features and functionality that our testers found less compelling. We never identified a minimum viable product. Ultimately, we focused our iterations on evolving the product, when we should have spent time refining the core value proposition, “When am I free?” This led to an inevitable bloat of features, which diluted the product and ultimately required us to create a lengthy user walkthrough that explained the nuances of the app and what it does. The walkthrough was six screens, and when we launched we forgot to include a “Skip” button (a big mistake).

Not including a “Skip” button in the six screen walkthrough was a big mistake.22
Not including a “Skip” button in the six screen walkthrough was a big mistake. (View large version23)

In the last year, only 42% of new users made it through this initial walkthrough on first opening the app. All of these users had consciously decided to purchase the app and waited for it to download and install; so, this walkthrough is disastrous in its conversion numbers.

Holding back when you’re passionate about something is extremely hard, but it is equally important to recognize that a lack of functionality (more favorably referred to as simplicity) is as impressive as breadth of functionality. While our initial concept was to enable users to focus on the free time in their day, we ended up launching with the following features:

  • People could see their availability on top of their calendar.
  • A quick filtering tool enabled people to use custom availability searches to find free time during particular meals, days and durations. To support this, we allowed users to specify the time of each of their meals.
  • Users could specify work hours, in addition to their waking hours, in order to narrow down their free time.
  • People could change the calendars that affected their Free Time.
  • People could specify the lengths of the blocks of time that were displayed, and we built complex algorithms to determine how to split up particular blocks of time to fit user preferences.
  • People could see a quick view of their availability for any given meal.
  • People could search for free time during particular time ranges, on particular days, during particular meals and for specific durations.
  • People could share their free time by dispatching an email, copying it to their clipboard, composing an SMS-specific version with shortened text and — yes — bumping phones (that was a thing then).
  • Once two users had shared time, a certain file type allowed them to see each other’s availability and view a dedicated screen of their mutually available times.
  • Oh yeah, and we supported all of the actions you’d expect a calendar app to support, like editing events, creating new events, displaying all-day events, handling events that overlap and appear on top of one another, and so on and so on.

It turns out only one feature really mattered: letting people see their availability in a new way. According to our analytics, 95% of the time, people just want to look at their calendar, see their availability and act on it in their own way. They don’t really filter (only 8% of users did that), they don’t share (only 2% of users did that), and they certainly don’t bump phones to find out when they’re both free (only 0.002% of users did that).

4. Solve A Worthwhile Problem, But Don’t Expect Your Problem To Be Anyone Else’s Problem

Being passionate about what you’re creating is important. If you can’t build a product that you would use, you’ll never be able to build a product that anyone else would want to use. So, build something that solves your own problem, scratches your own itch or satiates your own need. This will give you the passion to do what it takes to create something valuable. At the end of the day, even if it doesn’t take off, you’ll have something that you can use.

But don’t expect the problem you are solving to be anyone else’s problem. When we started, we thought the app’s ability to resolve two calendars and present mutually available time would be a game-changing feature for offline use. We wanted to displace the big players in the space, the Tungles and Doodles of the world that force users to broadcast their availability all of the time and that require expensive servers and deliver a lackluster experience. I can’t even begin to tally up the amount of time we spent building the database structure and modifying the app to allow for this mutual time resolution. It easily took up an entire month of the eight-month development process. Since launch, 179 of those 200,000+ users have used it, many only once. In case you don’t want to do the math, that’s 0.000895% of users.

For comparison’s sake, while 179 people have used the mutual free time feature, 2900 users have shared their free time in some way, shape or form; 15,000 have filtered for their free time, most only once; and the other 150,000+ seem content just to see their free time laid out on top of their calendar.

This is a tough point to get across and an even harder one to avoid. So, what do you do? Trust your instincts, but temper your excitement. Build something that you love, but don’t expect others to love it the way you do. When push comes to shove, let go.

5. Build For The World, Not Just Your World

We never internationalized the app to support any languages other than English. This was our second biggest mistake. Two years ago, launching an app that doesn’t support the rest of the world might have been acceptable. Today, if you are building your own app for the App Store, build it for the entire world from the start.

The map above shows Free Time usage around the world in 2013.24
The map above shows Free Time usage around the world in 2013. (View large version25)

Even today, the US accounts for only 48% of Free Time’s total revenue and only 35% of our users. Had we decided to translate and support other locales, our financial return would have been higher.

Be Careful With Time, a Strange and Complicated Concept

We always thought of Free Time as a cross-platform app, and we originally thought that the mutual time resolution was its biggest feature (remember?). So, we adapted our strategy to accommodate that use case. As a result, we built the underlying calendar-parsing engine in C++, a language that compiles to both iOS and Android. It also didn’t hurt that Nathan knew more C++ than Objective-C, so it was a natural fit for him as well.

Without the help of any system libraries like NSDate or NSCalendar, we set out to build our own cross-platform calendar database and reinvent the wheel in the process. Never do this. The inherent complexities of time make this sort of endeavor a monolithic challenge equivalent to rebuilding an entire city brick by brick just because you don’t like the location. If you can leverage someone else’s work and not reinvent the wheel

 26
(Image credit: Smythe Richbourg27) (View large version28)

You need to think of a few scenarios if you are building an app that has anything to do with calendars or time-based calculations.

30 + 20 is easy, basic math. Day 30 of this month + 20 days isn’t so easy. OK, maybe you think that that calculation is relatively easy and that the answer is probably the 19th or 20th of the next month. It seems easy until you think about people in Egypt and find out that their next month is Pi Kogi Enavot (“the little month”), which is only five days long!

Another fun thing we found out was that midnight on certain days in certain countries never exists. Most of the all-day events we stored began at midnight on a certain day and ended at 11:59:59. We thought that this was a pretty logical and straightforward way to store an event, but we forgot about daylight savings time in Brazil, which jumps from 12:00 am to 1:00 am, instead of 1:00 am to 2:00 am as it does here in the US. Therefore, midnight never exists, and as a result, for at least for one day each year, the app would crash on launch for users in Brazil.

Oh, and Leap Day in 2012 was one of my favorite days. Almost every active user sent us an email or tweet letting us know that the app was off by a day (as it remained for a month).

The current year in the Buddhist calendar is 2557.29
The current year in the Buddhist calendar is 2557. (View large version30)

We also had a lot of trouble with different international calendars that differ not just in their translations, but fundamentally in their current year, month and day. We have a surprising amount of users in Saudi Arabia and Qatar, and one issue with Free Time is that it doesn’t support the official calendar there very well (the Islamic Hijri calendar). The current year in that calendar is 1435, and the days of the month are all completely different because it is a lunar calendar, not a solar calendar. I can tell you with a high degree of certainty (even though I haven’t tried it myself) that mutual time resolution between someone on the Gregorian calendar (the most common of calendars used) and someone on another calendar will fail spectacularly. Thankfully, no one seems to use that feature!

Languages and Dates Are Only Part of the Problem: Culture Makes Up the Rest

Building for the world isn’t just about internationalizing your app, though. Consider also different use cases for populations and cultures around the world. When we launched Free Time, we baked in the concept of weekdays (Monday through Friday) and weekends (Saturday and Sunday). We also assumed that most users work Monday to Friday and have different waking hours on weekends than on weekdays. In hindsight, this was an obvious oversimplification, but at the time we weren’t thinking about the world —we were only thinking about our world, and that is exactly how our world works.

The Monday-to-Friday work week was initially hardcoded into the app.31
The Monday-to-Friday work week was initially hardcoded into the app. (View large version32)

We soon discovered that this assumption was entirely incorrect in many countries throughout the Middle East, where the weekend starts on Thursday and ends on Saturday (Qatar and Saudi Arabia are two such countries). As a result, we had to allow users to specify their work week and selectively enable work hours.

On the left is the version we launched with, and on the right is a simplified UI that allows you to make changes on particular days.33
On the left is the version we launched with, and on the right is a simplified UI that allows you to make changes on particular days. (View large version34)

Inadvertently, in building for our world, we also alienated another part of the population, people who work the night shift. Because we required users to tell us when they wake up and when they go to sleep (so that we could infer their number of free hours), we built a control to select those hours that extended only from 12:00 am to 12:00 am. We didn’t think of the people who work the graveyard shift and need to set their “day” and working hours somewhere between 12:00 pm and 12:00 pm.

Our solution for workers on the graveyard shift was to extend the slider. Unfortunately, the slider’s increased range made it a bit harder to select a time of day.35
Our solution for workers on the graveyard shift was to extend the slider. Unfortunately, the slider’s increased range made it a bit harder to select a time of day. (View large version36)

These are just a few of the eye-opening edge cases that calendars, time-based calculations and a diverse and international audience made us think about. Apple does a lot to help developers support these use cases out of the box and directly from the operating system, but only if you let it.

Build for the world, not just your world, and don’t reinvent the wheel.

6. Invest Time In Subtle Details — People Will Notice

Here’s something we did right. We spent a lot of time improving and perfecting the loading animation and other subtle animations throughout the app (such as for updating settings, filtering, etc.). This level of polish was ahead of its time and really set the user experience apart.

Perfecting animations throughout the app was ahead of its time and set the user experience apart.
Perfecting animations throughout the app was ahead of its time and set the user experience apart.

Animations in apps are more commonplace these days and are becoming more of a requirement with the new UI paradigms introduced in iOS 7. Still, a well-crafted animation is still a fantastic way to set your app apart from the pack. Finding the right balance between features and subtleties that surprise and delight users is an important step in creating a memorable experience. When I speak with people about Free Time, many of them remember the spinning cloud and the clock hands and nothing else. They vaguely remember that it has to do with calendars, but they always remember this animation.

Think critically about what kinds of memorable experiences you can create, and make them wonderful.

7. Keep Pushing — Great Ideas Deserve To Live

This was our biggest mistake. Great ideas deserve to live, and giving up on one too quickly does a disservice both to your users and to the idea. While full-time jobs and nascent careers took precedence for all of us after graduating, our lack of continual refinement and updates over the years is one of my biggest regrets.

A graph chronicling the declining usage of Free Time over 2013. New users are highlighted in red.37
A graph chronicling the declining usage of Free Time over 2013. New users are highlighted in red. (View large version38)

With only six updates since 2011, usage has fallen dramatically due to application bugs, OS updates and a loss of faith in our ability to maintain the product:

  • Only 50% of people use the app for more than six days.
  • Only 15 to 20% return after one month.
  • Between 2012 and 2013, sessions declined by 59%; the average session length declined by 55% (down to 1 minute 34 seconds); and users declined by 61% (down to 20,000).

People form an emotional bond with the software they use. Throughout Free Time’s life in the App Store, we have continued to receive emails from people who go out of their way to express how much they love using the app and how it has completely changed the way they look at calendars. When building an app that people will use every day, think about how you will evolve it over time and adapt to your customers’ needs.

Just last week, we got this email:

Are you ever going to update Free Time? I work two jobs and scheduling is tough, but this app helps. Just letting you all know the app is great and I would love to see it continue!

Recap

So, we did a lot of things right and a lot of things wrong, but the real disappointment for us and our users is that we never really improved the app beyond the initial few months. We could have built an Android version, an iPad version, a web version and a Mac version, and we could have experimented with our pricing model to better suit our users, but we didn’t. For various reasons, life got in the way and we gave up too quickly. I’m sure we could have turned it into a viable business, but we opted to pursue other things.

Thankfully, we aren’t done with the app, and we’ll be launching version 2 in the coming months after a long hiatus. We’ve learned quite a bit, and we’re changing a lot: the calendar view is now front and center; the focus is on finding Free Time, not sharing it; and the number of features has been drastically reduced (much to our chagrin).

A screenshot of a beta version of Free Time 2.39
A screenshot of a beta version of Free Time 2. (View large version40)

As you build your next great idea or even build an idea that just scratches your own itch, remember the following:

  • Embrace your limitations and use them to your advantage.
  • Create something that changes people’s perspectives, so that they never forget you.
  • Don’t be afraid to iterate often, but resist the urge to add more during each iteration.
  • Trust your instincts and build something that you will love (even if others might not).
  • Build for the world, not just your world.
  • Don’t give up.

Oh, and think twice about building a calendar app. It could be a real drain on your free time! You can sign up to hear more about Free Time 241, or check out Free Time in the App Store42.

(al, ml)

Footnotes

  1. 1 http://www.smashingmagazine.com/wp-content/uploads/2014/07/01-free-time-banner-opt.jpg
  2. 2 http://www.smashingmagazine.com/wp-content/uploads/2014/07/01-free-time-banner-opt.jpg
  3. 3 http://www.crunchbase.com/company/tungle
  4. 4 http://doodle.com/
  5. 5 http://whenisgood.net/
  6. 6 http://www.scheduly.com/
  7. 7 https://gettingreal.37signals.com/ch03_Embrace_Constraints.php
  8. 8 http://www.smashingmagazine.com/wp-content/uploads/2014/07/02-free-time-featured-opt.jpg
  9. 9 http://www.smashingmagazine.com/wp-content/uploads/2014/07/02-free-time-featured-opt.jpg
  10. 10 http://www.smashingmagazine.com/wp-content/uploads/2014/07/03-freetime-calendar-zoomed-opt.jpg
  11. 11 http://www.smashingmagazine.com/wp-content/uploads/2014/07/03-freetime-calendar-zoomed-opt.jpg
  12. 12 http://www.smashingmagazine.com/wp-content/uploads/2014/07/04-free-time-before-and-after-opt.jpg
  13. 13 http://www.smashingmagazine.com/wp-content/uploads/2014/07/04-free-time-before-and-after-opt.jpg
  14. 14 http://www.smashingmagazine.com/wp-content/uploads/2014/07/05-ft-share-concept-early-opt.jpg
  15. 15 http://www.smashingmagazine.com/wp-content/uploads/2014/07/05-ft-share-concept-early-opt.jpg
  16. 16 http://www.smashingmagazine.com/wp-content/uploads/2014/07/06-ft-share-concept-middle-opt.jpg
  17. 17 http://www.smashingmagazine.com/wp-content/uploads/2014/07/06-ft-share-concept-middle-opt.jpg
  18. 18 http://www.smashingmagazine.com/wp-content/uploads/2014/07/07-free-time-sharing-opt.jpg
  19. 19 http://www.smashingmagazine.com/wp-content/uploads/2014/07/07-free-time-sharing-opt.jpg
  20. 20 http://www.smashingmagazine.com/wp-content/uploads/2014/07/08-icon-comparison-updated-opt.jpg
  21. 21 http://www.smashingmagazine.com/wp-content/uploads/2014/07/08-icon-comparison-updated-opt.jpg
  22. 22 http://www.smashingmagazine.com/wp-content/uploads/2014/07/09-free-time-walkthrough-opt.jpg
  23. 23 http://www.smashingmagazine.com/wp-content/uploads/2014/07/09-free-time-walkthrough-opt.jpg
  24. 24 http://www.smashingmagazine.com/wp-content/uploads/2014/07/10-free-time-usage-opt.jpg
  25. 25 http://www.smashingmagazine.com/wp-content/uploads/2014/07/10-free-time-usage-opt.jpg
  26. 26 http://www.smashingmagazine.com/wp-content/uploads/2014/07/11-confusion-opt.jpg
  27. 27 https://www.flickr.com/photos/tsmyther/48428707/
  28. 28 http://www.smashingmagazine.com/wp-content/uploads/2014/07/11-confusion-opt.jpg
  29. 29 http://www.smashingmagazine.com/wp-content/uploads/2014/07/12-buddhist-calendar-opt.jpg
  30. 30 http://www.smashingmagazine.com/wp-content/uploads/2014/07/12-buddhist-calendar-opt.jpg
  31. 31 http://www.smashingmagazine.com/wp-content/uploads/2014/07/13-free-time-weekends-opt.jpg
  32. 32 http://www.smashingmagazine.com/wp-content/uploads/2014/07/13-free-time-weekends-opt.jpg
  33. 33 http://www.smashingmagazine.com/wp-content/uploads/2014/07/14-free-time-select-hours-opt.jpg
  34. 34 http://www.smashingmagazine.com/wp-content/uploads/2014/07/14-free-time-select-hours-opt.jpg
  35. 35 http://www.smashingmagazine.com/wp-content/uploads/2014/07/15-free-time-work-hours-opt.jpg
  36. 36 http://www.smashingmagazine.com/wp-content/uploads/2014/07/15-free-time-work-hours-opt.jpg
  37. 37 http://www.smashingmagazine.com/wp-content/uploads/2014/07/17-declining-usage-opt.jpg
  38. 38 http://www.smashingmagazine.com/wp-content/uploads/2014/07/17-declining-usage-opt.jpg
  39. 39 http://www.smashingmagazine.com/wp-content/uploads/2014/07/18-free-time-opt.jpg
  40. 40 http://www.smashingmagazine.com/wp-content/uploads/2014/07/18-free-time-opt.jpg
  41. 41 http://signup.freetimeapp.com
  42. 42 https://itunes.apple.com/us/app/free-time/id429232593?mt=8

The post How Limitations Led To My Biggest App Store Success and Failure appeared first on Smashing Magazine.

How to design a successful web app walkthrough

Go to Source

thumbnailWe’ve all interacted with an app walkthrough at some point or another. Heck, some of us designed them.

But when you take a look at the design literature out there, you will notice there is very little that specifically deals with app walkthroughs. They are such an important aspect of an app’s overall experience because, after all, they are the first interaction a user has with an app (if the walkthrough is present that is).

In this post, I have gathered a few tips for you by observing current apps to see what they do with their app walkthroughs and what we can learn from them.

Should your app have a walkthrough?

I wanted to start this post by pointing out that there are some apps with should have walkthroughs but don’t, and some apps that have them but shouldn’t.

The purpose of a walkthrough is to provide insight about what your app can do. If your app is simple enough, or self-explanatory enough, it may not need a walkthrough, in which case save your time for something more vital.

But, if your app has hidden functionality, a walkthrough is a great place to demo it, so that users don’t miss out.

Take Litely for example. Litely is a photo editing app and it has a bunch of hidden gestures that can improve the experience of the overall app. It lets you view the picture, before you added any filters, by simply taping the photo with two fingers. Instagram lets you do this too but it uses only one finger. No one knows about this functionality because Litely doesn’t tell you about it; if you discover this functionality in Litely, you do so by accident.

On the other hand we have an app like SoundCloud, which has a lovely looking walkthrough at the beginning of the app experience. However, one of the screens explains to you something very obvious: how to follow another user and what to expect from the search icon. You’d be ard pressed to find an app user who doesn’t understand the magnifying glass icon, so when it comes to this specific screen from SoundCloud there’s little to gain from wasting a user’s time. The walkthrough would have been just as successful without it.

How to design a successful web app walkthrough

 

Pay attention to the design

It’s hard to create a walkthrough if you haven’t created the app, so walkthroughs are often created last. This frequently leads to a lot of inconsistencies.

If you are going to have a walkthrough, make sure the design of it is just as solid as the rest of your app. A good looking walkthrough is important because it is in fact the first thing your users will see. It’s crucial to have the walkthrough implemented in your brand’s style so you don’t confuse users.

Take advantage of graphics and animations

Walkthroughs are so much more engaging when they use great pictures or images. Better yet, walkthroughs that use animations are great at catching users’ attention. The best example of this is Box. Box is a cloud based file storing app; when you first use their app they have a quick walkthrough where they demonstrate to you how the app is versatile and supports many different file formats across various devices.

How to design a successful web app walkthrough

Better yet, the walkthrough uses a single file and it animates it as the file jumps from one slide to another. The experience is so pleasant because it’s clever and looks really well thought out. The visual design of the walkthrough is good too as the slides/pages have a clean design. 

Make it interactive

Because a walkthrough is supposed to educate your user about how your app works you might want to consider making it interactive. The best way to get people to see the cool functionality of your app is by making them use it. The current version of Mailbox, an email client app, has a nifty walkthrough that tells you about the hidden functionality of sorting email by swiping it left or right. It tells you that if you swipe right the email will archive; next, it makes you do it. It can be a dangerous decision to make users interact with your walkthrough but in Mailbox’s case the request is simple, all the user has to do it swipe! It’s a brilliant idea show the user exactly what they can expect from the app.

If done right, an interactive walkthrough can be a fun way to get people excited about using your product.

How to design a successful web app walkthrough

 

Provide an easy way to skip

I’m sad to say some users will not care for your walkthrough no matter how great looking, how well thought out, or how informative it may be.

It’s a good idea to not block people from using your app, and you don’t want users who aren’t interested in the walkthrough compelled to complete it. An easy solution is to have a simple skip button whether it literally says “Skip this” or it’s a big ol’ X in the top right corner of the screen. If you go with a button you have some room to play with copy; you can say something like “I’ve got this!” or a little bit bolder like “I’ve got it, let me use it.” Have fun with it and maybe you’ll convince your user to stick it out.

Lovely is an app that does this well. When you first open the app there is a walkthrough but you can always skip it by pressing the big orange button that says “Get Started”. It’s always there, from the beginning and not just towards the end.

There are other options available to you. What you can simply do is allow users to freely swipe through the walkthrough. In the case of Box, all a user has to do is wipe left a few times to get through to the end and use the app. There are no gimmicks implemented by the app that stop you from doing just that.

Authentic Weather is another example. When you download the app all you get is a simple page screen walkthrough, which disappears when you tap it anywhere. The walkthrough is then done and the user can enjoy the app. If someone cares to read what the screen said, great! If not, they are into the app now anyway.

How to design a successful web app walkthrough

 

Walkthroughs and onboarding

Sometimes walkthroughs incorporate onboarding or they are not actually walkthroughs at all and the user has to create an account in order to use the app. Whether or not this is the right thing to do is a whole other discussion. I will point you towards this article, which talks about why you might not want to do that: Two Reasons to Forgo Sign Ups and Let People Use Your Product First. If you are making people follow a strict sign up from the get-go consider these two scenarios.

Scribe is an app which lets you share information between your iPhone and you Mac such as phone numbers or images. In order to use the app you have to connect the two. When you open the app for the first time, it gives you specific and clear instructions on how to proceed. It tells you exactly what to do and if something goes wrong it even provides solutions. The app goes out of its way to help users in completing the onboarding with ease.

Crazy Blind Date was a dating app from OKCupid that found users blind dates, as the name suggests. In order to create an account the user had to upload a photo first. The experience of doing so could be terrifyingly difficult. The copy was actually incorrect – you could also upload a photo – but you could not upload a photo if your phone was offline, fail to take one and the icon itself is not prominent enough. This poor usability is probably the reason Crazy Blind Date is no longer available.

How to design a successful web app walkthrough

 

Featured image/thumbnail, uses iPhone 5c mockup by Ben Lee

Fun Skitch Font Family (all 11 fonts) – only $9!
How to design a successful web app walkthrough

Source