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 GetGoMobi site, adapted to the visiting device.

GetGoMobi uses 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:

 

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

Meta-data issues are related to an GetGoMobi 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 GetGoMobi is unable to find this data on desktop sites and hence cannot present this information on the mobile version of the site. The GetGoMobi 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:

Result of application of Designer Toolkit:

ex 1    →    ex 1

Example 2

This site had the following issues:

Result of application of Designer Toolkit:

ex 4    →    ex 4

Example 3

This site had the following issues:

Result of application of Designer Toolkit:

ex 3    →    ex 3

Example 4

This site had the following issues:

Result of application of Designer Toolkit:

ex 2    →    ex 2

How to Use It

The Designer Toolkit allows you to control aspects of GetGoMobi's operation by including processing hints in the markup of a page.

There are two aspects to this:

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 inquestion. 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">

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 GetGoMobi. 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

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

GetGoMobi uses caching of the source to reduce the load on the source site and ensure maximum performance for visitors to the dotMobi version of the site. GetGoMobi caches 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>
or
<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 GetGoMobi to re-get the page by appending a dummy parameter to the address e.g. http://domain.mobi?dummy=asdf