JCPenney’s new CEO Ron Johnson is a former Apple and Target retail executive so this guy must have the Midas touch. So of course people are going to flock to his feet praising his good works with little hesitation. I really don’t want to make a Tim Tebow analogy… so I won’t.

Let’s get one thing straight: I don’t dislike what he has done to the overall brand. In fact, I really like everything he’s done so far – except the logo. I get that they are branding around America and nationalism and local businesses to combat the Swedish invader H&M. However, do they have to be so damn literal? What happened to a concept being subtle?

I also understand that they are keeping in line with the box in the previous logo, but the previous logo had no strong concept behind the box. They are building on an empty concept and injecting a cliche concept. Furthermore, I feel like it is about to fall over. It is extremely top and left heavy. I see no balance, no elegance, no subtlety.

Many who’ve commented on this tension seem to believe it’s either or. Companies that try both often fail at one, or worse yet, they sell both short. At Imulus, we love doing the client work and believe it helps us discover new ideas for products. From day one, we decided client work would always be core to our identity, so the decision to move the company entirely into products just isn’t on the table.

During the last few years we’ve stumbled down the product path. Stacks was rolled out about a year or so behind schedule. Support Details was a quick win, but we’ve been slow to update it with exciting new functionality. In recent months we’ve added several other products to the cooker. This has prompted us to more closely examine the product development relationship with services.

Last month we implemented the idea of a Product Tsar.

The Product Tsar is a temporary 4 month stint with the responsibility to oversee product development. We are currently pulling from our developer team to fill the Tsar role, although that may change in the future. Bruce Clark has been helping to head up Stacks development and has nicely transitioned into this role. The first two weeks are used to gather product ideas, review what’s been accomplished and map out a list of items for development. The co-founders and the Product Tsar get together to prioritize the product development based on a combination of factors including revenue potential, complexity and street cred. We then make a time commitment to the Product Tsar. In this 4 month stint we’ve committed to a minimum of 15 hours of dedicated product work each week.

As the weeks progress, the Tsar reports in weekly, to update our Project Managers and co-founders on the status of products. The weekly status offers the Tsar a chance to gauge how busy the office is and what un-utilized resources could be applied toward product work.

Once the 4 months are over, the co-founders will review the Tsar’s work and the next senior developer on our team will take the reigns.

So far it seems to be working for us, but only time will tell.

One reason for this is that there is a general sense of fear that if something is visible on the homepage, that users will not find it. Another is the use of analytics and tools that measure how far users scroll down a page which perpetuates this fear. The flaw I find in this data is that it typically includes all visitors to the site. Anyone who had ever looked at website analytics knows that a site gets a lot of very unqualified traffic from search engines. The behavior of this unqualified traffic can overwhelm and mask the behavior of users who actually intended to be on your site and have a task to accomplish. These users behave very differently and will be more likely to go a few pages deep into the site to complete their task. Target is an example of a site with a ton of content, yet they keep the content on the homepage focused to a primary goal. This makes the experience for the user much less intimidating and invites the user to explore further.

What these qualified users need is a simple experience that gives them clear information that is focused on the primary goals of the site and doesn’t try to do everything at once. One of the reasons that mobile apps are so popular is their simplicity. They are typically focused on a simple set of functions and they rarely require much of a learning curve. People are easily overwhelmed by a plethora of options, so give them the simplicity that they seek. Think about the objectives of your site and distill them down to just a few. Give those objectives the attention that they deserve and you will greatly increase your chances of accomplishing them. The secondary objectives can be pushed lover on the page or deeper in the site. A motived user will find them, especially if they are intrigued by the site and weren’t scared off by an overly complex page. This site for Billings is a great example of reducing choices for the user, and focusing on the primary goals of the page.

Users make decisions about your company within a few seconds of landing on the page. Do you want to have that impression to be one of confusion or would you rather communicate a clear and simple message that will intrigue a user and draw them into the site? So when planning a site, think about the objectives of the site, and then prioritize those objectives. If the site could do only one thing, what would that be?

Why?
During our wireframe presentations we noticed that wireframes can cause a lot of confusion. Wireframes that expressed creative layouts were declined by the client because they would have difficulty visualizing the design once fully designed and functional. We’re humans. We have a better understanding of something that we see rather than trying to visualize something that’s shown to us in grey boxes. Because of this, clients approved wireframes that made most sense to them — the one with a very traditional layout.

Traditional wireframe layout

Wireframes are more about content structure — what goes where within the layout. They lack the ability to convey brand-specific features and how contrast impacts content hierarchy.

Wireframes can hurt the project due to the following reasons…

1. They are static — Sure, design is static too, but has a bigger impact to the client than wireframes. Clients want to see the design.
2. They can’t express dynamic interaction — Trying to explain dynamic interaction through wireframes confuses the client even more. In some instances, we’ll prototype specific dynamic features.
3. They can be misinterpreted – Clients can change their mind once they see the design. What they understood in the wireframe can look different to them in the design.
4. They can waste a lot of time – Designers can be stuck in “revision land” for a while. This also affects Project Managers as time is wasted on back and forth with a client.

Our plan here at Imulus is to only do this for website design projects and so far it has been very successful. Web and mobile applications will require wireframe approvals by the client. These projects are complex in context and we want to make sure that the flow of user interaction is ironed out at the wireframing stage.

We’ve been wanting to continue work on Support Details for some time now. Since it was in .NET sitting on top of a homegrown CMS that it really didn’t need to be coupled to, our frontend developers had trouble moving forward on it. As a lark, I decided to port over the site to Rails. The main functionality was done in a couple of hours and we managed to iron out most of the other main points in spare hours over the next few days. We decided to update some of our detection to be way more accurate, and that took a few more days, but we can now tell if you are on Windows 3.1 running NCSA Mosaic

We didn’t want to stop there though. We were very excited about using CoffeeScript and Sass in the new Rails 3.1 asset pipeline to create readable code that could generate our Javascript and CSS. Taylor and Casey jumped onto migrating the existing Javascript and CSS over to using CoffeeScript and Sass. After running through the asset pipeline which would combine and minify our Javascript and CSS we had significantly reduced our asset download size.

While that was a great first step, we wanted to go further and make Support Details even faster. We started by using Delayed Job to send e-mails on a background queue, rather than tying up the main web thread. Then we decided that we wanted to take advantage of a CDN and so we used the excellent Asset Sync gem to compile and deploy our assets to Amazon S3/Cloudfront when we pushed to Heroku. After all of these changes our initial page load time was cut by more that half.

But wait, there’s more. We’ve had many requests to localize Support Details for different languages. Thanks to the support of various friends of Imulus, we are pleased to offer Support Details in Japanese, Russian, Italian and Portuguese. We plan on adding more languages in the future, and if you want to help in translation please feel free to give us a holler and we can send you a list of phrases we need for the translation.

We have a lot more planned for Support Details, and we have some more great Rails applications in the pipeline which we should be releasing for your viewing pleasure in the near future.

“Better interaction design, less graphic design. Better user experience, less debates about taste. Faster technology, more reliable design standards.”

What I find interesting is I’ve been seeing the opposite in web trends. With the introduction of more web friendly fonts and more flexibility in development, web design is starting to look more and more artistic and refined. Designers are able to explore their artistic roots with illustration, sketching, painting, etc.

When you look at a site that is so beautifully designed, it just makes you feel good. It’s the intangibles that can make a difference. Things that click tracking, heatmaps, and analytics can’t measure. I also find it interesting that, yes, of course the author is arguing the benefits of minimalist web design. Look at their site. Almost as minimalistic as it gets.

Minimalist design style has its place in web design, but it is far from the end-all for web design. Sites like Apple have been so successful because:
1. Their web design matches their brand style
2. They are able to display big, beautiful photography and not every company can afford that level of photography.
3. The amount of information they have packed into their website demands a simplistic design style in order not to overwhelm their audience.

While I agree that a design that is too cluttered and flowery can be extremely frustrating when I am looking for something specific, but why must it be one or the other? That is the challenge of web design: creating a web experience. Combining form and function so they work together seamlessly.

Would you hire an architect to design a building that meets the needs of keeping you warm and a roof over your head but is a plain box? No. You hire an architect to create something beautiful but still functions as a well structured building.

Bottom line, the minimalist approach works, but not for everyone, and not as often as many people think. Personally, I am seeing more creativity and interesting visuals than something flat and boring but usable. Pairing usability and beauty is a web designer’s job. So rather than casting off graphic design as unnecessary, I foresee it becoming more and more crucial.

Here’s our running list:

reserved_usernames = [
	# Companies we'd love to have use our service
	# so we'll reserve them to be safe
	'supportdetails',
	'support-details',
	'stacks',
	'imulus',
	'github',
	'twitter',
	'facebook',
	'google',
	'apple',

	# Generic reserved words
	'about',
	'account',
	'activate',
	'add',
	'admin',
	'administrator',
	'api',
	'app',
	'apps',
	'archive',
	'archives',
	'auth',
	'blog',
	'cache',
	'cancel',
	'careers',
	'cart',
	'changelog',
	'checkout',
	'codereview',
	'compare',
	'config',
	'configuration',
	'connect',
	'contact',
	'create',
	'delete',
	'direct_messages',
	'documentation',
	'download',
	'downloads',
	'edit',
	'email',
	'employment',
	'enterprise',
	'faq',
	'favorites',
	'feed',
	'feedback',
	'feeds',
	'fleet',
	'fleets',
	'follow',
	'followers',
	'following',
	'friend',
	'friends',
	'gist',
	'group',
	'groups',
	'help',
	'home',
	'hosting',
	'hostmaster',
	'idea',
	'ideas',
	'index',
	'info',
	'invitations',
	'invite',
	'is',
	'it',
	'job',
	'jobs',
	'json',
	'language',
	'languages',
	'lists',
	'login',
	'logout',
	'logs',
	'mail',
	'map',
	'maps',
	'mine',
	'mis',
	'news',
	'oauth',
	'oauth_clients',
	'offers',
	'openid',
	'order',
	'orders',
	'organizations',
	'plans',
	'popular',
	'post',
	'postmaster',
	'privacy',
	'projects',
	'put',
	'recruitment',
	'register',
	'remove',
	'replies',
	'root',
	'rss',
	'sales',
	'save',
	'search',
	'security',
	'sessions',
	'settings',
	'shop',
	'signup',
	'sitemap',
	'ssl',
	'ssladmin',
	'ssladministrator',
	'sslwebmaster',
	'status',
	'stories',
	'styleguide',
	'subscribe',
	'subscriptions',
	'support',
	'sysadmin',
	'sysadministrator',
	'terms',
	'tour',
	'translations',
	'trends',
	'unfollow',
	'unsubscribe',
	'update',
	'url',
	'user',
	'weather',
	'webmaster',
	'widget',
	'widgets',
	'wiki',
	'ww',
	'www',
	'wwww',
	'xfn',
	'xml',
	'xmpp',
	'yaml',
	'yml',

	# Top 50 languages by speaking population
	'chinese',
	'mandarin',
	'spanish',
	'english',
	'bengali',
	'hindi',
	'portuguese',
	'russian',
	'japanese',
	'german',
	'wu',
	'javanese',
	'korean',
	'french',
	'vietnamese',
	'telugu',
	'chinese',
	'marathi',
	'tamil',
	'turkish',
	'urdu',
	'min-nan',
	'jinyu',
	'gujarati',
	'polish',
	'arabic',
	'ukrainian',
	'italian',
	'xiang',
	'malayalam',
	'hakka',
	'kannada',
	'oriya',
	'panjabi',
	'sunda',
	'panjabi',
	'romanian',
	'bhojpuri',
	'azerbaijani',
	'farsi',
	'maithili',
	'hausa',
	'arabic',
	'burmese',
	'serbo-croatian',
	'gan',
	'awadhi',
	'thai',
	'dutch',
	'yoruba',
	'sindhi',

	# Country TLDs
	'ac',  # Ascension Island
	'ad',  # Andorra
	'ae',  # United Arab Emirates
	'af',  # Afghanistan
	'ag',  # Antigua and Barbuda
	'ai',  # Anguilla
	'al',  # Albania
	'am',  # Armenia
	'an',  # Netherlands Antilles
	'ao',  # Angola
	'aq',  # Antarctica
	'ar',  # Argentina
	'as',  # American Samoa
	'at',  # Austria
	'au',  # Australia
	'aw',  # Aruba
	'ax',  # and
	'az',  # Azerbaijan
	'ba',  # Bosnia and Herzegovina
	'bb',  # Barbados
	'bd',  # Bangladesh
	'be',  # Belgium
	'bf',  # Burkina Faso
	'bg',  # Bulgaria
	'bh',  # Bahrain
	'bi',  # Burundi
	'bj',  # Benin
	'bm',  # Bermuda
	'bn',  # Brunei Darussalam
	'bo',  # Bolivia
	'br',  # Brazil
	'bs',  # Bahamas
	'bt',  # Bhutan
	'bv',  # Bouvet Island
	'bw',  # Botswana
	'by',  # Belarus
	'bz',  # Belize
	'ca',  # Canada
	'cc',  # Cocos (Keeling) Islands
	'cd',  # Democratic Republic of the Congo
	'cf',  # Central African Republic
	'cg',  # Republic of the Congo
	'ch',  # Switzerland
	'ci',  # Côte d'Ivoire
	'ck',  # Cook Islands
	'cl',  # Chile
	'cm',  # Cameroon
	'cn',  # People's Republic of China
	'co',  # Colombia
	'cr',  # Costa Rica
	'cs',  # Czechoslovakia
	'cu',  # Cuba
	'cv',  # Cape Verde
	'cx',  # Christmas Island
	'cy',  # Cyprus
	'cz',  # Czech Republic
	'dd',  # East Germany
	'de',  # Germany
	'dj',  # Djibouti
	'dk',  # Denmark
	'dm',  # Dominica
	'do',  # Dominican Republic
	'dz',  # Algeria
	'ec',  # Ecuador
	'ee',  # Estonia
	'eg',  # Egypt
	'eh',  # Western Sahara
	'er',  # Eritrea
	'es',  # Spain
	'et',  # Ethiopia
	'eu',  # European Union
	'fi',  # Finland
	'fj',  # Fiji
	'fk',  # Falkland Islands
	'fm',  # Federated States of Micronesia
	'fo',  # Faroe Islands
	'fr',  # France
	'ga',  # Gabon
	'gb',  # United Kingdom
	'gd',  # Grenada
	'ge',  # Georgia
	'gf',  # French Guiana
	'gg',  # Guernsey
	'gh',  # Ghana
	'gi',  # Gibraltar
	'gl',  # Greenland
	'gm',  # The Gambia
	'gn',  # Guinea
	'gp',  # Guadeloupe
	'gq',  # Equatorial Guinea
	'gr',  # Greece
	'gs',  # South Georgia and the South Sandwich Islands
	'gt',  # Guatemala
	'gu',  # Guam
	'gw',  # Guinea-Bissau
	'gy',  # Guyana
	'hk',  # Hong Kong
	'hm',  # Heard Island and McDonald Islands
	'hn',  # Honduras
	'hr',  # Croatia
	'ht',  # Haiti
	'hu',  # Hungary
	'id',  # Indonesia
	'ie',  # Republic of Ireland  Northern Ireland
	'il',  # Israel
	'im',  # Isle of Man
	'in',  # India
	'io',  # British Indian Ocean Territory
	'iq',  # Iraq
	'ir',  # Iran
	'is',  # Iceland
	'it',  # Italy
	'je',  # Jersey
	'jm',  # Jamaica
	'jo',  # Jordan
	'jp',  # Japan
	'ke',  # Kenya
	'kg',  # Kyrgyzstan
	'kh',  # Cambodia
	'ki',  # Kiribati
	'km',  # Comoros
	'kn',  # Saint Kitts and Nevis
	'kp',  # Democratic People's Republic of Korea
	'kr',  # Republic of Korea
	'kw',  # Kuwait
	'ky',  # Cayman Islands
	'kz',  # Kazakhstan
	'la',  # Laos
	'lb',  # Lebanon
	'lc',  # Saint Lucia
	'li',  # Liechtenstein
	'lk',  # Sri Lanka
	'lr',  # Liberia
	'ls',  # Lesotho
	'lt',  # Lithuania
	'lu',  # Luxembourg
	'lv',  # Latvia
	'ly',  # Libya
	'ma',  # Morocco
	'mc',  # Monaco
	'md',  # Moldova
	'me',  # Montenegro
	'mg',  # Madagascar
	'mh',  # Marshall Islands
	'mk',  # Republic of Macedonia
	'ml',  # Mali
	'mm',  # Myanmar
	'mn',  # Mongolia
	'mo',  # Macau
	'mp',  # Northern Mariana Islands
	'mq',  # Martinique
	'mr',  # Mauritania
	'ms',  # Montserrat
	'mt',  # Malta
	'mu',  # Mauritius
	'mv',  # Maldives
	'mw',  # Malawi
	'mx',  # Mexico
	'my',  # Malaysia
	'mz',  # Mozambique
	'na',  # Namibia
	'nc',  # New Caledonia
	'ne',  # Niger
	'nf',  # Norfolk Island
	'ng',  # Nigeria
	'ni',  # Nicaragua
	'nl',  # Netherlands
	'no',  # Norway
	'np',  # Nepal
	'nr',  # Nauru
	'nu',  # Niue
	'nz',  # New Zealand
	'om',  # Oman
	'pa',  # Panama
	'pe',  # Peru
	'pf',  # French Polynesia
	'pg',  # Papua New Guinea
	'ph',  # Philippines
	'pk',  # Pakistan
	'pl',  # Poland
	'pm',  # Saint-Pierre and Miquelon
	'pn',  # Pitcairn Islands
	'pr',  # Puerto Rico
	'ps',  # Palestinian territories
	'pt',  # Portugal
	'pw',  # Palau
	'py',  # Paraguay
	'qa',  # Qatar
	're',  # Réunion
	'ro',  # Romania
	'rs',  # Serbia
	'ru',  # Russia
	'rw',  # Rwanda
	'sa',  # Saudi Arabia
	'sb',  # Solomon Islands
	'sc',  # Seychelles
	'sd',  # Sudan
	'se',  # Sweden
	'sg',  # Singapore
	'sh',  # Saint Helena
	'si',  # Slovenia
	'sj',  # Svalbard and  Jan Mayen Islands
	'sk',  # Slovakia
	'sl',  # Sierra Leone
	'sm',  # San Marino
	'sn',  # Senegal
	'so',  # Somalia
	'sr',  # Suriname
	'ss',  # South Sudan
	'st',  # São Tomé and Príncipe
	'su',  # Soviet Union
	'sv',  # El Salvador
	'sy',  # Syria
	'sz',  # Swaziland
	'tc',  # Turks and Caicos Islands
	'td',  # Chad
	'tf',  # French Southern and Antarctic Lands
	'tg',  # Togo
	'th',  # Thailand
	'tj',  # Tajikistan
	'tk',  # Tokelau
	'tl',  # East Timor
	'tm',  # Turkmenistan
	'tn',  # Tunisia
	'to',  # Tonga
	'tp',  # East Timor
	'tr',  # Turkey
	'tt',  # Trinidad and Tobago
	'tv',  # Tuvalu
	'tw',  # Republic of China (Taiwan)
	'tz',  # Tanzania
	'ua',  # Ukraine
	'ug',  # Uganda
	'uk',  # United Kingdom
	'us',  # United States of America
	'uy',  # Uruguay
	'uz',  # Uzbekistan
	'va',  # Vatican City
	'vc',  # Saint Vincent and the Grenadines
	've',  # Venezuela
	'vg',  # British Virgin Islands
	'vi',  # United States Virgin Islands
	'vn',  # Vietnam
	'vu',  # Vanuatu
	'wf',  # Wallis and Futuna
	'ws',  # Samoa
	'ye',  # Yemen
	'yt',  # Mayotte
	'yu',  # Yugoslavia
	'za',  # South Africa
	'zm',  # Zambia
	'zw'   # Zimbabwe
]

It is a merged list of the recommendations from this Quora discussion, this list of country TLDs and
this list of languages

How to Contribute:
Gist: https://gist.github.com/1453705

Winter is upon us, and like many folks in Colorado we’re stoked to hit the mountains. Given the recent snowfall and our experimentation with HTML5 localStorage, it seemed natural to push it a bit further and do something fun.

Enter Powder, an HTML5 webapp for tracking the snow conditions at your favorite ski resorts.

Powder is an experiment using backbone.js to power an iPad webapp. On the client, Powder uses the browser’s native HTML5 localStorage mechanism to save the users’s preferences, the list of resorts the user chooses to track. On the server, Powder uses Sinatra to fetch and parse various snow/ski reports from http://onthesnow.com/ then serve it up as JSON to the browser.

The Stack

• Sinatra for feed parsing
• Sprockets for asset packaging
• CoffeeScript because it’s better than JavaScript
• SCSS because it’s better than CSS
• Backbone for client-side structure
• Eco for Backbone templating
• localStorage for client-side persistence

Powder is free and open source, hosted on GitHub. We’d love to have you join us in making Powder better. Feel free to fork the project and help us make a kickass iPad webapp.

The challenge: the kiosk doesn’t have an internet connection and can’t run a webserver. It can display webpages, but only through an IE8 iframe.

If the kiosk had a net connection we’d build a static form to post the data to a remote webservice. But that’s out. If the kiosk could run a webserver we’d build a simple webapp to handle the data locally. But that’s out, too.

We decided to solve the problem by saving the data to localStorage. localStorage is a key-value store built into most modern browsers, and a perfect mechanism for persisting simple form data. It has a minimal JavaScript API (setters and getters) via the window’s localStorage object that makes it really easy to work with.

Here’s how we did it:

We started by setting up a simple Storage class to interface with localStorage. This isn’t entirely necessary, but makes it easier to save and retrieve the data without having to parse/stringify on every transaction. (Yes, we love CoffeeScript.)

class Storage

  constructor: (@name)->
    @data = []

    # Check to see if the object already
    # exists in localStorage
    # If it does, grab the value
    # Otherwise, create a key in localStorage
    # with an empty array of data
    if localStorage[@name]?
      do @fetch
    else
      # We need to stringify the data as JSON
      # because it is stored as a string
      localStorage.setItem(@name, JSON.stringify(@data))

  # Pull the data out of localStorage and populate
  # the instance's @data array property
  # We need to parse the data as JSON
  # because it is stored as a string
  fetch: ->
    @data = JSON.parse(localStorage.getItem(@name))

  # Add an item to the instance's @data array and
  # re-save to localStorage
  add: (data) ->
    @data.push data
    localStorage.setItem(@name, JSON.stringify(@data))

Next, we set up a Form class to observe the form on the page and do some simple validation before finally committing it to a storage instance.

class Form

  constructor: (@$form, name)->
    @storage  = new Storage(name)
    @$fields  = $('input, textarea, select', @$form)

    @$form.submit (event) =>
      event.preventDefault()
      if @validate()
        do @save
        do @clear

  save: ->
    data = {}

    @$fields.each ->
      name  = $(this).attr('name')
      value = $(this).val()
      data[name] = value

    @storage.add data

  clear: ->
    @$fields.each ->
      $field = $(this)
      type = $field.attr('type')
      $field.val('') if type is 'text'

  validate: ->
    data = {}
    valid = true

    # Simple 'required' validation
    # Loop over each of the form fields
    # If the field is required, then check to see if it is blank
    @$fields.each ->
      $field = $(this)
      value = $field.val()
      required = $field.hasClass('required')
      if required and value is ''
        valid = false
        $field.addClass('invalid')
      else
        $field.removeClass('invalid')

    return valid

The client needed a means of retrieving the data, so we set up way to grab all of the data and render out a table with each of the entries.

class ResultsTable
  constructor: (@$table, name) ->
    @storage  = new Storage(name)
    @results = @storage.data
    $head_tr = $('<tr />')

    for field, value of @results[0]
      $head_tr.append $('<td />').text(field)

    $('thead', @$table).append $head_tr

    for result in @results
      $tr = $('<tr />')
      $tr.append $('<td />').text(value) for field, value of result
      $('tbody', @$table).append $tr

Finally, an example of how to pull it all together.

On the form page:

<form id="user-form" action="#">
  <input type="text" name="first_name" />
  <input type="text" name="last_name" />
  <button type="submit">Submit</button>
</form>

<script type="text/javascript">
  $(document).ready(function(){
    new Form($('form#user-form'), 'kiosk');
  });
</script>

On the results page:

<table id="results">
</table>

<script type="text/javascript">
  $(document).ready(function(){
    new ResultsTable($('#results'), 'kiosk');
  });
</script>

Given the constraints, we feel like this is great solution. Lucky for us, the browser environment was predictable and IE8 has support for localStorage. All in all, it was a fun experiment with localStorage.