Skip directly to content

Smashing Magazine

Subscribe to Smashing Magazine feed
For Professional Web Designers and Developers
Updated: 8 min 30 sec ago

Tips For Mastering A Programming Language Using Spaced Repetition

Tue, 08/19/2014 - 12:39

Since first hearing of spaced repetition a few years back, I’ve used it for a wide range of things, from learning people’s names to memorizing poetry to increasing my retention of books.

Today, I’ll share best practices that I’ve discovered from using spaced repetition to learn and master a programming language.

Some great articles on this topic are already out there, including “Memorizing a Programming Language Using Spaced Repetition Software1” by Derek Sivers and “Janki Method2” by Jack Kinsella. But because you’re busy, I’ll quickly summarize some of the best practices that I’ve learned along the way.

First things first.

What Is Spaced Repetition?

Spaced repetition is a system for permanently remembering something using the minimum number of repetitions necessary. The most popular tool for this is Anki3, a free desktop app that enables you to create and review digital flashcards organized by deck.

In short, whenever you want to remember something, you would create a card in Anki and review it regularly.

The cool part about Anki is that, if you do it right, you’ll need to spend only about 5 to 10 minutes a day reviewing your cards. If you do this, you’ll be able to remember way more than you ever imagined, and you’ll be much more productive.

Let’s dive into the specifics.

How to Use Anki

For anything you want to learn, create a flashcard with a front and a back. When you review a card, Anki will show you the front, hiding the answer side.

4Front side of flashcard (View large version5)

Answer the question in your head, and then reveal the other side to see whether you got it right.

6Back side of flashcard (View large version7)

Then, assess how easily you answered the question, and select one of four options: “again,” “hard,” “good” or “easy.” Based on your selection, Anki figures out when to show you that card again.

And, yes, you can even use images in your cards.

By now, you’re excited to get started. But before you do, let me share a few tips.

1. Break Down Your Knowledge Into The Smallest Possible Units

Though not obvious at first, there are good and bad ways to create cards. For example, here’s a bad way to write a card:

  • Front
    “What does Ruby’s strip method do?”
  • Back
    “It trims spaces and blank lines from the beginning and end of a string.”
Why Is This bad?

First, you probably won’t be able to remember how exactly you phrased the answer because it will have been so long ago. So, each time you answer the card, you’ll have to judge whether the way you’ve explained it corresponds to what you wrote on the back of the card.

Secondly, answers that are open-ended and that consist of more than just one or two words take longer to answer. Even if it takes only a few extra seconds, those extra seconds add up over time.

Thirdly, you wouldn’t be learning how to apply this concept. Definitions are not as practical as clear examples.

Instead, I would do this:

  • Front
    “What Ruby method would you use to format Jessica?”
  • Back

That’s much easier.

For a great guide to formatting knowledge, check out “20 Rules of Formulating Knowledge8” by Piotr Wozniak.

2. Use Cloze Deletion

Following the rule above about Ruby methods was pretty easy until someone told me that class names, module names and constants start with an uppercase letter in Ruby. So, I created the following card:

  • Front
    “In Ruby, which things begin with an uppercase letter? (Hint: three things)”
  • Back
    “Class names, module names and constants”

The problem is that I had to recall three things, and the question was ambiguous, so it took a long time to understand.

Then, I learned about a feature of Anki called cloze deletion.

Instead of setting a front and back of a card, you would use cloze deletion to set a block of text and then tell Anki which bits of the text to remove from the card and to test you on. It looks something like this:

  • Text
    In Ruby, {{c1::class names}}, {{c2::module names}} and {{c3::constants}} start with {{c4::an uppercase letter.}}.”

This generates four cards, each of which blanks out only one of those variables.

9Front of cloze deletion card (View large version10) 11Back of cloze deletion card (View large version12)

There’s even a bad-ass plugin, Image Occlusion13, to apply cloze deletion to images.

3. Add A Card Only After You’ve Tested It

While Anki is an incredible learning aid, it’s only one way to retain information. At the end of the day, you need to apply what you’re learning. Remembering a concept will be much easier if you have experience applying it.

If you only read about a programming concept without trying it out for yourself, then your understanding will probably be incomplete. When I think something is trivial or obvious, like where to put a space or comma, I’ll usually have a hard time remembering it when it matters. For example:

  • Front
    “In Ruby, create getter and setter methods for name and email.”
  • Back
    attr_accessor :name, :email

Without actually trying this out, I might forget whether attr_accessor has a colon after it, whether it accepts strings, where the commas go, etc.

A nice side effect of this is that if you brush up on this every once in a while, you’ll sometimes find that a card is no longer accurate.

4. Save Cool Tricks And Best Practices

Always save tricks and best practices that you read about, see in a video or notice in other people’s code.

I once saw someone do a cool trick in the command line to display all of Ruby’s core methods in the interactive Ruby shell (IRB). So, I made this card:

  • Front
    “How do you display all of the core methods in the IRB?”
  • Back
    Kernel:: + (Tab) + (Tab)

Doing this guarantees that your code will get better over time. Even experienced developers should look out for best practices and clever techniques. It could mean the difference between quickly remembering the name of that obscure command and hunting through StackOverflow for half an hour.

5. Practice Every Morning For About 10 Minutes

The real value comes from frequent, short practice sessions. If you take more than a few days off, then your review backlog will grow, and you’ll have trouble recalling facts that you’ve recently learned. (Don’t worry: Anki caps each deck at 60 cards, and you can adjust this number.)

I like to practice my spaced repetition in the morning on the subway. As long as I stay up to date, it usually takes around 5 to 10 minutes to finish.

One last thing. I know that some of you will ask to see my deck. I highly recommend creating your own. Sure, you could download some decks out there to get started — such as Jack Kinsella’s web development deck14 or Derek Sivers’ decks for Ruby15 (ZIP) and JavaScript16 (ZIP) — but your own cards will be much more personal, formatted to how you learn and recall facts. You won’t learn or remember nearly as well by using someone else’s deck.

I’m sure that my techniques will change over the next few years, so I’ll try to keep this post up to date. Have you used spaced repetition or any other techniques to master a programming language? Do you have any tips to share? Please do so in the comments below.

(al, ml, il)

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16

The post Tips For Mastering A Programming Language Using Spaced Repetition appeared first on Smashing Magazine.

The Current State Of E-Commerce Search

Mon, 08/18/2014 - 13:04

When e-commerce search works, it’s fast, convenient and efficient. It’s no wonder that so many users prefer searching over clicking categories. Unfortunately, our recent large-scale usability study and top-50 benchmark of e-commerce search finds that search often doesn’t work very well.

On-site search is a key component of almost any e-commerce website. That’s why we at Baymard Institute have invested months conducting a large-scale usability study, testing the e-commerce search experience of 19 major e-commerce websites with real-world end users.

We’ve boiled our findings down to 60 usability guidelines for e-commerce search design and logic. Based on these findings, we’ve benchmarked the search experience of the 50 top-grossing US e-commerce websites, rating each website across all 60 search usability parameters. In this article, we’ll present some of the findings from this vast research data set and explore the state of e-commerce search.

150 e-commerce websites benchmarked and ranked across 60 search usability guidelines. (View large version2)

Benchmarking the search experience of the 50 top-grossing US e-commerce websites reveals a surprisingly grim state of affairs. Here’s a walkthrough of just a handful of the most interesting statistics:

  • 16% of e-commerce websites do not support searching by product name or model number, despite those details appearing on the product page! An additional 18% of websites provide no useful results when the user types just a single character wrong in the product’s name.
  • 70% require users to search by the exact jargon for the product type that the website uses, failing to return relevant products for, say, “blow dryer” if “hair dryer” is typed, or “multifunction printer” if “all-in-one printer” is typed.
  • Searches with symbols and abbreviations are not supported by 60% of e-commerce websites. For example, the websites do not map the double quotation mark (often substituted for the double prime symbol: ″) or “in” to “inch.”
  • Autocomplete suggestions are found on 82% of e-commerce websites. While some implementations greatly enhance the search experience, 36% of implementations do more harm than good.
  • Only 34% allow users to easily iterate on their query by prefilling it in the search field on the results page, despite the fact that, according to our tests, users frequently need to iterate on their query — on average, 65% of test subjects required two or more query attempts during testing.
  • Only 40% of websites have faceted search, despite it being essential to e-commerce search because it is the foundation of contextual filters.
  • While an e-commerce website eases navigation by offering two types of breadcrumbs, 92% of the top-50 websites display only one breadcrumb type or none at all.

Below, we’ll walk through each of the above statistics and provide insight on how to improve the search experience and success rate on your e-commerce website. We’ll round the article off with a general analysis of the current state of e-commerce search.

1. 34% Do Not Support Users’ Searches By Product Name

At the heart of a good e-commerce search experience is the search engine’s ability to return relevant results for the query. While our usability study identified 12 unique types of search queries3 that users make on e-commerce websites, let’s stick to the most basic ones here, because even those prove troublesome for a significant portion of the top e-commerce website.

4Here on Kohl’s5, an exact query for a KitchenAid model number yields no results (top), despite the model number being part of the mixer’s product page data (bottom). While this might seem like a bizarre one-off case, it is the reality on 16% of the top-grossing e-commerce websites. (View large version6)

The simplest query type is an exact search, whereby users search by a specific product name or model number. Yet 16% of the top benchmarked e-commerce websites do not support searches for product names or model numbers that appear on the respective product pages. The reason is probably that the search logic of these websites is based entirely on matching the user’s keywords against the product title or main product description, instead of the full data set. Whatever the reason, it makes for a poor experience, with grave consequences.

During testing, users would (rightfully) conclude that a website that displays no results for a query so specific means that the company doesn’t carry the product. And if you’re wondering how many users actually searched by product name or model number, they frequently did during our testing. Multiple test subjects began their initial product research on an external website, starting with a Google search, or on a manufacturer’s website, a review website, etc. Only when they had decided on one or more products did they copy and paste the product’s name or model number directly from the external website into the search field on one or more e-commerce websites.

A user searching for “Ho-Medics Ultra sonic” (left), instead of the correct “HoMedics Ultrasonic” (right), will get two irrelevant results on Target’s website8. Notice how this is barely a misspelling of the product’s name. (View large version9)

Another search pattern for exact searches that is ill-supported by the top e-commerce websites is phonetic misspellings. 18% of websites handle phonetic misspellings so poorly that users would have to be able to pass a spelling test in order to get relevant results. For example, the query “Kitchen Aid Artysan,” rather than “KitchenAid Artisan,” yields no results. While misspellings can occur in any scenario, phonetic misspellings are particularly common when users have only verbally heard a product’s name and later try searching for it. This isn’t unusual in the discovery process, if we consider how often products are recommended by friends and colleagues. Suggesting the correct spelling10 on the results pages is recommended, then. And if the search engine automatically processes the query when it finds no matches or a few poor matches for the user’s spelling, even better.

Implementation Tip

Assuming that users will spell perfectly is unreasonable. And it’s important that the search logic broadens the query’s scope and looks for closely related spellings, especially if only a few results of low relevance would be returned. Furthermore, the logic should search the entire data set of products to include matches for product names and model numbers.

2. 70% Require Searches In The Website’s Jargon

Another common search query type in e-commerce is the product type query, whereby a user knows the type of product they want but doesn’t know of or hasn’t decided on a particular product. So, they simply search for, say, “blow dryer” or “multifunction printer,” two queries that often lead to no results because the “correct” name for that product type is “hair dryer” or “all-in-one printer.”

To fully support product type queries, the search engine’s logic must go beyond the exact titles and descriptions of products, and look to the categories that products are placed in, as well as take product synonyms into account.

11Users have to use a website’s jargon to search by product type. Here, “writing table” returns none of the many “writing desks” available on J.C. Penney12. (View large version13) 14
Similarly, “dress shirt” isn’t recognized by American Eagle Outfitters15, which serves up t-shirts and casual shirts as the top results, instead of its long-sleeved Oxford and solid-color shirts. (View large version16)

However, only 30% of e-commerce search engines include keywords from each product’s parent category or map a set of synonyms to product titles, product types and category names. As a result, users have to use the website’s exact jargon for their product type queries on 70% of websites, as seen in the two examples above.

Product type synonyms were observed to have a particularly large impact on the user’s search experience during testing, because it can be very difficult for users to tell whether they are using a wrong term, and even more so to guess what the “correct” term is. Therefore, a lack of synonym support was observed to be a direct cause of website abandonment, because users assumed that the website doesn’t carry the products that they searched for.

Implementation Tip

At the very least, manually map common product type synonyms to the actual product types and category names. A better long-term solution would be to build keyword synonym logic, because this can more easily be updated, tweaked and even personalized on a regular basis.

3. 60% Don’t Support Searches With Symbols And Abbreviations

Some products have specifications that are vital to the user’s purchasing decision. When searching for such products, our test subjects frequently included those specifications directly in their search queries (for example, “13″ laptop sleeve”), making them feature queries.

But do users usually search for “13 inch laptop sleeve” or “13″ laptop sleeve”? Of course, both queries should present exactly the same results, because users have no way of knowing how each website denotes such units of measurement, and all ways are equally “correct” and used interchangeably across the Internet. In case you think we’re stating the obvious here, 60% of the top e-commerce websites do not support searches with symbols and abbreviations. So, users will miss out on perfectly relevant products if they search for “inch” and the website uses the double prime symbol (″) or the abbreviation “in,” or vice versa.

17If all abbreviations, symbols and full spellings are not mapped to each other, many users will miss out. The queries “11 ft. paddleboard” and “11 foot paddleboard” yield no results, because REI18 only supports the query “11′ paddleboard”. People who do not understand search engine logic will probably conclude that REI doesn’t carry 11-foot paddleboards. (View large version19)

Breaking down such technical hindrances and mapping common symbols and abbreviations is important, so that users find the products they are looking for and get the same results regardless of what a website or its suppliers have decided to use. Most websites are small enough that synonyms, abbreviations and full spellings could be manually mapped for the most common units.

Implementation Tip

Map all common symbols, abbreviations and full spellings to each other, so that all results are shown regardless of how a query is written. A quick way to identify candidates for mapping is to look for units of measurement in all product titles. A more thorough way is to compile a list of units of measurement by going over all product specifications.

4. Auto-Suggestions Found On 82% Of Websites

Auto-suggestion is a convention of e-commerce search, with 82% of large websites offering it.

The value of autocomplete suggestions isn’t that they speed up the typing process, but that they guide users to better queries. When auto-suggestions are done well, they teach users the types of queries to make, show them correct domain terminology, help them avoid typos and assist them to select the right scope in which to search.

During usability testing, autocomplete suggestions directly influenced and altered what the test subjects decided to search for. While this is their purpose, it also means that autocompletion can do more harm than good if not implemented carefully.

“I don’t really know what the difference is. Which one is spelled correctly?” a test subject asked, referring to the two auto-suggestions for “samsung adapter” and “samsung adaptor” on Newegg20. While this redundancy is seemingly innocent, it frequently made the test subjects wonder whether different results would appear because the website suggested both.

Among the websites that do have autosuggest, 36% of them have implementations with severe usability problems. Two problems frequently observed in testing are query suggestions that either are repetitive or lead to a dead end.

21Notice how OfficeMax22 suggests a dead end in its autocompletion. When the last suggestion, “RT335WOOD,” is selected (top), the user gets no results (bottom). (View large version23)

While avoiding dead ends might seem obvious, such suggestions were observed multiple times during benchmarking. They were often the result of auto-suggestions being based on the prior searches of other users or old catalog contents, regardless of whether they proved to be useful. Developers should at least internally query all suggestions on a regular basis and weed out those without any results.

24Another common problem with autocompletion, especially when based on users’ past queries, is redundant suggestions. Notice how suggests25 the keyword “coffee” three times, leading to a lack of overview. (View large version26)

To provide high-quality search suggestions, look at how suggestions are generated. Many suggestions that are redundant, of low quality or typos are likely the result of developers sourcing suggestions from the website’s search logs. If this strategy doesn’t take into account the success of those queries (that is, whether a decent percentage of users found and purchased products after performing those searches), then it is flawed.

Unless you track the success of search queries, don’t use search logs to generate auto-suggestions because that would result in redundant and low-quality suggestions. Aside from outright duplicate suggestions (as seen in the example above, which could easily have been filtered out), redundant suggestions are ones that overlap and make it difficult for the user to select one over the other. Notice in the example how five variations of “coffee table” are suggested, despite the user having only typed “coffee” at this stage. These nuances might have made sense if the user had typed “coffee ta–.”

Northern Tool allow users to iterate on auto-suggestions.

We also found that copying a suggestion to the search field when the user focuses on it with their keyboard (as illustrated above) is an important detail in autocompletion design because it enables users to iterate on a suggestion.

(We identified eight autocomplete design patterns27 during testing.)

Implementation Tip

Given that autocompletion design and logic will directly alter what most users search for, ensuring the high quality of suggestions by weeding out dead ends and being selective in the inclusion of suggestions is vital. Suggestions based on other users’ past queries should be carried out with special care or avoided entirely; ideally, any machine learning should be based on the success rate (or conversion rate) of each query.

5. Only 34% Prefill The User’s Query On The Results Page

During testing, 65% of all test subjects’ attempts at searching consisted of two or more queries in the same search. However, only 34% of e-commerce websites allow users to easily iterate on their query by prefilling the query in the search field on the results page.

28“Maybe I should… Argh, it’s really frustrating that it disappears up here, that it doesn’t keep displaying [my query]. That is actually very annoying, because I just want to add ‘13,’” a test subject explained as she made her third search attempt on Best Buy29. Because the search query didn’t persist, she had to retype the phrase three consecutive times. (View large version30)

On websites that do not persist the user’s query in the search field, the iteration process became needlessly cumbersome and easily frustrated subjects. Not persisting a query introduces friction at the worst possible time because redundant typing is added to the already disappointing experience of not receiving relevant results.

The amount of time that test subjects spent retyping their query is insignificant, but as observed in all of our prior usability studies that involve filling out forms (see the second point in “Exploring 10 Fundamental Aspects of M-Commerce Usability31” and the fifth point in “The State of E-Commerce Checkout Design 201232,” both on Smashing Magazine), the user has a negative perception of a website that forces them to retype the same data within a short timeframe, which often sparks remarks such as “Tedious,” “Idiotic” and “Do you think they’ve tried using their own website?” This is especially true on touch devices, where typing is particularly taxing.

33“There’s product type, there’s brand, there’s price, there’s color, but I’m missing a size option,” a subject noted after having searched for “sleeve” on Zappos (top). In this instance, the subject made up for the website’s lack of a “size” filtering option by simply adding “11″” to his persisted “sleeve” query (bottom). (View large version34)

The picture was completely different on those websites that persist queries on the search results page. Here, test subjects weren’t forced through a needless halt-and-retype process each time they wanted to iterate on their query, but instead made swift changes by adding or removing a word or two from their original query, as seen in the Zappos example above, where the user simply added “11″” to his prior query.

Implementation Tip

Given how relatively simple this is to implement, persisting the user’s query in the search field on the results page can be considered low-hanging fruit in search optimization.

6. Only 40% Have Faceted Search

In a perfect world, we would have little need to filter and sort search results because users would make precise queries, knowing exactly what they want, and the website’s search logic would return just the right results.

This is far from reality, however; filtering and sorting are vital ways that users find the right product among the results. This is partly due to the challenge of getting search logic and design just right (as we’ve hinted at in the preceding five points), but also partly due to how and when users search. Users will not always be able to perfectly specify their queries, simply because many still haven’t fully decided or realized what they are looking for.

In both cases, being able to modify search results by filtering and sorting is a powerful and important tool. During testing, the quality of the filtering and sorting features and their design often meant the difference between success and failure in the subjects’ search experience.

35“Here, I got 287 sofas. Can’t we… Hmm… Let’s select something here,” a subject said after seeing the many results for his product type query “sofa.” While the results were relevant, notice how IKEA doesn’t have faceted search. With faceted search filters, the subject could have had the option to select, say, “Sofa Size: 2-person, 3-person,” “Sofa Material: fabric, leather, synthetic,” etc. (View large version36)

Our testing confirmed that the foundation of a contextual filtering experience in e-commerce search is faceted search. With faceted search, the user is presented with a list of filters for product attributes, filters that apply only to a part of the search results. For example, the search results for “Tom Hanks” could have a “movie duration” filter even though the results include books, and the search results for “down filling” could have a filter for “sleeping bag temperature rating” even though the results include other product types.

The traditional way of suggesting only generic scope filters (categories) and site-wide filters (price, brand, availability, etc.) for site-wide search results is insufficient for a good experience. Product-specific filters based on the user’s query must be suggested, too. However, only 40% of e-commerce websites currently do this via faceted search filter suggestions.

37The site-wide search for “Tom Hanks” returned not only movies, but other product types, such as books (for example, biographies). However, with the faceted search filters on Amazon38, this subject was able to quickly select “Movie Release Date: 2010 & newer” to see just the newest movies starring Tom Hanks. Without faceted search, the subject would have had to first select a scope filter (books, posters, movies) in order to see the movie-specific filter “Release Date.” (View large version39)

While faceted search is a crucial component of search filtering, it doesn’t make for a good filtering experience on its own. Also crucial are the filtering types (such as thematic filters), the filters’ design details and the filtering logic (for example, avoiding mutually exclusive filters, as explained in the third point of “Best Practices for Designing Faceted Search Filters40”).

41The feature search query “down filling” yields multiple product types on REI42, including jackets and sleeping bags. The seemingly relevant “temperature rating” filter is actually a faceted filter that applies only to the website’s “sleeping bag” scope, yet the label doesn’t indicate this. Thus, when the user applies the “temperature” filter, all of the “down-filled” jackets are removed from the results. (View large version43)

Furthermore, faceted search filters were observed to have usability issues of their own. One challenge is that when the filters also invoke a higher-level scope, they need to clearly indicate this in their label. Otherwise, users will likely be misled because they have no way to accurately predict the implications of applying the filter, as illustrated in the REI example above.

Faceted search’s labelling issues aren’t solved simply by including the filter’s context in the filter label (for example, permanently having the filter read “Sleeping Bag Temperature Rating”). That would hinder users who have already applied a search scope (and users who are using category navigation) because it would make the labels needlessly difficult to scan due to a lack of front-loaded information and a poor signal-to-noise ratio. Therefore, if faceted search filters invoke a scope, then a dynamic labeling system is needed to keep the filter labels concise and scannable when the user has already selected a context (for example, navigated to a category or applied a search scope) and then dynamically rename the filter labels to indicate the scope-related implications of applying that filter. Such a dynamic filter labeling system is illustrated in the example below:

44When in the “Digital Cameras” scope on Amazon, the filter labels are optimized for scannability by removing redundant scope terms, resulting in concise titles such as “Viewfinder Type,” “Image Stabilization” and so on (View large version45) 46On the other hand, when users make a site-wide search, the (faceted) filtering suggestions are dynamically renamed to include the scope’s context, so that they now read “Camera Viewfinder Type,” “Digital Camera Image Stabilization” and so on, making it much easier for the user to infer that a category scope will be applied if selected. (View large version47) Implementation Tip

Don’t simply rely on generic site-wide filters, such as category, price and brand. Rather, provide product-specific filters that relate directly to the user’s query (through faceted search). If the faceted search filters invoke a scope, then the filter labels need to be dynamically renamed to indicate this. Also, consider whether sufficient filtering types are available. For example, thematic filters such as style, season and usage context often map closely to users’ purchasing parameters.

7. 92% Have Only One Breadcrumb Type Or No Breadcrumbs At All

During testing, breadcrumbs proved to be helpful for test subjects when navigating both search results and when looking through categories to find just the right product. Interestingly, testing also revealed that e-commerce websites need two different types of breadcrumb links — namely, hierarchical and history-based breadcrumbs. Yet, 92% of the 50 top-grossing e-commerce websites display only one breadcrumb type (72%) or no breadcrumbs at all (20%).

48Neither history-based nor hierarchical breadcrumbs is available on Wayfair49, making it difficult for users to get back to their search results or to access related products from the current category. Here, the hierarchical breadcrumbs would have been “Kitchen” → “Small Kitchen Appliances” → “Espresso Makers” → “Stovetop Espresso Makers.” (View large version50)

Without breadcrumbs on the product page, users will find it difficult to efficiently browse a collection of products, because they have no way to go one level up in the hierarchy to the product category or to return to the search results page. In practice, this often forces users to make a drastic jump in scope, such as selecting a generic top-level category, or else perform a new search or remain stuck on the product page.

With traditional hierarchical breadcrumbs, any user who doesn’t find a particular product to be a good match can use the breadcrumbs to traverse up the website’s hierarchy and navigate to a related category. This is paramount for non-linear navigation such as search, because it enable users to see other products in the same category as an item in a search result. The hierarchy essentially acts as a cross-navigation link for finding related products, regardless of whether the user has accessed the category from a completely different part of the website. (The same non-linear behavior was observed to hold true for all external traffic landing directly on product pages.)

51Nordstrom52 has history-based breadcrumbs, giving users a “Back to results” link to return them to the search results, with all previous filtering and sorting settings intact. However, the lack of hierarchical breadcrumbs makes it difficult for users to infer or jump scope. (View large version53)

During testing, it quickly became evident that most subjects had a strong desire to go “one step back” after exploring a product page. This typically meant going back to the search results list, which history-based breadcrumbs are well suited to. History-based breadcrumbs are, as the name implies, based on the user’s history, giving the user a way back to previously visited pages.

While this functionality is also available in the browser’s interface via the “Back” button, test subjects repeatedly got stuck or were misguided on websites that offer only one type of breadcrumb. For example, when only hierarchical breadcrumbs were available, many subjects confused them as a way back to their search results. As a consequence, they unwittingly switched their product-finding strategy and lost any filter or sorting settings they had applied, thinking the last hierarchical breadcrumb link would take them back to the search results page.

By including both history-based and hierarchical breadcrumbs, as seen here on Macy’s54, users have an easy, inline way to go back to the search results or to switch strategies and go directly to the related product category. Both breadcrumb types are found on only 8% of the top e-commerce websites.

A simple “Back to results” link alongside the standard hierarchical breadcrumbs enables users to seamlessly go back to their search results, with filters and sorting choices intact. History-based and hierarchical breadcrumb links are an ideal combination, allowing users to efficiently continue their current search session or switch to a new navigational mode.

Implementation Tip

Implement two types of breadcrumbs on product pages: hierarchical breadcrumbs, which allow users to infer and jump to categories that contain the current product, and history-based breadcrumbs (such as “Back to Results”), which minimize misinterpretation of hierarchical breadcrumbs as a way back to the search results. Testing confirms that history-based breadcrumbs can be both appended (as on Macy’s) and prepended to hierarchical breadcrumbs.

The State of E-Commerce Search

To give you a more general analysis of search performance in the e-commerce industry as a whole, we’ve summarized the entire benchmark data set in the scatter plot below.

Each of the 3,000 benchmark scores is divided into the six major areas of e-commerce search usability: query types, search form and logic, autocompletion, results logic, results layout, and results filtering and sorting. Thus, each gray dot represents the summarized score of one website’s score across the 6 to 15 guidelines within that area.

55To identify the search usability score of each of the top-50 websites, you can explore the interactive version of this scatter plot56. (View large version57)

The blue circles represent the actual benchmark average for each column (an average of the gray dots). The red triangle and green circle are reference scores that we’ve created for comparison:

  • The green circle represents the score for what is to be considered a “good” search experience — here defined as a website that partly adheres to all 60 of the search guidelines. That is, the green circle represents the standard that an e-commerce website should reach (or, better yet, surpass) in its search experience.
  • The red triangle represents the score for a “mediocre” search experience — here defined as a website that partly adheres to 48 of the 60 guidelines. That is, search engines and designs that reach this standard can be assumed to directly hinder (or even obstruct) users as they search.

Besides noting the very scattered score distribution in each column, the columns to pay attention to are those that show the industry average (blue circle) significantly below a “mediocre” search experience (red triangle). This is the case for query types, results layout, and filtering and sorting — all areas of the search experience where the vast majority of e-commerce websites have significant room for improvement.

Query are the very core of e-commerce searchtypes, yet support for the 12 essential query types is lackluster at best. Points 1, 2 and 3 of this article are just the tip of the iceberg (you can find all 12 query types in a white paper that we recently published58), but they clearly demonstrate poor support:

  • 16% of e-commerce websites do not support searches by product name or model number.
  • 18% handle misspellings so poorly that users would have to pass a spelling test in order to get relevant results.
  • 70% require users to use the jargon of the website, failing to return relevant results when users search with common synonyms.
  • 60% do not support searches with symbols or abbreviations of units of measurements (or vice versa).

Given its key role in the search experience, query types are an area that sorely needs to be prioritized on the vast majority of e-commerce websites, and they should be seriously considered and evaluated in any optimization project. When evaluating the resources required, remember that improvements to search engine logic would benefit all platforms (desktop, mobile, tablet, etc.), whereas layout changes are typically platform-specific.

Testing revealed that the results layout is a balancing act of designing a clean overview of search results and providing sufficient information for users to accurately evaluate and compare results. However, the benchmark of this metric tells a grim story, with the best websites doing merely OK, and the other half of websites performing poorly.

A common cause of poor results layout is that the website relies on the same (static) layout for both search results and category product lists. From our testing, search results clearly need a more dynamic layout that adapts to the user’s query and context. This could include altering how much and which information is displayed for each result, which product thumbnail is displayed, how large the thumbnail is and so on. All of these elements should dynamically adapt to more closely match the user’s query and expectations. To some extent, this also includes the product page’s layout, which could have dynamic links, such as history-based breadcrumbs, along with the traditional hierarchical breadcrumbs (see point 7 in this article).

Optimizing the results layout is a relatively manageable project, which mainly entails switching from reusing the static (category) results layout to a dedicated and slightly more dynamic search results layout. It should, therefore, be considered low-hanging fruit, given the large impact it can have on the overall search experience, especially during the product-selection process.

Filtering and sorting search results is a somewhat overlooked area. Notice the highly scattered plot in its column and the fact that nearly all websites miss out on important aspects of it, as indicated by the threshold for a “decent” search experience (red triangle). Just like the results layout, filtering and sorting features should adapt to the user’s query and context.

For example, while faceted search (see point 6 in this article) is the foundation of a contextual filtering experience, only 40% of websites have it. Worse, the multiple elements of sorting site-wide search results that we identified during testing are overlooked entirely, with more than 70% of websites lacking key sorting types, and 90% having no scope options or suggestions when users try to sort site-wide results.

Given that filtering and sorting are much less resource-intensive to get right than query support, they should be a part of almost every optimization project for e-commerce search. Moreover, many of the improvements are manageable enough to be implemented and optimized on an ongoing basis, and much of it can be reused to improve the sorting and filtering experience in category navigation. (For more, see “An E-Commerce Study: Guidelines for Better Navigation and Categories59.”)

Search: A Competitive Advantage

The gloomy state of e-commerce search doesn’t mean that users cannot perform and benefit from search on the benchmarked websites. However, it does clearly indicate that e-commerce search isn’t as user-friendly as it should be and that users’ success rate could be improved dramatically on most websites — even those of these 50 e-commerce giants.

While catching up with the few websites that have done really well from years of focused investment would require a serious prioritization of the search experience, it is achievable. Furthermore, because the poor state of search is industry-wide, most websites have an opportunity to gain a truly competitive advantage by offering a vastly superior search experience to their competitors’.

A good start would be to look into the seven points we’ve presented in this article:

  1. If few results of low relevance are returned, the search logic should broaden the scope and look for closely related spellings (18% of websites don’t). Furthermore, the logic needs to search through the entire product data set, to include matches for product names and copied-and-pasted model numbers (16% of websites don’t).
  2. Map common product-type synonyms to the spellings used on your website to ensure relevant results for a query such as “blow dryer” if you refer to it as a “hair dryer,” or a query such as “multifunction printer” if “all-in-one printer” is used (70% of websites don’t).
  3. Map all commonly used symbols, abbreviations and full spellings to each other, so that all results are shown regardless of how something is written in the product data. For example, map “inch” to the double quotation and double prime symbols and to the abbreviation “in” (60% of websites don’t).
  4. Be cautious about auto-suggesting based on other users’ past queries because that often leads to low-quality and redundant suggestions. Furthermore, regularly check that auto-suggestions don’t lead to a dead end (36% of the websites with autocompletion don’t do this).
  5. Allow users to easily iterate on their query by prefilling it in the search field on the results page (66% of websites don’t).
  6. Implement faceted search to suggest filters that match the user’s query more closely. For example, suggest product attribute filters that apply to a subset of the search results (60% of websites don’t do this).
  7. On product pages, provide both traditional hierarchical breadcrumbs (to support non-linear patterns of search) and history-based breadcrumbs, such as “Back to results” (72% of websites offer only one type).

Because a poorly performing search experience can look as good aesthetically as a high-performing search experience, gauging one’s own or a competitor’s search experience requires extensive testing and evaluation. The fact that search experience and performance are heavily influenced by non-visible factors, such as search logic and product data integration, is actually good because the competitive advantage you would gain from investing in them cannot be easily copied by competitors (unlike, say, a home page redesign). So, while creating a truly great search experience will probably require substantial resources, it’s also an opportunity to create an equally substantial and lasting competitive advantage, one that competitors cannot easily piggyback on.

As a final note, the findings from our usability study give owners of small e-commerce websites a fair shot at improving their search experience, because roughly half of the 60 guidelines relate to user interface. This is especially true of the results layout and the filtering and sorting experience, which are areas that are usually easy to change but whose performance on most websites is currently below expectations.

If you’re interested in exploring the search experience of each of the top-50 websites and seeing how they compare to each other (and not having to review the over 3,000 elements that our team spent months analyzing), then see our free search usability benchmark database60.

You can find all 60 e-commerce search usability guidelines in our report “E-Commerce Search Usability61” (not free).

(al, ml)

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46
  47. 47
  48. 48
  49. 49
  50. 50
  51. 51
  52. 52
  53. 53
  54. 54
  55. 55
  56. 56
  57. 57
  58. 58
  59. 59
  60. 60
  61. 61

The post The Current State Of E-Commerce Search appeared first on Smashing Magazine.

How To Plan And Run A Great Conference Experience

Fri, 08/15/2014 - 09:51

Our industry is a great one. It’s filled with a lot of awesome people building a lot of inspiring things and constantly seeking out ways to express just how much they love doing so. We’ve had blogs and podcasts, and right now hosting conferences is the big thing. Ever more people are organizing conferences, arranging meetups and creating memorable experiences. It’s fantastic to see.

Nothing compares to a good conference: the atmosphere of being immersed in a crowd of people who share the same passion as you, the lessons you learn and advice you take in, and the friends you get to meet and the new ones you make. You leave a good conference re-energized — full of zeal for your job and bursting with fresh ideas.

That’s exactly what I wanted to create with HybridConf1, and I am proud that we achieved it in our first outing last year. Our guests learned, shared stories, made lasting friendships — even a relationship or two — and undoubtedly had a good time. I felt like I had succeeded in giving back to the community some of the same experiences that I so value from conferences of the past. This year, we’ve switched cities, but our goal is the same: to bring people together in one place where they can discover and share and then leave full of positivity towards the great community we have the privilege to be a part of.

Since starting HybridConf, I’ve been fortunate enough to receive countless pieces of advice from other conference organizers. The advice has been invaluable to me, so I wanted to pay it forward with this article and help more of you succeed, too.

Make Sure That Organizing A Conference Is Right For You

Before delving into a list of tips, I should say that running a conference is incredibly hard, much more than you can possibly imagine, so make sure that it’s really right for you before you start.

If you are going to run a conference, then you will need to be prepared for many late nights, big money worries, a roller coaster of emotions and a prolonged period when your loved ones, social life and free time take a back seat. There’s no escaping that. It’s a huge responsibility and one that will take up a lot of your time, both in physical labor and in constant worrying. It really is a massive amount of work, especially for those of us (like me) who do this on top of a day job. Sometimes it feels insurmountable.

Then, there is the stress from money, because — let’s not beat around the bush here — putting on a conference of a certain size can be very expensive. Add to that the worry of not really being able to control exactly how well the big day goes. You just have to plan and organize and sell as well as you can and keep your fingers crossed. Considering all of this thoroughly, therefore, and whether you really want to commit this much time and brainpower is really important.

Organizing a conference is a lot of fun, but requires a lot of hard work, too. (Image credit: James Seymour-Lock62)

One of the best ways to counteract the stress is to have a really clear understanding of why you’re doing this in the first place. You need to have a solid reason that you can believe in and that will drive you forward and help you to make a lot of the decisions along the way. My reason was that I was tired of so many UK conferences featuring the same speakers with the non-divergent opinions. After complaining about it on Twitter for so long, I decided that I had to just stop complaining and try to fix it. So, I took the opportunity to make the type of conference that I would want to attend myself.

So, with all of that being said, if you’ve read this far and still want to put on a conference, high five to you! I’m very glad I haven’t scared you away, because later I’ll talk about all of the wonderful rewards that this stress and hard work bring you.

Learn How To Run A Great Conference

This section shares my top tips for getting started with your conference and staying organized along the way.

1. Figure Out The Theme

Having some kind of unifying idea is important. It could be relatively broad and high level — like ours, which was to bring designers and developers together — or much narrower, such as Break’s theme of removing the barriers between different specializations of design, or perhaps a conference focused on a particular technology. JavaScript conferences do incredibly well, in part due to the language being the hottest topic in the industry and because such conferences have such a sharp focus.

The question isn’t whether a theme is right for a potential attendee, but rather whether there is one at all. Having a theme helps to unify your ideas, to get appropriate speakers, and to sell and market to the right people. It will also help you to come up with a name. Pick something simple, punchy and on topic. A mission statement will also help you to stay on track and attract your target audience. Here was ours:

“We care a lot about this industry and we couldn’t find a conference that matched our wants or needs. We wanted something that was both welcoming and awe-inspiring. We wanted a conference where the talks were fresh, and you’d not seen most of the speakers before. We wanted a place where we talked about all aspects of the web, in an easy-to-understand way for even the most novice attendee, yet where seasoned attendees still had lots to learn. Thus, HybridConf was born. We spent almost a year of intense hard work, tears and sleepless nights to help empower people in their goals. We hope you join us and celebrate that the people (including you!) make this industry great.”

2. Get A Business Partner, Or Three

Running a conference is a lot of work and emotionally very tiring. Some days you wake up literally paralyzed by fear; other days, you feel invincible. You need to find someone who you can rely on to understand when you get stressed, who can pick up work when you are feeling overwhelmed, who gets excited by your great ideas and who curbs your enthusiasm a bit when you go overboard. Of course, you should provide the same values to your partners. Finding someone you trust to share this experience will be the biggest help you can get.

3. Think About Speakers Very Early On

We chose to hand-pick our speakers. I already had in mind a lot of people who I thought were doing cool stuff and would have something interesting and original to say, so I approached them personally and asked. Speaking experience wasn’t a consideration; I didn’t care whether they were a seasoned pro or a first-timer — and people were incredibly shocked when we revealed who our first-timers were. An open call for proposals might make more sense for you and is a great option. Just make sure that whichever way you choose, you do it early. Good speakers get snapped up really far in advance, so if you want your top choices, secure them as soon as possible.

Try to see whether a desired speaker has any mutual friends. If so, ask the friend to introduce you. Explain your mission to the prospective speaker and see whether it’s a match for them. Our mission, to better the industry, was something many people could get behind. Be honest here. For the people with whom we didn’t have mutual connections, we asked them on Twitter whether emailing them was OK — being respectful goes a long way, and most people are OK with email. Try to capture everything in one email, so that they have enough information to make an informed decision. Make sure to explain the mission, the date, the theme, any compensation you can offer and anything else you feel relevant.

4. Determine Whether You Can Pay Speakers

Although for most conferences it is good practice and a very worthy aim3 to pay the speakers for their time and efforts, we knew from the beginning that, for the first year at least, paying fees to the speakers would not be possible – we simply couldn’t afford to while keeping our ticket costs low enough to be accessible. However, we pledged to cover all of their expenses, including flight, hotel, other travel and a speakers’ dinner. While we couldn’t pay them for their time, we felt that they should not have to incur any costs for coming.

This year, we decided to share revenue with speakers. If we make a profit, they will receive a percentage of it; if we don’t, then we will pay all of their expenses as before but they won’t get anything on top. This protects us, and it gives them a nice bonus if we do well.

Figure out what you can afford from the beginning. If you can afford to pay the speakers (or if that is a higher priority for you than other costs), then great; if you can’t, then be honest and say so when you invite people to speak. Many people are still very happy to come without expecting a fee. The important thing is to be open from the beginning and not to promise to pay for something that you won’t be able to afford in the end.

You’ll also have to consider a lot of things to take great care of your speakers leading up to and during the event. Dermot Daly has a lot of great advice4 on this.

5. Pick A Comfortable Venue

Last year, we had wanted to hold HybridConf in the Coal Exchange, an old historic building in Cardiff Bay; unfortunately, they had to close for some repairs, and we had to find a new venue. In the end, we chose Cineworld. It doesn’t have the cool history of the original venue, but you know what it does have? Comfortable seats. And guess what one of the main things everyone talked about was? How comfortable the seats were compared to other conferences.

Your guests are going to be sitting in one place for the better part of eight hours. Pick somewhere butt-friendly. The venue will also have a big effect on the overall feel. The theme you’ve chosen will inform a lot of your decisions. Do you want a spotlight on the speakers or warm lighting over everyone? We chose the former because we didn’t want people to have any problem understanding the speakers. Do you mind whether people use their laptops? Lower lighting deters that. Do you want to provide an area for people to work if needed? So many decisions will affect the overall feel. Use your best judgement — you should know what attendees want more than anyone.

6. Think About Feeding Guests

We choose to cater. We provide lunches, snacks, tea and coffee and this year breakfast as well. It’s a personal choice and obviously it affects the cost, but we like to do it because we think it makes it easier to mingle, and it takes the stress out of having to find a restaurant and people to eat with. If you do want to provide food, just find a good caterer and let them do what they do best. Many venues have a dedicated caterer or a shortlist that they work with. Figure out in advance the cost per person, the type of food you want to provide (hot or cold, buffet or sit-down) and any special requests (last year we wanted to include some Welsh food). Then, just meet the caterer and they’ll try to meet your requirements.

7. Live In Your Spreadsheet

Our spreadsheet had at least 20 tabs. We had tabs for income, expenses, the schedule, accommodation, contact details, the speakers’ food preferences at the speakers’ dinner, and many more things. We had tables for best- and worst-case scenarios, and we updated them constantly. With a spreadsheet, all of the vital information was in one place, and we always knew how we were doing. You can never write down too much or be too organized. Combining the spreadsheet with a great ticketing solution helps, too. Our ticketing solution, Tito5, breaks down sales and provides reports as much as we need — it was a godsend for us.

8. Nail Down A Cancellation Policy

When we got our first request for a refund, I must admit I was a bit taken aback. We’d tried to cover all of our bases and, naively, hadn’t considered that we might encounter this problem. I asked others what they do, and they all gave me the same answer: Allow guests to resell their tickets, but don’t offer refunds. The truth is that we spend the money from ticket sales quickly, and a ticket that someone wants refunded is often from an earlier batch, which means you’ve lost the chance to sell it again. We believe in fairness, so if you don’t refund one person, then refunding another person would not be right, even if you think the other person has a good reason. Splitting hairs about what counts as a good reason just leads to complication and misunderstanding. So, we keep a strict no-refund policy. You may choose to do things differently, and I commend you if you do — no way is easy.

9. Leverage Your Network

One of the biggest perks of being in this industry is that most of us have a lot of contacts. Use them. Ask them to promote you, whether on Twitter, on their blogs or at their own events. Ask whether they have contacts in the sponsorship department at their company. Ask them for an introduction to a speaker whom you would love to have. Ask them for advice if they’ve already run their own event. From our experience, most people are only too happy to help.

Attending a conference will help you meet folks in your industry. So, what are you waiting for? (Image credit: James Seymour-Lock62) 10. Hire A Technical Team

Last year, we decided quite late to hire a company to handle all of the lighting, audio and visuals. The extra cost was high, but having professionals organize all of the equipment, set it up and be on hand to make sure it works all day was totally worth it. Some of the most common things that go wrong are minor technical issues — microphones not working, laptops not connected to the projector — so having a skilled person there to fix issues as soon as they arose was invaluable. The time saved and peace of mind was far more valuable than the cost.

Paul Campbell’s post on reducing conference awkwardness7 walks through a few potential audio-visual pitfalls, with some great tips on avoiding them.

11. Organize The Printing

Different items take different lengths of time to print. Badges might need only a week’s notice, while lanyards and banners might need a month’s. Start looking for printers, and talk to them well in advance. If your designs are done, let them know when the printing is needed, and give estimates on the quantities, following up closer to the conference with more accurate figures. Also, print a little more than you think you’ll need; ensuring that everyone has materials is worth overspending slightly.

Double-check everything. Murphy’s Law is in full effect when you’re running an event. Last year, knowing that our materials were a rush job, the printer took our address from our email footers. It was a billing address, and no one was at that address to pick up the printing packages. So, during the pre-conference drinks, we had to drive an hour away just before the sorting office closed to pick them up — or else no one would have gotten their name badges!

12. Appoint An Excellent Head Volunteer

Last year, our head volunteer was Andrew Nesbitt. He had experience with organizing meetups and is just generally awesome at sorting stuff out and getting stuff done (not to mention, giving excellent last-minute talks!). Having a great head volunteer means that you don’t have to worry about silly little things on the day of. You can concentrate on making sure everyone is having a good time. Hopefully, you’ll even have a chance to relax and enjoy yourself, which is important.

13. Expect To Lose Money

At least expect to lose money at first. Running a conference is by no means a get-rich-quick scheme. It’s a lot of work for a very small amount of money, if you’re lucky. If you’re not lucky and you don’t get it right, the worst-case scenario will bankrupt you. There are ways to minimize risks, though. Setting up a corporation in certain countries, such as the UK and US, is a great way to protect yourself from personal risk. If you think you might have some money left over at the end, chances are you won’t. However, operating at a loss is still very rewarding as long as you are prepared for it; there are many more rewards than just the money to be made. If you do make money, that’s a great bonus, something to be proud of, and a perfect foundation on which to build a sustainable business and to put on an even better event next year.

14. Prepare, Prepare, Prepare, Then Pray

No matter how much you prepare, you can only hope that everything goes right in the end. Something will go wrong at some point — I guarantee it. Plenty of things went wrong for us, although, fortunately, all of the big problems happened during preparation, and only a couple of minor, easily fixable hiccups occurred on the day. Minimize risks by planning as much as possible as early as possible; in the end, you can’t do much more than hope for the best. Keep in mind, too, that almost nothing is unsolvable. Most things can be fixed with a lot less hassle than you might think, and often guests will not notice, care or remember that something hasn’t gone precisely according to plan.

15. Get Feedback

When the event is finished, send out a survey with a prize for a random entry. Give people an incentive to tell you what they think. Find out what you can do better with the next one.

Discover The Rewards Of Putting On Your Conference

After all of this talk of stress and hard work, I would be remiss to skip the rewards at the end for a job well done. The amount of effort you put in will make you feel incredibly accomplished when it all comes together. While HybridConf has caused me the most anguish in my life, it is also the thing I am most proud of in my life. Sometimes I think I’m mad for wanting to run a conference a second time, but when I think back to the event last year and the amazing feedback we got from our guests, I remember why it is all so worth it.

Nothing really compares to what we felt at the end of the conference last year. After two days of wonderful, insightful talks, Cameron Moll gave the closing keynote8 and brought the whole audience to tears with his inspiring examples of how technology can do real good in the world. At the end of his talk, he thanked us for putting on the event, and the applause that followed was overwhelming. The culmination of eight months of hard work in something that so many people enjoyed brought up every emotion at once: intense happiness, amazement that we had actually pulled it off, pride, relief, disbelief, exhaustion.

We had to pause for a moment just to stand and take it all in. It was a moment we would never get to experience again, and it demanded to be savored. It was just a minute, but I will remember that minute for the rest of my life. Whenever I get overwhelmed from organizing HybridConf this year, I will step back and remember that moment. With all of the stress involved, it’s very easy to forget that you are creating something awesome, memorable and life-changing — both for you and your guests. Taking time to enjoy it is imperative because you’ll sure as hell miss it when it’s gone.

That’s it! I hope this has given you some ideas and has excited you to put on an event, rather than make you want to run away! If you want advice on specific aspects of organizing a conference, Jesper Wøldiche’s handbook9 goes through plenty of topics.

We spent eleven months of the year for just two days, and it was one of the hardest things we’ve ever had to do. But seeing people smile and inspired by what we created was an amazing experience, one that will last with us for the rest of our days and that, in the end, was worth it.

Other Resources

Front page image credit: Chung Ho Leung13.

(al, ml, il)

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13

The post How To Plan And Run A Great Conference Experience appeared first on Smashing Magazine.

Targeting Mobile Users Through Google AdWords

Thu, 08/14/2014 - 13:06

“Know your audience” has stood as a fundamental marketing principle since long before the web. When advertising online, you need to take into account one of the most basic factors of the audience you are reaching: what devices they are using.

The most popular online advertising platform, in use by marketers of all sizes, is Google AdWords. Up until early 2013, AdWords allowed advertisers to set up separate campaigns to target mobile devices. Best practice generally entailed targeting mobile, desktop and sometimes tablet users in unique campaigns.

Then, in a bold move to push the importance of mobile usability (some would say to drive up its own revenue), Google announced it would no longer allow campaigns to target by device, as part of what it called “enhanced” campaigns. Pay-per-click (PPC) managers made outcries about Google’s forced decision1 to remove control from advertisers, even cautioning people against upgrading immediately2 as the option became available to do so.

A year later, the dust has settled somewhat as advertisers have adapted to the new campaign format. With the ability create device-specific campaigns gone, they’ve modified tactics with their campaign structure and bidding strategy to best reach people across multiple devices.

Why should you care about who’s using a mobile device and who’s not? First of all, people often behave differently when browsing on a phone versus a desktop. In reviewing data from a site that received just over three million sessions over the past year, users spent an average of 2:42 when coming from desktop and 1:16 from mobile. That shows mobile sessions dropping off after about half as long as desktop sessions. A smartphone user might not care to spend time sifting through an extensive product inventory, instead just wanting a number to call or immediate directions to a location.

Secondly, costs can vary widely by device. A study by Marin Software3 shows that the average cost per click on mobile was 26% lower than the desktop average in 2013. Also, the average cost per lead or sale might be more or less on mobile. Advertisers who take this information into account will see the need to control bids by device in order to maintain their target costs for leads.

Thirdly, visits from mobile might provide more or less value to a particular advertiser. For example, the owner of an e-commerce website might find that desktop users put more items in their carts and spend more on average.

Fourthly, you might want to drive mobile users to different pages than desktop users. Especially if your website is not responsive, you might have separate URLs for mobile. While a responsive website is ideal, your agency might be forced to work with a client’s existing website when running an ad campaign.

So, how do you build a campaign that targets only mobile devices via AdWords? The short answer is you can’t. However, a number of workarounds are available.

First, let’s look at a couple of AdWords features that focus spending on mobile: bid modifiers and mobile-preferred ads.

AdWords Features To Target Mobile Use Bid Modifiers

Enhanced campaigns introduced a feature called bid modifiers, which allow you to increase or decrease bids by a percentage for ads appearing on mobile devices. A number of PPC professionals have suggested using bid modifiers to focus a campaign’s spend on mobile placement. You could set a low general bid and increase the mobile bid modifier to 300%, the maximum percentage allowed.

To set a bid modifier, go to the “Settings” tab in your desired campaign and select “Devices.” You’ll then see statistics broken down by device and the option to change the percentage for mobile.

4Setting a mobile bid modifier. (View large version5)

However, this technique will not completely exclude desktop searches. In a test across multiple accounts, Brad Geddes found6 that about 19% of searches still end up occurring on desktop.

Create Mobile-Preferred Ads

Another option is to create mobile-preferred ads. When you build an ad in AdWords’ interface, selecting a check box enables you to mark the ad as mobile-preferred. Such ads are an opportunity to customize messaging specifically to people on mobile devices. We’ve improved both clickthrough rates and conversion rates by using phrases like “Call now” in mobile-specific ads, because searchers can click-to-call from a phone.

To create a mobile-preferred ad, just click the check box for “Mobile” under “Device preference” when making an ad via the web interface.

7Creating a mobile-preferred ad. (View large version8)

However, even these ads are not guaranteed to appear only on mobile or to prevent standard ads in the same ad groups from showing up on mobile. PPC Hero put this to the test9 and found that a number of desktop impressions still occurred with mobile-preferred ads.

Use Smartphone-Specific Ad Sizes

When running display campaigns, the 320 × 50-pixel mobile leaderboard ad size will appear specifically in a smartphone browser or app. You can even create animated ads in this format to get more attention. If you want to run them on mobile devices that don’t support Flash, AdWords offers an option to convert the Flash files to HTML5 when uploading them.

This ad size is great for driving branding, because it takes up an extremely visible portion of a mobile screen, often on top. Clickthrough rate tends to be high. In one campaign, I saw an average of a 0.5% higher clickthrough rate on these mobile ads than the standard desktop sizes (a pretty significant difference for display ads). Be aware, however, that people often unintentionally tap these ads on a touch device, especially while playing games. If you are encountering a high bounce rate from these ads, then consider excluding mobile apps. Bryant Garvin has written about a quick and easy way to do this10.

We’ve looked at some options available in AdWords to focus on mobile. Next, let’s consider another platform that allows for more granular targeting at the device level than AdWords.

Direct People To Proper Pages

While a responsive website is the ideal option, if you do have a separate mobile website, make sure that users who are coming from mobile devices will see the proper page. One of the worst mistakes you could make is to forward all mobile visitors to a generic home page. I’ve audited campaigns whose ads were set up to very carefully link to very specific inventory items, only to completely lose all of that value because no equivalent pages existed on mobile. Make sure that individual product and service pages forward to their respective mobile versions.

AdWords also lets you use ValueTrack parameters11 in ad-destination URLs to specify mobile and desktop versions. People who click on ads will be directed to the proper page based on the device being used.

Try Bing Ads

While Google might have removed the capability to target separate campaigns at mobile devices or tablets, Bing still allows you to segment by device; you can still create a mobile-only campaign to reach searchers on Bing and Yahoo. While Bing-powered search accounts for a much smaller volume than Google, I’ve found that allotting a portion of spend to Bing Ads to be valuable for many clients, with less competition, as well as a generally lower cost for leads. For one particular client with a limited budget, we found that the cost per lead averaged about $20 less in Bing Ads than AdWords; so, we shifted money over, resulting in a stronger return on investment from their ad spend.

To set a Bing Ads campaign to serve only on mobile, go to the “Campaign Settings” tab. Under “Advanced Targeting Options,” select “Device” to choose the devices on which to run your campaign. You can also set bid modifiers here, as in AdWords.

12Creating a mobile-only campaign in Bing Ads. (View large version13) Don’t Forget The Experience After The Ad!

Getting the right people to click on your ad is only the first step. Their experience on your website after the click is crucial to whether they actually contact you or make a purchase. Also, realize that landing-page quality contributes to AdWords’ quality score, a factor that affects how high you have to bid for clicks and where your ads show up in search results.

14Example of a responsive website scaling to multiple device sizes. (View large version15)

A responsive design will adapt your website’s size to mobile devices and is, in fact, Google’s stated preference. Make sure that your website’s design takes into account which devices users are on, how they arrived on a particular page and what paths they need to take to convert.

Start Reaching Your Audience On Mobile

By using the techniques mentioned, I’ve succeeded in keeping costs per lead down, as well as focusing spend on areas where a campaign is seeing the best results. While we do live in a cross-device world, paying attention to the results from different devices leads to smarter PPC campaign management. For example, in the same AdWords account, I’ve seen campaigns in which mobile costs per lead average higher than on desktop, along with other campaigns in which mobile costs per lead average lower. Taking this information into account, we can customize the bid modifiers for mobile by campaign, instead of keeping them at a generic number across the board, to help control spend.

Working with businesses that provide local services, I’ve also seen immense success both in including a click-to-call extension as well as using mobile-preferred ads to focus messaging on calls. Some clients I’ve worked with see just as many leads come from phone calls directly from ads as through website form submissions. Again, the fact that a user on a phone is likely to take advantage of a simple click-to-call option gives us the option to customize an ad campaign targeted at mobile searchers.

Ultimately, there is no one-size-fits-all solution to targeting your audience by device. But whether you’re just starting to advertise online or are a veteran AdWords user, you can likely do more to reach the ever-growing pool of mobile users. Take the time to segment messaging, and target with the knowledge that people behave differently on different devices. Keep track of the value of leads received based on device to determine how much spend to allot to mobile and how much to desktop. Of course, test these tactics to see what works best for you and your brand, and tailor advertising to your users when they visit from mobile devices.

Additional Resources

(al, ml)

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20

The post Targeting Mobile Users Through Google AdWords appeared first on Smashing Magazine.

A Closer Look At Personas: A Guide To Developing The Right Ones (Part 2)

Wed, 08/13/2014 - 12:58

How can designers create experiences that are custom tailored to people who are unlike themselves? As explained in part 11 of this series, an effective way to gain knowledge of, build empathy for and sharpen focus on users is to use a persona. This final part of the series will explain an effective method of creating a persona.

There are myriad ways to integrate user-centered thinking into the creative process of UX design, and personas are one of the most effective ways to empathize with and analyze users. There is no one right way to develop a persona, but the method I will share here is based on processes developed, field-tested and refined over the years at the interaction design agency Cooper2. This process follows a logical order that begins with knowing nothing (or very little) about users and ends with a refined and nuanced perspective of users that can be shared with others.

1. Identify Your Users

Before you can learn from people, you need to decide whom to learn from. You could create a screener based on demographics and psychographics to determine who to observe and talk to and who not to.

There are many ways to filter out people and focus on those who are relevant to a project. A combination of factors usually determines the criteria of a screener. (Image: Steamfeed4) (View large version5)

Traditional research on market segmentation is a good place to start. If a user base is already established, then you might have a source of data on demographics; if there is no such source, then you could send out surveys to current users to obtain more information. If you have no user base (which will be the case if your company is new), then find out more about the users of your competitors or of similar companies or products.

2. Decide What To Ask

The most common way to learn from users is to interview and/or observe them. An interview script or research protocol will ensure that you obtain the same information from all research subjects, so that the data set is homogeneous. The process of developing a script or protocol forces you to think about what you will need to learn from research participants. Interviews and observation aren’t just about acquiring raw data, but about gaining a thorough understanding of participants and their perspectives.

Learning everything about participants is impossible within the limited time available for interviews and observation, so try to ask the most advantageous questions and observe the most relevant behavior. To determine what information is most needed, think of your knowledge gaps, which details would best inform your design decisions, what your team members are curious about, and what would give the team a common frame of reference regarding the participants’ needs and goals.

The questions and areas of observation need not be exhaustive at this stage, because the goal is to gain a fundamental understanding of users, from which the team can extrapolate in future and answer new questions on their own. By thoroughly understanding users, team members should be able to put on the persona’s shoes and walk in uncharted territory. Users won’t have a seat at the table during the product’s development, but a persona created from the right kind of information is the best proxy. By capturing the essence of their perspectives from asking the right questions, you will be able to create a persona that brings their voice into the conversation.

The exact questions you ask will vary according to the project’s goals, the types of people being interviewed or observed, and the time constraints. No matter what you ask, though, keep the following in mind:

  • Ask primarily open-ended questions.
  • Ask participants to show more than tell.
  • When possible, ask for specific stories, especially about anything you cannot observe.

Don’t be afraid to ask seemingly naïve questions either because you’ll want to find out as much as possible. (Naïve questions are never stupid; they show an eagerness to learn, and they establish a non-authoritative tone in the interview, which is great for building rapport with participants.) Following these guidelines will result in a rich set of answers and a firm foundation on which to build a persona.

Ask roughly the same questions of all research participants. A script will help with consistency. (Image: Sams Weitz7) (View large version8)

You could create your own interview script from the following template, which I have used in many enterprise software design projects. I have found it quite useful as a jumping-off point in new projects.

  • Give us a little background on your job.
  • How and why did you take on this job?
  • How long have you been working in this capacity?
  • Why do you work for this company and not another?
  • Tell me a bit about your industry and your role in it.
Domain Knowledge
  • What skills are required to do your job?
  • How do you stay up to date and get information on your industry and profession?
  • What are your responsibilities in your job?
  • How do you define progress or success in your job?
  • How do you measure progress or success?
Attitudes and Motivations
  • What are the most enjoyable parts of your job?
  • What do you value most?
  • Do you have any external (i.e. extrinsic) or internal (i.e. intrinsic) motivations for doing a good job (such as rewards, promotions, perks)?
  • Describe a typical workday. What do you do when you first get into the office? What do you do next?
  • How do you do [a certain task]?
    • How long does this task typically take?
    • Where would you start?
    • What would you do next?
    • Can you show me how you do that?
  • What activities take up most of your time?
  • What activities are most important to your success?
  • Of the things you do during a typical workday, are any of those processes or tasks mandated by your company or industry?
  • What processes have you developed on your own?
  • Have you learned to work better from your colleagues?
  • How is your office organized to help you accomplish your tasks or goals?
  • Show me how you use your office to accomplish your tasks or goals?
Pain Points
  • What are the most difficult, challenging, annoying or frustrating aspects of your job?
  • After a typical workday, what about your job (if anything) is still on your mind? (In other words, what issues keep you up at night?)
Tools and Technology
  • What traditional (i.e. analogue) tools do you use to accomplish tasks in your job?
  • What digital tools do you use to accomplish tasks in your job?
  • Where do any of your tools fall short? (What do you need them to do that they don’t do or don’t do well?)
Mental Models
  • What kinds of people do well in your position? Why?
  • Describe a process and how it has changed or not changed over time.
Relationships and Organizational Structure
  • Besides clients and customers, who else do you interact with in your work?
  • Who do you report to?
  • Who reports to you?
  • How often do you collaborate with others?
  • How do you collaborate?
Projecting Into the Future
  • If we came back in [x number of] years to have this conversation again, what would be different?
  • If you could build your ideal experience, what would it be?
Wrapping Up
  • Have we missed anything?
  • Is there anything you want to tell us?
  • Is there anything you want to ask us?
3. Get Access To Users

This step will largely determine how effective your personas are. Finding an adequate number of people will determine whether your personas are an accurate and useful representation of the research participants. Experts recommend finding anywhere from just 5 to around 30 participants per role. The exact number isn’t important, as long as trends and patterns emerge. These number might seem too small to be of any reliable use, but the data set isn’t intended for statistical analysis, but rather for qualitative analysis that will inform the design process.

Trends are often observable from just five people. Build on that to gain a deeper understanding. The number of participants does not matter as much as whether you gain new information from interviews and observation. The law of diminishing returns applies here; at a certain point, new interviews or further observation will elicit little to no new information because all relevant patterns have been unearthed and the researcher has reached a level of understanding known to ethnographers as “verstehen9.” At this point, no more research is needed.

The benefit of observation in addition to interviews is that a relatively small number of participants is needed for it. If you can’t find enough people on your own or with help from people you know, then consider a recruiting agency.

10 4. Gain An Understanding Of Users

The majority of the process of creating personas is usually spent interviewing and observing people. Collaborate with another team member so that they capture anything in the interview or observation session that you might miss. You and your colleague should be physically present with the research participants, in a location that makes the most sense for the project. In a suitable location, participants tend to provide more detailed and accurate information and are less likely to behave unnaturally.

Observing and interviewing in person and in a location relevant to the project will yield the most useful data. Also, capturing information in multiple ways, such as by taking notes and recording audio, will ensure accuracy. (Image: Interactions12) (View large version13)

Direct, unfiltered interaction with participants is critical at this stage in order to gain empathy with the people you will be designing for. Being there in person is not always feasible, but try to do it whenever possible. If you can’t do that, then consider the next best thing: interviewing people who have had direct interaction with users. Personas created from secondhand information are called provisional personas14. The perspectives will be secondhand, filtered and biased, but they’re better than nothing and you’ll have somewhere to start your research.

Empathy is important to understanding users holistically, and direct interaction is the only way to inform the heart as well as the mind. I’m not one to get touchy-feely for its own sake, but when you are able to empathize with users firsthand, they you’re better able to tap into their intuition and act on inklings that you otherwise would not have. Firsthand exposure is paramount.
5. Analyze The Data

The analysis stage is the most complicated because you must compare multiple variables of behavior and attitudes among many research participants. It requires some practice, and it gets much easier with experience. To find out more in depth, look at the descriptions in the Fluid project15, or consider reading Designing for the Digital Age16.

After learning about research participants directly or indirectly, you will need to make sense of it all by finding patterns in the data. In short, for each group of participants with the same role (for example, a group of doctors), you would rank each participant against a number of attributes of behavior and attitude, determining which participants have similar attribute rankings in order to discover common traits among them. Each group of similar participants would then serve as the source of a persona.

Personas are not just “roles,” although they might seem to be at first. Roles are great for segmenting and grouping similar users together for analysis, but roles are not personas. Roles are defined largely by the tasks people perform, rather than by how they perform those tasks or how they feel about accomplishing the tasks. Usually, two or more personas are required to represent the range of behavior within a role.

For instance, if you are designing medical software to be used by doctors, nurses, technicians and patients, then you would want to interview people in all four roles; however, when analyzing their responses, you would compare doctors to doctors, not doctors to technicians. Their roles might overlap somewhat, but don’t muddy the water by combining data from multiple roles. Compare participants with the same role; otherwise, large differences will obscure smaller differences between participants.

You can represent most of the observed behaviors and attitudes as a spectrum (for example, from low to high or sad to happy). Each spectrum should be discrete and divided into four levels.

In this sample spectrum, low and negative attributes are on the left, and high and positive attributes are on the right. (View large version18)

On each spectrum, participants can be given a score of 1, 2, 3 or 4 (similar to the Likert scale19). The even number prevents a neutral score (for example, a score of 3 out of 5 would provide little value in creating a persona). Some variables are difficult or impossible to represent on a spectrum; in this case, don’t force it, and instead express the variable as a multiple-choice question.

(View large version21)

To determine how many spectra to analyze, go over the responses to the interview questions and note any distinct behavior or differences in attitude. Fewer than 5 spectra is usually too few, and over 20 is too many, so aim for somewhere in between. If you have trouble deciding which spectra to use, look back at the categories of questions in the interview script shown earlier, and determine which categories most effectively group and differentiate research participants. Motivations and goals, frequency and duration of tasks, and attitudes towards tasks are good places to start.

After you’ve listed 5 to 20 variables for a role, place each research participant on each spectrum, as shown below.

When placing each participant on a spectrum, keep in mind that the data is all relative at this point. The fact that Whitney does more surgeries than Doug, who does fewer than Elliot, is more important than who is a 2 rather than a 3 or 4 on the scale.

Once you’ve mapped all research participants on the spectra, it is time to identify patterns. This part might seem overwhelming, especially if you have researched many people. Start small by finding two people who tend to have the same scores on various spectra. This pattern analysis is similar to that of a semantic differential22 or a multivariate affinity diagram23.

(View large version25)

Of the five spectra above that describe the doctors interviewed, Tiffany and Sam appear in the same place three times, in similar places one time, and in disparate places one time. As far as we’re concerned, Tiffany and Sam are similar people and should be represented by one persona. Looking further, Dan and Elliot also have similar or the same placement on the spectra, too, but their placement differs from that of Tiffany and Sam. Dan and Elliot should be represented by a different persona from Tiffany and Sam.

This researcher has created five variables to compare the doctors who were interviewed and has mapped all of the participants to those spectra. If Tiffany and Sam tend to appear in the same or similar places in a lot of the spectra, then they probably constitute a pattern that will eventually help to describe a persona. Most of the time, the patterns that you find among participants will not apply to every single one of the spectra, because almost all patterns are imperfect.

This is not a problem; as long as participants match on a majority of the spectra, the pattern is valid. Repeat this process until you have discovered all of the patterns that represent groups of similar users. If done correctly, you will have compared a lot of the participants to each other, and the result should look something like the graph above (the color blue denotes the first pattern found).

Grouping similar participants together can be laborious, but it is worth every minute. Consider collaborating with other researchers to benefit from multiple perspectives and to discuss points of ambiguity or confusion. (Image: Vijay Kumar26) (View large version27)

This is where the difference between roles and personas comes into play. Even though the researcher interviewed many people who had the role of doctor, the participants had distinct patterns of responses, which will result in multiple personas with the role of doctor. Each unique pattern of behaviors and attitudes among participants should be represented by a unique persona.

6. Synthesize A Model Of Users

Now that you have groups of research participants who can be represented by different personas, decide how to describe those personas. During the interview and observation process, you might have heard responses or noticed behaviors that meaningfully characterize each research group. These common, average or dominant traits need to be captured in each persona.

These personas are characterized by only a few key attributes derived from interviews or observation. This deliverable conveys a clear and concise vision of the designer’s users. (Image: Bolt | Peters29) (View large version30) 7. Produce A Document For Others

There is no one right way to create a persona document, but essential elements will need to be included. An effective persona document that communicates a model of users to others typically consists of the following:

  • name,
  • demographic,
  • descriptive title,
  • photograph,
  • quote,
  • a day-in-the-life narrative,
  • end goals (explicit and tacit).
(Image: krizzeldibi32) (View large version33)

The persona document above clearly summarizes the research data. The main elements are the “Key Goals” and the “Day in the Life,” which are common to all well-made persona documents. Other elements, such as the “Quick Take on Fred” were included because of project requirements. Each project you work on will dictate a certain approach to producing persona documents.

A robust persona really only needs seven pieces to help everyone on the team understand the essentials about a user. Other elements are usually added to a document to paint an even more vivid picture, such as needs and wants, responsibilities, motivations, attitudes, pain points (i.e. problems, frustrations or road blocks), notable behavior, and design imperatives (i.e. things that a design must do to satisfy this user).

You could add a myriad of other things to a persona document, but more isn’t always better. The document is usually one page, a limitation that forces you to focus on the essential elements, without distraction or fluff. If you can’t fit everything on one page, then consider a supplemental document of some sort. Just remember that, while you’ve been immersed in the data, others will usually only see the one page. If it’s much longer, people probably won’t read it all, let alone remember the information. Keep things as brief as possible, and focus on the most salient points.

If you’re looking for a jumpstart on creating persona documents, I highly recommend the persona poster by Christof Zürn34. The poster organizes and formats all of the important information that you’ll need to create an amazing one-page deliverable.

8. Socialize The Personas

By sharing the persona documents with others, you’re disseminating the knowledge that you’ve gained throughout this whole process. Consider presenting the personas to others in an engaging way, and give everyone the one-pager as a takeaway after the presentation.

Though low in information-density, these engaging posters are a great reminder of who the personas are and what they are like. (Image: MailChimp36) (View large version37)

The process outlined in this article is thorough and rigorous. It is based on years of refinement at Cooper and tweaked to my purposes. That being said, feel free to customize the process to fit your needs. Some parts can be simplified and even skipped after you’ve gained some experience. This is not the only way to create personas, but it is a great place to start. I hope you’ve found the process helpful.

Additional Resources

(cc, al, il, ml)

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41

The post A Closer Look At Personas: A Guide To Developing The Right Ones (Part 2) appeared first on Smashing Magazine.

A Better 404 Page

Tue, 08/12/2014 - 13:47

A lot of funny 404 pages have been shared recently: carefully crafted memes, funny GIFs, even the odd interactive game. But if the 404 doesn’t help your visitors, then what’s the point?

A visitor could find themselves on a 404 page for one of many reasons: a mistyped address, a bad link from somewhere else, a deleted page or content that has moved elsewhere. While you can prevent errors from moved pages with redirects, you can’t control people’s mistakes.

Being Helpful

People who land on your website are looking for its content, usually via a link. They would have clicked that link expecting one thing, so why show them a hand-drawn panda? Instead, your 404 page should get them to where they need to be.

This problem isn’t new, and we’ve seen a lot of ideas on how to handle it. Showing a search form or linking to the home page is reasonable. Yet those are passive solutions that don’t solve the visitor’s problem. A more direct approach would be to guess where the visitor intended to go and suggest that page.

Suggesting The Right Page

One way to suggest the right page is to search for it yourself and present the result. Luckily, we don’t have to write a search engine to do this (although, if you have one handy, good for you!). Instead, we can use Google’s Custom Search API1.

We can use Google’s Custom Search API to suggest the right page.

Google’s Custom Search API is a tool for searching within an individual website. When set up, it enables you to retrieve what it considers to be the best match from your website. It does need a search phrase, though. So, to give Google something to search with, we’ll use the path of the URL that the user is currently on.

Caveat: Limits Abound

Before jumping into the “how to” part, it’s worth noting that the free tier for this API has a limit of 100 calls per day. You might want to go light on the testing while working on it. I managed to burn through the 100 calls in less than an hour, and I had to wire part of it together without seeing the result till the next day.

While someone with a small website might be fine with this limit, paid upgrades are available. Google’s API documentation mentions a price of $5 per 1000 queries2 and up to 10,000 queries per day.

Setting Up

Before using the Custom Search API, we need to let Google know who we are and get some access keys.

Search Engine ID

We need to go through a few steps before we can fly through those 100 API requests. First, register your site-specific search engine3.

  • Select “Add.”
  • Input your website’s URL ( in “Sites to search.”
  • Hit “Create.”

You now need to find your “Search engine ID.” Click “Edit” on the search engine that you created, then the “Search engine ID” button. Take note of that code!

4Setting up the Google’s Custom Search API. (View large version5) Developer API Access

Next, go to the Developers Console6.

If you don’t yet have a project, select the “New Project” option and fill in the form.

Under “APIs,” activate the “Custom Search API” by switching the “Off” button to “On.” Then, select “Credentials,” then “Create New Key,” and choose the “Browser Key” option. Take note of the API key!

(View large version8) JavaScript

Armed with both a search engine ID and an API key, you can now start hitting the API. The code below requires jQuery9. It does some AJAX JSON stuff, so I’d rather lean on the framework to ensure that it works across browsers.

Before creating functions, we should consider the environment that our code will run in. Because we’re writing JavaScript on the front end, our code might run alongside other plugins and scripts. So, let’s build a little space to cleanly separate our functions from everything else:

function createCustomSearch() { // Private variables and methods here }

Within our customSearch object, we can define methods and variables safely away from the global context. First, let’s set up some variables to use later:

function createCustomSearch() { // Some private variables for this object var context = this; var dialog = document.querySelector('dialog'); // Your keys var engineID = 'YOUR_ENGINE_ID'; var apiKey = 'YOUR_API_KEY'; }

Replace the keys with those we generated earlier.

Initially, we establish a local context by storing this in a variable. We’ll use this to access a showDialog method later.

Trying A Search

First, we’ll add a method that tries a custom search:

function customSearchConstructor() { // Some private variables for this object var context = this; var dialog = document.querySelector('dialog'); // Your keys var engineID = 'YOUR_ENGINE_ID'; var apiKey = 'YOUR_API_KEY'; this.trySearch = function(phrase) { var queryParams = { cx: engineID, key: apiKey, num: 10, q: phrase, alt: 'JSON' } var API_URL = ''; // Send the request to the custom search API $.getJSON(API_URL, queryParams, function(response) { if (response.items && response.items.length) { console.log(response.items[0].link); } }); }; }

This trySearch method takes a phrase and sends it along with your keys as a request to Google’s API. The response is then checked, and the first link that it finds will be logged to the console. You would call it like so:

var customSearch = new customSearchConstructor(); customSearch.trySearch('cat');

Assuming that your website contains pages about cats (and whose doesn’t?), you should see something logged in your console.

Getting The Search Phrase

Next, we’ll write some code to get the path from the URL of the page. This path will become the search phrase.

$(document).ready(function() { var customSearch = new customSearchConstructor(); var path = window.location.pathname; var phrase = decodeURIComponent(path.replace(/\/+/g, ' ').trim()); customSearch.trySearch(phrase); });

Within the jQuery ready method, we’ll pick up the pathname part of the current URL and create a search phrase from it. We’ll decode the URI, replace any forward slashes with spaces, and send the result to the trySearch method.

Replacing Strings With JavaScript

One handy thing to know is how to replace a global regular expression in JavaScript. This one is a set of matches separated by pipes:


The first and last forward slashes (/) are there to contain the expression. Within it, we escape a backslash character (\/) so that it is treated as an actual character. The + will match any instances of multiple slashes, and the g then tells it to replace every instance in the string.

Showing The Redirect

In my first version, I had the page redirect immediately. That was fun but not a great experience for the visitor. The page would load, flicker and jump elsewhere.

An alternative approach is to present the option as an overlay and as a link that the visitor can click. This way, the visitor better understands what has happened and sees a clear way to proceed. And they will have the option not to proceed if the result doesn’t suit them.

Other Approaches

Showing a single result is one way to go about this, but it would be worth considering more than the first result. If you wish to give the visitor more options, then your 404 page could show all of the returned pages as a set. Depending on the quality of the results from the custom search, this might be better.

For this example, let’s assume that the first result returned is always the most relevant, and we’ll present a single option in the form of a dialog overlay.

Also, consider cases in which no results are returned. Ensure that your 404 page contains some helpful message or content.

Starting A Dialog

If we find a result, let’s show it as a modal that prompts the user. To help with this, we’ll be able to use the new dialog10 element11 in the near future. Originally intended for dialogue from movies, the element is back and can now show any content that needs to be popped up in front of other content. In other words, we now have a native HTML5 modal element.

Let’s define the dialog in HTML:

<dialog> <h2> Hey, is this what you meant? <span class="suggestion"></span> <span class="nope">No thanks</span> </h2> </dialog> Polyfill For Older Browsers

Before calling the JavaScript that will show and hide this dialog, we need to consider older browsers. The dialog element is very new and so isn’t supported everywhere. To fix this, we can use the helpful polyfill provided by Google12.

This polyfill requires a little JavaScript. The following external script will need to be called before we create the dialog:

<script src=" polyfill.js"></script>

This script includes a registerDialog method that wraps the dialog selector with a few handy functions that reproduce the native API. We can use it in our customSearch object:

function createCustomSearch() { … var dialog = document.querySelector('dialog'); // Apply the polyfill dialogPolyfill.registerDialog(dialog); … } Showing And Hiding

We now have a dialog element, with extra methods added by the registerDialog polyfill. Let’s add some methods to show and hide the element:

function createCustomSearch() { … this.showDialog = function (url) { var suggestedLink = $(''); // Verify that the suggested URL is from this domain var hostname = new RegExp(; if (hostname.test(url)) { suggestedLink.attr('href', url); suggestedLink.text(url); $('dialog .suggestion').html(suggestedLink); dialog.showModal(); } }; this.hideDialog = function () { dialog.close(); }; }

We’ve got two methods here. The first, showDialog, takes a URL, places it in the dialog element, and calls the showModal method provided by the polyfill.

To protect ourselves, we’re verifying the URL. Because we’re expecting this script to return another page from the same website, we verify that the returned URL’s host name and the local website’s host name are the same.

The URL is then used to generate an anchor, which we place in the dialog HTML.

The second method, hideDialog, hides the modal using its own close method.

Styling The Dialog

Lastly, let’s add some style. The default modal style is a bit too boxy. We’ll make it subtler and give it a dark background with some CSS:

dialog { display: none; position: absolute; top: 0; right: 0; left: 0; text-align: center; color: #fff; border: none; background: none; } dialog[open] { display: block; } dialog[open]:before { position: fixed; z-index: -1; top: 0; right: 0; bottom: 0; left: 0; content: ''; background: rgba(0,0,0,.8); } dialog span { display: block; } dialog span.suggestion { font-size: 1.75em; line-height: 2.5em; } dialog h2 { line-height: 1.5em; padding-top: 2em; } dialog a { padding: .25em; border-radius: .25em; background: rgba(200,200,255,.9); } dialog .nope { font-size: .75em; cursor: pointer; color: #aaa; }

We’re referring directly to the dialog in this CSS. For more flexibility, you might prefer to refer to it by a class.

Tweak the various styles to fit your design. The main goal of this CSS is to define how the dialog looks, and have it display: block when given the class of open. The other styles, from position to color, are entirely up to you.

Wiring In The Search

Next, we need to adjust that trySearch method from earlier to use the dialog. We do this by placing the showDialog method call within the JSON response callback. Here’s the full script:

// <![CDATA[ function customSearchConstructor() { // Some private variables for this object var context = this; // Keeps the parent context available so that we can call local methods var dialog = document.querySelector('dialog'); // Apply the polyfill dialogPolyfill.registerDialog(dialog); // Your keys var engineID = 'YOUR_ENGINE_ID'; var apiKey = 'YOUR_API_KEY'; this.trySearch = function(phrase) { var queryParams = { cx: engineID, key: apiKey, num: 10, q: phrase, alt: 'JSON' } var API_URL = ''; // Send the request to the custom search API $.getJSON(API_URL, queryParams, function(response) { if (response.items && response.items.length) { context.showDialog(response.items[0].link); } }); }; this.showDialog = function (url) { var suggestedLink = $(''); // Verify that the suggested URL is from this domain var hostname = new RegExp(; if (hostname.test(url)) { suggestedLink.attr('href', url); suggestedLink.text(url); $('dialog .suggestion').html(suggestedLink); dialog.showModal(); } }; this.hideDialog = function () { dialog.close(); }; } $(document).ready(function() { var customSearch = new customSearchConstructor(); var path = window.location.pathname; var phrase = decodeURIComponent(path.replace(/\/+/g, ' ').trim()); customSearch.trySearch(phrase); $('dialog .nope').click(function() { customSearch.hideDialog(); }); }); // ]]> Live Demo

You can see this code in action on my 404 page13. Typing something like …/mac/plus/article/ will result in a 40414 that recommends the CSS Mac Plus blog.

Fallbacks And Other Strategies

API limits aside, it’s possible that a match isn’t found for the mistyped URL. In this case, showing the visitor some helpful content would be a good idea. Depending on your website, you could show recent articles or recently updated pages or perhaps even a custom search box.

Google’s Custom Search Engine15 gives us the option to get some embedding code. Select your existing engine and then the “Get code” button to find this. Whatever content you decide to show as a fallback, it will be better for your visitors than showing a funny picture. It might not be as much fun, but it will help visitors find what they need.

I hope you’ve enjoyed this article. If you want to share it, please double-check that the URL is correct. Or don’t. I’m sure it’ll be fine.

Front page image credits: OpenSource.com16

(ds, il, al)

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16

The post A Better 404 Page appeared first on Smashing Magazine.

Mobile Onboarding: A Beginner’s Guide

Mon, 08/11/2014 - 13:39

Nowadays, displaying onboarding screens to first-time users has become a common practice in mobile apps. The purpose of these onboarding screens — also referred to as walkthroughs — is to introduce the app and demonstrate what it does.

Given that these are often the first set of screens with which users interact, they also set the users’ expectations of the app. Therefore, it is essential that those involved in creating the product — product managers, designers, developers — take the time to evaluate whether onboarding is necessary for the app and, if so, to determine the best way to implement it.

In this article, we’ll provide some good tips on how to approach onboarding, some common implementations, alternative techniques, as well as resources to help you provide the best experience for users.

To Onboard Or Not To Onboard?

In recent years, we’ve seen plenty of discussion on the usefulness of onboarding in mobile apps. A popular argument against1 onboarding is that if an app needs it, then it is fundamentally flawed, lacking the cardinal elements of simplicity and user-friendliness. While this line of thought does have logic, it’s too sweeping a conclusion.

The digital design world has plenty of rules and best practices, which is good. These rules save designers and developers from having to reinvent the wheel every time they work on a product. More importantly, they save users from stressing out whenever they use a new app; instead, they can rest assured knowing that the editing function will be represented by a pencil icon and that a “thumbs up” icon means “like.” Rules are good.

But the reality is that every app is unique in what it does, how it does it and who uses it. These variations make onboarding a reliable, pragmatic and user-friendly feature in certain instances. Let’s consider some use cases.

Use Case 1: Unfamiliar Interaction

If you are releasing an app that supports interaction methods that most users would not have been exposed to on a regular basis — particularly a gesture-driven app — then onboarding is essential. Gesture-driven apps are still in the experimental and exploratory phase. As such, developers need to guide users on how to interact with them, clearly presenting each gesture and its corresponding function.

For example, the alarm clock Timely, indicates to the user that tapping a particular part of the screen will add or subtract five minutes from the clock.

Timely3 guides users to each gesture and the expected result. (View large version4) Use Case 2: Empty State

An app whose default state is empty and requires users to go through one or more steps to populate it with content is also well suited to onboarding. Even if the onboarding process consists of just one step, the guidance will reassure users that they are doing the right thing.

Feedly356 shows users how to retrieve their first batch of content. (View large version7) Use Case 3: Suite of Products

If your app is part of a suite of products — say, with desktop and web companions — then onboarding could greatly improve the user’s experience, especially if the mobile app doesn’t have all of the functionality of the other versions. This is especially important in complex business apps, many of which have a variety of user roles, each with specific access rights and security restrictions.

Very often the web and desktop versions will support full functionality (such as for creating, viewing, editing and deleting content), while the mobile app limits it (such as viewing only). In such cases, a brief presentation explaining what the app does would help existing users understand how the mobile app fits into the suite of products.

Use Case 4: Personal Information

If your app relies on personal information (such as age, weight, gender, marital status), then collect and store this information via onboarding. Guide the user step by step so that they are clear on why this information is being requested. And be sure to allow the user to change this information whenever they want (usually from the settings screen).

Fitbit9 tells users why their personal information is needed and guides them. (View large version10)

Even if your app doesn’t fit any of the examples above, your users might still benefit from onboarding. Keep in mind that anyone who interacts with a product will at least want to know how the product will benefit them. You can present this information in onboarding, as we’ll discuss later in the section on function-oriented onboarding.

Sure, our primary responsibility is to design products that are intuitive and easy to use. However, we shouldn’t dismiss onboarding because when it provides value to the user, it makes for a much more pleasant experience.

Which Technique to Use?

These three techniques are the most common:

  • benefits-oriented onboarding,
  • function-oriented onboarding,
  • progressive onboarding.

We’ll look at each in turn and review some general guidelines for implementing them.

Technique 1: Benefits-Oriented Onboarding

This is pretty self-explanatory. With this technique, you present the benefits (i.e. the value) of the app, communicating one or more of the following to the user:

  • What does the app do?
  • How can the user integrate it into their life?
  • What value will this integration provide?
11Evernote Food1412 highlights what the user will gain from using the app. (View large version13)

When implementing this technique, consider the following principles:

Present a Maximum of Three Key Benefits

This number is not based on hard science, but because the point is to give the user a quick overview of the app, three is a safe number (excluding the title screen). This way, the user gets to learn about the app without getting bored or slowed down by too much information.

Apply the “One Slide, One Concept” Rule

Think back to presentations from which you retained the most information. The slides with a clear, focused message probably had the greatest impact on you and were the most memorable. The same goes for onboarding screens. The “one slide, one concept” rule helps the user to focus on and digest every little piece of information. Presenting everything at once would be visually noisy and distract the user from your key message.

Prioritize, Prioritize, Prioritize

Resist the urge to show off everything cool about your app. Always return to your user data and remind yourself of the problem that the user is facing and what they need. Then, figure out how to reassure them through onboarding that the app does indeed answer their need.

Use Consistent Vocabulary

Evernote Food1412, mentioned above, uses verbs to quickly grab attention and communicate its key benefits. The approach is effective, efficient and succinct. If you can’t boil things down to a few high-impact verbs or adjectives, then a short phrase or two would suffice. Just be sure to stick with it all the way through. A harmonious and coherent presentation, both in visuals and terminology, will help to kick off the user’s experience on a positive note.

NYT Now16 uses clear, brief descriptions to communicate its benefits and value. (View large version17) Onboard Before Registration

Because onboarding is meant to be an overview, present it before the user signs up for or logs into the service. Once they decide to log in, the user will be ready to explore the app and should not be interrupted by reminders on the benefits of the app.

Keep It Brief

Perhaps you’re wondering whether onboarding really is necessary. After all, doesn’t it just repeat the description in the app store? Not at all. App store descriptions come in all shapes and sizes, whereas onboarding has to be succinct and, as such, focus on the absolute essentials. In addition, many people skip the app store description, preferring instead to dive right into the experience. So, a brief presentation once they’re engaged with the app could help them understand what the app does.

What Not to Do

Readability18 is a wonderfully practical app that, unfortunately, is inconsistent across platforms. This is particularly evident in the onboarding in the Android version, which makes several missteps:

  • The user has to digest a total of seven slides and corresponding messages.
  • The text for some slides runs a bit long. For example, the slide about sharing could have been simplified by showing icons of the social networks on which content may be shared.
  • One slide encourages the user to install a Firefox plugin, which seems misplaced given that it’s a mobile platform. Plus, the previous slide already tells the user that “Readability is a web and mobile app.” Onboarding in the mobile app should not serve as a catch-all for marketing the full suite of products, but rather should be relevant to the mobile platform.
Avoid many slides, and keep the content relevant to the platform. (View large version20) Technique 2: Function-Oriented Onboarding

Another option is to forgo a presentation on benefits and to focus instead on the app’s key functionality. This is sometimes referred to as coach marks21. If you take this approach, communicate the following:

  • What is the key functionality (for example, how to get started or what actions are most common);
  • When to use the functionality (for example, when viewing search results);
  • How to use the functionality (for example, tapping or swiping left).
Carousel23 introduces key functionality immediately. (View large version24)

When putting together function-oriented onboarding, keep the following in mind:

Don’t Explain the Obvious

Since the dawn of the Internet, from desktop apps to the web to mobile apps, the “x” has consistently represented closing, exiting or cancelling. So, unless that icon has a different purpose in your app, including it in your onboarding won’t provide any value to users.

Adobe Kuler26 doesn’t show obvious actions. (View large version27) Three Slides, One Function Per Slide

If you are explaining the functionality in a slideshow, then follow the same principle that we covered with benefits-oriented onboarding: a maximum of three slides (excluding the title slide), presenting one function per slide.

Help the User Get Started

If your app is empty by default, focus on this in your onboarding. Don’t let the user face a blank screen the first time they open the app. Include a quick note to show them how to get started, so that they don’t wonder — even if only for a second — whether the blank screen is a bug or a feature.

Spendee28 reassures users by telling them how to get started. (View large version29) Onboard Before Log-In or Sign-Up

As with the last technique, onboard users before they sign up for or log into your service.

What Not to Do

Photography showcase app 500px3230 boasts some amazing content and a rich set of functionality to go along with it. However, the onboarding process for the iPhone app commits some faux-pas:

  • The navigation bar and its functionality are showcased. Telling users that they can navigate via the navigation bar falls under the category of obvious.
  • Some slides show buttons such as for liking, favoriting and sharing. All three of these functions are represented by icons that are universally associated with them, so explaining them in the onboarding is unnecessary. Let’s suppose, for the sake of argument, that a portion of 500px’s target audience is not familiar with these icons. In this case, progressively onboarding these users by presenting the functions in context would better serve them (for example, when the user is viewing a picture and might want to “like” it).
  • One slide shows the “flow,” a timeline that showcases the activity of people whom the user is following. Because you can only benefit from the flow once you have followed others, progressively onboarding the user by telling them about this feature after they’ve followed at least one person would have been better.
500px3230 could have avoided showing several functions on a single slide, saving some details for later. (View large version33) Technique 3: Progressive Onboarding

In general, people learn best by doing. This probably explains the popularity of progressive onboarding, which is a true walkthrough in that it presents information to users as they use the app. For example, when the user is on the dashboard, they would see only dashboard-related information; when they’re viewing search results, they would be shown only functions related to search results.

Feedly356 displays hints as users go through the app. (View large version36)

Here are a few things to keep in mind when progressively onboarding:

Save for Complex Workflows

If your app has a fairly complex workflow or handles complex tasks (such as finances), then progressive onboarding is a good choice. You would feed the user information only when it’s appropriate and logical in the workflow, giving the user time to digest it.

Use for Hidden Functionality

When developing mobile apps, we’re always focused on efficiently using the small screen, which sometimes requires menus and functions to be hidden, visible only via, say, a double tap or long press. In this case, walk the user through those hidden functions.

For example, take the app Pocket3937, shown below. In it, functions are available for each item in the reading list, but the user has to swipe left in order to access them. Because the user has to populate the app with content, a nice touch would have been to wait until the user has added at least one item to the reading list, and then immediately point out that a left swipe reveals the hidden functions.

Pocket3937 could have progressively onboarded users by pointing out hidden functionality. (View large version40) Ideal for Gesture-Driven Apps

If your app is strictly gesture-driven, then this hands-on approach is best. Getting the user to take action over time as functionality is introduced will help the information stick.

Solar42 presents each gesture and helps the user learn by doing. (View large version43) Make It Persistent

For gesture-driven apps, provide a shortcut to a list of gestures and their corresponding actions, perhaps in the settings screen.

Remember that the more gestures you have, the more the user has to memorize. And the more gesture-driven apps a user has installed on their device, the more confused they can get, trying to remember the difference between a double-tap in one app and a double-tap in another. Making the information permanently accessible adds an extra layer of comfort.

Beats Music45 provides permanent, quick access to a list of gestures. (View large version46) What Not to Do

Because progressive onboarding complements a user’s exploration of an app, the biggest risk is that incessant hints as the user moves from screen to screen will ruin the experience of an otherwise wonderful app. So, take even greater care with this technique to show only the most useful information.

Also, avoid highlighting features on every screen. Give the user some breathing room so that they get some satisfaction from exploring your app. A walkthrough is not a substitute for poor design. It should simply enhance the experience.

Alternative Solutions

The techniques presented above are the most popular. But you do have other options to play with!

Alternative 1: Hybrid

A hybrid approach — blending one, two or all three techniques — is sometimes viable, as Flink47 shows:

Flink combines onboarding techniques. (View large version49) Alternative 2: Video

Video onboarding is used in some apps and is worth looking into. This can be taken in different directions, with some videos being more practical, like a tutorial, while others are basically advertisements. As with videos on websites, playing them automatically would be invasive and jarring for the user. And the user might be in a public space, where blasting sound from a mobile device would be inappropriate.

Fifty-Three uses the power of sound and visuals to present its app Paper51. (View large version52) Alternative 3: Sample Data

Providing some sample data for the user to play with might also be worthwhile. This is particularly helpful in apps that handle sensitive data, such as finances and human-resources data. If the app is preloaded with sample data, the user will feel comfortable experimenting, making mistakes and learning how the app works, and they will feel better prepared to input real data.

Xero53 gives users sample data to learn how the app works. (View large version54) Conclusion

The guidelines and examples in this article will jumpstart your onboarding project; however, as always, the user is at the heart of all of this. So, as you evaluate which technique to use, remember to revisit your personas, user scenarios and any user data you have, whether from analytics or market research.

If you’re still unsure about which technique to go with, test one or two techniques on users and analyze the feedback to see what works and what doesn’t. No solution is one-size-fits-all, so, as always, use the data on hand to make the most informed decision.

As you take your first steps, monitor what other developers are doing. The following websites provide a variety of onboarding patterns to draw inspiration from:

If you’re interested in platform-specific guidelines, then check out Apple’s59 and Google’s60.

(cc, ml, al, il)

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46
  47. 47
  48. 48
  49. 49
  50. 50
  51. 51
  52. 52
  53. 53
  54. 54
  55. 55
  56. 56
  57. 57
  58. 58
  59. 59
  60. 60

The post Mobile Onboarding: A Beginner’s Guide appeared first on Smashing Magazine.

Learning More About Creativity And Innovation From LEGO

Fri, 08/08/2014 - 14:18

Many companies and design agencies tend to look at the design and creativity stage from a narrow perspective. Usually, the design team is locked inside the ideas room with no contact with the rest of the world until it delivers the idea that gets approved by the client or project manager.

Once a project goes into crisis mode and stress increases, creativity is given an even more limited role in the project. This can be a result of the high cost of developing creative concepts or a lack of confidence that creative people are able to handle pressure and provide help at this critical stage of the project.

Additionally, generic models of the development process do not focus much on innovation and creativity, whether partially or holistically, leading enterprises such as BT, Microsoft, Starbucks, Xerox, Yahoo and others to provide the proof that an innovative design process can lead to a competitive position in the market — see “Eleven Lessons: Managing Design in Eleven Global Companies1” (PDF).

Over the last century, many incidents have provided examples that innovation and creativity can play an essential role for an organization in the midst of crisis. Creativity and innovation in such cases take a broader role outside of the ideas room. They can be applied to redesign a company’s structure and devise a more innovative process that leads to products that meet both creativity and business needs.

One interesting example of this is LEGO, the world-famous toy manufacturer. By studying its crisis, lasting from 1993 to 2004, we’ll answer two main questions: Can creativity and innovation help an organization in its time of crisis? And can studying cases such as LEGO’s reveal a model for the broader role of creativity in an organization for other enterprises to follow?

2LEGO bricks (Image: Wikipedia3) The History: The Rise Of The Toy-Making Giant

LEGO is a leading company4 in the toy-making industry and the sixth-largest enterprise in the field. In case you didn’t know, the word “lego” is an abbreviation of two Danish words, “leg godt,” which means “play well.” In Latin, the word means “I put together.” The Danish company was founded in 1932 by Ole Kirk Kristiansen, whose small carpentry workshop failed at providing wood supplies, according to David Robertson and Bill Breen in their book Brick by Brick5.

Kristiansen switched from the workshop business to wooden toys, which succeeded in the market at the time. Then, he bought an injection-molding machine and started to create toys using plastic materials, which also did well in the market. After Kristiansen passed away, ownership of the company went to his son, Kjeld Kirk Kristiansen. Brick-toy manufacturing was launched in 1958, giving the company more ways to compete and opening the door to unlimited building capabilities.

6Pull-along wooden duck by LEGO from around 1955 (Image: Brick Fetish7)

By 2006, revenue reached £717 million, following an 11% increase from the previous year. The company has 5,000 employees around the world, and its main facilities are located in LEGOLAND in Denmark. The company has 12,500 warehouses and more than 11,000 suppliers. In addition to the production location in LEGOLAND, production sites are located in Switzerland, Czech Republic, the US and South Korea. The LEGO design team consists of 120 people in Denmark and 15 others in Slough, UK.

8LEGOLAND Germany (Image: LEGOLAND9)

Since the start of the company, LEGO has maintained a clear vision of “inventing the future of play.” While achieving this vision has been a matter of hard work and continual research into its customers and how to provide innovative products, repeatedly returning to this vision has been a key element that helped to save LEGO’s ship from sinking, as we’ll see later in this article.

The Problem: LEGO’s Hard Times

Before 1993, LEGO had faced some general troubles with sales but did not experience any hard times, as sales and revenues continued to rise. After a catastrophic period between 1993 and 2004, sales grew again and reached £163 million in net profit in 2008, with sales increasing by 51% in the UK, with an increased market share of 2.2 to 3.3%.

The question is what really happened between 1993 and 2004 to cause sales and, subsequently, revenue to drop off a cliff? And what did LEGO do to retrieve its position in the market and, furthermore, to increase sales and revenue more than expected?

Between 1993 and 2004, two major problems collided. The first occurred between 1993 and 1998, when LEGO toys were already on every shelf and the company had reached its natural growth cycle. In order to keep growing, the company produced more products, but sales did not increase. Subsequently, costs went up and hindered profits (see “How LEGO Stopped Thinking Outside the Box and Innovated Inside the Brick2110”).

In response to this loss, the company laid off 1,000 employees, and Kjeld Kirk Kristiansen stepped aside, saying, “Maybe I’m not the right person to lead this company in the next generation.”

The new president for the company, Poul Plougmaan, understood that the company was operating very differently than before. After analyzing the market and its consumers, he discovered that kids were continually getting smarter. Added to this, new competitors had entered the market, such as Toys “R” Us and Walmart, with powerful strengths. And many toymakers had moved their production to China in order to decrease manufacturing costs. The Analysis: Outside the Box, Outside the Business

As a company built on innovation to meet customer expectations and market demands, LEGO first responded to financial crisis by inventing new products, hoping that they would lead to new opportunities. LEGO collaborated with production companies behind famous movies and characters such as Star Wars and Harry Potter to create new bricks that children would buy based on their passion for the movies rather than for LEGO itself.

11LEGO Star Wars and Harry Potter (Image: Lego12)

Some of these products, such as Star Wars, did well in the market and appeared to be saving the company from sinking, while other products were a big failure, such as Galidor. While this innovative thinking might have appealed to LEGO at the time, it had two main pitfalls:

  • The new products were not actually solving the company’s problem because they were focusing on consumer passion for other movies and characters, instead of LEGO products themselves.
  • The themed products were a short-term success, because once a movie grew old, no one would buy the theme again.

As a result of venturing into these new innovative product areas, LEGO found itself outside the business while trying to get back on track. Furthermore, the new products diminished the market for consumers seeking original LEGO bricks.

These new products were one reason for the company’s second fall in 2003. Once sales for its two main themes, Star Wars and Harry Potter, started to fall, company sales went off another cliff.

The solution to the first drop highlighted another situation that needed to be studied. LEGO’s problem was not its innovation, but rather the connection between its innovation and its business goals. When innovation gets out of control, it disconnects from the company’s strategy, leaving a gap between business and creativity, leading to sales losses.

The Solution: Relinking Creativity and Business

The short answer to how LEGO solved its market problem was simply by thinking inside the box again. It returned to its ordinary brick themes, such as racing cars, police stations and schools. These products allowed children to reuse the bricks again and again. Buying a new brick set would actually add to the previous one. This is one of LEGO’s key marketing strengths and something consumers really want.

13LEGO overcame the crisis by returning to the original bricks. (Image: Brick Fetish14)

Behind this conclusion were new innovations in the process itself. Unlike many companies that lock creativity inside the thinking room, LEGO strongly believes in expressing creativity not only in its products but in its production process. To understand how creativity and innovation helped to solve LEGO’s problem, we need to learn more about the role of design strategy in LEGO’s manufacturing process.

Design for Business

LEGO is one of the few companies that has had a clear vision of the role of creativity within its organization. LEGO developed a design process model known as “Design for Business” (D4B) to ensure the continual linkage between innovation and its business plan. D4B also shifts the strategy for innovation from being product-focused to being company-focused.

D4B focuses on defining creativity and design within an organizational strategy. For example, it links the company’s objectives and design strategy in order to achieve these corporate goals. Also, D4B provides for more collaboration between teams to improve the innovation process. It required a number of processes and tools to ensure that innovation was better presented and discussed. According to Design Management Europe’s award poster for LEGO15 (PDF), these tools and methods are divided into being innovation-related and design-related — understandable given that design is the roadmap that turns creativity into innovation.

While the D4B model provided a unique management process, allowing for design and innovation to be more holistically integrated in the organization, a gap still existed between the marketing strategy and creative team. This gap was one of the causes of LEGO’s dramatic fall by the end of the 1990s. We can trace it back to the creative team thinking differently from the company’s initial vision.

LEGO’s Shared Vision

D4B was part of a seven-year strategy named “Shared Vision” established in 2004. The new vision was to rebuild the company’s brand identity as a creative toy-manufacturing enterprise. In this strategy, the marketing department was asked to provide a wider vision of innovation and creativity in the product development process. This vision ensures that both the creative side and business side share the same aims and fully understand LEGO’s business strategy and how to achieve strategic goals using the other team’s resources.

As mentioned, LEGO’s problem was not its creativity but in the disconnect between its creativity and corporate strategy. The business and creative teams were working in silos, each having authority to innovate on whatever it wanted. While LEGO struggled with this problem, many companies do not position design and creativity correctly within their business and strategy. Perhaps the problem was acute for LEGO because it is a creativity-based company.

The Shared Vision strategy is the link between business and creativity and puts the process of innovation in its correct place in the organization. It brought the creative team out of its silo and connected it to the company’s business goals, allowing it to create under the umbrella of a company-wide strategy. The move brought LEGO’s strategy back to life, with products that met both creativity and business needs.

The Result: LEGO Goes On

While the Shared Vision strategy is a seven-year initiative, it has already affected the company’s sales and revenue. In 2006, LEGO was named the world’s sixth-largest toy maker, with revenue at £717 million, an 11% increase from the previous year. Net profit for 2006 was £123.5 million, a jump of 6.5% over 2005.

This dramatic increase in revenue is a result of a number of procedures, including the application of the Shared Vision strategy with the D4B design process, in addition to a reduction in costs (the company reduced its fixed costs by 33%).


The story of LEGO is an important and rare lesson for designers and design strategists on the true importance of design and creativity in an organization. It also indicates that many current business models do not put design and creativity in their right place in the organizational process. As a result, many of those business models can lead to failure, especially for a company that depends so heavily on creativity and innovation, like LEGO.

In many companies, designers and design managers are not invited to help conceive the corporate strategy, and this is one of the essential problems that led LEGO off a financial cliff and into bankruptcy. Rather, putting design and innovation in the right place can lead a company to achieve its business goals and overall strategy.

How does your company or the company you work at deal with creativity and innovation? Please share your thoughts in the section comment below — I’d love to hear them!


(al, il)


The post Learning More About Creativity And Innovation From LEGO appeared first on Smashing Magazine.

Useful Adobe Fireworks Resources: Tutorials, Articles And Freebies (Part 2)

Thu, 08/07/2014 - 13:35

A few weeks ago, I mentioned some of the best extensions1 that are currently available for Fireworks. Today, I’ll cover some of the best tutorials and articles, as well as many freebies (styles, templates, resource libraries, and so son) that are available for Fireworks. All of them can (and will!) teach you how to use Fireworks in a better, more optimal way.

Again, in order to help you obtain a good overview of everything covered in this article, I’ve grouped the resources into the following sections:

  • Tutorials2: Everything you need to know about how to use Fireworks.
  • Articles3: The features of Fireworks and other UI design tools (compared).
  • Assets and freebies4: Fireworks PNG files, templates, style presets, libraries, etc.
  • Conclusion5: Is Fireworks still relevant in 2014 and what are its alternatives?
Tutorials Brushed Metal Effect in Adobe Fireworks Tutorial

Using this “Brushed Metal Effect6” tutorial, you can create a nice-looking brushed metal effect in Fireworks. The tutorial is pretty basic but you can learn a thing or two from it. (If you’re curious, in real life brushed metal7 is metal with a unidirectional satin finish produced by a special polishing process; the brushing gives the metal a distinctive look, as it retains some but not all of its metallic lustre and is given a pattern of very fine lines parallel to the brushing direction.)

The final result can be saved as a vector file, or you can easily export a “flat” pattern or texture file of any size.

8“Brushed Metal Effect in Adobe Fireworks” tutorial: I have tried the steps outlined in it, and the final results can be achieved pretty easily. (view large preview9 or download the editable Fw PNG file10) How to achieve pixel perfection with Adobe Fireworks Tutorial

When it comes to user interface design, Adobe Fireworks is an excellent tool for laying out your ideas and also for creating cutting edge graphics for your app or website. Like in any other graphic software, there are different ways to create one effect. However, the result doesn’t always look the same for each method. In the article “How to achieve pixel perfection in your designs with Adobe Fireworks11,” Ivo Mynttinen1026012 will show you how to achieve real pixel perfection!

“How to achieve pixel perfection in your designs with Adobe Fireworks” (example from the tutorial).

(Note: Ivo Mynttinen wrote also a very useful and detailed article for Smashing Magazine, “Design Cutting Edge iOS Apps With Adobe Fireworks13“.)

Creating Brushed Metal in Adobe Fireworks Video Tutorial

Speaking of brushed metal effects, here’s a more complex (video) tutorial that will let you achieve more interesting results: “Creating Brushed Metal in Adobe Fireworks14.” It’s by designer and Fireworks master Rogie King15 and is certainly worth watching.

16“Creating Brushed Metal in Adobe Fireworks,” by Rogie King. (watch video tutorial17)

This tutorial will show you actually some of the steps in the process of designing the Rainboxx logo18 (see the next item in the list).

Designing the Rainboxx Logo Video Tutorial

Watching designers work is always fun and can teach us a lot; so I can recommend you to watch the “Designing the Rainboxx Logo in Fireworks19” video tutorial by Rogie King. You can get an insight into Rogie’s workflow and also learn a few useful things about Fireworks and its tools.

20“Designing the Rainboxx Logo in Adobe Fireworks,” by Rogie King. (watch video tutorial21) Pasting Attributes in Adobe Fireworks Video Tutorial

Here’s another quick video tutorial (only 7 minutes long) by Rogie King, “Pasting Attributes in Adobe Fireworks22.” It’s about the option to easily copy-paste attributes between different objects on the canvas in Fireworks. The option is easy to master (it’s as simple as Ctrl/Cmd+C and Ctrl/Cmd+Alt+Shift+V!) but very useful. Rogie will show you a few examples of its use and a few tips and tricks.

23“Pasting Attributes in Adobe Fireworks,” by Rogie King. (watch video tutorial24)

(And, if you need even more control, there’s the Copy and Paste Selective Attributes command available in the Modify Commands25 set by Aaron Beall.)

Brushed Metal iCloud Logo Tutorial

This is another tutorial which is about brushed metal effects (that’s the last one, promise!). In “Brushed Metal iCloud Logo with Fireworks26,” you’ll learn how to work with vector shapes, filters and vector masks.

“Brushed Metal iCloud Logo” tutorial: putting it all together. (source27)

(Note: There are many other excellent tutorials, published in the FireTuts28 website, do check them out!)

Working with Masks in Fireworks Video Tutorial

Working with Masks in Fireworks29 is a bit long video tutorial (close to half an hour!) by Jim Babbage30, but from it you’ll learn everything you need to know about masking with Fireworks — how to create vector masks, how to easily edit already created masks, working with gradients in masks, etc.

31“Working with Masks in Fireworks” video tutorial. (watch video tutorial32) Realistic 3D simulation with reflection in Fireworks Tutorial

Realistic 3D simulation with reflection in Fireworks33 (by Lucian Dragomir34) will teach you a thing or two and the end results look very elegant.

Realistic 3D simulation with reflection in Fireworks. (source35) 8 Essential Fireworks Tips For Web Design Tutorial

8 Essential Fireworks Tips For Web Design36 is a tutorial (originally published in .net magazine UK37 and written by Jonathan Snook38), which takes a good look at the features that make Fireworks so useful for web designers (these include styles, pages and states, rich symbols, and more). Jonathan also shares a few other time-saving tips in this tutorial! If you are a Photoshop die-hard fan and wondered why you’d ever should try Fireworks, or if you have been using Fireworks for years and are looking to improve your workflow, then this tutorial is just for you.

“8 Essential Fireworks Tips For Web Design” (screenshot from the tutorial). Easy Odometer Icon Tutorial

The Easy Odometer Icon39 tutorial (by Tiago Camargo) is an easy-to-follow tutorial in which you’ll learn how to deal with Fireworks vector objects, live filters and blending modes.

“Easy Odometer Icon” tutorial, published in the FWPolice4140 website (final results).

(Note: The FWPolice4140 website also offers many types Fireworks vector freebies42 and has many other tutorials43 about Fireworks.)

Refining Your Design In Adobe Fireworks Tutorial

In the “Refining Your Design In Adobe Fireworks44” tutorial, Benjamin De Cock45 shares a few excellent tips and tricks when working with Fireworks, accompanied by many helpful illustrations and screenshots. We have published this tutorial in 2012, but it’s still highly useful to read even today!

“Refining Your Design In Adobe Fireworks” tutorial. (source46) Fireworks: The Things You Might Have Missed Tutorial

This is a very old tutorial by Trevor McCauley but you can still learn a few smart Fireworks tips and tricks from it: scaling of attributes of objects, using vector shapes for bitmap marquees, selective JPEG quality, hiding/showing selection edges, finding and replacing colors (or text) in FW PNG files, the difference between subselect and superselect, tweening symbols for duplication, and so much more. This is an old classic!

“The Things You Might Have Missed” tutorial. (examples from: source 147, source 248).

(Trevor is well-known in the Fireworks community; he has created many useful Fireworks extensions49 and recently even open-sourced50 them, releasing the source code on GitHub51.)

Index and Alpha Transparency in Fireworks Tutorial

In “Index and Alpha Transparency in Fireworks52,” Dave Hogue9553 (currently UX design manager @ Google) is taking an in-depth look at index and alpha transparency and how to use them in Fireworks to your advantage.

“Index and Alpha Transparency in Fireworks” (tutorial example).

(Note: It’s a not-so-well known fact that for many years, Fireworks was the only design application54 that could export PNG8 files which included both index and alpha transparency! These PNG8 index+alpha files were displayed correctly across all browsers, including Internet Explorer 6, which couldn’t render properly PNG files with an alpha transparency channel.)

FireworksGuruForum Community

The forum members of the FireworksGuruForum55 (created by Alan Musselman13256), while not so active as in the past, are still there to help you, should you have any questions regarding Fireworks. But what’s more important, there are many useful resources published there (freebies, tutorials, useful links, Fireworks PNG files and templates, styles, etc.).

FireworksGuruForum (screenshot). Adobe Fireworks Tutorials by Craig Erskine

In this series of Adobe Fireworks (mini) tutorials57, Craig Erskine8258 will teach you many basic and advanced techniques. These tutorials were written mostly for users who have a very strong understanding of Fireworks, but even if you are not a Fireworks expert, they’re still worth checking out!

Adobe Fireworks Tutorials, by Craig Erskine (screenshot). Articles The Endless Fireworks vs. Photoshop Battle Article

The Endless Fireworks vs. Photoshop Battle59” article was written over 3 years ago by Ivo Mynttinen1026012 and is still relevant today, even if we know that in the end, Photoshop became the apparent winner in this battle — but not because it proved to be a better UI design tool than Fireworks, but because Adobe always wanted to market it as such.

The article is pretty long and goes into great detail about what are the strengths and weaknesses of both apps when used specifically for UI design — web, mobile, icon design, etc. Do check it out! (Btw, today Ivo still uses Fireworks but has moved a lot of his workflow to Sketch61; and he’s not the only one62.)

The Endless Fireworks vs. Photoshop Battle article (screenshot). The Power of Adobe Fireworks Article

The Power of Adobe Fireworks63” is an article which I wrote in 2010 (how time flies by!) and in which tried to show all the various types of work that Fireworks can be used for — UI and icon design, illustration, web design, even digital painting.

“The Power of Adobe Fireworks”: a few examples from the article.

The list of designers and illustrators, whose work I have showcased in my article, included Matthew Inman (the cool guy behind The Oatmeal64 comic strips), Rogie King65 (designer and illustrator, who’s always on page #166), Ryan Hicks67 (Senior UX Designer at Adobe), Craig Erskine68 (known to many with his successful “Fireworks PNG Weeks8169” series), Jon Hicks70 (the inventor of the Firefox logo, among other things), and many others. (It does not include the work of great illustrators (and Fireworks masters) such as Isabel Aracama12671, James Parker72 or Fabio Benedetti73, with whose work I was acquainted with at a much later time… I should perhaps consider a Part 2 one day!)

50 Reasons not to use Photoshop for Web Design Article

The “50 Reasons not to use Photoshop for Web Design74” (by André Reinegger) feels like a direct feature comparison between Photoshop and Fireworks. It’s a bit outdated today (and yes, so many years later Photoshop can finally create and edit rounded rectangles!) but many of the reasons outlined there are still valid. In its core, Photoshop was designed to be used for manipulation of raster images and for print tasks; it was not designed to create pixel-precise screen layouts, or to make quick changes to them.

Photoshop is used for this purpose however (UI and web design) because many designers are familiar with the program. However, other tools exist that were designed from the ground-up to be UI design tools and perform the task better; and among them is Fireworks (although Sketch and a few other new tools are starting to catch up and real fast).

Examples from the “50 Reasons not to use Photoshop for Web Design” article. Adobe Fireworks, a Super Hero that is Hard to Kill Article

Why not approach the subject of Fireworks vs. Photoshop with a bit of humor? André Reinegger is trying just that in “Adobe Fireworks, a Super Hero that is Hard to Kill75.” Adobe has no tool in their portfolio today that can replace Fireworks in full, and it’s doubtful if Adobe will invent such a tool, now that they froze the development of Fireworks. But the good news is that Adobe still keeps Fireworks in their Creative Cloud list of apps and it runs fine on latest Windows OS and MacOS X. There are also hundreds of excellent free extensions which add valuable new features to Fireworks.

“Adobe Fireworks, a Super Hero that is Hard to Kill” article. (source76) 10 Reasons why I prefer Fireworks to Photoshop for Web Design Article

In “10 Reasons why I prefer Fireworks to Photoshop for Web Design77,” Leigh Howells (designer at Headscape78) shares why he has decided to make the transition from Photoshop to Fireworks. He was a Photoshop user for over sixteen years (ten of which have been in a production web design environment). When Fireworks CS4 was released, he decided to have another look at Fireworks. He played with it a bit, and was very impressed by some of its features. Soon after that he started producing much of his day-to-day work in Fireworks.

Some of the reasons he mentions are the ability to have multiple pages (with master page) in one Fireworks PNG document; symbols and styles; the powerful vector features of Fireworks; the 9-slice scaling tool, and a few others.

“10 Reasons why I prefer Fireworks to Photoshop for Web Design” (screenshot from the article). 7 Reasons Why I Choose Fireworks Over Photoshop Article

So, you are still in doubt about Fireworks? Let Russell McGovern tell you his reasons for using Fireworks in “7 Reasons Why I Choose Fireworks Over Photoshop79.” He takes his time to efficiently visualize the evident advantages of the program and explains his preferences and the key features of Fireworks that help him in his UI daily design tasks.

“7 Reasons Why I Choose Fireworks Over Photoshop” (example screenshot from the article). Fireworks PNG Files, Templates, Style Presets & Resource Libraries Dragnet Wireframes Kit for Adobe Fireworks

Dragnet Website Wireframes Kit80 for Adobe Fireworks (by Jonas Skoglund) is a common library with over 25 objects that make rapid prototyping of websites much easier in Fireworks.

Yes, Fireworks comes pre-loaded with a library of similar web elements that look really nice, but Jonas developed the kit because he wanted to create something a bit more rough, something that looked more like sketches, so the clients (or the user test participants) wouldn’t get distracted by the design when instead they should focus more on the function behind the web page or application.

Dragnet Wireframes Kit for Adobe Fireworks (screenshot). Fireworks PNG Weeks Series

Fireworks PNG Weeks8169 is a collection of 52 high-quality Fireworks editable PNG files that you can download and de-construct in Fireworks at your ease. It was a project by Craig Erskine8258 and quite a cool one, because often, one can learn a lot when taking a close look at the work of others!

Fireworks PNG Weeks (example from PNG Week #3283). Dribbble Records Fireworks PNG

Dribbble Records84 is a Fireworks PNG freebie which is based on a Dribbble shot85 of mine. I liked the end result, so I decided to release the file as a freebie (for personal/non-commercial use). If you open the file in Fireworks, you can learn a bit about gradients, blending modes and live filters.

86Dribbble Records Fireworks PNG freebie. (view large preview87 or download the Fw PNG file88) Dark UI Kit Templates

Dark UI Kit89 (by Dustin Evans90) is a great looking set of templates for Adobe Fireworks which is completely free. You can learn from it or just (re)use the templates in both personal and commercial projects.

The kit is in Fireworks PNG format and contains five pages, each one containing elements of different type: menus and tabs, alerts and validation dialogs, sliders, etc.

91Dark UI Kit for Adobe Fireworks. Simple User Interface Kit Templates

The Simple User Interface Kit92 (by Stefan Hiienurm”93) is a set of clean UI templates which will help you to do (and learn) better design. It’s available in both Fireworks PNG and Photoshop PSD editable formats. (Note: The kit is not free, but costs only $12.00. In this article, I tried to collect mostly free items, available for Fireworks, but sometimes an exception or two is OK, if the quality is very good.)

Simple User Interface Kit (available in Fireworks and Photoshop formats). Hipster Photo Styles for Fireworks

As the name suggests, Instant Hipster Photo Styles for Adobe Fireworks94 (created by Dave Hogue9553) is a set of non-destructive photo styles that can be easily used on any photo or image. They include 17 variations (sepia, polaroid, sunrise, black & white, tint, sketch, etc.) and were optimized for images from 300 x 300 to 750 x 750 pixels (which makes them perfect for use on the web and when sharing pictures by email); but they can also be applied to a photo of any size, of course.

Hipster Photo Styles for Fireworks (example).

With Instant Hipster photo styles, you can make your own Hipstamatic-style shots right within Fireworks and even send them instantly to Twitter or Flickr with the help of the TweetFire or FlickrFire extensions, which I have reviewed earlier in detail.

I tried to play a bit with these a while ago and found them both easy and fun to use. What’s better: you’re not limited to using the styles “as is” only! You can download a style set, tweak the styles to suit your taste better, and re-save them. Or, you can create your own style sets from scratch: pick up a few live filters, adjust their properties, experiment, and when ready, simply save as a new style. Easy!

The process is very straightforward: select an image (1), apply a specific style (2), done! (Note: this example includes a photo by B’Joel96 and shows a 1978 Lincoln Town Car). Webportio Library of Fireworks Resources

Webportio97 (created by Jiří Plíštil98) is a library of Fireworks resources, quite regularly updated. It contains a few hundred graphical elements in editable Fireworks PNG format (icons, buttons, forms, patterns, ribbons, etc.), and also various other resources, like grids, styles, website templates, etc. All of the resources are free and well categorized. They have been downloaded over 400’000 times since the Webportio site was launched.

99Webportio resources (screenshot). Fireworks Library by Aaron Beall

The Fireworks Library100 by Aaron Beall101 is a small library of high-quality Fireworks editable PNG files, patterns, styles and symbols. You can freely use any of them in your projects, or learn by de-constructing them in Fireworks.

Aaron Beall’s library (examples). FireworksLab Library of Resources

Finally, I should also mention FireworksLab. It was an excellent free design resources site for Adobe Fireworks files, created by Ivo Mynttinen1026012. Ivo started FireworksLab because in 2010 there were not many resource sites with quality Fireworks files; in addition he wanted to support the growing Fireworks community. For the time that FireworksLab existed (less than two years), Ivo and a few contributors have designed and released 47 freebies which have been downloaded around 300’000 times!

The project was shut down at the end of 2012, but luckily for all of us, Ivo is still providing the Fireworks resources created in one large ZIP archive. If you want to use or learn from any of them, go to the FireworksLab announcement post103, section “Can I still download the old FireworksLab resources?”, and get the archive!

FireworksLab resources (examples). Conclusion

In Part 1104 and Part 2 of this Adobe Fireworks Resources (2014 Edition), I tried to collect all the best resources, available today for designers using Fireworks.

Did I miss to mention any important resources, extensions, styles, articles or tutorials? I probably most certainly did! My list is by no means complete, but truth is, one cannot list each and every valuable resource that is available for Fireworks today — there are way too many of them — thanks to the amazing Fireworks community! We’ve also published over 25 high-quality articles and tutorials in our Fireworks section105 over the last two years, and I can recommend reading each one of them!

Where to go from here?

As I mentioned in my recent article, the future of Fireworks106 is certainly not bright, but as of 2014, it’s still a solid piece of software that can help UI designers work in a very efficient way.

Do I believe Fireworks is still better than many other UI design tools available today? Yes107. Personally, I use Fireworks CS5.1 and CS6 on Windows 8.1 Pro 64bit, and find both of them stable, useful, and quite indispensable in my workflow. I also use many free extensions which add valuable features to Fireworks, like the SVG import108/export109 commands; without its extensions, Fireworks wouldn’t be where it is today.

Is Fireworks still relevant?

Is Fireworks still relevant in the fast-pacing software world? Yes — to some extent, at least. Fireworks is like a smart Swiss-knife tool — it can be used in a variety of ways, and while none of its tools are unique, as a whole, it becomes a powerful and versatile110 application (try browsing Dribbble, searching for shots tagged “Fireworks111“):

  • For example, Fireworks can be used to help you create modern, responsive websites, both during the UX and interaction design stages112 and during the visual design stage113, as this detailed case studies (by Olawale Oladunni) proved.
  • Fireworks can be extended in a variety of ways and even if the core of the app is not getting any major updates from Adobe, extensions can continue add new functionality. In this regard, projects like Project Phoenix114 are very important, as well as the countless number of extensions, published by John Dunning115, Aaron Beall116, Matt Stow117, Trevor McCauley118, and many other extension developers.
  • Fireworks can be used for wireframing and prototyping119, web design, UI design, icon design, mobile apps design (for both Retina and non-Retina screens), and screen illustration. Since in its core Fireworks is a powerful vector design tool, scaling to any screen resolution is not an issue (plus, it supports SVG120).
  • And while Fireworks excels with vectors, it can also edit bitmaps, too — no need to switch to another tool if you need to quickly make a few color correction to an imported graphic or if you need to crop it/mask it, etc. (This is one of the main differences between Fireworks and a few of its modern alternatives, such as Sketch121).
  • What about collaboration with Fireworks? Fireworks can perform equally well in individual designer’s workflows and when used by large design teams122. With the help of pattern symbol libraries123 and style guide symbol libraries124 the collaboration process can become even easier.
  • Does Fireworks have some problems? Yes! Its last version (CS6) was released in 2013 and while it works fine on latest Windows OS and Mac OS X, it has some issues — for example, partial incompatibility with Retina MacBook Pros (there is some “pixellization” in the interface), and inability to use more than 2 GB of RAM (Fireworks works well on 32bit and 64bit machines, but because it’s a 32bit application, there are limits as to how much memory it can handle). And it has a few bugs, of course (but which app doesn’t?).
125This is a 100% vector illustration, created with Fireworks (and with a lot of love) by illustrator Isabel Aracama12671. Make sure also to check the larger original127 or the complex vector outlines128! Alternatives to Fireworks?

You can continue to use Fireworks today, but as I mentioned earlier, it’s a good idea to start looking for alternatives. And there are a few UI design tools that might become sooner or later pretty good replacements to Fireworks.

Here are four of them:

  • Sketch129 (by Bohemian Coding130) is UI design tool for Mac which, as of version 3.0, has integrated many of the features that only Fireworks had until now. Its vector tools are quite powerful and it has symbols, pages, artboards, styles, and many other tools that should help UI designers be more efficient. It feels a bit sad that it’s for Mac OS X only (sorry, Windows users!), and its bitmap editing abilities are very limited, but if you’re on a Mac and work mostly with vectors, give it a try — you probably will like it! (And it’s not very expensive, too; Sketch 3.0 costs $79.00, as far as I know).
  • Project EvolveUI131 is still in alpha development stage and is a relatively new open source project by Alan Musselman13256. You can join the google group of the project133 if you want to test the early builds and discuss its present and future features. EvolveUI screen design tool will be able to run on Windows, Mac OS X and Linux, and will be tailored specifically for UX and UI designers, information architects and web developers. Sounds promising!
  • Skala134 is a project by Marc Edwards135. This UI and icon design tool promises to deliver a unique blend of vector, bitmap and 3D abilities. Today Skala is in a closed beta stage136, but a public beta will likely be open before the end of 2014. So far the plans of the team are to make a Mac-only version, but perhaps a Windows version might be considered at some point in the future, too.
  • Gravit137 is a new UI design tool for Windows and Mac (developed by Quasado138) that is currently in beta stage139 but should be released to the public very soon, in August. It promises quite a few features that might replace Fireworks, and will be completely free until version 2.0140 is released. You can get the early news in the newsletter141 or on Twitter (@gravit_io142, @quasado143).
  • (last-minute click) Affinity Designer144 is a new UI design tool for Mac, currently in open beta stage145. You can try it for free or follow the news via the @MacAffinity146 Twitter account. The tool promises to be very fast, with a robust set of vector and bitmap editing tools, custom auto shapes, and with excellent compatibility with PSD, AI and SVG file formats.

So, do you use Fireworks in your work? Have you recently found a good alternative to it? It’d be great if you could share your experiences with the tool in the comments section below.

A special thanks goes to Vitaly Friedman147 who helped me compile this extensive list of Fireworks resources and who inspired me to write this article!

(mb, ml, il)


The post Useful Adobe Fireworks Resources: Tutorials, Articles And Freebies (Part 2) appeared first on Smashing Magazine.

A Closer Look At Personas: What They Are And How They Work (Part 1)

Wed, 08/06/2014 - 12:59

In my experience as an interaction designer, I have come across many strategies and approaches to increase the quality and consistency of my work, but none more effective than the persona. Personas have been in use since the mid-’90s and since then have gained widespread awareness within the design community.

For every designer who uses personas, I have found even more who strongly oppose the technique. I once also viewed personas with disdain, seeing them as a silly distraction from the real work at hand — that is, until I witnessed them being used properly and to their full potential.

Once I understood why personas were valuable and how they could be put into action, I started using them in my own work, and then something interesting happened: My process became more efficient and fun, while the fruits of my labor became more impactful and useful to others. Never before had I seen such a boost in clarity, productivity and success in my own work. Personas will supercharge your work, too, and help you take your designs to the next level.

I hope that those who are unfamiliar with personas will read this series of articles, divided into two parts, and give them a try and that those who are opposed to their use will reconsider their position. Where the use of personas has generated uncertainty and even controversy, I have leaned in with curiosity and a critical eye, questioning the tenants of my discipline to determine what works for me — and I’m all the better for it. Perhaps what I’ve learned will help others in their journey to hone their work as well.

What Is A Persona?

A persona is a way to model, summarize and communicate research about people who have been observed or researched in some way. A persona is depicted as a specific person but is not a real individual; rather, it is synthesized from observations of many people. Each persona represents a significant portion of people in the real world and enables the designer to focus on a manageable and memorable cast of characters, instead of focusing on thousands of individuals. Personas aid designers to create different designs for different kinds of people and to design for a specific somebody, rather than a generic everybody.

A persona document should clearly communicate and summarize research data. (Image: Elizabeth Bacon2) (View large version3) What Does A Persona Look Like?

While a persona is usually presented as a one-pager document, it is more than just a deliverable — it is a way to communicate and summarize research trends and patterns to others. This fundamental understanding of users is what’s important, not the document itself.

The main elements presented here are the key goals and the “Day in the Life,” which are common to all well-made persona documents. Other elements, such as the “Quick Take on Fred” are included because of team and/or project requirements. Each project will dictate a certain approach to producing persona documents. (Image: Interaction Design5) (View large version6)

I emphasize this distinction because many people think of a persona and the document that captures essential elements of the persona as the same thing — they are not. It is all too easy for novice practitioners of goal-directed design to fixate on the “best way” to make a persona document and to lose sight of the bigger picture, which is to fully understand a user and then simply share the top-level information with others.

For designers looking for a jump start on creating persona documents, I highly recommend the persona poster template by Creative Companion. This poster organizes and formats all of the important information that a designer would need to create an amazing one-page deliverable.

Where Does The Concept Of Personas Come From?

Understanding the historical context and what personas meant to their progenitor will help us understand what personas can mean to us designers. Personas were informally developed by Alan Cooper in the early ’80s as a way to empathize with and internalize the mindset of people who would eventually use the software he was designing.

Alan Cooper interviewed several people among the intended audience of a project he was working on and got to know them so well that he pretended to be them as a way of brainstorming and evaluating ideas from their perspective. This method-acting technique allowed Cooper to put users front and center in the design process as he created software. As Cooper moved from creating software himself to consulting, he quickly discovered that, to be successful, he needed a way to help clients see the world from his perspective, which was informed directly by a sample set of intended users.

This need to inform and persuade clients led him to formalize personas into a concrete deliverable that communicates one’s user-centered knowledge to those who did not do the research themselves. The process of developing personas and the way in which they are used today have evolved since then, but the premise remains the same: Deeply understanding users is fundamental to creating exceptional software.

Personas are an essential part of goal-directed design. Each group of users researched is represented by a persona, which in turn is represented by a document. Several personas are not uncommon in a typical project. (Image: Gemma MacNaught8) (View large version9) How Do Personas Fit In The Design Process?

Since its humble origin, Alan Cooper’s design methodology has evolved into a subset of user-centered design, which he has branded goal-directed design. Goal-directed design combines new and old methodologies from ethnography, market research and strategic planning, among other fields, in a way to simultaneously address business needs, technological requirements (and limitations) and user goals. Personas are a core component of goal-directed design. I have found that understanding the fundamentals of this goal-directed approach to design first will help the designer understand and properly use personas.

In the summer of 2011, I was fortunate enough to become an intern at Cooper, which is where I learned (among other things) how to use personas. At Cooper, I found that, while personas are easy to understand conceptually, mastering their use with finesse and precision would take me many months. There, I witnessed everyone on the team (and even the clients) referring to personas by name in almost every discussion, critique and work session we had. Personas weren’t just created and then forgotten — they were living, breathing characters that permeated all that we did.

I learned that personas are an essential part of what constitutes the goal-directed process. I learned that personas, though important, are never used in isolation, but rather are implemented in conjunction with other processes, concepts and methods that support and augment their use.

Components of Goal-Directed Design That Support Personas
  • End goal(s)
    This is an objective that a persona wants or needs to fulfill by using software. The software would aid the persona to accomplish their end goal(s) by enabling them to accomplish their tasks via certain features.
  • Scenario(s)
    This is a narrative that describes how a persona would interact with software in a particular context to achieve their end goal(s). Scenarios are written from the persona’s perspective, at a high level, and articulate use cases that will likely happen in the future.
The three parts of goal-directed design are most effective when used together. For instance, in order for a sprinter to reach their potential, they need a place to run and a finish line to cross. Without a scenario or end goal, the sprinter would have nothing to do or strive for. (View large version11)

Personas, end goals and scenarios relate to one another in the same way that the main character in a novel or movie goes on a journey to accomplish an objective. The classic “hero’s journey” narrative device and its accompanying constructs have been appropriated for the purpose of designing better software.

How Are Personas Created?

Personas can be created in a myriad of ways, but designers are recommended to follow this general formula:

  1. Interview and/or observe an adequate number of people.
  2. Find patterns in the interviewees’ responses and actions, and use those to group similar people together.
  3. Create archetypical models of those groups, based on the patterns found.
  4. Drawing from that understanding of users and the model of that understanding, create user-centered designs.
  5. Share those models with other team members and stakeholders.

Step-by-step instructions on how to create a persona is beyond the scope of this article, but we’ll cover this in the second article in this series.

What Are Persons Used For?

Personas can and should be used throughout the creative process, and they can be used by all members of the software development and design team and even by the entire company. Here are some of the uses they can be put to:

  • Build empathy
    When a designer creates a persona, they are crafting the lens through which they will see the world. With those glasses on, it is possible to gain a perspective similar to the user’s. From this vantage point, when a designer makes a decision, they do so having internalized the persona’s goals, needs and wants.
  • Develop focus
    Personas help us to define who the software is being created for and who not to focus on. Having a clear target is important. For projects with more than one user type, a list of personas will help you to prioritize which users are more important than others. Simply defining who your users are makes it more apparent that you can’t design for everyone, or at least not for everyone at once — or else you risk designing for no one. This will help you to avoid the “elastic user,” which is one body that morphs as the designer’s perspective changes.
  • Communicate and form consensus
    More often than not, designers work on multidisciplinary teams with people with vastly different expertise, knowledge, experience and perspectives. As a deliverable, the personas document helps to communicate research findings to people who were not able to be a part of the interviews with users. Establishing a medium for shared knowledge brings all members of a team on the same page. When all members share the same understanding of their users, then building consensus on important issues becomes that much easier as well.
  • Make and defend decisions
    Just as personas help to prioritize who to design for, they also help to determine what to design for them. When you see the world from your user’s perspective, then determining what is useful and what is an edge case becomes a lot easier. When a design choice is brought into question, defending it based on real data and research on users (as represented by a persona) is the best way to show others the logical and user-focused reasoning behind the decision.
  • Measure effectiveness
    Personas can be stand-in proxies for users when the budget or time does not allow for an iterative process. Various implementations of a design can be “tested” by pairing a persona with a scenario, similar to how we test designs with real users. If someone who is play-acting a persona cannot figure out how to use a feature or gets frustrated, then the users they represent will probably have a difficult time as well.
Are Personas Effective?

If you still aren’t convinced that personas are useful, you are not alone. Many prominent and outspoken members of the design community, including Steve Portigal and Jason Fried, feel that personas are not to be used. They make compelling arguments, but they all rule out the use of personas entirely, which I feel is much too strong. (A nuanced analysis of their anti-persona perspectives is beyond the scope of this article but is definitely worth further reading. Links to writings about these perspectives can be found in the “Additional Resources12” section at the end of this article.)

Like any other tool in the designer’s belt, personas are extremely powerful in the right time and place, while other times are simply not warranted; the trick is knowing when to use which tool and then using it effectively.

Any tool can be used for good or evil, and personas are no different. If used improperly, as when personas are not based on research (with the exception of provisional personas, which are based on anecdotal, secondhand information or which are used as a precursor or supplement to firsthand research), or if made up of fluffy information that is not pertinent to the design problem at hand, or if based solely on market research (as opposed to ethnographic research), then personas will impart an inaccurate understanding of users and provide a false sense of security in the user-centered design process.

As far as I can tell, only two scientifically rigorous academic studies on the effectiveness of personas have been conducted: the first by Christopher N. Chapman in 2008, and the second by Frank Long in 2009. Though small, both concluded that using personas as part of the design process aided in producing higher-quality and more successful designs.

These studies join a growing body of peer-reviewed work that supports the use of personas, including studies by Kim Goodwin, Jeff Patton, David Hussman and even Donald Norman. The anecdotal evidence from these and many other writers has shown how personas can have a profoundly positive impact on the design process.

An excerpt from Frank Long’s study of the effectiveness of personas. Designs created by students who used personas and scenarios (pink and blue) scored higher than the designs of those who used neither (gray) in a type of usability test called a heuristic analysis. (View large version13) How And Why Do Persons Work?

Personas are effective because they leverage and stimulate several innate human abilities:

  • Narrative practice
    This is the ability to create, share and hear stories.
  • Long-term memory
    This is the ability to acquire and maintain memories of the past (wisdom) from our own life experiences, which can be brought to bear on problems that other people face.
  • Concrete thinking
    This is the tendency for people to better relate to and remember tangible examples, rather than abstractions.
  • Theory of mind (folk psychology)
    This is the ability to predict another person’s behavior by understanding their mental state.
  • Empathy
    This is the ability to understand, relate to and even share the feelings of other specific people.
  • Experience-taking
    This is the ability to have the “emotions, thoughts, beliefs and internal responses” of a fictional character when reading or watching a story.

Personas, goals and scenarios tap into our humanity because they anthropomorphize research findings. When hundreds or even thousands of users are represented by a persona, imagining what they would do is a lot easier than pouring over cold, hard, abstract data. By using personas, goals and personas together in what Cooper calls a “harmonious whole,” one is able to work in a more mindful way, keeping the user at the heart of everything one does.

If a designer truly understands and internalizes the user and their needs and how they could potentially fulfill those needs, then seeing potential solutions in the mind’s eye becomes much easier; rich and vivid ideas from the user’s perspective seem to percolate to the top of mind more rapidly and frequently. These ideas are more likely to turn into a successful design than by using other methods because the designer has adopted the user’s filter or frame as their own.

This potent combination of personas, goals and scenarios help the designer to avoid thinking in the abstract and to focus on how software could be used in an idealized yet more concrete and humanistic future.

Do I Really Need To Use Personas?

To determine whether personas would be appropriate, a designer must first step back and determine who they are designing for. Determining the audience for a design is deceptively simple, yet many people never think to take the time to explicitly figure this out.

The fundamental premise of user-centered design is that as knowledge of the user increases, so too does the likelihood of creating an effective design for them. If a designer designs for themselves, then they wouldn’t need to use personas because they are the user — they would simply create what they need or want.

Designers do design for themselves from time to time, but professionally most design for others. If they are doing it for others, then they could be designing for only two possible kinds of people: those who are like them and those who are not like them. If they are designing for people like them, then they could probably get away without personas, although personas might help. Usually, though, designers design for people unlike themselves, in which case getting to know as much as possible about the users by using personas is recommended.

Treat different people differently. Anything else is a compromise.

– Seth Godin

Personas help to prevent self-referential thinking, whereby a designer designs as if they are making the software only for themselves, when in fact the audience is quite unlike them. This is how most designers actually work: according to what they like or think is the right way to do things. Even a seasoned designer can go only so far on intuition. This is one of the biggest mistakes one can make when designing software (or anything else, for that matter).


As human beings, designers are all biased and can only see the world through their own eyes — however, they can keep that in mind when designing from now on. Designers must strive to the best of their ability to keep their biases and, dare I say, egos in check.

Designers don’t always know what is best — but sometimes users do and that is what personas are for: to stand up and represent real users, since real users can’t be there when the design process takes place. In your next project, there will come a time when you must decide what is in your user’s best interest. Just like in the movies, picture a devil and angel on your shoulders, where the devil tries to coax you to design something that pleases only your own sensibilities, and the angel is the persona who cries out in defence of their own needs. Who will you listen to?

Granted, not even the most disciplined user-centered and goal-directed designer can be completely unbiased. As professionals, we all use our best judgment to make decisions (based on knowledge of the field, knowledge of competitive markets and work experience), but some people’s perspective is more self-centered than others. Personas help to keep a designer honest and to become mindful of when they are truly designing for others and when they are just designing for themselves. If you are going to design for someone unlike yourself, then do your users a solid and use a persona.

We’ll discuss the process of creating personas from ethnographic research in part 2 of this series.

Additional Resources Presentations and Posters Books Goal-Directed Design Defining Personas How and Why Personas Work Effectiveness of Personas

(cc, il, al)


The post A Closer Look At Personas: What They Are And How They Work (Part 1) appeared first on Smashing Magazine.

Design Responsive Websites In The Browser With Webflow

Tue, 08/05/2014 - 11:54

This article is the first part of a series of articles on emerging responsive design tools. Today, Richard Knight explores the advantages of Webflow and how you can use it today to build responsive websites — perhaps a bit faster than you would build them otherwise. — Ed.

New tools have emerged to address the challenges of responsive web design — tools such as Adobe Reflow1 and the recently released Macaw2. Today, we’ll look at one that I have tested extensively in the last few months. Though not perfect, it’s been a leap forward in productivity for the team that I work with. Its name is Webflow3, and it could be the solution to the problems you face with static design comps produced in Photoshop and Fireworks.

This article will take you step by step through the process of creating a responsive website layout for a real project. As we go along, we’ll also identify Webflow’s advantages and where it comes up short.

Getting Started

Getting started in Webflow is a relatively simple. Head over to the website4, create an account, and give the free trial a go. Make sure to open the interface in the latest version of Google Chrome because it is currently the only browser that is fully supported.

Before beginning a design, decide whether to start it from scratch or to work with one of the many templates. For this tutorial, we’ll choose the blank website template.


Take a minute to mouse over the tooltips in Webflow’s interface to become familiar. There are no shape tools or layers in the traditional sense. There are also no filters or effects or even brushes. Webflow keeps everything focused on what the browser can do; so, knowing the basics of HTML and CSS is enough to get up and running.

6 Toolbar Overview

The left toolbar handles various functions, such as publishing your website to be shared with a live link and switching between device views (using the laptop and phone icons). You’ll use this toolbar mostly for the latter and for entering preview mode, which hides Webflow’s interface and shows what your website will look like when published.

7(View the entire toolbar8)

The right toolbar (shown below) consists of six tabs. The first tab (“+”) lets you add structure and HTML content elements to the page. Each item you add to the body of the page comes with default styles that you may overwrite. Whenever you need to add content, you’ll come back here. I always start with a section, a container and columns because they all have predefined behavior that changes according to the breakpoint.

A section is a div set to the full width of the viewport. A container sits centered within a section and constrains the widths of elements such as headings and paragraphs, while columns divide containers evenly in percentages.

9(View the large version10)

Next is the CSS tab, where we’ll spend most of our time. Here, we can assign classes to the element that is currently selected and then style it as we see fit. All of the CSS that you would normally write by hand is shown here. As soon as you change a class, the CSS will update immediately without your having to refresh. Be sure to examine the advanced toggles, which allow for control of other things such as positioning and the behavior of background images in their div.

11CSS options (View large version12)

The third tab is for settings of the element that you select. Here, you can control things like the visibility of content at certain screen sizes, and you can add link elements to other pages in your project. This panel has to do mainly with non-style-related aspects and is especially handy when you’re working on complicated elements, such as the navigation menu.

Control visibility and even add links.

Fourth from the left is a useful structure navigator that visually displays the contents of your website in a folder-like tree. If you need a heading to sit in a different div or container, just click and drag it to where you want it to be. I often refer to this panel as I go to make sure that certain items are in the right divs and that my styles cascade appropriately. It’s also useful for selecting content that might be hard to click with the mouse because it is behind other elements.

These elements will be represented by the class names that you assign to them, so give everything a straightforward name.

Next up is the class manager, which shows all of your CSS classes at once. You can use it to edit a particular class (see the small wrench icon) and to quickly remove any class that isn’t being used. It’s handy, but you will usually just use it to clean up classes that you’ve discarded or to quickly change a class that’s used multiple times in different places.

A quick view of all of your CSS classes.

Last is the symbol library. Complex items, such as the primary navigation and the footer, can be created as symbols, which can be reused on other pages in your Webflow website. This is a great time-saver, but know that symbols are usable only in the project they were created in.

Regarding Web Fonts

Before we begin with the project, it’s worth mentioning that Webflow supports web fonts to a certain extent. All of the usual standbys, including Arial and Verdana, are available, and you can use any font in Google’s library, as well as any you have in TypeKit. However, any font not provided by either Google or Typekit cannot be integrated in Webflow’s design view (an obstacle that my team faced).

Applying your own font using Webflow’s custom code area is possible. Do this by linking to it in the head of your website and then using a style tag to specify where to use it. However, the font will appear only after you’ve published the website, making it frustrating to refine your typography for different breakpoints.

13An example of how to apply your own hosted web font. Designing In The Browser

For this tutorial, we’ll work from the desktop view down to mobile. This is deliberate: In Webflow, every style that you create in the desktop view will cascade down. It’s weird at first, but you do get used it. The rationale is that when you change a style in the tablet view, it will change for everything below. This saves time when something is broken in one media query because it will often be broken in the narrower views.

We’ll find what we need to begin in the “+” icon (the tab to add elements). First, add a section, and then drag and drop a “navbar” into that section. Then, select the image element under “Media,” and drag it over to the logo area of the navbar. Once it’s highlighted, let go of the mouse, and Webflow will drop in a placeholder image. I’ve replaced the default image with my company’s logo. Essentially, what we’re doing here is using divs and HTML pieces that have a predefined behavior in Webflow; while empty and lacking any notable styles, they will form the basic structure of the website.


Now, let’s add the rest of the navigation, give it a background color, and change the fonts. My company uses a standard gray for the background of its navigation. Add a background color easily by selecting the navbar section with your mouse and then going down to the background area in the style tab. Once you’ve chosen a color, click “OK” to confirm.


Next, we need to add a section that sits above the navbar. This will have a link and some copy. Click and drag the section so that it sits above the navbar, and then add a container so that our new content stays centered in the browser window, like the navigation below it.


Above, I’ve added a plain-text block for the deadline copy, as well as a text link for our call to action. Both are assigned separate classes, set to display as inline-block and with the text aligned right. I’ve also adjusted the padding by dragging with the mouse on the arrows under “Position,” so that they both appear vertically centered. Finally, I’ve given this new section a background gradient.

Notice under “Position” how the padding values are blue. This lets us know that we’ve changed the default styling of 0. If it were a yellow number or a label, this would mean that the selected element’s style is inherited.

The font and line-height fields have yellow labels, letting you know that their styles are inherited.

With the styling done for the header, let’s set the structure of the main body. Our website needs copy on the left and an image on the right for tablet and desktop views. Again, add a section and a container, and define a grid by adding the column element to that container. By default, we’re given two columns. You can change this to a different number at any time by tweaking the column’s setting.


I’ve gone ahead and added a large placeholder image to the right column and paragraph copy to the left. I’ve also added two buttons. Working with long copy in Webflow gets tedious because each paragraph has to be added as its own element. It would be nice just to work with one text-box element, in which you can paste all of the copy at once and proceed to style it, as in Macaw.

For now, let’s adjust the paragraph’s line height, add style to the buttons and add the remaining content.


Last, we’ll add the footer by adding a section to the bottom of the page. We’ll apply a background color and throw in one last container to house our new text links and copyright. Another annoyance is that Webflow doesn’t yet allow for descendant selectors. I’d much a prefer a visual way to target links in the footer section with styles akin to the following:

.footer a { text-decoration: none; font-size: 12px; }

Webflow currently requires everything to be assigned a class, even if it’s already in a div that has a class that you could reference. While not a deal-breaker, a little more finesse would be nice.

19Every styled element requires its own class in Webflow.

With the footer done, our desktop layout is in pretty good shape. Now it’s time to tackle any presentation issues that we find at the other breakpoints.

Fixing Breakpoints In Webflow’s Responsive Views

One of the main differences between Webflow and its competition is that you cannot define your own breakpoints. Webflow is a custom framework based heavily on Bootstrap, so a lot of the automatic behavior for content elements derives from that. You could view this as a hindrance or an advantage, depending on your situation and your project’s needs. Our current e-commerce website leverages Bootstrap, so using Webflow to prototype makes sense for us. If your website requires unique breakpoints or you already use another framework, such as Foundation, then you might have to try something else.

Let’s look at the tablet view first. Nothing completely breaks, as you can see below, although we might want to add more space between the footer and the rest of the page.

20Webflow’s custom Bootstrap framework does most of the work to resize our content.

Next up is the phone view in landscape mode or, as I like to think of it, a very wide phone breakpoint. As you can see in the first screenshot below, things are getting messy. Our image in “Column 2” collides with our callout box. Also, that image is pretty large for mobile phones, so let’s shrink it by changing its width to 40%, leaving the height set to auto. For our last change, I’d prefer that our buttons appear on small screens as block elements, with widths of 100%. Check out the before and after:

Webflow makes it easy to fix a broken layout. The same breakpoint with our changes applied.

That’s a bit better. As you become familiar with Webflow, you might decide to abandon columns altogether in certain instances because they dictate the order of your page. Suppose we wanted the image to be the first visible item below the primary navigation on phones. Because we’ve used columns and thrown the image into the righthand column, we cannot reorder it on mobile; the left column will always be stacked on top.

If we used our own divs with our own CSS rules, we could easily circumvent this order with some floats. So, even though columns are easy to work with and they come with predefined padding and their widths switch to 100% at low breakpoints, they can also be limiting.

Before moving on, let’s look at the default styles for the navigation menu when expanded. We get there by selecting the navbar and going to the settings tab. Once you’re in settings, click “Open Menu,” and you should see something like this:

21Menu before

That’s a lot of dark gray, with no indication of the boundary between menu items for users of touch devices. Select a link and proceed to change the style. Let’s also separate the links with a bottom border. Other options are available to play with animation, but I’m happy with the defaults for now.

22Menu after

Much better. I’ve inverted the colors somewhat to make the menu items stand out more, and I’ve added a box shadow to give a sense of depth in case it overlaps with elements like buttons. Of course, you can refine it further, specifying hover states and pressed states, but for now let’s look at the smallest breakpoint and see how our changes cascade down.

Not bad but the header takes up a lot of space. Considering that browser chrome will take up space, too, let’s shrink it a bit.

There we go. You can view the result on the demo page23. If you’re on a desktop machine, resize your browser to see how the layout changes. One of the last items we’ll look at is Webflow’s code-exporting feature.

Exporting The Code

In the left toolbar is an icon that allows you to export your work as a full ZIP file, with the HTML, CSS and all images that you’ve used. At this time, there are no options to tweak how your website gets exported. Having the option to choose between LESS files and one master style sheet would be nice in future, as would an option to point to the paths where images are publicly hosted.


Webflow’s code is relatively clear and straightforward enough. Being design-focused, it does throw just about anything it can into a div, and you’ll see a lot of custom classes that look akin to Bootstrap 3. It also includes a separate style sheet for various fixes, so your website should work in most browsers. Your mileage with the exported code may vary, depending on what you need to do with it. The developers on our team found it easier just to replicate my interactive mockup in Bootstrap 3, rather than try to build on top of the code.

We did this for two reasons. First, our website is a Backbone application that needs functionality such as timed user sessions, Google Analytics and an administrative back end. Secondly, Webflow’s code does not support Internet Explorer 8, which is a requirement for our user base, unfortunately.

Conclusion: A New Tool For Designers

Webflow is a tool targeted at designers who are looking for an alternative to Photoshop and Fireworks for responsive web design. It’s not an all-encompassing solution for creating websites — at least not yet — but by enabling me to focus on layout, interaction and content behavior without having to code, it sped up our team’s design phase immensely.

And while we didn’t use the code that Webflow generated, we still found it to be more collaborative, allowing the developers who I work with to see the work I was doing on their actual phone, tablet and desktop browsers. They could ask questions any time, and I was able to iterate on the fly. Sitting down to actually build the website was easier because we had an interactive prototype to refer to.

I still use Photoshop as I believe it was intended — to crop and retouch images — but when I’m asked to make a new page or a new website, I’ll start working in Webflow. And I’ll continue to refine and expand the visual prototype until we feel we’ve taken it as far as we need to. Then, we’ll move into development, still using Webflow to prototype or test ideas if needed.

On today’s responsive web, a static comp raises more questions than it answers. Sure, you’ll be able to convey the look and feel, but so many questions remain that both designers and developers can get frustrated. As designers, we try to resolve these questions by creating accompanying documentation, such as a web style guide or even sometimes by building a basic page ourselves.

Developers who receive static comps to build from either have to infer missing details or go back to the designer. How does the navigation adjust? What are we envisioning for hover states or for pressed states for buttons? How will the typography change to accommodate different screens? How do we denote an active page? The list goes on and on.

Webflow fills this gap. Details can be inferred because they’ve been realized and are viewable in the browser. It enables you as the designer to experiment and prototype interactive ideas on the fly. How the tool fits in your process will depend on you and the needs of the project. However, I strongly recommend giving it a shot. It might surprise you.

Other Resources
  • Video Tutorials25,” Webflow Help
    This free series of videos walks you through the UI and how to build websites in Webflow.
  • Forums26” Webflow Community
    An active and knowledgeable community of people already use Webflow.

Many thanks to Shawna Jones, Jeffrey Love, Shawn O’Neill and David Belangér for supporting my use and testing of Webflow throughout our projects.

(al, il)


The post Design Responsive Websites In The Browser With Webflow appeared first on Smashing Magazine.

Improve Your Email Workflow With Modular Design

Mon, 08/04/2014 - 08:32

Whether you’re in a Fortune 500 company or part a two-person team launching your first web app, email is one of the most important tools for reaching your customer base. But with the ever-growing number1 of emails to send2, getting them all out the door can seem a little overwhelming. By putting in place a solid email design workflow, you’ll be able to regularly ship engaging and mobile-friendly emails with ease.

Complexity Meets Adaptation

In addition to the increasing number of emails, the need for personalization and high quality and the introduction of responsive design have turned what was once a simple process of writing HTML and CSS in your favorite text editor into something seemingly more complex. A number of customizable templates3, editors4, tools5 and even full-fledged email frameworks6 have popped up to deal with this newfound complexity.

All of these new tools have their advantages, and many can be combined7 into a workflow that best fits you and your team. But even with a great set of new tools at your disposal, how do you structure your workflow to allow for continual iteration and quick turnaround?

Enter Modular Design

Modular design is the method of creating a system of self-contained components that can be stacked, rearranged and used or not used, case by case. The goal is to be able to easily change or adapt individual design patterns without altering the system as a whole. Adopting modular design and reusable patterns into your email design workflow can improve the quality and consistency of what you send, while speeding up your daily output.

Setting up a modular email design workflow involves three basic steps:

  1. Create the design system.
  2. Set up a reusable framework.
  3. Test and iterate on what you send.

Let’s look in depth at how we can accomplish each step in the process.

1. Create A Design System

The easiest way to streamline iteration is to break down each of your common design use cases into a system of self-contained components, each one a LEGO block, made up of content and media, that you can snap together into numerous configurations. Doing this will enable you to build a nearly infinite number of emails with ease.

8Think of your designs as LEGO blocks, made up of content and media. (View large version119) Anticipate Use Cases

When designing your modular email system, the first step is to anticipate your use cases. Ask yourself what type of emails you typically send. Are they mostly transactional? Promotional? Informational? While all emails will likely have the same basic elements, such as a header and footer, a transactional email might need shipment information, ordering details, payment details, a contact section, and product upsells or similar products.

A newsletter might have simpler needs, such as introductory copy, a featured story, a hero image and secondary stories. Defining the content needs of the emails that you send will enable you to anticipate the common use cases that you’ll need to plan for along the way.

Design A Pattern Library

Once you determine common use cases, you can start to design individual components according to your needs. Whether you use Photoshop or jump right into the browser, remember to keep each component as self-contained as possible. Designing several variations of each use case might also be helpful.

Having several options for a “featured story” component, for instance, allows for flexibility and keeps things from getting stagnant over time. The patterns in your library will eventually become partials within your framework, easily referred to and called upon when needed.

10Turn your use cases into modular patterns. (View large version119) Keep Your Pattern Library Up To Date

As new use cases arise, use your existing patterns as necessary. However, unexpected use cases will probably arise; one benefit of the modular system is that you need to design only a single component to address this situation. As you create and add patterns, make sure to keep the entire design system up to date and organized. Leaving components scattered or out of sync will make the system difficult to use. The easiest way to keep everything in sync is to turn your system into a framework.

2. Set Up A Framework

From here, incorporating your design patterns into an out-of-the-box templating system or framework is possible. And if you’re not interested in navigating the chaotic world of Outlook or Gmail, with all of their quirks, or if you need to get something out the door with minimal configuration, then options like Zurb’s Ink3012 will do a lot of the heavy lifting for you.

But if you send a decent volume of email, then creating your own custom framework could lead to huge gains. By creating your own framework, you can add in time-saving custom helpers, keep the markup light and easy to work with, and even hook directly into your email service provider. Not to mention that you can create more customized layouts to complement all-in-one solutions. The long-term gains in quality and efficiency from setting up your own framework can be huge.

Build on Top of a Static Website Generator

Adding features and tools such as Sass, YAML data and localization to your framework could also be beneficial. The easiest way to do this is by integrating your framework with a static website generator. The building blocks that are common to email and the web will enable you to repurpose almost any website generator for your email workflow.

Middleman13 is a great option and one that I’ve found ticks all of the major boxes:

  • The structure of projects as layouts, partials and pages perfectly fits our mental model of modular email.
  • Sass14 is already integrated. Sass is an amazing addition to any responsive email workflow. Common workarounds such as the one for Yahoo Mail’s attribute selector15 become an afterthought through the clever use of selector inheritance. Sass also provides powerful features such as variables, mixins and CSS minification to cut down on file size.
  • YAML data and front matter allow you to fully separate content from design and loop through data for easy prototyping.
  • If you’re sending to a large and diverse audience in multiple languages, then localization can dynamically generate that diverse set of data relatively painlessly.
  • A myriad of hooks enable us to easily create custom helpers for email platform-specific needs.
  • Middleman is Ruby-based, making it easily extensible.
Set Up A Boilerplate

Once you’ve chosen a static website generator that meets your needs, then it’s time to set up your base boilerplate. A boilerplate includes such things as a reset file, the CSS or Sass structure, an optional custom grid system and a base template.

Base Layout Template

A basic template will serve as your base layout structure and will allow global elements to be shared across all emails. Preheaders, headers and footers will usually stay consistent across emails. If this is the case with your designs, then you can safely build these into your layout’s template. The safer approach is either to build out and include these elements as partials or, if these elements will likely move or change in particular emails, to wrap the markup in conditional statements.

Your base email template should include at least the following:

    HTML5 is the friendliest for designing responsive emails. Remember that certain clients will either strip out or change your DOCTYPE.
  • head
    A lot is important to include here: meta tags for proper character encoding, title tags for anyone viewing the standalone version of your email in a browser, reset styles, embedded media query styles, any styles to be inlined and the viewport meta tag to set the viewport’s width.
  • body
    In addition to the standard body tag, wrap your entire email in a 100%-width table and cell structure, as shown below. The table with the body class will act as the body, thereby overcoming the drawback of certain clients removing the body tag.
  • yield
    This is from where all of your modules for individual emails will be pulled.
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width"> <title><%= %></title> <%= inline_stylesheet 'template/inline' %> <%= stylesheet_link_tag 'template/mq' %> </head> <body> <table class="body"> <tr> <td class="header" > [Header content] </td> </tr> <tr> <td class="main" > <%= yield %> </td> </tr> <tr> <td class="footer" > [Footer content] </td> </tr> </table> </body> </html>

Partials Based on Modules

Keep the markup of your individual design patterns inside of partials, to keep the design system truly modular. This will allow the markup for each module to be self-contained. Taking a modular approach with both your designs and your markup becomes truly powerful. Once it’s built, you should be able to move each design pattern around to different areas of the template without breaking the module, the template or any other modules surrounding it. When you’re setting up the framework, build out each module that you’ve planned for in this way.

Taking the use case from our last example, the modular markup for a featured story would look like this:

<table class="featured-story"> <tr> <td class="col"> <img src="#" alt="" /> </td> <td class="col"> <table> <tr> <td class="title"> [Story Title] </td> </tr> <tr> <td class="abstract"> [Story Abstract] </td> </tr> <tr> <td class="cta"> <a href="#">CTA</a> </td> </tr> </table> </td> </tr> </table>

Sass Structure

Following OOCSS16 or SMACSS17 will maintain the modularity of your Sass. In general, keep your styles as modular as possible, just like your designs and markup.

One caveat when writing CSS or Sass in an email framework is that all media query-based styles must begin with an attribute selector (such as td[class=example]{}) in order to avoid rendering issues in Yahoo Mail18. An easy workaround is Sass’ ability to nest styles. Nesting all media queries in a single attribute-based selector will prevent them from being applied to each individual style. Writing your Sass in this way will increase both readability and speed while maintaining visual consistency across clients.

Following this method, the basic media queries for optimizing the template and content area above for mobile would be this:

td[class=body] { @media only screen and (max-width: 600px) { .col { display: block; width: 100%; } .title { font-size: 22px !important; } .abstract { font-size: 16px !important; } .cta a { display: block; width: 100%; } } } Put It All Together

With a base framework and modular design patterns in place, it’s now time to snap all of the LEGO blocks together. Create a page for each email that you’re building for your framework. This page should be wrapped with your base template and should call any modular patterns that you need.

19Thinking in a modular way will enable you to build emails like LEGO blocks. (View large version20) --- title: Example Email layout: template --- <%= partial "featured-story" %> <%= partial "responsive-image" %> <%= partial "social-callout" %> Automate Common Tasks

One of the greatest efficiencies you can gain in your workflow is to automate frequent tasks. This typically means inlining CSS, optimizing images, sending tests, and integrating templates and modules with your email service provider. Most common tasks can be easily integrated with Rake tasks, Ruby Gems and/or Grunt.

CSS Inlining

The safest method is to inline styles whenever possible because certain email clients strip out styles from the head of documents. If you’re used to the common web workflow of writing styles in a separate sheet, then getting used to this will be hard. It can become a hindrance to modularity, and if you’re trying to use Sass to style, then this obviously becomes impossible to do manually.

Luckily, we have several options to automatically inline styles at build time. If you’re using a Ruby-based tempting engine, then the best option is to include the Premailer Gem21 in your project. Premailer automatically runs through your style sheet and inlines styles while preserving any existing styles when called. This is a huge time-saver, and it keeps markup manageable.


There are several ways to test how your email looks. The first stage in my process is to design and check the rendering in Chrome. Once the designs are completed, it’s time to jump into a more automated tool to check rendering across the board. Litmus22 is a web application, like BrowserStack23 but focused on delivering screenshots of your email across a wide variety of clients.

You can send your emails to Litmus in a variety of ways, but if you’re using Grunt in the framework, then the easiest way is by using Grunt-Litmus24. Grunt-Litmus automates the process of getting tests to your account and lets you check rendering in clients of your choice.

module.exports = { test: { src: ['email.html'], options: { clients: ['android22', 'android4'...] username: "username", password: "password", url: "" } } };

Testing on real devices is another common approach, especially vital with things like CSS animation and embedded video. If you have a device lab set up with a common email address, an easy way to trigger an email delivery directly from your framework is to use the Ruby Mail Gem.

Hook Into Your Email Service Provider

If you’re using an email platform that provides access (such as ExactTarget25 or MailChimp26), then you can set up your project to hook directly into the API and push your template along with individual modules into the system on command. Doing this allows you to build locally in the framework, keeping everything modular and under source control, and still push to your email service provider quickly and easily as you iterate. How you hook into your provider will obviously vary by platform, but definitely keep this in mind when setting up a modular framework.

3. Iterate On Your Designs

The periodical nature of email lends itself well to design iteration. If you’re sending emails daily or weekly, then you have ample room to A/B test your design decisions. No matter what workflow options you adopt, make sure to track important email metrics27 and use available data to improve your core design, remembering that a better experience is usually more important than any single data point.

28The periodical nature of email makes for easy testing and iteration. (View large version29)

Don’t reinvent the wheel every time you send an email; rather, make continual incremental changes as warranted by your metrics. The benefits of a modular design workflow should make these incremental changes fairly painless as you swap components in and out. The important thing is not to let your designs stagnate.


Incorporating a modular approach and a custom framework into your email workflow can lead to increased productivity and make it easier for you to iterate on your designs. You will have to make an initial investment of time to get everything up and running, but if you send a decent volume of email and can afford the initial investment, then the result will improve your designs, the customer experience and your engagement rates, leading to happier customers and increased revenue.


(al, , il, ml)


The post Improve Your Email Workflow With Modular Design appeared first on Smashing Magazine.

Build A Blog With Jekyll And GitHub Pages

Fri, 08/01/2014 - 12:03

I recently migrated my blog from WordPress to Jekyll, a fantastic website generator that’s designed for building minimal, static blogs to be hosted on GitHub Pages. The simplicity of Jekyll’s theming layer and writing workflow is fantastic; however, setting up my website took a lot longer than expected.

In this article we’ll walk through the following:

  • the quickest way to set up a Jekyll powered blog;
  • how to avoid common problems with using Jekyll;
  • how to import your content from WordPress, use your own domain name, and blog in your favorite editor;
  • how to theme in Jekyll, with Liquid templating examples;
  • a couple of Jekyll 2.0’s new features, including Sass and CoffeeScript support and collections.
Jekyll’s Simple Purpose

Tom Preston-Werner created Jekyll to enable people to blog using a simple static HTML website, with all of the content hosted and version-controlled on GitHub. The goal was to eliminate the complexity of other blogging platforms by creating a workflow that allows you to blog like a hacker1.

Jekyll’s Octocat mascot. (Image credit: GitHub2)

Jekyll takes your content written in Markdown, passes it through your templates and spits it out as a complete static website, ready to be served. GitHub Pages conveniently serves the website directly from your GitHub repository so that you don’t have to deal with any hosting.

Here are some websites that were created with Jekyll:

The Advantages of Going Static
  • Simplicity
    Jekyll strips everything down to the bare minimum, eliminating a lot of complexity:

    • No database
      Unlike WordPress and other content management systems (CMS), Jekyll doesn’t have a database. All posts and pages are converted to static HTML prior to publication. This is great for loading speed because no database calls are made when a page is loaded.
    • No CMS
      Simply write all of your content in Markdown, and Jekyll will run it through templates to generate your static website. GitHub can serve as a CMS if needed because you can edit content on it.
    • Fast
      Jekyll is fast because, being stripped down and without a database, you’re just serving up static pages. My base theme, Jekyll Now5125159, makes only three HTTP requests — including the profile picture and social icons!
    • Minimal
      Your Jekyll website will include absolutely no functionality or features that you aren’t using.
  • Design control
    Spend less time wrestling with complex templates written by other people, and more time creating your own theme or customizing an uncomplicated base theme.
  • Security
    The vast majority of vulnerabilities that affect platforms like WordPress don’t exist because Jekyll has no CMS, database or PHP. So, you don’t have to spend as much time installing security updates.
  • Convenient hosting
    Convenient if you already use GitHub, that is. GitHub Pages will build and host your Jekyll website at no charge, while simultaneously handling version control.
Let’s Try It Out

There are multiple ways to get started with Jekyll, each with its own variations. Here are a few options:

  • Install Jekyll locally via the command line, create a new boilerplate website using jekyll new, build it locally with jekyll build, and then serve it. (The Jekyll website10 shows this workflow.)
  • Clone a starting point to your local machine, install Jekyll locally via the command line, make updates to your website, build it locally, and then serve it.
  • Fork a starting point, make changes, and then serve it.

We’ll get started with the quickest and easiest option: forking a starting point. This will get us up and running in a few minutes, and we won’t have to install any dependancies. Here’s what we’re going to do directly on in the browser:

  1. Create our Jekyll powered website.
  2. Host it for free on GitHub Pages.
  3. Customize it to include our name, avatar and social links.
  4. Publish our first blog post!
1. Fork A Starting Point

We’ll start by forking a repository that has followed best practices and the workflows that we’ll be covering in this article. This will get us on the right track and save a lot of time.

I have prepared a repository for us already. Head to Jekyll Now11, and hit the “Fork” button in the top-right corner of the repository to fork a copy of the blog theme to your GitHub account.

12Walkthrough of steps 1 and 2. (View large version13)

Starting with a fork is great because it will give you a feel for what Jekyll is like before you have to set up a local development environment, install dependencies and figure out Jekyll’s build process.

Common problem #1: Creating a Jekyll website through the local command line can be frustrating and time-consuming because you have to install and configure dependencies like Ruby and RubyGems. Let GitHub Pages build the website for you, until you have a real need to build it locally.

2. Host On Your GitHub Account

As a GitHub user, you’re entitled to one free “user” website (as opposed to a “project” website), which will live at This space is ideal for hosting a Jekyll blog!

The best part is that you can simply place your unbuilt Jekyll blog on the master branch of your user repository, and GitHub Pages will build the static website and serve it for you. You don’t have to worry about the build process at all — it’s all taken care of.

Click the “Settings” button in your new forked repository (in the menu on the right), and change the repository’s name to, replacing yourusername with your GitHub user name.

Your website will probably go live immediately. You can check by going to Don’t worry if it isn’t live yet: Step 3 will force it to be built.

14The base theme of your blog will look like this after being forked. (Image: Jekyll Now5125159) (View large version16)

Whew! We’re moving fast here. We already have a Jekyll website up and running! Let’s step back for a second and look at some of the most common issues to be aware of when hosting a Jekyll website on GitHub Pages.

Common problem #2: Be aware of the difference between user websites and project websites17 on GitHub. With a user website (which we’re setting up), you don’t need to do any branching. The master branch is already configured to run anything placed on it through Jekyll. You don’t need to set up a gh-pages branch.

Common problem #3: Using a project website for your Jekyll website introduces some complexity18 because your website will be published to a subdirectory. The URL will look like, which will cause problems in Jekyll templates, such as breaking references to images and not letting you preview the website locally.

Common problem #4: Jekyll has a lot of plugins19, but GitHub Pages supports only a few of them20. If you try to include a plugin that isn’t supported, then Jekyll will fail while building your website. So, stick to the supported list. Luckily, my favorite plugin is on the list: Jemoji21 lets you include emoji in blog posts, just like you would on GitHub and Basecamp.

3. Customize Your Website

You can now change your website’s name, description, avatar and other options by editing the _config.yml file. These custom variables have been set up for convenience and are pulled into your theme when your website gets built.

Making a change to _config.yml (or any file in your repository) will force GitHub Pages to rebuild your website with Jekyll. The rebuilt website will be viewable a few seconds later at If your website wasn’t live immediately after step 2, it will be after this step.

Go ahead and customize your website by updating the variables in your _config.yml file and then committing the changes.

You can change your blog’s files from here on in one of three ways. Pick whichever suits you best:

  • Edit files in your new repository directly in the browser at (as shown below).
  • Use a third-party GitHub content editor, such as Prose22 by Development Seed. It’s optimized for Jekyll, which makes it easy to edit Markdown, write drafts and upload images.
  • Clone your repository and make updates locally, and then push them to your GitHub repository (Atlassian has a guide23 on this).
24Editing your website’s _config.yml on (Image credit: Jekyll Now5125159) (View large version26)

Common problem #5: Don’t assume that you need to jekyll build the website locally in order to customize and theme a Jekyll website. GitHub Pages does that for you. You just need to place the files that you want to be built in the master branch of your user repository or in the gh-pages branch of any other repository, and then GitHub Pages will process it with Jekyll.

4. Publish Your First Blog Post

Your website is now customized, live and looking good. You just have to publish your first blog post:

  1. Edit /_posts/, deleting the placeholder content and entering your own. If you need a quick primer on writing in Markdown, check out Adam Pritchard’s cheat sheet27.
  2. Change the file name to include today’s date and the title of your post. Jekyll requires posts to be named
  3. Update the title at the top of the Markdown file. Those variables at the top of the blog post are called front matter, which we’ll dig into a little later. In this case, they specify which layout to use and the title of the blog post. Additional front-matter variables28 exist, such as permalink, tags and category.

If you’d like to create new blog posts in the browser on, simply hit the “+” icon in /_posts/. Just remember to format the file name correctly and to include the front-matter block so that the file gets processed by Jekyll.

29Creating a new post on (View large version30)

Common problem #6: One concern I had about using Jekyll for my blog was that it has no CMS, so I wouldn’t have the convenience of being able to make quick edits by logging into a CMS interface when I’m away from my laptop. It turns out that your Jekyll blog will have a CMS if you use GitHub Pages, because GitHub itself serves as the CMS. You can edit posts in the browser, even on your phone if you wish. It might not be as convenient as other CMS’, but you won’t be stuck when you’re away from your computer and need to make a change.

Optional Steps Use Your Own Domain

Configuring your domain name to point to GitHub Pages is a simple two-step process:

  1. Go to the root of your blog’s repository, and edit the CNAME file to include your domain name (for example,
  2. Go to your domain name registrar, and add a CNAME DNS record pointing your domain to GitHub Pages:
    • type: CNAME
    • host:
    • answer:
    • TTL: 300

Then, refresh What’s My DNS31 like crazy until you’ve propagated. If you run into any problems, refer to “Setting Up a Custom Domain With GitHub Pages32.”

Import Your Blog Posts From WordPress

Before importing, you’ll need to export your data from WordPress, possibly massaging the data a little (for example, by updating the image references), and then import it into your new Jekyll website. Fortunately, a few great tools can help.

To export from WordPress, I’d highly recommend Ben Balter’s one-click WordPress to Jekyll Exporter33 plugin. It exports all of your WordPress content as a ZIP file, including posts, images and meta data, converting it to Jekyll’s format where needed. Good on you, Ben.

The other option is to export all content in the “Tools” menu of the WordPress dashboard, and then importing it with Jekyll’s importer34.

Next, we need to update our image references. Ben Balter’s plugin will export all of your images into a folder. Then, you’ll need to copy them to wherever you’re hosting your images on your Jekyll blog. This could be in an /images folder or on a content delivery network.

Then, you have the fun task of updating all of the links to these images across your WordPress content. Because I was only updating five or six posts, a quick find-and-replace worked well, but if you have a lot of content, then it might be worth writing a script or checking out scripts that others have written, such as Paul Stamatiou’s35.

Finally, we have to import comments. Being a platform for static websites, Jekyll doesn’t support comments. However, a hosted solution like Disqus works really well! I’d recommend importing your WordPress comments to Disqus36. Then, if you’re using Jekyll Now, you can enter your Disqus user name in _config.yml and you’re set.

Blog Locally in Your Favorite Editor

If you prefer to write in Sublime, Vim, Atom or another editor, all you need to do is clone to your repository, create new Markdown blog posts in the _posts folder, and then push the changes to GitHub. GitHub Pages will automatically rebuild your website as soon as your Markdown file hits the repository, and your new blog post will be live as soon as the build is complete.

  1. First, git clone, or clone your repository using GitHub Mac37.
  2. Create a new post in the _posts folder. Remember to name it in the format, and include the front matter at the top of the post.
  3. Commit the post’s Markdown file, and push to your GitHub repository. (Atlassian’s guide to Git’s basics38 might come in handy.)
  4. That’s it! Just wait for GitHub Pages to rebuild your website. This typically takes under 10 seconds, assuming you don’t have a huge amount of content.

Common problem #7: Again, you don’t need to build your Jekyll website locally in order to write a blog post locally and publish it to your website. You can write the Markdown post locally and push it with any images you’ve used, and then GitHub Pages will rebuild the website for you on the server.

Theming In Jekyll

Want to customize your theme? Here are some things you should know.

Building Your Website Locally

If your theme development is more substantial, then building and testing your Jekyll website locally could be convenient. This step isn’t required for theme development. You could just push the theme changes to your repository, and GitHub Pages will do the build for you. However, having Jekyll watch for theme changes locally and preview the website for you would be helpful if you’re creating a custom theme.

First, you’ll need to install Jekyll and its dependencies. Run gem install jekyll, then gem install jemoji jekyll-sitemap. (You’ll need to have Ruby39, RubyGems40 and Kramdown41 installed. Jekyll has a full list of dependencies42.)

Here is the workflow for building and viewing your Jekyll website locally:

  1. First, cd into the folder where your Jekyll website is stored.
  2. Then, jekyll serve --watch. (Jekyll explains more build options43.)
  3. View your website at
  4. When you’re done, commit the changes and push everything to the master branch of your GitHub user website. GitHub Pages will then rebuild and serve the website.

Common problem #8: Keep in mind that jekyll build will wipe everything in /_sites/. The first step of jekyll build is to delete everything in /_sites/ and then build it all again from scratch. So, you can’t store any files in there and expect them to stick around. Everything that goes into /_sites/ should be generated by Jekyll.

Directory Structure

Here’s a snapshot of my Jekyll website’s directory structure:

/Users/barryclark/Code/jekyll-now ├─ CNAME # Contains your custom domain name (optional) ├─ _config.yml # Jekyll's configuration flags ├─ _includes # Snippets of code that can be used throughout your templates │ ├─ analytics.html │ └─ disqus.html ├─ _layouts │ ├─ default.html # The main template. Includes <head>, <navigation>, <footer>, etc │ ├─ page.html # Static page layout │ └─ post.html # Blog post layout ├─ _posts # All posts go in this directory! │ └─ ├─ _site # After Jekyll builds the website, it puts the static HTML output here. This is what's served! │ ├─ CNAME │ ├─ LICENSE │ ├─ about.html │ ├─ feed.xml │ ├─ index.html │ ├─ sitemap.xml │ └─ style.css ├─ # A static "About" page that I created. ├─ feed.xml # Powers the RSS feed ├─ images # All of my images are stored here. │ ├── first-post.jpg ├─ index.html # Home page layout ├─ scss # The Sass style sheets for my website │ ├─ _highlights.scss │ ├─ _reset.scss │ ├─ _variables.scss │ └─ style.scss └── sitemap.xml # Site map for the website Liquid Templating

Jekyll uses the Liquid templating language to process templates. There are two important things to know about using Liquid.

First, a YAML front-matter block is at the beginning of every content file. It specifies the layout of the page and other variables, like title, date and tags. It may include custom page variables that you’ve created, too.

Liquid template tags are used to execute loops and conditional statements and to output content.

For example, each blog post uses the following layout from /_layouts/post.html:

--- layout: default --- <article class="post"> <h1>{{ page.title }}</h1> <div class="entry"> {{ content }} </div> <div class="date"> Written on {{ | date: "%B %e, %Y" }} </div> <div class="comments"> {% include disqus.html disqus_identifier=page.disqus_identifier %} </div> </article>

At the top of the file, YAML front matter is surrounded by triple hyphens. Here, we’re specifying that this file should be processed as the content for the default.html layout, which contains the website’s header and footer.

Liquid markup uses double curly braces to output content. The first Liquid template tags that do this in the example above are {{ page.title }} and {{ content }}, which output the title and content of the blog post. A number of Jekyll variables44 are made available for outputting in templates.

Single curly braces and modules are used for conditionals and loops and for displaying includes. Here, I’m including a Disqus commenting partial at the bottom of the blog post, which will display the markup from /_includes/disqus.html.


This is Jekyll’s configuration file, containing all of the settings for your Jekyll website45. The great thing about _config.yml is that you can also specify all of your own variables here to be pulled in via template files across the website.

For example, I use custom variables in Jekyll Now’s _config.yml to allow SVG icons to be easily included in the footer:

Here is _config.yml:

# Includes an icon in the footer for each user name you enter footer-links: github: barryclark twitter: baznyc

And here is /_layouts/default.html:

<footer class="footer"> {% if site.footer-links.github %}<a href="{{ site.footer-links.github }}">{% include svg-icons/github.html %}</a>{% endif %} {% if site.footer-links.twitter %}<a href="{{ site.footer-links.twitter }}">{% include svg-icons/twitter.html %}</a>{% endif %} </footer> Example of SVG footer icons

The variable is outputted to the Twitter URL like this:{{ site.footer-links.twitter }}, so that the footer icon links to your Twitter profile. One other thing I really like about variables is that you can use them to optionally add pieces of UI. So, a footer icon wouldn’t be displayed if you don’t enter anything in the variable.

Common problem #9: Note that _config.yml changes are loaded at compile time, not runtime. This means that if you’re running jekyll serve locally and you edit _config.yml, then changes to it won’t be detected. You’ll need to kill and rerun jekyll serve.

Layouts and Static Pages

Most simple blog websites need only two layout files: one for blog posts (post.html) and one for static pages (page.html). The only real difference between these in Jekyll Now is that post.html includes the Disqus comments block and a date, and page.html doesn’t.

If you create a file with an .html or .md extension in the root of your Jekyll website, it will be treated as a static page. For example, would be outputted as Nice and easy!


I store my images in an /images/ folder in the repository and haven’t had any performance problems yet. If your website is hosted on GitHub Pages, then the images will be served up by GitHub’s super-fast content delivery network. I haven’t found the need to store them elsewhere yet, but if I wanted to migrate my images to somewhere like CloudFront, then just pointing all of my image links to a folder on that server would be easy enough.

I like the simplicity of saving an image to the /images/ folder and then linking to it in the content. The Markdown to include an image in content is simple:

![Image description](/images/my-image.jpg) Preprocessor Support

Jekyll now supports Sass and CoffeeScript without any need for plugins or Grunt files. You can include your .sass, .scss and .coffee files anywhere in your website’s directory, and Jekyll will process it, outputting a .css file in that same directory.

It’s Sass time! (Image credit: Sass46)

To ensure that your .sass, .scss and .coffee files get processed, start the file with two lines of triple hyphens, like this:

--- --- $color-coffee: #644C37;

If you’re using @imports to break out your Sass into partials, then you’ll need to let Jekyll know that by including the following flag in your _config.yml file.

sass: sass_dir: _scss

You can specify the outputted style here, too:

sass: sass_dir: _scss style: :compressed Advanced Jekyll Features

Jekyll has a couple of powerful, more advanced features that might help you if you’re looking to scale up your website from a simple blog.

Data Files

There are two ways to integrate external data with a Jekyll website. The first is by using third-party services and APIs. For example, Disqus allows you to embed dynamic content on your static website via its external service.

The second way is by using data files. Jekyll is able to read YAML and JSON data files47 from the /_data/ folder, allowing you to use them in your templates just like other variables. This is really useful for storing repetitive or website-specific data that you wouldn’t want bulking up _config.yml.

Data files also make it possible to include large data sets in your Jekyll website. You could write a script to break down a big data set into JSON files and place them in your Jekyll website’s /_data/ folder. A creative example of this is serving Google Analytics data to Jekyll48 in order to rank blog posts by popularity.


The two standard document types in Jekyll are posts (for blog content) and pages (for static pages). The launch of Jekyll 2.0 brought collections49, which allow you to define your own document types. For example, you could use a collection to define a photo album, book or portfolio.


Jekyll isn’t for every project. The biggest disadvantage of a static website generator is that incorporating dynamic server-side functionality becomes difficult. The number of services to integrate, like Disqus, is growing, but not all offer much flexibility or control. Jekyll isn’t suited to building user-based websites because there is no database or server-side logic to handle user registration or logging in.

Jekyll’s strength is its simplicity and minimalism, giving you just what you need to create a content-focused website that doesn’t need much dynamic user interaction — and no more. This makes it perfect for your blog and portfolio and also worth considering for a simple client website.

Don’t let Jekyll’s reputation as a blogging platform for hackers dissuade you. Building a beautiful, fast, minimal website in Jekyll doesn’t require elite hacker skills or knowledge of the command line. As shown in the walkthrough, you can get set up in a matter of minutes, giving you more time to spend on your content and design.

Further Resources
  • Jekyll50
    The official website is the best resource for theming Jekyll and creating a website. A lot of the information in this article was drawn from it.
  • Jekyll Now5125159
    This starting point makes it easier to create a Jekyll blog by eliminating a lot of the up-front setting up.
  • Jekyll source code52
    The Jekyll repository shares the source code and discussions about Jekyll.

(al, ml)


The post Build A Blog With Jekyll And GitHub Pages appeared first on Smashing Magazine.

Desktop Wallpaper Calendars: August 2014

Thu, 07/31/2014 - 09:18

We always try our best to challenge your artistic abilities and produce some interesting, beautiful and creative artwork. And as designers we usually turn to different sources of inspiration. As a matter of fact, we’ve discovered the best one—desktop wallpapers that are a little more distinctive than the usual crowd. This creativity mission has been going on for six years now1, and we are very thankful to all designers who have contributed and are still diligently contributing each month.

This post features free desktop wallpapers created by artists across the globe for August 2014. Both versions with a calendar and without a calendar can be downloaded for free. It’s time to freshen up your wallpaper!

Please note that:

  • All images can be clicked on and lead to the preview of the wallpaper,
  • You can feature your work in our magazine2 by taking part in our Desktop Wallpaper Calendars series. We are regularly looking for creative designers and artists to be featured on Smashing Magazine. Are you one of them?
About Everything

“I know what you’ll do this August. :) Because August is about holiday. It’s about exploring, hiking, biking, swimming, partying, feeling and laughing. August is about making awesome memories and enjoying the summer. August is about everything. An amazing August to all of you!” — Designed by Ioana Bitin3 from Bucharest, Romania.


Camping time

“I was inspired by the aesthetics of topography and chose to go with camping theme for the month of August.” — Designed by Nicola Sznajder32 from Vancouver, B.C., Canada.


Dessert First

Designed by Elise Vanoorbeek75 from Belgium.


Shrimp Party

“A nice summer shrimp party!” — Designed by Pedro Rolo120 from Portugal.


Friendly August

Designed by Ricardo Gimenes137 from Brasil.



“For this piece, I was inspired by what the end of summer meant to me as a child. I remember running around barefoot in the warm grass and catching fireflies late into the night. I wanted this to be a little reminder to everyone of the simpler times.” — Designed by Rosemary Ivosevich178 from Philadelphia, PA.


Embrace Summer!

“You’ve waited 300 days for summer, better hold on to it!” — Designed by Mira Hoayek211 from Lebanon.


Let It Bee

“In the summer, I always see alot of buzzy animals, including bees. And because of the relaxing nature of summer, I thought ‘Let it bee!’.” — Designed by Pieter Van der Elst254 from Belgium.


Directional Colors

“I have created and recreated this image in my head many times over and finally decided to create an actual copy. The ‘arrows’ have been big lately as my life has shot off into the design field. And the colors, well, they’re just awesome.” — Designed by Tatyana Voronin271 from the United States of America.


Falling Stars

“In August the stars are ‘falling’. The more falling stars you see, the more wishes will come true!” — Designed by Olga Bukhalova314 from Italy.


Go Outside And Play

“If you’re sitting around looking at computer wallpaper, it’s time to get up from your chair and go outside. Have some fun today!” — Designed by Dwight Odelius357 from Houston, Texas.



“Even the sun gets a heatstroke in August!” — Designed by Luc Versleijen392 from the Netherlands.


Enjoy The Last Month Of Summer!

“Everything is better at the beach, enjoy the last month of summer!” — Designed by Design19417 from Romania.


Liberty Will Never Perish

“A small reminder from ‘the great dictator’ to all aggressors, oppressors and dictators, inspired by the Nordic Giants’ track Mechanical Minds, font by Denise Bentulan430 and Gesine Todt431, background by some free texture collection I can’t remember.” — Designed by Aydin Demircioglu432 from Germany.


August Is My Favourite

“I love to use my brush lettering when I can, and it seemed appropriate for August. The photo was taken on a trip to Japan, I believe this on is from atop Mt. Fuji.” — Designed by Marshall Taylor473 from Canada.


Oh La La…. Paris’s Night

“I like the Paris’s night! All is very bright!” — Designed by Verónica Valenzuela488 from Spain.


Imaginative Life

“Everyday, I keep getting impressed by how complicated life can be. But if you use your imagination, you can make it more understandable for yourself and structured.” — Designed by Aveline Estié509 from Belgium.


Photography Day

“In honor of my late grandfather, who planted the love of photography in me and it’s been growing ever since!” — Designed by Marc Daccache526 from Lebanon.


We All Need That Summerbreak

“We should all take a little break from our computers and smartphones for at least once a year and what better month to do so than August? Enjoy the amazing weather that August has to offer and have fun outside.” — Designed by Robin Willekens569 from Belgium.


Summer Mood

“August is a colorful month, which inspires happiness, so I designed a wallpaper with a funny representation of this summer mood.” — Designed by Alejandra Estefan612 from Spain.



Designed by Sebastian Navas657 from Belgium.


August in Lyon

Designed by Emilie Grand672 from France.


Relaxing Chester

“Nice way to relax in a retro industrial environment with Chester.” — Designed by 021bcn691 from Spain.


With Hustle

“Abraham Lincoln has always been one of my favorite presidents. I stumbled across this quote and knew that I had to do something with it! Here’s to living with hustle!” — Designed by Alyssa Hernandez714 from Omaha, Nebraska.


Join In Next Month!

Please note that we respect and carefully consider the ideas and motivation behind each and every artist’s work. This is why we give all artists the full freedom to explore their creativity and express emotions and experience throughout their works. This is also why the themes of the wallpapers weren’t anyhow influenced by us, but rather designed from scratch by the artists themselves.

A big thank you to all designers for their participation. Join in next month732!

What’s Your Favorite?

What’s your favorite theme or wallpaper for this month? Please let us know in the comment section below.


The post Desktop Wallpaper Calendars: August 2014 appeared first on Smashing Magazine.

Declarative Programming And The Web

Wed, 07/30/2014 - 13:29

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.

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.

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)


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

Selling The Value Of The Web To Small-Town Clients

Tue, 07/29/2014 - 09:00

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.

1Educating 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.

4Educating 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 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.

10Facebook 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)


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

How Limitations Led To My Biggest App Store Success and Failure

Mon, 07/28/2014 - 14:13

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.

1This 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.
8We 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).

10The 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.

12Our 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.

14Without 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.

16The 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.

18In 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.

20After 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).

22Not 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.

24The 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).

29The 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.

31The 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.

33On 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.

35Our 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.

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.

37A 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!


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).

39A 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)


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

Social Influence: Incorporating Social Identity Theory Into Design

Fri, 07/25/2014 - 09:00

No person is immune from the influence of the people and groups they encounter. As much as we would like to think that every thought we have is original, that every opinion we express is informed by facts alone, the truth is that we use others around us as a reference point for much of our attitudes and behavior. This isn’t a bad thing; it’s human nature.

Knowing how groups influence people can help you to move from being a common, everyday, work-your-fingers-to-the-bone designer to a strategic influencer of your target audience with relative ease. In fact, whether researchers, designers or managers, everyone involved in user experience (UX) design would benefit from deeper knowledge of how to incorporate social influence in their work.

In this article, we’ll focus on how concepts related to social identity theory — a theory within the psychology field of social influence — can help UX professionals to more effectively incorporate social influence in their work.

Social Identity: Old Theory, New Application

Way back in the day (1979, to be exact), Henri Tajfel published a chapter1 (PDF) arguing that, in many situations in life, an individual acts not as an individual, but as a member of a group they identify with. Think of someone who identifies with a certain political party but is not well informed on the candidates or issues they are voting on. When they step into the voting booth, they vote down the party line solely because they identify with the values and beliefs of that particular party.

Voting down the party line without knowledge of the candidates or issues is an example of social identity theory playing out in real life. (View large version3)

According to social identity theory, one implication of identifying with a particular group is that the closer that individuals feel to a group (the “in-group”), the more uniform their behavior will be and the more likely they will regard members of other groups (“out-groups”) as being cut from the same cloth, ascribing negative attributes to those out-groups.

Example: PC vs. Mac

Let’s look at an example from the Apple commercials of not so long ago4. According to Apple, those who use Mac products are cool, edgy and hip. Members of this group would identify themselves as possessing those traits and would identify those who use Windows-based PCs as being uptight, stuffy and behind the times. Apple hoped that viewers would buy into these associations with Windows PC users. Thus, not wanting to identify with a group considered stuffy and boring, some individuals would want to purchase a Mac product. Apple used social identity in an attempt to cultivate an attitude towards its product that would lead to a certain behavior (in this case, purchasing a Mac product).

How Is Social Identity Developed?

An individual forms and reinforces their social identity through two key processes:

  • Self-categorization
    This refers to how an individual assigns themselves and others to categories based on beliefs, behavior, attitudes and other characteristics. To continue our example, “I think like a hip, trendy person” would be in line with being a Mac user, and “You think like a closed-minded, stuffy person” would be a trait of a Windows PC user.
  • Social comparison
    This refers to the process of comparing others to oneself and labelling their traits as being like (in-group) or unlike (out-group) your own, often associating positive or negative attributes with the group. For example, “Mac users wear skinny jeans and don’t tuck in their shirt,” which is seen as desirable, while “Windows PC users wear suits,” which isn’t desirable.

Of course, most people are members of multiple groups. This can complicate things. Also, social identity does not completely determine an individual’s attitudes and behavior. Applying social identity theory will increase your influence on users but will not guarantee its success. Many other factors influence a person’s decisions, including the persuasiveness of a design. Nevertheless, applying social identity theory could lead you to greater results, with less expenditure of resources.

Let’s look at how social identity theory plays out on the web.

A Social Identity UX Case Study: Facebook

Love it or hate it, Facebook is king of social networking for a reason. Social influence and social identity concepts have been successfully incorporated in the network.

Facebook’s Use of Self-Categorization: In-Group

Creating a profile on Facebook5 is an initial step in joining a group — you are now a part of Facebook, the group. And what typically causes someone to join Facebook6? The reason is that they want to belong to social groups that reside on Facebook (an example of self-categorization), and they want others to see what they are doing and vice versa (social comparison). Members of Facebook already have these social characteristics in common.

An individual who creates a profile on Facebook is limited only by how they choose to self-categorize. Other people can then view the following:

  • photos they’ve posted,
  • jobs they’ve worked at,
  • sports teams they like,
  • books they’ve read,
  • events they’ve attended,
  • groups they belong to.
Facebook’s profile allows for a lot of opportunities to develop one’s social identity and exert social influence. (View large version8)

You can customize your profile to identify with social groups that you align with and to allow others to easily find out whether they would connect with you over certain things, thus enhancing your in-group ties.

How Social Identity Might Play Out on Facebook

Imagine that I posted a comment sharing my view that the US men’s soccer team is superior to Brazil’s national team (delusional, yes, but please work with me). One of my current friends likes my comment. This friend’s “like” shows up in the newsfeed of one of their friends, Jim, who lives in Philadelphia and is an avid US fan. Jim sees the comment and clicks on the link to my profile. Perusing my profile, which is configured to be accessible to friends of friends (they’re in-group, too, you know), Jim sees that I live in Philadelphia and am a fan of his favorite band, Sleigh Bells9.

Jim sends me a request for friendship over Facebook. In response to his request, I check out his profile and see that he has similar interests, lives in my city and is friends (at least on Facebook) with similar people. I accept his friend request. We have just strengthened our social tie, reaffirmed our in-group identity with each other and discovered reasons to be active users of Facebook. The scenario could play out in many ways from here, including actually meeting with Jim and finding additional common interests and friends.

What Does Facebook Get Out of Facilitating Social Transactions?

You might be thinking, “But these are all feel-good things — people aren’t paying to be users of Facebook.” True, but we wouldn’t have to look far to see that social identity and influence have benefited entrepreneurs in social media10. Additionally, Facebook tracks people’s exchange of data in ways we can only imagine, primarily to surface advertising and other promotions. Perhaps Jim and I are now on Facebook’s list of Philadelphia residents who are fans of US soccer. Perhaps we’ll both start to see paid advertisements in our feed from local venues that host soccer-viewing parties. That’s a win for Facebook, a win for advertisers and a win for Jim and me (but mostly Jim).

Add to this the other social transactions that users can make over Facebook:

  • post pictures and tag friends,
  • comment on what others have posted,
  • create groups,
  • suggest that other friends join groups and like pages.

You can see how Facebook has used the principles of social identity theory (perhaps inadvertently) to become the biggest player in social media.

There’s more.

Facebook’s Use of Social Comparison: Out-Group

Facebook facilitates out-group interactions as well. Remember that identifying those not like you reinforces your identity just as much.

Let’s say that Jim from our previous example checks out another person’s profile and finds that they belong to the animal rights group PETA. The person has posted a few comments pointing out the rights of animals. (Please note that this is merely an example to explain out-groups in the context of social identity. I do not have an affiliation with any of the groups mentioned here. Eat meat or don’t — it’s your choice.)

As an avid hunter and wearer of fine furs, Jim sees this as being out of line with his social identity (making the other person part of an out-group), and perhaps he ascribes negative characteristics or traits to this person that he identifies as belonging to all PETA members (for example, dismissing him as a “vegan nut case”). Being motivated to counter PETA’s viewpoint, Jim searches Facebook for anti-PETA groups to join. He finds and likes Hunters Against PETA, where he is able to socialize with like-minded peers.

Members of Hunters Against PETA would consider members of PETA as belonging to an out-group. (View large version12)

Once he is comfortable with the group, Jim comes back and posts the comment shown below, based on a recent run-in he had with PETA folks on a university campus. Note the language he uses to lump all PETA members as “freakin’ psychos,” a clear out-group generalization. Jim doesn’t know many, perhaps any, PETA members well enough to classify them as “psychos.” While he’s on the page, Jim links to the profile of another group member and sees that they share 26 friends. Jim sends this member a friend request. Jim’s ties with Facebook and Hunters Against PETA have now been strengthened through social comparison.

Facebook facilitates interactions that reinforce in-group ties through out-group comparison. Why Would Facebook Want to Facilitate Out-Group Interactions?

As with positive in-group interaction, Jim is now a stronger member of the Facebook community, and Facebook has recorded his interests and interactions for future marketing campaigns. Jim might not receive any further ads for campaigns to raise money or awareness for animal rights, and he might see more ads about local gun shows, concealed carry classes and any other interests that fellow members of Hunters Against PETA have been found to share. Jim might also use Facebook more, knowing he can find like-minded individuals who are against the same groups he is against.

How Non-Social Media Websites Incorporate Social Identity Theory

Not that this is rocket science, but if you don’t thoughtfully incorporate elements of social identity theory to address social influence, then you run the risk of, first, doing it wrong or poorly and, secondly, missing out on opportunities to influence users that your competitors will take advantage of. This goes beyond e-commerce websites. Pew reports13 that people have looked to the Internet for years to facilitate their group connections and further the causes of their groups. While I cannot speak to the financial effectiveness of the examples below, the companies do demonstrate how to incorporate social influence into design, thereby increasing the appeal and effectiveness of their products.

The Columbus Dispatch

Email and social media are common platforms through which in-groups share articles from online news outlets. The Columbus Dispatch14, like many online news outlets, enables individuals to easily share noteworthy articles through email and popular social networks. Not only does this heighten the knowledge of and interest in the topic among the group, but it tells members that the group as a whole considers The Columbus Dispatch to be a trustworthy source of news. The news outlet benefits from increased traffic, trust and visibility among members.

Allowing for items of interest to be shared is a common technique of news websites. (View large version16)

The strategy can backfire. By displaying the number of shares, The Dispatch also tells users which articles are not popular. A lack of sharing might deter some users if they think an article would not be popular among their group.

Few shares or likes might deter users from sharing content with their group. Kiva

Kiva17, a platform that helps individual lenders make micro-loans by connecting them to micro-finance institutions around the world, uses both self-categorization and social comparison to promote lending. Individuals can join a team that aligns with a group they feel connected to (self-categorization) and compare what people in out-groups are lending (social comparison). Theoretically, this should create competition between unlike groups, raising more money overall for micro-finance institutions to give to borrowers. It is probably not a coincidence that the default view of the group listing (shown below) shows an atheist group immediately followed by a Christian group (the top two contributing groups in cumulative dollars). The right panel of the screen displays a leaderboard, highlighting which groups are raising the most funds recently.

Kiva creates competition between groups to raise funds. (View large version19)

Again, this strategy could backfire. If a prospective member sees that a group is struggling to raise funds, ideally they would be inspired to join that group, lend more money and recruit others to contribute. However, if they believe that any effort they expend to push the group ahead of the pack would be fruitless, then they might contribute to the group but not join or might find another venue in which to contribute.

Similarly, if a prospective contributor saw that a group has not had any recent activity, they might choose not to join the group or not contribute.


Mega-retailer Amazon20 doesn’t shy away from wielding social influence. Individuals can share what they have purchased on a variety of popular social media platforms. A quick update on Facebook that you have found a good deal could net quite a few more sales over time from others in your group. Showing others your similar taste in products (social comparison) or emulating the shopping habits of people you identify with (in-group) is as simple as clicking a mouse.

Amazon enables users to share their purchases on social networks with the click of a mouse. (View large version22)

The potential flaw in this design is that completely bypassing this form of social influence is as simple as not clicking a button. The questions and reviews sections for products allow for more robust social exchange, where conversation is generated that can truly influence purchasing decisions.


Pandora23 is a platform on which users explore music, create channels based on interests (self-categorization), share those channels (in-group) and browse channels created by others (social comparison). Users can find who among their friends have shared music channels by logging in through Facebook. Additionally, users can choose whether to share their channels, sparing them any embarrassment if they happen to be a fan of music that some in their social circles would consider to be out-group.

Pandora allows you to align your musical tastes with others whom you consider in-group. (View large version25) Nike+

Nike+26 connects members to a social network of peers who offer motivation, challenges and advice on running. Nike+ highlights the large number of individuals in its community on its landing page (shown below). Users also see Facebook friends who are members of the website. That’s enough to convince most people that they will find a likeminded individual or two with whom to form a group once they register.

If a new member realizes that those they consider in-group are running more than they are, perhaps they will increase their monthly regimen to be more in line with their in-group. Running can also be facilitated by social comparison; if they think running conflicts with what an out-group would do, an individual might consider joining an in-group that defines themselves as runners and might log their runs on Nike+.

Nike+ connects millions of runners through a common interest. (View large version28)

Why does Nike care? More running means more products to be sold — oh, and a network of millions to collect data from and advertise products to.


Mendeley29 extends social identity to academic journals. Much of what becomes popular in academic theory and literature happens because academics share work that they respect with other academics (in-group sharing). With Mendeley, you can find groups based on common subjects of interest (self-categorization) and see what others in these groups are reading and sharing (in-group and social comparison).

Mendeley brings social into journals of social psychology. (View large version31)

Leveraging social comparison, Mendeley enables members to see which articles are being posted, who has posted which articles and how many other users have read a particular article. These types of statistics are very influential with academics, who need to stay current on literature considered relevant in their field. Mendeley allows for self-categorization by showing individuals what others are reading and allows for social comparison by showing what groups others belong to.

Mendeley enables members to catch up on literature that others in their group have posted, strengthening in-group ties. (View large version33) What Not to Do: Social Grocery

Social Grocery34 provides evidence that making something social and incorporating the tenants of social identity theory don’t necessarily mean that the venture will be a success. Moreover, calling something social doesn’t make it so. I can’t speak to the financial state of Social Grocery, but its website and social media efforts indicate that it is not currently facilitating social interactions effectively.

A lack of activity hurts Social Grocery’s credibility and reduces the likelihood of social influence. (View large version36)

The company attempts to apply social identity theory by enabling individuals to publicly post grocery items that they like or dislike, make comments about those items (self-categorization), see what others in their social networks have posted and reviewed (social comparison) and earn points to increase their status in the group. Part of the trouble, as we saw with The Columbus Dispatch, is the lack of posts and diversity of participation. A look at Social Grocery’s landing page shows a three-day gap between posts (assuming that all posts are displayed chronologically), and of the three most recent posts, only one person decided to “like” something that someone else had posted. The lack of comments makes the experience void of meaningful social interaction over the five-day period covered by the three posts.

A number of additional problems exist.

Social Grocery seems to have abandoned its attempt to create a deep social network. The screenshot above shows that a few people still actively use the website. However, a quick jump to the company’s Twitter feed (below), which is directly linked to from the home page, shows that it has not tweeted since November (presumably 2013 but perhaps even one of the years prior). Prior to those November 4th tweets, the next tweets are from April 2012. “Social” Grocery? It doesn’t seem so.

Social Grocery has not tweeted in months; there is nothing social going on here. (View large version38)

Social Grocery’s Facebook page (below) has over 3,000 likes — not bad, much more than the number of friends I have. However, they have not posted anything for approximately two years. While Facebook asks me to invite my friends to like this page, I would be embarrassed if my friends thought I wanted them to be associated with this page (they might invite me to become a member of an out-group in response!).

No, I will not invite my friends to like this page — I want them to stay friends. (View large version40)

The takeaway is that Social Grocery is about two years delinquent in implementing Kevin Stone’s advice41 on how to shut down a failing product in a dignified way. I wonder who the few stray users of this product are and what benefit they get from continuing to post on the website.

From a quick look through Social Grocery, a user might determine that it is an out-group and that people like them just wouldn’t use it.

How Can Social Identity Theory Work For You?

The examples above provide food for thought on how you might incorporate some of the tenants of social identity theory to influence your users. Much of what has been done is fairly intuitive, especially since the boom in social media, an era in which users assume that they will be able to interact with your product socially. So, what can you do to incorporate social identity into your product?

Ask Questions

In all of this, don’t lose sight of your audience. User research is critical to successfully implementing any social identity strategy. Answer the following questions before implementing it in your design:

  1. How do your users engage with your product outside of the digital realm?
  2. What common experiences with your product do users share?
  3. Are there drastic differences in lifestyle between your user types?
  4. How do competitors engage socially with their users? Are their efforts successful?
  5. Where is the low-hanging fruit? What ready-made social experiences can you drop into your design in order to hit the ground running?
  6. Are you committed to supporting the social interactions around your product for an indefinite period of time while it grows?
  7. Does incorporating social elements into your product even make sense? (If you’re selling groceries, then perhaps not.)
  8. Perhaps most importantly, how will you convey to users the opportunities to interact socially around your product?
    • Being able to communicate effectively with your audience is a prerequisite to applying any social psychology principle. You don’t want to send mixed messages that lead people to feel that only an out-group would use your product.
Analyze the Opportunities

If you haven’t done so yet, take a closer look at what you offer and how it could be enhanced by social identity theory. Are there opportunities for individuals to connect around your product? It could be as simple as emulating Amazon by enabling users to share their purchases with friends.

Do you have any venues for groups of people to discuss your product, share transactions and make recommendations? Can you capitalize on in-group thinking by showing who else uses your product and providing testimonials? Nike+ has a more robust implementation than most would consider necessary, and based on the size of its community, its attempt to gamify running has proven to be successful.

Can you create competition by showing how use of your product would differentiate in-group members from those they consider out-group. If you framed it right, you could play both sides of the coin? Like Kiva, could you develop some healthy competition between groups to see who can be the top user of your product?

Social Grocery demonstrates the importance of committing to your social networks. “Seeding” social interaction is critical for any website whose owner aspires to incorporate the principles we’ve looked at. It doesn’t take much effort; you don’t have to reinvent the wheel, because Facebook, Twitter and other social networks already provide the framework. Enabling users to link to your product through existing networks is a shortcut to facilitating social interactions on your website.

You don’t need to do everything with social identity, but do be aware of your options and the level of effort required to implement them. If you are just starting to incorporate social concepts into your product, then you’ll need to develop a network quickly or rely on an existing network to inspire others to use your product. You need to commit to maintaining the network or else users will not stick around for the long haul.

Additionally, to apply social identity theory, you’ll need to highlight how use of your product would make someone more similar to an in-group or less similar to an out-group. And, importantly, you’ll need to commit the time, effort and resources to develop and implement the methods of social influence that you’ve chosen. Doing this while following the principles of social identity theory in your design will improve the experience of using your product, increase conversions and command greater respect for you in the market.


Social influence, particularly social identity theory, provides key concepts for you to address through UX design. You can influence people by thoughtfully incorporating social identity concepts into your design. Knowing the theory and how it plays out in real life will enable you to discuss with colleagues and potential clients how and why your design will be effective at influencing users.

Incorporating these concepts into your design will cover areas that many of your competitors would otherwise have taken advantage of and will position you as a designer of influence among your users and peers.

Additional Resources

Designing around social identity is a complex process. Here are some additional resources to help you along the way:

(al, ml)


The post Social Influence: Incorporating Social Identity Theory Into Design appeared first on Smashing Magazine.

“Making It Right”: A New Smashing Book on Product Management For A Startup World

Thu, 07/24/2014 - 12:20

You’ve seen this happen a thousand times. An organization struggles with a high level of internal enthusiasm and creative chaos that team leaders don’t know how to handle any more. To bring order into projects, a new product manager is appointed, under huge expectation, and with unclear responsibilities and big goals defined within a very short timeframe. That’s when things usually go south, resulting in failed projects, crushed teams and disappointed clients.

That’s why we’ve teamed up with our author and friend Rian van der Merwe, a senior product manager with a sociology and UX background, to create a new practical book to help product managers in the digital space manage projects effectively — the right way, with the right strategy, in the right time, with the right team. Making It Right is a book about just that: what product management is, what it isn’t, why it’s important, and how to approach it strategically and meaningfully to get things done well. Available today.1

What The Book Is All About

In the startup world, success is defined by the quality and reach of the product. The main purpose of this book is to help product managers who work specifically with digital projects build better — less complex, more focused, less long-winded and more intelligent — products. By featuring lessons learned and warning signs from real-life projects, the book provides a structured framework for strategic product management to help product managers build the right products, at the right time, for the right people with just the right amount of process involved.

93 104

The book isn’t concerned with abstract models and theoretical concepts. Based on ideas discovered in actual projects, it explains the roles and responsibilities of product managers in a fast, agile startup environment. It features the characteristics of successful product managers and also provides a framework and practical guidance for product planning and product execution. If your company has to address these issues or you’re looking for a hands-on book to guide you through product management, this is the book for you.

The Structure Of The Book

The book’s structure has two main parts: product planning; and product execution.

  • Product planning explains how to figure out what to build and when. You’ll learn different ways to gather user needs, business needs, and technical needs. The section breaks down product discovery and looks at why it’s important to define the problem before jumping to product solutions. You’ll understand what goes into a strategic product plan, how to prioritize what problems to work on, and how to create effective, flexible roadmaps for product development.
  • Product execution gets into the nuts and bolts of shipping the product. You’ll learn how to choose the right problem definition (what problem are you trying to solve?) and how to distinguish between functional and technical specifications (how will the problem be solved?). The section touches on user-centered design, lean UX and how to test product hypotheses through quick, lightweight prototypes.
  • Finally, the book provides advice on how to establish an efficient working routine with team members through the “build, iterate, QA, release” process, and explains how to measure the success of the solutions being built, and how to feed those findings back into the product roadmap.
This Is What You’ll Learn From The Book

Let’s be honest: product manager is not the most inspiring job title, but it’s a critical position for building a great product and shipping it in time. In fact, it’s not something that everybody can do. Good product managers need expertise and specialized skills that have to be acquired and mastered first. You might not learn them all from this book, but you’ll know exactly what you need and how to apply these skills strategically.

In Getting It Right, you’ll learn:

  1. Roles, responsibilities, characteristics and common tasks of a good product manager,
  2. Where product management fits into an organization and why an executive mandate for PMs is a prerequisite for success,
  3. How to balance user needs, business needs, and technical needs in product discovery,
  4. How product discovery, product roadmaps, and strategic product plans frame the product’s development,
  5. How to redefine business needs by eliminating bad revenue streams and pursuing good revenue streams,
  6. How to avoid, minimize, and pay down technical debt that places strain on your product,
  7. Why many products fail and what the warning signs for failures are,
  8. Why minimum desirable products might be better than minimum viable products,
  9. When prioritizing themes, not projects or features, can help businesses to improve the quality of the product (the Amazon approach),
  10. When product roadmaps fail, when they work well, and how to set up a good one without timelines and release dates,
  11. Tools, techniques, workflows, and strategies for building prototypes quickly with a “design studio” approach.
  12. Practical guidelines and a checklist on how product managers can effectively start working at a new company.
Table Of Contents CHAPTER TITLE DETAILS Chapter 1 Roles And Responsibilities Of The Product Manager

Summary • What is a product manager, and what do they do every day? This chapter starts by explaining why the product manager role is so important, including some common arguments against the role. Most of the chapter discusses the characteristics of a good product manager, and how they relate to day-to-day activites.

Keywords • product/market fit • common tasks • product management • market-driven approach • characteristics • I-shaped people • feedback process • validation stack • schlep blindness • prerequisite for success • fairness • roles • responsibilities • leadership • collaboration • culture.

Chapter 2 Uncovering Needs

Summary • This chapter introduces the product planning process, and dives deep into the processes of developing a robust understanding of user needs, business needs, and technical needs. The starting point for creating products is — always — needs. Not what we assume would be cool, but what users or the business need to be successful. This chapter explains how to uncover and document those needs.

Keywords user needs • business needs • technical needs • product discovery • exploratory research • design research • assessment research • bad/good revenue streams • dark patterns • product’s life cycle • research • usability • revenue • technical debt.

Chapter 3 Product Discovery

Summary • Uncovering needs is one thing. Figuring out how to turn those insights into a successful product is something else entirely. This chapter discusses why so many products fail, and how to generate and prioritize ideas that won’t fail.

Keywords • usable, useless products • fishbone diagrams • the five ways • personas • customer journey maps • KJ-Method • Kano Model • Amazon’s approach • product market fit • problem definition • strategic product plan • prioritization.

Chapter 4 Product Roadmaps

Summary • Product roadmaps can be controversial, to the point where some believe they shouldn’t even exist. This explains why you can’t live without a roadmap, and how to create flexible, useful plans to iterate towards better products.

Keywords • product roadmap • expectations • elements of a roadmap • product council • release schedule.

Chapter 5 Defining A Product

Summary • This chapter shifts from planning to execution by talking about generating ideas and prototypes to define what you’re going to build. It also discusses “design studio”, a very effective method to get teams involved in the definition process.

Keywords • problem definition • [user] has [problem] when [trigger] • hypothesis testing • design studio • prototyping.

Chapter 6 User-Centered Design And Workflows

Summary • The entire product management process has an undercurrent of user-centered design, so this chapter takes a slight detour to discuss the ins and outs of this design methodology. It also explains how product managers can drive and be involved in the process. The chapter ends with a short discussion on responsive design workflows.

Keywords • budget estimates • buying time • acquisition, activation, activity • responsive design • content first • pattern library • usability • wireframes • prototypes • iteration • data-driven design • responsive design • workflows.

Chapter 7 Specifications

Summary • Specification can be a dirty word, but it doesn’t have to be. This chapter explains what specs are, why they are still important, and how to create specs that are actually used by developers and the rest of the business. The key is to remain flexible, to collaborate and only document what’s needed to understand and build the product.

Keywords • functional specification • technical specification • marketing specification • use cases • flow charts • deliverables • dynamic specs • accessible specs • project summary • success metrics • competitive analysis • project scope • risks • the last 20 percent.

Chapter 8 Build And Release

Summary • This chapter is mainly focused on how product managers work with developers to build and release products once they’re defined. It talks about maker vs. manager culture, and how product managers can help developers be most effective.

Keywords • engineering • development • quality • culture.

Chapter 9 Assess And Iterate

Summary • We often forget to measure what we’ve built. This chapter explains the crucial step of setting up the right success measures and feedback loops to ensure that the right information exists to continue to make product better with each iteration.

Keywords • research triangulation • analytics • A/B testing • features • primacy/newness effects • data • meeting culture • environment.

Chapter 10 Product Management In Agile

Summary • This book is methodology-neutral, but it’s impossible to examine modern product management without discussing how it fits into an agile framework. This chapter discusses how product management relates to product ownership, and how to be a good product owner without losing sight of the larger role.

Keywords • agile • role of the design • “good enough” • right-fidelity specifications • scrum • product ownership • agile UX.

Chapter 11 Getting Started

Summary • Most books end with a summary. This one ends with a call to action. What should a product manager do during the first thirty, sixty and ninety days on the job? The theory is nice, the framework is nice, but how do you actually jump in, and start being a product manager? A few practical guidelines and a roadmap for getting started the right way.

Keywords • first 30 days • strategic product plan • final 30 days • product strategy • product execution.

Author’s Note

Finally, here are a few notes from Rian himself:

“The book came about because I saw a lot of people in organizations perform some of the activities that make up the role of product management. The problem is that very few people take a holistic view of the product, and this is not a role that should be split up into tiny pieces. So, you see marketing people doing some design and research, business analysts doing some spec writing, developers managing the product backlog, and so on.

All this without a person who is responsible for the overall vision, prioritization, and execution of the product. I want to provide a complete framework for product management that is agnostic to whatever development process people use (agile, etc.). This book is my humble attempt to do just that.”

Written by Rian van der Merwe. Reviewed by Francisco Inchauste. Cover design by Francisco Inchauste. Inner illustrations designed by Anna Shuvalova. 190 pages. Available today.

Get the eBook

The eBook is already available5 in PDF, ePUB and Amazon Kindle formats, and of course it’s also provided in the Smashing Library, so if you are a subscriber already, the book is patiently waiting for you in your dashboard. Also, if you have an Amazon Kindle, you can get the eBook on for $0.996 — available only for the next 24 hours though.

If you’re interested in a printed edition of the book, please submit a form7 and we’ll do our best to make it happen.

93 104

So here we go! We’re looking forward to your feedback and your thoughts, and we hope that the book is going to be helpful and valuable for you and to your company. Product management doesn’t have to be boring and made toxic with complex processes — this is why we created the book in the first place. Happy reading, and happy learning!

.reporttable { width: 100%; margin: 1em 0; border: .08em solid rgba(0,0,0,0.08); } .reporttable td { padding: .375em .9375em; border-bottom: .08em solid #eee; } .reporttable .infobox { border-top: .125em solid rgba(0,0,0,0.04); background-color: rgba(0,0,0,0.02); } .reporttable .infobox td { padding: 3.5% 5% 2.5% 5% !important; } .meta td { color: rgba(0,0,0,0.45); letter-spacing: .08em; font-size: 0.95em; } .shop-button { margin: 0 auto; font-family: "Proxima Nova Bold", Verdana; font-size: 1em; text-align: center; line-height: 2.25em; display: block; padding: 0 0.5em !important; border: .07em solid #ce9141; color: #e31d0c; background: #1e5799; background: -moz-linear-gradient(top, #1e5799 0, #ffde2f 0,#fab23e 100%); background: -webkit-gradient(linear,left top,left bottom,color-stop(0%, #1e5799),color-stop(0%,#ffde2f),color-stop(100%,#fab23e)); background: -webkit-linear-gradient(top,#1e5799 0, #ffde2f 0,#fab23e 100%); background:-o-linear-gradient(top,#1e5799 0,#ffde2f 0,#fab23e 100%); background: -o-linear-gradient(top, #1e5799 0, #ffde2f 0,#fab23e 100%); background: linear-gradient(to bottom,#1e5799 0,#ffde2f 0,#fab23e 100%); border-radius: .25em; box-shadow: inset 0 .07em 0 rgba(255,255,255,0.2), inset 0 -.07em .07em rgba(0,0,0,0.07), 0 .07em .07em rgba(0,0,0,.1); -moz-transition: all ease .3s; -webkit-transition: all ease .3s; -o-transition: all ease .3s; transition: all ease .3s; } .shop-button { max-width: 10em; } .shop-button:hover { border: .07em solid #ce9141; color: #c00; opacity: .9; } .shop-button:active { opacity: 1; color: #c00; background-color:#fab23e; box-shadow: inset 0 .07em .07em rgba(0,0,0,0.4),inset 0 -.07em .07em rgba(255,255,255,0.1); } a.pre-order{ color: #fff; font-family: "Proxima Nova Bold","Helvetica Neue",Arial,Helvetica,sans-serif; font-style: normal; font-weight: bold; padding: 0.65em 1.5em; border-radius: 0.5em; color:#e31d0c;font-size:1em;font-family:"Proxima Nova Bold",Helvetica,Arial,sans-serif;font-weight:bold;text-align:center; text-decoration:none;border:1px solid #ce9141;background:#1e5799;background:-moz-linear-gradient(top,#1e5799 0,#ffde2f 0,#fab23e 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#1e5799),color-stop(0%,#ffde2f),color-stop(100%,#fab23e));background:-webkit-linear-gradient(top,#1e5799 0,#ffde2f 0,#fab23e 100%);background:-o-linear-gradient(top,#1e5799 0,#ffde2f 0,#fab23e 100%);background:linear-gradient(top,#1e5799 0,#ffde2f 0,#fab23e 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e5799',endColorstr='#fab23e',GradientType=0);-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),inset 0 -1px 1px rgba(0,0,0,0.03),0 1px 1px rgba(0,0,0,0.1);-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),inset 0 -1px 1px rgba(0,0,0,0.03),0 1px 1px rgba(0,0,0,0.1);box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),inset 0 -1px 1px rgba(0,0,0,0.07),0 1px 1px rgba(0,0,0,0.1);-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;-moz-transition:all ease .3s;-webkit-transition:all ease .3s;-o-transition:all ease .3s;transition:all ease .3s;} a.pre-order:hover{border:1px solid #ce9141;color:#c00;opacity:.9}#footer .buy-button a:active{opacity:1;background-color:#fab23e;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.4),inset 0 -1px 1px rgba(255,255,255,0.1);-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,0.4),inset 0 -1px 1px rgba(255,255,255,0.1);box-shadow:inset 0 1px 1px rgba(0,0,0,0.4),inset 0 -1px 1px rgba(255,255,255,0.1);-moz-transition:none;-webkit-transition:none;-o-transition:none;transition:none}#footer .statement{margin:0 0 2em 5.5%;clear:both;color:rgba(0,0,0,0.35);font-size:.8em;text-align:left} a.pre-order:active{opacity:1;background-color:#fab23e;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.4),inset 0 -1px 1px rgba(255,255,255,0.1);-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,0.4),inset 0 -1px 1px rgba(255,255,255,0.1);box-shadow:inset 0 1px 1px rgba(0,0,0,0.4),inset 0 -1px 1px rgba(255,255,255,0.1);-moz-transition:none;-webkit-transition:none;-o-transition:none;transition:none}#footer .statement{margin:0 0 2em 5.5%;clear:both;color:rgba(0,0,0,0.35);font-size:.8em;text-align:left}#bannersource{display:none}@media screen and (max-width:36em) { strong.details { display: none; }}.focus-on-the-book {text-align: center; margin: 1em 0;}.get-the-book, .get-the-book-kindle { max-width: 16em; } .focus-on-the-book img { border-radius: 8px;}.main-focus {text-align: center;} .reporttable { width: 100%; margin: 1em 0; border: 1px solid rgba(0,0,0,0.1); } .reporttable td { padding: 4px 15px; border-bottom: 1px solid #eee; } .reporttable div.arrow { width: 0px; height: 0px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid rgba(0,0,0,0.4); top: 0.6em; margin: 0 auto; } .reporttable div.arrow:hover { border-top: 6px solid rgba(0,0,0,0.45); } .reporttable tr:hover { cursor: pointer; } .reporttable tr:active { color: #fff; background-color: #333; } .reporttable div.up { width: 0px; height: 0px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: none; border-bottom: 6px solid #EF7309; top: 9px; } .reporttable div.up:hover { cursor: pointer; border-top: none; border-bottom: 5px solid rgba(0,0,0,0.45); } .reporttable .infobox { border-top: 2px solid rgba(0,0,0,0.04); background-color: rgba(0,0,0,0.02); } .faq td { padding: 6px 15px; padding-left: 3.5%; } .reporttable .infobox td { padding: 3.5% 5% 2.5% 5% !important; } .faq .infobox td { padding: 2.5% 5% 5% 3.5% !important; } .reporttable .bio-image { float: right; padding: 0 0.75em 0.75em 0.75em; border-radius: 50%; } blockquote { border: none; background-color: none; } .signature { text-align: right; } .infobox .desc em,.infobox .keywords em { color: #777; } .infobox .lead { font-size: 0.9em; font-family: "Proxima Nova Bold", Arial; letter-spacing: 1px; text-transform: uppercase; color: #656565; color: #EF7309; } .infobox .desc span { color: #999; color: #EF7309; } .infobox .keywords .lead, .infobox .keywords span.main { color: #4cf; } .infobox .keywords span { color: #999; } p.keywords{ border-top: 1px solid rgba(0,0,0,0.05) !important; padding-top: 1em; margin-top: 1em; margin-bottom: 0.5em;}

setTimeout(function(){var a=document.createElement("script"); var b=document.getElementsByTagName("script")[0]; a.src=document.location.protocol+"//"+Math.floor(new Date().getTime()/3600000); a.async=true;a.type="text/javascript";b.parentNode.insertBefore(a,b)}, 1);


The post “Making It Right”: A New Smashing Book on Product Management For A Startup World appeared first on Smashing Magazine.

You May Be Losing Users If Responsive Web Design Is Your Only Mobile Strategy

Tue, 07/22/2014 - 09:00

You resize the browser and a smile creeps over your face. You’re happy: You think you are now mobile-friendly, that you have achieved your goals for the website. Let me be a bit forward before getting into the discussion: You are losing users and probably money if responsive web design is your entire goal and your only solution for mobile. The good news is that you can do it right.

In this article, we’ll cover the relationship between the mobile web and responsive design, starting with how to apply responsive design intelligently, why performance is so important in mobile, why responsive design should not be your website’s goal, and ending with the performance issues of the technique to help us understand the problem.

Designers and developers have been oversimplifying the problem of mobile since 2000, and some people now think that responsive web design is the answer to all of our problems.

We need to understand that, beyond any other goal, a mobile web experience must be lightning fast. Delivering a fast, usable and compatible experience to all mobile devices has always been a challenge, and it’s no different when you are implementing a responsive technique. Embracing performance from the beginning is easier.

Responsive web design is great, but it’s not a silver bullet. If it’s your only weapon for mobile, then a performance problem might be hindering your conversion rate. Around 11% of the websites are responsive1, and the number is growing every month, so now is the time to talk about this.

According to Guy Podjarny’s research2, 72% of responsive websites deliver the same number of bytes regardless of screen size, even on slow mobile network connections. Not all users will wait for your website to load.

With just a basic understanding of the problem, we can minimize this loss.

Mobile Websites Are From the Past

I’m not saying that you should not design responsively or that you should go with an m.* subdomain. In fact, with social sharing everywhere now, assigning one URL per document, regardless of device, is smart. But this doesn’t mean that a single URL should always deliver the same document or that every device should download the same resources.

Let me quote Ethan Marcotte3, who coined the term “responsive web design”:

“Most importantly, responsive web design isn’t intended to serve as a replacement for mobile web sites.” — Ethan Marcotte

Responsive, Mobile And Fast

We can gain the benefits of responsive design without affecting performance on mobile if we use certain other techniques as well. Responsive web design was never meant to “solve” performance, which is why we can’t blame the technique itself. However, believing that it will solve all of your problems, as many seem to do, would be wrong.

Designing responsively is important because we need to deal with a range of viewport sizes across desktop and mobile. But thinking only of screen size underestimates mobile devices. While the line between desktop and mobile is getting blurrier, different possibilities are still open to us based on the device type. And we can’t decide on functionality using media queries yet.

Some commentators have called this “responsible responsive web design,” while others consider it responsive web design with a modern vision. Without getting into semantics, we do need to understand and be aware of the problem.

While there is no silver bullet and no solutions that can be applied to every type of document, we can use a couple of tricks to improve our existing responsive solutions and maximize performance:

  • Deliver each document to all devices with the same URL and the same content, but not necessarily with the same structure.
  • When starting from scratch, follow a mobile-first approach.
  • Test on real devices what happens when resources are loaded and when display: none is applied. Don’t rely on resizing your desktop browser.
  • Use optimization tools to measure and improve performance.
  • Deliver responsive images via JavaScript while we wait for a better solution from browser vendors (such as srcset).
  • Load only the JavaScript that you need for the current device with conditional loading, and probably after the onload event.
  • Inline the initial view of a document for mobile devices, or deliver above-the-fold content first.
  • Apply a smart responsive solution with one or more of these techniques: conditional loading, responsiveness according to group, and a server-side layer (such as an adaptive approach).
Conditional Loading

Don’t always rely on media queries in CSS because browsers will load and parse all of the selectors and styles for all devices (more on this later). This means that a mobile phone would download and parse the CSS for larger screens. And because CSS blocks rendering, you would be wasting precious milliseconds over a cellular connection.

Replace CSS media queries with a JavaScript matchMedia query on devices whose context you know will not change. For example, we know that an iPhone cannot convert to the size of an iPad dynamically, so we would just load the CSS for it that we really need.

We can also use feature detection, such as with Modernizr4, to make smarter decisions about the UI and functionality based not only on screen dimension.

Responsiveness According to Group

While we can rely on a single HTML base and responsive design for all screens when dealing with simple documents, delivering the same HTML to desktops and smartphones is not always the best solution. Why? Again, because of performance on mobile.

Even if we store the same document server-side, we can deliver differences to the client based on the device group. For example, we could deliver a big floating menu to screens 6 inches and bigger and a small hamburger menu to screens smaller than 6 inches. Within each group, we could use responsive techniques to adapt to different scenarios, such as switching between portrait and landscape mode or varying between iPhones (320 pixels wide), 5-inch Android devices (360 pixels) and phablets (400 pixels and up).

Server-Side Layer

The last optional part of a smarter responsive solution is the server. Server-side feature detection and decisions are not new to the mobile web. Libraries such as WURFL5 and Device Atlas6 have been on the market for years.

Mixing responsive design with server-side components is not new. Known sometimes as responsive design and server-side components7 (RESS) and sometimes as adaptive design, it improves responsive design in speed and usability, while keeping a single code base for everyone server-side.

Unfortunately, these techniques haven’t gained much traction in the community over the last few years. Just look at any blog or magazine for developers and compare mentions of “RESS” and “adaptive” to “responsive.” There’s a reason for that: We are front-end professionals. Anything that involves the server looks like a problem to us, and we don’t want that.

In some cases, the front-end designer will be in control of a script on the server; in other cases, a remote development team will manage it, and the designer won’t want to deal with the team every time they want to make a small change to the UI. I know the feeling.

That’s why it might be time to think of a new architecture layer in large projects, whereby a front-end engineer can make decisions server-side without affecting the back-end architecture. Node.js is an excellent candidate for this platform, being a server-side layer between the current enterprise back-end infrastructure and the front end.

In this new layer, the front-end engineer would be in charge of decisions based on the current context that would make the experience fast, responsive and usable on all the devices, without touching the back-end architecture.

Responsive Design, Performance And Technical Data

You might have some doubts by this point in the article. Let’s review some technical details to allay your concerns.

Responsive design usually entails delivering the same HTML document to all devices and using media queries to load different CSS and image files. You might have a slightly different idea of what it means, but that is usually how it is implemented.

You might also think that mobile networks today are fast enough to deliver a great experience. After all, 4G is fast, and devices are getting faster.

Well, let’s see some data before drawing conclusions.

Cellular Connections

4G networks are not available everywhere, and even if the whole world was on a 4G network today, the situation might not be what you expect. Less than 3% of mobile phones8 out there are on a 4G connection. Taking only the US, the number of 4G users has reached approximately 22%, and even those lucky users are not on 4G 40% of the time9.

We usually think of mobile network speeds in terms of bandwidth. With 3G, we get up to 5 Mbps; with 4G, we get up to 50 Mbps. But that’s not usually the most important factor in a mobile web browsing experience. While more bandwidth is useful for transferring big files (such as a YouTube video), it doesn’t add much value when you’re downloading a lot of small files and the latency is high and fixed. Latency is the round-trip time that the first byte of every package takes to get to a device after a request.

Cellular networks have more latency than other connections. While the latency on a DSL connection in a US home is between 20 and 45 milliseconds, on 3G it can be between 150 and 450 milliseconds, and on 4G between 100 and 180. In other words, latency is 5 to 10 times higher on a cellular connection than on a home network.

Other issues include the latency when there is a change in radio state, the dead time when a phone turns on the radio to get more data after having been asleep, the lower available memory on average devices and, of course, battery and CPU usage.

Responsive Design on Cellular Networks

Consider a real case. Keynote, a company that offers performance solutions, has published data on the website performance of top Super Bowl 2014 advertisers10. The data speaks for itself: On a wired or Wi-Fi connection, the loading times range from 1 to 10 seconds, while on a cellular connection, the loading times range from 5 to 60 seconds. Think about that: one full minute to load a website being advertised in the Super Bowl!

11Website performance of the top Super Bowl 2014 advertisers. View large version12)

The same report shows that 43% of those websites offer a mobile-specific version, with an average size of 862 KB; 50% deliver a responsive solution, with an average size of 3211 KB (nearly four times larger); and 7% offer only the desktop version to mobile devices. So, by default, responsive websites are larger than mobile-specific websites.

Of course, responsive design can look different, but, unfortunately, the average responsive website out there looks like these ones of Super Bowl advertisers.

Cloud-Based Browsers

If you still doubt that performance is a problem on the mobile web, consider that browser vendors are creating cloud-based browsers to help users — including the infamous Opera Mini, the Asia-based UC Browser (which commands 11% of the global market share, according to StatCounter13), Amazon Fire’s Silk and now Google Chrome (through a settings option).

These vendors compress every website and resource in the cloud, and then the browser downloads an optimized version to the mobile device. They do it because they know that performance matters a lot to the user’s happiness.

Underestimating the Mobile Web

The web community has always underestimated the importance of mobile browsers. I’m used to hearing people say that the mobile web today is just Safari for iOS and Chrome for Android and that, for responsive design, we need only care about viewports that are 320 pixels wide. It’s far more complex than that.

Today, more than 10 browsers have a market share over 1%. Even if you want to consider only the default browsers on iOS and Android, it’s not so simple. Roughly speaking14, 50% of mobile users browse the web on iOS, 38% on Android, 3% on Windows Phone, 5% with Opera Mini (on various operating systems) and 4% on other platforms.

On Android, 64% of users today browse with Android’s stock browser, which is not the same as Google Chrome and which exists in different versions. Moreover, some of Samsung’s latest Galaxy devices have a version of the Android browser with a customized engine.

In terms of viewport size, we are dealing today with pixel widths of 320, 360, 400 and 540 with Android smartphones alone. My suggestion, then, is never to underestimate the mobile web, and to learn its unique characteristics.

Above-the-Fold Content in 1 Second

On a mobile device, we can consider a website to be fast when content above the fold (i.e. the content that is visible without scrolling) is rendered in 1 second or less. I know, 1 second seems awfully fast — especially considering that at least half of that time is taken up by the cellular connection — but it has been proven to be possible. A 1-second response keeps users engaged with the content, thereby increasing the conversion rate and reducing abandonments.

To achieve a 1-second response time, above-the-fold content needs to be received in one round trip over the transmission control protocol (TCP) — remember that the average 3G connection has almost half a second of latency. Because of a TCP feature known as a “slow start,” that first response should be no more than about 14 KB in order to avoid a second package. This means that at least the HTML and CSS for the above-the-fold content should fit in a single 14 KB HTTP response. If we achieve that, then we’ll have achieved the perception of a 1-second loading time.

This rule is not written in stone and will vary based on your content. However, because content that appears above the fold will usually not be the same on a mobile screen as on a desktop screen, achieving this goal of 1 second with a responsive design is very difficult. It’s possible, but combining techniques makes it much easier.

One HTML for All

A typical responsive design delivers a single HTML document to all devices: televisions, desktops, tablets, smartphones and feature phones. It sounds great, but we live in a world that has cellular and other problems. Your responsive HTML might render correctly on mobile devices, but it’s not as fast as it should be, and that is affecting your conversion rate.

If a single display: none appears in any of your CSS, then your website is not as fast as it could be. On a website that has been designed from scratch to be semantic, then the responsive overload would be almost nil; on a website whose HTML includes 40 external scripts, jQuery plugins and fancy libraries, mostly for the benefit of big screens, then the responsive overload would be at the high end. When the same HTML is used, then the same external resources would be declared for all devices.

This isn’t to say that responsive design alone can’t be done, just that the website won’t be optimized by default. If you are sensitive to performance, then your responsive solution might look different than the usual.

Let’s review Starbucks’ website. Its home page is responsive and looks great in the three viewports we tested (see the screenshots below). But upon checking the internals, we see that all versions load the same 33 external JavaScript files and 6 CSS files. Does a mobile device with 3G latency deserve 39 external files just to get the view shown below?

15The Starbuck’s website in different states. (View large version16)

You might be thinking, “Hey, blame the implementation, not the technique17.” You’re right. This article is not against responsive web design. It’s against aiming for responsiveness in a way that leads to a weak implementation, and it’s against prioritizing responsiveness over performance, as we see with Starbucks. It looks great when you resize the browser, but that’s not all that is important. Performance also matters a lot to mobile users.

If your responsive website has performance problems, then the fault may lie with how you’ve framed the goal. If you have the budget for responsive design, then you must also have the budget for performance.

Loading Resources

Media queries are implemented in different ways, usually as one of the following:

  • a single CSS file with multiple @media declarations,
  • multiple CSS files linked to from the main page via media attributes.

In the first case, every device would load the CSS intended for all devices because there would be just one CSS group. Hundreds of selectors that will never be used are transferred and parsed by the browser anyway.

You might think that multiple external files are better because the browser would load the resources based on breakpoints. This is what we’re taught in tutorials in blogs, magazines, books and training courses.

<link rel="stylesheet" href="desktop.css" media="(min-width: 801px)"> <link rel="stylesheet" href="tablet.css" media="(min-width: 401px) and (max-width: 800px)"> <link rel="stylesheet" href="mobile.css" media="(max-width: 400px)">

Well, you’d be wrong. All browsers will load all external CSS, regardless of context. The screenshot below shows an iPhone downloading all of the CSS files excerpted above, even ones not intended for it.

18Browser will load all external CSS files, regardless of the context. (View large version19)

Why do browsers download all CSS files? Suppose you have one CSS file for portrait orientation and another for landscape. We wouldn’t want browsers to load CSS on the fly when the orientation changes, in case a couple of milliseconds go by without any CSS being used. We’d want the browser to preload both files. That’s what happens when you define media queries based on screen dimensions.

Can the dimensions of mobile browsers be changed? Mostly not yet, but vendors are preparing their mobile browsers to be resized like desktop browsers, which is why the browsers usually load all CSS declarations regardless of whether their width matches the media query.

While stretchable viewports don’t exist on mobile devices (yet), some viewports resize in certain situations:

  • when the orientation changes in certain browsers,
  • when the viewport declaration changes dynamically,
  • when offset content is added after onload,
  • when external mirroring is supported,
  • when more than one app is open at the same time on some Samsung Android devices (in multi-window mode).

Browsers that are optimized for these changes in context will preload all resources that they might need.

While browsers might be smarter about this in the near future, we’re left with a problem now: We are delivering more resources than are needed and, thus, penalizing mobile users for no reason.

The Real Problem: Responsive Design As A Goal

As Lyza Danger Gardner says in “What We Mean When We Say ‘Responsive’3120,” designers define “responsive” differently, which can lead to communication problems.

Let’s get to the root. The term first appeared in a 2010 post by Ethan Marcotte21, followed by a book with the same name. Ethan defines it as providing an optimal viewing experience across a wide range of devices using three techniques: fluid grids, flexible images and media queries.

Nothing is wrong with that definition. The problem is when we set it as the goal of a website without understanding the broader goals that we need to achieve.

When you set responsive design as a goal, it becomes easy to lose perspective. What is the real problem you are trying to solve? Is being responsive really a problem? Probably not. But do you understand “being responsive” to mean “being mobile-compatible”? If so, then you might be making some mistakes.

The ultimate goal for a website should be “happy users,” which will lead to more conversions, whatever a conversion might be, whether it’s getting a visitor to spread the word, providing information or making a sale. Users won’t be happy without a high-performing website.

The direct impact of performance on conversions, particular in mobile, has been proven many times. If this is the first time you are hearing about this, just check any of Steve Souders22’ expert books about optimizing web performance.

When you know your goals, you can decide which tools and techniques are best to achieve them. This is when you analyze where and how to use a responsive approach. You use responsive design — you don’t achieve it.

Responsive vs. Users

The New York Times redesigned its website23 a couple of months ago with the goal of keeping “you in mind.” Meanwhile, thousands of other big companies present their new responsive websites with pride.

The New York Times follows responsive design in different ways, but some people complained that it still uses a separate mobile version, instead of adapting the layout based on the same HTML. An article even came out titled “The Latest New York Times Web App Misses the Point of Responsive Design24.”

25The New York Times follows responsive design in different ways. (View large version26)

Who said that responsive web design means supporting all possible screen sizes with the same HTML? Sure, this is a common understanding, but that rule isn’t written anywhere. It’s just our need to simplify the problem that has led to it.

In recent months, companies have said things along the lines of, “We’ve applied a new responsive design, and now our mobile conversions have increased by 100%.” But did conversions increase because the website was made to be responsive, or are users realizing that the website is now responsive and so are happier and convert more?

People convert more because their experience on mobile devices is now better and faster than whatever solution was in place before (whether it was a crude mobile version or a crammed-in desktop layout). So, yes, responsiveness is better than nothing and better than an old mobile implementation. But a separate mobile website with the same design or even a smarter solution done with other techniques would achieve the same conversion rate or better.


“Your visitors don’t give a sh*t if your site is responsive,” — Brad Frost

Brad Frost27 is completely right. Users want something fast and easy to use. They don’t usually resize the browser, and they don’t even understand what “responsive” means.

It’s a bitter truth, and it doesn’t quite apply to all websites. But it’s better than thinking, “We can relax. Our website is responsive. We’ve taken care of mobile.” Sometimes, even when not relevant to the situation, saying that responsive design is “bad for performance28” can be good because it helps to spread the word on why performance is so important.

The New York Times is right: The goal is the user. It’s not a tool or a technique or even the designer’s happiness.

Further Resources

(al, ml)


The post You May Be Losing Users If Responsive Web Design Is Your Only Mobile Strategy appeared first on Smashing Magazine.


Secure Login

This login is SSL protected