Mobile Enable Your Dnn Site

SolTech is a leading provider of custom software development, and custom DotNetNuke (DNN) services. Contact SolTech (404) 601-6000 if you need help building a feature rich web2.0 portal.

Did you knowMost websites won’t work on a mobile phone?

They’re slow to load, hard to view and don’t offer the right kind of experiencefor on-the go customers.

That’s why you need to mobile enable your website.

http://www.soltech.net/


Step 1 – register your .mobi domain at name.com and get free access to instant mobilizer.

There are other partners also ..see http://instantmobilizer.com/our-partners.php

Concept …“Just register a .mobi domain name and enter the target URL and within 24 hours your .mobi domain will provide mobile users an easy to navigate mobile version of your corporate website. “

It’s a little more complicated …



Step 2 – get your license key

The capabilities described here are controlled via a license key made available by dotMobi.

Valid license keys must be embedded in the META tag of every page on the site. You can obtain a license key for your goMobi site by submitting your details on http://mobiforge.com/webform/gomobi-designer-toolkit-license-key


http://mobiforge.com/webform/im-semantic-key-generator


Step 3 – insert source meta tags

1. META tagsgoMobi 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.



Step 4 – insert imz css classes to control mobile display.

CSS classesPre-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 versionimz_remove - remove from mobilized versionimz_menu - main menu indicatorimz_color - text colorimz_bgcolor - background color



imz_display - display on mobilized version

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.



imz_remove - remove from mobilized version

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.



imz_menu - main menu indicator

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.



imz_color - text colorChanges 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.



imz_bgcolor - background colorChanges 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.



Step 5 – define cachinggoMobi 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.

Its important to remember that the greater the level of caching, the greater the delay between implementing a change on the main site and being able to view the result on the mobile site.



Step 6 – redirect the mobile devices

There are many opinions on how the browser should be detected. Some good examples can be found at http://detectmobilebrowser.com/

The professional approach is to use the cloud based webatlas service from dotMobi.

How does it work ? a user visits your Web site on his mobile device. You then forward the User-Agent HTTP request header to the DA Personal service, and the response you receive will contain information about the user's device.http://mobiforge.com/developing/story/device-detection-cloud-deviceatlas-personal


http://detectmobilebrowser.com/

If you need these capabilities, or other unique differentiation, SolTech is a leading provider of custom software development, and custom DotNetNuke (DNN) services.

Contact SolTech (404) 601-6000 if you need help building a feature rich web2.0 portal.

www.soltech.net www.soltech.mobi


Mobile Enable Your Dnn Site

Technology

Transcript of Mobile Enable Your Dnn Site