Web for mobile devices - best practices for ASP.NET

Question

Starting to build web applications for mobile devices (any phone).
What would be the best approach using ASP.NET 3.5/ASP.NET 4.0 and C#?

UPDATE (feb2010)
Any news using windows mobile 7?

Answer 1

It depends if you really want to support every cell phone or only high end or new phone like the iPhone which don't have many limitations rendering web pages. If you could ask for real HTML rendering, Javascript and cookies support on the phone as requirement, then the real constraint is the limited size of the screen. You should do fine with "normal" web development in ASP.NET taking care to the the size of the pages.

If that is the case, you could stop reading here.

If you really want to support every cell phone, especially old ones, you should be aware that there are different types of phones. Many of them have limitations and constraints showing web pages. Some of them can use JavaScript, but many of them do not. Some of them can display HTML content, but many others can not. They have to rely on the "Wireless Markup Language" standard for accessing web. So, it's not easy to build a website that supports all of these different devices.

Here are some links to general content (not ASP.NET specific), which could help getting the whole picture:

• Mobile Web Best Practices 1.0 (W3C)
• Mobile Web Developer#s Guide (dotMobi)

Their main limitation however is, as I already mentioned, the smaller screen than on normal PC's. And many cell phones do not support JavaScript, Cookies and some even don't show images.

There are special markup standards for cell phones. WML pages is for example a widely adopted standard for cellphones. WML stands for "Wireless Markup Language" which is based on XML. You can find a description and reference of WML here on w3schools.com.

The code below shows a sample WML page:

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
   "http://www.wapforum.org/DTD/wml_1.1.xml"&gt;

<wml>
   <card id="card1" title="Stackoverflow">
      <do type="accept" label="Menu">
         <go href="#card2"/>
      </do>
      <p>
         <select name="name"> 
            <option value="Questions">Questions</option>
            <option value="MyAccount">My account</option>
            <option value="FAQ">FAQ</option>
         </select>
      </p>
   </card>
   <card id="card2" title="Menu">
      <p>
           You selected: $(name)
      </p>
   </card>
</wml>

The good news is, that ASP.NET renders WML (and other mobile markup standards) content automatically. You don't have to write WML files yourself. A built-in mechanism detects the type of device (cell phone) of the web requests. However, mobile device detection on ASP.NET does not work correctly for some (newer) devices. Take a look at WURFL, an XML configuration file which contains information about capabilities and features of many mobile devices.

You can test the pages you develop in ASP.NET in a standard web browser, but it would not give th right picture of what you have developed. There are some emulators available for this problem, which simulate a cell phone on your desktop computer. There is a Microsoft support article which explains where you can download them.

ASP.NET Mobile Controls

The ASP.NET Mobile Controls, formerly knowns as the "Microsoft Mobile Internet Toolkit" extend the .NET Framework and Visual Studio to build mobile Web applications by enabling ASP.NET to deliver markup to a wide variety of mobile devices.

The ASP.NET mobile controls render the appropriate markup (HTML 3.2, WML 1.1, cHTML, XHTML) while dealing with different screen sizes, orientations and device capabilities.

Learn more here on the official web site.

Answer 2

More information here:windows-mobile-development-where-to-begin

Answer 3

A couple things I should mention since I work on a wireless network in Canada. Try and keep any images small (or even non existent) to increase load times and reduce data charges. On our network, if the user is not subscribed to a plan, our network charges $15/mb. Some unoptimized images a phone tries to download could easily cost the user, and those large images won't look good anyways.

I know it doesn't affect you, but if you use any other protocols, such as streaming, or any UDP based protocols, set the Maximum Packet Size to atleast 1300 bytes or lower. Just because of the way a mobile works as it's moves around the network, extra header information get's added. With TCP/IP we use MSS-clamping to protect against large packet issues, but this cannot be applied to any UDP transmissions, or anything secure protocol that uses an Authentication Header. If the mobiles you are targetting are offered by RIM, this point can be ignored completely.

Some mobiles may use a WAP proxy when talking to you're server, if this is a case, try avoiding using any connections that require a keep-alive TCP/IP. Some proxies are set to not allow any keep-alive sessions go through them, even though I beleive most of the new ones are fine.

I'm sure there is more, the most important thing you should keep in you're mind that the IP connectivity to the mobile is alot more complex then someone opening up a web browser. This transport can be extremely tricky, so if you try to do something really fancy, even if it works now, it may not always work. Also one last quick point, the latency and packet loss can fluctuate wildly, so if you're doing anything real-time, you latency could hit 200+ms, and I've seen packet loss spike to 20-30% levels for short times.

Good Luck, and if you have any specific questions, be sure to ask them.