Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Steve Jenkins
18th October 2012

Build a mobile website using jQuery and Mobify

Learn how to use Mobify to quickly build a simple three-page website

Build a mobile website using jQuery and Mobify

This tutorial will show you how you can use jQuery, HTML, CSS and the Mobify for small business (cloud.mobify.com/about/overview) platform to build a mobile-optimised version of a simple three-page website in 15 easy steps. By using the Mobify solution you can decrease the time it takes to create a mobile website using the technologies that you are familiar with such as jQuery, CSS3, and HTML5. If you want to take it a step further you can use advanced coding techniques such as DustJS, Sass, or LESS. The Mobify platform supports the following mobile operating systems: iOS v3.1.3+, Android v2.1+, and Blackberry v6+. You can also build websites targeted at tablets, offering ultimate control and flexibility of your customer’s website experience.

Download tutorial files

Build a mobile website using jQuery and Mobify

Create new project

Open a web browser and proceed to cloud.mobify.com to register an account and create your first project. This process will take about 15 minutes and will require you to add the Mobify.js tag to your website. The tag needs to be installed immediately after the openingHTML tag on all of the pages that you would like mobile-optimised.

Build a mobile website using jQuery and Mobify

Install Mobify Tools

The Mobify Tools are required to be installed before you can begin any front-end development. The Mobify website will walk you through three steps to getting these tools installed, the tools required will need Node.js. The website gives instructions on how to install for Mac, PC and Linux – this tutorial is using a Mac.

Build a mobile website using jQuery and Mobify

Set up your project

Continue to set up the project directory on your local computer. The tools you have installed will allow you to run a local web server to compile your changes and preview your changes through a desktop browser. The project folder includes a scaffold to get you started quickly by providing you with a basic template, header, footer, and code examples within the mobify.konf file.

Build a mobile website using jQuery and Mobify

Choose your content

Before venturing out on your own, a simple demo guides you through basic concepts to help you understand how the Mobify syntax works. JavaScript and jQuery are the main languages utilised to build your mobile website, the example code is below within the _header.tmpl. The logo is selected using jQuery to be included in the header template.

Build a mobile website using jQuery and Mobify

mobify push –message “Initial Bundle”

The last step in the set up process involves creating your first bundle; a container for all the compiled code that will eventually be pushed live. This process is done through a command in Terminal and is very easy. Bundles are very powerful as you can deploy them to live, but also allow other people to preview bundles before going live.

Build a mobile website using jQuery and Mobify

Understanding the Mobify structure

Open the mobify-demo directory in your favorite editor, look inside the /src directory and you will see a /tmpl directory, which is where the page templates are stored. There is also a style.css file, which is where CSS is stored, and a mobify.konf file, which allows you to create page templates and pull out page elements using jQuery.

Build a mobile website using jQuery and Mobify

Start up preview

Open up a terminal window and type ‘mobify preview’, this command will start the local Mobify tools server to compile your changes on the fly, as you develop locally. After the server has been started, proceed to preview.mobify.com and type in the URL that you would like to preview. In this case it will be our demo files.

Build a mobile website using jQuery and Mobify

Create homepage template

Open the home.tmpl template and mobify.konf, use jQuery to select DOM elements and set them up as page elements to be pulled into the template. In the KONF file lives the template declarations, DustJS is the templating language here. Add a DOM element, and by inserting the ! symbol you instruct Mobify to only load the template if that element exists on the page.

Build a mobile website using jQuery and Mobify

Add elements to homepage

Next, set up the different elements that make up the page. On mobile, less is more. select the following elements: image #2, title, sub title, paragraphs and the bullet points. In the KONF, find the home declaration, setup variables and jQuery selector statements for each element that you would like to include in the home.tmpl.

Build a mobile website using jQuery and Mobify

Create homepage CSS

Mobify will automatically add a class containing the template name to thetag at the top of each page. Mobify suggests the usage of a prefix x-home to all the mobile classes to keep them organised. As you create CSS for the homepage, make sure all the styles are wrapped with .x-home to ensure that they’re applied to the homepage.

Build a mobile website using jQuery and Mobify

Create common template

The Contact and About pages on the desktop site both contain a class – common. Therefore we can get away with setting up one common template that will render both pages using a Don’t Repeat Yourself approach. Similar to the homepage template, we use the common class in the mobify.konf to render the common template if the page loaded contains it.

Build a mobile website using jQuery and Mobify

Add common elements

Instead of pulling all of the page elements into the mobile site, we are going to concentrate on just the main title and paragraph content. We can easily do this by setting up two more select statements to select, ‘.common #page #content h2’ and ‘.common #page #content p’. That should do the trick!

Build a mobile website using jQuery and Mobify

Create common CSS

The last step before doing a test build is to add some CSS to the common template. The common template will have a class added to the openingcalled x-common. In our CSS we just need to add a few lines for the styling of the h2 and paragraph tags.

Build a mobile website using jQuery and Mobify

Test Build and Preview

It’s time to test your mobile site that you have created by creating a bundle as you did in step 5. You can create a bundle by opening Terminal and typing ‘mobify push –message “Test Build”’. When the bundle is complete, visit the Mobify website and go to the preview page to grab a link that will allow you to test.

Build a mobile website using jQuery and Mobify

Deploy to Production

Now it’s time to push your work to production. We will create a live bundle by using push bundle command again, but changing the message to ‘Production Build’. After the build is finished, login to the mobify site and select the production bundle and click publish selected. Within a matter of minutes, the new mobile site will be live.

  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.