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