MobileRedirect

---

By: MarkenMedia
Developer: Gideon Marken

1. Requirements:

• CFML or PHP or ASP
• Webserver
• Some knowlege in the scripting language your site uses
• HTML/Text editor

2. About MobileRedirect

MobileRedirect is a mobile and portable browser detection function/script. MobileWebDeveloper.com is a collection of solutions to empower the mobile Web.

We provide MobileRedirect in two versions for each programming language we support. The Standard version is much easier to use since it redirects all mobile phone requests on your Website to your mobile homepage. All further requests by that mobile phone's browser will go directly to the mobile site. The Advanced version takes the requested page, and any passed variables and sends them along when forwarding the mobile phone user. The Advanced version is more difficult to use because you would need to develop a means to deal wtih the various page requests and variables that are passed. Even if you plan to use the Advanced version, you may want to start with the Standard, then change to Advanced once you have your mobile site running.

3. Installation and Setup

In order to install and setup our code, you will need a basic understanding of either ColdFusion, PHP or ASP. Our code is setup as a function which is called on it's own, so it simply needs to be added to the top of your site's core application file (application.cfm or global.asa), or some other configuration file that is loaded upon each page request. You never know what URL people will enter on.

Setting up MobileRedirect to point at your mobile site is easy once you've included the script on your main Website. Just replace our mobile URL with yours. If you do not have a mobile site, then feel free to use our demo, or download our complete mobile site solution called, MobileLaunch. With MobileLaunch, you can get your mobile site online in 15 minutes.

Once you download the zip file, and have unzipped it to a directory/folder, you will want to locate the language folder you wish to use. If you want to run a complete demo, copy everything in your language's folder to a directory where you'll run the demo site. If you want to just try the mobileRedirect code on your own website and point it at your current mobile website, feel free to open up index.php to see how mobileRedirect is included, then copy the version of mobileRedirect you wish to use. Next, edit your mobileRedirect file and change the forwarding address to your own.

Below, you can see a listing of the files and directories found in one of our language directories. Each solution is setup approximately the same way and has the same files names, etc., except for the file extensions (.asp, .cfm, .php).

• index.php
• mobileRedirect.php
• mobileRedirectAdv.php
• mobileRedirectSession.php
• mobileRedirectSessionAdv.php
• /mobile - test mobile website
  • index.php

4.Test Cases

In order to test the Advanced version, we used test cases like the following to verify that MobileRedirect can handle each type of request.

5.What MobileRedirect Does Not Offer

• It does not create a mobile site for you, that's what MobileLaunch is for!
• It does not identify which DocType and ContentType you should use, but we do have this solution in MobileLaunch.
• It does not validate passed variables - this is something your applications/site should do

6. License

We provide a commercial and Non Profit license for our products:

• Single Use - for companies and developers to use on a single site/project - not for resale.
• Commercial Software License: for companies wanting to integrate the solution into their commercial products or services - ok for resale.
• Non Profit - same as the Single Use license, but for official Non Profit Organizations - not for resale. Note: not making a profit is not the same as being a Non Profit Organization.

MobileLaunch

---

By: MarkenMedia
Developer: Gideon Marken

1. Requirements:

• ColdFusion or PHP
• Webserver
• Some knowlege in the scripting language your site uses
• Basic knowledge of xHTML and WML
• HTML/Text editor

2. About MobileLaunch

MobileLaunch is a mobile site template system with multiple skins to choose from. Simply add your content to get started and install our included MobileRedirect code on your current Website, and you're live. MobileWebDeveloper.com is a collection of solutions to empower the mobile Web.

3. Demos

We have provided a complete example for each language we provide MobileLaunch in. Our demo mobile sites utilize our MobileSettings script to select which type of mobile site to present to the site visitor in addition to the MobileRedirect script for redirecting mobile devices to the mobile site. Visit the index page in the demo directory of your choice language with a mobile/portable device or emulater, and you'll be redirected to the demo mobile site we've included.

4. Installation and Setup - Only 7 Settings to Configure

First, please read all the information above about MobileRedirect before you continue. In order to install and setup our code, you will need a basic understanding of either ColdFusion, or PHP.

Once you download the zip file, and have unzipped it to a directory/folder, you will want to locate the language folder you wish to use. If you want to run a complete demo, copy everything in your language's folder to a directory where you'll run the demo site. The demo is currently set up to run at: http://SERVER_NAME/Language - where 'Language' is either: PHP or CFML. At the root of the /Language directory is a sample webpage to represent a 'Website.' All the mobile code is in a sub directory called /mobile.

Step 1. MobileRedirect - [1 setting] Setting up MobileRedirect to point at your mobile site is easy once you've included the script on your main Website. Just edit the script and replace our mobile URL with yours.

Step 2. MobileSettings - [5 settings] We also provide an additional script we call MobileSettings. This script would be added to the application file of your mobile site. What this script does, is identify which DocType and ContentType should be used. Not all mobile browsers support the same DocType and ContentType, so it's important to address these differences. You will most likely want to customize this script to fit your needs. We feel the script should generate 'session' vars instead of a standard var in your page, although you are free to change this if you are not using session vars in your site.

Step 3. Edit Pages: Next, you'll want to start adding some content to the site by editing our demo pages. We've include three pages for you to start with, 'home,' 'about,' and 'contact.' When adding content to these pages, be sure to use valid xHTML MP and test your pages with a phone emulator and a few real mobile devices.

Step 4. Adding Pages: Now that you have edited the existing pages, you may want to create some additional pages. First, create a file in your editor of choice. Next, set three variables at the top of your file:

• [CFML]
  <cfscript>
  mobilePgTitle="My Page";
  mobilePgKeywords="my keywords, go, here";
  mobilePgDesc="My description goes here";
  </cfscript>
• [PHP]
  <?
  mobilePgTitle="My Page";
  mobilePgKeywords="my keywords, go, here";
  mobilePgDesc="My description goes here";
  ?>

Once you are ready to save the file, save it to the views directory "/views/" and make sure the file name does not have any spaces. Then, you link to the page like this:

• [CFML] #application.mobileURL#/index.cfm?page=pageName
• [PHP] <?=$_SESSION['mobileURL']?>/index.php?page=pageName

- where pageName is the file name. If you want to add links on the homepage, open /views/home.php or /views/home.cfm and add your link!

Step 5. Forms: We've included a simple contact form, in addition to a form action script which is designed to process 'any' form your point at it, as long as you have the standard fields:

• <input name="page" type="hidden" value="formaction" />
• <input name="formID" type="hidden" value="pageName" />
• <input name="emailSubject" type="hidden" value="My New Form" />
• <input name="emailFrom" maxlength="255" value="" />

The hidden field for 'name' must be 'formaction.' Use the same form action URL you see on /views/contact.php. Please see the included contact form at /views/contact.php for more information on creating additional forms. We suggest you place all 'hidden' fields at the bottom of your page, since some mobile devices might display boxes.

Step 6. Header/Footer: if you need to edit the header or footer to add or remove anything, you can find them here: "/layout/"

Step 7. Logo: create a GIF image with the following dimensions: width="70" height="20", then save it here: "/images/logo.gif" - if you want to make the image with different dimensions, just edit the header file here: "/layout/"

Below, you can see a listing of the files and directories found in one of our language directories. Each solution is setup approximately the same way and has the same files names, etc., except for the file extensions (.asp, .cfm, .php).

• index.php
• mobileRedirect.php
• mobileRedirectAdv.php
• mobileRedirectSession.php
• mobileRedirectSessionAdv.php
• /mobile - mobile website framework
  • index.php
  • /config - mobileSettings file
    • mobileSettings.php
  • /errors - error pages (not yet avail. in php version)
    • errorGlobal.php
  • /images - standard images directory
    • logo.gif
  • /layout - page structures: body, header, and footer files
    • footer.php
    • footerWML.php
    • header.php
    • headerWML.php
  • /model - form processing, functions, page selector
    • formAction.php
    • body.php
    • bodyWML.php
    • udf.php
  • /skins - site skins root directory
    • /1 - skin by ID Number
      • HdrSubBkg.gif
      • folder.gif
      • style.css
  • /views - all the pages/content site visitors view
    • home.php
    • about.php
    • contact.php

Feel free to copy everything from "/mobile" and below to a different Web root than your current website's root.

5.Skins

A site skin is the color scheme and background graphics used to give MobileLaunch sites their look and feel. You can use one of our skins, or create your own by following our design suggestions. If you do create your own skin, stick with the same sizes for the images if you can, and be sure to test your CSS coding before going live. For best results, duplicate one of our current skins and use it as a template for building your own. For reference, common mobile device screen sizes are: 128x128, 176x220, and 128x160. PSP's support the following resoltuions: 320x240, 368x208, 400x192. Pocket PC's support the following: 160x160,160 x 240, 176x220, 240x200, 240x240, 240x320. Which means your site will need to work within a width of 120 - 400. Our designs are ideal for a 120px wide screen.

6.What MobileLaunch Does Not Offer

• Full WML Support - MobileLaunch assumes you are not very interested in providing support for WML only browsers. Our support for WML is geared towards a single one page/card design. If you wish to provide a greater level of support for WML browsers, you'll need to make some modifications to our header and footer templates.
• Form Validation - MobileLaunch does not provide any form validation beyond checking of the user's email address
• Security/Login Model - MobileLaunch does not provide a login or any form of enforced security, all pages are accessible
• Database Integration - MobileLaunch does not provide a direct support for a database, but you can easily add it
• Device Support - MobileLaunch does not provide support for individual devices, if you want to customize your mobile site per device, you would need to use WALL or WURFL.

While MobileLaunch doesn't currently support the above list, we may consider these as new features in future releases. For example, we may create an admin site that would allow you to edit and publish your mobile site from a browser - storing the content either in a database or possibly XML files. Give us feedback, tell us what you want.

7. License

We provide a commercial and Non Profit license for our products:

• Single Use - for companies and developers to use on a single site/project - not for resale.
• Commercial Software License: for companies wanting to integrate the solution into their commercial products or services - ok for resale.
• Non Profit - same as the Single Use license, but for official Non Profit Organizations - not for resale. Note: not making a profit is not the same as being a Non Profit Organization.