Build Great Web Pages for Smartphones

Use templates to customize rendering for uplevel mobile browsers.

asp:cover story

ASP.NET VERSIONS: 1.0 | 1.1

LANGUAGES: All .NET Languages

 

Build Great Web Pages for Smartphones

Use templates to customize rendering for uplevel mobile browsers.

 

By Andy Wigley

 

The fact that you're reading this magazine means that chances are you're an "early adopter," the type of person who's the first to buy the latest gadgets and technical innovations. You might already have a Smartphone, or maybe you're considering buying one soon. And as a Web developer, you're likely wondering how to write great Web sites to take full advantage of the browser's capabilities.

 

If you need to build a Web site targeting the latest handhelds and you're lucky enough to be working for "It's a Perfect World Inc.," your company will have bought everyone the latest Microsoft Smartphone, and you'll know that all your client browsers are the same and want HTML 4.01 markup. You can use regular ASP.NET to build your applications, and make use of Cascading Style Sheets (CSS) and the rich set of ASP.NET controls.

 

However, most of us work in the real world, and the reality is that your target audience will have a mixture of Smartphones from Microsoft, Nokia, and Sony Ericsson, and phone-enabled PDAs such as Pocket PC Phone Edition and Palm devices. Some of these devices like HTML 4.0; some like HTML 3.2; others want XHTML-basic or XHTML-MobileProfile (Wireless Application Protocol, or WAP, 2.0); and all of them have different display sizes and capabilities. You might also need to support last-generation Internet-enabled phones with black and white WAP 1.1 browsers.

 

How do you support all these browsers and future-proof your application so that it still works when the next generation of mobile browsers comes out? The answer is to use the ASP.NET mobile controls, which are designed to solve this problem. These controls are ASP.NET server controls that have specialized rendering capabilities to work with mobile browsers. The developer builds an application essentially in a device-agnostic manner, while the runtime takes care of rendering the markup required by the requesting device when each request is processed. You might think this constrains you to developing boring Web sites aimed at the lowest common denominator. In reality, this is not so. In this article, I show you how to use templates that allow you to customize the presentation so it makes good use of the superior capabilities of uplevel browsers, such as the one on the Microsoft Smartphone.

 

Get Started

First, you'll need Visual Studio .NET 2003, or Visual Studio .NET 2002. If you have the latter, you'll have to download the Microsoft Mobile Internet Toolkit from Microsoft downloads; you can find a link at http://www.asp.net/mobile. You must also download the latest device update (available from the same URL) to ensure you've got the broadest support for mobile device browsers that's available today.

 

You also need a phone or an emulator. Most of the handset manufacturers, such as Nokia, Sony Ericsson, and Openwave, have developer Web sites with free emulators available for download. If it's the Microsoft Smartphone that you want to target, then if you're lucky, you can equip yourself with a real phone to test with. One option is to purchase the Smartphone Developer Kit. Otherwise, in the United States, AT&T Wireless offers the attractive Motorola MPx200, and Verizon Wireless carries the Samsung i600. In Europe, Orange offers the MPx200 and the SPV E200. Other carriers have announced that they too will be offering Microsoft Smartphones in the near future. Any real phone makes an excellent test tool. Just connect it to your development PC using the sync cable and you can fetch pages from IIS running on your PC using Pocket Internet Explorer.

 

If you cannot get your hands on a real phone, there is a zero-cost alternative. Download the free Smartphone 2003 SDK from Microsoft (go to http://www.microsoft.com/windowsmobile/information/devprograms/default.mspx for the download link). When you install this, it adds a Smartphone 2003 emulator to Visual Studio .NET 2003, which .NET Compact Framework and ASP.NET developers can use for testing. You can start up the emulator by clicking Tools, then Connect to Device, and selecting Smartphone in the Platform dropdown. Select Smartphone 2003 Emulator (Virtual Radio), then click Connect (see Figure 1).

 


Figure 1. The emulator that comes with the Smartphone 2003 SDK is an excellent test tool. Every Smartphone has two softkeys immediately under the screen, with their current function displayed on the bottom line of the display ("Start" and "Contacts" in this case), a 5-way D-Pad (the blue button), accept and hang-up call (green and red phone buttons respectively), a home key, and a back key.

 

Know Your Browser

Before I explain how to build Web apps for these devices, it's worth talking about the capabilities of the Pocket Internet Explorer browser on the Microsoft Smartphone. ASP.NET developers are accustomed to working with server controls, which remove the necessity to write raw markup in the application because the controls handle the markup generation duties. Nonetheless, it's useful to understand the capabilities of the target browser, if only to understand why, for example, your background sound or image doesn't work.

 

The Motorola MPx200, Samsung i600, and Orange SPV and SPV E100 run the Smartphone 2002 OS. The Pocket Internet Explorer (PIE) 2002 on these devices supports HTML 3.2 (as found in desktop IE3.02), JScript 1.1 (as found in IE4.0), an XML engine (MSXML 2.5 as found in IE5.0), SSL 2.0 and 3.0 (128bit), cookies, forms, and ActiveX components (user-installed only and no Authenticode). It does not support client-side VBScript, DHTML (except for innerText and innerHTML), or a Java Virtual Machine (JVM), although third-party JVM's are available. There is also no support for CSS or frames (TARGET will not function), and no multiple windows (window.open will open in an existing window if it's user initiated but automatic pop-up windows will not function). HTML tags need to be well formed and paired.

 

The Motorola MPx220 is rumored to be coming out in early summer, and the Orange SPV E200 is available now in Europe. These phones, and any others that appear on the market from now on, run Windows Mobile 2003 for Smartphone. PIE 2003 is a major rewrite over its predecessor and offers much improved performance and a similar feature set to desktop IE 5.5. It supports HTML 4.01, Extensible HTML (XHTML), CSS, Microsoft JScript version 5.5, and Wireless Markup Language (WML) 2.0 (XHTML + WML 1.x); Internet Protocol version 6 (IPv6) is supported in IPv4/IPv6 mixed-mode environments.

 

The gory details of browsers and markup languages are interesting to hardcore developers looking to take advantage of some of these features. However, for most applications, you don't really have to worry too much about the exact capabilities of your target browsers, particularly if you program with the ASP.NET mobile controls, because this means you're effectively delegating rendering decisions to the mobile controls at run time.

 

Design for Small Displays

There are some key design constraints you must observe when developing Web pages for handheld devices. The most obvious is that you're working with a comparatively small display area - only 176 x 220 pixels for current Smartphones, although you'll see devices with 240 x 320 screens (the same size as current Pocket PC displays) before too long. With such a small screen, it's essential you make maximum use of the display area. You don't have much width to play with, so arrange items on your page in a linear top-down approach.

 

Microsoft Smartphone screens are not touch sensitive; a joystick, which is not as flexible as a PC mouse or a Pocket PC stylus, is used for navigation. Consequently, cluttered screens with loads of links are no good. Keep the navigation simple and intuitive.

 

The final key thing to remember is KISS (Keep It Simple Stupid). That's the oldest principle of good Web design, and it's doubly important with Smartphones. Mobile Data networks are slow compared to fixed wire Internet connections, and latency (round-trip delays) of two seconds or more is not unusual. Pages that incorporate a lot of graphics will load slowly, frustrating your users. Network speeds are improving as the infrastructure is upgraded, and in this respect North America has the advantage of being late to the mobile data party. Given networks in North America have, in general, been installed later than they have been in Europe, they've been implemented using newer infrastructure technology and operate faster. In Europe, speeds of 28.8 kbits/sec, which give a frustratingly slow Web browsing experience, are not unusual. Things will improve immensely during the next 18 months or so as network operators bring their new data networks on-stream using 2.75G technologies (Enhanced Data rates for Global Evolution, or EDGE, and General Packet Radio Service, or GPRS) and 3G(WCDMA), but, for now, design for slow networks.

 

Use ASP.NET Mobile Controls With Templates

To get started, create a new ASP.NET mobile Web application. This application's home page displays a header, then some links to other pages, followed by an area where the latest newsflash displays. Build the basics by dragging onto the Form a Label for the header, setting the font to Bold and size to Large, with the text NEWSline. Also drag three mobile Link controls that link to pages for News, Sports, and Jobs. Another Label displays the text "News Just In!" and a TextView control displays the newsflash text (see Figure 2).

 


Figure 2. The basic user interface for this application consists of a mobile Label control that displays a header, three mobile Link controls to other pages, and a newsflash, displayed using a Label for the heading, and a TextView control for the block of text.

 

This basic application works on more than 300 different mobile devices, but it's oh so dull on the Smartphone (see Figure 3).

 


Figure 3A. The basic page works on uplevel browsers such as Pocket Internet Explorer on the Smartphone .

 


Figure 3B. The basic page works on downlevel browsers such as the Openwave WAP 1.1 browser, but takes little advantage of the presentational capabilities of the Smartphone browser.

 

You can improve the Smartphone's presentation immediately simply by using some of the control's basic style properties. Start by setting the Form1 BackColor to Blue (#00C0C0) and the forecolor to White. Set the font-size property of the Link controls, and the "News Just In!" Label to font-size Small, and set the color of the latter to Red. Finish by giving the Form an appropriate title, and things are looking much better (see Figure 4).

 


Figure 4. You can use the basic style properties of the mobile controls to enhance the presentation on uplevel browsers without breaking the application on downlevel WAP browsers.

 

Mark Up Your Table

That's a slight improvement, but you can do a lot better. Take a look at the three Link controls. Wouldn't it be better if they were displayed on a different colored background, so that it's more obvious that they're menu options? One of the standard designs for a PC Web page is to put them in the left column of a table, with the main content to the right of that. However, that's no good on a Smartphone because the main content would be bunched up on the right of the screen and you'd be wasting all the display area allotted to the menu items column as you scrolled down to read the text. It's better to display them in a horizontal line on a different color background. Then they'll break up the text of the page, and it will be more obvious they're menu links.

 

To do this, you need to send down some HTML

markup. You could use
or
tags for this. In this example, I've used a
. You need to open the
, a , and a
before displaying the Links, then close the same elements after the Links:

 

  

    

  

        

        

        

    

 

However, you only want to do that if the requesting device accepts HTML markup; it would be no good to send HTML markup to a WAP browser. You use the Panel control to do this. The Panel is a container control that has some interesting uses. It doesn't have any visual UI of its own, but if you place a group of controls in a Panel, the runtime tries to keep those controls together when it paginates output across multiple display screens. Another use for the Panel is to set basic style properties on it, upon which any child controls contained within it inherit the style settings unless they're explicitly overridden in the child.

 

Get Specific

The final use for the Panel, and the one you need to make use of, is using it as a container for a DeviceSpecific control. Inside the DeviceSpecific control you can write a Choice statement, which is the ASP.NET mobile controls equivalent of an If...Then...Else statement, to select a particular client browser or group of browsers. Inside a Choice statement for the particular browsers you want to target you can place ASP.NET controls (standard or mobile) or a Content Template. The Content Template is what you need in this case because it's a mechanism for injecting markup into the output stream. For example:

 

  

            runat="server">

    

      

         

                 border="0" valign="top">

            

              

      

    

 

    

        ...

    

  

 

This example contains two choice statements: one to select HTML browsers and one to select WML browsers. The Filter attribute of the element is the name of a device filter. If you open up the Web.Config file for a ASP.NET mobile Web project, you'll see that a number of device filters are defined there already:

 

  

      argument="J-Phone" />

  

      argument="html32" />

  

      argument="wml11" />

  .

  .

  .

 

When ASP.NET processes an incoming request from a browser for a Mobile Controls application, it examines the HTTP headers to identify the browser and uses the User-Agent string in the headers to look up the device capabilities in a config file. It uses the information found to build a MobileCapabilities object, which is then used throughout the ASP.NET runtime to control what kind of markup is sent back to the browser and how it is formatted. The compare attribute in the element above refers to a property of the MobileCapabilities object, so the "isHTML32" filter above effectively says, "If the PreferredRenderingType property of the MobileCapabilties object for the current request is html32, then this device filter is True."

 

You might be thinking, "But he's already told us that Pocket IE on Smartphone 2003 is an HTML 4.01 browser, so surely the choice filter should be "isHTML4.01"? Yes, strictly speaking it should be, but here you need a little inside knowledge on the MobileCapabilities object. At present, the allowed values of the PreferredRenderingType property are html32, chtml10, wml11, xhtml-basic, and xhtml-mp. So all HTML browsers get a value of html32 for this property, including the Smartphone. It is possible to write your own device filters, so you could write one called "isSmartphone," but the isHTML32 device filter is fine for your needs.

 

Use the ContentTemplate to Inject HTML

Using the technique I just outlined, you can use two Panel controls on either side of the Link controls containing the

markup you need. As a final touch, make sure the Link controls display in a line by setting their BreakAfter property to False. This property is True by default, because normally mobile Webforms display in a linear, top-down fashion, but in this case you'll need to override that. Changing the BreakAfter property still doesn't break the formatting on the Openwave browser, because links always display on a separate line on WML browsers. All basic style properties on the ASP.NET mobile controls are advisory only, meaning that the style is only enforced if it makes sense for the requesting browser. As a final touch, separate the links with a   you end up with the markup shown in Figure 5, and a much better formatted display (see Figure 6).

 

  BackColor="#00C0C0" runat="server"

  title="News As It Happens!">

  

    Font-Italic="True" Font-Bold="True" Font-Size="Large">

     NEWSline

  

  

    

      

      "http://schemas.microsoft.com/mobile/html32template">

        

          

            width="100%" border="0" valign="top">

            

              

        

      

    

  

  

    Font-Size="Small" Breakafter="False">

    News

   

  

    Font-Size="Small" Breakafter="False">

    Sports

   

  

    Font-Size="Small">

    Jobs

  

  

    

      

      "http://schemas.microsoft.com/mobile/html32template">

        

          

        

      

    

  

  

  

    Font-Bold="True" Font-Size="Small" Runat="server">

    News Just In!

  

    ForeColor="#004040">

  Beagle 2, the European space probe to Mars that had

  been given up for dead after failing to send a signal

  from the planet's surface is alive after all!

  ...

  

  

Figure 5. This is a full listing for the Form that uses Content Templates to inject the HTML markup to place the Link controls in a line on a colored background.

 


Figure 6A. The Smartphone now displays menu options on a colored block. This version of the application also displays a graphic as a header (not described in the text), again using templates for per-device customization (the code for this full version is available for download).

 


Figure 6B. Despite the customizations, operation on the downlevel browser is unaffected.

 

I've shown you one useful technique for customizing the markup sent to the browser in mobile Web applications. Obviously, there's much more you can do, but space does not allow me to continue. The Form control has and elements that you can use inside a element in a similar way to the ; this is useful for opening a

at the top of each page and closing it at the bottom to format whole pages as tables. There are no images on this page at present, and using images judiciously always enhances your presentation. If you're a mobile Web developer, use the excellent DynamicImage control you can download from http://www.asp.net/ControlGallery/ControlDetail.aspx?Control=185&tabindex=2. It's not part of the standard product, but it's so good that Microsoft is including it as a standard control in the forthcoming ASP.NET 2.0! Don't get carried away with images though. Always remember that you're working with a browser running on low bandwidth data networks, so keep image content to a minimum. This way your page doesn't take too long to load.

 

The sample code in this article is available for download.

 

Andy Wigley is the author of Building ASP.NET Applications for Mobile Devices (Microsoft Press, 2003), and lead author of Microsoft .NET Compact Framework (Core Reference) (Microsoft Press, 2003). He is a principal technologist for Content Master Ltd., a technical content authoring and consulting firm based in the United Kingdom. He received Microsoft's Most Valuable Professional award for his work with the .NET Compact Framework.

 

 

 

Hide comments

Comments

  • Allowed HTML tags: <em> <strong> <blockquote> <br> <p>

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
Publish