Layouts, Widgets and Filters

Submitted by MobilizeToday on 2012-05-15 09:59

There are terms "Layout", "Widget" and "Filter" you need to understand optimizing desktop website into the mobile one with

Please note that the following rules are applied automatically to the source code:

  • All CSS and JavaScript are disabled, inline and external.
  • All tables are converted to table-less structure (until "Table-less" option is disabled by the user).
  • All images bigger than 310 pixels in width are resized to be smaller and to take less time to load.
  • Default CSS framework styles are applied.

This basically means that if the initial website has well-made HTML code, the resulting content will be well readable. Thus you may distinguish headings, lists, paragraphs, quotes, links and so on. But if semantic is poor, especially if website is made using old-style HTML coding based on tables, the result will be unsatisfactory. In both cases, the mobile page lacks of well-looking menus, buttons, galleries and so on. The initial order is kept for all the content elements. For example, if the page title follows the main menu, the same will be in the mobile version by default. The resulting mobile page at this stage we may call "raw".

In order to make raw page more attractive and useful on smartphones we should add framework UI elements like menus, buttons, lists, galleries and others, whatever is possible. Say, a simple link can be transformed to well-looking button by applying corresponding UI element, or set of images can be transformed into touch screen optimized image gallery. And since the mobile page layout is always one-column we may also want to change content blocks order.

There are sets of UI elements specially designed by our development team:

After adding new website for conversion you probably want to change the raw content or compose mobile page from scratch by adding UI elements one by one.

There are two ways how UI element can be applied:

  1. By Widget added to Layout
  2. By Filter assigned to page

If you want to compose mobile page from scratch you should create Layout first. It's really easy to do by clicking "Add Layout" button in Source tab toolbar.

Add Layout Button

All created layouts can be seen in Controls. Active layout is highlighted. Each Layout is a set of Widgets. You may see all widgets under the corresponding Layout. By switching off the checkbox near the widget name you may temporarily disable widget.

Active Layout

Layout also has name and page assignment rules. It can be assigned to one or multiple pages.

Layout Properties

When Layout is assigned to the current page you'll have an ability to add Widgets. Widget can be added by selecting content from Source page using mouse Right Click (Win users) or Ctrl+Click (Mac users):

Selection in Source

You may change selection by clicking "Up", "Down", "Next" or "Prev" navigation options browsing the HTML tree. These options are available when mouse is over the selection title.

Change Selection

Once the content is selected you may choose UI element from the list of suggested elements

Suggested Widgets

-OR- by selecting UI element from the list

List of Widgets

After clicking on suggested UI element or selecting one from the list, the new Widget will be added to the currently active Layout. Optionally you may add required UI element from the Widgets tab.

Widget tab

In the Layout you may change Widgets order by drag'n'drop in the Mobile View window or in the Controls panel.

Widget has name and parameters depending on widget type.

Widget Properties

Widgets can be easily copied or moved across the layouts by drag'n'drop. Hold 'Ctrl' key during drag'n'drop to make a copy.

Copy widget

Filters have name, parameters and page assignment rules. Filter can be assigned to one or multiple pages.

Layout Properties

Some widgets may partially pass content through. Once the widget has processed, the filters will be applied to the content. That's why Widgets and Filters can work simultaneously. For instance, widget Content Block wraps the selected content into <div> tag. But all the content inside will be passed through all the Filters assigned to the current page.

We use XPath 1.0 for selecting content. XPath is a W3C standard. See this link for details:

Widgets and Filters have parameter called "XPath". It points to the node in source HTML document.

Let's imagine we have a Filter with "//h1" defined as a value for XPath parameter. According to XPath syntax this points to all <h1> tags in the document. Now if the content with h1 tag is in the mobile page, our Filter will be applied. Otherwise, if h1 tag is absent in the document or isn't passed by widgets, this Filter will be ignored.

Since Filter can be applied to all pages of the website, we may get well-looking header whenever h1 tag exists. Sounds cool, huh?

If page doesn't have any Layout assigned, only filters will be applied. Please note that our automatically generated mobile version is just a set of Filters without Layouts. When the new website added for conversion without automatically generated version, there is the only Layout assigned to the home page for your convenience.

Would you like to express yourself?