How Does Adaptive.js Work?

Adaptive.js transforms your site via the Mobify tag.

As the browser loads the page, the Mobify tag checks if the visitor is using a supported mobile device by checking the browser user agent.

To enable Adaptive.js on your site, install the Mobify tag at the top of the <head> section of your HTML. All of the site pages need to have the Mobify tag for the adaptations to occur on them.

If the visitor is using a supported device, the original version of the page is stopped from loading by an output of an opening <plaintext> tag. The remaining HTML on the page is then rendered as text instead of as HTML elements that the browser would need to parse. Because the <plaintext> tag is hidden, nothing is shown to the visitor yet.

Now, we not only prevent the original version of the page from displaying, we also gain access to the original HTML of the page.

Next, we generate the new version of the page by downloading the Mobify bundle for your site. The Mobify bundle is a custom set of instructions that optimize your site layout and performance. It runs against the original HTML to create the mobile-friendly version of the page.

Use the Mobify Bundle to:

After the Mobify bundle runs on the original HTML of the page, Adaptive.js generates a newly optimized version of the page. The optimized page now replaces the original page. The optimized page is now displayed to the site visitor.

The Mobify Bundle Read more about how the constituent components of Adaptive.js work together to create the mobile version of your site in The Mobify Bundle.

A. Which devices are supported?

We support iOS, Android, Firefox, and Windows Phone devices but we usually do not enable the mobile experience on all devices. Typically, smartphone builds are supported on iOS and Android 4+. Tablet builds are supported on iOS and Android.

Check your Mobify tag with the instructions in our Device Testing Best Practices guide, or ask your Customer Success Manager or Developer Advocate if you are not sure which devices are supported on your site.

B. Why not adapt based on viewport instead?

The viewport size does not indicate how the site is actually used. For example, if you resize a desktop browser to be very small, this does not mean you need to add touch enhancements to the site. These enhancements are not relevant for desktop visitors.

C. How does Adaptive.js affect the performance of my site?

On the whole, your site performance improves.

There is a slight delay to load the Mobify bundle. However, the page is optimized through the removal of unnecessary assets: images, CSS, JS, and HTML. File size reduces for images, which in turn speeds up the mobile version of the site. With these optimizations, the bandwidth needed for the mobile site reduces. This results in an overall site performance improvement.

To go deeper, learn more about The Mobify Bundle.

Edit in GitHub