Over a million developers have joined DZone.

Mobile Website Development With Netbiscuits


While mobile Internet is a prime growth market of the future, the medium is not as simple as it looks. In contrast to web developments for PCs, developers using the mobile channel are confronted by a virtually limitless number of hardware and software platforms. This fragmentation might encourage some to limit their projects to specific platforms and end devices. The browser technology used by many older cell phones often appears to be the only way of realizing client applications that have the same performance and design standards as the PC web. In addition, application stores, such as the one operated by iPhone, represent a promising distribution channel for marketing client apps.

All the more surprising then that Vic Gundotra, Google’s “developer evangelist”, stated in July at the MobileBeat conference in San Francisco that app stores were not the future of the mobile Internet. The announcement even made it into the “Financial Times”. Not even Google, said Gundotra, was rich enough to support the myriad of mobile platforms – which includes Apple, BlackBerry, Windows Mobile and Android, not to mention the host of Nokia variations. Better browsers, he said, meant that it was possible to deliver sophisticated mobile applications directly via the net. Economic reasons, above all, could turn the browser into the platform of the future for mobile applications.

But even new browsers cannot entirely solve the fragmentation problem of hardware and software platforms in the mobile channel. In order to develop one application for all end devices, a technology platform will still be required in future, which can adapt mobile websites automatically to the specific form factors and software environments of as many of the world’s mobile end devices as possible.

Netbiscuits, which has branches in the USA, Germany and Singapore, has pledged to produce just such a platform. The company realizes mobile websites for customers such as eBay, “Bild”, Sixt and “Spiegel”. It also lets external developers access its technology platform via the Internet. Besides an extensive end-device database compiled by the company and powerful conversion technologies, its in-house markup language “BiscuitML” and corresponding “Biscuits” are simply put together to form mobile websites.

BiscuitML allows automatic changes to be made to the target format of the enquiring mobile end device. Biscuits are standardized dynamic user interface units that can be configured individually. There are Biscuits for generating headers, footers and navigation elements, for various content elements such as RSS feeds, lists, tables, articles and images, and for functions such as click-to-call, searches, forms, downloads and video and audio streaming, integration of Google Maps and POI finders, and for implementing autonomous functions (“conditions”). A Biscuit is also available for integrating advertising content within text and images.
Developers can take one of two paths when applying Netbiscuits. First, the online platform features a site builder for realizing mobile websites quickly and easily and placing them online immediately. Besides these “standard hosted applications”, Netbiscuits also supports “custom API applications”, which are primarily suitable for implementing complex integrated mobile websites. Developers are provided with direct access to the code, enabling them to host their mobile applications on their own servers and link them to any number of external applications such as content management systems, user databases, ad servers and online tracking services. For additional development convenience, Netbiscuits SDKs can be downloaded for various development environments (IDE).



Netbiscuits Custom API App scheme

Netbiscuits .NET Controls SDK

The IDE plugin for Visual Studio 2005 and 2008 allows the development of custom API applications using the familiar environment of ASP .NET. It provides project templates for programming in Visual C# and Visual Basic, as well as templates for master and content pages, and a broad range of controls.

The main difference to an ASP .NET web project is that output is in BiscuitML rather than HTML. As a result, all ASPX pages are derived from the BiscuitBasePage or BiscuitMasterPage base classes, which define the document type and the framework for the Netbiscuits controls. With the BaseUserControl class, proprietary components can be integrated in the pages.

In contrast to an ASP .NET WebForm, there is no ViewState mechanism and, therefore, no event-linked controls such as Button OnClick. The reason for this lies in the different page structure. In the HTML output of a WebForm, ViewState is embedded and linked to the Postback concept. This, however, does not work on a mobile page, although this is the only limitation when compared to a web project. Otherwise, all familiar ASP .NET concepts can be applied, such as sitemap, themes, data binding, localization, master pages and code-behind programming.

Naturally, all types of external data can be integrated also, no matter whether the content comes from a database, a CMS or a web service. The only rule to be noted is that content must be in a BiscuitML-compliant format. For example, text is formatted in BBCode rather than HTML.

Examples of BBCode:

  • [b]Bold text[/b] -> Bold text
  • [i]Italic text[/i] -> Italic text
  • [u]Underlined text[/u] -> Underlined text

Although the Visual Studio Debugger provides a familiar development environment, it is best to display the backend URL of the Netbiscuits Custom API application in its own development environment, since the output format is BiscuitML. After starting the debug session, the application is opened in a web browser via the frontend URL and work can begin. In principle, this uses the same system architecture used later to run the application, with the sole difference being that the productive system is not accessed. Remote debugging can be used if the computer is not connected to the Internet. An integrated HTML preview and document validation is planned for later versions of the Netbiscuits .NET SDK.

Structure of a Netbiscuits ASPX Page

The Netbiscuits .NET Controls SDK installs a toolbox in Visual Studio, which can be used to drag and drop controls to the draft or source editor. The page components, the so-called “Biscuits”, have controls with the same name. A host of controls are also available for managing the layout, design and page hierarchy, most of which have counterparts in BiscuitML.

A Netbiscuits ASP .NET page consists almost exclusively of Netbiscuits controls. The ASP .NET controls used include Repeater and ContentPlaceHolder for master pages.  At the master level, the controls are used to structure and configure the page appearance (BiscuitStyles and CssClass) and create links to external resources. Containers and controls for page breaks are also included.

Example of page level controls:

<rb:BiscuitStyles ID="BiscuitStyles1" runat="server" 
BGColor="White" Color="Black" />
<rb:Container ID="Header" runat="server">
<rb:PageEndHeader runat="server" />
<rb:Container ID="Content" runat="server">
<rb:PageBeginFooter runat="server" />
<rb:Container ID="Footer" runat="server">

A typical layout divides the page up into header, content and footer zones. The Biscuits controls are placed within the container, which may consist of one- or two-column layouts. Headers and footers often contain navigation controls, while the content area contains tables, forms and text. The separation of these areas into master and content pages is very useful for larger sites.

Controls can of course be programmed from scratch too. At the topmost level, this is completed using the controls property of the page class. Within the container, the easiest way to add controls is via a placeholder, which is referenced via the container’s FindControl method.

Example of control coding:

PlaceHolder ph = (PlaceHolder)Content.FindControl("PlaceHolder1");
Text txt = new Text("ein text biscuit");

Design and Layout

The Biscuits are designed using style attributes based on familiar CSS styles and defined using the Biscuits control properties. The general style properties are implemented in the BaseBiscuit class. Special styles, such as ActiveColor for TabbedMenu, only exist within the corresponding controls. The properties window in Visual Studio provides a clear overview of the styles that are available for a specific control. These can be found in the categories that end with “Styles”.

All style properties can also be set in the skin files within an ASP .NET theme. Assigning a SkinID produces several variations for specific controls, which is especially helpful during complex projects. This mechanism also works for programmed controls. Styles are defined in the skin and not the source code, which is difficult to maintain. Another advantage of themes is the short time it takes to design them from scratch. A new theme simply needs to be defined and adapted, which means alternative designs can be applied to the same site.


For sites designed for several languages, global and local resource files with text fragments can be stored in the same way as for an ASP .NET website. The Netbiscuits platform also supports extended character sets such as Chinese, Japanese and Arabic.



eBay mobile portal in German und English


The Netbiscuits .Net Controls SDK can be used to create complex mobile Internet applications, which can be optimized automatically for just about any mobile end device, quickly and easily.

A free 30-day trial account can be created at www.netbiscuits.com, which provides access to all platform functions. After that, those users who do not wish to invest in one of the three Netbiscuits Premium Accounts, can create a free Developer Account that can be used to access all of the technology platform’s basic functions and includes 1,000 mobile page visits per month.



The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}