andyMatthews.net
ThemeRoller! Styling jQuery Mobile apps has never been this easy
Back when jQuery Mobile was first announced, the jQM team promised a better way of creating color themes for your jQuery Mobile projects. That promise has now been fulfilled with the public release, just this past week, of ThemeRoller for jQuery Mobile. Part design-centered, part developer-centered, ThemeRoller is a tool that anyone can use. Let's dive in a take a look.
Jumping into ThemeRoller
The first thing you'll see when you launch ThemeRoller for jQuery Mobile are two nicely designed splash and intro screens. I've always loved the TR logo, and to have it spread across an entire screen makes this web tool feel more like an actual application. ThemeRoller loads quickly and then you're presented with a small help screen.
This screen offers a few valuable tips so I recommend you read it at least once. I also recommend that the jQuery Mobile team add an option to this screen allowing users to skip subsequent display. Something along the lines of "Don't display again" would be helpful. This is also consistent with many actual software packages.
The ThemeRoller interface is well designed and pleasing to the eye. Users are presented with 3 blank themes (A, B, and C) with an array of common jQuery Mobile widgets (form controls, buttons, links, headers, etc.). Down the left side are a set of tab and accordion controls for advanced users, allowing them to change values for corner radius, box shadow, font-family, and more. To begin styling your desired theme, click the tab for the selected theme first. Changes can then be made by either dragging color swatches from the top directly onto the item in question. Advanced users can manually input hex values using the controls on the left side (or even drag a swatch onto an input field).
Editing Colors
Color swatches appear at the top of the tool and have two controls which allow customization: lightness and saturation. To the right of the main list of swatches are the last few colors selected by the user.
Given that Adobe and jQuery have partnered together to work on jQuery Mobile it makes sense that ThemeRoller might include Adobe's excellent swatch sharing service Kuler and indeed it does. Just above the list of color swatches is a button labeled "Adobe Kuler swatches". Clicking on this button displays several categories of Kuler themes: newest, highest ranked, random, etc. It would be nice if the swatches were larger, or offered some sort of rollover so that you could more easily see the color. It would also be nice to allow the user to apply a Kuler theme directly to a jQuery Mobile theme with one click.
Editing the themes themselves is easy enough. New themes can be added (there are 26 total slots available) by clicking the + tab in the top left corner. Existing themes can be deleted by clicking the Delete button located to the right of the theme name in the Advanced controls. While specific color changes are made on a theme by theme basic under the lettered tab, global changes (which apply to all themes equally) including corner radius, fonts, and icon colors are made under the Global tab.
While editing themes ThemeRoller allows users to toggle between preview and selection mode using the Inspector button. Turning on the Inspector mode introspects the selected item and opens the advanced controls directly to the area you wish to edit. I recommend that the jQuery Mobile team change this button label from Inspector to Preview to be more clear as to it's purpose. At the very least they could consider changing the toggle button to Inspector | Preview so that users know which mode they're in.
Downloading, Sharing, and Importing
Once you've designed your beautiful jQuery Mobile themeset, what's next? ThemeRoller is glad you asked. First off, you can download the theme. This creates a ZIP file containing a sample page using your theme, your CSS in both dev and production versions, a loading image, and the jQuery Mobile icons. Next you can Share your theme. This creates a link directly to your theme which lasts for 30 days. This is perfect for sharing between designers, clients, and the super picky CEO who wants to tweak everything down to the pixel. Finally, you can import a theme...this might be handy for developers who've previously download their theme and want to make a few quick edits. But remember, jQuery Mobile themes are plain CSS. Edit the dev version of the file just like you would any other CSS file. My only recommendation here would be to make the Download Theme button stand out a little more. It's in the header along with the logo and not with the other controls so it took me a minute to find it.
There's also a simple Help button which launches a modal window containing some basics about the tool. Useful but not terribly so. Don't rely on it to give you the down and dirty. While it's only just been released, it's still fair to offer some critiques.
A Few Suggestions
- The default view for ThemeRoller is 3 plain "canvases". It would be a better idea to seed the pot as it were with 3 existing themes, say A, B, and C from the default jQuery Mobile themes. This would allow users to see what colors go where, and make it easy for them to tweak one or two colors rather than forcing them to build a theme completely from scratch.
- A cool feature could also be a randomize function. Click it and the ThemeRoller tool "rolls the dice" and displays a completely random set of colors, corner radiuses, sizes, etc. Niche yes, but again, it could let users see an option they might not have been aware of and let them build off of it.
- It would be awesome if ThemeRoller had some sort of font integration with Google Fonts. When selecting a font stack in the Global tab, I'd love to see a preview of suggested font stack and even offer the option of including a custom font (and creating the CSS for me).
- While talking about customization it would also be nice if ThemeRoller allowed me to specify a custom icon sprite sheet and add my icons to the CSS file.
- When editing in the advanced controls, don't make me enter px when that's the default measurement. If there's only a number in the field, tack on px for me. If I specify another unit of measure then take my input straight up.
- Consider a beginner and advanced mode. Beginner mode would hide the options on the left side as they can be a little overwhelming.
- The Download Theme button is a little hidden. Consider making it a little more "buttony" and obvious.
- Once enough styles have been created, consider offering an "apply" function to the Kuler color palettes which would apply the entire color scheme to a new jQM theme.
- An undo button would be appreciated. Of all the suggestions I've come up with, this one is one that should absolutely be implemented. I accidentally clicked the Delete button on a swatch I was building and it was gone. Also, when dragging swatches onto items it's easy to miss your target and apply the new color to the wrong element (losing that element's previous color).
All in all ThemeRoller is a badass tool for a badass mobile development framework and I give it 3 thumbs up (don't ask). I've been looking forward to ThemeRoller since it was first announced and it doesn't disappoint. It's excellent as it is, and will only get better over time. Give it a try now and make your jQuery Mobile sites look better immediately.