Web To Mobile

Developer’s Guide

1 Changing the web site’s look&feel for display on mobile devices

Web site developers can influence the look and feel how Wetomo presents the web page on the mobile device. This page will be regularly updated as the feature set develops.

1.1 Use of CSS

Most effectively of course is using a style sheet. Wetomo first looks for a style sheet that is of type media=”handheld”. If that is not found it will use the default style sheet that you specify in your page as long as the filesize of the style sheet is small. Note that this allows you to define two presentations, one for desktop clients and one for mobile clients.
Here is a sample CSS reference using media=”handheld”

<link rel=”stylesheet” type=”text/css” media=”handheld” href=”http://m.tailmaster.com/css/wetomo.css” />

1.2 Use of Wetomo-specific HTML tags and attributes

Wetomo triggers on specific HTML tags and tag attributes. These tags and attributes are tolerated by standard web browsers and as such not displayed to the end user.

The following tags and attributes are described in the next sections:

  • wtm_skip, tag attribute
  • wtm_section_source, tag attribute
  • wtm_section_label, tag attribute
  • wtm_section_target, tag attribute
  • wtm_ad, tag
  • wtm_keep, tag attribute
  • wtm_esc, tag attribute

1.2.1 Skipping certain content for mobile devices using attribute wtm_skip

Add the tag attribute wtm_skip=”1″ to any HTML tag. By doing that Wetomo will skip the content of this tag and all of its children.
Example:

<div> aaa <p wtm_skip=”1″> bbb <a href=”ccc”> ddd </a> eee </p> ffff </div>

results after processing through Wetomo in

<div> aaa ffff </div>

1.2.2 Building a page navigation structure for mobile access

A website usually consists of at least a menu and a content section. In some cases there are also sub menus and sidebars that shall be accessible for the user on the mobile device in case the user wishes to access these sections. But theses sections shall not waste precious space on the mobile display, allowing the user to access what he really wants to see at any particular time. To enable this functionality Wetomo allows the web designer to define sections within a web page, such as menu, sub-menu and main content. This is done using tag attributes that can be added to any tag. Any number of sections can be defined by the web designer.

Since most web sites use a content management system the advantage of using tag attributes over other means (such as interactive section definition solutions) is that with Wetomo the definition of these sections has only be made once in a few limited areas of the code and then applies to all website pages served. Using other means (such as interactive solutions) the definition of these sections usually has to be made for every page – and every new page as soon as it is created.

As an example how to set up the tag attributes  lets have a look at the current web page.  We can define a menu section, a sub-menu section and a content section, see the screen shot for details.

sections

Two tag attributes define a section to be displayed:

  • wtm_section_source: an integer attribute (value >=0) that specifies the  id of the section. The value of this parameter will determine the sequence in a navigation menu that is served on all pages, the most important section (for example the main menu) shall have the lowest value.
  • wtm_section_label: a string attributes specifying the name of the particular section. This string is used in the navigation menu to allow the user to switch between sections on the same page.

In the example above we have defined the following tag attributes in the page code (feel free to look the code pieces up in the source code of this page):

  • main menu piece: <ul id=”nav” wtm_section_source=”0″ wtm_section_label=”Main Menu” wtm_section_target=”2″>
  • section menu: <ul wtm_section_source=”1″ wtm_section_label=”Sections” wtm_section_target=”2″>
  • content piece:  <div id=”contentwrapper” wtm_section_source=”2″ wtm_section_label=”Content” wtm_section_target=”2″>

You will notice that the main menu has wtm_section_source=0 and wtm_section_label=”Main Menu”, whereas the content piece has wtm_section_source=2 and wtm_section_label=”Content”.

This definition results in the following screens:

  • the main menu sub page showing only the main menu:
    sub_main
  • the section sub-page showing the sections menu:
    sub_section
  • the content sub-page showing the real content:
    sub_content

Note the sequence in the navigation menu of each sub page: main menu first, then section and the content piece as last menu element. This sequence is defined by the ascending value of  wtm_section_source.

In the example above you probably also noticed a 3rd tag attribute wtm_section_target, which defined the id of the target section for each link in the particular source section. This attribute allows to navigate from the menu directly to the content without displaying any other higher priority section. As an example when a user clicks on a link in the main menu sub-page the content sub-page of the selected target shall be displayed (in the example this is achieved by using wtm_section_target=”2″). The attribute wtm_section_target is not limited to the tag where the wtm_section_source attribute has been defined, it can be used with any tag within a section to overwrite any existing wtm_section_target values.

Important hint: using these attributes to create a page navigation structure is optional. If not used the complete pages will be shown. If used, only defined sections will be accessible to the user – content that is outside of any defined section will be skipped.

1.2.3 Inserting mobile ads using tag wtm_ad

Wetomo allows you to insert tags for mobile ads into your pages. When Wetomo finds a wtm_ad tag it will retrieve an ad from the network and ad account that you specify. The tags supports the following attributes:

  • net (mandatory), the ad network to retrieve the ad from. Right now Wetomo supports the following ad networks:
    Admob text and banner ads:  use net=”admob”
    Google Mobile ads:  use net=”google”
    MyGamma text ads:  use net=”mygamma_t”
    MyGamma banner ads:  use net=”mygamma_i”
    Texo/Mobpartner ads:  use net=”texo”
  • pub (mandatory), the publisher key. This is your ad account information
  • context (optional), the page context. This parameter allows better targeting and as such helps you to achieve a higher click-through rate. Use of the context parameter depends on the paticular ad network.

Here is an example of a well formatted wtm_ad tag:

<wtm_ad net=”admob” pub=”a11111111111111″ context=”sports” />

Note that you can define multiple wtm_ad tags in a single page but Wetomo will only retrieve one ad from the ad network and display this ad on all positions that you specified.

1.2.4 Keeping a table structure using the wtm_keep attribute

Due to limited display capabilities for tables on mobile devices the rendering engine will remove all table tags. In some cases however it is desirable to keep a table for formatting reasons. This can be achieved by adding the tag attribute wtm_keep=”1″ to the table attribute.

Here is an example of a well formatted wtm_keep attribute:

<table wtm_keep=”1″ >

1.2.5 Leaving Wetomo

In some cases it is desired that a link target is not rendered by the Wetomo rendering service. An example is a link to a site that is already mobilized because here we would not need Wetomo. To achieve this an anchor tag that contains a link that shall not be rendered by Wetomo must ust the wtm_esc attribute

Here is an example of a well formatted wtm_esc attribute:

<a href=”my.mobiledomain.com” wtm_esc=”1″ >Go To Mobile Site</a>

2 Wetomo mobile emulator

To give your users a better understanding how your website looks on a cell phone you can use the Wetomo mobile emulator. Click here to get a first impression how the emulator looks like.

Here is how you can include the Wetomo mobile emulator on your website.

  • We suggest you open the emulator in a pop-up window using javascript code similar to this: window.open (“http://m.tailmaster.com/?wtm_u=your_urlencoded_link”, “simwin”, “location=no,status=no,toolbar=no,menubar=no,scrollbars=no,directories=no,resizable=no,width=361,height=435″)
  • Many people use pop-up blockers and some content management systems (such as WordPress)  prevent content editors from using Javascript. To accommodate that an alternative page is available that:
    • tries to open up a pop-up with the emulator and checks for success
    • If not successful it allows the user to open up the emulator in the calling window
    • If successful (and configured as such) the browser will return to the original page where the emulator was called from
  • To invoke the alternative page use the following link http://m.tailmaster.com/sim_win.php with these parameters
    • wtm_u=your_urlencoded_link (optional, if not provided the referring page will be rendered). To open the emulator with no target page use an empty wtm_u parameter (wtm_u=)
    • wtm_auto_back=1 (optional, if provided then the browser will return to the referring page).
  • Note that the Wetomo mobile emulator will retrieve ads from the ad networks using the user agent as specified by your browser. It is highly likely that no ads will be displayed using the emulator.

Looking for something?

Use the form below to search the site:

Still not finding what you're looking for? Drop a comment on a post or contact us so we can take care of it!

Visit our friends!

A few highly recommended friends...

Archives

All entries, chronologically...