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.
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.
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.
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.
Choose your content
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.
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.
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.
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.
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.
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.
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.
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!
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.
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.
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.