Purpose and Audience

This document is a detailed overview of Mobify's platform. Large sections of this document are written for a technical audience and are dedicated to explanations of the underlying architecture and implementation of our technology.


What is Mobify?


Mobify is an open, standards based web platform to help you generate engagement for your mobile visitors on smartphones and tablets. Use Mobify to create beautiful, fast, cross-platform websites using a single URL - no redirects, m-dots or proxy servers required. While most commonly used for mobile, tablet, and smart TV devices, Mobify can apply custom website optimizations to a variety of devices and form factors.

We call this the One Web world - the same web page should always offer a perfect experience, no matter which browser or device your visitors are using.

To enable any Mobify functionality, all you have to do is insert a single JavaScript tag into the markup of your desktop site - no extra plugins or other integration with your e-commerce or CMS engine is required. The Mobify tag works with all backends and instantly gives you complete control over the presentation layer of a web document for any type of visiting device. It also provides granular management over resources such as images, scripts and plugins. All development with Mobify's platform is done using only standard web languages - JavaScript, HTML, and CSS.


Who Uses Mobify?


Mobify serves tens of millions of mobile users every month for e-commerce and publishing companies like Starbucks, British Telecom, Garmin, Expedia, Beyond The Rack, and Condé Nast.

Mobify is used by leading Fortune 500 companies. Globally, one in four smartphone subscribers have accessed a Mobify-powered website. See Mobify's customer page for customer examples and case studies.


Mobile Proxies, Transcoding, and Screen Scraping


Mobify's platform does not proxy, transcode or screen scrape and no extra application server is in the critical path between your visitor and your content. Communication between your visitors and your website is direct with no additional intermediate servers or changes to the network path. Other approaches often require a separate mobile URL such as m.yoursite.com. These approaches use application or proxy servers, sometimes called 'engines', which intercept and modify requests and responses from your desktop website, introducing an additional point of processing and failure.

Your visitor's data never passes through our servers, and no modifications to your existing security infrastructure are necessary, making Mobify the most secure solution in the marketplace.


An Overview of Mobify's Platform


The Mobify platform uses the power of modern devices to create a fully optimized experience for your visitors. By leveraging the Mobify platform, you can build, deploy, and maintain mobile optimizations for your visitors without having to rebuild your existing website.

The Mobify Solution: faster load times and inherited security model.

Mobify's platform is comprised of two main technologies: the client-side framework Mobify.js and our Mobify cloud.

Built into Mobify.js are APIs that enable features such as our JavaScript and CSS Accelerator and Responsive Image Optimizer. These performance features are backed by our cloud infrastructure which provides your visitors with resources that are optimized specifically for their device.

For e-commerce, enterprise and business users, Mobify provides a suite of tools through the Mobify cloud that make Mobify.js enterprise-ready. Automated testing, one-click deployment, infinite development sandboxes, and built-in team management provide your team with all the of the tools to develop and deploy new mobile experiences with no risk to your existing infrastructure.

A more comprehensive overview of the features of Mobify's platform follows:

One URL

All pages remain at the original URL for each visiting device. Device detection happens dynamically with each page view and the correct optimizations are applied for that exact device. It doesn't matter how visitors arrive or what device they are using, they can always browse your site using a single URL. This URL parity between desktop and mobile devices is essential to comply with Google SEO best practices, marketing integration and sensible social sharing.

Security

Mobify holds a current PCI DSS 2.0 SAQ-D certification.

With Mobify, your content and visitor data passes directly between your visitor and your website. All transaction data is communicated directly between the web visitor and your e-commerce or CMS - none of your content, or the information your visitors send back to you, ever passes through Mobify's cloud servers.

For more information on the security of Mobify's platform, please see the Security section of this document.

Reliability

Mobify uses a multi-cloud vendor stack that is backed by multiple international CDNs which act as a failover for each other if one goes offline. Each node in the network is a clone of the other, allowing nodes to be removed or added with no performance degradation to the network as a whole.

For more information on the reliability of Mobify's platform, please see the Reliability section of this document.

Scalability

The Mobify cloud distributes your resources globally, so your optimized resources and mobile-specific optimizations have the advantage of being served from very near your visitors. Since your mobile site is being powered by a scalable, globally distributed, cache cluster and not an application server, you will never have to worry about provisioning new web servers to handle spikes in mobile traffic. Mobify's client-side technology uses these lightweight assets to execute the transformations directly on the visitor's device, greatly increasing the overall performance of the mobile optimizations.

For more information on the scalability of Mobify's platform, please see the Scalability section of this document.

You Maintain Control

All of the code that is developed to power your new mobile site belongs to you. For our professional services, we manage each customer project with source control tools and share the code directly with your team.

With our open technology, you can always take the development in-house. You will never be locked in to a proprietary platform.

Cloud-backed Performance Features

Through Mobify Performance Suite, the Mobify cloud offers two major performance features to further optimize your mobile experience. The first is a Responsive Image Optimization feature that provides optimized images to your visitors based on the exact specifications of their device. This means that large, weighty images are only sent to Retina-quality screens (like an iPad) and tiny images are sent to devices with low-resolution screens.

The second is our JavaScript and CSS Acceleration feature that, among other benefits, minifies and compresses your assets and serves them from our global cloud network.

For more information on how the Mobify Performance Suite optimizes your resources, please see the Resource Optimization section of this document.

Open Source

The framework that powers the mobile optimizations, Mobify.js, is available as open source software under an MIT license. We will never lock our customers in with proprietary languages.

Standard Web Languages

Mobify.js is written entirely in JavaScript. Designing your optimizations is likewise done with JavaScript. If you are optimizing your page layout, your templates are written in regular HTML and CSS. You will never need to learn a proprietary language to use Mobify.

Device Specific Optimizations

With client-side adaptation, you have insight into the full capabilities of a visitor's device. This means that any web-enabled device can have optimizations designed specifically for its abilities and screen real-estate. This is not possible with server-side device detection technologies that have limited knowledge of actual client capabilities.

As part of the optimizations, you can define granular rules for loading resources depending on the particular capabilities of that device.

For more information on the device specific optimizations that are possible, please see the Device Specific Optimizations section of this document.


The Mobify Cloud


Features

The Mobify cloud is not just a delivery network for your mobile website; we also provide the following features:

Mobify Studio

Mobify Studio is a visual, point-and-click editor that enables you to make any website responsive. Optimize the layout of your existing website with Mobify Studio by selecting and adjusting only the page elements you want to appear on mobile devices.

Mobify Performance Suite

The cloud-backed performance features that comprise Mobify Performance Suite are fully configurable through a single page web app in the main cloud interface. Detailed reporting displays the live performance gains for your website.

Unlimited Staging Environments

The main Mobify cloud interface provides you with a listing of all available bundles that have been created for your optimizations. Each individual bundle can be previewed against your live site with no affect on your production environment.

Deployment Controls

The Mobify cloud interface provides you with advanced tools to manage mobile code deployment, versioning and enhancements with industry-leading best practices. Each version of your project is contained in a bundle that is a standalone snapshot of your optimizations. With a single click, you can roll forward or backward to any of these bundles:

Image options

Role Management

Access to the Mobify cloud is controlled by a user-configurable role management system. Each role has different permissions that allow a user to interact with your project in a controlled manner depending on their access level.

Audit and Release Management

Each modification to your mobile optimizations is tied to a particular user account. A full record is maintained of all project changes so you will always have a full audit trail.

Automated QA

Critical-path QA tests run at scheduled intervals for certainty on mobile performance, site availability and to provide an audit trail of mobile screenshots. For manual testing, Mobify offers a large device library.

Mobile Traffic and Conversion Dashboard

Your cloud interface can be augmented with a customized dashboard that displays your mobile traffic, bounce rate, conversion rate, and mobile revenue (if applicable). This is a separate dashboard that is configured for individual projects if requested.

Architecture

The Mobify Solution: faster load times and inherited security model.

The Mobify Delivery Network

This is the delivery network that powers the mobile experience for tens of thousands of websites today. These bundles are served from a combination of multiple CDNs and a redundant origin fabric. All network traffic is balanced between our CDNs through geolocation and anycast DNS lookups. In the event of a complete failure of one of these networks, bundles are still served from the other networks. If all networks are inaccessible, our origin has the capacity to support all visitors directly until the networks are back online.

Mobify's platform builds and delivers JavaScript content in the form of a static Mobify.js bundle. The static nature of this content means that Mobify can deploy and cache it across multiple redundant CDNs using IP and DNS anycast layers. For a listing of the current points of presence that Mobify serves assets from, please see the section on our CDN points of presence.

Asset Origins

Mobify.js Files

Each Mobify.js optimization file is published to a global network of static file servers. From this network, the Mobify.js file for your project is distributed across our entire delivery network.

Optimized Images

Our Responsive Image Optimization service is the origin for each optimized image that is served by the Mobify cloud. All optimized images are subsequently distributed across our delivery network.

Optimized Scripts and Stylesheets

Our JavaScript and CSS Acceleration service is the origin for all stylesheets and JavaScript files that you choose to optimize. All optimized assets are distributed across our delivery network.

Service Failovers

Mobify maintains a number of redundant servers on our own managed network.

Our Responsive Image Optimization service has a client-side fallback, as well as a failover on our managed servers. If the image resizing engine cannot be reached, the visitor's browser will automatically fall back to the original image directly from your network.

Our Script and CSS Acceleration service is similarly completely redundant with both server-side and client-side fallback behavior. Our managed network also acts as the server-side failover for this service.

As a failover for our static file servers that serve your bundles, Mobify maintains a functionally identical clone. This failover contains the same files as our global network of static file servers and can be used to deliver the optimization bundles in the event of an outage.

Management Servers

The management servers that Mobify uses at cloud.mobify.com live on our own private network. These servers handle the publishing of optimizations to our delivery network as well as powering the cloud interface that our customers use to manage their mobile sites. All of these management servers are fully redundant and load balanced.

Reliability

Mobify's network is fully redundant. As described above, each service has at least one backup in case of catastrophic failure of any aspect of our network. Failovers are handled invisibly to the end visitor through IP and DNS anycast routing and load balancers.

Scalability

Application servers, such as those used by approaches requiring a proxy server, have a fixed capacity. They must execute code and contain decision-making logic which increases their complexity and limits their scalability. The only way to grow this capacity is to add application servers.

Application servers are typically only located in one or two availability zones. This limits the number of edge locations that can be supported and the amount of redundancy that can be achieved with application servers.

Mobify's platform does not require an additional application server environment. Seasonality may drive huge swings in traffic to your servers. Mobify's platform is unaffected by seasonality and usage spikes because of the number of edge locations we serve from and the static nature of what we deliver. The static content that Mobify delivers can be easily served from locations all over the world, as we don't rely on cloud application servers such as EC2, which are limited in their geographic coverage.

Zero Downtime

Mobify's customers include major US retailers who experience high traffic volumes during the period leading up to and including Black Friday. The Mobify.js delivery network has never had a service disruption since going live in 2010.

Single Origin

A major benefit of the Mobify cloud is only making one extra DNS lookup from a mobile device to access all of your mobile assets. When a DNS lookup takes an average of 200-300ms on mobile devices, minimizing lookups makes a noticeable difference to page performance. Once this first lookup is made, a warm connection is used to deliver all of your optimized assets instead of opening new connections to multiple third-party servers.

Benefits of Mobify's Architecture

With Mobify's solution, all optimizations can be cached, which drastically increases the performance of the mobile site. This approach also ensures that there is never a single point of failure for your mobile experience - in the event of a catastrophic outage where the Mobify optimizations can not be found, your mobile visitors will simply see your desktop experience. They will never see a 404, or any other kind of user-experience blocker.


The Mobify.js Framework


Mobify.js is a client-side JavaScript framework that powers mobile experiences and optimizations for some of the largest e-commerce players in the world today. The framework itself contains all of the necessary functionality to fully optimize any existing page into a new experience and optimize any of the resources of that page.

Open Source

As with any technology that Mobify develops, Mobify.js is open source under the MIT license.

Standard Web Languages

Any development with Mobify is done using existing web languages. All front-end development for a new mobile experience is written directly in JavaScript, and any templates you create to optimize the experience for a mobile visitor are created using nothing but HTML and CSS (you can use SASS/SCSS as well). You will never have to learn a proprietary language to use Mobify.

Developer Control

Mobify's cloud and management console provides the business and enterprise tool suite you expect from an enterprise product such as release management, role based access control, staging and automated test. But if your organization needs complete control sometimes it's necessary to host your Mobify powered adaptive layer in your own environment. Our expert engineers can help you choose the right approach for your business.

Development Sandboxes

Any site that is powered by Mobify always has two main parts: the Mobify tag and the Mobify.js bundle that contains any configured optimizations.

The Mobify tag contains logic that allows a developer to set a cookie to load the Mobify.js from another location than the one specified by the production tag. This functionality gives developers the ability to develop directly against the live website without affecting the experience for normal visitors by locally swapping in the development bundle in place of the production bundle.

The ability to develop against either a live production or staging environment without changing the tag and without affecting the existing experience gives developers an infinite number of virtual sandboxes to work with.

Mobify Client

Mobify Client is a set of command-line tools that developers can use as part of their existing development process.

Based on Node.js, Mobify Client will listen to your project directory and create a new Mobify.js bundle each time you make a change. Once your changes are finished, Mobify Client interfaces directly with the Mobify cloud to publish your work for all of your mobile visitors.

The Mobile Rendering Process with Mobify.js

With Mobify, your mobile site is rendered entirely on the visitor's device through client-side adaptation. This process is broken down into three distinct phases that happen in series, with the output of one stage as the input for the next. These phases are Capturing, Adaptation, and Rendering. The engineers and designers defining the optimizations have control over these phases, including the ability to abort optimizations and reset to the original desktop state. In the event of an error, Mobify's framework will fail gracefully and render the desktop site so your visitors will always be able to access your site.

As part of defining the optimizations for the Adaptation stage, developers have the option to selectively use any of Mobify's features in a standalone manner. The current page can be redesigned using adaptive templating, or it can simply be optimized with Mobify's performance features, or a combination of both - the Mobify.js framework gives developers the flexibility to entirely optimize the experience for any form factor. The performance features are documented in the section Resource Optimization. For simplicity, the following explanation only covers the adaptive templating process.

Capturing

The first stage of creating the mobile site starts with a normal request to your website. When the response comes back from your servers, the browser will immediately discover the Mobify tag. This tag is a snippet of inline JavaScript that is inserted directly below your opening <head> tag. When the tag is discovered, it immediately runs a check on which device the page is being loaded on. If the current device is one that you have configured optimizations for, the tag will execute. On devices that you have not configured optimizations for, the Mobify tag is effectively a NOOP. An examples of the Mobify tag follows:

<script type="text/JavaScript">/*<![CDATA[*/(function(a){function b(a,b){if(+a)return~a||(d.cookie=h+"=; path=/");j=d.createElement(e),k=d.getElementsByTagName(e)[0],j.src=a,b&&(j.onload=j.onerror=b),k.parentNode.insertBefore(j,k)}function c(){n.api||b(l.shift()||-1,c)}if(this.Mobify)return;var d=document,e="script",f="mobify",g="."+f+".com/",h=f+"-path",i=g+"un"+f+".js",j,k,l=[!1,1],m,n=this.Mobify={points:[+(new Date)],tagVersion:[6,1],ajs:"//a.mobify.com/charles-tyrwhitt/a.js"},o=/((; )|#|&|^)mobify-path=([^&;]*)/g.exec(location.hash+"; "+d.cookie);o?(m=o[3])&&!+(m=o[2]&&sessionStorage[h]||m)&&(l=[!0,"//preview"+g+escape(m)]):(l=a()||l,l[0]&&l.push("//cdn"+i,"//files01"+i)),l.shift()?(d.write('<plaintext style="display:none;">'),setTimeout(c)):b(l[0])})(function(){if(/ip(hone|od)|android.*(mobile)|blackberry.*applewebkit/i.test(navigator.userAgent)){return[1,"//cdn.mobify.com/path/to/your/mobify.js"]}return[0,Mobify.ajs]})/*]]>*/</script>

By default, Mobify uses the User-Agent of the device to specify which set of optimizations to load. This test can be modified to use any device attribute such as screen size. If you wish to load different optimizations for different devices, the tag can easily be extended to allow this.

If a specified device is detected, the Mobify tag will shunt the entire base HTML of the page into a buffer. We refer to this action as 'Capturing' the document. In parallel with this action, the tag also downloads the Mobify.js file. This file contains the Mobify framework as well as any optimizations, layout or styling that you have designed for the mobile device. If the visitor has already downloaded this particular Mobify.js bundle, the device will load it from local storage instead of the Mobify cloud.

The Capturing process ensures that none of the existing desktop resources are loaded onto the device before they have been properly optimized. By storing the contents of your desktop page in memory, we can easily select content from the document and modify it before the device downloads or renders any resources.

To aid the following stages, we take the Captured document and build a hidden DOM using the power of the mobile browser. This stage is very fast and allows us to use built-in browser functionality to select content from your desktop page.

Adaptation

Content Selection

At this stage, we have a full, hidden DOM that we can easily select content from using JavaScript. The Mobify framework has a lightweight selection engine, Zepto.js, built in for your convenience.

Using JavaScript selections, you configure what content to extract from your desktop content by specifying a query selector. This selector can be as simple as an HTML element ID, or as complicated as a chained expression spanning multiple levels of the DOM tree with full text search.

During this selection process, it is often useful to modify the content as it's being extracted and before it's injected into the new mobile document. For example, you might want to search and replace further terms, or add classes to inner components of the extracted content to make it easier to style.

For example, let's imagine we're trying to extract a set of product hero images for use in a mobile optimized image carousel. The base HTML might look something like this:

<div id="heroSection">
    <ul class="productImageContainer">
        <li><img src="1.jpg"/></li>
        <li><img src="2.jpg"/></li>
        <li><img src="3.jpg"/></li>
        <li><img src="4.jpg"/></li>
        <li><img src="5.jpg"/></li>
    </ul>
</div>

We could write the content extractor as follows:

$('#heroSection img');

This would select each of the 'img' elements from the part of the document with id 'heroSection'. Sometimes it's useful to do a little more, like adding the class 'mobileHeroImage' to make these images easier to style. We can do this easily:

$('#heroSection img').addClass('mobileHeroImage');

Template Processing

At this stage, we have selected the content we would like to display on the mobile page. All of these selections currently exist as a collection of HTML elements that we can now pass to the template for that page. To combine this content with your predefined mobile layout, the Mobify framework provides an optimized and extended version of the Dust.js templating library. Dust.js supports the concept of template inheritance which means there is a root template where site-wide behaviours such as a universal footer can be defined. All subsequent templates inherit from this root template. This inheritance allows developers to adhere to the Don't Repeat Yourself philosophy while designing the mobile site.

A basic template might look similar to this:

{! This is a comment. It will not appear in the template output. !}
{! Here we include the root template. !}
{>root/}
{! This block overrides the body section of the root template !}
{<body}
    {#content}
        {! We write out the title selection within the h1 element !}
        <h1>{title}</h1>
        <div id="carousel">
            {carouselImages}
        </div>
    {/content}
{/body}

Once the template has been processed with your selected content, the new mobile document is served back to the mobile browser. The new mobile document that is created in this stage is specifically structured by our engineers to adhere to performance best practices. As we have complete control over the structure of the mobile document, every script or image can be placed in an order that maximizes page rendering speed.

Included Features for Designers

In addition to providing complete control over the mobile DOM, Mobify.js provides enhanced features to make writing responsive CSS rules easier. Mobify.js will inject additional classes on the <html> element to indicate the type of mobile OS and properties of the screen that the site is being viewed on. These classes are:

  • x-landscape and x-portrait
    • These classes specify device orientation.
    • Exactly one of those will be present at a time.
    • The classes will be updated whenever device is rotated by the visitor.
  • x-hd and x-sd
    • These classes indicate pixel density.
    • x-sd is set if the device has approximately 1:1 - 1.5:1 relation between device pixels and CSS pixels. (e.g. iPhone 3G/3Gs)
    • x-hd and x-hd15 is set if the device pixel/CSS pixel ratio is between 1.5:1 and 2:1 (e.g. high-end Android devices)
    • x-hd and x-hd20 is set if the device has more than 2 device pixels per CSS pixel (e.g. iPhone 4).
  • x-touch is set if the device browser has support for touch events.
  • x-ios, x-android, x-nokia, x-blackberry, x-webos indicate the OS used by the device.

Rendering

At this stage, the mobile browser contains the new mobile document. The new, well-crafted HTML is parsed and rendered normally. As a result of the structural changes that are possible while templating your mobile site, developers can tweak every aspect of the performance of their mobile site to provide the most performant page possible.

Performance

The two main performance bottlenecks on mobile devices are bandwidth and network latency. To create a performant website for mobile devices, both issues need to be addressed by decreasing the number of HTTP requests as well as decreasing the overall page size.

Decrease HTTP Requests

Network latency is a major concern on current mobile networks, so minimizing the number of requests that need to be made will avoid the overhead involved in waiting for these requests to complete.

With Mobify.js, you can specify only the assets you wish to see in your mobile experience. All other assets are simply ignored by the browser and are never downloaded.

The following graph shows the decrease in resource requests before and after Mobify. These decreases are common for all of our customers.

Image options

Decrease Page Size

Bandwidth is still a limitation on most mobile devices in the market today, so page size is directly correlated with how long the page will take to load. By selectively loading only the correct, optimized assets for mobile, we can minimize the time the mobile device takes to load the page.

The following graph is a representation of the changes in page size we see before and after Mobify. Such results are common for all of our customers.

Image options

Integration


Integrating with Mobify is easy - simply insert the Mobify tag in the head of each page you wish to optimize. Generally, websites are built with a hierarchy allowing developers to put the Mobify tag in the header template so it is rendered out on all pages of a site. Don't worry, if the tag is in a page that has no optimizations defined for it, the visitor will see the same page as they would if the Mobify tag wasn't there.

Integrating With Your Infrastructure

Mobify uses the HTML, CSS and JavaScript content that is served back from your servers and optimizes it. The content is being optimized at the same URL and is achieved using client-side adaptation, so Mobify does not require any server configuration changes on your backend.

Zero Back-End Impact, Zero Risk

Mobify's tag does not load any synchronous external resources for visitors on opted-out browsers (desktop browsers, for example) and has no performance impact on these visitors. Mobify's mature tag is deployed on thousands of websites and has been included in tens of billions of pageviews.

Competing approaches must integrate at your datacenter as an appliance or use a mobile proxy server located in the cloud, typically EC2. Integrations from these providers must take one of two approaches:

  • Drive all traffic, including desktop traffic, through a web appliance that will route traffic to the correct back-end using device User-Agent string. This approach entails a significant change to your back-end and significant risk as service outages can affect desktop traffic as well.

  • The second approach is to redirect mobile traffic to a proxy server located in the cloud. This proxy server scrapes content from your servers. This approach requires deployment of either a JavaScript snippet to perform the redirect which can be slow and may require a blocking 3rd party call that can slow down desktop visitors or redirect logic deployed at the web server level. The latter approach is based on User-Agent strings which is both inaccurate and entails extensive integration with your application and web servers as well as added complexity for your caching layers, including CDNs, as different content will be served for different User-Agents.

Existing APIs

Any existing APIs that your site currently utilizes do not need to be reconfigured to work with Mobify - all API calls will come from the same URLs as they would on the desktop experience.

OAuth

If you are currently using OAuth or another form of visitor login, no configuration changes need to be made to integrate with Mobify. As every visitor will always be at the same URL, any OAuth endpoints will always be the same, and all requests are served unaltered to the visitor.

SSL

As a JavaScript framework, Mobify.js can exist on any HTML page, secured or not. Visitors will communicate directly with your servers using your current SSL certificate and without any changes to your configuration.

Visitor Data

All of your visitor data flows directly between the visitor and your servers - Mobify never intercepts, decrypts, or touches this data in any way. Any cookies that are set for a visitor are exactly the same as a desktop visitor would receive. For more information on visitor security with Mobify, please see the Security section of this document.

AJAX

A powerful benefit of providing a one URL experience for your visitors is the ability to augment their experience through AJAX. Browser security rules allow AJAX requests between your same domain, but not between different subdomains. For more information on the security reasons behind this browser security measure, please read about the same-origin policy. Simply put, this policy maintains that any request between pages on the same domain are allowed, but requests from a separate domain (eg. m.yoursite.com) are blocked.

As Mobify is serving the mobile optimizations at the same URL, developers have the ability to augment the visitor's experience with any content from elsewhere on the site. A great example of this is the persistent shopping cart functionality that Mobify's development team created for the mobile experience on Garmin.com.

Managing Content Updates

Mobify uses the content that is served back from your servers as the starting point for any optimization that occurs for a particular visitor. Any of the content that a visitor sees will always be the same data that is coming from your servers. Mobify's client-side adaptation ensures that all of the data a visitor sees is live which makes Mobify an ideal choice for e-commerce and enterprises where inventory delay or cached content is unacceptable.

With live data as the starting point for any optimization, any content updates that are made like adding a new product or article are passed directly on to a visitor immediately. Mobify is not a CMS, and you will never have to worry about content lag between your desktop visitors and any experience powered by Mobify.

Structural Modifications

Mobify's selection engine uses the CSS attributes of your markup to select content for optimization or inclusion into a new mobile experience. If a change occurs to a desktop HTML element that one of these selectors was mapped to, the selector will need to be updated to reflect the change.

If Mobify.js doesn't recognize the page content, for example if no template exists for the page, or the template has changed too much for the adaptive rules to work properly, it will display the desktop page to the visitor. You can enable reporting of this condition to notify your development team of templates that need to be optimized for mobile.

Caching

Resources optimized with Mobify's performance tools are served from Mobify's CDN with smart cache headers to increase performance. Following the best practices of 'one resource, one URL', no consideration needs to be given to modifying this cache behaviour for assets that never change at the same URL. If, however, some of your assets do change and remain at the same URL, these assets can easily be marked as 'never cache' to ensure that your visitors are always receiving the freshest data.

Analytics

Since all devices are accessing the same URL, your existing analytics setup can be used to monitor all traffic and analytics to your site with no customization. If required, you can use Mobify to enrich your analytics data feed by populating custom variables and tracking device-specific custom events with any analytics provider that supports these features.

3rd Party Frameworks

Mobify plays a complementary role in the system stack with web development frameworks. Mobify lets you selectively enable functionality from any of these frameworks for each of your optimized pages. This gives you granular control over the resources they use. For example, you may not need some interactive functionality for the mobile site, such as functionality that is redundant with capabilities provided by the Mobify.js framework. Or you might have custom business logic that runs in the browser that has API hooks into one of these frameworks. In either case, Mobify.js can make sure only the right libraries are loaded on the client.

A/B Testing Frameworks

Mobify integrates with both client-side and server-side multivariate testing frameworks.

JQuery Mobile and Sencha Touch

JQuery Mobile, Sencha Touch and similar libraries provide toolkits for building visual interfaces that mimic native app behaviour. They can be used in your Mobify templates to build the visual components of the interface. Mobify resides underneath these libraries performing templating, device detection and resource optimization.


Security


PCI Compliance

Mobify holds a current PCI DSS 2.0 certification.

Transactional Security

Mobify does not store, process or transmit cardholder or account data including passwords or session cookies. This information never passes through network or server equipment controlled by Mobify and is encrypted with your security certificates restricting trusted parties to you and the site visitor. In other words, all communications containing uniquely identifiable data, including cardholder data, is transmitted directly between site visitor's web browser and your e-commerce engine using your SSL certificate.

Visitor Privacy Concerns

Mobify has designated Security and Privacy officers responsible for the security and privacy of Mobify's systems, customers, employees and visitors of our customers sites. Mobify collaborates with our customer's privacy officer to ensure applicable compliance for relevant regions, for example "cookie law" compliance in the UK/EU.

Mobify does not store credit card information, account information (including any session cookie information), or any other uniquely user-identifiable information.

Usage data collected for QA and availability monitoring purposes is anonymized. Server access logs are automatically purged after 2 weeks.

Employee Access

Mobify's user security is governed by Mobify's primary security policy document, password policies and conditions of employment signed by employees. Mobify does not retain or provide server access to contractors or 3rd parties.

Only authorized operations team members have access to servers or administrative consoles. Server access is restricted to encrypted RSA key based access only. Private keys are encrypted. User accounts are provisioned and removed using a policy based system that enforces software policy across servers throughout our environment. All employee credentials are cycled quarterly.

Owing to Mobify's unique architecture, we do not store any of your data other than your Mobify.js bundle. Since the heavy lifting is done on the client end, Mobify never needs to store additional information and our employees cannot access any of your data.

Platform Security

Mobify deploys its management services in our own private managed cloud. All data center access is controlled and limited to on-site technicians. Biometric scanning and active security monitoring is in place at all data center locations. There is a constant on-site security staff presence to ensure no unauthorized access can occur. On-site physical security is audited by an independent third-party security firm.

All of Mobify's systems run on hardened and patched platforms behind dedicated firewall and load balancing services to help block unauthorized system access and mitigate the impact of disruptive Distributed Denial of Service (DDoS) attacks. Dedicated intrusion detection components act to further mitigate against unauthorized system access. All of Mobify's systems are redundant, and are designed to seamlessly withstand any failure. Frequent tests and simulations are carried out to ensure all failover systems function as expected.


Resource Optimization


Mobify Performance Suite

As part of our Mobify cloud, we offer a collection of performance features under the umbrella of Mobify Performance Suite. These features are designed specifically to address performance pain points experienced by mobile visitors. Mobify Performance Suite uses several back-end services to deliver smaller, more performant web page assets quickly using Mobify's CDN.

The performance optimizations provided by Mobify Performance Suite are applied instantly by placing a JavaScript tag inline into the head of your existing desktop site. The location of the tag is important - it must be inserted above any linked external asset. We recommend inserting the tag immediately after the opening <head> tag. The tag has no effect unless the site is viewed from a device that you have enabled optimizations for. On those devices, the tag does the following:

  1. Checks if the device matches a class of device supported by Mobify Performance Suite.
  2. If the device is supported, the tag:
    • captures the HTML
    • downloads Mobify.js
    • initiates the optimizations
    • renders the optimized HTML

Mobify Performance Suite provides three major features for optimizing the performance of your mobile or tablet site: Responsive Image Optimization, JavaScript and CSS Acceleration, and the HTML Simplifier for removing parts of the DOM that are not used on the device. Each feature can be easily customized to exclude any asset from the optimization process.

Responsive Image Optimization

Responsive Image Optimization is a feature that reduces the page weight of your site by rewriting images on the fly, using Capturing to avoid downloading the original images.

There are two components to Responsive Image Optimization: client-side JavaScript and a cloud-based service that the new image is served from. The JavaScript determines pixel density, screen dimensions, and device capability such as support for the WebP image format. It will then replace references to the original image assets present in your HTML with references to new assets served by Mobify's CDN-backed Responsive Image Optimization web service. As part of each request, the best format for the current device as well as the required dimensions are specified. These new assets are then cached for 2 months from the date of first retrieval, and subsequent requests will be served from the Mobify CDN.

JavaScript and CSS Acceleration

JavaScript and CSS Acceleration is a feature that reduces the page weight of your site by minifying and gzipping your scripts and stylesheets, as well as decreasing the latency of your page by distributing these assets globally using Mobify's delivery network.

JavaScript and CSS Acceleration has two components: a cloud-based service that minifies JavaScript and CSS files, and an API in Mobify.js that rewrites the requests for the assets, removing previous references to assets in your page's HTML while ensuring that script execution order is preserved. Individual scripts delivered will be cached in the browser's local storage database, following HTTP caching rules, and retrieved from local storage on other pages that are navigated to later.

Subsequent requests for the same resources will be cached and served gzipped where appropriate by Mobify's CDN.

JavaScript Unblocking

JavaScript, both inline and externally-referenced, can block the rendering of your page. Large libraries referenced in the <head> of your HTML document, and not marked async or defer will prevent the rest of your web page from being parsed and rendered until the entire library has been downloaded, parsed and run.

Mobify Performance Suite provides an option to unblock JavaScript which will select all of your page's <script> elements and move them to the bottom of the <body> element, allowing the page content to parse and render first. However, this is not necessarily safe for all scripts; for example, some advertising tag scripts must remain in place to function correctly. In these cases, you can easily filter out the necessary scripts to leave them in place.

HTML Simplifier

HTML Simplifier is a feature that removes parts of the original document that would otherwise be unused or hidden on the device. Using regular media queries, you can specify any HTML elements to remove for certain breakpoints.

When the optimizations are applied to the captured HTML, the elements that match the media queries are removed from the document entirely - the nuclear version of display: none. By removing the elements from the document before the device starts parsing the page, any unneeded resources are never downloaded by the device.

HTML Simplifier is useful for responsive websites, but it is not needed when using adaptive templating as the latter is already optimizing the structure of the mobile HTML.

Device Specific Optimizations

As all optimizations are defined on the actual client device, we can use any available device attribute when specifying the particular optimizations. Some common attributes:

  • screen dimensions
  • pixel density
  • WebP support
  • geolocation
  • browser language
  • which operating system the phone is running
  • performance timing which can be used to specify lower quality assets for slow devices

Compression

Each asset that is stored on our cloud can be served compressed with gzip, deflate, or sdch. It does not matter what your current servers provide to your visitors - the Mobify cloud will always serve back the most optimized asset to your mobile visitors.


Appendix


CDN Points Of Presence

North America: Ashburn, Atlanta (multiple), Chicago (multiple), Dallas (multiple), Elk Grove, Fort Worth, Houston, Kansas City, Las Vegas, Los Angeles (multiple), Miami (multiple), Montreal, New Jersey, New York (multiple), Philadelphia, Phoenix, Salt Lake City, San Francisco, San Jose, Seattle (multiple), Toronto, Virginia, Washington DC (multiple)

South America: São Paulo

Europe: Amsterdam (multiple), Frankfurt (multiple), London (multiple), Madrid, Oslo, Paris (multiple), Stockholm, and Vienna

Asia: Hong Kong (multiple), Osaka, Singapore (multiple), and Tokyo

Australia: Sydney

Details of Mobify Performance Suite

How Does Responsive Image Optimization Work?

  1. Start with the captured HTML
  2. Grab the collection of images to be resized
  3. Call the resize function on this collection
  4. Each image src is rewritten into the following format:

    //ir0.mobify.com/<format><quality>/<maximum width>/<maximum height>/<url>
    
  5. When finished with Capturing, the device starts parsing the document, fetching the image resources from our image optimizer instead of the original location

  6. If the image isn't cached on our CDN, we:
    • download the original from your server
    • optimize it as specified
    • set new cache headers
    • cache it for 2 months on the CDN
  7. The optimized image is downloaded to the device instead of the original image
    • if the image resizer is down, Mobify.js will load the original image on the device by serving back a 302 redirect
  8. If supported, the image will be served with gzip, deflate, or sdch

How Does JavaScript Acceleration Work?

  1. Start with the captured HTML
  2. Replace all selected script references with scripts that point to the JavaScript Acceleration (Jazzcat) endpoint

    //jazzcat.mobify.com/jsonp/Jazzcat.load/["<url>"]
    
  3. External script elements are replaced by a loader that calls into Jazzcat to load scripts

    <script>Jazzcat.exec("a.js")</script>
    
  4. When finished with Capturing, the device starts parsing the document, fetching the scripts through Jazzcat

  5. If the script isn't cached on our CDN, we:
    • download the original from your server
    • minify it
    • set optimized cache headers
  6. We download the minified scripts from Jazzcat, and those scripts are cached in localStorage using the Jazzcat client library that is built in to Mobify.js
  7. If supported, the scripts will be served with gzip, deflate, or sdch
  8. Each script is then loaded by the Jazzcat.exec() method in the correct execution order

How Does CSS Acceleration Work?

  1. Start with the captured HTML
  2. Rewrite all selected stylesheet references to point to the Jazzcat endpoint

    //jazzcat.mobify.com/<project-slug>/cssoptimizer/<url>
    
  3. When finished with Capturing, the device starts parsing the document, fetching the stylesheets from Jazzcat

  4. If the stylesheet isn't cached on our CDN, we:
    • download the original from your server
    • minify it
    • set optimized cache headers
  5. We download the stylesheets from Jazzcat which delivers the stylesheets from the nearest CDN node
  6. If supported, the stylesheets will be served with gzip, deflate, or sdch

How Does HTML Simplifier Work?

  1. Start with the captured HTML
  2. Select for removal all elements that match pre-defined rules
    • rules can be set for a particular device type or screen size
  3. Remove those elements from the captured HTML
  4. When finished with Capturing, the document is rendered without any of the resources that were removed from the DOM

Glossary

Client-Side Adaptation

Client-side adaptation is a method of using JavaScript to alter the structure and presentation of a web page directly on the client device. Google refers to this approach as JavaScript-Adaptive and considers it the optimal solution for going responsive if your page requires JavaScript.

Adaptive Templating

Adaptive templating is a method of optimizing the layout of your web page during client-side adaptation. Using a JavaScript templating framework, any of your content can be restructured and supplemented to provide an entirely custom layout.

Last Edited