2007 © beeweeb srl Mobile Web Toolkit Let's make outstanding mobile sites! _ April 2007 IP_MWT_Overview_070403v1.0

Beeweeb. Since four years Beeweeb has been developing carrier-grade mobile web solutions for the leading European Mobile Operators. Beeweeb solutions serve millions of mobile users. Tens of thousands paid contents are sold every day through beeweeb platforms. Anyway we feel that the mobile web is still in its infancy and for this market to grow up there’s a strong need to increase the number of good mobile web sites around and to port mobile web solutions to a wider user base. 2007 © beeweeb srl we work for

Since four years Beeweeb has been developing carrier-grade mobile web solutions for the leading European Mobile Operators.

Beeweeb solutions serve millions of mobile users.

Tens of thousands paid contents are sold every day through beeweeb platforms.

Anyway we feel that the mobile web is still in its infancy and for this market to grow up there’s a strong need to increase the number of good mobile web sites around and to port mobile web solutions to a wider user base.

Mobile dissatisfaction. The biggest sources of dissatisfaction for Mobile Web Users are: (according to the last report from the Online Publishers Association) Site Load Time Web Page Layout Site Navigation User Friendliness The Mobile Web Toolkit has been specifically designed to help you tracking and solving these issues. 2007 © beeweeb srl

The biggest sources of dissatisfaction for Mobile Web Users are: (according to the last report from the Online Publishers Association)

Site Load Time

Web Page Layout

Site Navigation

User Friendliness

The Mobile Web Toolkit has been specifically designed to help you tracking and solving these issues.

a FREE and OPEN SOURCE platform: enabling you to build outstanding Mobile Web sites (tip: get rid of the awful text only version, it will drive users away) supporting >500 handsets and mobile devices, dynamically adapting content, granting you full control of what and how to publish, helping you designing a unique Mobile User Experience, (tip: users on the move want something different) ...and most important: it’s easy, really easy to use. Mobile Web Toolkit. 2007 © beeweeb srl

a FREE and OPEN SOURCE platform:

enabling you to build outstanding Mobile Web sites (tip: get rid of the awful text only version, it will drive users away)

supporting >500 handsets and mobile devices,

dynamically adapting content,

granting you full control of what and how to publish,

helping you designing a unique Mobile User Experience, (tip: users on the move want something different)

...and most important: it’s easy, really easy to use.

Why? Most web sites provide a very poor Mobile user experience. (tip: it applies also to BIG web sites, go tell them!) Usually “mobile=text-only”. Often “mobile=nothing” That’s bad. Mobile devices are powerful, you have connectivity (3G, WIFI) and data fares are decreasing. There’s no reason for us not to enjoy cool mobile web sites! There’s no reason for you not to port Web2.0 services to the Mobile Web (tip: mobile web is the next big thing, don’t miss the opportunity) 2007 © beeweeb srl

Most web sites provide a very poor Mobile user experience. (tip: it applies also to BIG web sites, go tell them!)

Usually “mobile=text-only”. Often “mobile=nothing”

That’s bad.

Mobile devices are powerful, you have connectivity (3G, WIFI) and data fares are decreasing.

There’s no reason for us not to enjoy cool mobile web sites!

There’s no reason for you not to port Web2.0 services to the Mobile Web

(tip: mobile web is the next big thing, don’t miss the opportunity)

it’s so easy. 2007 © beeweeb srl Re-shape and Re-Mix your web site, (tip: stuff interesting for your mobile users need to come first) Chose your style and graphic layout, (tip: make it appealing, mobile web can be beautiful) The toolkit dynamically adapts it. YOUR favorite Content Management System (wordpress, joomla, mediawiki … db … plain text file) your outstanding Mobile Web Site Editorial Tool Content Adaptation Engine Mobile Web Toolkit

Re-shape and Re-Mix your web site, (tip: stuff interesting for your mobile users need to come first)

Chose your style and graphic layout, (tip: make it appealing, mobile web can be beautiful)

The toolkit dynamically adapts it.

Integration. We will NOT screw up your Content Management System 2007 © beeweeb srl Keep on using your favorite CMS for the web site The Mobile Web Toolkit will just stand next to it MWT can be easily extended to fetch content from different sources MWT first version is developed using PHP and MySQL.

We will NOT screw up your Content Management System

Keep on using your favorite CMS for the web site

The Mobile Web Toolkit will just stand next to it

MWT can be easily extended to fetch content from different sources

MWT first version is developed using PHP and MySQL.

Mobile web constrains. space Compared to a typical web page you have: less (but enough) space just use it better, the mobile web toolkit is your friend 2007 © beeweeb srl Define a parallel optimized site map Design your mobile pages with re-usable widgets for headers, menus, content, forms, advertising banners,... Paginate content but... ( tip: ...don’t under-estimate devices’ screen size, usually handsets have smaller fonts too) Configure lists’ style (tip: don’t reduce the items per page but provide a longer description only for the firsts)

Compared to a typical web page you have:

less (but enough) space

just use it better, the mobile web toolkit is your friend

Define a parallel optimized site map

Design your mobile pages with re-usable widgets for headers, menus, content, forms, advertising banners,...

Paginate content but... ( tip: ...don’t under-estimate devices’ screen size, usually handsets have smaller fonts too)

Configure lists’ style (tip: don’t reduce the items per page but provide a longer description only for the firsts)

Mobile web constrains. navigation your mobile page will be navigated using the: “ five keys” (up, down, left, right, ok) 2007 © beeweeb srl Links are automatically selected while you scroll the page (tip: highlight selected links in bright and consistent colors trough all your site) Moving your thumb up/down is easier than moving it left/right (tip: avoid more than one link per row and use a single-column layout) Avoid unnecessary links (tip: link only once to the same item, i.e. don’t link an image and its description) to make good designing easier MWT fully support style sheets and provide a column based editing tool OK

your mobile page will be navigated using the:

“ five keys” (up, down, left, right, ok)

Links are automatically selected while you scroll the page (tip: highlight selected links in bright and consistent colors trough all your site)

Moving your thumb up/down is easier than moving it left/right (tip: avoid more than one link per row and use a single-column layout)

Avoid unnecessary links (tip: link only once to the same item, i.e. don’t link an image and its description)

to make good designing easier

MWT fully support style sheets and provide a column based editing tool

MWT. Importance of the preview In these early days of the Mobile Web users need to get confident with Mobile Web sites 2007 © beeweeb srl let users preview it they will learn how to navigate through it, they will verify that your mobile site is as useful as your web one, they will like it because it will be nice looking and well organized and eventually they will access it from their Mobile Phone

In these early days of the Mobile Web

users need to get confident with Mobile Web sites

Rendered mobile site. screenshot Header 2007 © beeweeb srl Main Menu Advertising banner Last posts widget Last post in category News Links / Blogroll } Page Widgets

Header

MWT. Content adaptation To support devices with different screen width, MTW provides: device classes to restrict adaptation to a small and predictable subset of situations dynamic “width(x)” tag, automatically adjusted to the actual screen width (tip: you can specify also negative and percentage values that will be calculated according to the actual screen width; use it to have full control on tables, images, styles, div or css) “ <rescale></rescale>” tag to activate dynamic image rescaling (tip: specify a rescale width to control the final page layout) conditional rendering based on screen width (tip: don’t use it, usually you don’t need it) 2007 © beeweeb srl

To support devices with different screen width, MTW provides:

device classes to restrict adaptation to a small and predictable subset of situations

dynamic “width(x)” tag, automatically adjusted to the actual screen width (tip: you can specify also negative and percentage values that will be calculated according to the actual screen width; use it to have full control on tables, images, styles, div or css)

“ <rescale></rescale>” tag to activate dynamic image rescaling (tip: specify a rescale width to control the final page layout)

conditional rendering based on screen width (tip: don’t use it, usually you don’t need it)

MWT. Sample Widget Development Header <img src=“/img/logo.gif&quot; /> no width specified: images are automatically rescaled to maximum device screen size Post list <table> <tr> <td width=“20”> $post_number </td> <td width=“-20” > $post_title </td> </tr> <tr> <td width=“20”></td> <td width=“-20” > <rescale width=“-20”> $post_content </rescale> </td> </tr> </table> negative width is rendered as “screen_size - width”, “<rescale>” tag forces images to be rescaled to “screen_size - width” horizontal width, 2007 © beeweeb srl Header Logo 1 Title Content ScreenSize 20 ScreenSize - 20 Images

Header <img src=“/img/logo.gif&quot; /> no width specified: images are automatically rescaled to maximum device screen size

Post list <table> <tr> <td width=“20”> $post_number </td> <td width=“-20” > $post_title </td> </tr> <tr> <td width=“20”></td> <td width=“-20” > <rescale width=“-20”> $post_content </rescale> </td> </tr> </table> negative width is rendered as “screen_size - width”, “<rescale>” tag forces images to be rescaled to “screen_size - width” horizontal width,

Editorial Tool. screenshot 2007 © beeweeb srl

MWT. main features XHTML based rendering CSS support Device sub-classing Dynamic image rescaling Dynamic width adaptation Taglib based 2007 © beeweeb srl Full preview from the web Themes support Re-usable Widgets Support Completely configurable WYSIWYG editor 100% Web Administration Customizable display settings Full preview from the web Themes support Re-usable Widgets Support Completely configurable WYSIWYG editor 100% Web Administration Customizable display settings

XHTML based rendering

CSS support

Device sub-classing

Dynamic image rescaling

Dynamic width adaptation

Taglib based

Full preview from the web

Themes support

Re-usable Widgets Support

Completely configurable

WYSIWYG editor

100% Web Administration

Customizable display settings

Full preview from the web

Themes support

Re-usable Widgets Support

Completely configurable

WYSIWYG editor

100% Web Administration

Customizable display settings

Themes. customization 2007 © beeweeb srl Site map replicate web site-map add / clone / edit / remove mobile specific pages Page layouts choose widgets to display clone / add / remove widgets Widgets Access static or dynamic content from your favorite CMS Edit widget code from the embedded editor support for site-wide or page-specific options Styles set site-wide styles through configurable options edit styles via embedded editor

Site map

replicate web site-map

add / clone / edit / remove mobile specific pages

Page layouts

choose widgets to display

clone / add / remove widgets

Widgets

Access static or dynamic content from your favorite CMS

Edit widget code from the embedded editor

support for site-wide or page-specific options

Styles

set site-wide styles through configurable options

edit styles via embedded editor

Widgets. customization 2007 © beeweeb srl Configuration set widget options via standard input forms support for site-wide or page-specific options Content Support for dynamic content Access content in your favorite CMS Add / Edit static content with WYSIWYG editor Code A widget is plain PHP file Use straightforward XML to provide configurable options Edit widget code from the embedded editor

Configuration

set widget options via standard input forms

support for site-wide or page-specific options

Content

Support for dynamic content

Access content in your favorite CMS

Add / Edit static content with WYSIWYG editor

Code

A widget is plain PHP file

Use straightforward XML to provide configurable options

Edit widget code from the embedded editor

MWT. Release Plan We need your feedback! 2007 © beeweeb srl install it and get mobile-ready The first beta version has been released as a WordPress plug-in, so, there’s nothing to integrate with, just install and give it a try! The CMS-independent version will be released June 1 st 2007, but we want to hear from you, we are ready to natively support other CMSs (tip: post your wish list in the mobile web toolkit forum)

We need your feedback!

MWT. Licensing and Support Mobile Web Toolkit is released by Beeweeb under the EUPL v1.0 2007 © beeweeb srl free and open source Enjoy, modify and share it for commercial and non-commercial use Support will be granted through our public support forum. Commercial licenses are available for customer specific needs, for extensions, upgrades and dedicated support services.

Mobile Web Toolkit is released by Beeweeb under the EUPL v1.0

Commercial licenses are available for customer specific needs, for extensions, upgrades and dedicated support services.

Comparisons and vision. Let me quote James Pearce of dotMobi (the new .mobi TLD): “ ...Well, as you know, the .mobi extension is partly about ensuring that the user is going to have a satisfactory experience when they access a site with a mobile handset...” this well represents the usual approach of companies developing mobile solutions, we think differently 2007 © beeweeb srl we do have competitors but… satisfactory is not enough we want you to provide an outstanding mobile web experience

Let me quote James Pearce of dotMobi (the new .mobi TLD):

“ ...Well, as you know, the .mobi extension is partly about ensuring that the user is going to have a satisfactory experience when they access a site with a mobile handset...”

this well represents the usual approach of companies developing mobile solutions,

we think differently

To recap. Distinguishing features of the Mobile Web Toolkit Focus on granting a Rich and Compelling Mobile Web Experience (tip: never relay on mobile browser to be standard-compliant, they are not) CMS-independent Full preview without using emulators (by the way, if you need an emulator you have not done a very good adaptation work...) Easy to modify, extend, integrate Comprehensive but really easy to use 2007 © beeweeb srl

Distinguishing features of the Mobile Web Toolkit

Focus on granting a Rich and Compelling Mobile Web Experience (tip: never relay on mobile browser to be standard-compliant, they are not)

CMS-independent

Full preview without using emulators (by the way, if you need an emulator you have not done a very good adaptation work...)

Easy to modify, extend, integrate

Comprehensive but really easy to use

Contacts. 2007 © beeweeb srl thank you! more info on www.beeweeb.com (last tip: use your mobile phone and give a look at http://m.beeweeb.com) you can contact me at g.recco@beeweeb.com