There has been a long-running war going on over the mobile Web: it can be summarized with the following question: “Is there a mobile Web?” That is, is the mobile device so fundamentally different that you should make different websites for it, or is there only one Web that we access using a variety of different devices? Acclaimed usability pundit Jakob Nielsen thinks that you should make separate mobile websites. I disagree.

Jakob Nielsen, the usability expert, recently published his latest mobile usability guidelines. He summarizes:

“Good mobile user experience requires a different design than what’s needed to satisfy desktop users. Two designs, two sites, and cross-linking to make it all work.”

I disagree (mostly) with the idea that people need different content because they’re using different types of devices.

Firstly, because we’ve been here before, in the early years of this century. Around 2002, the huge UK supermarket chain Tesco launched Tesco Access—a website that was designed so that disabled people could browse the Tesco website and buy groceries that would be delivered to their homes.

It was a great success—heavily stripped down, all server-generated (as in, those days screen readers couldn’t handle much JavaScript) and it was highly usable. One design goal was “to allow customers to purchase an average of 30 items in just 15 minutes from login to checkout.” In fact, from a contemporary report, (cited by Mike Davis), “many non-disabled customers are switching from the main Tesco site to the Tesco Access site, because they find it easier and faster to use!” It also made Tesco a lot of money: “Work undertaken by Tesco.com to make their home grocery service more accessible to blind customers has resulted in revenue in excess of £13m per annum, revenue that simply wasn’t available to the company when the website was inaccessible to blind customers.”

However, some blind users weren’t happy. There were special offers on the “normal” Tesco website that weren’t available on the access website. There were advertisements that were similarly unavailable—which was a surprise; whereas most people hate advertisements, here was a community complaining that it wasn’t getting them.

The vital point is that you never know better than your users what content they want. When Nielsen writes that mobile websites should “cut features, to eliminate things that are not core to the mobile use case; [and] cut content, to reduce word count and defer secondary information to secondary pages,” he forgets this fact.

Tesco learned this:

“We have completely redesigned Access so that it is no longer separate from our main website but is now right at the center of it, enabling our Access customers to enjoy the same features and functionality available on the standard grocery website. As part of this work we have had to retire the old Access website.”

Nielsen writes:

“Build a separate mobile-optimized site (or mobile site) if you can afford it … Good mobile user experience requires a different design than what’s needed to satisfy desktop users. Two designs, two websites, and cross-linking to make it all work.”

From talking to people in the industry, and from my own experience of leading a dev team, I’ve found that building a separate mobile website is considered to be a cheaper option in some circumstances—there may be time or budgetary constraints. Sometimes teams don’t have another option but creating a separate website due to factors beyond their control.

I believe that this is not ideal, but for many it’s a reality. Re-factoring a whole website with responsive design requires auditing content. And changing a production website with all the attendant risks, then testing the whole website to ensure it works on mobile devices (while introducing no regressions in the desktop website)—all this is a huge task. If the website is powered by a CMS, it’s often cheaper and easier to leave the “desktop website” alone, and implement a parallel URL structure so that www.example.com/foo is mirrored by m.example.com/foo, and www.example.com/bar is mirrored by m.example.com/bar (with the CMS simply outputting the information into a highly simplified template for the mobile website).

The problem with this approach is Nielsen’s suggestion: “If mobile users arrive at your full website’s URL, auto-redirect them to your mobile website.” The question here is how can you reliably detect mobile browsers in order to redirect them? The fact is: you can’t. Most people attempt to do this with browser sniffing—checking the User Agent string that the browser sends to the server with every request. However, these are easily spoofed in browsers, so they can’t be relied upon, and they don’t tell the truth, anyways. “Browser sniffing” has a justifiably bad reputation, so is often renamed “device detection” these days, but it’s the same flawed concept.

On mobile, Twitter.com automatically forwards users to a separate mobile website.

More troublesome is that there are literally hundreds of UA strings that your detection script needs to be aware of in order to send the visitor to the “right” page. The list is ever-growing, so you need to constantly check and update your detection scripts. And of course, you only know about a new User Agent string after it turns up in your analytics—so there will be a period between the first visitor arriving with an unknown UA and your adding it to your detection scripts (in which visitors will be sent to the wrong website).

Despite all this work to set up a second parallel website, you will still find that some visitors are sent to the wrong place, so here I agree with Nielsen:

“Offer a clear link from your full site to your mobile site for users who end up at the full site despite the redirect … Offer a clear link from your mobile site to your full site for those (few) users who need special features that are found only on the full site.”

Missing out features and content on mobile devices perpetuates the digital divide. As Josh Clark points out in his rebuttal:

“First, a growing number of people are using mobile as the only way they access the Web. A pair of studies late last year from Pew and from On Device Research showed that over 25% of people in the US who browse the Web on smartphones almost never use any other platform. That’s north of 11% of adults in the US, or about 25 million people, who only see the Web on small screens. There’s a digital-divide issue here. People who can afford only one screen or internet connection are choosing the phone. If you want to reach them at all, you have to reach them on mobile. We can’t settle for serving such a huge audience a stripped-down experience or force them to swim through a desktop layout in a small screen.”

The number of people only using mobile devices to access the Web is even higher in emerging economies. Why exclude them?

Mobile Usability

I also agree with Nielsen when he writes:

“When people access sites using mobile devices, their measured usability is much higher for mobile sites than for full sites.”

But from this he draws the wrong conclusion, that we should continue making special mobile websites. I believe that special mobile websites is like sticking plaster over the problem; we generally shouldn’t have separate mobile websites, anymore than we should have separate screen reader websites. The reason many “full websites” are unusable on mobile phones is because many full websites are unusable on any device. It’s often said that your expenditure rises as your income does, and that the amount of clutter you own expands to fill your house however many times you move to a bigger one. In the same way, website owners have long proved incontinent in keeping desktop websites focussed, simply because they have so much room. This is perfectly illustrated by the xkcd comic:

A Venn diagram showing “Things on the front page of a university website” and “Things people go to the site looking for.” Only one item is in the intersection: “Full name of school.”

As I wrote on the website The Pastry Box on April 13th:

“The mobile pundits got it right: sites should be minimal, functional, with everything designed to help the user complete a task, and then go. But that doesn’t mean that you need to make a separate mobile site from your normal site. If your normal site isn’t minimal, functional, with everything designed to help the user complete a task, it’s time to rethink your whole site.

“And once you’ve done that, serve it to everyone, whatever the device.”

In a previous article, Nielsen wrote in September 2011 that he dropped testing usability with featurephones:

“Our first research found that feature phone usability is so miserable when accessing the Web that we recommend that most companies don’t bother supporting feature phones.

“Empirically, websites see very little traffic from feature phones, partly because people rarely go on the Web when their experience is so bad, and partly because the higher classes of phones have seen a dramatic uplift in market share since our earlier research.”

This is a highly westernized view. Many people can’t afford smartphones, so they use feature phones running proxy browsers (such as Opera Mini), which move the heavy lifting to servers. This is often the only way that underpowered featurephones can browse the Web. Statistics from Opera’s monthly State of the Mobile Web report (disclosure: Opera is my employer) shows that lower-end feature phones still dominate the market in Eastern Europe, Africa and other emerging economies—see the top 20 handsets worldwide for 2011 that accessed Opera Mini. Since February 2011, the number of unique users of Opera Mini has increased 78.17% and data traffic is up 142.79%.

A caveat about those statistics: not every user of Opera Mini is a phone user feature in developing countries. They’re widely used on high-end smartphones in the West, too, as we know that they are much faster than built-in browsers, and users really want speed.

Nielsen’s dismissal of feature phones reminds me of some attitudes to Web accessibility in the early 2000′s. His assertion that companies shouldn’t support feature phones because they see little traffic from feature phones is the classic accessibility chicken and egg situation: we don’t need to bother with making our website accessible, as no-one who visits us needs it. This is analogous to the owner of a restaurant that is up a flight of stairs saying he doesn’t need to add a wheelchair ramp as no-one with a wheelchair ever comes to his restaurant. It’s flawed logic.

Developing Usable Websites For All Devices

The W3C Mobile Web best practices say:

“One Web means making, as far as is reasonable, the same information and services available to users irrespective of the device they are using. However, it does not mean that exactly the same information is available in exactly the same representation across all devices. The context of mobile use, device capability variations, bandwidth issues and mobile network capabilities all affect the representation. Furthermore, some services and information are more suitable for and targeted at particular user contexts.”

There will always be edge cases when separate, mobile-specific websites will be a better user experience, but this shouldn’t be your default when approaching the mobile Web. For a maintainable, future-friendly development methodology, I recommend that your default approach to mobile be to design one website that can adapt to different devices with viewport, Media Queries and other technologies that are often buzzworded “Responsive Design.”

Combining these techniques in a smart way with progressive enhancement allows your content to be viewed on any device (and with richer experiences available on more sophisticated devices), with the possibility of accessing device APIs such as geolocation, or the shiny new getUserMedia for camera access.

Although many other resources are available, I’ve written “Mobile-friendly: The mobile web optimization guide” which you’ll hopefully find a useful starting point.

Further Reading

• Designers respond to Nielsen on mobile
• Nielsen responds to mobile criticism
• Let the mobile Web learn from and not repeat the mistakes of desktop development, by Henny Swan (2009)
• Notes on Designing Websites for the Asian Market, by Yours Truly

(jvb) (il)

© Bruce Lawson for Smashing Magazine, 2012.

Smashing Magazine Feed

class=”alignleft size-full wp-image-32048″ title=”thumbnail” src=”http://netdna.webdesignerdepot.com/uploads/2012/04/thumbnail.jpg” alt=”PSDGator contest” width=”200″ height=”160″ />You spend hours creating the perfect design in Photoshop. It’s exactly what you wanted (and what your client wanted). And now it’s time to spend hours coding it.

Not exactly your favorite part of the job if you’rec like a lot of designers. Even if you know how to code the design.

That’s where rel=”follow” href=”http://www.psdgator.com/”>PSD to HTML services come in. They take your design files and convert them to code. href=”http://www.psdgator.com/”>PSDGator is one such service.

In just two business days, they’ll convert your PSD file into a coded page with valid CSS and XHTML. The finished product will look exactly how you designed it, without the headache of having to code it yourself.

Today, you’ll get the chance to win one of 10 prizes for PSD to HTML conversion (a value of each!). id=”more-32047″>

Let’s say you have your design finished, and now you need to turn it into a rel=”follow” href=”http://www.psdgator.com/customization”>WordPress theme. No problem! PSDGator can create either for you, and still keep everything pixel-perfect. Doesn’t matter whether the theme is for yourself or a client.

href=”http://www.psdgator.com/”> class=”image-border” title=”psdgator” src=”http://netdna.webdesignerdepot.com/uploads/2012/04/psdgator.jpg” alt=”" width=”615″ height=”475″ />

PSDGator’s markup will be pixel perfect, and look exactly like the original design file you sent. CSS classes are named intuitively, so it’s easy for you to figure out the code and make changes to it in the future if you need to. The code is kept readable and easy to follow, and it’s even properly indented and formatted.

They offer a money back guarantee, so if you’re not satisfied with the result, you’ll get a refund. And on top of that, you’ll also get thirty days of free technical support for your code. So you’ve really got nothing to lose by using PSDGator for your next design.

While PSDGator offers plenty of off-the-shelf solutions, they can also do custom jobs for you. Need to use the 960 Grid System or Blueprint for your layout? No problem. Just get in touch with them for a custom quote.

You can check out some examples of their work href=”http://www.psdgator.com/examples”>here.

class=”spacer_” />

Giveaway details:

• We’ve teamed up with PSDGator to offer 10 readers a package to use on PSDGator’s services!
• All you have to do is comment on this post to win (winners will be selected at random).
• One comment per person, duplicates will be voided
• Enter your comment using your email address (no Twitter or Facebook logins)
• Void where prohibited by law
• This package is enough to get one Basic Package (a single page) converted (not including jQuery or JavaScript features). But the best part is that you can use this toward a larger purchase on PSDGator. So if you need an email template, a Dreamweaver template, or a WordPress or Joomla theme, you’ll pay less!
• Results will be posted here on WDD on April 25th, 2012

You’ll save time and effort by outsourcing your XHTML and CSS coding. That way you can focus on what you love most — design! Good luck to everyone!

/>
width=”100%” style=”border-top:1px solid #d7d7d7; border-bottom:1px solid #d7d7d7;” height=”20″>
valign=”center”> href=”http://www.mightydeals.com/deal/depositphotos2.html?ref=inwidget”> face=”Arial” size=”3″ color=”#e64f32″>Huge Discounts on Stock Photos! width=”90″> href=”http://www.mightydeals.com/?ref=inwidget”> /> src=”http://mightydeals.com/web/images/widget-logo.png” height=”40″ width=”90″ border=”0″ /> />

href=”http://www.webdesignerdepot.com/2012/04/win-10-free-psd-to-html-conversion-valued-at-99-each/”>Source

Webdesigner Depot

This article is the sixth in our new series that introduces the latest, useful and freely available tools and techniques, developed and released by active members of the Web design community. The first article covered PrefixFree; the second introduced Foundation, a responsive framework; the third presented Sisyphus.js, a library for Gmail-like client-side drafts, the fourth shared with us a free plugin called GuideGuide and the fifth presented Erskine Design’s responsive grid generator Gridpak. Today, we are happy to feature a toolkit devised by Yandex: BEM.

BEM stands for “Block”, “Element”, “Modifier”. It is a front-end methodology: a new way of thinking when developing Web interfaces. This article will elaborate on the theory as well as the practice of building websites at Yandex—one of the leading internet companies in Russia.

To begin, let’s first put BEM in some historical perspective.

We first began sketching out the internal front-end framework at Yandex around the year 2007, starting with a robust CSS naming convention, and a file system layout that was associated with it. Since the naming convention was well-structured, it seemed suitable to develop certain JavaScript helpers (to work with the DOM and CSS classes in particular, on a higher level of abstraction). We then used those approaches to build an internal library of UI components that could be shared among our various websites and rich applications, built using different technology stacks (XML/XSLT, Python/Django, Perl/TT2).

As our ambitions, complexity and performance requirements grew, we aimed at replacing XSLT and Perl templates with a JS-based declarative templating DSL, built on top of Node.js. Along with those efforts, we looked into simplifying development workflow and developed a bunch of command-line tools that already helped us manage front-end code on the file system, preprocess CSS and JavaScript code, and so on, and so forth.

Some parts of the BEM stack started as open source projects, while others (like the UI component library) are being gradually open sourced. Our goal is to publish most of them during 2012.

BEM is a toolkit that will help address and resolve front-end issues quickly and effectively. It is available in a range of reusable code libraries—all of them are hosted on Github and are completely open source.

BEM Principles

One of the most common examples of a methodology in programming is Object-Oriented Programming. It’s a programming paradigm embodied by many languages. In some ways, BEM is similar to OOP—a way of describing reality in code, with a range of patterns, and a way of thinking about program entities regardless of the programming languages being used.

We’ve used BEM principles to create a set of front-end development techniques and tools that allow us to build websites quickly and maintain them over a long period of time. The principles are the following:

Unified Data Domain

Imagine an ordinary website, like the one pictured below:

While developing such a website, it’s useful to mark out “blocks” from which the website consists of. For example, in this picture there are Head, Main Layout and Foot blocks. The Head in turn consists of Logo, Search, Auth Block and Menu. Main Layout contains a Page Title and a Text Block:

Giving each part of the page a name is very useful when it comes to team communication.

A project manager could ask:

• To make the Head bigger, or
• To create a page without a Search form in the Head.

An HTML guy could ask a fellow JavaScript developer:

• To make Auth Block animated, etc.

Let’s now take a closer look at what constitutes BEM:

Block

A block is an independent entity, a “building block” of an application. A block can be either simple or compound (containing other blocks).

Example
Search form block:

Element

An element is a part of a block that performs a certain function. Elements are context-dependent: they only make sense in the context of the block that they belong to.

Example

An input field and a button are elements of the Search Block:

Means Of Describing Pages And Templates

Blocks and elements constitute page content. Besides simply being present on a page, their arrangement is also important.

Blocks (or elements) may follow each other in a certain order. For example, a list of goods on a commerce website:

…or menu items:

Blocks may also be contained inside other blocks. For example, a Head Block includes other blocks:

Besides, our building blocks need a way to describe page layout in plain text. To do so, every block and element should have a keyword that identifies it.

A keyword designating a specific block is called Block Name. For example, Menu can be a keyword for the Menu Block and Head can be a keyword for the Head block.

A keyword designating an element is called Element Name. For example, each item in a menu is an element Item of the Menu block.

Block names must be unique within a project to unequivocally designate which block is being described. Only instances of the same block can have the same names. In this case, we can say that one block is present on the page twice (or 3, 4, times… etc.).

Element names must be unique within the scope of a block. An element can be repeated several times. For example, menu items:

Keywords should be put in a certain order. Any data format that supports nesting (XML, JSON) will do:

<b:page>
  <b:head>
    <b:menu>
      ...
    </b:menu>
    <e:column>
      <b:logo/>
    </e:column>
    <e:column>
      <b:search>
        <e:input/>
        <e:button>Search</e:button>
      </b:search>
    </e:column>
    <e:column>
      <b:auth>
        ...
      </b:auth>
    <e:column>
  </b:head>
</b:page>

In this example, b and e namespaces separate block nodes from element nodes.

The same in JSON:

{
  block: 'page',
  content: {
    block: 'head',
    content: [
      { block: 'menu', content: ... },
      {
        elem: 'column',
        content: { block: 'logo' }
      },
      {
        elem: 'column',
        content: [
          {
            block: 'search',
            content: [
              { elem: 'input' },
              {
                elem: 'button',
                content: 'Search'
              }
            ]
          }
        ]
      },
      {
        elem: 'column',
        content: {
          block: 'auth',
          content: ...
        }
      }
    ]
  }
}

Examples above show an object model with blocks and elements nested inside each other. This structure can also contain any number of custom data fields. We call this structure BEM Tree (by analogy with DOM tree).

Final browser markup is generated by applying template transformations (using XSL or JavaScript) to a BEM tree.

If a developer needs to move a block to a different place on a page, he does so by changing the BEM tree. Templates generate the final view themselves.

In our recent products we went with JSON as a page description format. It is then turned into HTML by a JS-based template engine. The tools we use are listed at the end of this article.

Block Independence

As projects grow, blocks tend to be added, removed, or moved around on the page. For example, you may want to swap the Logo with the Auth Block, or place the Menu under the Search Block.

To make this process easier, blocks must be Independent.

An Independent block is implemented in a way that allows arbitrary placement anywhere on the page—including nesting inside another block.

Independent CSS

From the CSS point of view it means that:

• A block (or an element) must have a unique “name” (a CSS class) that could be used in a CSS rule.
• HTML elements must not be used in CSS selectors (.menu td) as such selectors are inherently not context-free.
• Cascading selectors for several blocks should be avoided.

Naming for Independent CSS Classes

One of the possible naming schemes for CSS classes that satisfies said requirements is the following:

• CSS class for a block coincides with its Block Name.

<ul class="menu">
  ...
</ul>

• CSS class for an element is a Block Name and an Element Name separated by some character(s)

<ul class="menu">
  <li class="menu__item">
    ...
  </li>
  <li class="menu__item">
    ...
  </li>
</ul>

It’s necessary to include block name in a CSS class for an element to minimize cascading. It’s also important to use separators consistently to allow the tools and helpers to have unambiguous programmatic access to the elements.

Different naming schemes can be used. Take a look here for the naming convention we used.

Independent Templates

From the template engine’s perspective, block independence means that:

• Blocks and elements must be described in the input data.
  Blocks (or elements) must have unique “names” to make things like “Menu should be placed here” expressible in our templates.
• Blocks may appear anywhere in a BEM tree.

Independent templates for blocks

When coming across a block in a template, the template engine should be able to unambiguously transform it into HTML. Thus, every block should have a template for that.

For example, a template can look like this in XSL:

<xsl:template match="b:menu">
  <ul class="menu">
    <xsl:apply-templates/>
  </ul>
</xsl:template>

<xsl:template match="b:menu/e:item">
  <li class="menu__item">
    <xsl:apply-templates/>
  </li>
<xsl:template>

We are gradually discarding XSLT in our products in favor of our own JavaScript-based template engine XJST. This template engine absorbs everything we like about XSLT (we are fans of declarative programming), and implements it with JavaScript’s productivity on either the client or the server side.

We, at Yandex, write our templates using a domain-specific language called BEMHTML, which is based on XJST. The main ideas of BEMHTML are published in the BEM club on Ya.Ru (in Russian).

Blocks Reiteration

The second Menu Block can occur in the Foot Block of a website. Also, a Text Block can divide into two, separated by an advertisement.

Even if a block was developed as a singular unit, the same one can appear on a page at any moment.

In CSS related terms, this means:

• ID-based CSS selectors must not be used.
  Only class selectors satisfy our non-uniqueness requirement.

On the JavaScript side it means:

• Blocks with similar behavior are detected unequivocally—they have the same CSS classes.
  Using CSS class selectors allows for picking all blocks with a given name to apply the required dynamic behavior.

Modifiers For Elements And Blocks

We often need to create a block very similar to an existing one, but with a slightly altered appearance or behavior.
Let’s say, we have a task:

• Add another Menu in the Footer with a different layout.

To avoid developing another block that is only minimally different from an existing one, we can use a Modifier.

A Modifier is a property of a block or an element that alters its look or behavior. A modifier has both a name and a value. Several modifiers can be used at once.

Example:
A block modifier specifies background color

Example:
An element modifier changes the look of the “current” item

From the input data point of view:

• In a BEM tree, modifiers are properties of an entity that describes a block or an element.

For example, they can be attribute nodes in XML:

<b:menu m:size="big" m:type="buttons">

  ...
</b:menu>

The same expressed in JSON:

{
  block: 'menu',
  mods: [
   { size: 'big' },
   { type: 'buttons' }
  ]
}

From the CSS point of view:

• A modifier is an additional CSS class for a block or an element.

<ul class="menu menu_size_big menu_type_buttons">
  ...
</ul>

.menu_size_big {
  // CSS code to specify height
}
.menu_type_buttons .menu__item {
  // CSS code to change item's look
}

Element modifiers are implemented in the same fashion. Again, when writing CSS by hand, it’s very important to use separators consistently for programmatic access.

E.g., current menu item can be marked with a modifier:

<b:menu>
  <e:item>Index<e:item>
  <e:item m:state="current">Products</e:item>
  <e:item>Contact<e:item>
</b:menu>

{
  block: 'menu',
  content: [
    { elem: 'item', content: 'Index' },
    {
      elem: 'item',
      mods: { 'state' : 'current' },
      content: 'Products'
    },
    { elem: 'item', content: 'Contact' }
  ]
}

<div class="menu">
  <ul class="menu__layout">
    <li class="menu__layout-unit">
      <div class="menu__item">Index</div>
    </li>
    <li class="menu__layout-unit">
      <div class="menu__item menu__item_state_current">Products</div>
    </li>
    <li class="menu__layout-unit">
      <div class="menu__item">Contact</div>
    </li>
  </ul>
</div>

.menu__item_state_current {
  font-weight: bold;
}

Subject-Matter Abstraction

When many people work on a project, they should agree on a data domain and use it when naming their blocks and elements.

For example, a Tag Cloud block is always named Tags. Each of its elements is a Tag. This convention spreads across all languages: CSS, JavaScript, XSL, etc.

From the development process’ point of view:

• All participants operate on the same terms.

From the CSS point of view:

• CSS for blocks and elements can be written in a pseudo language that compiles down to CSS according to the naming convention.

  .menu {
    __layout {
      display: inline;
    }
    __layout-item {
      display: inline-block;
      ...
    }
    __item {
      _state_current {
        font-weight: bold;
      }
    }
  }

On the JavaScript side:

• Instead of using class selectors directly to find DOM elements, a special helper library may be used.

$('menu__item').click( ... );
$('menu__item').addClass('menu__item_state_current');
$('menu').toggle('menu_size_big').toggle('menu_size_small');

The naming convention for CSS classes of blocks and elements can change over the course of time. Using special JavaScript functions to access blocks and elements (and to work with their modifiers) makes it possible to change only these functions if the naming convention changes.

Block('menu').elem('item').click( ... );
Block('menu').elem('item').setMod('state', 'current');
Block('menu').toggleMod('size', 'big', 'small');

The code above is abstract. In real life we use the JavaScript core of i-bem block from the bem-bl block library: http://bem.github.com/bem-bl/sets/common-desktop/i-bem/i-bem.ru.html (described in Russian)

Blocks Consistency

A website has a Button block with certain dynamic behavior.

When a block is hovered, it changes its appearance.

A manager could ask:

• To use the same button on another page.

Having a CSS implementation of a block is not enough. Reusing a block also means reusing its behavior, described in JavaScript.

So a block must “know” everything about itself. To implement a block, we describe its appearance and behavior in all technologies being used—we call that Multilingualism.

Multilingual presentation is a description of a block in all the programming languages that are necessary to implement the view and the functionality of that block.

To have a block present on a page as a UI element, we need to implement it in the following techs:

• Templates (XSL, TT2, JavaScript, etc), which turn block declarations into HTML code.
• CSS that describes appearance of the block.

If a block has dynamic behavior, we add it to this list:

• A JavaScript implementation for the block.

Everything that constitutes a block is a technology, including images.

File System Representation For A Block

Unequivocal Placement of Code

File Naming

When a project is:

• Long-lived and under constant development.

If the development team:

• Consists of several people.
• Grows and changes.

Then being able to navigate the code base quickly is crucial.

Block code is easiest to find when it’s placed in files using the same naming scheme as the one we use for naming our entities:

menu.xsl
menu.js
menu.css

Expressing Blocks on a File System

There could be a task:

• To reuse some blocks from a previous project for a new one.

We want the procedure of block reuse to be as simple as possible—like simply copying the files, or using partial checkout of a repository from a “donor” project. In both cases, it is useful to have all of the files under the same directory:

menu/
  menu.xsl
  menu.js
  menu.css

File Structure of a Block

When working on a project we might need to change a block at some point.

A manager could ask:

• To change the color of the Current Menu Item, or
• To make the Menu react on hover.

A developer could ask their colleague:

• To help with Search Form styling for IE.

To understand where the relevant code is located, follow these (or similar) rules:

• Block code is placed in a separate directory.
• Directory name matches block name.
• Implementation is placed under this directory.
• Elements are placed in subdirectories under the block directory.
• Directory name matches element name.
• Implementation is placed under this directory.
• Modifiers are placed in subdirectories under the block directory.
• Directory name matches modifier name.
• Implementation is placed under this directory.
• File name includes both key and value of the modifier (again, for programmatic access).

Example
File structure of a Menu block:

menu/
  __item/
    _state/
      menu__item_state_current.css
      menu__item_state_current.xsl
    menu__item.css
    menu__item.xsl
  menu.css
  menu.js
  menu.xsl

Maintaining such file structure manually is, quite obviously, inconvenient. So we’ve developed BEM Tools to handle the burden. These tools help with creating the directory structure, placing files, generating placeholder content, etc.

Grouping Blocks in Directories

Big internet portals often need to reuse the same blocks across different websites.

There could be a task:

• To create the same Footer on all the portals’ websites, or
• To create a new project using blocks from the existing websites.

Working for a Web design agency often means that one has to use typical solutions for typical Web pages.

A project manager could ask you:

• To create an order page with a Web form as on the previous project.

We have to do these tasks while preferably avoiding copying blocks around manually. So it’s nice to have a repository of shared blocks that can be linked to a project. Blocks should then be united under a single directory for that.

Such a directory is usually called Blocks.

E.g.

blocks/
  foot/
  head/
  menu/
  page/
  search/

That directory can be linked to another project straight from the version control system, so that we can make changes to shared blocks in a single location.

Levels Of Definition

If a group of blocks (united under one directory) is linked to a project directly (via a partial checkout, svn:externals, etc.), then every change committed to these blocks influences all projects.

When developing a website based on an existing one, we might want:

• To enlarge the font in the Head on site A without affecting site B.
• To add animation when showing a drop-down menu.

To do so, we need to be able to define or redefine blocks in different technologies for a specific website only, or for certain pages only. This can be achieved using Definition Levels.

A Definition Level is a set of blocks grouped in one directory.

An implementation of every block from the library can be changed (or completely redefined) at project level.

From page-building process’ perspective:

• When building a page, we can set a list of levels (directories) to use their blocks on that page. E.g., build-page -l blocks-common -l blocks-my my-page.html

From the file structure point of view:

• A project can have any number of levels. But only the levels that are evaluated during the build will be present on the page. It is possible to specify different sets of definition levels for different parts of the website.

On the JavaScript side:

• We need to define dynamic behavior of a page in declarative style. Final behavior is gathered from different definition levels. E.g.,

/* blocks-common/dropdown/dropdown.js */
Block('dropdown', {
  init: function() {
    ...
  }
});

/* blocks-my/dropdown/dropdown.js */
Block('dropdown', {
  init: function() {
    this.__base();
    ...
  }
});

From the viewpoint of a template engine:

• To be able to not only define, but to redefine a template, one needs to apply a preceding template implementation.
  E.g., for XSL:

<xsl:template match="b:head">
  <div> <!-- Node for extra design -->
    <xsl:apply-imports/>
  </div>
</xsl:template>

From the architectural point of view:

• When developing a portal of several websites, we can extract a block library that serves as one of the definition levels for all the websites which are part of the portal. The blocks for a specific website will form another level.
• The same repo can hold blocks of both desktop and mobile versions.
  Such a project will have the following levels: common, mobile, desktop. Different combinations of these levels give the resulting implementation, required by specific pages.

Open source block library bem-bl (in development) is an example of having several definition levels in one repository.

Building A Page

Working in terms of blocks means having a Subject-Matter Abstraction. This abstraction is for developers only, and browsers will get a compiled version of the code.

So we have Code For People and Code For Browsers—they are not the same.

• Programmers code blocks—browsers get the code for the whole page.

To turn Code For People into Code For Browsers we Build a page.

Building A Page means generating HTML, CSS, and JavaScript code from a page declaration (written in XML or JSON) by applying implementations of declared blocks.

On the CSS side:

• All CSS files are combined into a “single page” CSS file.
  Despite the fact that CSS for every block, element or modifier is stored in separate files, we don’t have to link these files to the page as is. It’s possible to collect all the required CSS implementations into one file.
  This also solves the well-known “number of imports” issue in IE, and decreases the number of HTTP requests. For combining CSS we use borschik.
• Browser gets minimized code.
  When building CSS, we can minimize and optimize CSS code using the CSSO utility, for example.
• Each browser can get CSS code written especially for it.
  It is also possible to divide CSS implementations for different browsers and deliver only the code needed for each browser.
  setochka—currently in prototype can be used for that.

From the JavaScript point of view:

• Similarly to CSS, JavaScript files can be combined into one.

From the template engine’s point of view:

• Only needed templates are included.
  Final set of templates that are used for displaying a page includes only the templates for required blocks. This boosts template performance and reduces the likelihood of side effects.

From the viewpoint of development process:

• Robots serve people (not the other way around).
  Developer writes code as they see fit. “Robots” take (some) care of performance by optimizing the code (together with making it unreadable) when building a page.

In terms of work organization:

• Division of labor.
  We have developers working on the core framework (compilers, tools, performance); library developers, who maintain the block library; application developers, who develop websites using the framework.

We use BEM tools to build pages.

How to Automate the Building Process?

The usage of bem tools requires to run several commands for each page whenever page input data or blocks implementation are changed. As a result of these commands, you get CSS and JavaScript files for the page, page’s template, and if you are developing static pages, the HTML code of your page.

To avoid running these commands manually, there is also the GNUmakefile, which was written for a project that includes the instructions on how to build pages.
You can find an example of such a file in the test project bem-bl-test.

But the usage of GNU Make has a list of problems:

• You have to run it every time you have changed something.
• Every time you run gmake, it reads the information from a disk. So the compilation process could not be fast.
• The pages you build not only depend on the content of block files, but on their file structure as well. But it’s impossible to write a gmake goal dependency in these terms.

So we’d like to create something to replace GNU Make for the process of page building. This will be both a development server and a tool to build production files. Bem Server will be run in a project root directory, and give HTTP response with the page files built (so you won’t need to run gmake manually after each change).
Besides, it will be able to watch the files (the adding and removing of them) via fs.FSWatcher that help to chache results efficiently.

BEM Server is a subcommand of bem-tools. Currently it can run an HTTP server, apply BEMhtml templates to BEMjson data and inline CSS imports using borschik utility.

Real Examples

Yandex is a large (mostly Russian) company that use BEM methodology to develop its services.

BEM methodology does not request that you use a certain framework. You also don’t have to use BEM for all the technologies you have on your pages (but that would be the most efficient).

All the services of Yandex have BEM in their CSS and JavaScript code and XSL templates for their pages. E.g.,

• Yandex.Maps
• Yandex.Images
  This is a service for searching images in the Internet.
• Yandex.Video
  This is a service for both hosting and searching images.
• Yandex.Auto
• Turkish Yandex

Some services don’t use XSL templates, building their pages with our newest template product, Bemhtml template engine which was mentioned above. These are the following services:

• Yandex Search
  or Yandex Search in English
• Mobile Apps Search
  This website is to look under smartphones.

There are also other companies that use BEM methodology.

For example, the guys at Mail.ru partly use BEM for their services. Some blocks on their pages are BEM-based in terms of CSS code. They also have their own C++ template engine, and write block templates according to this methodology.

More examples:

• Rambler.News
• HeadHunter
• TNK Racing Team

You also may be interested in websites that use bem-bl block library (in development):

• Mikhail Troshev vCard
  Source code is hosted at GitHub: https://github.com/mishanga/bem-vcard
• BEM based web form with JZ validation

Related Links

Libraries

• An open source block library bem-bl (in development).

Tools

• Tools for working with files according to BEM methodology.
• Borschik
  A utility for building static files into one.
• Setochka, a working prototype
  A tool for dividing CSS into several browser-specific files.
• CSSO
  A utility that performs advanced, structural optimizations of CSS code.

Additional Information

• How to use BEM! outside Yandex (screencast presentation).
• Presentations and workshops video (in Russian).
• BEM club on Ya.Ru (in Russian).
• BEM on Facebook.

(jvb)

© Varvara Stepanova for Smashing Magazine, 2012.

Smashing Magazine Feed

Clever graphic designers love to use typography to explore the interaction between the look of type and what type actually says. In communicating a message, a balance has to be achieved between the visual and the verbal aspects of a design.

Sometimes, however, designers explore the visual aspect of type to a much greater extent than the verbal. In these cases, the visual language does all the talking. This article explores when the visual elements of typography speak louder than words.

Cal Swan, author of Language and Typography, makes this point well when he says, “These two distinct areas often come together in practice as there is clearly a very strong relationship between the conception of the words as a message and their transmission in visible form.”

To avoid any misunderstanding, let’s clarify what the terms “visual language” and “verbal language” mean. In professional graphic design, visual language refers to the meanings created by the visual appearance of both text and image. In this article, the term “visual language” refers to the character and significance created by carefully selected typography. Verbal language is the literal meaning of words, phrases and sentences.

In this first of a two-part series, we will look at the powerful effect that typography has in taking control of meaning. We will discuss a range of examples, from verbal language that inspires and shapes visual treatment to visual language that dominates verbal meaning. The implications of typographic choices in meaning and interpretation will also be examined. And we will show how the same message can be presented in a number of ways to convey and encourage a diversity of responses.

We all have different cultural backgrounds and experiences that affect our perception of type one way or another. So, regardless of the designer’s skill and effort, a number of uncontrollable aspects remain, including the viewer’s perception, expectations, knowledge, experiences and preferences. And while accounting for all such unpredictable responses to type is impossible, awareness is critical.

For starters, let’s look at an interesting piece from an ad campaign by Greenpeace:

The name style from Greenpeace’s campaign to raise awareness of the impact of deforestation.

In this ad, you are confronted with the familiar name style of one of the world’s favorite chocolate bars, the Kit Kat. The type style and letterform proportions and certainly the color, shape and angle all create an instantly recognizable connection with the Kit Kat brand — so much so that you would be forgiven for seeing the name Kit Kat before reading and taking in the actual written message. Your familiarity with the brand is an instant draw, and appreciating the change of message might take you a second look.

Manipulating Feelings and Reactions

The visual language established when designing with type can bring into play not only emotions, but also physical responses. The following examples are simple illustrations of the varied and emotive effects and highly dominant control that can be achieved by changing the visual language of a message, while still presenting the same verbal language.

This first of a pair of illustrations shows a single large bold word, set in lowercase and closely kerned. The positioning in the frame makes the word dominant and loud, and the message comes across as enthusiastic, friendly and confident. The person speaking is pleased to see you and is coming towards you with a big smile on their face.

The second illustration contrasts dramatically with the first, despite featuring the exact same greeting. The font, case, scale, color and positioning all suggest a considerably more distant and hesitant meeting. In fact, you would be forgiven for thinking that the person speaking here is not at all sure they even want to acknowledge you and would have preferred to ignore you completely.

Reading these examples aloud helps us instantly appreciate the different effects of visual language. If you read the first example out loud, it would be a loud enthusiastic call that exudes genuine delight, friendliness and openness. Reading aloud the second example, the exact same word, it would be delivered in a much quieter tone, an almost hesitant voice, lacking the assurance and delight of the first. There is an infinite range of typographic alternatives that achieve subtle or dramatic changes in volume and tone of voice.

Making The Most Of Visual Language

Verbal language is often used to inspire and shape design and typography in order to get a message across, with the goal being to make the most of the viewer’s reaction. Carefully mixing a design’s implication with literal meaning can lead to a memorable outcome. The following designs are great examples of the effects that can be achieved by employing verbal language that has helped to inspire a visual treatment.

Our first illustration is taken from the work of renowned American graphic designer Herb Lubalin, who was described in a monograph about him by Gertrude Snyder and Alan Peckolick as being “a tenacious typographer, whose graphic concept employed copy, art and typography, and he used available production methods to underline the drama inherent in the message. Idea preceded design.”

Given the subject of this article, this quote is especially fitting. It shows Lubalin as a designer who valued the combined communicative power of language, typography and composition. The book goes on to explain that he used production methods not just for effect but also as a way to emphasize the meaning and message of a project. In Lubalin’s time, these decisions would have entailed manual labor, posing greater limitations than we face today. Finally, this quote confirms that, for Lubalin, concept was of paramount importance and always came before design.

One of his many entries in the Visual Graphics Corporation’s 1964 competition features a carefully selected quote by US editor and writer Caskie Stinnett.

One of Lubalin’s many typographically expressive designs that have become iconic and inspiring to generations of graphic designers. (Image: Peter Gabor)

Using delicate and well-considered composition of typographic detailing, Lubalin has succeeded in making an unpleasant message seem attractive and pleasing. The quote states “A diplomat is a person who can tell you to go to hell in such a way that you actually look forward to the trip.” The focal point of this statement, being told to “go to hell,” is shown in an elaborate and elegant calligraphic form, enabling this mildly offensive statement to be mistaken for something that could be looked forward to with great anticipation at first sight.

The work of hand-lettering designer Alison Carmichael provides a range of current examples that beautifully illustrate the powerful effect of typography when it takes control of meaning. One such design is her award-winning self-promotional ad for the Creative Circle. Carmichael’s hand-lettering is engraved and inked in an elaborate style on the lid of an old school desk. At first sight, we seem to be looking at a beautiful, possibly historic, work of gothic lettering; seconds later, reality strikes and the rather unpleasant meaning of the text becomes clear.

Award-winning self-promotional ad by Alison Carmichael for the Creative Circle.

Type Tarts is a UK initiative established to raise awareness of the plight of workers trafficked into the sex industry. Contributing designers are asked to send type-oriented “Tart cards” for exhibition. Many London prostitutes advertise their services by displaying promotional cards in phone boxes. Even in the age of the Internet and mobile phones and in the face of police crackdowns, these cards have achieved a cult following, being highly praised and collected as art.

Both examples below use expressive typefaces and type manipulation to visually reinforce the meanings of the provocative text. In the context of the campaign, figuring out the meaning of the cards is easy enough.

“Nice and Tight” by Duncan Bancroft

“Big and Bouncy” by Peter Fletcher

Another stunning example of the visual language of type is by American designer Jason Munn, well known for his highly acclaimed music posters. This example for Liars is mainly typographic, with sections of each letter cleverly removed so that the viewer doesn’t get the full picture. What is the truth? The choice of typeface is also significant; its extreme contrasts of thick and thin strokes point to the contrast between truth and lies.

Jason Munn’s poster for the US band Liars

The designs above use type to reinforce the meaning of their statements. Meanwhile, the British Battleaxe Collection’s visuals for a proposed range of type-based tea towels feature quotes from strong UK female comedy characters. These designs are doing something slightly different; type is used primarily to reinforce the agenda and assertive tone of the speakers.

British Battleaxe typographic tea towel design, inspired by the voice of the lead character in the BBC sitcom Keeping Up Appearances. (Credit: Bright Pink Communication Design)

The example above features a quote from the BBC sitcom Keeping Up Appearances. The words themselves are spoken by the program’s main character — the eccentric, social-climbing and bossy Hyacinth Bucket, a lady in her 60s with grand aspirations. Typographically, the letterforms have been selected and grouped to emphasize the desires of the character. The words “I want” and “my” stand out because of a dramatic change of scale. “Superiors” is emphasized with capital letters, whereas “your” is reduced in size and given lowercase letters, thus downgrading the importance of whom she is talking to, in keeping with the character’s bossy nature and tone of voice when speaking to her milkman.

In this design, the typeface has been dictated by the character’s tone of voice. The serif typeface with its stylish italics and capital letters captures the meaning and cultural context of this statement from a “woman of a certain age.”

Typography is used to communicate tone of voice, personality, age, gender and mood, and it can be easily manipulated. If, instead of this serif font that so successfully represents this woman’s personality, we used a slab serif, suddenly the character changes, as does the emotional impact of the statement. Judging simply by the font, the narrator is no longer definitively female; she is no longer in their mid-60s, and her mood is not merely pompous, but could be described as verging on angry. It’s a great example of how quickly the tone can shift with a simple change of typeface.

A different typographic treatment of this tea towel clearly manipulates the tone of voice and possibly even changes the gender of the speaker. (Credit: Bright Pink Communication Design)

The Power Of Typography Cannot Be Underestimated

All the examples discussed in this article demonstrate that typographic treatment works alongside verbal language to create, enhance and alter meaning. While the aesthetic value of design is always important, the significance of type in influencing meaning should not be underestimated.

The role — and, in fact, the obligation — of the designer in establishing a tone that adds meaning to the verbal message is a matter of regular debate. Many graphic designers and academics argue that the designer has a responsibility to add “flavor” to their work, not only helping to convey and enhance meaning, but also making the message enjoyable and encouraging to “read” and also memorable.

In the second part of this article, we’ll continue looking at the relationship between visual and verbal language. We’ll touch briefly on the structure and semiotics of language, as well as showcase some remarkable examples, all helping to explain why subtle typographic changes make all the difference.

Further Resources

• The Herb Lubalin Study Center of Design and Typography
• Herb Lubalin Archive at Cooper Union, Flickr
• Reading Images: The Grammar of Visual Design, Gunther Kress and Theo van Leeuwen.

(al) (il)

Image credits of image used for Smashing Magazine’s frontpage.

Note: A big thank you to our fabulous Typography editor, Alexander Charchar, for preparing this article.

© Carolyn Knight, Jessica Glaser for Smashing Magazine, 2012.

Smashing Magazine Feed

href=”http://netdna.webdesignerdepot.com/uploads/2012/04/thumb4.jpg”> class=”alignleft size-full wp-image-32116″ title=”thumb” src=”http://netdna.webdesignerdepot.com/uploads/2012/04/thumb4.jpg” alt=”tweets of the week april 9 – april 15 2012″ width=”200″ height=”160″ />Every week we tweet a lot of interesting stuff highlighting great content that we find on the web that can be of interest to web designers.

The best way to keep track of our tweets is simply to follow us on Twitter, however, in case you missed some here’s a quick and useful compilation of the best tweets that we sent out this past week.

Note that this is only a very small selection of the links that we tweeted about, so don’t miss out.

To keep up to date with all the cool links, simply follow us rel=”nofollow” href=”http://www.twitter.com/designerdepot” target=”_blank”>@DesignerDepot id=”more-32113″>

Selling Isn’t Just for Sales People title=”http://ow.ly/a9y0E” rel=”nofollow” href=”http://t.co/7jXpFCdm” target=”_blank”>http://ow.ly/a9y0E *Great read

src=”http://netdna.webdesignerdepot.com/uploads6/tweets-41512/selling.jpg” alt=”" />

class=”spacer_” />

Today’s Internet world isn’t what it used to be title=”http://ow.ly/a9Qmo” rel=”nofollow” href=”http://t.co/gAdpOmsD” target=”_blank”>http://ow.ly/a9Qmo Case Study on Building for Mobile First

src=”http://netdna.webdesignerdepot.com/uploads6/tweets-41512/mobilefirst.jpg” alt=”" />

class=”spacer_” />

Diptych, Triptych & Ntych – a pretty name for an Automation Tool For Photoshop – Tych Panel title=”http://ow.ly/a9RI2″ rel=”nofollow” href=”http://t.co/8zD9UwuA” target=”_blank”>http://ow.ly/a9RI2

src=”http://netdna.webdesignerdepot.com/uploads6/tweets-41512/tychpanel.jpg” alt=”" />

class=”spacer_” />

Check out the 11 Essential Elements of a Well-Designed Marketing Ebook title=”http://ow.ly/a9SCB” rel=”nofollow” href=”http://t.co/e8DIImpr” target=”_blank”>http://ow.ly/a9SCB

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/tweets-41512/marketingebook.jpg” alt=”" />

class=”spacer_” />

From shoes to bikes: awesome packaging work by Jesse Lindhorst title=”http://ow.ly/a9SVE” rel=”nofollow” href=”http://t.co/0UMlqC6B” target=”_blank”>http://ow.ly/a9SVE

src=”http://netdna.webdesignerdepot.com/uploads6/tweets-41512/jesselindhorst.jpg” alt=”" />

class=”spacer_” />

16 Ways How Educators Use Pinterest [Infographic] title=”http://pinterest.com/pin/267682771571998600/” rel=”nofollow” href=”http://t.co/3N0HI4T7″ target=”_blank”>http://pinterest.com/pin/267682771571998600/

src=”http://netdna.webdesignerdepot.com/uploads6/tweets-41512/educators.jpg” alt=”" />

class=”spacer_” />

Hey there web designer, have no fear of print design >> title=”http://ow.ly/aaZQN” rel=”nofollow” href=”http://t.co/ZxMKaZc6″ target=”_blank”>http://ow.ly/aaZQN

src=”http://netdna.webdesignerdepot.com/uploads6/tweets-41512/print.jpg” alt=”" />

class=”spacer_” />

Incredibox is a wonderful website which debuts an interactive, character-based music sequencer title=”http://ow.ly/aaSh8″ rel=”nofollow” href=”http://t.co/L5jFyj97″ target=”_blank”>http://ow.ly/aaSh8

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/tweets-41512/incredibox.jpg” alt=”" />

class=”spacer_” />

Foldy960 is just a responsive 960 grid that you’ll like title=”http://ow.ly/aaZTE” rel=”nofollow” href=”http://t.co/FIaQ1upw” target=”_blank”>http://ow.ly/aaZTE

src=”http://netdna.webdesignerdepot.com/uploads6/tweets-41512/foldy960.jpg” alt=”" />

class=”spacer_” />

Take a look at Gareth Hague’s make of the Prada alphabet – Candy Typeface title=”http://ow.ly/aaYok” rel=”nofollow” href=”http://t.co/rlX8Szl6″ target=”_blank”>http://ow.ly/aaYok

src=”http://netdna.webdesignerdepot.com/uploads6/tweets-41512/pradacandy.jpg” alt=”" />

class=”spacer_” />

Fascinating video work by video artist Sabrina Ratté, “Plink Flojd”, in collaboration with David Quiles Guillo title=”http://ow.ly/aaYzg” rel=”nofollow” href=”http://t.co/dnGfv0d4″ target=”_blank”>http://ow.ly/aaYzg

classid=”clsid:d27cdb6e-ae6d-11cf-96b8-444553540000″ width=”616″ height=”454″ codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0″> name=”allowfullscreen” value=”true” /> name=”allowscriptaccess” value=”always” /> name=”src” value=”http://vimeo.com/moogaloop.swf?clip_id=38886608&server=vimeo.com&show_title=0&show_byline=0&show_portrait=0&color=00adef&fullscreen=1&autoplay=0&loop=0″ /> type=”application/x-shockwave-flash” width=”616″ height=”454″ src=”http://vimeo.com/moogaloop.swf?clip_id=38886608&server=vimeo.com&show_title=0&show_byline=0&show_portrait=0&color=00adef&fullscreen=1&autoplay=0&loop=0″ allowscriptaccess=”always” allowfullscreen=”true”>

class=”spacer_” />

Improve your Editorial Workflow in Multi-Author title=”#WordPress” href=”https://twitter.com/#%21/search/%23WordPress”>#WordPress Blogs – title=”http://ow.ly/acLwL” rel=”nofollow” href=”http://t.co/Av7u1K2X” target=”_blank”>http://ow.ly/acLwL title=”#howto” href=”https://twitter.com/#%21/search/%23howto”>#howto /via rel=”nofollow” href=”https://twitter.com/#%21/wpbeginner”>@wpbeginner

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/tweets-41512/editorialworkflow.jpg” alt=”" />

class=”spacer_” />

Now with 170 million users, Google+ gets a complete redesign title=”http://ow.ly/ad5aj” rel=”nofollow” href=”http://t.co/wxbGOEYE” target=”_blank”>http://ow.ly/ad5aj Less is more? What do you think?

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/tweets-41512/gplus.jpg” alt=”" />

class=”spacer_” />

Brilliantly creative brand identity by Paul Currah for Harry Ted title=”http://ow.ly/ad3v9″ rel=”nofollow” href=”http://t.co/jt9cWePo” target=”_blank”>http://ow.ly/ad3v9

src=”http://netdna.webdesignerdepot.com/uploads6/tweets-41512/harryted.jpg” alt=”" />

class=”spacer_” />

Did you know you can animate elements using media queries as the trigger? title=”http://ow.ly/aeiwa” rel=”nofollow” href=”http://t.co/guNk6XMT” target=”_blank”>http://ow.ly/aeiwa title=”#CSS” href=”https://twitter.com/#%21/search/%23CSS”>#CSS

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/tweets-41512/cssanimations.jpg” alt=”" />

class=”spacer_” />

Automatic responsive images in WordPress title=”http://ow.ly/aejhP” rel=”nofollow” href=”http://t.co/sdOZY6hL” target=”_blank”>http://ow.ly/aejhP – great insights

src=”http://netdna.webdesignerdepot.com/uploads6/tweets-41512/responsiveimages.jpg” alt=”" />

class=”spacer_” />

How to Add Simple and Elegant Footnotes in Your title=”#WordPress” href=”https://twitter.com/#%21/search/%23WordPress”>#WordPress Blog Posts – title=”http://ow.ly/aejX8″ rel=”nofollow” href=”http://t.co/SmNrRydy” target=”_blank”>http://ow.ly/aejX8 /via rel=”nofollow” href=”https://twitter.com/#%21/wpbeginner”>@wpbeginner

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/tweets-41512/footers.jpg” alt=”" />

class=”spacer_” />

Ultra Realistic Oil Paintings by Pedro Campos title=”http://ow.ly/aekDT” rel=”nofollow” href=”http://t.co/N2rkSfp6″ target=”_blank”>http://ow.ly/aekDT We are utterly impressed!

src=”http://netdna.webdesignerdepot.com/uploads6/tweets-41512/oilpaintings.jpg” alt=”" />

class=”spacer_” />

In search for some Pinterest icons? These are pretty cool: title=”http://ow.ly/aekKF” rel=”nofollow” href=”http://t.co/Ou9gA9cz” target=”_blank”>http://ow.ly/aekKF

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/tweets-41512/pinteresticons.jpg” alt=”" />

class=”spacer_” />

Must-Read: Why Making Everyone Happy Is a Bad Idea title=”http://ow.ly/aelms” rel=”nofollow” href=”http://t.co/BB4mzM1r” target=”_blank”>http://ow.ly/aelms

src=”http://netdna.webdesignerdepot.com/uploads6/tweets-41512/happy.jpg” alt=”" />

Want more? No problem! Keep track of all our tweets by following us rel=”nofollow” href=”http://www.twitter.com/designerdepot” target=”_blank”>@DesignerDepot

/>
width=”100%” style=”border-top:1px solid #d7d7d7; border-bottom:1px solid #d7d7d7;” height=”20″>
valign=”center”> href=”http://www.mightydeals.com/deal/photoshop-actions-inventicons.html?ref=inwidget”> face=”Arial” size=”3″ color=”#e64f32″>9 Amazing Photoshop Actions + 198 Royalty Free Icons – only ! width=”90″> href=”http://www.mightydeals.com/?ref=inwidget”> /> src=”http://mightydeals.com/web/images/widget-logo.png” height=”40″ width=”90″ border=”0″ /> />

href=”http://www.webdesignerdepot.com/2012/04/our-favorite-tweets-of-the-week-apr-9-apr-15-2012/”>Source

Webdesigner Depot

MVVM (Model View ViewModel) is an architectural pattern based on MVC and MVP, which attempts to more clearly separate the development of user-interfaces (UI) from that of the business logic and behaviour in an application. To this end, many implementations … href=”http://addyosmani.com/blog/understanding-mvvm-a-guide-for-javascript-developers/”>Continue reading class=”meta-nav”>→
AddyOsmani.com | Articles for developers

This tutorial deals with plain photo editing, involving the deepening of colors in an image and enhancing their genuine appeal without changing the original image by too much.

Advertise here via BSA

Good-Tutorials: Newest Tutorials

Below is what happened in search today, as reported on Search Engine Land and from other places across the web. From Search Engine Land: Reports: Google CPCs Continue To Decline And Yahoo/Bing’s Rise While Spend Overall Grows In Q1 By all accounts, paid search spending rose in Q1 2012 as…



Please visit Search Engine Land for the full article.

Search Engine Land: News & Info About SEO, PPC, SEM, Search Engines & Search Marketing

class=”alignleft size-full wp-image-31820″ title=”thumb” src=”http://netdna.webdesignerdepot.com/uploads/2012/04/thumb.jpg” alt=”whats new for designers april 2012″ width=”200″ height=”160″ />The April edition of what’s new for web designers and developers includes new web apps, jQuery plugins, blogging platforms, coding resources, productivity and business tools, responsive design resources, and some really great new fonts.

Many of the resources below are free or very low cost, and are sure to be useful to a lot of designers and developers out there.

As always, if we’ve missed something you think should have been included, please let us know in the comments.

And if you have an app or other resource you’d like to see included next month, tweet it to href=”http://twitter.com/cameron_chapman”>@cameron_chapman for consideration. id=”more-31817″>

Story Wheel

href=”http://storywheel.cc/”>Story Wheel is a new app that lets you take your Instagram photos and tell the story behind them. Just connect it to your Instagram account, then record your story, and create a nostalgic slideshow you can share with the world.

href=”http://storywheel.cc/”> src=”http://netdna.webdesignerdepot.com/uploads6/newapps-4-12/storywheel.jpg” alt=”" />

class=”spacer_” />

TriggerApp

href=”http://www.triggerapp.com/”>TriggerApp is a project, team, and client management app that includes invoicing. It’s cloud based and powerful, yet incredibly easy to use.

href=”http://www.triggerapp.com/”> class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/newapps-4-12/triggerapp.jpg” alt=”" />

class=”spacer_” />

Anchor CMS

href=”http://anchorcms.com/”>Anchor CMS is a PHP5-based content management system created specifically for art-directed blogging. It has a powerful but simple theming engine, an uncluttered admin interface, and is completely free.

href=”http://anchorcms.com/”> class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/newapps-4-12/anchorcms.jpg” alt=”" />

class=”spacer_” />

Ingrid

href=”http://piira.se/projects/ingrid/”>Ingrid is a fluid, lightweight CSS layout system that makes it easier to design re-flowing responsive layouts. It’s extendable and easy to implement, and doesn’t get in the way of your creativity.

href=”http://piira.se/projects/ingrid/”> src=”http://netdna.webdesignerdepot.com/uploads6/newapps-4-12/ingrid.jpg” alt=”" />

class=”spacer_” />

Instagram for Android

href=”http://instagr.am/android/”>Instagram has long been available for iOS, and it’s definitely among the top apps Android users seemed to want their own version of. Now it’s here: Instagram for Android. It’s a fast and fun way to share your photos. Just take a picture, choose a filter, and then post to Instagram (you can share to Facebook, Twitter, and Tumblr, too).

href=”http://instagr.am/android/”> src=”http://netdna.webdesignerdepot.com/uploads6/newapps-4-12/instagram.jpg” alt=”" />

class=”spacer_” />

15Five

href=”http://15five.com/”>15Five is a web app that makes it easy for upper-level management to keep track of what their employees are doing, without being obtrusive. Employees just take 15 minutes at the end of each week to write a report that can be read in 5 minutes. The reports can then be condensed into a single report for the CEO (or other top-level managers).

href=”http://15five.com/”> src=”http://netdna.webdesignerdepot.com/uploads6/newapps-4-12/15five.jpg” alt=”" />

class=”spacer_” />

Billable

href=”http://billable.me/”>Billable is probably the easiest to use invoicing app on the market. Just edit the invoice that appears on the screen when you load the page, and then either save it (you can only save the current invoice, from what I gathered), export it as a PDF, or print it.

href=”http://billable.me/”> src=”http://netdna.webdesignerdepot.com/uploads6/newapps-4-12/billable.jpg” alt=”" />

class=”spacer_” />

Invoicebus

href=”https://invoicebus.com/”>Invoicebus is an easy to use app that lets you create invoices and quotes via a WYSIWYG editor. It supports all currencies and partial payments, lets you email docs or save them as PDFs, send payment reminders and get alerts when a client views a document you sent, and more. There’s a free plan that allows up to 3 clients, or paid plans for more.

href=”https://invoicebus.com/”> src=”http://netdna.webdesignerdepot.com/uploads6/newapps-4-12/invoicebus.jpg” alt=”" />

class=”spacer_” />

Wookmark jQuery Plugin

href=”http://www.wookmark.com/jquery-plugin”>Wookmark is a jQuery plugin for creating dynamic column grid layouts that automatically rearrange based on the browser’s viewport. Just download the JS file, include it on your site (along with jQuery), and run it on your content. From there, you can adjust the container, offset, and itemWidth.

href=”http://www.wookmark.com/jquery-plugin”> class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/newapps-4-12/wookmark.jpg” alt=”" />

class=”spacer_” />

Adipoli jQuery Image Hover Plugin

href=”http://jobyj.in/adipoli/”>Adipoli is a simple jQuery plugin that gives you a variety of transitions for hovering over images. There are more than 20 transitions available, including grayscale to color, popouts, and many more!

href=”http://jobyj.in/adipoli/”> class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/newapps-4-12/adipoli.jpg” alt=”" />

class=”spacer_” />

Backstretch

href=”http://srobbin.com/jquery-plugins/backstretch/”>Backstretch is a jQuery plugin for adding a dynamically resized background image to your pages. It resizes as the browser viewport changes, making it ideal for responsive designs.

href=”http://srobbin.com/jquery-plugins/backstretch/”> src=”http://netdna.webdesignerdepot.com/uploads6/newapps-4-12/backstretch.jpg” alt=”" />

class=”spacer_” />

PageScroller

href=”http://pagescroller.com/”>PageScroller lets you add animated page targets to your website for smooth scrolling between content. You can choose to have left or right side nav, top nav, and next and previous buttons, and it comes with eight elegant skins!

href=”http://pagescroller.com/”> class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/newapps-4-12/pagescroller.jpg” alt=”" />

class=”spacer_” />

Rhinoslider

href=”http://rhinoslider.com/”>Rhinoslider is a flexible jQuery slider/slideshow plugin. It offers multiple effects, each of which can be applied to run in different directions. New effects can be created by adjusting the settings of existing effects.

href=”http://rhinoslider.com/”> class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/newapps-4-12/rhinoslider.jpg” alt=”" />

class=”spacer_” />

CSS3 Responsive Slider

href=”http://csscience.com/responsiveslidercss3/”>CSS3 Responsive Slider is an image slider/carousel that resizes automatically based on the browser viewport, all without JavaScript! It works in Firefox, Chrome, Opera, and Safari, with partial support in IE9.

href=”http://csscience.com/responsiveslidercss3/”> src=”http://netdna.webdesignerdepot.com/uploads6/newapps-4-12/css3responsiveslider.jpg” alt=”" />

class=”spacer_” />

Fontomas

href=”http://nodeca.github.com/fontomas/”>Fontomas is an icon font generator that makes it easy to create a font that only contains the icons you want to use. Just select your icons, rearrange them, and then save. You can even load fonts (SVG/Cufon) from your own computer.

href=”http://nodeca.github.com/fontomas/”> class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/newapps-4-12/fontomas.jpg” alt=”" />

class=”spacer_” />

Intype

href=”http://inotai.com/intype/”>Intype is a text editor for Windows that offers advanced editing features like smart column selection, snippets, and multi-selection. Extension bundles let you add snippets, themes, or even language grammars (there are several already supported, including HTML, JavaScript, CSS, PHP, Ruby, and more).

href=”http://inotai.com/intype/”> class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/newapps-4-12/intype.jpg” alt=”" />

class=”spacer_” />

SearchMeme

href=”http://www.egrappler.com/jquery-plugin-for-on-demand-search-box-seacrhmeme/”>SearchMeme is a free jQuery plugin that generates a small search button that expands into a text box when clicked on. Place it in your sidebar, your header, or anywhere else on your site.

href=”http://www.egrappler.com/jquery-plugin-for-on-demand-search-box-seacrhmeme/”> class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/newapps-4-12/searchmeme.jpg” alt=”" />

class=”spacer_” />

SnipSave

href=”http://snipsave.com/”>SnipSave lets you create an account and save code snippets from anywhere. You can then edit or delete those code snippets from the easy-to-use interface.

href=”http://snipsave.com/”> src=”http://netdna.webdesignerdepot.com/uploads6/newapps-4-12/snipsave.jpg” alt=”" />

class=”spacer_” />

Akordeon

href=”http://www.egrappler.com/a-stylo-modern-jquery-accordion-akordeon/”>Akordeon is a free, lightweight jQuery plugin for creating accordion layouts. It’s fully customizable and can display large chunks of content in a limited space.

href=”http://www.egrappler.com/a-stylo-modern-jquery-accordion-akordeon/”> src=”http://netdna.webdesignerdepot.com/uploads6/newapps-4-12/akordeon.jpg” alt=”" />

class=”spacer_” />

Morris.js

href=”http://oesmith.github.com/morris.js/”>Morris.js is a lightweight library that makes it easy to draw time-series graphs that actually look good, using jQuery and Raphael.

href=”http://oesmith.github.com/morris.js/”> class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/newapps-4-12/morrisjs.jpg” alt=”" />

class=”spacer_” />

Via.Me

href=”http://via.me/”>Via.Me is a new way to share photos, videos, stories, and sounds. There’s a web interface as well as an iOS app, and you can sign up with Facebook or Twitter.

href=”http://via.me/”> class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/newapps-4-12/viame.jpg” alt=”" />

class=”spacer_” />

Noty

href=”http://needim.github.com/noty/”>Noty is a jQuery plugin for creating alternative alert and other notification messages (such as success, error, and confirmation). Notifications can be placed in a variety of areas, and the API allows you to customize the text, animation, speed, buttons, and more.

href=”http://needim.github.com/noty/”> src=”http://netdna.webdesignerdepot.com/uploads6/newapps-4-12/noty.jpg” alt=”" />

class=”spacer_” />

PSDCovers

With href=”http://www.psdcovers.com/”>PSDCovers, you can create 3D product mockups in Photoshop using your 2D designs. You just choose and download the product shot you want to use, locate the appropriate Action, run “Step 1″ to create a template, position and scale your 2D design on that template, and then run “Step 2″ to generate the 3D result.

href=”http://www.psdcovers.com/”> src=”http://netdna.webdesignerdepot.com/uploads6/newapps-4-12/psdcovers.jpg” alt=”" />

class=”spacer_” />

Comcure

href=”http://comcure.com/”>Comcure offers forever free backups for your website. Just set up the automatic backups, and then forget about it. Comcure will run backups according to schedule, and will email you if there’s ever an issue. It even backs up your MySQL databases, and your backups will be stored at two of their five worldwide datacenters!

href=”http://comcure.com/”> src=”http://netdna.webdesignerdepot.com/uploads6/newapps-4-12/comcure.jpg” alt=”" />

class=”spacer_” />

Slidedeck2

href=”http://www.slidedeck.com/”>Slidedeck2 is a WordPress content slider. It lets you create photo and video galleries, post sliders, social feed sliders (for Google+, Instagram, and Twitter), and more.

href=”http://www.slidedeck.com/”> src=”http://netdna.webdesignerdepot.com/uploads6/newapps-4-12/slidedeck.jpg” alt=”" /> class=”save-timestamp hide-if-no-js button” href=”post.php?post=31817&action=edit#edit_timestamp”>OK

class=”spacer_” />

The Creative Finder

href=”http://thecreativefinder.com/”>The Creative Finder has a new look. And along with it they’ve added more features, including new account types, mobile portfolios, and more.

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/newapps-4-12/thecreativefinder.jpg” alt=”" />

class=”spacer_” />

Breezi

href=”https://breezi.com/”>Breezi is a new website builder that makes it easy to design, edit, and launch beautiful websites in minutes. One of Breezi’s best features, and what sets it apart from most other website builders, is that it has exceptionally well designed templates to get you started. And through the end of April, when you sign up for a new site, you’ll get it free!

href=”https://breezi.com/”> src=”http://netdna.webdesignerdepot.com/uploads6/newapps-4-12/breezi.jpg” alt=”" />

class=”spacer_” />

Twitter Follow Box

href=”http://jobyj.in/twitter-follow-box-widget/”>Twitter Follow Box adds a facebook-like box style widget for Twitter. It’s a simple jQuery plugin, but has enough options to customize the widget to match your site’s design.

href=”http://jobyj.in/twitter-follow-box-widget/”> src=”http://netdna.webdesignerdepot.com/uploads6/newapps-4-12/twitterfollowbox.jpg” alt=”" />

class=”spacer_” />

Nagasaki (free)

href=”http://www.behance.net/gallery/Nagasaki-free-font/3556703″>Nagasaki is a free typeface designed by Sasha Iacob, inspired by the ’57 poster “Hiroshima”, which was designed by Wim Crowell. It’s perfect for posters, flyers, and other pieces where you need a big, bold display font.

href=”http://www.behance.net/gallery/Nagasaki-free-font/3556703″> src=”http://netdna.webdesignerdepot.com/uploads6/newapps-4-12/nagasaki.jpg” alt=”" />

class=”spacer_” />

Sablon Type (free)

href=”http://www.behance.net/gallery/Sablon-Type-Free-font/3486161″>Sablon Type is based on din-bold outlines using the add and subtract circles around the edges. It’s a handmade EPS font that’s licensed for both personal and commercial use.

href=”http://www.behance.net/gallery/Sablon-Type-Free-font/3486161″> class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/newapps-4-12/sablontype.jpg” alt=”" />

class=”spacer_” />

Average (free)

href=”http://www.behance.net/gallery/AVERAGE-Free-Google-Web-Font/3392755″>Average is a new, free Google Web Font designed by Eduardo Rodriguez Tunni. It’s a serif font that was created after extensive research into text typeface families from various periods in history.

href=”http://www.behance.net/gallery/AVERAGE-Free-Google-Web-Font/3392755″> class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/newapps-4-12/average.jpg” alt=”" />

class=”spacer_” />

Bobber (free)

href=”http://www.behance.net/gallery/Bobber-Typeface/3371595″>Bobber is an alternative slab serif typeface with its own distinct style. The font is available as an .ai archive.

href=”http://www.behance.net/gallery/Bobber-Typeface/3371595″> src=”http://netdna.webdesignerdepot.com/uploads6/newapps-4-12/bobber.jpg” alt=”" />

class=”spacer_” />

Henry (free)

href=”http://www.behance.net/gallery/Henry-free-font/3486527″>Henry is an all-caps, vintage style typeface based on vintage cars and fonts from the 1960s.

href=”http://www.behance.net/gallery/Henry-free-font/3486527″> src=”http://netdna.webdesignerdepot.com/uploads6/newapps-4-12/henry.jpg” alt=”" />

class=”spacer_” />

Silver Fake (free)

href=”http://fontfabric.com/silverfake-free-font/”>Silver Fake is a free slab serif typeface. It’s simultaneously modern and retro, with unique letterforms and some alternatve characters.

href=”http://fontfabric.com/silverfake-free-font/”> src=”http://netdna.webdesignerdepot.com/uploads6/newapps-4-12/silverfake.jpg” alt=”" />

class=”spacer_” />

Hem and Haw ()

href=”http://www.myfonts.com/fonts/stellasfonts/hem-and-haw/”>Hem and Haw is a stitched sans serif display typeface, designed by Ray Larabie for Stella Roberts Fonts. It was rebuilt from the former freeware design “Stitchen”, now with a more complete character set, including punctuation and currency symbols.

href=”http://www.myfonts.com/fonts/stellasfonts/hem-and-haw/”> class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/newapps-4-12/hemandhaw.jpg” alt=”" />

class=”spacer_” />

Taco Wagon ()

href=”http://www.myfonts.com/fonts/tension-type/taco-wagon/”>Taco Wagon is a distressed display font inspired by Mexican hand-painted lettering. It includes a separate file for the drop shadow, so that it can be colored independently.

href=”http://www.myfonts.com/fonts/tension-type/taco-wagon/”> src=”http://netdna.webdesignerdepot.com/uploads6/newapps-4-12/tacowagon.jpg” alt=”" />

class=”spacer_” />

Sunset Strip ()

href=”http://marketplace.veer.com/fonts/JBT0001075″>Sunset Strip is a pretty script font designed by Jason Walcott for Jukebox Type. It includes a full collection of characters, including alternates.

href=”http://marketplace.veer.com/fonts/JBT0001075″> src=”http://netdna.webdesignerdepot.com/uploads6/newapps-4-12/sunsetstrip.jpg” alt=”" />

class=”spacer_” />

Sanchez (6)

href=”http://marketplace.veer.com/fonts/UMT0002030″>Sanchez is a slab-serif typeface that strongly resembles Rockwell, except with rounded edges. It includes 12 variants, and is the first display typeface family from Linotype.

href=”http://marketplace.veer.com/fonts/UMT0002030″> src=”http://netdna.webdesignerdepot.com/uploads6/newapps-4-12/sanchez.jpg” alt=”" />

class=”spacer_” />

Sansational (9)

href=”http://marketplace.veer.com/fonts/JBT0001079″>Sansational is a display sans serif typeface that includes six variants. It’s a casual font, with a playful touch, designed by Jason Walcott for Jukebox Type.

href=”http://marketplace.veer.com/fonts/JBT0001079″> class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/newapps-4-12/sansational.jpg” alt=”" />

class=”spacer_” />

Written exclusively for WDD by href=”http://cameronchapman.com”>Cameron Chapman.

Know of a new app or resource that should have been included but wasn’t? Let us know in the comments!

/>
width=”100%” style=”border-top:1px solid #d7d7d7; border-bottom:1px solid #d7d7d7;” height=”20″>
valign=”center”> href=”http://www.mightydeals.com/deal/iphone-ipad-game-design-kit.html?ref=inwidget”> face=”Arial” size=”3″ color=”#e64f32″>Design and sell your first iPhone game – only ! (reg. 9) width=”90″> href=”http://www.mightydeals.com/?ref=inwidget”> /> src=”http://mightydeals.com/web/images/widget-logo.png” height=”40″ width=”90″ border=”0″ /> />

href=”http://www.webdesignerdepot.com/2012/04/whats-new-for-designers-april-2012/”>Source

Webdesigner Depot

You’ve made your first app!

Now what?

Anyone in the app business knows that marketing an app is tough. And according to a recent article on TechCrunch, “Getting a mobile app noticed in the increasingly crowded mobile app market is more difficult than ever.” Some titles and concepts are truly unique. Angry Birds? Its title and screenshot alone were enough to catapult it to number one in Finland, according to Mikael Hed, CEO of Finnish game studio Rovio, which develops the game. Some apps are downright genius. Who doesn’t loath maintaining a to-do list? But now with Clear, it’s astonishingly fun! Who in the media wouldn’t cover something this clever? These two special cases were a shoe-in for the coveted feature page.

OK, so we have two apps that have leaped the giant “feature” hurdle and scored attention, much to the envy of countless wannabe developers. But not every app is an Angry Birds or Clear. And any developer surely knows that they are in extraordinary company — 91,754 iOS apps and 122,220 Android apps were released between 16 May and 8 September 2011, according to a recent Mobilewalla report. The researchers also found that during 2011, the number of available iOS apps increased from 338,000 to 589,148, while Android apps also more than doubled, from 115,000 to 319,774.

(Image credit: florianplag

The app world is becoming like one giant forest, millions and millions of trees. So, if one of those trees falls and no one is around to hear it, does it make a sound? Sure, there are SEO tricks, word-of-mouth marketing tools and built-in demographic identifiers that might help move your product up the ever-growing search list of apps, whether the list is for books, games or lifestyle tools. Moreover, thousands of companies in the market today make extravagant claims of being able to get your app noticed.

Many developers fall into the trap of allocating tight budget dollars to quick “tech” fixes in a desperate attempt to lift their app above the crowd. However, in this age of digital distraction, one mechanism to help that tree stand out is a tried-and-true PR marketing campaign. And the best initiatives are those that involve choosing strategic partners, creating clever story angles that dovetail with newsworthy occasions, and running a cause marketing campaign and contest. This case study will cover some of these tactics and offer some of the lessons we learned along the way.

Case Study: David and Goliath

According to a recent article in Publishing Perspectives, “The children’s market is a huge opportunity within the digital publishing arena.” Jumping Pages, a children’s app developer, decided to enter this market with an expertly produced book app for children, the first interactive app version of the epic tale of David and Goliath. Based on the work of the team of artists, animators and programmers, the iPad app is filled with vivid graphics and 3-D and 2.5-D animation that runs with interactive components at the same time on the same panel. The reader is able to interact with hundreds of original assets: shoot arrows, catapult burning weapons, populate flowers. Shake the iPad to awaken the sleeping Goliath; sway the iPad to swing a hanging lantern; turn the iPad to change the character’s points of view.

The quality of the work was undeniable, so it was imperative to the developer that the app get attention. But how would the app be differentiated to the consumer, considering that a David and Goliath book app for kids already exists. Strike one. Moreover, regardless of its quality, the likelihood of the app landing on a feature page was slim, considering that most retailers are reluctant to highlight stories with religious overtones. Strike two. A final dilemma was how to make a story that has been around forever feel relevant in the crowded world of kids book apps. Strike three?

Not so fast!

Don’t Drink the Kool-Aid

From a production standpoint, the David and Goliath for iPad app was ready to launch in July 2011. The only thing that wasn’t ready was a plan of action on how to make some noise for a story that, for all intents and purposes, already exists as an app. This scenario holds true for many developers who are ready to submit improved versions of models that exist in various categories; there is a plethora of apps for weather, productivity and games (Who’d like to wager on the best poker app?). Many developers spend countless hours designing, programming and shaping their apps. They become so immersed in the product that they often drink the Kool-Aid, so to speak, and believe that their superior work will speak for itself and that word of mouth about their amazing app will spread quickly. Many developers with this mentality simply see no need to create a cool marketing plan around the app. Sounds like buying a lottery ticket.

(Image credit: stevendepolo)

Being proud of and confident in your product is nice, but better to be realistic about how to introduce it into the marketplace. Thus, after careful thought and shuffling around scarce budget dollars, Jumping Pages re-examined the landscape and decided to be smart about launching. The company set out to create a targeted and focused consumer marketing strategy. It decided it needed to implement an effective campaign in order to rise above the other book apps that were entering the fray in increasing numbers and to set itself apart from a version of the story that was already available. And because of budgetary constraints, it had no time for a protracted strategy. It’s first swing had to be a hit.

Finding the Perfect Partner

First, the company wanted an effective “marketing” partner, a narrator for the story who would help sell it. Ideally, the narrator would have a back story that was relevant both to the biblical tale and to the targeted demographic, and who would have broad media appeal (in order to be newsworthy). Jumping Pages reached out to baseball star and 2006 World Series MVP David Eckstein to narrate the app. As many sports fans know, Eckstein has had a noteworthy career, overcoming his relatively short stature to achieve glory at the Major League level. Hence, the back story: a modern-day David whose life story mirrors that of the biblical David.

Upon arranging for his participation and partnership, the company moved the launch date of the app to October to coincide with the start of the World Series. Coincidentally, October 2011 marked the five-year anniversary of Eckstein’s World Series MVP performance; so, Jumping Pages created an “MVP Edition” of the book (same app, different narrator), which would be released to dovetail with the newsworthiness of the fall classic.

Newsworthiness Needed

Being newsworthy is key, particularly when you’re trying to generate media coverage. Many developers view the mere existence of their cool app as being newsworthy in itself, but while the launch might be exciting to the developer, 99 times out of 100, it means nothing to a reporter or blogger. The main objective of a reporter is to speak to their audience’s interests and tie those interests to current events — presidential election, Super Bowl, Valentine’s Day, the Final Four, the Oscars. Timing is everything when pitching a story. (Coincidentally, given the baseball spin, this article is timely because the annual spring opening of the Major League Baseball season in the US is a newsworthy event.)

Pinpointing an Audience

Additionally, in order to successfully market a new app, particularly a kid’s app, the developer has to strike a balance between reaching kids and their parents. David Eckstein fits the bill — a baseball hero to dads and sons who enjoy baseball together. Moreover, Eckstein was featured in the film Champions of Faith, so he appeals to those interested in biblical narratives.

Had Jumping Pages stuck with its original version of the app, the launch would have been too general, and the company would not have had an opportunity to reach a specific demographic. Many app developers feel that their apps are good for everyone — all moms or all kids, for example. Whittling down your audience to a very precise demographic is imperative. Reaching a niche audience, one that will respond positively to your app, is enough to spark word of mouth.

Triple Play and “A” Reviews

With David’s cooperation, Jumping Pages had a narrator whose back story matched that of the story’s protagonist — a star athlete tied to an newsworthy sporting event and who resonates with a specific demographic. Eckstein made for a triple play and thus gave the developer an opportunity for multiple story angles. The app was featured in over two dozen outlets using a variety of angles to appeal to enthusiasts of sports (Yardbarker), religion (The Christian Post), baseball (MLB.com) and technology (Wired and GeekDad).

Also, the timeliness of the World Series gave app reviewers a reason to talk about the app in October. The strategy was effective, and reviews were posted far more quickly than normal. All developers appreciate how important early reviews are, given the usual time lag. The app was praised: “like watching a Disney production,” “… animation is picture perfect and it made me want to read the story again and again,” “…is outstanding with fantastic, vibrant animations and images….” It continues to receive impressive reviews.

Cause, Demo and Contest

In addition, through Eckstein’s involvement, Jumping Pages had an opportunity to incorporate a cause marketing component into the launch. Eckstein’s charity of choice, Bags of Hope, helped promote the app to its members and Facebook fans. Next, with Eckstein’s involvement, a public reading and demo of the app was arranged, part of a post-launch strategy that would keep the app top of mind during the approaching holidays. A demo and reading of the app featuring Eckstein and his wife, Ashley, took place on November 30th in a Manhattan Apple store, during the start of the hectic holiday shopping season.

Finally, Jumping Pages sought a contest partner to run an iPad giveaway (iPad being the number one requested gift for the holidays and the platform of the David and Goliath app). It approached Smart Apps for Kids, a leading review website for children’s apps, to be a partner. The contest, which ran the week before Christmas, garnered over 1,500 new fans for Jumping Pages’ Facebook page and generated excitement for the app and for the developer during the critical last-minute holiday shopping period.

Hits the Mark on the First Shot

The founding of Jumping Pages and the launch of the David and Goliath app were a success. The high praise, along with the company’s achievements in development and marketing, have enabled the company to move forward on two forthcoming apps: an original interactive story that teaches kids and parents respect for the home, and an interactive musical app for kids, both set for release in the spring of 2012.

Rather than haphazardly launch its app or throw precious dollars at risky online maneuvers, Jumping Pages has demonstrated that a thoughtful, strategic and patient approach usually works best. Many app developers rush their product to market without considering the consequences. These days, with the overwhelming amount of information and the number of apps, the more carefully a developer plans their strategy, the more likely their product will launch successfully. And like David, they usually have just one shot at getting it right! Thanks to its partnerships, creative story angles, newsworthy connection, cause component, contest and patience, Jumping Pages did it right.

Lessons Learned

Keep these points in mind when planning your strategy:

• Partnership
  Launches work best in pairs! Choose a partner whose background gels with your app. For example, Ruckus Media just announced a unique partnership with New York City’s PBS station for the “Cyberchase” app in its math series.
• Relevance
  Find a way to tie your app to a current news or seasonal story. News outlets themselves know this better than anyone: just this month, the Washington Post launched a presidential election iPad app.
• Audience
  Don’t play to a stadium. Rather, cater to an small meaningful audience. Talking about specific audiences, there are even apps for nose-pickers — as well as lawsuits for alleged patent infringement on those nose-picking apps!
• Cause
  Share the wealth by helping a needy organization that fits your app’s demographic. This one really woke me up: did you know you could donate .25 to charity every time you hit the snooze button?
• Relationship
  Incorporate unique ways to address and engage your audience. Self Magazine, a leading women’s lifestyle publication, is unveiling a mobile app game of its annual Self Workout in the Park, featuring fitness, health, fashion games with avatars, virtual goods and puzzles.

(al) (fi)

© John Casey for Smashing Magazine, 2012.

Smashing Magazine Feed