dotMobimobiThinkingmobiForgemobiReadyDeviceAtlasgoMobi

goMobi Designer Toolkit - User Manual

Summary

The goMobi Designer Toolkit allows web designers to embed hints in the HTML of the source web site that enable goMobi to fine-tune its transcoding of the site, without impacting the appearance or behaviour of the original site.

Background

goMobi 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:

  • meta-data improvements
  • visual & layout improvements

The visual and layout issues in an goMobi-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 an goMobi 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 goMobi is unable to find this data on desktop sites and hence cannot present this information on the mobile version of the site. The goMobi 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 by goMobi

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

goMobi Designer Toolkit allows you to control aspects of goMobi's 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

License Key

The capabilities described here are controlled via a license key made available by dotMobi. Valid license keys must be embedded in the imsemantic META tag of every page on the site (see below); if the license key is not present or invalid for the domain in question the features described here will not work. You can obtain a license key for your goMobi site by submitting your details on this page.

1. META tags

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

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.

License Key

name: im_key
value: license key

This META tag must be provided to activate goMobi Designer Toolkit. If a single source site is used for multiple goMobi sites, multiple valid im_key META tags must be added to the source site, one for each page.

Suppress dotMobi Branding

  name: im_remove_branding
  value: true

Used to suppress the dotMobi branding at the bottom of each page of the mobilized site. This normally looks something like this: Instant Mobilizer by dotMobi

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_key" content="bf30-4f57-146c-11c6-a4fa-2f">
      <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 goMobi. 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

goMobi 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. goMobi 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 goMobi to re-get the page by appending a dummy parameter to the address e.g. http://domain.mobi?dummy=asdf