Managing Mobile Views: Templates

A key advantage of Mobify is not having to do a lot of work in order to create a mobile view that encompasses an entire site. During the Choose step you've already selected mobile content on the home page. Certainly it wouldn't be efficient to perform this process for hundreds (maybe thousands) of other content pages. That's where Templates - a unique feature of Mobify - come in.

While your site probably has a lot of pages, the number of underlying templates is usually quite small. For instance, a blog would have templates for its front page, story view, category view and search. It's only necessary to mobify pages based on these unique templates and the mobile styling choices will be applied to all similar pages in the future. For example, mobifying one blog post automatically covers all of the other past and future posts as well.

Mobify is able to tell templates apart by analyzing URL patterns and DOM structure of pages requested by the users. In the rare scenario when no matching template is found, Mobify will display the appropriate original page of the source site.

Mobify's Template Matching Process

• Mobify looks at the URL of the incoming mobile request (http://m.site.com/some/page)
• If this exact page has been mobified before, shows the mobile view with the current content
• If the page was not mobified before, looks for a Blueprint - a page with a similar URL / DOM structure that has been mobified (http://m.site.com/some/similarpage) and applies the same mobile view
• If no match is found, Mobify shows the original at http://www.site.com/some/page and alerts you, the web master, that a template needs to be mobified

Working with Templates

• Mobify crawls the source site when a mobile view is created for the first time and suggests the most important templates to mobify
• Click Choose in order to select the content for a template, then Design to perfect the look & feel. Remember that the CSS stylesheet is shared across the different templates.
• It's possible to create a unique Blueprint for every single page (or some particular ones that you want shown differently), though that is time consuming
• For template matching to work, the URLs have to be relatively well formed (/my/url/structure as opposed to ?page=b235dh4)
• Let us know via a private ticket if the matching isn't completely accurate - the Mobify engine is constanly tweaked and improved

Walkthrough

1. Matched Templates This section lists templates that have been created by Mobify, including the Blueprint of every single one. It's possible to adjust content selection by clicking Choose, work on the styling in Design or show the Preview of the template in the window on the right. Settings serves for assigning the "homepage" of the mobile view at m.site.com to any of your templates, as well as allows to delete a template.

2. Unmatched Templates Mobify crawls your site to detect what templates have been used throughout. It also shows an approximate amount of pages based on a template to show the impact of your design decisions. Click Choose in order to select the content for these templates.

3. Create Template In case Mobify could not detect a template automatically, or if you want to override the layout for a particular page, enter the URL here.

4. Preview This shows a preview for templates on this screen.