Neoteric Design, Inc.

Could be better: stop OS X Lion from opening previously open windows

Wed, 01 Feb 2012 09:04:00 -0600

Sure. For years and years you knew how your computer worked—and you've come to reply on that for your livelihood and productivity. Why did Apple decide, in Lion, to destroy so much that worked so fine? I don't have the answer to that. I don't know why they believed that users could just adapt to change for changes sake, either.

One app I use all day long is Preview—looking at images, at documents, at PDFs, and legal forms, and the like. I've noticed Preview is extremely slow in Lion. It crawls!

I also realized that each time I quit Preview, did some work, then had to view a PDF, all the previous windows that had been opened before I quit mysteriously reappear. At least one reason why Preview is so slow to start is because it has to find each of those previous files and open all of them, too, along with the new file you're actually trying to look at.

Quite a change. Used to be a good old fashioned Quit ment just that!

Fortunately, there's an easy way to restore your expected behavior. In the Preferences -> General, you'll see a checkbox option, "Restore windows when quitting and re-opening apps." This is the source of this particular insanity. Uncheck it, and go back to your work.

Hola Amigos!

Mon, 30 Jan 2012 12:02:00 -0600

Getting settled in over here and getting geared up to work with all of you on future projects. We're trading industry secrets to create a mega-monster of awesomeness to help make your projects become everything they can be. I am looking forward to get my hands dirty on some of the projects we're working on, but first I thought I'd stop by first and say hello.

My background is in web design, branding, strategy, and even some markup. A key part of my design process is based on strategic goals gathered through direct interactions with you. I believe that knowing when to listen and ask questions cannot be underestimated in this day and age. I then present ideas that are targeted toward what you need, backed with rationale to convey why I think that idea makes sense. It's this kind of two-way communication that really makes for the best outcome.

In my spare time I like to bike (what a great year to be doing that in January), take some boxing lessons (but let's hope we don't need to show those) and run by the lake in the summer. So lets keep these introductions short and the get on to the good stuff.

Looking forward to meeting all of you.
Matt

Push, Deploy: Happy New Year!

Thu, 29 Dec 2011 15:28:00 -0600

Before the sun sets on the day, as we rally to deliver a few more lines of code and make our final deploys, we'd like to pause for a moment to say THANK YOU to all of our wonderful clients, friends, and families for their dedication, spirit, and support. We've had an amazing year. We toast everyone to celebrate your accomplishments and growth, and look forward to a bright, prosperous New Year!

Support multiple languages in Refinery CMS with i18n Translations

Fri, 09 Dec 2011 10:29:00 -0600

Occasionally, you may find that you need to have multiple languages available on a website. The good news is, it's a cake walk in Refinery.

Add the gem to your Gemfile

It should be there by default, but just double check in case.

gem 'refinerycms-i18n'

Run the generator

rails g refinerycms_i18n

Change the language settings

In Refinery's settings find I18n Translation Frontend Locales (Refinery) and add the ISO country name.

--- 
- :en
- :ru
- :de

That's it! Visit the Pages tab and you should see flags indicating the page language in the tree.

Edit a page and you'll see the available languages at the top. Simply select one to add content for that language.

Could Be Better: Google's Dashboard

Mon, 05 Dec 2011 17:41:00 -0600

Don't let your Dashboard become a dumping ground for alerts, notifications, and promotions. Keep your Dashboard lean and action focused with user dismissible notifications, or notification stacks.

Let's set aside Google+ in this conversation — I've found that Google+ is a pleasure to use, with some of the easiest image upload features imaginable. But for the most part, we can agree that Google's software is typically powerful, but typically a nightmare to configure and not fun to use.

Updating my Google Apps account today reminded me of this:

This Dashboard could be better.

A dashboard is supposed to help a user DASH to the task they're up to: ensure your key indicators and primary actions aren't shoved out of the user's sights.
Notifications on new features are a necessary evil — so do it, but let's get it over with!
Allow users to close out notifications that aren't relevant to them.
Notification pile-on creates visual and mental fatigue — "what, I have to read all of this now? Um... maybe later." Use notification stacking to let users read through past alerts on their own time.
If one of your notification spaces is going to become a permanent advertising space (like the Recommended Apps), then make it that: don't contaminate the usefulness of an alert space with advertisements that blind me to reading them at all.

Maybe that second alert on the new Google Apps look and feel will address all this... we can only hope!

Holiday Photo Outtakes

Mon, 28 Nov 2011 06:00:00 -0600

Check out a few of our outtakes from this year's holiday photo shoot—keep up the giggles: sign up here and we'll make sure you receive this year's holiday card too!

2011 Fall Grill Party: Beer Pairings

Tue, 22 Nov 2011 15:25:00 -0600

For this fall's menu, Nick opened with the Worryin' Ale paired with pea fritters, salsa, greens, and slices of parma ham and aged cheddar cheese.

Mmm, and the delicious tastings went on with three more jugs of award-winning beers from local brewers, Piece Brewery & Pizzeria. Some serious discussions were inspired into the night. Check out the spread!

Capybara-webkit, RSpec, and Javascript

Tue, 01 Nov 2011 14:49:00 -0500

Testing is great.

Being able to test Javascript is also great! Not knowing what you're doing when you start out is not so great. So, here are some basic notes on getting your test suite running with capybara-webkit, rspec and javascript.

RSpec, Capy-what now?

For readers not in the know, RSpec is a testing framework Neoteric Design uses to help us ensure that our software isn't buggy and prone to errors as we develop features for a given project. Capybara is an add-on to RSpec to help us write tests around a user's behavior. For example, we can write "visit home_page_path" or "click_link 'About Us'" and the test knows what this means. Finally, capybara-webkit is a driver for capybara that understands javascript so that we can test the dynamic features of our pages.

If you're still with me, and you want to know how to get your test suite up and running, then let's move along!

Resources:

Railscasts Episode 257: Request Specs and Capybara
Capybara-webkit on Github

Installation

Make sure your Gemfile includes capybara-webkit, rspec-rails, and database_cleaner:

[gist:1331627]

You need database_cleaner because database transactions aren’t compatible with rspec drivers besides Rack::Test:

[gist:1331643]

You must still use the :js => true flag in your tests. Turns out, it's not a selenium-only feature:

[gist:1331647]

And, of course, require 'capybara/rspec' and set Capybara.javascript_driver = :webkit in your spec_helper:

[gist:1331653]

That should be all it takes to get capybara-webkit and rspec up and running. It seems simple, I know. But I found that the necessary info wasn't consolidated in one spot to reference, so I hope this helps others out there.

One last gotcha with Google Analytics Code

The tests will run insanely slow if you are including Google Analytics in your DOM. So I suggest you wrap that inclusion in <% unless Rails.env.test? %>

The Free Spirit sails the shoreline

Wed, 19 Oct 2011 14:24:00 -0500

We recently joined the Lincoln Park Chamber of Commerce crew for a networking event on the Free Spirit for a sunset cruise along the Chicago shoreline. It was a perfect breather after a busy season of go-lives and a final adieu to the extended summer.

Deploying Magento with Capistrano

Tue, 18 Oct 2011 11:10:00 -0500

I recently found this little gem called capistrano-ash which includes a recipe for deploying Magento to both staging and production servers.

This walkthrough will show you how to deploy Magento with Git (and Gitosis) to both staging and production servers. Be sure to check out the full documentation on capistrano-ash.

As you’re following this, if you’re bonking out on something, check the permissions for the deploy user. It may not have sudo or write permissions.

Why do I want to do this?

Capistrano is a great solution for deploying code. In fact, you don’t even have to use it to deploy code; it doesn’t care what you are moving. Capistrano works in conjunction with your version control system to make deploying and updating your production application much easier and reliable. Rollbacks are super easy in case something goes wrong, and you can deploy to multiple environments or clusters in a snap. Less stress == happier people.

Pre-setup

You’ll need to install a few gems before we get started.

  gem install capistrano
  gem install capistrano-ext
  gem install capistrano-ash

Setup your project

Run the following commands to setup your local Magento project

  capify .
  rm -Rf config/deploy.rb; mkdir -p config/deploy
  touch config/deploy/staging.rb config/deploy/production.rb

By default this creates both staging and production deploy scripts.

Edit your deploy environment files

Your environment file should looks something like the following. Edit as needed. If you’re only deploying to a single server (versus a cluster), you can remove the role :db bit and just keep the :web bit.

  # servers
  role :web, "aaiserver.net" 
  role :db,  "aaiserver.net" 

  # file location
  set :deploy_to, "/var/www/#{application}/staging/" 

  # SSH user
  set :user, "augash"

Edit your Capfile

This may not be necessary for you, depending on your setup. Capistrano Ash defaults to using SVN, but we use git. Simply add a line to your Capfile

  set :scm, :git

Prep your environment

This will create the necessary structure as defined in your environment deploy files. Obviously substitute <environment> for either ‘staging’ or ‘production’.

  $ cap <environment> deploy:setup

Don’t forget to commit any specifics in the following files that were created.

  htaccess.dist
  app/etc/local.xml.staging
  app/etc/local.xml.production

Setup your SSH user

I’m assuming Gitosis here, but all you’re really doing is copying the public key from your deploy environment to your repository environment (passwordless SSH login). Your needs may be slightly different.

Generate your key (if you haven’t already)

  $ ssh-keygen

Copy your public key to the repo server

  $ cat ~/.ssh/id_rsa.pub | ssh user@remote-server 'sh -c "cat - >>~/.ssh/authorized_keys"'

Setup your server

Capistrano will copy files into a timestamped folder and symlink that to the current folder. You just need to point your Document Root at current.

  <VirtualHost *:80>
    DocumentRoot /srv/www/example1.com/staging/current
    ServerName www.example1.com

    # Other directives here
  </VirtualHost>

Browse to your new Document Root and create the following folders. On deploy, these folders will be symlinked to your current release.

  includes/
  media/
  sitemap/
  var/

Let ‘er rip

At this point (assuming you’ve worked out any specific environment issues) you should be able to deploy tout de suite.

On deploy the cache is cleared, shared folders are symlinked, and all is right with the world.

Take us out to the ballgame

Tue, 13 Sep 2011 17:12:00 -0500

Some of our baseball rookies got a chance to check out their first Cubs game at this year's annual summer outing with the Lincoln Park Chamber of Commerce crew. We got our real game on with classic Chicago dogs and cold beers and watched a beautiful sunset over Wrigley Field.

Mosque Alert Launch Event

Thu, 08 Sep 2011 14:07:00 -0500

Sonia and I were honored to be invited to Silk Road Rising's launch event for the Mosque Alert project.

Held at the Union League Club, it offered us an opportunity to meet face-to-face so many of the people behind is project, including actors, funders, community participants, and board members, as well as several of our current and former clients! What a pleasant surprise.

Jamil spoke about his inspirations and motivations for the project, which seeks to explore through theatre and public discourse the story of two suburban American families torn apart by a proposal to build a mosque in their community. It extends the notion of theatre to civic engagement, and I'm looking forward to taking a step back from the day-to-day production details of the web project, and becoming a participant. Take a look!

Bring your own lunch talk: Git saves the day

Tue, 12 Jul 2011 17:49:00 -0500

We use quite a few software systems within the office to enable us to work smoothly, efficiently, and as error free as possible. But none are as important as Git, a distributed Version Control System that lets each of us work on a single project without stepping on each other's toes.

Git is powerful—and like all things powerful, takes some time to sort out. We spent lunch talking about how we currently use Git across local and remote repositories, and worked through a few puzzles of typical office work interactions.

Git is highly configurable, too, and establishing the right system architecture and usage conventions is part of the fun. Today we covered the basics on committing, sharing, and deploying: enough for everyone, even designers, to be on board. Next week, the conventions around branches, branch naming, work-in-progress, stashing and more.

Hello, I'm Jordan

Mon, 11 Jul 2011 16:55:00 -0500

Greetings!

I'm Jordan, and I just joined Neoteric Design— taking over design duties from the talented Ed Blake. I've spent the last three weeks getting acquainted, and am very excited to continue my career growth with this team.

So far, I've been learning about our design process from start-to-finish, working in the Refinery CMS, and discovering the basics of working in an agile environment. I had the chance to collaborate with Ed on design work for the Silk Road Rising Theater Project, and am now learning our front-end markup process with Aitch. I'm also in the early stages of planning an application redesign for our client, APDA, which has been a very interesting challenge to tackle.

In my free time, I've been exploring Chicago and loving it.

I look forward to continuing this learning process, and I'm eager to begin meeting and working with our clients in person.

So Long Chicago, Hello San Francisco!

Thu, 30 Jun 2011 17:04:00 -0500

It is with both excitement and some sadness that I share the news that I’ll be leaving Neoteric Design. I’m on my way west to begin a graduate design program at the California College of the Arts in San Francisco. The sad part of it all is that I’m parting ways with the Neoteric family and the wonderful city of Chicago. On the upside, I’m heading to another world class city and a highly regarded academic institution.

Fortunately we’ve had ample time here at Neoteric to prepare for the transition and we recently brought on Jordan Young, a talented designer who was working at The Daily in New York before joining the team. I’ve been working closely with Jordan over the past couple of weeks to bring him up to speed on all our projects, as well as our standards and practices. He’s impressed us all with his sharp design skills and quick learning and I'm eager to see the work he creates for upcoming projects.

It’s a been a fun and productive four years at Neoteric! I’m immensely proud of the work we’ve created and I’m sure it played no small part in my acceptance into CCA.

Sincerely,
Ed

Future of the Mobile Web: The 2011 Breaking Development Conference

Mon, 18 Apr 2011 10:26:00 -0500

Last week, I was in my native state for the first time since my birth. Under the atrium of what I assume is Texas' 4th largest bio-dome (sans Pauly Shore, unfortunately), I learnt a great deal about the state of the mobile web and where it's headed.

Speakers & Sessions

Peter-Paul Koch of quirksmode.org presented models for third-world mobile app distribution and payment systems
Brian Fling of pinch/zoom gave incredible insight on his learned lessons, as he literally wrote the book on mobile design & development
Brian LeRoux of nitobi (makers of phonegap) talked to us about Nitobi's involvement in the Device API Spec they want drawn up for apps delivered to the mobile browser
Stephen Hay, who has contributed to A List Apart, shared his thoughts on Responsive Design in the Real World, focusing on the understanding that it goes beyond a simple grid & layout change (what we now should call adaptive layout)

Obviously, there were a lot more great speakers & topics, but these are the ones that stood out to me and will be the focus of my conference summary.

Third-World Distribution & Payment Systems

The concept of an app store just won't work here because the customer doesn't even have a bank account, let alone a credit card. So there will be innovations in payments and app distribution. In Kenya, for example, electronic funds are managed through SIM cards, and exchanges are made through text messages. Apps will likely be distributed via bluetooth from one customer to the next, and payments will utilize this SIM card approach or by adding fees to their phone bill.

Brian Fling's Learned Lessons

Be skeptical, especially of analyst's reports. Lots of 'analysts' basically talk bunk to boost a story, and what they are saying doesn't necessarily reflect the desires of the key players (ISPs & hardware manufacturers)
There is no prevailing wisdom in the mobile web. We are at the beginning of a change in computing & user interaction. A lot of experimenting will take place.
Mobile users have incredibly sophisticated spacial orientation. They can easily track screens they have swiped in and out of view.
Native application development costs rise exponentially as you support more devices. This is true of mobile web, but the costs are 3/4 or even sometimes half.
For now, a great mobile strategy creates more questions than answers.

Brian also gave us new ideas to approach in our design, such as working with the hexadecimal grid(all mobile devices are on base-16) and the horizontal grid.

The Device API Spec

Brian LeRoux gave us his expletive-filled presentation on the necessity of supporting a mobile device API spec. For the not-so-techie, a mobile device API spec is basically a set of standards for any vendor to implement in their device if they want to make things easy for us to work with. Essentially, when the working group is agreed, and vendors feel secure about it, we should be able to create mobile web apps that work in the browser and access the same functions as a native app, such as cameras, calendars, maps, GPS, accelerometers, etc. Nitiobi and Phonegap are both working hard to contribute to this spec and get it into the real world this year.

a mobile device API spec is basically a set of standards for any vendor to implement in their device if they want to make things easy for us to work with

Responsive Design in the Real World

Finally, Stephen Hay gave us very good information on what it means to really implement a responsive design. The term 'design' can mean different things to many people, and it's important to define what we mean when we use it. Design has a broader sense than "graphics, pictures and layout". Design, in our world, usually means how it's constructed, how it feels, how it interacts, and yes, how it looks on the surface.

So when our design responds to a mobile device, what does that mean? Well, it means more than adapting the layout.

What is your information architecture? Which pages & actions are necessary for mobile use? Attention must be short & focused.
How does it interact? Does it swipe? Can I zoom in or out of this? Should it geolocate at this point?
What is the circumstance? What is most likely going on around the user when accessing this information? Are they casually waiting for a train, or are they running in a rush to grab the last one on time?

Responsive mobile design means more than adapting the layout.

All in all, the conference was a huge success. I was impressed with the depth to which the speakers went on the core concepts of mobile design and development. I had many side conversations with these key speakers and they taught me a ton not only about coding techniques, but also the important ideas to focus on an accurate, bigger picture.

STA Talk: Designing and developing for iPad and iPhone

Thu, 14 Apr 2011 12:08:00 -0500

On Tuesday I attended a talk put on by the Society of Typographic Arts and hosted by McGarryBowen in downtown Chicago.

The first speaker was Justin Stahl, a designer and developer based in Chicago and known for a number of apps including The Typography Manual and The Font Game. He began by outlining the arc of progression behind successfully developing an app which he segmented into four phases: research, wireframes, design, and development.

A useful recommendation from Justin's talk was, when researching a concept, to utilize Apple's Human Interface Guidelines (HIG), a document we have on file here at Neoteric and use often. Also useful was the idea of both coding and designing an app at the same time. Developers can work strictly with the HIG tools to begin programming while the designer refines the overall look and feel. We sometimes use this construct (often known as the 'agile method' of development) when building complex sites but have yet to try it with app development.

The second speaker was John Bonadies, a designer from Champaign who – through Kickstarter – has an app in development which essentially turns your iPad into a virtual letterpress. John showcased the app which is about 80% complete and talked about the challenges that come with bringing a complex idea to fruition and how important it is, as a designer, to find a good programmer who can not only develop the end product, but also work with the designer to refine the app along the way. The app, called LetterMPress looks like a ton of fun and I'll be sure to pick it up when it arrives in the store sometime in June.

To find out more about the LetterMPress check out the video below from Kickstarter:

Neoteric Design Office Extends Earth Hour Throughout April

Fri, 01 Apr 2011 14:52:00 -0500

As part of our ongoing efforts to green the company, the Neoteric Design team is leading a bold Earth Hour inspired campaign. We will forego electricity for the rest of the month, returning to computers, email, mobile devices, and the espresso maker in an office "turn it back on" celebration April 30th.

"I've never been much of a fan of computers anyway," designer Ed Blake noted when informed of the new initiative.

Company owner Nick Gracilla agreed heartily with the idea. "I've always advocated getting in closer, more personal touch with our clients," he said. "For the rest of April, we'll have to actually be in our client's offices, talking face to face. I'm planning on meeting up with one of our editors in Hawaii right away in fact."

Developer Joe Sak is thrilled with the challenge. "I'm always trying to improve my deep programming skills, so I don't have to look to Google so much," he said. "I'm already using a modified lite-brite against the windowpane to simulate iPhone screen transitions."

Opinions were not unanimous, however. Interaction designer Nic Haynes, still somewhat new to the team, was struck by the breadth of the vision. "I'm supposed to... um, what?" Sonia Yoon, producer, concurred, noting "we already have to listen to the clip-clop footsteps of the folks upstairs... and now we're supposed to use these state of the art Underwoods? I'm gonna need to bring an MP3... I mean, my friends' bands in during the day."

Could be better: Chase cell phone number field

Wed, 30 Mar 2011 10:50:00 -0500

Humans shouldn't be forced to enter phone numbers or zip codes in special formats for machines. Instead, machines should take what we give them, and nicely format them for us.

A text message fraud alert from the bank seems like a good idea to me! So while doing some banking on Chase's otherwise excellent online banking system, I signed up for it. I didn't have a lot of time, and all they needed was my mobile number. Right?

No, not quite. I had to enter my mobile number in the right way, too. This could be better in a number of ways:

The form fields didn't use labels or hints to guide my text entry. How could I know you wanted dashes, versus (312) parenthesis, etc.?
The angry red warning message is actually wrong. My phone number is exactly correct; it's the format that's wrong. At least be honest: you want me to jump through your special dashes-hoops.
But, why do this at all? It's a very simple process for a web application to parse through a phone number and separate out the area code, prefix, and suffix of the number. Why should I do this for the computer?

While a text message fraud alert system seems like a great idea, I'm left feeling like it's going to be a trouble. If it's this hard to get working to start, how can I trust it with something as sensitive as banking fraud?

We've designed our first custom typeface

Fri, 18 Mar 2011 15:08:00 -0500

I spend a good deal of my time here at Neoteric working with (and manipulating) typography. After a while, I decided it was time we created our own.

The photo above highlights my first creation, a font I've called Ten Till in part because it mimics my handwriting which can sometimes appear rushed. I first crafted each symbol and letter (lowercase and uppercase) by hand using a marker. From there I scanned the sketches and imported them into Illustrator where I proceeded to digitally vectorize and manipulate each character individually.

Once I was happy with all 106 characters, I used a third party font generator to wrap it up into a web friendly format. With the file in hand we can now use this font with live text on the web thanks to HTML5 and the @font-face tag. Look for it in future designs!

Checking the online status with PhoneGap & jQuery

Mon, 14 Mar 2011 12:57:00 -0500

When using PhoneGap to build native iPhone projects you need to setup offline detection, especially if you're making AJAX calls. PhoneGap has a very easy to use API for this, but it can be a little tricky when used in conjunction with jQuery.

You're probably already familiar with jQuery's on-ready state:

$(document).ready(function(){
// Stuff to do after document is ready
})

But PhoneGap has its own ready state that's completely agnostic of jQuery:

document.addEventListener("deviceready", onDeviceReady, false)

Let's make PhoneGap's listener a little more jQuery-esque for the sake of consistency:

$(document).ready(function() { 
  $(document).bind('deviceready', function(){
    // Phonegap ready
    onDeviceReady()
  })
  // Your main code
})

We also need to define some necessary functions before $(document).ready().

// PhoneGap is loaded and it is now safe to make calls PhoneGap methodsfunction onDeviceReady() {
  navigator.network.isReachable("google.com", reachableCallback, {});
}
// Check network status
function reachableCallback(reachability) {
  // There is no consistency on the format of reachability
  var networkState = reachability.code || reachability;
 var states = {};
  states[NetworkStatus.NOT_REACHABLE]                      = 'No network connection';
  states[NetworkStatus.REACHABLE_VIA_CARRIER_DATA_NETWORK] = 'Carrier data connection';
  states[NetworkStatus.REACHABLE_VIA_WIFI_NETWORK]         = 'WiFi connection';
  
  // We want to be able to check the online variable in our jQuery
  if (networkState != 0) online = true;
}

Now, here's the problem: PhoneGap initializes asynchronously to jQuery so if you set an online state in your callback, jQuery will never get it. Once jQuery hits the onDeviceReady() function it will wait until it completes, but it won't wait until its callback completes.

The solution? We set the online state from the browser itself before jQuery initializes (we'll also get the online state from PhoneGap after):

var online = navigator.onLine

Your code now should be something like so:

// PhoneGap is loaded and it is now safe to make calls PhoneGap methods
function onDeviceReady() {
navigator.network.isReachable("google.com", reachableCallback, {});
}
// Check network status
function reachableCallback(reachability) {
  // There is no consistency on the format of reachability
  var networkState = reachability.code || reachability;
  var states = {};
  states[NetworkStatus.NOT_REACHABLE]                      = 'No network connection';
  states[NetworkStatus.REACHABLE_VIA_CARRIER_DATA_NETWORK] = 'Carrier data connection';
  states[NetworkStatus.REACHABLE_VIA_WIFI_NETWORK]         = 'WiFi connection';
  if (networkState != 0) online = true;
}
var online = navigator.onLine || false;
$(document).ready(function() { 
  $(document).bind('deviceready', function(){
    onDeviceReady()
  })
  // Your main code
})
Now if you about to make an AJAX call to load up some dynamic data, you can easily check to see if you're online
if(online) {
  // make a request
} else {
  // load from localStorage
}

Be sure to checkout the official PhoneGap documents for more info: http://docs.phonegap.com/

Time for a checkup: the metric_fu gem and your code's health

Fri, 04 Mar 2011 09:20:00 -0600

On Tuesday, I went to the regular Chicago Ruby meetup, where Jake Scruggs talked to us about his gem, Metric_Fu. We've been thinking a lot about our continuous integration patterns lately, so it was an interesting and relevant presentation for Neoteric.

For the uninitiated, continuous integration is a fancy term for regularly testing and refactoring code (and refactoring essentially means "make leaner and clearer"). Metric_fu is a small piece of software that runs against your code and tells you certain things about it.

For instance, metric_fu reports on:

Code complexity
Repetition
Percentage of test coverage (how much of your code has tests written for it?)
Code smells (pieces of code that may be leading to problems)
Design pattern practices (is your code going against convention?)
Churn (which files are changed the most over time, making them most vulnerable to bugs)
Best practices (don't write the code like this, write it like this)

At the end of the day, it's a machine trying to help you make decisions about human aesthetics, so we're advised to take the reports with a grain of salt.

But code health and clarity is essential for its stability and future development from collaboration with others. We like the idea of gathering this kind of information, and we'll soon be implementing metric_fu into our development cycle.

Your Blog is Our Blog

Tue, 01 Mar 2011 09:10:00 -0600

When we found out about RefineryCMS, we were elated. It had everything we wanted on the barebones level plus the ability to develop on top of it just like we're building a Rails app from scratch. It abstracts the tedium out of backend tasks and administrative screen development.

So it was no big deal to start writing an engine for blogging that we could use time and again for our clients. We focused on their most common tasks. We built in our most repeated bits of code, so that when we design a client's website, we get to work on the bits that are tailored for them. It was our clients and their feedback that informed our technical and design decisions.

What most clients needed, we baked right in:

Categories of posts
Archiving old posts
"Save as Draft" for internal collaboration and review
Custom publish dates so they can queue up future posts
RSS feeds
Posts associated with individual authors based on their Refinery login.

And some examples of what we've added for custom installs:

Tags & tag-based searching
Excerpts
"Feature on your home page" option
Facebook and Twitter sharing

...we've got nothing short of the highest praise for the Refinery core team

The team at Resolve was really happy to have us involved in the project because our own experience directly with our clients had shaped the development of the blogging engine. They invited us to become core contributors to the project, which is a fancy way of saying that we participate in controlling the official software and its development. Yes, it's open source and anyone can offer their own version and submit patches and forks, but ultimately our hands share a spot on the button to approve official changes. It's a great and honored feeling.

And we've got nothing short of the highest praise for the Refinery core team and its vast community of open-source contributors. Without them and their daily dedication, our work wouldn't be nearly as fun and interesting as it has been in the past year.

Finally, we're glad to have real people like our clients working in the real world to show us exactly how our software should work and feel.

If you'd like more information about the Refinery Blogging Engine, the official gem for installation can be found at RubyGems, and the official repository can be found at Github.

Could be better: Book Cover

Fri, 25 Feb 2011 10:45:00 -0600

I'm an avid history buff and my latest focus of interest has been the story of Chicago. Looking to learn more about the Prohibition era of the 1920's and the city's most famous gangster Al Capone, I did a quick search on Amazon and came across Robert Schoenberg's biography titled Mr. Capone from 1993. The reviews were full of praise and the overall rating was 5 stars—I was sold.

The paperback arrived (all 500 pages) a week later and my first thought upon seeing the cover was, "Really? Wasn't this published by Harper Collins?" The necessary components were there (book title, subtitle, author, photograph) but the composition felt rushed and amateurish.

For starters the rounded serif typeface used in the title seemed completely out of place. Capone was one of the most feared mobsters in history—not a guy with an ice cream truck. It seemed the designer tried to compensate for this oversight by setting the type in a cherry red, which can work if set within a complimentary palette, but in this instance the designer appears to have thrown darts at wall of color chips.

The additional colors chosen were a flat bronze for the background and a burnt red for the subtitle. I can imagine a spectrum where these two colors work nicely together but toss in the cherry red and the combination is simply garish.

The subtitle and author name are set in Franklin Gothic Bold Condensed, which is a truly beautiful typeface dating back to 1902, but the different typographic characteristics (letter-spacing, color, capitalization) harms the balance between the content.

Thus, I decided it would be a worthwhile exercise to re-craft the cover of Mr. Schoenberg's book (not to mention it fits in nicely with our 'Could Be Better' blog theme). It started as one cover but quickly morphed into three different concepts which I've posted below.

The first version uses a hip throwback font called Geomancy designed by One by Four as well Lance Condensed for the subtitle and author.

Oh how I love the Knockout type family.

Gotham, another brilliant typeface from HF&J.

Ps. I finished the book a few months back and I, too, would give it a 5 star rating.

Could be better: Sub-Zero and Wolf's unsubscribe form

Thu, 06 Jan 2011 14:09:00 -0600

Recently I received a newsletter from Sub-Zero / Wolf. I don't recall ever having signed up. But I'm a foodie, so perhaps I was signed up through a magazine. I'm not in the market for new appliances though. I don't want to receive it.

I click the unsubscribe link (because they're a reputable brand; it's not likely this is spam, right!?) and came to this web page:

Keep in mind my context: I'm processing email in the morning, and really want to spend 10 seconds or less on this.

I click unsubscribe from all... and nothing happens. So I click again. And again. And again.

The first thing I see is the "On This Page" block, with two blue links: available publications, and unsubscribe from all. Well that matches what I'm trying to do! I click unsubscribe from all... and nothing happens. So I click again. And again. And again. I probably clicked it ten or so times, expecting something to happen on the page. Maybe a slide out window? Or a a popup light box? A confirmation page? Is the page loading? Is my Internet down?

Well, none of that. When I look at the underlying code, I realize these are in-page anchor links to the two content blocks below. However, on my monitor, the page doesn't scroll. So the anchor links aren't doing anything. I'm getting no feedback at all on my action; I'm just spinning my wheels.

Could be better

It would be better if the user's core actions -- unsubscribing -- were first and foremost on this page. The color differences on the anchor links drew my eye to those interfaces, which aren't doing anything: the color would be better spent on the core action. Removing the useless anchor links and top of page links will further de-clutter the page. And really, I don't need the instruction copy that's redundant on the content block titles as well as the checkbox labels. Ideally, rather than a single generic subscription and un-subscription page, this could have gathered additional information about why I'm unsubscribing, and wish me well on my travels on the Internet.

This is just a draft and isn't typographically designed, but this could be better:

I'd feel a lot better about the honesty and helpfulness of the Sub-Zero / Wolf brand and products through something that made my life easy this way. Gosh, if unsubscribing is this easy and fun, maybe I should take a look at that range I always wanted...

Welcome aboard Nic!

Sat, 20 Nov 2010 12:14:00 -0600

Nic Haynes' application certainly caught my attention: "I'm your next developer," he wrote, "with a beard." Hailing from outside Nashville, he comes with chops in user interface redesign, typography, and clever code. Already skilled in HTML5/CSS, MySQL, and PHP, he has a solid background in jQuery, MVC, AJAX, Git and Apache.

We invited him up for a day of interviews, which turns out to be a lot of eating too. Breakfast meeting, coffee, lunch with the team, afternoon coffee. To get a feel for our working style, we put him through his paces with a quick practical. Sonia noted how aggravating it is to just miss the bus, or go out too early and wait in the cold for it.

What do design/developers do? Of course, we wrote a Rails application! It grabs the Chicago Transit Authority's data feed on the GPS location of the #22 and displays, European train station style, the next 3 upcoming bus arrival times as well as any alerts. Nic did the user interface that shows on the shared internal monitor, and integrated his work with the greatest of ease. Not bad for two hours work!

Of course, having a Nick and a Nic in the office doesn't work too well in our open collaborative environment.

Welcome aboard, "Aitch!"

Neoteric Design Fall Grill Party

Wed, 13 Oct 2010 18:30:00 -0500

This past Friday, we got together for an after work fall grill party at my house. I love to cook and try out new recipes, usually with whatever I find at the local famers markets. Many thanks to Green City Market and the Andersonville Farmers Market for this year's bounty.

As a bonus, my mom was in town visiting for the weekend: hi mom! Happy Birthday!

Windy City Rails 2010

Sat, 11 Sep 2010 16:44:00 -0500

Joe Sak and I had an amazing time at Windy City Rails 2010 this fall. The conference schedule was filled with goodness on code refactoring and monitoring, rails development best practices, and improving code quality across teams. Joe split off during the afternoon to contribute his efforts towards the Obtiva coding dojo: at the end of the day, the team created (from scratch!) a chat IM server that conference attendees were using. Outstanding!

A hearty kudos to the organizers of this event. I always meet new entrepreneurs, developers, and coders from across the midwest, and learn so much about what's going on in our industry.

Build a slick portfolio w/ jQuery & the Cycle slider plugin

Thu, 08 Apr 2010 10:36:00 -0500

I'm going to demonstrate how Neoteric Design builds a sliding portfolio, a design element which can be used to show off your best project work, a series of promotions for various sections of your site, or anything else you can imagine that makes sense in rotation. Here it is:

Arts & Business Council of Chicago

Helping Arts & Businesses Connect

The Arts & Business Council of Chicago has been serving Chicago for 25 years to strengthen the arts community through its partnerships, programs, resources, and services. We're pleased to announce the launch of a bold, redesigned website that conveys the energy and spirit of the organization. A bright, new look with strong imagery and type styles helps extend the existing brand. Resources for business volunteers and non-profits are easy to find and registrations for workshops and events are simple to use and update. A news blog keeps visitors up-to-date about trends and issues affecting the community.

Visit website »

Lincoln Park Chamber of Commerce

The Cornerstone of Your Success

The LPCC serves as a catalyst for business success and economic development in Lincoln Park. The redesigned website features an easy-to-use content management system, extensive news, blogs, and media feeds, and integration with the Chamber's membership management system, ChamberMaster.

Visit website »

Appolicious

Find mobile apps you'll love

Appolicious now has curated apps! As the mobile app landscape shifts and evolves, Appolicious stays on top with more app discovery features. Users can now create their own collection of applications, souping up the browsing experience. Go on, wrangle up your own set!

Visit website »

You can skip straight to the source code if you'd like.

Several times, I've been asked how to use the Coda slider jQuery plugin to build a web portfolio and every time I strongly recommended the jQuery Cycle plugin instead.

Why Cycle and not Coda?

Coda's markup requirements are too bulky and the pay-off is a single slide left/right transition. Cycle offers about 2 dozen transitions and a lite version that is comparable in size to Coda (though only with the 'fade' transition).

Both allow use of the jQuery Easing Plugin, which I recommend to fine-tune the sliding transition. When comparing the Coda settings options versus the Cycle settings options, we find a lot more options available from Cycle that are also a little easier to understand just from reading the name.

OK, these are just a couple of reasons for me, and I'd like to move on to demonstrating the portfolio.

Let's Get Started

Ingredients:

Construct the HTML

[gist:332865]

Following the example in this gist, create the HTML for the portfolio content. Each top-level DIV inside "#cycle_area" is considered one portfolio piece. In fact, Cycle attempts to load any top-level element into rotation, so be sure this part is consistent. Cycle best handles a list of IMGs or DIVs. For this example, I'm choosing DIVs to demonstrate its ability to rotate full chunks of HTML.

Wire up the JavaScript

Now that your HTML is complete, it's time to write the javascript! I'm just going to go over it line-by-line:

[gist:332868]

$('#cycle_area').cycle({
- Initialise the plugin on the desired DIV (#cycle_area in this case)
fx: 'scrollHorz',
- We're going to use the scroll-horizontal effect. (effects browser)
speed: 500,
- The speed of the transition, half a second (500 miliseconds)
timeout: 5500,
- The time between transitions (5.5 seconds)
pager: '#pager',
- The pager ID in the HTML €” used to build a clickable, numbered list of the slides
pagerAnchorBuilder: buildThumbnails,
- A custom function we're going to write to use thumbnails instead of numbers in the pager
easing: 'easeInOutCubic',
- The easing method I love most!
pause: true
- The slides will pause automatic transitions while the mouse is over one of them.
});
- Close the options hash and end the method call!
- The full list of Cycle options

A Custom Method to Build Thumbnails in the Pager

function buildThumbnails(i, elem){
- Define the function, passing it the index and the DOM element
  - The DOM element refers to each DIV being cycled. You can traverse this element using normal jquery
src = $(elem).find('img').attr('src');
- For example, here we are finding the image tag's source and setting it in a variable
title = $(elem).find('h2').text();
- Grab the text inside the H2 and set it to 'title'
html = '' + title + '"><img src="' + src + '" width="50" height="50" alt="'+ title +'" />';
- Create a link with the image resized to thumbnail size
return html
- This function will run every time a cycled element is found, and will return its results. Therefore, we end up with a thumbnail for each element that links to its slide.
}
- End your function!

At this point, you should check your page. It should be rolling along smoothly!

See it in Action:

If all went well, you should expect a portfolio that works much like our demo. If you need help, just leave comments.

Code Examples:

Construct the HTML:

Include the JavaScript:

Write the JavaScript:

See the HTML code

Full Tutorial & Demo:

The demo

The tutorial is available on GitHub

Roundtable discussion at DePaul's Careers in Information Technology

Tue, 02 Mar 2010 08:54:00 -0600

I'm looking forward to meeting up with DePaul students interested in technology careers in a program sponsored by the DePaul Career Center. I'll be volunteering time in a series of roundtable, network-style discussion sessions. I'm always interested to hear the entrepreneurial dreams of students, to share my own story, and share resources and experiences that might be helpful along the way.

What kinds of questions would you have, if you were starting out your career?

AIGA Chicago Mentor Program a great success

Mon, 15 Feb 2010 09:01:00 -0600

I spent a few hours Saturday at Gravity Tank, learning more about the AIGA Chicago Mentor Program.

Dawn Hancock at Firebelly Design is doing an amazing job, marshaling over 60? 80? people, introducing the mentor program, and breaking people out into small group discussions based on their interests.

Many of the students coming out of art and design programs in Chicago had similar questions, focused on the role of interactive design, web design, and their chosen design fields. It's quite a struggle for print or graphic design students to both master the basics in their chosen field, and also deal with a market place that seems to offer more opportunities in web or interaction design. And both of those fields require, of course, an understanding of HTML markup if not programming languages outright.

We had a great conversation on the role of Flash and Flash programming, Javascript, and ways to prepare for a career in design--regardless of the medium.

There's a Facebook group if you'd like to learn more or come to the next meetup.

An Event Apart 2009

Wed, 14 Oct 2009 14:30:00 -0500

I had the opportunity to attend the An Event Apart conference here in Chicago at the beginning of this week and I must say this being my first time at their event I was truly impressed. The presenters were greatly in tune with the advancements and shifts occuring in the industry and I found their insights and expertise really enlightening.

Presenting at the two day conference were some of the big names in the web world including Eric Meyer, Dan Cederholm, Jeffrey Zeldman, and Jason Santa Maria. Eric's presentation pertained to the advancments of Javascript over the past few years in part due to the advancement of rendering engines within our browsers. With the help of toolkit sets such as JQuery (one of our favorites), Modernizr, and MooTools web developers can create all kinds of dynamic features that take almost no time to load and run at lightning speed. One prime example he cited was Google Maps. Remember how just a few years ago to move the map around on the page you would have to click an arrow on the side of the map and wait for it to reload? Thanks to the ever-increasing power of Javascript rendering engines, browsers can now do much of the work on the fly.

Dan Cederholm (from Simplebits) provided a glimpse into his book Handcrafted CSS: More Bulletproof Web Design and discussed what he coined "progressive enrichment" with CSS3. Rounded corners, drop shadows, transitions, text shadows, the capabilities of CSS3 are a big step forward and you as a developer should start to make use them of now. One key theme of the conference and Dan's talk was the idea that websites do NOT need to look exactly the same in all browsers (to support this idea Dan created a quick example). As long as the added CSS techniques don't impede or disrupt the user's experience in a particular browser we should feel free to reward the users who work with browsers that support them (Firefox and Safari for the most part).

And those two talks were just the tip of the proverbial iceberg. Jason Santa Maria discussed thinking small, Aaron Gustafson introduced the audience to eCSStender, and Andy Clarke talked about designing within the browser. I'm certain I'll be revisiting all the slides this weekend, as well as using them for reference in the future. To anyone thinking of taking part in a conference from An Event Apart, I highly recommend the experience.

Dan Rubin giving his talk "Designing Virtual Realism".

Aaron Gustafson explains the inner workings of eCSStender.

Jason Santa Maria fields questions from the audience.

Windy City Rails 2009

Mon, 14 Sep 2009 11:45:00 -0500

Nick and I had the opportunity to go to Windy City Rails, a one-day conference for Rails developers, over the weekend. It was a really great day, jam-packed with useful talks. We also learned a ton in the rSpec/Cucumber afternoon session (thanks to David Chelimsky and Corey Haines). And, perhaps surprisingly, the catered food was actually good!

If you're familiar with github, I've posted some notes that I took during the morning sessions over at http://github.com/jgdavey/wcr-notes.

I'll likely be writing a follow-up post about some of my conclusions, especially after some lively discussions.

Thanks to the whole Windy City Rails team for a great day. I can't wait until next year.

Exciting Transformation for Urban Initiatives

Mon, 17 Aug 2009 10:34:00 -0500

One of the first things I did upon moving to Chicago in the fall of 2005 was to start coaching/mentoring for a non-profit kids outreach program called Urban Initiatives. Since that time (hard to believe it's been almost four years) the program has grown in leaps and bounds and supports over 330 young kids in the Chicago Public Schools. The program has gathered support from all kinds of circles including Arne Duncan (President Obama's Secretary of Education), Nike, and Illinois State Senator John J. Cullerton.

In June of this year, Urban Initiatives decided it was time for a site redesign along with the integration of a content management system allowing for site updates with ease. We here at Neoteric were glad to help. With the introduction of a CMS we were able to build an easy to update gallery feature that allows program supporters to see photos from events and outings.

Once the content management system was in place, Urban Initiatives was able to publish all kinds of articles relevant to the organization. In addition to news from the program, they were able to publish testimonials from supporters such as school principals and community leaders.

We're glad to know, as the program continues to grow, the site will too. If you'd like to view the new site or find out more about the program, visit urbaninitiatives.org.

Network Solutions 'redesigns,' crafts obscure brand labels for previously understood products, services

Tue, 04 Aug 2009 14:50:00 -0500

I had to laugh when I logged into a client's Network Solutions account this morning. I was greeted with this friendly notification: customers spoke, and Network Solutions listened. Hmm, I thought. That's a good thing!

Then I read on...

So, if I understand this correctly, Network Solutions crafted branded, trademarked, meaningless terms to overlap on products and services that were previously well understood (like E-Mail) or somewhat understood (like SSL Certificates). Tell me, does "nsProtect(tm)" help this conversation at all?

I cannot wait for my first support phone call.

Customer: "My nsMail(tm) isn't working. I think it's because our nsSpace(tm) went down last night, possibly because I didn't renew my nsWebAddress(tm)."

Me: "... um, sorry?"

Photos from Apple's World Wide Developer's Conference

Mon, 29 Jun 2009 17:49:00 -0500

Back in June, I attended the Apple World Wide Developer Conference 2009 in San Francisco. It was my first WWDC; I was pretty excited. And San Francisco is pretty lovable.

I ate at the Ferry terminal quite a few times. Great Farmer's Market on Saturdays.

It's Kurt, the CyberGuy, reporting live from the street!

The app wall was breathtaking. Every time an iPhone application was purchased, it would throb on the monitor. Great fun to see which apps were really firing, or to find your favorite app on the wall.

Advertisements disguised as editorial content: who wins?

Tue, 02 Jun 2009 10:21:00 -0500

I was reading one of my local newspapers online this morning, and was a bit surprised on the copywriting in the sidebar for an article. A "Shocking" online report regarding colon cleansers? Why would the Chicago Tribune be writing online reports about that?

Clicking through the article only continued the confusion: three products, each evaluated against each other, each with testimonials, reviews, stars, and even a convenient "buy" button...

And that's when I realized I'd been taken. I was on a product sales website, reading falsely written testimonials, by false doctors, with false reviews. And I'd been taken there through a false article promotion, through a newspaper resource I tend to trust.

Who wins with all these lies and deceptions? The product company doesn't win by betraying my trust. The newspaper certainly doesn't win just by reporting advertisement click revenue. I'm three times more suspicious of all their promotions now. There, at the top: are those really news photos? Or another fake article advertisement? Off there, in the sidebar: really a journalist-written, editor vetted article?

There's often a good amount of give-and-take tension between advertising and usability. But as newspaper revenue shortfalls increase, I'm seeing more and more obtrusive, abusive, and plain deceptive advertising practices. Newspaper revenue shortfalls aren't resolved by betraying the reader's trust. Trust is a lot more expensive to build than readers.

Chazen Museum of Art in Madison

Wed, 13 May 2009 16:33:00 -0500

While back home in Madison visiting my Mom over Mother's Day weekend, I ventured to the Chazen Museum of Art on the campus of the University of Wisconsin. On display along with the permanent collection were two impressive exhibitions. The first titled Underground Classics: The Transformation of Comics into Comix was a massive collection of "underground" comics from the 60's, 70's, and 80's by the likes of R. Crumb, Denis Kitchen, Jay Lynch, Art Spiegelman and more.

The exhibition focused on how underground comics (or comix) played a role in the cultural rebellion against mainstream society in the 60's. From drug-altered states to sexual freedoms, comix such as Zap and Fabulous Furry Freak Brothers ushered in not only a new comic style but also a new culture altogether.

R. Crumb, SNARF Magazine cover, 1975

Also on display was an amazing collection of Kawase Hasui color woodcuts dating primarily from the 1920's and 1930's. Hasui has been named a National Living Treasure by the Japanese government and his woodcut work portraying a timeless Japan is truly awe-inspiring.

Kawase Hasui Color Woodcut circa 1925

A couple of pieces from the permanent collection at the Chazen

Nikolai Alexandrovich Ionin, Cable Factory (Sevkabel Factory), 1935

A close up of the fine details contained within a painting by Thomas Blackwell, Takashimaya, 1974

SEO, usability challenges with mobile optimized websites

Tue, 12 May 2009 10:39:00 -0500

I had the good chance of meeting up with friends in New York City last weekend; it's been a long time since I've had the chance to explore the town. I used to live in Long Island, but that was more than 10 years ago.

Needless to say, I was making extensive use of my iPhone to get around, find restaurant recommendations, figure out where I was and where I was going, and generally make my life easier. I haven't traveled extensively with the iPhone yet, but it is really a transformative experience.

What's a mobile optimized website?

Apple has positioned the iPhone and Safari web browser as "fully web accessible": no separate iPhone website is necessary to view and surf content. And, indeed, it's likely the best browser of its type on such a small screen. Content in various blocks can be zoomed-in and zoomed-out with a simple double click, and it's fairly easy to get around.

Having said that, it's also pretty slow and, let's face it, not optimal. The advertising space available to your desktop web browser is not the same on a portable device. Performance suffers, navigation suffers, and in general it's not that easy.

Mobile optimized versions of websites are supposed to help with this problem. By trimming down navigation elements, images, and content to the bare minimum required, mobile site versions are supposed to be faster, easier to use, and to the point for the mobile user. We've been working on an iPhone optimized version of our own site [http://bit.ly/jqHUm], which is driven from the same content that runs our 'desktop' version. Great work.

What's the usability challenge?

Overly helpful websites automatically push iPhone users to the mobile versions of their sites. ButiPhones do not require a mobile optimized version: it may or may not be nice to have, but it's certainly no requirement. So the first mantra of usabilitylet users choose what they'd likeis being violated here. In some cases, it's impossible to click through to the full version of the site at all. So users are trapped in a mini mobile version of the site.

This is a particular problem when you consider inbound links from search engines.

Consider: I'd like to eat at a French restaurant in Chicago, and Google that up on my iPhone. I see that CitySearch offers a whole index of french restaurants:

Easy enough! But when a user clicks through on the CitySearch listing, what does she get?

The iPhone optimized version of the siteall fresh and ready for me to, again, specify my search criteria. This is a huge problem. It's difficult enough to type in the small form field areas; moreover, the chance that I'll find the content link that I wanted, that Google already found for me, is slim to none.

This happened to me probably 8 or 9 times over a long weekend. Flight status checks? Nope. Restaurant reviews? Nope. Show times on Broadway? Nope nope nope.

What should the mobile site rules be then?

If you offer a mobile version of your site, ensure users can opt out of it if they like.

A simple 'full version' link somewhere in a footer or header would suffice. Ensure users have the option to see what they'd like to see.

Ask -- don't require -- if users would like to use your mobile site version.

Rather than using a default rule that directs all mobile-web-clients to the mobile version, consider offering a prestital page that gives users the option if they like. Also, keep in mind that the iPhone's safari is significantly more advanced than other mobile platforms. An iPhone user has higher expectations of a mobile version of a site, and will feel jilted if you shut them off to the plain text, no color version.

Inbound URLs should map to mobile content versions of the same content.

This last item is particularly challenging for mobile sites that cater to iPhones, because what makes content transitions, swipes, and page flow so pleasant to look at also obscures URL paths. Regardless it's got to be done. If a user is coming to your site based on a Google search result, they want the contentnot your blank, mobile version. AA.COM? CitySearch? Flightstats.com? I'm talking to you guys.

Blueprint CSS - Easier Cross-browser Web Design

Thu, 07 May 2009 10:30:00 -0500

At Neoteric, we love designing for the web. From researching the competitive landscape, to envisioning new possibilities for brand and web presence, to seeing our ideas and our clients' goals come together.

One of the most tedious parts of web design and front-end development involves all of the browser CSS rendering inconsistencies. Internet Explorer 6 is notoriously difficult, and many web designers have done significant damage to their desks banging their heads because of problems with IE.

Luckily, in the past few years many designers have collaborated on projects and libraries that take some of the initial pain out of basic CSS wireframing and browser compatibility. These "CSS Frameworks" make otherwise tedious tasks and routines simple, allowing for faster development and more consistent results. By using sensible defaults for typography and grid structures, designers and developers can focus on the meat of design.

Neoteric has always hand-coded style sheets, something that allows for great deal of control and customization. As such, we have been wary of these CSS frameworks, despite their growing popularity. After all, it is hard to relinquish even the most mundane of tasks to expertise of others when you are convinced that you do things very well yourself.

Nevertheless, our own recent site redesign gave us the opportunity to try one of the most popular and well-regarded CSS Framework: Blueprint. Seeing our site redesign as a chance to learn something new, we cracked our knuckles and went to town on Blueprint.

At first, I was a little worried that Blueprint's grid would be limiting. After all, 24 columns in a 950px wide container seems too static for the look and feel we were after. However, Blueprint's grid structure turned out to be appropriate for our design needs. Also, in those times where things needed to be just slightly out of the grid for aesthetic reasons, Blueprint's defaults were easy to override. Because it uses all classes for its components, they are easily overridden with ID-specific styles. Note: You can actually change blueprint's default grid width, columns, etc using the utilities they provide. There is also a cool web utility that helps you with the math of rolling your own blueprint grid.

Another great feature of Blueprint's system is that it actually provides easy baseline grids, letting paragraphs in different columns align to the same baseline. This is accomplished using a 18px line-height for most elements, and 36px for larger elements.

Like any framework, blueprint could easily be abused. I would really only recommend it if you already have a solid understanding of CSS. Besides, any customization has to be done through your own stylesheets. Nevertheless, Blueprint CSS provides a good foundation and allows for more rapid prototyping.

Snapshots from Art Chicago and NEXT

Fri, 01 May 2009 15:11:00 -0500

Kate Clark, Untitled, 2009

The Neoteric team ventured across the street from our offices to check out the Opening Preview for Art Chicago and NEXT on Thursday night. Art enthusiasts were out en masse to browse the hundreds of exhibits from galleries all around the world. Art Chicago featured a number of contemporary art masters and historic work while NEXT highlighted a slew of cutting-edge artists just making their presence felt in the art world. To purchase tickets to this weekend-long event visit artchicago.com or nextartfair.com

Rachel Mason, The Ambassadors, 2004-2008

Leonardo Drew

Yang Yang, The 3rd Megaton

Katherine Kuharic, Four Pounds or More, 2008

Art Chicago is coming! Behind the scenes at the South Lobby

Fri, 10 Apr 2009 11:57:00 -0500

Spring, especially in River North, means Artropolis is in the air. It's the best sign of spring, seeing Art Chicago, Next Art Fair, and Antiques Art Fair banners up and about. Across from my favorite coffee wine and sandwich shop, the south lobby of the Mart is now host to a 24' original fiberglass sculpture, Buckminister Fuller's Fly's - Eye Dome. It was originally conceived as a living quarters which could harness wind and solar energy. Created in 1977, this is the only 24' dome Fuller produced. Final touches are being applied today.

More photos after the jump...

This morning it was mostly setup:

Ed visits the Country Music Hall of Fame

Tue, 24 Mar 2009 13:19:00 -0500

Being the music buff that I am, I naturally jumped at the opportunity to check out the Country Music Hall of Fame and Museum while visiting Nashville this March. The hall was completely revamped in 2001 and along with exhibits it houses an extensive library of audio recordings from the past century. The architecture of the $37 million dollar building - with its clever structural motifs such as the piano key facade, the diamond-shaped radio mast, and the layout in the shape of a bass clef - was one of just a few highlights of the tour.

Another design element of the museum that caught my eye while strolling around was the great use of typography. Museum exhibits often use ubiquitous type and muted accent colors so as to allow the material on display to be the eye-catching element. The designers of the CMF chose a different approach, combining exhibit elements such as instruments and outfits with lively typography and eye-popping color.

The entryway to the museum - notice the piano key motif across the top.

Artwork above the ticket booth, clearly drawing inspiration from the Hatch Show Print artwork seen on so many concert posters.

Vibrant color on display along with unique typography.

Fun map outlining the different regions and origins of country music.

Seven different fonts all combined in a harmonious fashion.

The legendary Hank Williams and his Martin D-28.

One of the many walls covered with gold records.

This quote was about 30 feet wide and ran across one whole wall of the museum. The use of the three completely different fonts together added an interesting dimension to the text on display.

I'm not much of an art collector but if I was this would be a cornerstone of my collection. Hank Williams shot each of these squirrels himself in the 1940's. He then took them to a taxidermist and requested that each be stuffed and given an instrument to play.

Event Talk: Social networking and digital marketing for small business.

Mon, 23 Mar 2009 13:30:00 -0500

The Lincoln Park Chamber of Commerce is developing a monthly program, the Small Business Forum, to track trends and business challenges for small businesses in Chicago. I'll be a panelist for Social Networking and Digital Marketing, a conversation about social networking tools and their impact on businesses. It's April 16th, so come on by and join the conversation!

Nick.

Happy Holidays!

Wed, 03 Dec 2008 15:38:00 -0600

We hope to be the first to wish you the best holidays, and cheers to a Happy New Year!

Nick, Ed, Sonia, and Josh.

Study of Exteriors of the Smart Home

Fri, 25 Jul 2008 13:32:00 -0500

The Neoteric team ventured out on a "Design Friday" to visit the Museum of Science and Industry to check out the Smart Home exhibit. The modular house is coined the "greenest home in Chicago" and contains all kinds of unique "green" technology used to help increase energy efficiency and cut down on energy costs. From recycled building materials to innovative heating and cooling techniques, the house provides a plethora of new and useful building techniques.

While many of the green features of the house were interesting, I found myself more impressed by the design of the place itself. The designer - Michelle Kaufmann of MKD - made great use of materials available for green building to come up with a beautiful modular home. While the house was situated rather oddly in the middle of the museum's outdoor compound, one could easily imagine its location being any number of places from an urban setting to the rural countryside. I chose to create a PDF that pulls some excerpts from the exterior of the building and showcase the overall aesthetic of the home.

Download Excerpts PDF

Ed attends "Presenting Data and Information," A One-Day Edward Tufte Course

Tue, 01 Jul 2008 16:20:00 -0500

"What's your story? And do they believe?" These are Edward Tufte's two main points of emphasis behind information design and presentation. Whether these questions are asked by a user visiting a Web site or by an audience experiencing a presentation pitch, Tufte helps to explain a number of sound methods that assist in answering these key questions.

Allow the audience to absorb information on their own

Tufte argues that designers and presenters generally don't give enough credit to our audience. We often feel compelled to guide people step-by-step along a path, when designers should allow for people to guide themselves. We shouldn't have to explain the information we display - people are smart enough to figure out for themselves what they're looking at and what it represents.

Tufte states that a designer/presenter can never provide too much information. It is merely a design flaw if that information appears disjointed or verbose. This argument certainly has a solid footing in web design but I found myself questioning how this would apply in regards to site navigation. According to Tufte's approach, secondary navigation should be done away with and all available site links should be present and accessible on the home page. While this approach has worked successfully for some of our previous projects with fairly a straightforward navigation, what happens when the site contains thousands of links such as TVWeek.com?

Design so effectively that it's invisible

"Less optical activity" has become my new catch phrase since attending the Tufte course. All too often when talking about site design I'll hear "we're looking for a 'clean' feel". What does "clean" really mean? I could cite Webster's dictionary here but I'll spare you the clichÃ©. What "clean" represents to me is the idea of "less optical activity" and an aesthetic design approach that allows for the content to provide the core visual approach.

Oftentimes web designers employ graphical treatments that become more significant to site than the content itself - what Tufte would not hesitate to call a grievous error. A great designer and a great Web site should be "endlessly self-effacing". A site (or presentation) should be no less than 90% content and for one to lower this percentage would be a disservice to the end user.

Edward Tufte is a noted American statistician and Professor Emeritus of statistics, information design, interface design and political economy at Yale University. His course "Presenting Data and Information" travels all around the US and is soon making its way overseas. To find out more about the class and his books visit www.edwardtufte.com.

Railsconf 2008 keynote: Joel Spolsky on product design

Mon, 02 Jun 2008 09:55:00 -0500

At the RailsConf 2008 kickoff keynote, Joel Spolsky of Fog Creek Software asks: what makes one product massively more successful than another? Why Brad Pitt but not Ian Somerhalder; Herman Miller's Aeron Chair and not the dozen cheap knockoffs; why the Apple iPod and not Microsoft's Zune? Joel suggests -- at least when it comes to product and software design -- that "blue chip" products make people happy, obsess over aesthetics, and observe the culture code.

Make People Happy

In a series of slides that had the crowd howling, Joel walks us through the typical morning of a Windows user trying to upload some digital photos from his new camera to the web. Hilarity ensues: the great majority of Rails developers work on Macs but know well Microsoft alert and warning messages. It starts at the startup cycle, with auto-update screens that run past the 100% mark a half dozen times. ("In order to serve you better, you must now reboot your computer. Now, please.") By the time the camera is hooked up, the morning's fun has become not merely a drag ("Please insert your original Windows CD-ROM. Now, please.") but a real unhappiness. ("DO NOT remove devices from Windows without TELLING US FIRST! EVER!") It's rooted in the lack of agency our morning user has -- there's no control over the process, steps, and cycles on this Windows ride.

Solutions? Put the user in control. Joel contrasts the checkout process at Amazon -- where, at any moment, the user can modify addresses, check shipping rates, change the cart contents as she sees fit -- with the usual step 1 through 4 checkout process that one must walk through without options or variations in the stages. Solution two? Provide timely feedback. Joel contrasts the instant feedback of an Ajaxed shopping cart that tells the user "got it!" from a slow-moving, squishy-buttoned remote control that lacks ambient physical click or key press feedback. Cheap remotes typically have a lagging visual interface that then cause users to over-compensate when channel selecting. Anyone who's moved from the original Tivo to the new HD Tivo has probably experienced this: a real transition and physical retraining is required to adjust to the Tivo's lag and lack of sprightliness.

Obsess over Aesthetics

As a side note, I haven't seen as many iPhones in Chicago's flagship Apple store than I have this weekend. To this crowd of seriously technically advanced developers, Joel points out what we all know -- the phone's very slow EDGE data connections, hard to use keyboard, poor interconnectivity and lack of changeable batteries. And yet, it seems it couldn't be more ubiquitous at this conference. "You get the feeling that, if you swallowed one, it would just go down." Joel claims fashion in part, here, in that the iPhone's design specifically and regularly chooses style and looks over functionality. To add to the pile on: the iPhone's non-standard jack prevents me from using a standard cable to play from it in my car. Reasoning? Apparently the jack had to be recessed past standard headphone jack lengths to retain the clean top line. In the same vein, Joel notes the lack of a changeable battery is probably because to change the battery, we'd need a battery compartment, and such a compartment would imply a visual line along the back of the phone, a latch, and so forth. All that, for what gain? Honestly, the only thing I've seen phone batteries do is part wildly from the phone, cover, and other sundry in a fantastic oh-god-I-broke-my-phone display anytime they get dropped.

Observe the Culture Code.

RailsConf 2008 -- the last place I would have expected a deep dive into French Jungian archetypes and the psychology of action. The Culture Code, by Clotaire Rapaille, attempts an analysis of pre-conscious motivations and influences that is distinctly oh-so-French. Cloatire, apparently, was hired by the auto industry to aid in the marketing and design of the then-fledgling SUV. He tied specific physical attributes to desired emotional responses: being "up high" provides confidence, dominance; being surrounded in soft, plush and heated leather takes us back to the security of the womb; and "lots of hot-drink holders" (oh, this is so French now) pre-consciously remind us of the happiness and security we had, as babies, nursing.

Whatever you make of all that specifically, Coltaire's understanding of emotional desires and needs are still clearly on target. Reflecting on descriptions of the the Rails development community and its unique motivations, we see the roots of culture code (and emotive) terminology: beauty, happiness, motivation, passion, enthusiasm.

Reflections.

Well, my flight has come to an end; I think I'll write up my reflections in a separate post.

(Nick)

RailsConf, Ho!

Wed, 28 May 2008 17:23:00 -0500

Once a year, the brightest stars of the Ruby on Rails world convene to talk, brainstorm, code, teach and learn. This year's schedule offers more technical sessions then ever before. I'm looking forward to four days of design, tips, coding, and testing techniques. I hope to post updates here, so stay tuned for highlights. Thanks!

Avoid Marketing Mishaps!

Tue, 12 Feb 2008 14:14:00 -0600

Presented by DePaul's Coleman Entrepreneurship Center and the Lincoln Park Chamber of Commerce, the panel "Marketing Mishaps: The Most Common Mistakes to Avoid" will be kicking off this Thursday. Drop by to learn about the worst mistakes I've ever made... as well as the mistakes I've watched clients make, over and over. My fellow panelists bring expert marketing, messaging, and entrepreneurial experience to the table as well.

An Event Apart Conference in Chicago

Mon, 26 Nov 2007 16:03:00 -0600

In the short history of professionals working on the web, there have been many stars -- some, technical gurus who have created languages and specifications that we all use today; others, design wonks who have influenced not only the visual vocabulary of the web but media of all kinds. From them, a few manage to combine an understanding of both fields. And of these, a tiny handful have the skills, passion, and interest to share the latest of what they know to advance the professional field, to improve our craft.

I'm spending two days in Chicago at An Event Apart, listening to 10 of the best in the field, brainstorming, challenging, networking, and learning -- as much from the speakers as from each other. We're rethinking the 'given guidelines' of information architecture, pushing typographic boundaries on the web, brainstorming how to make the user's experience a better one, and re-crafting website writing to better communicate, convey, and brand. I'll blog the highlights of what I've picked up here over the next several weeks, so please stay tuned.

Understanding Web Traffic: A Three-Part Guide for Business Owners

Fri, 20 Oct 2006 15:37:00 -0500

The Problem

The majority of small business owners don't take advantage of web traffic data. After all, it's often difficult enough to develop a website that works. Compound the usual demands of small business with the technical language of web traffic, and web statistics become something that's easy to set aside. Technical people often aren't asked to create web traffic reports. Most small businesses don't have the luxury of a large staff to dedicate a position to web analytics, a role which can bridge the gap between business needs and technical know-how. So rather than traffic reports, we reply on customer reports: "I love the new site," "I had a hard time finding the right product," "I didn't buy online, because you don't accept American Express."

Why Bother?

Imagine for a moment the following scenario: at a networking event you're talking with a retail store owner, learning a bit more about his business. You ask how people find out about his shop. "I don't know," he answers, "I just keep my eye on the register." Sales do keep the wheels moving, you agree. Where does he market his store? "I don't do much marketing... the phone book, I guess." How have his customers learned about him? "I'm not sure. Word of mouth?" From whom? "I really don't know," he answers. Well, how many customers come into his shop? "I don't track that. Really. All I do is watch my sales."

We'd probably think this store owner peculiar; maybe just lucky to have a self-running business. While sales are the lifeblood of any company, we know intuitively they don't provide the sole picture. To the contrary, most retailers closely track coupon effectiveness, marketing campaigns, foot traffic, product placement... why not bring this level of sophistication to the web as well?

Well, it is possible for a small business owner to move from "I think people look at my web page" to "8% of the people who view our revised home page target message go on to buy our products." In this three-part series, we'll cover the basic groundwork and vocabulary of web traffic, discuss how to create useful reports for typical business questions, and review some of the software tools that are available to help make sense of it all.

The Groundwork

Web statistics work in a surprisingly simple way. Every time a user views a page, their web browser talks to the web server by requesting a specific "page" through the URL -- the Universal Resource Locator. The URL often ends with the name of a file ("about_us.html"), which the server fetches from storage and sends to the browser. That file, in turn, might include a business logo, pictures of the president or the board, page graphics, a typographic style sheet.. all sorts of things that go on to make up the page as it loads. It's the server's job to send each of those to the browser as well. On a slow dial-up connection you can literally watch the page be constructed before your eyes, element by element.

Each of these requests stores a bit of information to the server as well. Obviously, the requested file. But also the date and time, possibly the web page that the user was at beforehand, and some information about the web browser that made the request. This might include the browser type, the type of computer, and the computer's IP address -- a unique series of numbers that identifies every computer on the Internet. These data are the building blocks for web statistics. Everything is built from here.

Key Terms

Page views are easy enough: a count over a period of time of the number of times a web page was viewed. In many ways, this is the most useful and important count of your web traffic. If normally 100 people view your home page on a given day, and suddenly this jumps to 800 for about a week and falls off, then you know something interesting has happened. Was your company mentioned in a newspaper article? Did a newsletter campaign link to the site? Have bloggers found something interesting and linked in? All of these might be reasons.

Sessions are a bit more abstract: a session is composed of a user browsing a set of pages over a given period of time. So, if one user clicks through to your home page, your about page, and then the contact page, then picks up the phone to call, that would count as three page views and one session.

How much time? Here's where some problems begin. Web traffic reports are always just estimates. Typically, we assume that a session consists of a user clicking around a site, where each page is within 20 minutes of each other. If the user goes to lunch, comes back, and continues surfing, that would count as a new "session."

And how do we identify the user? Again, another problem. Web statistics can't actually track users -- they track IP addresses, numbers assigned to computers when they're connected to the Internet. And these numbers can change. Some DSL suppliers, for example, change everyone's IP address once an hour. Other users have "fixed" IP addresses. So again, sessions count 'users,' but this is really an approximation.

Hits are, unfortunately, the most over-used, least understood, and least useful measure of web traffic. This is, in part, because it's so fun to say things like, "our website receive 50,000 hits this past month!" But in the above example, each element that was downloaded to create the about us page would count as a hit: one for the page, one for the logo, one for the president's headshot, a dozen or so for page graphics, etc. Since the number of elements that creates a web page is arbitrary, hits don't count much that's useful for business reports. Ignore them, and focus on page views.

This Month's Action Items

To get your own business started on understanding web statistics, try one of the following:

Have bi-monthly web statistics reports emailed to you. Your web provider or office guru should be able to configure your web statistics software to email reports. Have a basic, "executive view" report sent to you twice a month. Include the most popular pages of your site, your overall page view traffic for the time period, and (coming in the next installment) the site that sends the most referrals to you.
Evaluate your site content from your customer's perspective. As a user, what pages do you think would be most important? Create a short-list of your key site pages. Then, look at your traffic: do the feet in the door reflect your priorities? Why or why not?
Look for surprises or irregularities. Is a particular product page getting far more traffic than you expected? Perhaps it should be highlighted on the home page! Are people searching for particular content? Make it easier to find! People will remember your site as being helpful and friendly if they're able to better use your site.
Evaluate your traffic before and 4 weeks after a promotion or campaign. Are particular pages more popular than before? Are products being moved as expected? If your campaign was an HTML email, you should see an uptick on the newsletter's landing pages, as well as associated pages. Find out what people find interesting about your site!

Next Steps

Even with this simple introduction, as a business owner you can now move from the meaningless ("50,000 hits last month!") to the useful ("Last week, our home page page views increased by 30%."). A great start! But there's much more that can be done. Consider:

How valuable is an advertisement on an industry-related website?
Of our affiliates, who refers the largest number of customers?
How much income has some particular advertisement generated?
How many people fail to complete the checkout process, and where do they abandon?

To answer these questions, stay tuned for parts two and three of this article. We'll explore web traffic tools, identify site goals, and learn about tuning up one's site to obtain the best results from these analytics.

LPBDI Talk

Sat, 01 Apr 2006 15:42:00 -0600

Coming May 2nd, I'll be presenting a seminar at the Lincoln Park Business Development Institute's spring series, a four part mini-course titled "Unleash the Power: Internet Marketing A to Z."

Interested in getting a handle on a solid Internet marketing strategy? Wondering how to make your current website more effective? Come on by for this evening seminar hosted by the Lincoln Park Chamber of Commerce and sponsored by AT&T.