Professional Tools

A powerful suite of tools which allows you to control the automated transformation of website content to mobile-friendly content. The transcoding engine leverages the content from an existing website, and the tools allow you to define how it appears on the mobile device. This option minimizes maintenance since changes to the source website pass through and are exposed via the mobile site, adapted to the visiting device.

We use a combination of techniques to transcode rich, desktop-oriented web pages into a format that is more suitable for display on mobile devices. In certain cases, however, a small degree of manual assistance can dramatically improve the outcome of the transcoding process. There are two aspects to manual assistance:

meta-data improvements
visual & layout improvements

The visual and layout issues in a mobile-transcoded site typically arise for the following reasons:

certain aspects of the desktop site are not relevant to the mobile view causing clutter and excess content
key elements of the desktop site cannot be rendered in a way that suits mobile devices (e.g. Flash, Javascript)
sometimes the mobile view of a site is enhanced by adding additional content that is related to the mobile context
site navigation menu structures tend to be difficult to detect & transcode

Meta-data issues are related to a feature that detects relevant meta-data in transcoded sites and makes it available on the mobile site in ways that are more relevant to a mobile device (link to map,click-to-call phone number, site logo detection etc.) In certain cases we are unable to find this data on desktop sites and hence cannot present this information on the mobile version of the site. This Designer Toolkit allows designers to explicitly highlight these meta-data items in the original web site without affecting its operation.

Examples

The following four examples depict some typical problems and their solutions using the Designer Toolkit

Example 1

This site had the following issues:

tabular layout & sliced-up images resulted in ugly presentation of mobile view
phone & address information was not detected.

Result of application of Designer Toolkit:

→

Example 2

This site had the following issues:

logo incorrectly detected
tabular layout

Result of application of Designer Toolkit:

→

Example 3

This site had the following issues:

large collapsing menu was badly rendered on mobile site
logo missing
poor colour replication

Result of application of Designer Toolkit:

→

Example 4

This site had the following issues:

very rich home page with multiple Javascript elements and large Flash block
logo incorrectly detected

Result of application of Designer Toolkit:

→

How to Use It

IM Designer Toolkit allows you to control aspects of the mobile sites operation by including processing hints in the markup of a page.

There are two aspects to this:

META tags - allow you to add meta information to the page
CSS classes - predefined CSS classes allow you to control some visual aspects of the mobile page rendering

META tags

IM looks for specific META tags (see a list below) in the HEAD section of each page in the source site. These META tags allow a site owner to explicitly define the street address, phone number and logo image for the page in question. These items will then be displayed at the top of the mobile page where they can easily be accessed by the user.

Enabling the toolkit

Before the designer toolkit is enabled, IM looks out for a specific META tag in the page markup:

  <meta name="im_key" content="1">

Including this tag in the head section of a page will enable the designer toolkit on that page.

Basic syntax

The basic syntax of all of the Designer Toolkit META tags is as follows:

  <meta name="%name" content="%value">

These tags should be added within the head section of each page where they should apply.

Suppress Branding

  name: im_remove_branding
  value: true

Used to suppress the branding at the bottom of each page of the mobilized site.

Logo

  name: im_logo_url
  value: link to any valid JPEG, PNG or GIF image

Used for an alternative logo image. An absolute URL must be used.

  name: im_logo_alt
  value: alternative logo text

Contact phone number

  name: im_phone
  value: phone number string

Phone number displayed at the top of a mobilized page.

Address

  name: im_address
  value: complete address with parts separated by comma

An address displayed at the top of a mobilized page. The address must be in a form that if pasted into Google Maps search it produces a single result.

Redirection

  name: im_refresh
  value: time of delay in seconds (use 0 for instant redirection) and targeturl separated be semi-colon

Used for redirection only for mobilized version. It can be used to skip flash intro or to indicate different entry point for mobile users.

Syntax is almost the same as is for standard META refresh tag.

RSS/Atom Feed

  name: im_feed_url
  value: link to any valid RSS or Atom feed

Used for an alternative RSS feed. An absolute URL and im_feed_name must be used.

  name: im_feed_name
  value: name of the feed

Example HTML code

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

  <html>
    <head>
      <title>Site/Page Title</title>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

      <meta name="im_logo_url" content="http://yourdomain.com/images/index_01.gif">

      <meta name="im_logo_alt" content="Logo Alternate Text">
      <meta name="im_phone" content="+353.CALL.US.1200">

      <meta name="im_address" content="42735 Oberlin Elyria Rd, Elyria, OH 44035, USA">
      <meta name="im_refresh" content="0;URL=http://yourdomain.com/html-version.html">

      <meta name="im_feed_url" content="http://yourdomain.com/rss.php">
      <meta name="im_feed_name" content="Company News">

    </head>
    <body>
    .
    .
    </body>
  </html>

2. CSS classes

Pre-defined CSS classes are used to affect the visual output of the mobile site. All of these classes can be used in conjunction with other CSS classes already in use by the page in question.

The following classes are defined:

imz_display - display on mobilized version
imz_remove - remove from mobilized version
imz_menu - main menu indicator
imz_color - text color
imz_bgcolor - background color

imz_display

This class is used to ensure that content is displayed on the mobile version of a page, even if it is hidden by default on the desktop version. This allows page designers to include elements in their pages that appear only on the mobile version of the site e.g. a mobile-specific menu. Sections of the DOM that are classed imz_display will be displayed on the final page regardless of their CSS attributes on the source site.

<h1>Display on Mobile</h1>
We can also create something that it's only visible on a mobile phone.
<span class="imz_display" style="display: none;">

  <a href="http://site.com">Link to Desktop Site</a>
</span>

imz_remove

This class allows designers to selectively remove sections from their desktop site that may not be appropriate for the mobile version .e.g Flash objects, large images etc. Sections of the DOM that are classed imz_remove will be removed entirely from the final page.

<h1>Remove on Mobile</h1>
On our desktop site you would see a Flash object here.
<div class="imz_remove">
  <object width="550" height="400">

    <param name="movie" value="somefilename.swf">
    <embed src="somefilename.swf" width="550" height="400">

    </embed>
  </object>
</div>

imz_menu

This class allows designers to designate how the menu for the mobile version of a page is contructed. Any unordered list (UL) or ordered list (OL) with class imz_menu will be used to construct a mobile-friendly menu at the top of the mobile page. Nested ULs or OLs are handled also. Note that the item classed imz_menu may optionally be styled such that it does not show up on the original (desktop) page, allowing an entirely separate menu to be displayed on the mobile version of the page.

<div id="menu">

  <ul class="imz_menu">
    <li><a href="#">menu 1</a></li>

    <li><a href="#">menu 2</a>
      <ul style="display:none">

        <li><a href="#">submenu 2_1</a></li>
        <li><a href="#">submenu 2_2</a></li>

        <li><a href="#">submenu 2_3</a></li>
      </ul>
    </li>

    <li><a href="#">menu 3</a></li>
  </ul>
</div>

Note: you can use this class only once per page.

imz_color (imz_color_XXXXXX)

Changes the foreground colour of text elements (CSS: color) to the value specified by XXXXXX, where XXXXXX is standard hex colour code. This is used to override the inherited colour of an element.

<h1>Change color on Mobile</h1>
<p class="imz_color_071388 myclass" >

  this div has diffent color on desktop and pc version
</p>

imz_bgcolor (imz_bgcolor_XXXXXX)

Changes the background colour of elements within the container (CSS: background-color) to the value specified by XXXXXX, where XXXXXX is standard HTML hex colour code. This is used to override the inherited background-colour of an element.

<h1>Change background color on Mobile</h1>
<p class="imz_bgcolor_D71388 myclass" >

  this DIV has diffent color on desktop and pc version
</p>
These classes can be used simultaneously:
<h1>Change color and background color on Mobile</h1>
<p class="imz_bgcolor_D71388 imz_color_071388 myclass1 myclass2" >
  this div has diffent color and background color on desktop and pc version

</p>

Caching

We use caching of the source to reduce the load on the source site and ensure maximum performance for visitors to the transcoded version of the site. We cache sites to the maximum extent permitted by the HTTP headers sent by the source site. While testing the effects of embedding Designer Toolkit META variables and CSS tags however, it is important to ensure that caching is not activated in order to immediately see the effects of any changes made to the source site. To do this, ensure that your source site web server sends appropriate headers to disallow caching. One way to do this is to add Pragma no-cache settings to your web server configuration. For the Apache web server the appopriate directive is the header directive. This can be used globally as follows:

Header set Pragma "no-cache"

Or for certain areas of the site using Filesmatch or Directory wrappers e.g.

<Directory />
    Header set Pragma "no-cache"
</Directory>

<FilesMatch "\.(php|cgi|pl|htm|html)$">
    Header set Pragma "no-cache"
</FilesMatch>

As a quick fix, instead of settings headers at a server level, you can force the transcoder to re-fetch the page by appending a dummy parameter to the address e.g. http://domain.mobi?dummy=asdf

Professional Tools

> Designer Toolkit

Examples

Example 1

Example 2

Example 3

Example 4

How to Use It

META tags

Enabling the toolkit

Basic syntax

Suppress Branding

Logo

Contact phone number

Address

Redirection

RSS/Atom Feed

Example HTML code

2. CSS classes

imz_display

imz_remove

imz_menu

imz_color (imz_color_XXXXXX)

imz_bgcolor (imz_bgcolor_XXXXXX)

Caching