Code & Iron

January, 2014

January 27, 2014

To be Huge, you must Eventually Sell to the Laggards

The technology adoption lifecycle is demarcated into Innovators, Early Adopters, Early/Late Majorities, and the Laggards. When I spend time with my family I ask them: What software are you using? What devices have you bought? Which can’t you live without? …

  Show More

The technology adoption lifecycle is demarcated into Innovators, Early Adopters, Early/Late Majorities, and the Laggards. When I spend time with my family I ask them:

What software are you using?
What devices have you bought?
Which can’t you live without?

It is my clearest barometer of how far a trend or technology has spread.

Sister

My Sister is an Early Adopter. She was quick to recognize social media as a platform for change. She is adamantly eco and social fairness conscious. She is a native on Facebook and Twitter, and is tethered to her laptop. She bought a quad-band phone on purpose.

Sell her:
– The ability to share her identity and message with her peers and the world at large
– Technology that respects our planet and the people that live here
– Devices with a 5 year+ lifespan

Mom

My Mom fits well into the Early Majority. She doesn’t know exactly what she wants, but is sure it’s new. She fears being left behind by technological advance. She has annoyances, and if solutions are made convenient and simple she will pay dearly for them. She owns an iPhone, an iPad, and is dead-set on switching to a MacBook when she retires.

Sell her:
– A service to scan, sort, backup, and beautify her existing collection of physical photos
– Anything that keeps our geographically dispersed family connected
– An all-in-one monthly subscription to unlimited high quality Music, Movies, Books, Audiobooks, and TV. (I’m looking at you Apple and Google)

Grandma

My Grandma is well into the Late Majority. A Skype user, an iPad owner (for the Casino and Solitaire games), and a snowbird. She does not actively seek out new technology, it intrudes into her life. If it is a friendly, simple force she will embrace it, otherwise she’s just as happy to maintain the status quo. She was born in 1928, the same year as the Cathode Ray Television.

Sell her:
– Assistive devices and services to maintain her daily dignity and independence
– Entertainment that stimulates and engages her mind
– A simple way to stay updated on her Family and their daily lives

Dad

My Dad is a proud technological Laggard. In his career as a Systems Engineer he touched applications that affect hundreds of users, often in safety and liability-critical environments. In his personal life? He owns a Nokia pay as you go brick with $100/year on it. He hasn’t needed a new TV in 15 years and our old family computer has been ticking along for 10. If I sound frustrated it’s because I am. He is fiercely, vehemently against newness.

My dad is the ultimate litmus test for social acceptance of a technology. If you can make a product or service my Dad needs, and I mean really needs, you will be successful. Wildly, outrageously successful.

He recently asked me to install DropBox because he read about it in the Globe and Mail.

  Posted by Matt Holtom on January 27, 2014
January 14, 2014

Mimicking iOS 7 with jQM and Rails

iOS on the Web A client of mine needed a companion mobile web app that mimics their new iOS 7 app for their non-apple users. Their designer is also hugely passionate about user experience, and has built custom cells, icons, …

  Show More

iOS on the Web

A client of mine needed a companion mobile web app that mimics their new iOS 7 app for their non-apple users. Their designer is also hugely passionate about user experience, and has built custom cells, icons, and has high performance expectations for UI behaviour and response. I knew for him to be happy it needed to be as close as humanly possible to the real deal.

So here’s how to get that nice, smooth, Apple-y feel on the mobile web…

Modifying jQuery Mobile for Fun and Profit

Enter jQuery Mobile to take some of the load off. jQM is a responsive mobile web CSS and Javascript framework that just released stable version 1.4. It aims for a native app experience by offering persistent headers and footers, widgets for common UI paradigms, and AJAX enhancements. However, it maintains a look and feel distinct from all existing platforms. The reasoning behind this is to remain “seriously cross platform” (That list of browsers makes me tired just looking at it). To get around this (admittedly bland) skin, there is an online WYSIWYG editor called “ThemeRoller” that handles the basics. Beyond that, we’re on our own.

Order Matters

Rails 4 uses the asset pipeline, a way of compiling and combining assets to form the eventual CSS, Javascript, and images sent over the wire. It does this by using “manifest files” that send tendrils out to the other folders in your app. More specifically, the “require tree .” in your application.css will find everything under assets/stylesheets in app/ vendor/ and lib/. However, it does not guarantee the order in which they are loaded. This can lead to confusing and difficult to diagnose CSS bugs when dealing with a framework like jQM.

Here are the three CSS components that you need for a fully customized jQM app:

1. Download the minified, gzipped, themeless “structure” of jQM to vendor/assets/stylesheets, or use the jquery-mobile-rails gem.

2. Go to ThemeRoller to paint the broad strokes of your app, and download the original and minified versions to vendor/assets/stylesheets.

3. Finally, overrides of the jQM defaults and your custom CSS or SASS can go alongside your application.css file in app/assets/stylesheets.

Modify your application.css to load in this order:

*= require jquery.mobile.structure.min
*= require my-app-themeroller.min
*= require_self
*= require_tree .

You’re not !important, be more Specific

If you catch yourself rage-clearing your cache, shift/command refreshing, switching browers, or all of the above, you may try the sledgehammer of CSS. Appending !important to a css rule says “disregard any previous, more specific rules, use THIS one”. It has some uses (apparently), but by and large it will make later revisions to your code nightmarish. It’s like try… catch Exception e… swallow in Java. Respect the next developer, just don’t do it.

Instead, if your CSS just isn’t applying, you likely need a more specific CSS selector. CSS cascade and specificity rules are massively complex. Also, jQuery Mobile by convention is filled with very targeted selectors.

So don’t leave it up to chance. Use your Chrome Developer Tools or Safari Web Inspector. Find out the exact CSS selector used by jQM, and override that, it may be much  tighter than you expect. Here’s an example of me nullifying the standard listview borders:

.ui-listview > .ui-li-static, .ui-listview > .ui-li-divider, .ui-listview > li > a.ui-btn {
border: 0px;
}

If it looks like an Apple…

Now that we have our structure set up, what do we modify?

Here are some basic steps to getting that iOS 7 feel out of jQM:

1. Apple uses “Helvetica Neue Ultra Light” for headings and text to achieve that fresh, open air feel. We can mimic that easily on devices with this font pre-installed (Apple products, mainly). However, it’s important to degrade elegantly all the way to sans-serif just in case.

font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif
font-weight: lighter (or 100)

2. Eliminate unnecessary borders, backgrounds, and shadows. Whitespace and sharp contrasting colours are your friends here. Take a look at some of the stock iOS 7 apps for inspiration. Much of this work can be done in ThemeRoller

3. Custom icons on a flat background go a long way and are achieved in jQM via CSS classes with backgrounds

data-icon="carat-right" goes on your list item tag... and then:

.ui-icon-carat-right:after {
background-size: 70%;
background-image: image_url("carat-right.png");
}

So there! Go out into the world and modify jQuery Mobile to your hearts content! Down with the standard skin!

  Posted by Matt Holtom on January 14, 2014