What is Mobify?

Mobify is a platform for adapting your website for mobile phones, tablets and more.

Mobify is built for web developers - powerful enough to adapt any aspect of your website for mobile or tablet, yet simple enough to learn and use on any website.

Mobify consists of two components: the open source Mobify.js framework for client-side adaptation and templating, and the Mobify Cloud which provides web-based tools, image and script optimization, global CDN delivery and release management to thousands of websites around the world.

Which languages do I need to know to be successful?

Mobify does not require you to learn another language. Mobify.js, the core framework that does the mobile adaptation, is built in JavaScript. To develop your mobile adaptation, you will only need to know JavaScript, HTML, and CSS - languages that web developers are already comfortable with.

Can non-technical users use Mobify?

You'll need a web developer to design and build your mobile or tablet website using Mobify. Knowledge of CSS (and to a lesser extent, JavaScript) is necessary.

Is Mobify secure and PCI compliant?

Mobify is secure and PCI compliant; we do not store, process or transmit any cardholder data. All secure data is communicated directly over SSL between your visitors and your servers without transitioning through any additional servers, using your current SSL certificate.

Mobify holds PCI DSS 2.0 compliance. Our data centers are SAS-70 certified.

Where are the Mobify Cloud servers located?

Mobify's cloud data centers providing services such as DNS, edge caching, web tools and backups are located around the globe to guarantee maximum performance and uptime. Key points of presence are located in Amsterdam, Ashburn, Atlanta, Chicago, Dallas, Frankfurt, Hong Kong, London, Los Angeles, Madrid, Miami, New York, Newark, Osaka, Palo Alto, Paris, San Jose, Seattle, Singapore, Sydney, Tokyo, Warsaw and Washington DC.

Redundant fabric assures robust content delivery even when one or more data centers is unavailable. Edge delivery is done using our Edgecast CDN partner with data centers in Amsterdam, Atlanta, Chicago, Dallas, Frankfurt, Hong Kong, London, Los Angeles, Madrid, Miami, New York, Osaka, Paris, San Jose, Seattle, Singapore, Sydney, Tokyo, Vienna and Washington DC.

What is the mobile URL for Mobify-powered websites?

We believe that there's only One Web. That's why with Mobify, there is only one URL for all device-specific versions of your website. If your website is located at http://www.yoursite.com/, that same URL will be used by mobile phones, tablets and any other device to access your site. The URL is an exact match - there is no mobile subdomain such as http://m.yoursite.com/.

Threadless One URL

This has great benefits for:

  • Social Sharing: When visitors share your website on Facebook, Twitter or Pinterest, their friends will always get the right experience without broken links or mobile dead ends.
  • SEO: having your content in multiple places such as a mobile or tablet subdomain splits your SEO results. Mobify works with Google to make sure the latest mobile search standards are implemented on a platform level.
  • Marketing ROI: because visitors will automatically discover your mobile experience, all online marketing initiatives will be more effective - increased conversions, lowered mobile bounce rates and no QR codes required.

Mobify is recommended by Google as a multi-screen vendor. Try testing Mobify.com in the Google GoMo tester.

Is Mobify using transcoding, scraping, proxy or third-party application servers?

Mobify does not use any of these techniques - it relies on client-side adaptation instead. All the magic happens on the mobile device itself, which eliminates the need for scraping, transcoding or third party application (proxy) servers.

How long does Mobifying a website take?

This depends on the complexity of the website and the number of developers - anywhere from an hour for a landing page and up to a month for a major e-commerce website.

My website will change over time. How will it affect Mobify?

Mobify handles website evolution extremely well - especially when integrated with your team's workflow; most changes require no changes to your configuration.

Changes you may make that require no updates to your Mobify.js configuration:

  • Any CSS-only change to your desktop website
  • Adding another instance of an already existing template, for example:
    • adding, removing or updating a product
    • adding a category of products
  • Moving elements inside of pages or menus
  • Updating or adding images
  • Updating website text content

Typical planned maintenance activities that would require minor developer effort:

  • Adding a new template
  • Significant modifications to one or more existing templates
  • Adding new events to analytics tracking
  • Adding support for new 3rd party affiliate beacons

Changes that would require major developer effort:

  • Migrating e-Commerce platforms
  • Complete website redesign

I'd like to launch mobile-only functionality on my website. How can Mobify help?

There are two ways to deploy mobile-only functionality with Mobify.js:

  1. Custom HTML/JS included in your mobile templates. Your mobile templates are pure HTML documents - just write the HTML you want as part of the mobile site. This is great for content that changes infrequently such as custom mobile-only headers/footers and menus.

  2. Include hidden content on your desktop site. This hidden content can be selected and displayed in the tablet or mobile versions of the site. This solution is great if your content editors or marketing department already has access to your existing CMS to update text, images or other assets. They can keep using all the tools they're familiar with, Mobify will pick up the changes immediately and make them available to mobile visitors.

A key feature of deploying mobile-only functionality with Mobify is being able to retain the same URL for mobile and desktop without making any server-side changes or redirects. A good example of this is the Starbucks mobile store locator. Compare it with the store locator on desktop.

Starbucks store locator

What are some performance best practices for mobile websites?

  • Include only the scripts that you need. This is the single most critical performance barrier. Synchronous JavaScript is the enemy of performant mobile websites. Even if large sections of your script are not used, mobile browsers must still parse and compile the entire script. Pulling down large frameworks, or even worse, multiple frameworks, will significantly impact the performance of your page loading.
  • If you absolutely must have a large script, consider if it can be loaded asynchronously, this will mean evaluation can take place without blocking the rendering of the page. See the MDN reference for using the async script tag option.
  • Use Mobify's image resizing service on all large images on your site. Mobify's image resizing service will compress the image and size it to an appropriate resolution for the visiting device.
  • Avoid the use of redundant CSS and minimize the number of lines of CSS for your site.

With Mobify, are all desktop resources downloaded on mobile?

Mobify will always improve the performance of your page. Mobify uses client-side adaptation to circumvent the speculative lookahead parsing of mobile browsers. The developer gets to specify what resources are required and only those assets are downloaded. This can speed up page load time by a factor of 4.

Here are a couple of graphs showing improvements in selected Mobify.js pages for both page size and number of resources. The amount of improvement varies by what content is selected and how many scripts are included.

Sample Page Sizes
Sample Load Speed

How does Mobify fit in with responsive web design?

Mobify.js can make any website responsive, as well as improve performance and UX of responsive websites using fluid grids. Use Mobify to power up your website by eliminating unneeded resources, moving or removing DOM elements and optimizing your images for small or large screens.

I've got a responsive website. How can Mobify be useful?

Great! You're well ahead of the curve. Mobify's framework, Mobify.js, gives developers additional control over the mobile DOM and makes your website significantly faster. Use Mobify.js to select only which parts of your responsive site to download.

  • Optimize scripts and implement responsive images both for smartphone and high-resolution retina screens.
  • Add or remove HTML elements that need to move to other locations in the DOM for more refined UX control.
  • Use advanced Cloud features like automated QA, release management and global deployment available through the Mobify Cloud.

Which desktop browsers are supported by Studio?

Mobify Studio will run in modern versions of Chrome, Safari, and Firefox. Internet explorer does not provide sufficient coverage of current web technologies for Studio to work correctly.

Which mobile browsers are supported by Mobify?

Mobify supports WebKit-based mobile and tablet browsers including:

  • iOS (3.1.3+)
  • Android (2.1+)
  • BlackBerry (OS6+)

I am building an iOS/Android app. How can I use Mobify?

Mobify-powered websites can be paired with PhoneGap or loaded within a WebView to deliver secure cross-platform, high performance mobile applications. Mobify can detect when it's running in a PhoneGap frame and change key aspects of the experience to better integrate with your PhoneGap-based mobile or tablet application.

Consider mobifying parts of your website that are linked from within native apps, as well as combining fully native browsing/gallery functionality with a secure mobile web checkout powered by Mobify.

How does Mobify detect mobile and tablet devices?

Mobify uses a combination of User Agent and feature detection to identify the devices. This detection takes place in the Mobify Tag. You can generate new tags, selecting the required support, in the Tag section of your project in Mobify cloud. Experts can hand-edit the tag content if you want to tune support for more specific devices or deal with edge cases.

How does Mobify support iPad and other tablets?

You can deploy iPad or tablet adaptations using the same Mobify.js framework that is already powering the mobile version of your site. If you have created a mobile site, and want to do responsive on tablet devices, you will have to go to your project settings, and select both Smartphone and Tablet. After that, you have to go to the Tag link, and copy and paste the new tag into your site.

What kind of CMS and e-Commerce backends are supported by Mobify?

Mobify supports every type of CMS out there. All you need to do is insert the Mobify.js tag into your HTML, just as you would when deploying Google Analytics or Omniture. If your platform supports Google Analytics, it supports Mobify.

The Mobify Tag must go in the HEAD element of your page, and must be placed before any other <script> tags in your HTML.

How does Mobify integrate with analytics, A/B testing and ad serving vendors?

If you select the required scripts in your Mobify.js configuration file, they'll be imported and run exactly as they do on the main website, requiring no extra integration effort. If you have questions about integration with a specific third party, please post it here and we'll get back to you shortly!

Does Mobify support internationalization?

Yes - there are Mobify sites live in Arabic, Chinese, English, Estonian, Farsi, French, German, Italian, Japanese, Portuguese and Spanish and more. The content selectors work exactly the same regardless of the locale.

Developer Tip: if you're supporting multiple localizations with your website you'll want to make sure that you design your mobile templates to include a localized mobile header/footer/menu for each language/region you're supporting.

Does Mobify support iframes and AJAX content?

Yes and yes. For details on working with iframes, see this article.

AJAX requests that are in scripts you select as a component of the mobile adaptation will complete exactly the same way as they are on your desktop site. You can use the framework of your choice by selecting it using Mobify or including it in the mobile HTML, or use Mobify's framework, to make mobile-specific AJAX queries as needed.

Mobify's uses Zepto.js. It can be accessed at Mobify.$ after page rendering is complete. Zepto's AJAX call is largely compatible with jQuery and takes a similar settings object. You may want to filter or select from the content by chaining .filter() or other functions on the result of the AJAX call. For example:

Mobify.$.ajax({
    url: "http://example.org",
    async: true,
    type: "GET",
    contentType: "text/html",
    success: function(data) {
        // Lets use Mobify's selector engine on the AJAX result
        var $data = Mobify.$(data);
        // the selector engine makes it easy to pick things that
        // are important
        var $items = $data.find("div.important");
        if ($items.length == 0) {
            // Oops, we didn't find anything important
            // lets look for less important things
            $items = $data.find(div.lessImportant);
        }
        // Lets place this content inside of the div with id "ajaxTarget"
        $.Mobify.('div#ajaxTarget').appendChild($items);
    }
});

How does Mobify continuous automated testing work?

Mobify's continuous automated testing uses a cluster of servers to navigate through your mobile site. These automated tests are hand written by Mobify's QA team and navigate the site using a mobile-compatible web browser exactly the same way as a visitor would do using a phone. As it progresses through the site, the automated test framework captures screenshots of the pages so that visual comparisons can be conducted and a complete visual historical log of the site is maintained. If the test cannot be completed, for example due to pages that are not working properly, Mobify's QA team is notified. The visual log provides a complete history of when changes were made to the site and the effect those changes had on the experience.

Does Mobify affect mobile battery life?

Mobify improves the battery life of phones visiting your website. There are four key optimizations a web developer can make to improve the battery life of their phone. Mobify can help with all four.

Reduce amount of HTML to parse and render

Mobify escapes the HTML of your desktop site - that means it never passes through the HTML parser / rendering engine. Most desktop pages are substantially more complex than mobile pages. A web document is rendered from the deepest nodes in the rendering tree first. The shallower the DOM tree, the less complex the size computations will be. The mobile adaptation you create with Mobify will be much simpler for the phone to parse and render.

Reduce amount of JavaScript used on the page

With Mobify you select only the JavaScript you need for the mobile experience. For many pages this can be a dramatic reduction in the amount of JavaScript loaded.

Optimize the images

If needed, you can selectively reduce the number of images and focus on JPG compression which is faster to render and produces smaller file sizes on average.

Mobify.js provides an API for re-writing images through Mobify's image compression service. This API generates compressed JPEG images that use less bandwidth and are easier on the phone's CPU. Additionally, they are delivered via Mobify's cloud service, a CDN with data centers located throughout the world. Faster delivery means the phone's radio is turned on a shorter amount of time.

Reducing CSS size

With Mobify, only the mobile CSS is downloaded, parsed and evaluated. A pure responsive approach results in a CSS file that's even larger than the desktop CSS.

Can I use Mobify with client-side MVC frameworks like Backbone.js?

Mobify is a content adaptation platform complementary to Backbone.js. Mobify will help you adapt the page look-and-feel for mobile, control resources needed for the mobile page and style the page for phones and tablets. As Mobify does all of the resource control before the HTML is even rendered on the device, Mobify is completely compatible with Backbone.js and its alternatives so you can continue to use your backbone-enabled client side components connected to your RESTful server API in the mobile experience.

Are Mobify adaptations cached on device?

Yes. Mobify allows the adaptation bundle to be cached for up to 5 minutes. After 5 minutes the device will send a request for cache re-validation. This will generate a 304 Not Modified response that revalidates the file in the device cache for an additional 5 minutes. (Assuming, of course, no updates or changes have been made to the adaptation since the last client request.) The cache revalidation request is only a few bytes.

Do I have to create separate templates for different devices, or can I use just one?

It depends on what you're trying to do. As a rule of thumb, if you want the adaptations to be similar between the devices you'll probably use a single template with some device-specific rules. If the adaptations are dramatically different, it may be easier to create a new template for each.

How does Mobify prevent resource loading?

Mobify.js uses a technique called Client Side Adaptation to conditionally load external resources. Client Side Adaptation takes advantage of web browser states which do not allow loading of external resources.

The Mobify.js tag emits an opening <plaintext> tag. All of the content following the <plaintext> tag is not viewed as HTML by the browser, so the document is effectively finished downloading once the <plaintext> tag is inserted.

Once the document is fully consumed by the <plaintext> tag, Mobify.js creates a DOM representation of the original document from the text content of the <plaintext> tag. This is useful for programatically altering resources in the original document. For instance, by iterating through all images in the document, we can manipulate their src attribute to load a different resource.

Once manipulations are complete, the document is written back to the browser for rendering.

Does my desktop site have to be HTML5?

No, your desktop site does not have to be HTML5. Mobify can work with any valid HTML doctype. Please note the mobile site will default to the HTML5 doctype regardless of your desktop doctype.

As all modern smartphones support this doctype, we recommend using HTML5 on the mobile site as the default for the best experience, however it can be configured by altering the site base template if required.

Why does my site not load in Mobify Studio?

Studio needs to parse the HTML of your page in order to present it properly in the preview window. Some sites cannot be parsed due to malformed HTML or other document errors.

If your site is taking a long time to load in Studio, or the loading process has frozen, you can easily troubleshoot by doing the following:

  1. Ensure that you are using one of the recommended browsers.
  2. Validate your HTML and correct any of the existing errors in markup.
  3. View your browser console to see which errors are being produced.
  4. Reach out to our support team with the debugging information you found in step 3.

How do I delete a Mobify site?

Deleting a site from our servers is simple. Simply browse to your project settings page and click the Delete Mobile Site link.

https://cloud.mobify.com/projects/your_project/settings/

Mobify Tag


Will the Mobify Tag slow down my website for desktop visitors?

The Mobify.js tag will never slow down or otherwise affect your desktop website.

For desktop browsers, the Mobify Tag executes a single inline if statement to determine whether the User Agent is mobile. This is done in a period of microseconds even for very old browsers running on vintage architectures. We test Mobify.js against hundreds of browsers to make sure this is the case.

The Mobify Tag does not make any third party calls or download any external code for desktop visitors.

Can I use the Mobify Tag with Google Tag Manager?

No, you cannot use a tag manager to load Mobify. However, Mobify does not interfere with any tag manager that you may use.

Google Tag Manager, by design, includes a number of external scripts that are managed as part of a collection. If you include the Mobify Tag within this collection of scripts, the whole collection of scripts is downloaded from Google at the same time as the Mobify Tag. Only once the Mobify Tag is downloaded and executed will we be able to capture the content of the desktop page, but at this point a large number of assets could have already been requested by the mobile browser, completely defeating the performance benefits of using Mobify. In fact, the Google Tag Manager documentation recommends adding their tag immediately after the opening <body> tag of your document, after which time a large proportion of the page rendering has already taken place. With this recommendation, Mobify would not fire the adaptation until the entire head of the document had been downloaded and parsed.

Understanding why this is the case requires a little knowledge of JavaScript execution in the browser. A script that is written inline directly into the HTML of a page is executed immediately once it is seen by the browser. These inline scripts, like the Mobify Tag, effectively stop the browser from doing anything else while the script is working. It is because of this browser behaviour that we can capture the rest of the resources on the page and be sure that no further resources will download onto the mobile device unless we want them to. This resource management is one of the major features of Mobify.

In contrast, external scripts like the collection from Google Tag Manager are simply links to resources that need to be downloaded. The browser sees these external links and starts to download as many of them as it can at one time. The major difference here is that the browser will not stop parsing the document while these scripts are being downloaded.


Mobify.js


Is Mobify.js open source?

Yes. You can find the source code on Github.

How is Mobify.js different from jQuery Mobile or Sencha?

JQuery Mobile, Sencha Touch and similar libraries provide great toolkits for building user-interfaces that mimic native app behaviour. They can be used in your Mobify templates to build the visual components of the user interface. Mobify resides underneath these libraries providing client-side content adaptation, device detection, resource optimization and rules based templating.

What kind of tools are required for developing with Mobify.js?

Mobify.js development tools are cross-platform and available for Windows, Mac and Linux. The development tools depend on the Node.js server and are available under the MIT license.

What cookies does Mobify.js set?

mobify-path=<empty>

  • Set when the browser opts out of the adaptation.

mobify-path=-1**

  • Set if the adaptation failed on the browser.

mobify-path=/path/to/mobify.js**

  • Set for developers working on adaptations.

mobify-all=1

  • Set for developers working on adaptations.

mobify-debug=1

  • This cookie is only used for developers debugging a Mobify.js adaptation.
  • Set only for developers working on adaptations.

Mobify.js also takes advantage of Session Storage:

mobify-path=/path/to/mobify.js

  • Set only for developers working on adaptations.
  • This session storage key is used to manage the state of the Mobify.js adaptation.

The cookies used by Mobify.js are compatible with the Information Commissioner's Office (ICO) Regulations regarding cookie use. According to ICO's Guidance on the rules on use of cookies and similar technologies, cookies which are strictly necessary to provide the service the user requests are exempt from the regulations requiring user consent.

Mobify.js uses a cookie to service the user request for the desktop website. This cookie is strictly necessary to remember this preference.

What version of Zepto does Mobify.js use?

Mobify.js uses Zepto 1.0 RC1. This version of Zepto is slightly different than Zepto version 1.0. Some of the functionality described in the Zepto documentation will not be the same within Mobify.js. The version included within Mobify.js can be found on Github. Currently it's not possible to upgrade the version of Zepto that Mobify.js is using.


Mobify Client


How do I update Mobify Client?

Mobify provides a command-line interface (CLI) client that helps you develop and build your adaptations. On OSX and Linux you will need to preface the following commands with sudo, and on Windows you will need to have administrator priviledges to install or update the client.

To start, first open a Terminal (OSX / Linux) window or a Command Prompt (Windows).

To upgrade the client, you will need to remove the old version.

First check what version of the mobify client you have:

mobify --version

If you have a version in the 0.3.x or later series, you can remove it by typing:

npm -g remove mobify-client

If you have a version in the 0.2.x series, or older, you can remove it by typing:

npm -g remove mobify-js-tools

Finally, once it has been removed, you can install the latest version by typing:

npm -g install mobify-client

Common Errors when using Mobify Client

Request unauthorized. Check your credentials.

This error occurs when Mobify does not recognize the credentials used by the Mobify Client. You can reset your credentials by navigating to the Account Settings page.

If you update your email address, you will need to reauthenticate Mobify Client:

mobify login --auth you@example.com:your_super_long_API_key

If you don't know your API key, you can find it on the Project Settings page:

https://cloud.mobify.com/projects/your_project/settings/

Project not found. Check your project name in project.json.

This error occurs when the Mobify Cloud cannot find a project associated with the credentials used by the Mobify Client.

This error could be the result of using the wrong project name in your project.json file.

The name in your project's project.json file must match the project ID on cloud.mobify.com. You can find your project ID in the Project Settings page. Ensure the two are the same!

Using invalid credentials.

The credentials used by the Mobify Client must have write access to the project. Ensure the credentials used by the client have access to the project.

There were some errors during the build.

This error occurs when the Mobify Client is unable to build your project.

There are a number of reasons why this could occur:

  1. There is a syntax error in the JavaScript of the project. The Mobify Client minifies JavaScript for builds. Syntax errors in your JavaScript will abort the build. Correct the syntax error and try building again!
  2. There is a syntax error in a template of the project. The Mobify Client compiles templates for builds. Syntax errors in templates such as missing templates will abort the build. Correct the errors in your templates and try building again!
  3. There is a syntax error in the CSS of the project. The Mobify Client minifies CSS for builds. Syntax errors in the project's CSS will abort the build. Correct the syntax error and try building again!

Mobify Preview


What is Mobify Preview?

You may have seen preview.mobify.com when previewing bundles on your mobile device. Typically, when previewing a bundle, you do so by clicking Preview on your project page on cloud.mobify.com. To understand why this is necessary, you must understand how Preview works on in the first place.

Your tag on production has a permanent link to your production bundle link. For example:

//cdn.mobify.com/sites/mobify-store/production/mobify.js

But when developing your mobile site, it is handy to be able to swap the bundles on the fly. In order to do this safely without falling vulnerable to cross-site scripting attacks, we set a preview cookie on the preview.mobify.com domain. There are two ways to set the preview cookie: either by going to preview.mobify.com and pressing AUTHORIZE, or by logging into cloud. If mobify-path is set in the query string, sessionStorage, or cookies of your website, then the Mobify Tag placed on your site will request your bundle by doing a GET request to preview.mobify.com, instead of directly loading your production bundle. Here is an example of such a request:

http://preview.mobify.com///cdn.mobify.com/sites/mobify-store/production/

The preview cookie that was previously set (either by clicking AUTHORIZE, or by logging into cloud) will get sent along with this GET request, and if the cookie is valid, this request returns JavaScript which creates a script element pointing to the bundle specified in the GET request, which will load Mobify.js from that specified bundle! Note that if you change your IP address, or your User Agent, your preview cookie will no longer be valid, and you will need to reauthorize in order to use Preview again.

To reiterate, the need for an AUTHORIZE button on the phone is necessary to prevent cross-site scripting attacks when previewing unpublished bundles on your mobile device.

Why isn't Preview working?

I only see my desktop site in the iframe of the Preview page

Do you have an error in your JavaScript?

  • If you see your desktop site in the phone iframe, but you expected to see your mobile site's adaptations, you may have an issue in your project's selections or template. If you open the Inspector (right click on the page and click Inspect Element), and then click Console, you will see the debug output generated by Mobify.js. This can be helpful to hunt down any potential errors.

Only my homepage Mobifies - other pages render my desktop site

Do scripts on your site change document.domain?

  • When previewing a bundle, Mobify.js saves the bundle in window.sessionStorage['mobify-path']. In Safari, if document.domain is changed (for example, from www.mobify.com -> mobify.com), then the data saved in sessionStorage will not appear in the next page load. This behaviour is different in Chrome and Firefox - in these browsers, the sessionStorage will persist even if you change document.domain.
  • If you are using Safari, and this is your issue - please select the option to set Preview for all tabs. This will store the bundle id in cookies instead of sessionStorage.

Why do I get a warning when loading Mobify.js during development?

  • If you are developing on a site with https, you will get a warning to inform you that you are loading insecure content, because we only load Mobify.js over localhost on http during development.

I just see a white screen...

Is there a console message that says "Enable preview at preview.mobify.com"?

  • If you see this message, and you're previewing your site through the iframe, or directly through preview.mobify.com, then you are likely blocking third party cookies.

Why isn't on device preview working?

Sometimes when you try using the on device preview feature, you may see your desktop site show up on your phone. The main cause of this is a redirect. To fix the issue, log into cloud.mobify.com and go to the settings page for your project. Check that the url of your website is prefixed with http://www.yoursite.com. If you only have only used http://yoursite.com as the address, it is likely that your phone is redirecting the site to http://www.yoursite.com when you are previewing your site, and breaking the preview functionality.

Last Edited