Mobify is a mobile software company based in Vancouver, Canada that has built an exceptional mobile platform that allows companies to deliver a great mobile experience to their customers using their existing website. There are many solutions when it comes to mobile websites and most require you to build and maintain a separate website which is often served through a proxy to a mobile version hosted on a subdomain like m.google.com. Usablenet is one of the bigger companies that offers this type of solution, they power many big box retailer mobile sites such as REI.com, Expedia.com, and lowes.com to name a few. Most of the sites that they build look very similar, it seems like they use a one-size fits all templated approach with little customization and they are more expensive.

Mobify, IMO, has a very elegant approach, their technology is added to your website via one JS (JavaScript) tag that is inserted into the of your website. When your website loads, their JS tag fires and if it detects a mobile browser (currently they support iPhone, Android, and Blackbery 6) – then a mobified version of the website is displayed. Now let’s get into how it really works, as I just explained how it gets triggered – which is only 1/4 of the technology.

Mobify offers two solutions for building your mobile website: full-service and co-development. The full-service option consists of mobify designing and implementing the mobile design using their platform and getting feedback and approval from you. This is good for companies that do not have front-end developers who are familiar with JS and other bleeding edge technologies.

Building Mobile Sites using the Co-Development Solution

The co-development solution is much more attractive to me, being a front-end developer and an avid jQuery developer – I was excited to get involved with their platform. I was able to convince my colleagues that using the self-service option would give us more control over our mobile future, but still be able to lean on mobify if we got stuck on an issue. I believe the co-development solution has been a great match for our business, we have been able to launch 4 mobile websites using this technology and we have the confidence to build more. We have accomplished this through a team of two front-end developers (myself and another front-end developer on my team) and a dedicated team from Mobify including Ben Terrill (Director of Customer Success – @bterrill) and Ted Tate (Software Engineer at Mobify – @tedtate).

The mobify platform uses a healthy mix of the following technologies:

  • jQuery/JavaScript
  • Dust JS Templating
  • Node.js
  • SASS
  • CSS2/CSS3
  • HTML4/HTML5
  • Python/Ruby
  • Git
  • Kaffeine*

* Some of the examples are using Kaffeine, but Mobify have decided to move away from using Kaffeine. Mobile websites using older versions of the API still use Kaffeine heavily.

Being that Mobify uses a bunch of bleeding edge technologies makes it both a fun and challenging platform to learn. We were lucky enough to have Ted Tate (Software Engineer at Mobify – @tedtate) on-site for a week to show me the ropes, which definitely paid off in the long run. My prior knowledge of jQuery and mastery of the DOM gave me a huge advantage in understanding how to use their platform. I recently added another front-end developer to my team who wasn’t as familiar with jQuery and he had a much harder time picking up the platform. This is not a platform that can be picked up by anyone, but the power behind it is limitless for those who do understand. jQuery plays a huge part in their platform, so if your jQuery skills are up to par – you will be able to get up and running rather quickly.

A Brief Introduction to the Technologies

SASS

Before using the Mobify Platform, I had only read about SASS in a few blog articles, but wasn’t quite sure if I would ever get around to using it on a project. SASS which stands for Syntastically Awesome Style Sheets is an extensions of CSS which adds nested rules, mixins, variables, selector inheritance and more. At first glance, SASS looked overwhelming to me – I found it sometimes hard to follow the selector inheritance within the SASS files. But after a little debugging here and there, I have become a pro!

SASS is a big part of the mobify platform, when you are creating the mobile version – you are essentially rewriting the CSS to fit the Mobile view, instead of the desktop. You can choose to copy over styles from the desktop site, or create new styles altogether. The features such as variables, nested rules, mixins make it much easier to reuse and write CSS faster. SASS uses a tool called Compass, which watches the /scss directory for changes and compiles the scss files into a compressed/minified CSS file – this is intalled as part of mobify-tools.

Dust JS Templates

Dust JS is a client-side templating framework built in JavaScript, similar to Mustache.js, or handlebars.js. I wasn’t at all familiar with JS templating before I started working on the Mobify Platform, so I did a little Googleing and came across this interesting article about LinkedIn and how they are utilizing the Dust JS templates on some of their projects.

Dust JS and jQuery work hand-in-hand in supporting the code you write to display the desktop elements on the mobile site. The heart of the Mobify application is a file called Mobify.konf, which is where you store all your jQuery/JavaScript to select and display parts of the desktop website. All the Dust Js template files end in the file extension .tmpl.

Add a page and show something specific from the desktop website

You need to setup the mobify.konf file to look for something specific on the desktop web page, in this case it’s div.our_history. If the page that is loaded contains that class, it will instead show the contents configured in the Dust JS template that we have setup called our-history.tmpl. On this template, we have added one tag “{contentBody}” which is declared in the mobify.konf file to pull all the contents contained in the div#content-wrapper using a simple jQuery select statement. It’s that easy, anything you declare in your mobify.konf file can be pulled into the mobile templates. This is just a basic example below, but you can use all of the methods available in the jQuery API to transverse and manipulate the desktop code to re-create a mobile optimized version of the website, its fantastic!
mobify.konf
[js]
{
bodyType: -> ‘our-history’
,’!content’: -> $(‘div.our_history’)
,’contentBody’: -> $(‘div#content-wrapper’)
},{
[/js]
our-history.tmpl
[js]
{>root/}

{<body}
{_SUPER_}
{#body}
<div id="x-content">
{contentBody}
</div>
{/body}
{/body}

{<scripts}
{_SUPER_}
{%script}
(function ($) {

})(Mobify.$);
{/script}
{/scripts}

[/js]

Git

Git is a very popular distributed version control system, if you have used Subversion – then this is very similar, mainly different commands and much Faster! The repositories are setup by Mobify, but then shared between your team and Mobify. The benefit here is if you get stuck on an issue and need to rely on the Mobify support engineers to pick it up, just do a git commit/git push and then all they have to do is a git pull and they can see you work! I love GIT.

All of the repositories are synced up with Github, so if you prefer something more visual instead of using terminal (mac osx) – you can download their GUI and also browse the changes in repositories using the web application.

The Mobify JS Site Folder Structure

  • /src – contains mobify.konf and SASS compiled CSS files
  • /src/i – contains images specifc to mobile websites
  • /src/scss – contains sass files
  • /src/tmpl – contains dust js templates

Getting Started with Mobify Tools

Mobify provides a set of tools called mobify-tools, which are accessed via github once you have signed up with Mobify. The tools provide a node.js preview server that allows you to develop locally on your desktop using just Terminal (Mac), a web browser, and your favorite editor, Sublime text 2 works great with SASS and JS.

Step 1

Once the JavaScript tag has been added to your website, development starts with a simple terminal command mobify preview which starts up the mobify preview server. The server builds and compiles the JS and SASS files and outputs mobify.js and site.css (site will be replaced with your website name, in the example we are previewing laithwaites) from all the Template, JS and SASS files in the site directory.

Step 2

Next you proceed to preview.mobify.com in your browser, type in the URL of your website and hit preview. A mobile version will be loaded in your browser, Safari works best on the Mac as you can size it down to the size of a small mobile page, also this tool will set a cookie to override the desktop view and enable the mobile site.
.

Step 3

Now you can open up the site folder in Sublime Text 2 or your favorite IDE and anything you change after saving will be reflected in the mobify preview environment after refreshing Safari.

Before and After using iPhone

A quick before and after view on Laithwaiteswine.com, showing the original desktop website on the iPhone (left) and the mobified version (right).

i18 Internationalization with Mobify JS

The company that I work for has many white-label eCommerce websites on the same platform, the layout is similar across most pages with mostly just CSS changes. After we launched our first mobile website with Mobify, we had a challenge of whether to create separate mobile sites for each website or somehow create a solution where we could build one website, but only change CSS and templates in some areas. I worked with John Boxall (Co-Founder of Mobify – @johnboxall) and Ted Tate (Software Engineer at Mobify – @tedtate) to come up with a solution using their internationalization module, needless to say we are very happy with the support and dedication that Mobify provided us to find a solution that would fit our business needs and allow us to grow with Mobify.

In a nutshell, the combination of mobify.konf and i18.json files provide a number of ways for us to allow for differences in the HTML on the desktop websites and support them using a mix of SASS and/or DUST JS templating techniques from one site folder containing mobify setup that works for multiple websites.

Mobify recently made some huge improvement to their administration portal for customers, giving companies using the co-development platform the ability to do their own site builds for testing and production releases. They have done a great job building this platform, and this is only the beginning of what’s to come!

To Learn More About Mobify, visit them on the web:
Web: Mobify.com
Facebook: Mobify on FB
Twitter: @mobify

Categories: Mobile

2 thoughts on “Building Mobile Websites using the Mobify JS Platform”

bookkeepersoncall12 · April 11, 2012 at 1:13 am

Thanks so much – this was helpful!

CK Rock · August 9, 2012 at 11:54 am

Typo: Second paragraph. "inserted into the of your website." Looks like you put a head tag into the source and it's being interpreted literally by the page.

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Posts

Mobile

Direct Wines Case Study from Mobify

Mobify has been the Mobile platform of choice for the past year with great success at Direct Wines and as a result I was recently approached by Mobify to give a customer testimonial. They produced Read more…