Dev.mobi, site.mobi, or ready.mobi

akc · 07-04-2007, 06:28 PM

Part 1:

First of all you should save all your pages as page.xhtml, don't forget to do this, unless you are doing programming, in that case your pages will be page.php, page.jsp, etc.

This tutorial will explain in detail mobi development in PHP5, if you need something more complex like Java(JSP,JSF,WebServices) you should hire my services

Sending the correct MIME types.

First of all you must configure the HTTP of your hosting to send the correct MIME types to the end user. To do that i will explain how to configure the .htaccess file on Apache that all hosting accounts have. You should open your .htaccess file and add this text. This file is a hidden file, and probably does not contain any text.

1. This line adds this type of file to the list of MIME types supported by your HTTP Server.

Code:

AddType application/xhtml+xml .xhtml

2. This line configures the server to listing on index.xhtml

Code:

DirectoryIndex index.html index.xhtml index.php

3. This redirects www.yoursite.mobi to yoursite.mobi and viceversa. This is specially usefull when it comes to SEO optimization.

Code:

RewriteEngine On
RewriteCond %{HTTP_HOST} ^yoursite\.mobi [nc]
RewriteRule (.*) http://www.yoursite.mobi/$1 [R=301,L]

4. This line change the MIME type to "text/html" if the browser is Explorer, because the Explorer does not recognize XHTML extensions, everything else is served as .xhtml

Code:

RewriteCond %{HTTP_USER_AGENT} .*MSIE.*
RewriteCond %{REQUEST_URI} \.xhtml$
RewriteRule .* - [T=text/html]

Using the correct Encoding and DocType.

Character Encoding: The XML directive tells the navigator how to display the characters on a page.

Code:

<?xml version="1.0" encoding="UTF-8" ?>

DocType: The DocType tells the navigator how a page should be interpreted, including the rules and how strictly they should be.

Code:

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

XHTML Meta Tags.
Here you probably know how to do things but there is a very special feature to use: CACHE
You must always use cache to download all images and stylesheets ones, so you save the user from downloading everything with any subsequent request.
Here is a sample of using Meta Tags:

Code:

<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<meta name="description" content="Your site's description" />
<meta name="keywords" content="Lots of keywords here" />
<meta http-equiv="Cache-Control" content="max-age=300"/>
<link rel="icon" href="images/favicon.ico"/>
<link rel="shortcut icon" href="images/favicon.ico"/>
<link rel="stylesheet" type="text/css" href="style.css"/>
<title>Your site's title.</title>

Note the line:

Code:

<meta http-equiv="Cache-Control" content="max-age=300"/>

This line sets the cache to 300 minutes, this is necesary for saving download cost and time. But must be deactivated for debuging.

Here i leave you a full example of how your header should look like:

Code:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<meta name="description" content="Your site's description" />
<meta name="keywords" content="Lots of keywords here" />
<meta http-equiv="Cache-Control" content="max-age=300"/>
<link rel="icon" href="images/favicon.ico"/>
<link rel="shortcut icon" href="images/favicon.ico"/>
<link rel="stylesheet" type="text/css" href="style.css"/>
<title>Your site's title.</title>
</head>

Here i leave you a few links for you to check:

Mobile Design Patterns - http://patterns.littlespringsdesign.com
WAP 2.0 Specification - http://www.wapforum.org/what/technical.htm
WAP 2.0 Technology White Paper - http://www.wapforum.org/what/WAPWhite_Paper1.pdf
XHTML-MP 1.0 Specification - http://www.openmobilealliance.org/te...20011029-a.pdf
Comparison of XHTML Mobile Profile and XHTML Basic - http://pc.dev.mobi/?q=node/119
W3C Mobile Web Best Practices Working Group - http://www.w3.org/2005/MWI/BPWG/
W3C mobileOK Scheme 1.0 - http://www.w3.org/TR/mobileOK/
MobiReady Report - http://ready.mobi
W3C Mobile Web Best Practices Basic Guidelines - http://www.w3.org/TR/mobile-bp/
dotMobi Switch On Web Developers Guide - http://pc.mtld.mobi/documents/dotmob...er_Guide3.html
XHTML-MP Specifications - http://www.openmobilealliance.org/te...20011029-a.pdf
Wireless CSS Specifications - http://www.openmobilealliance.org/re...20040609-C.pdf
XHTML Modularization - http://www.w3.org/TR/2001/REC-xhtml-...tion-20010410/

This is everything you need to know on how to configure the header for a Static XHTML-MP, more to come on headers on Dinamic XHTML-MP with PHP5.

Cheers,

Andreas Peter Koenzen

Continue Part 1:

WURFL

What is WURFL?

WURFL is a software that enables you to detect mobile devices through the HTTP Header using the device's USER AGENT.
The WURFL is an XML configuration file which contains information about capabilities and features of many mobile devices.

How to use it with PHP?
Well i will give you here a script that detects if the browser is a desktop browser or a mobile browser. I will explain how to use it and i will explain how to use WURFL to detect specific phone characteristics for better display. WURFL is very usefull for specific phone characteristics like the display, what kind of images the devices supports and many more.

I will begin by explaining how to install WURFL on your site...

How to install WURFL?
First you download the software for PHP here:
http://sourceforge.net/project/downl...se_mirror=ufpr
The you download the XML file that contains the characteristics for every phone here:
http://wurfl.sourceforge.net/wurfl.xml

To install WURFL you can create a folder on your root directory named "wurfl", you copy there all files provided by PHP Tools.
The files are:
- check_wurfl.php
- update_cache.php
- wurfl_class.php
- wurfl_config.php
- wurfl_parser.php
- readme.txt

Then you proceed to create a folder also on your root directory called "wurfl_data". In this folder you should put your wurfl.xml file.

What you do next is edit your "wurfl_config.php" file:
This is what you need to do:
1. Open the file in your text editor or IDE.
2. Change this line to the path of your wurfl_data folder you just created.
i.e. define("DATADIR", 'path/wurfl_data/');
I recomend using the full path to this directory.
Like define("DATADIR", '/var/www/html/wurfl_data/');
3. Change the path to your wurfl_parser.php file.
i.e. define("WURFL_PARSER_FILE", 'path/wurfl/wurfl_parser.php');
????: NamePros.com http://www.namepros.com/dot-mobi/346449-wap-2-0-development-howto-guide.html
Like define("WURFL_PARSER_FILE", '/var/www/html/wurfl/wurfl_parser.php');
4. Change the path to your wurfl_class.php file.
i.e. define("WURFL_CLASS_FILE", 'path/wurfl/wurfl_class.php');
Like define("WURFL_CLASS_FILE", '/var/www/html/wurfl/wurfl_class.php');
5. Finally you should configure WURFL to use cache, this is very simple and i recommend using MULTICACHE. This is acomplish by setting the CONSTANTS "define ("WURFL_USE_CACHE", true);" to "true" and "define ("WURFL_USE_MULTICACHE", true);" to "true".
6. This is everything you need to do to install WURFL.

Now that everything is finish installing WURFL, you need to go with your browser to www.yoursite.mobi/path_to_wurfl/update_cache.php, this will initialize the WURFL cache. If everything works fine you would see a message like this:

Quote:

Parser load time:0.010666131973267
Parsing time:6.2261588573456
Total:1183602354.1569

If this message appears it means that you have installed WURFL successfully

Script to detect mobile browser or desktop browser.
Here is a script to detect if a browser is mobile or desktop:

Code:

<?php
/*
 * Script to detect browsers.
 * @author APKC.net - Desarrollo para Móviles
 * @version 1.0
 */

//--------------------------------------------------
# Here import the two files necesary by WURFL to do the detection.
require_once ('path_to_wurfl/wurfl/wurfl_config.php');
require_once ('path_to_wurfl/wurfl/wurfl_class.php');
//--------------------------------------------------

//--------------------------------------------------
/**
 * Performs the detection of devices.
 * @access public
 * @author APKC.net
 * @return none
 */
function device_detection()
{
  if (!isset($_SESSION['wurfl_id'])) {
    $myDevice = new wurfl_class();
    $myDevice -> GetDeviceCapabilitiesFromAgent($_SERVER["HTTP_USER_AGENT"]);

    #Session variables.
    $_SESSION['myDevice'] = $myDevice;
    $_SESSION['user_agent'] = $_SERVER['HTTP_USER_AGENT'];
    $_SESSION['brand_name'] = $myDevice -> getDeviceCapability('brand_name');
    $_SESSION['model_name'] = $myDevice -> getDeviceCapability('model_name');

    #Array of WURFL capabilities.
    $wurfl_array = array();
    $wurfl_array = $myDevice -> capabilities;

    #Checks if there is a fallback ID.
    if (isset($wurfl_array['fall_back'])) {
      $_SESSION['wurfl_id_fallback'] = $wurfl_array['fall_back'];
    } else {
      $_SESSION['wurfl_id_fallback'] = 'This device does not have a Fallback ID.';
    }

    #Checks if the browser is WAP or not.
    $_SESSION['browser_is_wap'] = $myDevice -> browser_is_wap;

    if ($_SESSION['browser_is_wap']) {
      $_SESSION['modo'] = 'movil';
      #Use the fallback ID instead of the regular ID.
      $_SESSION['wurfl_id'] = $_SESSION['wurfl_id_fallback'];
    } else {
      $_SESSION['modo'] = 'desktop';
      $_SESSION['wurfl_id'] = 'nokia_6600_ver1';
    }
  }
}
//--------------------------------------------------
?>

This script will detect the browser of the user and stored in a session variable for later use. It is very important to use session variables for this kind of thing because it is safer and more convenient if you have many pages.
????: NamePros.com http://www.namepros.com/showthread.php?t=346449

Later i will explain how to put all this things together to build a full WAP 2.0 site.

Cheers,

Andreas Peter Koenzen

AndyR · 07-05-2007, 12:17 AM

Thankyou very much, rep added, keep up the good work.

andyr

fautebol · 07-05-2007, 01:44 AM

Yes, Thank you very much akc. I don't have time to try it now, but I hope you will stay around.

ajkula · 07-05-2007, 10:52 AM

Andreas, thank you very much for this useful tutorial!

Rep added.

I`m looking forward for our further cooperation in developing of some my .mobi sites.

If you allow I would like to contribute to this yours great thread with this link (all of xhtml-mp tags list)

akc · 07-05-2007, 11:30 AM

Your welcome, let's move forward this mobi business for the benefit of all...

Yes of course you can add what you like, let's make it a thread of advices and best practices for mobile development. I will continue this tutorial until i have finish explaining how to build a full WAP 2.0 site. It may take me a while though

Regards,

akc · 07-07-2007, 12:54 PM

Part 2: The body

Always Use Well-formed Code.
For those not familiar with XHTML, the first thing to know is that all code should validate (according to the doctype) and be well-formed (a valid XML document).
Here is a basic run down of the rules of well-formed XML as well as the key differences between XHTML and HTML.

Code:

1. All elements should be closed, e.g. <br/>. These are also acceptable: <br></br>, and <br />.
2. All non-empty elements should be closed: <p>Example Text</p>
3. All elements must be properly nested: <em><strong>Example Text</strong></em>
4. The alt attribute must be used for all images: <img src="image.png" alt="Image Description" />
5. Text should appear within a block level element and not directly in the body: <body><p>Example Text</p></body>
6. Inline elements should always nest with block level elements: <h2><em>Example Text</em></h2>
7. All attributes should appear within quotes: <p class="names"/>
8. All elements and attributes should use lowercase: <p class="Sm">Example Text <hr noshade="true"/></p>

There are many online Web tools that you can use to validate your markup including the MobiReady Report and the W3C Validation service. There are also browser-based tools such as the HTML Validator Firefox Extension that can be used throughout the development cycle to keep an eye on your pages.

Always Avoid Using Tables for Layout.
We can now add our content in the body of our document, but first we need to add structural elements to contain each logical section, a header, footer and the main body, for example.
With HTML 4, it was common practice to use tables to control the layout of content. This technique, however, constricts the use of our markup by integrating presentational layout into our code. While this doesn’t seem like a critical issue, it becomes a big problem when the page is viewed in multiple mobile browsers.
????: NamePros.com http://www.namepros.com/showthread.php?t=346449
Instead, use XHTML-friendly <div> elements to logically contain our content for later styling to control the presentation. Since we usually display text in a single section, the structure is straightforward with a content container in the middle of a header and footer:

Code:

<body>
<div id="header">
<!-- Header placeholder -->
</div>
<div id="content">
<!-- Content placeholder -->
</div>
<div id="footer">
<!-- Footer placeholder -->
</div>
</body>

Place Navigation in the Content Body.
Unlike on the desktop, it usually isn’t a good idea to have a navigation list on every page. Given the vertical orientation of the mobile page, you should show only navigation that’s relevant to the page, thereby reducing page weight and scrolling. Thus, the navigation goes into the content body:

Code:

<div id="content">
<ol>
<li><a href="news.html">News</a><li>
<li><a href="products.html">Our Products</a></li>
<li><a href="customers.html">Our Customers</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ol>
</div>

Use accesskeys in the Primary Navigation.
The primary navigation should include an assigned accesskey that corresponds to a keypad number key whenever possible:

Code:

<li><a href="news.html" accesskey="1">News</a></li>

This code links the News item to the “1” key on the mobile keypad and displays the number 1 by it (if the <li> it is part of is the first in the list, of course). Obviously, navigation that exceeds the number of keys on the keypad makes it difficult to provide accesskeys for lists with more than ten items. While not a requirement for all links, accesskeys are useful for primary navigation.

Use Ordered Lists for Navigation.
Unlike on the desktop Web it isn’t the best idea to have a navigation list on every page. Given the vertical orientation of the mobile page you should only show navigation relevant to the page, reducing page weight and scrolling. Instead we will add our navigation into the content body.

Code:

<div id="content">
<ol>
<li><a href="news.html" accesskey="1">News</a><li>
<li><a href="products.html" accesskey="2">Our Products</a></li>
<li><a href="customers.html" accesskey="3">Our Customers</a></li>
<li><a href="about.html" accesskey="4">About Us</a></li>
<li><a href="contact.html" accesskey="5">Contact Us</a></li>
</ol>
</div>

For our home page, we can take certain liberties in providing a description for each link to let users know what to expect in each section. By wrapping the description into a <span>, we can use CSS to style it differently from the navigation:
????: NamePros.com http://www.namepros.com/showthread.php?t=346449

Code:

<div id="content">
<ol>
<li>
<a href="news.html">News</a>
<span class="description">Read the latest about our products.</span>
</li>
<li>
<a href="products.html">Our Products</a>
<span class="description">Browse our product descriptions.</span>
</li>
<li>
<a href="customers.html">Our Customers</a>
<span class="description">View our customers.</span>
</li>
<li>
<a href="about.html">About Us</a>
<span class="description">What we do? How can we help
you?</span></li>
<li>
<a href="contact.html">Contact Us</a>
<span class="description">Telephone, email and location details.</span>
</li>
</ol>

Linking Phone Numbers.
One of the benefits of the Mobile Web is that its users primarily view it on a phone, allowing the user to quickly and easily make phone calls. It’s an opportunity to help the user and save steps:

Code:

<a href="tel:+12065450210">+1 206 545-0210</a>

Like any hyperlink, any text could appear between the <a> element to initiate a call. However, the recommendation is to display the phone number.

Dealing with Forms can be Tricky.
Entering data into a Mobile Web site can be a difficult and time-consuming process. To avoid wasting the user’s time and causing frustration, use forms sparingly.
However, when using forms, reduce the required information as much as possible. The following creates a contact form with few fields:

Code:

<form method="post" action="process_comment.cgi">
<dl>
<dt>Your comment is about:</dt>
<dd><input type="radio" id="cat1" value="website" accesskey="w" />
<label for="cat1">Our <span class="accesskey">W</span>eb Site</label></dd>
<dd><input type="radio" id="cat2" value="product" accesskey="p" />
<label for="cat2">Our <span class="accesskey">P</span>roducts</label></dd>
<dd><input type="radio" id="cat3" value="news" accesskey="n" />
<label for="cat3">A <span class="accesskey">N</span>ews Article</label></dd>
<dd><input type="radio" id="cat4" value="other" accesskey="o" />
<label for="cat3"><span class="accesskey">O</span>ther</label></dd>
<dt><label for="comment">Your comment:</label></dt>
<dd><textarea id="comment" name="comment" rows="5" cols="20"></textarea></dd>
<dt><label for="email">Your e-mail (optional):</label></dt>
<dd><input type="text" name="email" id="email" /></dd>
<dt><input type="submit" value="Send" /></dt>
</dl>
</form>

References.
W3C Mobile Web Best Practices Basic Guidelines - http://www.w3.org/TR/mobile-bp/
Global Authoring Practices - http://www.passani.it/gap/
Firefox HTML Validator - http://users.skynet.be/mgueury/mozilla/

Cheers,

garrett200 · 07-07-2007, 12:56 PM

This is a very informative thread. Let me know akc if you would like me to "sticky" it. I think it's worth stickying.

akc · 07-07-2007, 12:59 PM

Yes garrett200, it would be nice that the thread remains sticky.

Cheers,

garrett200 · 07-07-2007, 01:04 PM

Done.

sorrynerd · 07-10-2007, 04:32 AM

I have a few custom, very easy to use mobi scripts for sale, including a social network clone of mpals.mobi

Check them out at www.phpplaza.com

del.icio.us · 07-20-2007, 06:48 AM

Can anyone tell me how to include javascript in a .mobi page?

I'm struggling with a piece of javascript code that I need to use in my new .mobi web page...

Any suggestions?

scandiman · 07-20-2007, 07:35 AM

Originally Posted by del.icio.us

Can anyone tell me how to include javascript in a .mobi page?

I'm struggling with a piece of javascript code that I need to use in my new .mobi web page...

Any suggestions?

My suggestion, don't use javascript. Not supported by most phones.

del.icio.us · 07-20-2007, 09:31 AM

Originally Posted by scandiman

My suggestion, don't use javascript. Not supported by most phones.

????: NamePros.com http://www.namepros.com/showthread.php?t=346449
Is there any alternative scripting technology for mobile devices?

I'm developing a dynamic mobile application, which will return dynamic results based on user inputs, just like google search engine. Which technology should I use to develop such a mobile compatible application?

italiandragon · 08-24-2007, 07:07 AM

alright guys...I`m just "trying" to learn not even the ABC but just the A about this.....so please don`t laugh to much at my question:

without hosting I assume I can`t even start to develop Cairns.mobi , so my first problem is the hosting.....where do I get the cheapest /easiest to set one? Is there any free?

Thank you a lot.

nedwards · 08-30-2007, 06:35 AM

Go to Dev.mobi where you will find all of the tools you need for FREE.

meegwell · 08-30-2007, 12:06 PM

Hello,
There is now a lot of info on .mobi development. I am looking for something specific and having a hard time finding it.

I want to learn about basic database function - the best way to approach it - for a dotmobi.

The equivalent of a php form querying an sql database for a few fields of info.

Is a common approach to "convert" an exsisting page/site or is it usually easier to start from scratch?

Mr. Deleted · 10-25-2007, 04:53 PM

OK how would I make a cell phone page with the new Adsense for Mobile?

PHP Code:

  <?php

 
$GLOBALS['google']['ad_type']='text';

$GLOBALS['google']['channel']='0063768877';

$GLOBALS['google']['client']='pub-4754215794793251';

$GLOBALS['google']['format']='mobile_single';

$GLOBALS['google']['https']=$_SERVER['HTTPS'];

$GLOBALS['google']['host']=$_SERVER['HTTP_HOST'];

$GLOBALS['google']['ip']=$_SERVER['REMOTE_ADDR'];

$GLOBALS['google']['markup']='xhtml';

$GLOBALS['google']['output']='xhtml';

????: NamePros.com http://www.namepros.com/showthread.php?t=346449
$GLOBALS['google']['ref']=$_SERVER['HTTP_REFERER'];

????: NamePros.com http://www.namepros.com/showthread.php?t=346449
$GLOBALS['google']['url']=$_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];

$GLOBALS['google']['useragent']=$_SERVER['HTTP_USER_AGENT'];

require('http://pagead2.googlesyndication.com/pagead/show_ads.php');

 
?>

ajkula · 11-20-2007, 03:39 PM

The End-All Guide to Small-Screen Web-Dev

artroo · 01-21-2008, 06:07 AM

Originally Posted by mis_chiff

I have a quick question, and without being too specific,
I have a page of images (small) and the only text is 1 or 2 words
describing the image, I would like to make this my only page (index.xhtml)
Is this possible? Do I need to convert the images to some other kind of file
to make them view properly? Currently they are .gifs

thanks for the help.

Try using www.ubik.com (actually the tool is http://mobilizer.ubik.com). They claim to dynamically transcode (ie change formats) for images and content for over 4,000 devices. I created a site using their tool and it seems to work well. I don't think they have advertising implemented though.

jason2008 · 03-08-2008, 11:07 PM

I'm a newbie to the forum, and to .mobi

I want ask a very simple question.

I have a domain name - let's call it example.com (as an example)

1) If I purchase mexample.mobi are there any associated issues?

Reason why I ask is when I type google.com in my mobile, it looks quite different to google.com on a browser.

2) Is there some redirection here, perhaps?

Thanks for your help in advance.

weblord · 04-25-2008, 03:31 PM

FREEWARE: WML (Wireless Markup Language) Editors

Visual Pulp 0.12
A simple but interesting Java WML editor. It supports most functions, and it's one of just a bit really visual editors.

WAP Site 2.0
This is a small comprehensive program which helps you make your WAP page quickly and easily without any previous knowledge of WML it also includes a WBMP viewer with which you can view WBMP files before inserting them into your projects.

WAPedit 1.1
A must for starters. Remember the early days of HotDog, when we learned HTML, as the program showed us the implemented TAGs after pressing a function? This simple WML editor works exactly like this, download and enjoy.

WAPSite Developer Lite 1
This is a very small and comprehensive program which helps you make your WML site without any previous knowledge of WAP. A user doesn't need to type any code, he just presses the appropriate button and the code is automatically written.

WMLExpress 1.01

Design your homepage for WAP-compatible devices or emulators within few minutes. No further skills in WML programming are needed. Just type in your text and upload the file generated by WmlExpress.
????: NamePros.com http://www.namepros.com/showthread.php?t=346449

http://www.wap-shareware.com/directory/wmleditors.shtml

There are also shareware and paid services.

dubya · 04-28-2008, 02:05 PM

www.scripter.mobi

Custom mobile scripts at a great price.

07-05-2007, 01:44 AM	#128 (permalink)
fautebol NamePros Regular Join Date: Oct 2006 Posts: 315	Yes, Thank you very much akc. I don't have time to try it now, but I hope you will stay around. __________________ fcn.mobi 3dg.mobi beachvolley.mobi audioguides.mobi landed.mobi snowchains.mobi adpage.mobi infomobi.mobi logy.mobi TAKING OFFERS NOW.

07-05-2007, 10:52 AM	#129 (permalink)
ajkula бре! Join Date: Feb 2007 Location: Sava and Danube Confluence (I`m a river shark) Posts: 397	Andreas, thank you very much for this useful tutorial! Rep added. I`m looking forward for our further cooperation in developing of some my .mobi sites. If you allow I would like to contribute to this yours great thread with this link (all of xhtml-mp tags list) __________________ Don't believe the hype

07-07-2007, 12:54 PM	#131 (permalink)
akc NamePros Member Join Date: Mar 2007 Posts: 54	Part 2: The body Always Use Well-formed Code. For those not familiar with XHTML, the first thing to know is that all code should validate (according to the doctype) and be well-formed (a valid XML document). Here is a basic run down of the rules of well-formed XML as well as the key differences between XHTML and HTML. Code: 1. All elements should be closed, e.g. <br/>. These are also acceptable: <br></br>, and <br />. 2. All non-empty elements should be closed: <p>Example Text</p> 3. All elements must be properly nested: <em><strong>Example Text</strong></em> 4. The alt attribute must be used for all images: <img src="image.png" alt="Image Description" /> 5. Text should appear within a block level element and not directly in the body: <body><p>Example Text</p></body> 6. Inline elements should always nest with block level elements: <h2><em>Example Text</em></h2> 7. All attributes should appear within quotes: <p class="names"/> 8. All elements and attributes should use lowercase: <p class="Sm">Example Text <hr noshade="true"/></p> There are many online Web tools that you can use to validate your markup including the MobiReady Report and the W3C Validation service. There are also browser-based tools such as the HTML Validator Firefox Extension that can be used throughout the development cycle to keep an eye on your pages. Always Avoid Using Tables for Layout. We can now add our content in the body of our document, but first we need to add structural elements to contain each logical section, a header, footer and the main body, for example. With HTML 4, it was common practice to use tables to control the layout of content. This technique, however, constricts the use of our markup by integrating presentational layout into our code. While this doesn’t seem like a critical issue, it becomes a big problem when the page is viewed in multiple mobile browsers. ????: NamePros.com http://www.namepros.com/showthread.php?t=346449 Instead, use XHTML-friendly <div> elements to logically contain our content for later styling to control the presentation. Since we usually display text in a single section, the structure is straightforward with a content container in the middle of a header and footer: Code: <body> <div id="header"> <!-- Header placeholder --> </div> <div id="content"> <!-- Content placeholder --> </div> <div id="footer"> <!-- Footer placeholder --> </div> </body> Place Navigation in the Content Body. Unlike on the desktop, it usually isn’t a good idea to have a navigation list on every page. Given the vertical orientation of the mobile page, you should show only navigation that’s relevant to the page, thereby reducing page weight and scrolling. Thus, the navigation goes into the content body: Code: <div id="content"> <ol> <li><a href="news.html">News</a><li> <li><a href="products.html">Our Products</a></li> <li><a href="customers.html">Our Customers</a></li> <li><a href="about.html">About Us</a></li> <li><a href="contact.html">Contact Us</a></li> </ol> </div> Use accesskeys in the Primary Navigation. The primary navigation should include an assigned accesskey that corresponds to a keypad number key whenever possible: Code: <li><a href="news.html" accesskey="1">News</a></li> This code links the News item to the “1” key on the mobile keypad and displays the number 1 by it (if the <li> it is part of is the first in the list, of course). Obviously, navigation that exceeds the number of keys on the keypad makes it difficult to provide accesskeys for lists with more than ten items. While not a requirement for all links, accesskeys are useful for primary navigation. Use Ordered Lists for Navigation. Unlike on the desktop Web it isn’t the best idea to have a navigation list on every page. Given the vertical orientation of the mobile page you should only show navigation relevant to the page, reducing page weight and scrolling. Instead we will add our navigation into the content body. Code: <div id="content"> <ol> <li><a href="news.html" accesskey="1">News</a><li> <li><a href="products.html" accesskey="2">Our Products</a></li> <li><a href="customers.html" accesskey="3">Our Customers</a></li> <li><a href="about.html" accesskey="4">About Us</a></li> <li><a href="contact.html" accesskey="5">Contact Us</a></li> </ol> </div> For our home page, we can take certain liberties in providing a description for each link to let users know what to expect in each section. By wrapping the description into a <span>, we can use CSS to style it differently from the navigation: ????: NamePros.com http://www.namepros.com/showthread.php?t=346449 Code: <div id="content"> <ol> <li> <a href="news.html">News</a> <span class="description">Read the latest about our products.</span> </li> <li> <a href="products.html">Our Products</a> <span class="description">Browse our product descriptions.</span> </li> <li> <a href="customers.html">Our Customers</a> <span class="description">View our customers.</span> </li> <li> <a href="about.html">About Us</a> <span class="description">What we do? How can we help you?</span></li> <li> <a href="contact.html">Contact Us</a> <span class="description">Telephone, email and location details.</span> </li> </ol> Linking Phone Numbers. One of the benefits of the Mobile Web is that its users primarily view it on a phone, allowing the user to quickly and easily make phone calls. It’s an opportunity to help the user and save steps: Code: <a href="tel:+12065450210">+1 206 545-0210</a> Like any hyperlink, any text could appear between the <a> element to initiate a call. However, the recommendation is to display the phone number. Dealing with Forms can be Tricky. Entering data into a Mobile Web site can be a difficult and time-consuming process. To avoid wasting the user’s time and causing frustration, use forms sparingly. However, when using forms, reduce the required information as much as possible. The following creates a contact form with few fields: Code: <form method="post" action="process_comment.cgi"> <dl> <dt>Your comment is about:</dt> <dd><input type="radio" id="cat1" value="website" accesskey="w" /> <label for="cat1">Our <span class="accesskey">W</span>eb Site</label></dd> <dd><input type="radio" id="cat2" value="product" accesskey="p" /> <label for="cat2">Our <span class="accesskey">P</span>roducts</label></dd> <dd><input type="radio" id="cat3" value="news" accesskey="n" /> <label for="cat3">A <span class="accesskey">N</span>ews Article</label></dd> <dd><input type="radio" id="cat4" value="other" accesskey="o" /> <label for="cat3"><span class="accesskey">O</span>ther</label></dd> <dt><label for="comment">Your comment:</label></dt> <dd><textarea id="comment" name="comment" rows="5" cols="20"></textarea></dd> <dt><label for="email">Your e-mail (optional):</label></dt> <dd><input type="text" name="email" id="email" /></dd> <dt><input type="submit" value="Send" /></dt> </dl> </form> References. W3C Mobile Web Best Practices Basic Guidelines - http://www.w3.org/TR/mobile-bp/ Global Authoring Practices - http://www.passani.it/gap/ Firefox HTML Validator - http://users.skynet.be/mgueury/mozilla/ Cheers,

07-07-2007, 12:56 PM	#132 (permalink)
garrett200 Senior Member Join Date: Apr 2007 Location: San Diego, California Posts: 2,310	This is a very informative thread. Let me know akc if you would like me to "sticky" it. I think it's worth stickying. __________________ Adopt A Polar Bear Today!

07-07-2007, 01:04 PM	#134 (permalink)
garrett200 Senior Member Join Date: Apr 2007 Location: San Diego, California Posts: 2,310	Done. __________________ Adopt A Polar Bear Today!

07-05-2007, 12:17 AM	#127 (permalink)
AndyR NamePros Regular Join Date: Apr 2006 Location: up a mountain Posts: 784	Thankyou very much, rep added, keep up the good work. andyr

07-05-2007, 11:30 AM	#130 (permalink)
akc NamePros Member Join Date: Mar 2007 Posts: 54	Your welcome, let's move forward this mobi business for the benefit of all... Yes of course you can add what you like, let's make it a thread of advices and best practices for mobile development. I will continue this tutorial until i have finish explaining how to build a full WAP 2.0 site. It may take me a while though Regards,

07-07-2007, 12:59 PM	#133 (permalink)
akc NamePros Member Join Date: Mar 2007 Posts: 54	Yes garrett200, it would be nice that the thread remains sticky. Cheers,

07-10-2007, 04:32 AM	#135 (permalink)
sorrynerd Account Suspended Join Date: Jan 2007 Location: Franklin/West County, MA Posts: 41	I have a few custom, very easy to use mobi scripts for sale, including a social network clone of mpals.mobi Check them out at www.phpplaza.com

07-20-2007, 06:48 AM	#136 (permalink)
del.icio.us Account Suspended Join Date: Jun 2007 Location: இந்தியா Posts: 1,058	Can anyone tell me how to include javascript in a .mobi page? I'm struggling with a piece of javascript code that I need to use in my new .mobi web page... Any suggestions?

08-24-2007, 07:07 AM	#139 (permalink)
italiandragon NamePros Expert Join Date: Mar 2006 Location: AUSTRALIA Posts: 6,390	alright guys...I`m just "trying" to learn not even the ABC but just the A about this.....so please don`t laugh to much at my question: without hosting I assume I can`t even start to develop Cairns.mobi , so my first problem is the hosting.....where do I get the cheapest /easiest to set one? Is there any free? Thank you a lot. __________________ www.MMCP.com www.decretoingiuntivo.net www.ipotecalegale.info www.swishersweetslittlecigars.com

08-30-2007, 06:35 AM	#140 (permalink)
nedwards New Member Join Date: Jul 2007 Location: Dublin, Ireland Posts: 2	Dev.mobi, site.mobi, or ready.mobi Go to Dev.mobi where you will find all of the tools you need for FREE.

08-30-2007, 12:06 PM	#141 (permalink)
meegwell NamePros Member Join Date: Mar 2006 Posts: 197	Hello, There is now a lot of info on .mobi development. I am looking for something specific and having a hard time finding it. I want to learn about basic database function - the best way to approach it - for a dotmobi. The equivalent of a php form querying an sql database for a few fields of info. Is a common approach to "convert" an exsisting page/site or is it usually easier to start from scratch?

10-25-2007, 04:53 PM	#142 (permalink)
Mr. Deleted NamePros Member Join Date: Aug 2004 Location: Ohio Posts: 130	OK how would I make a cell phone page with the new Adsense for Mobile? PHP Code: <?php $GLOBALS['google']['ad_type']='text'; $GLOBALS['google']['channel']='0063768877'; $GLOBALS['google']['client']='pub-4754215794793251'; $GLOBALS['google']['format']='mobile_single'; $GLOBALS['google']['https']=$_SERVER['HTTPS']; $GLOBALS['google']['host']=$_SERVER['HTTP_HOST']; $GLOBALS['google']['ip']=$_SERVER['REMOTE_ADDR']; $GLOBALS['google']['markup']='xhtml'; $GLOBALS['google']['output']='xhtml'; ????: NamePros.com http://www.namepros.com/showthread.php?t=346449 $GLOBALS['google']['ref']=$_SERVER['HTTP_REFERER']; ????: NamePros.com http://www.namepros.com/showthread.php?t=346449 $GLOBALS['google']['url']=$_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']; $GLOBALS['google']['useragent']=$_SERVER['HTTP_USER_AGENT']; require('http://pagead2.googlesyndication.com/pagead/show_ads.php'); ?> __________________ HummerSUV.com

11-20-2007, 03:39 PM	#143 (permalink)
ajkula бре! Join Date: Feb 2007 Location: Sava and Danube Confluence (I`m a river shark) Posts: 397	The End-All Guide to Small-Screen Web-Dev

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

03-08-2008, 11:07 PM	#145 (permalink)
jason2008 First Time Poster! Join Date: Mar 2008 Posts: 1	I'm a newbie to the forum, and to .mobi I want ask a very simple question. I have a domain name - let's call it example.com (as an example) 1) If I purchase mexample.mobi are there any associated issues? Reason why I ask is when I type google.com in my mobile, it looks quite different to google.com on a browser. 2) Is there some redirection here, perhaps? Thanks for your help in advance.

04-25-2008, 03:31 PM	#146 (permalink)
weblord NamePros Legend Join Date: Dec 2005 Location: Philippines - www.Nabaza.com Posts: 19,784	FREEWARE: WML (Wireless Markup Language) Editors Visual Pulp 0.12 A simple but interesting Java WML editor. It supports most functions, and it's one of just a bit really visual editors. WAP Site 2.0 This is a small comprehensive program which helps you make your WAP page quickly and easily without any previous knowledge of WML it also includes a WBMP viewer with which you can view WBMP files before inserting them into your projects. WAPedit 1.1 A must for starters. Remember the early days of HotDog, when we learned HTML, as the program showed us the implemented TAGs after pressing a function? This simple WML editor works exactly like this, download and enjoy. WAPSite Developer Lite 1 This is a very small and comprehensive program which helps you make your WML site without any previous knowledge of WAP. A user doesn't need to type any code, he just presses the appropriate button and the code is automatically written. WMLExpress 1.01 Design your homepage for WAP-compatible devices or emulators within few minutes. No further skills in WML programming are needed. Just type in your text and upload the file generated by WmlExpress. ????: NamePros.com http://www.namepros.com/showthread.php?t=346449 http://www.wap-shareware.com/directory/wmleditors.shtml There are also shareware and paid services. __________________ Nabaza.com - Amaia

04-28-2008, 02:05 PM	#147 (permalink)
dubya NamePros Regular Join Date: Dec 2007 Posts: 240 Follow @DavidWiles	www.scripter.mobi Custom mobile scripts at a great price.