mobile web | Hub Tech Insider

How to optimize your web based software application for the mobile web August 7, 2011

Posted by HubTechInsider in Mobile Software Applications, Product Management, Project Management.
Tags: Android (operating system), Apple, Cascading Style Sheets, ecommerce, Internet Explorer, iOS, iPad, iPhone, Mobile application development, Mobile Applications, Mobile Computing, mobile web, Software Development, Software Engineering, Style Sheets, Web application
1 comment so far

Image representing iPhone as depicted in Crunc...

Image via CrunchBase

The mobile web is where the action is in 2011. We have all seen the polls and the statistics: people are spending more and more time accessing the web through their mobile smartphones and mobile tablet computers. The mobile Web grew 110 percent in the U.S. last year and 148 percent worldwide as measured by growth in pageviews.

Including devices such as the Kindle, the iPhone and other smartphones, web-enabled tablets, GPS systems, video games and wireless home appliances, the growth of the mobile web has been exponential — and we’re still just at the beginning of this cycle. Morgan Stanley’s analysts believe that, based on the current rate of change and adoption, the mobile web will be bigger than desktop Internet use by 2015. The proliferation of better devices and the availability of better data coverage are two trends driving growth; having better services and smaller, cheaper devices has led to a huge explosion in mobile technology that far outpaces the growth of any other computing cycle.

Global 3G penetration is expected to hit 21% this year. In Japan, where the U.S. looks to find its mobile roadmap for the future, 96% of mobile subscribers already have 3G coverage. In Western Europe, the penetration is around 54%, just slightly above 46% in the U.S. In developing and/or economically depressed areas, including the Middle East, Africa, parts of Asia, Eastern Europe and South America, 3G penetration is still in the single digits. 3G access is a key point in the success of the mobile web, providing very usable surfing speeds for mobile web usage.

In addition, mobile e-commerce is ramping up faster than online e-commerce, now making up 4% of total retail sales. In certain categories, such as computers, consumer electronics, music, movies, tickets, video games and books, online sales account for between 45% and 20% of the total retail market. Japan’s Rakuten shows how the mobile share of e-commerce is growing as well, from 10% of e-commerce in 2006 to nearly 20% now.

Video now accounts for 69% of mobile data traffic, and the overlap between mobile users and social web users continues to grow; more and more users are accessing the social web from a mobile device. Real-time technology and location-based services are expected to drive mobile retail, and a very interesting fact is that the average iPhone user only spends 45% of his on-device time making voice calls.

Some more mobile web usage statistics and facts:

More people have mobile phones than Internet-connected PCs (4 billion)
SMS penetration ~50% and fully mainstream (82% of users <24 y.o.)
82 million Americans can recall seeing advertising on their phone over last 3 mos. (approx. 30% of 270m adult phone users)
25% of phone users (65 mm) are accessing the mobile web but 80% of iPhone users are
40% of Twitter users use the Internet on their phones (76% if you include WiFi) (Pew)
Internet Advertising Bureau survey found that 62 percent of agencies, media planners and advertisers believe mobile ad spending will continue to grow and emerge in marketing budgets
Mobile device is increasingly becoming small, portable PC experience with an Internet browser experience similar to that of 2000/2001 (just diff’t form factor)
In 2007, eMarketer reports that US advertisers spent $900 million on mobile, and double in 2008 to $1.7 billion
21 million iPhones + ~20 million iPod Touches = 40-45million iPod-like devices
50,000 apps from iTunes App Store and Nokia, RIM, MSFT and others now w app stores; 1 billion+ app downloads to date
70% of people sleep with their mobile phones (Zumobi)
More than 60 million mobile views per month for New York Times; one of 4 apps pre-loaded on the Palm Pre
Joseph Porus of Harris Interactive: “”Mobility could be recession-proof and be one of the strongest ways of effectively marketing in tough economic times”
35% of mobile advertising campaigns cost less than $10,000 (Forrester)

Mobile Device Product Categories & Feature Sets

There are four primary mobile device product categories in widespread use today, and each of these four mobile device product categories is typically configured by the device manufacturers with a certain base set of features and functionality. The four mobile device product categories, listed with their typical bandwidth usage per month, are:

Feature Phones: Feature Phones such as the Motorola Razr are used primarily to make calls, and they consume little bandwidth even for web activities because they have stripped-down web browsers. Feature phones and their users tend to consume around 100 Megabytes of data downloads a month, using 4 MB of voice calls an hour, and 4 to 5 MB of web browsing per hour.
Smartphones: Smartphones such as Research in Motion’s popular Blackberry are used for phone calls, email, and light web browsing. Smartphones and their users tend to consume around 185 Megabytes of total monthly data downloads, utilizing 4 MB per hour for voice calls, and 4 to 5 MB of web browsing.
Superphones: Superphones are advanced smartphones, including Apple’s iPhone and Motorola’s Droid, that make it easy for people to surf the web and watch online videos, leading to much higher bandwidth use. Superphones and their users tend to consume around 560 Megabytes of total monthly data downloads, using 4 MB per hour for voice calls, 40 MB per hour for web browsing, 60 MB per hour for internet radio, and 200 MB per hour for YouTube videos.
Tablet Computers: Tablet computers such as Apple’s newly unveiled iPad are likely to send data use even higher. The iPad will chew up even more bandwidth than the iPhone because of its larger screen. Tablet computer and iPad users tend to consume 800 to 1,000 Megabytes of total monthly data downloads, using 50 to 60 MB per hour for web browsing, 60 MB per hour for internet radio, and 300 to 400 MB per hour for YouTube videos.

If your web based application or site is not optimized for the mobile web, you are falling behind and losing out on transaction revenue, sales, data, customers: you name it.

There are many methods and techniques that can be used to optimize your web based application or site for the mobile web. In this article I will describe how I optimized a commercial b2c ecommerce application for the mobile web, and then I will go into more details as to how you can use the same techniques I used on the http://www.tshirtnow.net mobile site and also how you can use different techniques to optimize your own web-based mobile application or site.

For the tshirtnow.net mobile site, I utilized a technique to present a mobile-optimized version of the tshirtnow.net web site to mobile browser users such as those surfing the web site on an iPhone, iPad, or Android mobile phone, and the regular version of the tshirtnow.net web site to users who were accessing the web-based b2c tshirtnow.net ecommerce application from regular web browsers on a desktop or laptop computer with a browser like Google Chrome or Microsoft Internet Explorer.

But using a special CSS stylesheet that is optimized for mobile browsers, along with the reglar tshirtnow.net CSS stylesheet, we are able to automatically detect what type of mobile browser platform the user is currently accessing the tshirtnow.net web site with. Using the CSS information contained in the tshirtnow.net mobile cascading style sheet (CSS), we are able to render the exact same html content which represents the different pages on the site such as product detail pages, order status pages, and the home page with different formating and styles, and even content sections, all just by using CSS.

The advantages of this technique are rather obvious. First of all, there is no need to recreate dozens or even hundreds of static html content pages, as the exact same content and pages can be cleverly re-purposed simply by providing for planned degradation of the user’s web experience according to what type of mobile device and mobile browser platform they are currently using.

Secondly, the use of CSS to provide a mobile optimized experience allows for the use of special CSS tags and techniques which can provide iPhone and iPad iOS orientation (landscape or portrait) and touch detection, intelligent web page scaling, special mobile OS (iPhone, iPad iOS or Android, Blackberry, HP WebOS) controls and rich media player capabilities, and phone/web integrated telephony. I will go into much more detail about some of these advanced CSS capabilities and I will provide more information about them as well as links to more resources on the web later in this article.

I encourage readers of this article who have not already done so, to read my previous article, a Glossary of mobile Web Terminology, for references to some of the terms I will use throughout this article. Knowing mobile web terminology will also assist you in creating wireframes and mockups for mobile web applications, and will be a great boon to your mobile application software specifications as well.

The tshirtnow.net mobile web site

For tshirtnow.net, I utilized a mobile optimized CSS style sheet. It detects which type of browser platofrm the user is accessing the tshirtnow.net web site with, and then serves that user either the regular tshirtnow.net home page, or the mobile optimized tshirtnow.net home page. Here is what most users see when they access the tshirtnow.net web site with a normal desktop computer browser:

And here is what a user accessing the same tshirtnow.net home page using mobile safari on an Apple iPhone would see:

The mobile version of the tshirtnow.net home page, as seen on an Apple iPhone (iOS)

As you can see, iPhone users see a gently degraded web page, which contains many of the most important, but not nearly all, of the controls, links, graphics and content of the normal tshirtnow.net home page. This mobile-specific version of the exact same web page is presented to the user not though the use of another web page, but simply through the use of the mobile-optimized style sheet.

Here is another example of how the tshirtnow.net b2c ecommerce web application is able to detect a mobile browser user and serve up content optimized for mobile from the exact same html page. Here is what the order status page looks like to a user accessing the tshirtnow.net web site from a regular desktop computer browser like Microsoft Internet Explorer or Mozilla Firefox:

And here is what a user accessing the same tshirtnow.net order status page using mobile safari on an Apple iPhone would see:

The mobile version of the tshirtnow.net order status page (iOS)

You can see that not only has the check order status button been dynamically resized in order to accomodate the smaller screen width of the iPhone mobile safari browser, but also that the hairline css curved corners border around the order number and email address input form fields has been resized too. All of this dynamic width modification, including the button graphic itself, which is rendered using standards-based css, happens on the fly from one set of html pages.

If you perform platform-specific css coding into your mobile stylesheet, which I will demonstrate how to do later in this article, then you can take advantage of such features as iOS iPad and iPhone orientation detection and dynamic adjustment, touch interface enhancements, and CTI, or Computer Telephony Integration features like click-to-call:

iOS platform-specific controls like this iPhone selection dial are supported natively through CSS

A typical b2b or b2c web-based ecommerce application that provides content pages that are driven by databases and displaying and presenting the results of database queries can produce thousands of individual web pages. To provide a mobile-optimized version of each of these pages is a prohibitively expensive and time-consuming endeavor that is beyond the performance envelope of most software development organizations.

The skillset needed to perform heavy CSS manipulations and platform-specific mobile optimizations may not be present on your current software development team. J2ee and other types of system and application software programmers may not have the requisite ability to manipulate and create a mobile optimized CSS stylesheet, and the necessary experience required to effectively develop and test platform-specific and progressively enhanced mobile CSS may not be present on your current team.

By utilizing a mobile CSS stylesheet to render the same content pages, you have provided a way to render those thousands of dynamic, database-driven web pages on the fly, and ready for your mobile web users. For example, here is one of the many thousands of product detail pages on the tshirtnow.net ecommerce site, as it would appear to a normal desktop web browser:

And here is what a user accessing the same srv tshirt product detail page using mobile safari on an Apple iPhone would see:

A mobile version of a tshirtnow.net tshirt product page (iOS)

You can see that the mobile version of the tshirtnow.net product detail page contains less content, and the content that is displayed on the mobile version of the product detail page is in a different location than the content on the regular, desktop browser version of the tshirtnow.net product detail page. All of this is performed not through HTML manipulations or server side includes, but is instead accomplished exclusively through the use of CSS.

Product detail page features such as tags are specially presented on Apple iPhone iOS through CSS

Because of this use of CSS to render mobile versions of the same html content pages, all scenarios have been accounted for, opening up the entire tshirtnow.net web site, all products, all static html content pages, all dynamic interaction controls such as search engines and results pages, are made available to mobile web browsers using this technique.

If instead the decision had been made to create unique, static html pages for mobile browsers, then a detection mechanism such as WURL or user-agent string detection would have had to have been employed in order to serve up unique html pages. The program to create many thousands of unique pages for all of the major functions, plus a unique mobile template for all of the product detail pages, would have been extremely cost and resource intensive.

Tips for Handheld CSS Style Sheets

Handheld media stylesheets should be as small and compact as possible because of download time.

What can you do to simplify your site and make it more usable in mobiles? First, eliminate some of these problematic items from mobile display.

Eliminate floats and frames
Eliminate columns – one column with the content first is the best option
Eliminate scripted effects such as popups or pop out menus in favor of plain old HTML and simple text menus
Eliminate decorative images that slow down the loading process. Use display:none to remove anything that isn’t absolutely necessary, such as links to external resources. Remember, however, that devices that don’t understand CSS won’t do anything withdisplay: none. Any essential images need to be reworked for the small screen and the width and height attributes need to be included in the HTML.
Eliminate nested tables and layout tables. If you have tabular data, consider finding a way to present it in a linearized alternate display.

Once you’ve simplified through elimination, start building the rules you need to add. Consider these ideas.

If you’re not already using relative measures, switch to ems or percentages rather than pixels
Reduce margins, paddings and borders to suit the small screen
Use smaller font sizes for headings and paragraph text
If you have a long navigation list at the start of the page, add a skip to main content link, or move the links to the end of document flow. Keep the number of clicks required to get to content as minimal as humanly possible. Without a mouse or keyboard, most mobile users have to click laboriously through any top navigation.
Make sure your color combinations provide good contrast between foreground and background colors, particularly for devices with fewer color options.

Sample Handheld CSS Stylesheet

/* mobile styles */


@media handheld {
html, body {
         font: 12px/15px sans-serif;
         background: #fff;
         padding: 3px;
         color: #000;
         margin: 0;
         }
#sidebar, #footer {
         display: none;
         }
h1, h2, h3, h4, h5, h6 {
         font-weight: normal;
         }
#content img {
         max-width: 250px;
         }
.center {
         width: 100%; !important;
         text-align: center;
         }
a:link, a:visited {
         text-decoration: underline;
         color: #0000CC;
         }
a:hover, a:active {
         text-decoration: underline;
         color: #660066;
         }
}
/* iPhone-specific styles */
@media only screen and (max-device-width: 480px) {
html {
-webkit-text-size-adjust: none;
}

}

Resources for testing your mobile applications

As with any other type of Web design, testing is a big part of the process. However, testing websites for mobile devices brings additional challenges, and fortunately, there are some tools available that were created especially for these purposes:

Opera Mini Browser Simulator

http://www.opera.com/mobile/demo/

The Opera Web browser comes with a feature that is of use to QA – the Opera Small Screen Renderer.

This tool can be used to test any Web page and see how it will look in a tiny window like on a cell phone. To use it:

Download the latest version of Opera.

Go to the page you want to test.
Hit Shift-F11.
The screen will switch to a narrow version of the page.
When you’re done testing, hit Shift-F11 to toggle back to normal view.

Apple iPhone Safari Debugging and Testing Tips & Instructions:

http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/DebuggingSafarioniPhoneContent/DebuggingSafarioniPhoneContent.html#//apple_ref/doc/uid/TP40006515-SW1

W3C mobileOK Checker:

http://validator.w3.org/mobile/

ready.mobi mobile site automated checker & reporting tool:

Ready.mobi

Blackberry Device Simulators:

http://na.blackberry.com/eng/developers/resources/simulators.jsp

Nokia Mobile Phone Simulator:

http://mtld.mobi/emulator.php?emulator=nokiaN70&webaddress=mtld.mobi

OpenWave Phone Simulator:

http://developer.openwave.com/dvl/tools_and_sdk/phone_simulator/

iPhoney iPhone Simulator for OS X:

http://www.marketcircle.com/iphoney/

How to setup desktop Safari on Windows and OS X to emulate iPad and iPhone:

http://developer.apple.com/safari/library/technotes/tn2010/tn2262.html

Mobile Phone Web-based Emulator:

http://emulator.mtld.mobi/emulator.php?emulator=sonyK750&webaddress=stepforth.mobi

BrowserCam Cross-Browser Device Screen Captures:

(Instantly see mobile pages in any browser on device operating systems)

http://www.browsercam.com/Default2.aspx

W3C Mobile Test Harness:

http://www.w3.org/2007/03/mth/harness

Cameron Moll’s Mobile HTML & CSS Styling Test Pages:

http://cameronmoll.com/articles/mobile/mkp/

Patrick Griffith’s Handheld Media Test Page (Test to see if handheld device interprets media=”handheld”):

http://htmldog.com/test/handheld.html

Good, General Mobile Web Testing Resources Available Here:

http://carsonified.com/blog/mobile/make-your-site-mobile-friendly/

Apple iPhone / iPad / iOS Resources

Apple iPhone Developer Center:

http://developer.apple.com/iphone/index.action

iUI Interface Library / Framework Documentation:

http://code.google.com/p/iui/

http://www.k10design.net/articles/iui/

iPhone Web HTML Application Home Screen Icons, Viewport Adjustments:

http://www.hanselman.com/blog/MakeYourWebsiteMobileAndIPhoneFriendlyAddHomeScreenIPhoneIconsAndAdjustTheViewPort.aspx

Touch Interface Detection:

http://stackoverflow.com/questions/2607248/optimize-website-for-touch-devices

iPad Orientation Detection CSS:

http://catharsis.tumblr.com/post/501657271/ipad-orientation-css-revised

http://www.cloudfour.com/ipad-orientation-css/

http://www.cloudfour.com/ipad-css/

Preparing Your Web Content for iPad:

http://developer.apple.com/safari/library/technotes/tn2010/tn2262.html

iPad CSS How To:

http://thomasmaier.me/2010/03/howto-css-for-the-ipad/

Building an iPhone App using jQTouch & PhoneGap, without Objective-C:

http://net.tutsplus.com/tutorials/html-css-techniques/the-easiest-way-to-build-your-first-iphone-app/

http://radar.oreilly.com/2010/01/ipad-opportunities-for-web-dev.html

http://oreilly.com/catalog/9780596805784/

Blackberry Developer Zone:

http://na.blackberry.com/eng/developers/

Blackberry Browsers Stylesheet and CSS Support Information:

http://docs.blackberry.com/en/developers/deliverables/11844/Feature_CSS_512751_11.jsp

How to target the Blackberry browser:

http://stackoverflow.com/questions/913040/how-to-target-the-blackberry-browser

Blackberry Device Simulators:

http://na.blackberry.com/eng/developers/resources/simulators.jsp

RIM Blackberry Developers Reference Guide: Blackberry Browser HTML, CSS and JS Information:

http://docs.blackberry.com/en/developers/subcategories/?userType=21&category=BlackBerry%20Browser

RIM Blackberry Browser CSS Reference Guide:

http://docs.blackberry.com/en/developers/deliverables/5683/CSS_Reference.pdf

RIM Blackberry Browser Content Design Guidelines:

http://docs.blackberry.com/en/developers/deliverables/4305/BlackBerry_Browser-4.6.0-US.pdf

In the BlackBerry Documentation for Developers, there is a documentation for the BlackBerry Browser, including CSS Reference – BlackBerry Browser. There is no specific mention of CSS3, but that document lists supported CSS properties.

There is also a BlackBerry Widget web standards support page that states 4.7.1 and 5.0 have partial support for CSS 3 color and full support for CSS 3 marquee, CSS 3 media queries, CSS 3 namespaces and CSS 3 selectors.

Opera Mini 5 Optimization:

http://dev.opera.com/articles/view/opera-mini-5-beta-developers/#optimizing

Opera Mini Browser-based Simulator:

http://www.opera.com/mobile/demo/

How to serve the right content to mobile browsers:

http://dev.opera.com/articles/view/how-to-serve-the-right-content-to-mobile/

W3C CCS3 Media Queries Specification:

http://www.w3.org/TR/css3-mediaqueries/

Mobile Device Support through JavaScript & CCS Media Queries:

http://floggingenglish.com/2009/06/18/mobile-device-support-through-javascript-and-css/

Safe Cross-Platform, Cross-Device Media Queries:

http://dev.opera.com/articles/view/safe-media-queries/

HTML & CSS For Mobiles:

http://www.htmldog.com/ptg/archives/000055.php

Mobile CSS is a reality:

http://www.htmldog.com/ptg/archives/000056.php

CSS Discuss: Handheld Style Sheets:

http://css-discuss.incutio.com/wiki/Handheld_Stylesheets

Mobile Style Guides:

http://patterns.design4mobile.com/index.php/Mobile_Style_Guides_-_Screen_Design,_Part_1

You can try acid3.acidtests.org and http://www.css3.info/selectors-test/test.html on the respective browsers to check some compatibility, but that may not be an exact determining factor of full compatibility. However I don’t think any of the mobile browsers currently fully support CSS3.

—————————-

Both iPhone and Android systems use WebKit as the rendering engine in their mobile browsers. I believe Blackberry are moving to Webkit as well at some point. This engine has some of the best support for parts of CSS 3 available at the moment, as well as quite a lot of proprietary extensions.

I would recommend researching what is available in WebKit, and then testing.

A great resource for support tables is http://www.quirksmode.org where PPK is doing more and more mobile browser testing to answer just these kind of questions.

http://www.russellbeattie.com/blog/css3-and-the-death-of-handheld-stylesheets

An Introduction to the Mobile Web:

http://dev.opera.com/articles/view/introduction-to-the-mobile-web/

The Mobile Phone Directory – Phone Specifications, Glossary of Terms:

http://www.mobile-phone-directory.org/

Mobile Web Glossary from the BBC:

http://www.bbc.co.uk/mobile/web/glossary.shtml?d

WURFL — Wireless Universal Resource File — (SourceForge):

http://wurfl.sourceforge.net/

WURFL API Intro:

http://wurfl.sourceforge.net/newapi/

WURFL Java API:

http://wurfl.sourceforge.net/njava/

Wikipedia Entry – Microbrowser:

http://en.wikipedia.org/wiki/Microbrowser

Wikipedia Entry – Mobile Phone:

http://en.wikipedia.org/wiki/Mobile_phone

Cameron Moll’s Mobile Web Design Series:

Part 1: http://www.cameronmoll.com/archives/000415.html

Part 2: http://www.cameronmoll.com/archives/000428.html

Part 3: http://www.cameronmoll.com/archives/000577.html

Making Small Devices Look Great:

http://dev.opera.com/articles/view/making-small-devices-look-great/

The Pros and Cons of Developing a Mobile Version of Your Website:

http://www.dirjournal.com/articles/mobile-search-the-pro-and-cons-of-developing-a-mobile-version-of-your-website/

Bulletproof Mobile Device Detection:

http://www.bushidodesigns.net/blog/mobile-device-detection-css-without-user-agent/

A List Apart: “Return of the Handheld Stylesheet”:

http://www.alistapart.com/articles/return-of-the-mobile-stylesheet

A List Apart: “Put Your Content in My Pocket” (iPhone information):

http://www.alistapart.com/articles/putyourcontentinmypocket/

A List Apart: “Understanding Progressive Enhancement”:

http://www.alistapart.com/articles/understandingprogressiveenhancement/

Progressive Enhancement for Mobile Media Queries:

http://www.iheni.com/progressive-enhancement-for-mobile-media-queries/

Server-Side Scripting for Bulk Mobile Site Page Re-engineering:

http://www.mikeindustries.com/blog/archive/2005/07/make-your-site-mobile-friendly

Mobile Browser / Mobile Web Usage Statistics

http://gs.statcounter.com/#mobile_browser-ww-monthly-200903-201004

http://www.upsdell.com/BrowserNews/stat_trends.htm

http://www.webdevelopersnotes.com/articles/mobile-web-browser-usage-statistics.php

http://developer.apple.com/safari/library/technotes/tn2010/tn2262.html

http://johannburkard.de/blog/www/mobile/mobile-browser-statistics-webkit-on-the-rise-opera-losing-share.html

http://moconews.net/article/419-the-top-mobile-browsers-are-not-what-you-think/

A Simple Introduction To HTML5 (regulargeek.com)
A non-Safari iPad? (telegraph.co.uk)
jQuery Mobile doubts (sunpig.com)
“Opera Mini 6 Lands on the iPad and the iPhone” and related posts (techie-buzz.com)
The Most Important Parts of HTML5 (n01se.net)
13 Helpful Mobile Web Design Tools & Resources (thenextweb.com)

Want to know more?

You’re reading Boston’s Hub Tech Insider, a blog stuffed with years of articles about Boston technology startups and venture capital-backed companies, software development, Agile project management, managing software teams, designing web-based business applications, running successful software development projects, ecommerce and telecommunications.

About the author.

I’m Paul Seibert, Editor of Boston’s Hub Tech Insider, a Boston focused technology blog. I have been working in the software engineering and ecommerce industries for over fifteen years. My interests include computers, electronics, robotics and programmable microcontrollers, and I am an avid outdoorsman and guitar player. You can connect with me on LinkedIn, follow me on Twitter, follow me on Quora, even friend me on Facebook if you’re cool. I own and am trying to sell a dual-zoned, residential & commercial Office Building in Natick, MA. I have a background in entrepreneurship, ecommerce, telecommunications and software development, I’m a Technical PMO Director, I’m a serial entrepreneur and the co-founder of several ecommerce and web-based software startups, the latest of which are Twitterminers.com and Tshirtnow.net.

What is NFC? What is the smartphone mobile payments technology known as Near Field Communications? March 6, 2011

Posted by HubTechInsider in Ecommerce, Mobile Software Applications, Telecommunications, Wireless Applications.
Tags: Apple, cellular, ecommerce, Google, iPhone, MasterCard, mFoundry, Mobile Applications, Mobile Computing, Mobile phone, mobile software, mobile web, Near Field Communication, near field communications, NFC, PayPal, Telecommunications, Telephone
add a comment

Image via Wikipedia

It has been several years now that I have been reading and hearing about mobile phone toting consumers being able to purchase soft drinks from vending machines through the use of SMS texts to the vending machine.

The possibilities of a mobile digital wallet, a North American equivalent of European Smartcards and mobile SMS payments systems, to be used as a payments service for smartphones, certainly include the hypothetical future displacement of the cash register as the payment method of choice for consumers on the go.

NFC, or Near Field Communication, may perhaps have such a potential.

Since the middle of December, in and around Portland, Oregon, Google has been handing out hundreds of NFC kits to local businesses as part of an NFC trial they are calling “Hotpot”.

The Google Hotpot kits include special NFC-capable window decals. NFC is a low power technology that beams and receives wireless information from up to four inches away. When consumers with NFC-equipped telephones such as the latest models of Android operating system cellular phones, scan a NFC-equiped window decal, they will be presented with information on their mobile device such as business hours, reviews, and more.

The hope is that the increasingly mobile consumer will willingly engage with local merchants using this new technology, allowing merchants to interact with the generations of consumers growing up with texting and mobile smartphones in their pockets.

2011 is really shaping up to be the year of NFC, with Google considering building an NFC-based payment service in the U.S. that could make its debut later this year. The technology would let customers pay for items by passing their smartphone over a small reader. A single NFC chip would be able to hold a consumer’s bank account information, gift cards, loyalty cards, and coupons, say the two people, who requested anonymity because the plans aren’t public. Google’s NFC scheme includes an advertising component that would allow merchants to beam a coupon or other reward to customers while they are shopping.

Of course, advanced smartphone owners can already complete mobile transactions by downloading payment applications. Paypal’s iPhone iOS application, for example, lets PayPal users transmit funds to other PayPal account holders. But NFC technology could potentially streamline such transactions. Users of advanced smartphones equipped with NFC technology don’t need to launch an application; they simply wave or tap their smartphone against a small reader device and enter a PIN number on it to authenticate their purchases.

A Google NFC network offering would encounter stiff competition from the start from the likes of companies such as Verizon, AT&T and T-Mobile, the three of whom in November 2010 formed a joint commercial venture called ISIS that plans to launch an NFC-based payments service by 2012. Visa is also field testing several mobile payment technologies, including NFC, and plans a commercial rollout later this year. It is rumored that PayPal, a division of eBay, may test an NFC service in the second half of 2011 as well.

Silicon Valley is hard at work on NFC technology too, with Apple having filed a patent for a process to transmit money between cellular telephones using NFC. Apple recently hired NFC expert Benjamin Vigier away from mFoundry, a startup that helps banks build mobile payments applications. If the next iPhone does come equipped with an NFC chip, then perhaps Apple will process mobile payments through Apple’s iTunes store.

The increased competition and jockeying for position in the NFC space is undoubtedly due to the high stakes involved, as the prize for whoever wins the NFC race is a dominant position in a small but fast-growing market that could displace the cash register in time. A leading market research firm, IE Market Research, estimates that by 2014, NFC-based payment systems will account for a third of the $1.13 trillion in worldwide mobile transactions.

In mid-December, Google, whose former CEO, Eric Schmidt, has said that NFC will “eventually replace credit cards”, in December 2010 bought Zetawire, a Canadian startup with several NFC patents to its name, including a novel method for diners to split up and pay a restaurant bill using their smartphones. If Google does decide to launch an NFC payments network, they would have the built-in advantage of its very large and rapidly expanding installed user base of Android smartphone owners. Every single day, around 300,000 people activate Android telephones, and they accounted for more than 25 percent of the new smartphones shipped in the third quarter of 2010, according to the Wall Street Journal.

The latest version of Google’s smartphone operating system, Android, capable of reading NFC tags is dubbed Gingerbread. Later this year, software updates to Android will let Android smartphones transmit information using NFC as well. In December 2010, Google introduced its Nexus S smartphone, based on Android Gingerbread and carrying an NFC chip onboard. In January 2011, Starbucks announced that customers would be able to start using a bar-code application on their smartphones to purchase coffee in some 6,800 of its stores.

There are obstacles to widespread consumer adoption, however. For an NFC-based payments network to really work, Google needs to convince not just Android smartphone owners but also local merchants who must install NFC readers to process mobile payments. Hotpot, which Google has been promoting heavily, introduces merchants to the NFC technology. NFC is already in heavy use in parts of Asia and Europe.

Verifone: All New Point of Sale Terminals Will Get NFC (gigaom.com)
Verifone to include NFC technology in all new point of sale terminals [The chicken or the egg] (intomobile.com)
Mobile NFC payment ready to take off (v3.co.uk)
Near Field Communication: What You Need to Know (pcworld.com)
Near Field Communications: a technology primer (thefutureofmoney.wordpress.com)
Smartphones To Be Smarter (3ghomepage.wordpress.com)
New NFC-Enabled Phones to Hit Europe (nytimes.com)
New NFC-Enabled Phones to Hit Europe (readwriteweb.com)
Digital Marketing Guide: Mobile Payments (adage.com)
BOA Trialing Mobile Wallet, Using NFC-Enabled BlackBerry (pocketnow.com)

Want to know more?

You’re reading Boston’s Hub Tech Insider, a blog stuffed with years of articles about Boston technology startups and venture capital-backed companies,software development, Agile project management, managing software teams, designing web-based business applications, running successful software development projects, ecommerce and telecommunications.

About the author.

I’m Paul Seibert, Editor of Boston’s Hub Tech Insider, a Boston focused technology blog. You can connect with me on LinkedIn, follow me on Twitter, even friend me on Facebook if you’re cool. I own and am trying to sell a dual-zoned, residential & commercial Office Building in Natick, MA. I have a background in entrepreneurship, ecommerce, telecommunications andsoftware development, I’m a Technical PMO Director, I’m a serial entrepreneur and the co-founder of TwitterMiners.com & Tshirtnow.net.

Boston’s Apperian, a maker of mobile applications, raises $500k from CommonAngels December 17, 2010

Posted by HubTechInsider in Startups, Venture Capital.
Tags: Apperian, Apple, boston, iPhone, Mobile application development, Mobile Applications, Mobile Computing, Mobile media, mobile software, mobile web, Startups, Venture Capital, Wireless Data
add a comment

Image via CrunchBase

Boston’s Apperian, a maker of mobile applications, raises $500k from CommonAngels.

David Patrick Joins Apperian as new CEO (eon.businesswire.com)
Apperian Launches EASE – First Platform for Creating, Managing and Deploying Secure, Enterprise-Wide Applications for iPhone, iPad and other Mobile Devices (eon.businesswire.com)
Apperian Acquires DS Media Labs (eon.businesswire.com)
5 App Stores for the Enterprise (readwriteweb.com)
Mobile App Revenue: $35 Billion by 2014 (readwriteweb.com)

Acton’s Azuki Systems, a provider of a mobile media communications platform, raises $4 Million December 9, 2010

Posted by HubTechInsider in Startups, Venture Capital.
Tags: Acton, Azuki Systems, Cisco Systems, Kepha Partners, Mobile Applications, Mobile Computing, Mobile media, Mobile phone, mobile software, mobile video, mobile web, Sigma Partners, Startups, Venture Capital, Voyager Capital
add a comment

Image representing Azuki Systems as depicted i...

Image via CrunchBase

Acton’s Azuki Systems, a provider of a mobile media communications platform, raises $4 Million from a group of investors including Sigma Partners and Kepha Partners.

Azuki Rings in $4M (xconomy.com)
SmartCells Finds Potential $500M+ Exit, EnerNOC Acquires Global Energy Partners, Azuki Adds $4M, & More Boston-Area Deals News (xconomy.com)

Portable power cell maker Lilliputian Systems, Inc., partners with Intel November 22, 2010

Posted by HubTechInsider in Investing, Startups, Venture Capital.
Tags: Atlas Venture, Bluetooth, Hudson Massachusetts, Intel, Intel Corporation, Mobile Computing, mobile web, Startups, Venture Capital, wilmington, Wilmington Massachusetts
add a comment

Portable power cell maker Lilliputian Systems, Inc., partners with Intel.

Lilliputian Systems, Inc. has developed the world’s first Personal Power™ solution for Consumer Electronics devices, a revolutionary and disruptive family of products targeted at the $50 billion portable power market. The Company’s breakthrough solution delivers the only viable small form-factor battery replacement that provides the enormous run-time improvements demanded by today’s CE devices.

A compact fuel cell can power consumer electronics, using replaceable $2 butane cartridges. The energy density of butane (a/k/a lighter fuel), of course, is much higher than a lithium ion battery.

Wilmington-based Lilliputian has been slowly improving its fuel cell prototypes. Today they’re announcing that Intel Capital is making an investment in Lilliputian, and that the chipmaker will also produce the silicon wafers — a crucial component of the finished fuel cells — at its Hudson, Mass. manufacturing plant.

The Lilliputian Mobile Power System will cost about $100 and will be sold by partners, says vice president Mouli Ramani. Initially, it’ll be used to recharge devices like mobile phones, Bluetooth headsets, digital cameras, and music players that have USB ports. (Power-thirsty laptops require more than the MPS’ three watts of electricity, and Lilliputian’s initial product won’t be capable of recharging them.)

Lilliputian’s power systems will be integrated into new mobile phones or laptops, rather than sold as accessories. Instead of plugging them into a wall outlet once a day, you’d just jam in a new butane cartridge every week or two.

Prior to the Intel investment, the company had raised about $90 million in venture capital, and taken a $5 million low-interest loan from two state agencies, MassDevelopment and the Massachusetts Clean Energy Center. The company’s backers include Kleiner Perkins, Atlas Venture, Stata Venture Partners, and Rockport Capital.

Intel plugs into portable fuel cell maker Lilliputian (news.cnet.com)
Lilliputian Systems Announces Wafer Manufacturing Supply Agreement with Intel and Equity Stake by Intel Capital (eon.businesswire.com)
Intel, Lilliputian Bring Handheld Fuel Cell Chargers Closer to Market (fastcompany.com)
Intel plugs into portable fuel cell maker Lilliputian (news.cnet.com)
Intel Capital Invests $77 million in Innovative Companies Around the World (eon.businesswire.com)
UPDATE 2-Intel Capital unveils $77 mln in start-up stakes (reuters.com)
Intel Capital unveils $77 million in start-up stakes (reuters.com)
WRAPUP 1-Intel buys Canadian startup, eyes embedded market (reuters.com)
Intel’s VC Funding Continues (INTC, VMW, CLWR, LOGM, BIDU) (247wallst.com)
Intel Capital Reveals 18 New Investments Totaling $77 Million (xconomy.com)
Intel Capital Invests $77 million in Innovative Companies, including Women-led Layar (thenextwomen.com)
Intel Invests $77 Million In 18 Companies (informationweek.com)
Intel Capital Invests $77 Million in 18 Startups Worldwide (techcrunch.com)

Web Innovators Group 28 (WebInno28) – Five Year Anniversary: Monday, November 29, 2010 at 6:30 PM (ET) — FREE November 22, 2010

Posted by HubTechInsider in Conferences, events, Investing, IPOs, Startups, Venture Capital.
Tags: boston, Cambridge, Craig James, David Beisel, Mobile Applications, mobile web, NextView Ventures, Startups, Venture Capital, Web Innovators Group, World Wide Web
1 comment so far

Web Innovators Group 28 (WebInno28) – Five Year Anniversary: Monday, November 29, 2010 at 6:30 PM (ET) — FREE

WebInno is an informal gathering of people interested in internet and mobile innovation – open and FREE to all in the community.

This WebInno is special, as we’re celebrating the fifth anniversary of the event. We’ll both take a look back at the past five years and ahead to next five. Join the entire community in gathering around innovation in the entrepreneurial web ecosystem.

We begin with the doors officially opening at 6:30pm in the Cambridge Royal Sonesta Hotel. At 7pm in the Grand Ballroom we’ll hold our usual format of self-/angel-funded startups demo’ing to the audience in Main Dish showcases, and select an “Audience Choice” winner of the crowd’s favorite. During the entire evening’s event, Side Dish startup companies will provide informal demonstrations to the networking crowd from the Skyline Suites room.

(presenting at 7pm):

FanSwarm (Ayeah Games) – Doug Levin
HowAboutWe – Brian Schechter

Moontoast – Blair Heavey & Marcus Whitney

(demo’ing throughout the evening):

Ginger Software – Miki Feldman-Simon

My-Take – Rich Armstrong & Todd Hoskins

Penmia – Puneet Gangal

SocialSci – Leon Noel

Smashion – Daniel Ruan

Promoboxx – Ben Carcio & Dan Koziak

Woopid – Lester Rosensaft & Craig James

Monday, November 29, 2010 at 6:30 PM (ET)

Royal Sonesta Cambridge
40 Edwin H Land Blvd
Cambridge, MA 02142

Web Innovators Group
The Web Innovators Group (WebInno) is comprised of people engaged in internet and mobile innovation in the Boston area. We aim to support entrepreneurs, visionaries, and creative thinkers in the field by holding events which foster community interaction.
Our regular meetings provide a forum for entrepreneurs from self-funded/early-stage startups to present new services to their peers, as well as an opportunity for everyone in the community to share and exchange ideas.

WebInno was founded and is currently led by David Beisel of NextView Ventures.

Why Boston fails young entrepreneurs (cortlandtjohnson.com)
Hitchhiker’s Guide to the Boston Tech Community (robgo.org)
Three InnoVentures Capital Companies Recognized by Utah Valley Entrepreneurial Forum (eon.businesswire.com)
1st Cloud Innovation Showcase Conference Announced to Boost Cloud Computing Innovation and Adoption (eon.businesswire.com)
Backupify to Present at the CloudInno Showcase 2010 November 10th (backupify.com)

Boston’s Mocospace, a provider of browser-based games for mobile devices, raises $3.5 Million from SoftBank Capital September 27, 2010

Posted by HubTechInsider in Startups, Venture Capital.
Tags: boston, Browser game, Games, Gaming, iPhone, Mobile Applications, Mobile phone, mobile software, mobile web, mocospace, SoftBank, SoftBank Capital, Startups, Venture Capital, Video Games, Video Gaming
add a comment

Boston’s Mocospace, a provider of browser-based games, entertainment, and a social network for mobile devices, raises $3.5 Million from SoftBank Capital.

MocoSpace Gets $3.5M In Strategic Funding from SoftBank Capital to Expand with Mobile Browser-Based Social Games (prweb.com)
SoftBank Keeps Up Its Game With Mocospace Funding (kara.allthingsd.com)
MocoSpace raises $3.5M from SoftBank for browser-based mobile games (venturebeat.com)
Browser-based mobile games developer MocoSpace raises $3.5 million from SoftBank (intomobile.com)
MocoSpace Gains $3.5M, Moves Further Into Mobile Social Gaming (xconomy.com)
Mobile Social Network MocoSpace Raises $3.5M From SoftBank For Gaming Platform (techcrunch.com)
MocoSpace Takes $3.5 Million Softbank Investment, Turns to Web-Based Mobile Games (insidesocialgames.com)
This Week’s Headlines on Inside Social Games (insidefacebook.com)
Q&A: A Social Network Built on Mobile Phones (voices.allthingsd.com)
Q&A: A Social Network Built on Mobile Phones (blogs.wsj.com)

What’s the difference between a Graphic Designer, an Information Architect and an Interaction Designer? September 15, 2010

Posted by HubTechInsider in Agile Software Development, Definitions, Ecommerce, Mobile Software Applications, Project Management, Social Media, Software, VoIP, VUI Voice User Interface, Wireless Applications.
Tags: Design, Graphic design, Human-Computer Interaction, Information architecture, Interaction Design, Interaction Designer, Library science, Mobile Applications, mobile software, mobile web, UI, User Experience, User interface, UX, VUI, Website, World Wide Web
add a comment

Information Architecture is the study of the organization and structure of effective web systems. Information architects study and design the relationships between internal page elements, as well as the relationships and navigation paths between individual pages. They combine Web design, information and library science as well as technical skills to order enterprise knowledge and design organizational systems within websites that help Users find and manage information more successfully. They are also responsible for things like ordering tabs and content sections of a web-based software application. They try to structure content and access to functions in such a way as to facilitate Users finding paths to knowledge and the swift accomplishment of their User Goals with the System.

Graphic Design is the skill of creating presentations of content (usually hypertext or hypermedia) that are delivered to Users through the World Wide Web, by way of a Web browser or other Web-enabled software like Internet television clients, micro blogging clients and RSS readers. Graphic designers study and design graphic elements, logos, artwork, stock photography, typography, font selection, color selection, color palettes and CSS styles.

Interaction Design is the process of creating an interface for the user to engage with a site or application’s functionality and content. Interaction designers are concerned mainly with facilitating users’ goals and tasks, and use a systematic and iterative process for designing highly interactive user interfaces. Their methodology includes research and discovery techniques such as requirements analysis, stakeholder analysis, task analysis, as well as prototyping, inspection and evaluation methods to define the structure and behavior of a web-based software system.

What’s the difference between Design and User Experience?

Design is about changing understanding; user experience is about changing behavior.

Design is about intent; user experience is about purpose.

Design is about style; user experience is about substance.

Design is about the platform; user experience is about the person.

Design is about the present; user experience is about the past and future.

Design is about action; user experience is about impact.

10 Usability Tips Based on Research Studies (sixrevisions.com)
Why I think Ryan Carson doesn’t believe in UX Professionals, and why I do (andybudd.com)
Social Interaction Designers are gunning for your website (businessesgrow.com)
Getting Started with Interface Design (net.tutsplus.com)
On the importance of social interaction design for social startups (gravity7.com)
A Web Designers Guide to Information Architecture (inspiredm.com)
New Column Launch: The User Experience (libraryjournal.com)
On defining UX (markboulton.co.uk)

Boston’s Skyhook Wireless maps the physical meatspace world so your smartphone can know its location in a minute without slow GPS satellite fixes August 23, 2010

Posted by HubTechInsider in Mobile Software Applications, Startups, Wireless Applications.
Tags: Apple, Global Positioning System, Google, GPS, iPhone, Mobile Applications, mobile software, mobile web, Motorola, Skyhook Wireless, Startups, Venture Capital, Wi-Fi
add a comment

Image representing Skyhook Wireless as depicte...

Image via CrunchBase

Boston’s Skyhook Wireless maps the physical meatspace world so your smartphone can know its location in a minute without slow GPS satellite fixes and tap into the new wave of nascent geo-location services.

Skyhook Wireless software loads onto mobile telephones and other portable devices like netbook computers and tablet computers and in most urban city locations can pinpoint a user’s location within 60 feet, obtaining a position fix in around one to two minutes, much faster than traditional GPS, or Global Positioning Systems, are able to obtain positive location information or even connect, while inside buildings.

When a Skyhook-enabled smartphone checks on its location, it will use the Skyhook Wireless software to scan for nearby cellular towers, Wi-Fi hotspots and available GPS satellites. The smartphone then sends that data to a Skyhhok Wireless server and within seconds can get a positive position fix on where in the world that smartphone is. This three-pronged approach is superior in the field in many instances for obtaining a position as opposed to reliance on GPS alone, which can take minutes to obtain a position fix.

But Skyhook Wireless must continuously update its location database as people move and new hotspots emerge and cease. The biggest challenge is not getting the data, it is managing the chaos that surrounds the shifting database of location-fixing data.

Skyhook Wireless software is part of a thriving emerging market for location-based services. These services include mobile social networks like Facebook Places, Gowalla and Foursquare, which enable “checking in” and broadcasting your location information to friends, announcing, for example, your arrival at a neighborhood restaurant.

To make this possible, Skyhook Wireless has amassed a database of more than 50 billion scanned records of Wi-Fi, cellular tower and GPS signals. This “map” of locations captures nearly 80% of the geographic areas in which the population of the US lives and works daily. In order to gather all of this information, Skyhook Wireless, on any given day, employs 500 drivers to cruise around with laptops and wireless antennas that read Wi-Fi and other signals and correlate them with locations. The company’s ultimate goal is to obtain baseline scans of all the roads and cities across the entire globe.

Skyhook Wireless has among its customers the manufacturers of mobile phones and other consumer devices. Skyhook Wireless software is installed in tens of millions of consumer gadgets, including some netbook computers, cameras, and until very recently, every iPhone, iPad and iPod that Apple shipped. In April, Apple began using its own location data it had been collecting for this purpose over years of iPhone use. In July of this year, Skyhook Wireless inked a deal with Samsung for its smartphones and has agreements with Motorola and Dell as well.

Licensing Skyhook Wireless technology can cost as much as $2 per device. Forbes magazine estimated the company’s 2009 revenues at $25 Million. Skyhook Wireless has around 35 emplyees, was founded in 2003, and has raised around $17 Million from investors to date.

Skyhook Wireless is competing against Apple, Inc., as mentioned previously in this article, as well as giants Google and Nokia, which have both also developed and acquired similar services that use multiple locataion data inputs, like Wi-Fi hotspots for mobile location fixing. It may be significant that in April of this year, Motorola choose to license the Skyhook Wireless technology rather than use Google’s free location software.

The CEO of Skyhook Wireless is Ted Morgan, age 43, the company’s founder.

Skyhook Wireless Partners with Samsung Electronics for Leading Location System (eon.businesswire.com)
For Location, Samsung Hooks Up with Skyhook (gigaom.com)
Devicescape Joins WiFi-Based Location Sweepstakes (gigaom.com)
Skyhook Teams Up with Samsung (xconomy.com)
Skyhook Awarded Four New Wi-Fi Location Patents (eon.businesswire.com)
Samsung Selects Skyhook Location Services (informationweek.com)
Gowalla Adds Skyhook Location to Android App (eon.businesswire.com)
Skyhook Wireless Adds Location Engine to Flixster (eon.businesswire.com)
Skyhook Wireless Announces First Platform Integration Of Location System On Motorola Android-Based Devices (eon.businesswire.com)
Skyhook Wireless Digs In, Touts Location Patents After Apple Drops Technology From iPhone (xconomy.com)

The Hub Tech Insider Glossary of Mobile Web Terminology August 21, 2010

Posted by HubTechInsider in Definitions, Mobile Software Applications, Wireless Applications.
Tags: Agile Software Development, Mobile Applications, mobile software, mobile web, Software, Software Development
1 comment so far

Image via CrunchBase

Well, as all of my regular readers know, and most casual readers of these pages can probably easily surmise, I am an ecommerce guy.

I have been designing, programming, managing, and just about everything-ing, ecommerce sites and companies for well over 15 years at this point.

I started my first ecommerce site in 1994. My first web site was an ecommerce site, the third web site in the US state in which I was living at the time. So building online stores is something I am super passionate about.

Sometime ago, probably around 2003 or 2004, I became convinced of the inevitability of the mobile web, and mobile web browsing for ecommerce sites.

I never really believed that the mobile browsing and online purchasing experience, or typical use case, for mobile browsing would be the same as the browsing experience on the desktop PC-based web. It just seemed to me that the mobile version of an ecommerce (or any other content-serving web site, for that matter) site would have to be optimized for a person on-the-go.

The appearance of the Apple iPhone really got me fired up about the mobile web, because I saw Apple driving mobile browsing to the fore of the public’s attention. There were several other factors that were, to my mind, inevitably driving the adoption of mobile web browsing.

So I set out to learn everything I could about mobile browsing, browsers, devices, standards, everything about mobile ecommerce and mobile web design.

At this point (summer 2010), I have set up several mobile versions of ecommerce sites. The mobile version of one of my latest ecommerce projects, tshirtnow.net, is currently responsible for around 9% of that site’s orders, which I find amazing. I expect this number to grow over time.

My employer, eSpendWise, (I am Director of Technical Projects there) is in the midst of developing a very thoughtful mobile portal into the eSpendWise ecommerce and eProcurement platform used by many Fortune 100 companies, like Apple, Inc., Nike, and others. Optimizing the mobile portal for the nomadic browsing experience (picture a store manager approving a shipment of cleaning supplies on their smartphone while running to help a cashier) while still preserving the power and flexibility of the eSpendWise platform, as you might well be able to imagine, dear reader, is a challenging task to say the least.

A recent study by mobile commerce analysts at Morgan Stanley projected that within five years, the number of user accessing the net from mobile devices will surpass the number who access it from PCs.

Because the screens are smaller, such mobile traffic is trending to be driven in the future by specialty software, mostly apps, designed for a single purpose. For the sake of the optimized experience on mobile devices, many users will forgo the general purpose browser for specialized mobile applications. Users want the Net on their mobile devices, but not necessarily the Web. Fast and easy (specialized purpose-built mobile applications) may eventually win out over flexible (the current desktop browser-oriented world wide web).

One thing I recommend is designing to web standards for your mobile applications or portals. In this way, you have the best shot at “future proofing” your mobile optimized content and applications.

During the writing of Functional Specifications for some of the mobile projects I have been involved with or responsible for, I have created a Glossary of mobile web terms and terminology I wanted to share with my HubTechInsider.com readers so that it may serve as a reference for their own mobile web design efforts.

Please don’t hesitate to send me an email with any questions or additions / corrects you may have for me, and please send me a short note with links / information about your own mobile web design efforts!

The Hub Tech Insider Glossary of Mobile Web Terminology

3G – 3G stands for Third Generation and refers to the latest phase in mobile technology. 3G enables much faster connections to the Internet so that you can get richer multimedia experiences such as video messaging.

4G – 4G stands for Fourth Generation and is a somewhat vague term used to describe wireless mobile radio technologies that offer faster data rates than current 3G (third generation) technologies. 4G networks are also more data-centric and based on standard Internet technologies such as IP. Voice service is typically provided using a special form of VoIP. WiMAX and LTE are examples of 4G technologies.

A-GPS – Assisted Global positioning System. This is a mobile-based location technology. The mobile uses A-GPS to work out location with the help of both GPS satellites and local network base stations.

AFLT (Advanced Forward Link Transmission) – AFLT is a mobile-based location technology. AFLT does not employ GPS satellites to work out locations. Instead, the phone measures signals from nearby cellular base stations and reports the time/distance readings back to the network which is then able to work out your location.

BROWSER – Software that allows you to view Internet content on a web-enabled device.

cHTML, C-HTML, Compact HTML – cHTML is a subset of HTML for i-mode browsers. cHTML is used only in Japan. cHTML is considered technical superior to WML. cHTML was replaced at W3C by XHTML Basic.

CTI (Computer Telephony Integration) – CTI is an optional set of applications that integrate your business’ telephone system with a computer. Features can include video conferencing, one-click dialing, incoming call routing, and a variety of other timesaving features that could be appealing to large businesses.

EDGE (Enhanced Data Rates for GSM Evolution) – This is an enhanced modulation technique which increases network capacity and data rates in GSM networks.

FEATURE PHONE – A cell phone with lightweight web features, not smartphones.

GSM (Global System for Mobile) – This is the digital network that mobile phones have used to make calls and send text messages, as well as the standard network available across much of the world. The data connection to the mobile internet is a phone call (similar to a fixed line modem) and it is billed relative to the duration of the call.

HDML – (Hyper Device Markup Language) Computer language format used to create wireless websites. HDML is the oldest markup language for display on mobile devices (circa 1996). HDML has a very simple syntax. HDML was never standardized, but was influential in the development of WML. No longer used on mobile phones in North America and Europe.

iDEN – a mobile telecommunications technology, developed by Motorola, which provides its users the benefits of a trunked radio and a cellular telephone. iDEN places more users in a given spectral space, compared to analog cellular and two-way radio systems, by using speech compression and time division multiple access (TDMA). iDEN is an enhanced specialized mobile radio network technology that combines two-way radio, telephone, text messaging and data transmission into one network.

i-mode – NTT DoCoMo proprietary wireless Internet service. Provides mobile devices access to web, e-mail and packet data. NTT DoCoMo I-mode is available only in Japan.

IMEI (International Mobile Equipment Identifier) – This is 15-digit number which identifies an individual phone to the network operators.

Java (J2ME: Java 2 Micro Edition) – Java or J2ME (Java 2 Micro Edition) enables users to download tailor-made software applications onto their phones e.g. mobile games.

LTE (Long-Term Evolution) – An effort to develop advanced wireless mobile radio technology that will succeed current 3G WCDMA/HSDPA/HSUPA technology. Although “LTE” is not the name of the standard itself, it is often used that way. The actual standard is called 3GPP Release 8. LTE is considered by many to be a “4G” technology, both because it is faster than 3G, and because it uses an “all-IP” architecture where everything (including voice) is handled as data, similar to the Internet.

MMS (Multimedia Messaging Service) – Also referred to as picture messaging, MMS works much like text messaging but with a greater capacity so you can send larger quantities of text as well as attaching images and audio files from your phone.

NATIVE APPLICATION – Mobile phone software compiled into a compatible binary format, stored in phone memory and run locally on the device. I.e. web browser, email reader, phone book.

PORTAL – A website accessed by desktop or wireless device that provides a wide selection of information from a single place.

PREDICTIVE TEXT (T9: Text on Nine Keys) – Predictive text allows you to enter text by pressing only one key per letter. When you try and text in a word, the phone will automatically compare all of the possible letter combinations against its own dictionary and predict which word you intended to type.

ROAMING – Making or receiving calls (or using wireless data services) outside your home airtime rate area. Additional fees may apply, depending on your calling plan.

SERIES 60 / SERIES 40 – Series 60 is based on the Symbian Operating System and is a major platform for smartphones. Series 60 was developed by Nokia for their own smartphones but they also license the platform to other mobile manufacturers. Series 60 mobiles tend to have a large color display and a large amount of memory for storing content. Series 40 phones tend to have smaller screens and less memory.

SIM CARD – This is the small card that slots into the back of a mobile phone underneath the battery. The SIM card controls your phone number and the Network that it works on.

SMARTPHONE – A smartphone is like a combination of a standard mobile phone and a PDA. Smartphones have their own complete Operating Systems but differ from PDAs in that they have a standard phone keyboard for input instead of a touch screen and pen.

SMS – (Short Message Service) Send or receive messages (up to 160 characters each) using your wireless device. SMS is also known as “Text Messaging”.

SOFT KEYS – Soft keys can be used for many different functions according to what is displayed on your mobile at any one moment e.g. ‘Select’ and ‘Exit’. They are commonly found right under the display.

SYMBIAN – Symbian is made up of a group of companies (Nokia, Ericsson, Motorola, and Psion) who create operating systems for mobiles and personal digital assistants (PDAs).

SYNCHRONIZED ACCESS – Some companies create a scaled-down version of their website for PDAs. A copy of the site is stored on the PDA and updated each time it is placed in its cradle and synchronized.

TEXT MESSAGING – Send/receive messages (up to 160 characters each) from your wireless device. Text Messaging is also known as “SMS.”

TRI-BAND – A GSM mobile of which there are two major types (European and Americas) and supports three of the four major GSM frequency bands. This type of mobile functions in most parts of the world.

U-TDOA (Uplink Time Difference on Arrival) – U-TDOA is a position-location technology for mobile phone networks. It works out your exact location by using triangulation techniques i.e. by measuring your distance from two known points.

UMTS – UMTS is one of the standard technologies used to enable 3G mobile services e.g. video on your phone.

WAP (Wireless Application Protocol) – This is the technology that enables mobile phones to browse the Internet. Open standard for network communication that allows mobile devices to access the Internet. WAP is a lightweight protocol providing primitive Internet support (from a desktop point of view). WAP was criticized for fragmenting the Web into Desktop and Mobile variants.

WAP 1.x – WML

WAP 2.x – XHTML-MP

WEB APPLICATION – A web application is an application that is accessed via Web browser over the Internet. Application runs on a web server. Markup documents are typically rendered on the User’s phone. No binary compilation or persistent local storage.

WiMax – (802.16a) WiMax is the trade name for a family of new technologies related to the IEEE 802.16 wireless standards. WiMax has the potential for very long range (5 – 30 miles) and high speeds. The initial version, based on 802.16a, is designed for fixed (non-mobile) applications only, such as a wireless replacement for home DSL or cable modem service. Newer versions, such as 802.16e, add support for mobility, potentially making WiMax a competitor for certain 3G or 4G cell-phone technologies. WiMax uses OFDM (Orthogonal Frequency Division Multiplexing), an increasingly common type of digital wireless technology that is also used in some digital radio and television standards. WiMax operates at higher frequencies than mobile phone networks. WiMax technology can operate in the 2.5 or 3.5 GHz licensed bands, or in the 5.8 GHz unlicensed band.

WML (Wireless Markup Language)– Computer language format used to create websites that can be viewed on a wireless telephone or device. WML is a XML-based markup language for mobile phones. WML has a very simple syntax. WML was standardized by W3C. WML is considered to be a legacy markup language for mobile devices. Implements WAP.

WTAI (Wireless Telephony Applications Interface) – A protocol used in conjunction with the Wireless Application Protocol (WAP) to allow a phone number to be linked to a web page.

WURFL (Wireless Universal Resource File) – WURFL is an open source directory and APIs for programmatic discovery of mobile device capabilities.

XHTML – XHTML is a HTML markup language in XML-compliant syntax.

XHTML Basic – W3C-standardized subset of HTML targeted for mobile devices, pagers and set-top boxes.

XHTML-MP – Superset of XHTML-Basic defined by the Open Mobile Alliance industry group. XHTML-MP is considered to be the implementation of WAP 2.0. XHTML-MP is a very popular markup language for mobile devices and carrier sponsored applications and portals.

Want to know more?

You’re reading Boston’s Hub Tech Insider, a blog stuffed with years of articles about Boston technology startups and venture capital-backed companies,software development, Agile project management, managing software teams, designing web-based business applications, running successful software development projects, ecommerce and telecommunications.

About the author.

I’m Paul Seibert, Editor of Boston’s Hub Tech Insider, a Boston focused technology blog. You can connect with me on LinkedIn, follow me on Twitter, even friend me on Facebook if you’re cool. I own and am trying to sell a dual-zoned, residential & commercial Office Building in Natick, MA. I have a background in entrepreneurship, ecommerce, telecommunications andsoftware development, I’m the Director, Technical Projects at eSpendWise, I’m a serial entrepreneur and the co-founder of Tshirtnow.net.

Mobile Web Design: Best Practices (sixrevisions.com)
The Mobile Web: Consider the User (nten.org)
Best Practices and Proof of Surging Demand for Mobile Applications That Improve Healthcare and Patient Outcomes Revealed in New Report (eon.businesswire.com)
11 Mobile Web Annoyances (And How to Fix Them) (pcworld.com)

Why designing for a VUI is more difficult than designing for a GUI May 11, 2009

Posted by HubTechInsider in Mobile Software Applications, VoIP, VUI Voice User Interface, Wireless Applications.
Tags: IVR, Mobile Applications, mobile software, mobile web, Telecommunications, VoIP, VUI
4 comments

Despite the fact that many Automated telephony and IVR vendors advertise that their web-based SaaS offerings can seemingly make the development, testing, deployment and maintenance of an IVR application seem easy and straightforward, this over-confidence in the VUI design abilities of untrained, non-technical business analysts and enterprise services managers is woefully misplaced. This mistaken impression is borne out by the simple fact that just because a software tool may be easy to use (even though all of these SaaS web-based vendors provide VUI tools with horrific interfaces and GUI designs, such as reliance on stone-age Java applets) only cursory thought, if any thinking at all, has been invested into how these untrained resources should use that tool. This can and often does lead to catastrophic results.

I frequently encounter the mistaken prevailing notion that designing a VUI consists of nothing more than taking a GUI and “simplifying it” for use on the telephone. As the thinking goes, we can all talk on the telephone; Not all of us can navigate a complex forms-based web site. But despite this mistaken general impression (perpetuated by IVR and automated telephony vendors and many software development teams within them, as well as their clients), some basic realities persist in shattering these ill-conceived concepts: People can read faster than they can listen with comprehension, speak faster than they can type, and talk much more quickly than they can process the meaning behind spoken words. So even though, based on initial impressions, designing an effective VUI might seem easier than designing a first-rate GUI, the converse is true: designing a great VUI is far more difficult than designing a GUI.

A VUI is inextricably linked with Time

When a user is navigating a GUI, they can read text at any location on the web page or application screen. The user can skip ahead visually to the section they are interested in. With a VUI, the user is a “prisoner” of the VUI design. The attention is captive: they must listen with (or without) patience to each word before they can hear the one that follows it. With this in mind, some best practices for VUI design emerge:

1. Long prompts are Bad: The longer the prompt, the more the user’s patience is being taxed. Introductory or “tutorial” prompts explaining how the system works may be required for an outbound IVR application or alternatively provided for the benefit of novice users, however they should not be forced upon returning visitors or outbound IVR call recipients that have received similar IVR communications in the past.

2. Long VUI menus are Bad: Again to use the GUI as a contrasting example, on a web page you can present many menu options to the user, even hiding numerous options in a drop-down menu. A VUI menu, on the other hand, should never exceed five or six items at the most.

3. Get to the gist of the communication quickly: Forcing your captive “audience” to listen through introductory marketing copy written into an outbound IVR or inbound VRU script will become annoying very quickly to the user. Script your important information into the beginning of your prompts.

4. Allow ‘barge-in’: Expert users who know how to use the system and know what they want to do desire the ability to speed up the automated interaction with the system. Allow them to issue their commands to the system without forcing them to wait for the system to finish talking.

5. Give expert users global hotwords: Global “hotwords”, or application-level shortcuts, allow users to “cut to the chase”, enabling them to cut through menus and enjoy the feeling of enablement that a responsive VUI system can provide.

6. Allow the user to pause the interaction: The GUI has another crucial advantage over the VUI – the ability to stop and start again exactly where you left off after an indeterminate interval. While providing the exact same level of interaction control to the user is impossible in a VUI, if within your VUI design you are asking the user to provide the system with a membership number in a COB (Coordination of Benefits) automated telephony call for a health care provider, or asking them for their account number in an inbound VRU application, or if the system wants the user to write down a confirmation code or other information, then design your VUI so that the call recipient or caller can get their pencil and paper ready, find their membership card, and say “continue” when they are ready.

The One-way Temporal Flow of the User

Of course, the spoken word is not only temporally linear, but also one-way. In the same manner in which time is a “one way street”, so is speech a “one way medium”. When you are listening to a prerecorded voice prompt, you can’t easily hit the nonexistant rewind button on your telephone. A VUI is not like watching a ball game on your DVR or Tivo, either. You can’t easily go back and listen to the prompt again. This is in stark contrast to the GUI world, where the user can jump back-and-forth within the text on the page or screen. Three simple techniques can help to alleviate this conundrum:

1. Always let the user ask to have the system repeat the prompt: Perhaps the most elementary technique to mitigate the one-way temporal flow of the user is to have the system offer to repeat the last prompt. The user must be made aware of the fact that they can have any prompt repeated to them at any time during the IVR interaction.

2. Make Help available to the user: Information or instructions that are crucial to the task completion ability of the call recipient or caller presented at the beginning of the interaction must be made available to the user at any point in the IVR interaction. Offer help to the user not only at the beginning of the call but also at moments where the user seems to have arrived at an impasse in the interaction. The need to offer help to the user is acute at “no input”, “Out of Grammar (OOG)” or “no match” states.

3. Present a summation of the gathered data: In form-filling dialogs or IVR interactions where the caller is being asked to provide information to the system, a marvelous approach to overcome the one-way temporal flow nature of the IVR interaction is to offer the call recipient or caller a summation of the data that has been gathered from them during the course of the IVR interaction so far.

Persistence in a VUI is not visible to the user as in a GUI

Callers or call recipients perhaps show the most frustration when they feel they have lost track of “where they are” in the course of traversing a scripted IVR inbound or outbound interaction. Aggravation mounts as the user becomes increasingly unsure of what to do next, and what the system expects the user to do next. Whereas a web page or application screen typically provides a multitude of visual ques, such as a menu tree, “breadcrumb” navigation path, or something similar, even something as simple and effective as a URL web address window on a browser is unavailable in the VUI world. Some approaches to mitigate these factors emerge to the experienced VUI designer:

1. Auditorily “Announce” the user’s position in the IVR exchange: In the same manner that a properly designed web page or application screen will tell the caller or call recipient where they are in terms of navigating a site or application, so should a well-designed voice interface let the user know their exact position in the IVR interaction. A simple and efective technique for providing the user with such “mental markers” is to use a word or two to announce this position to the user: “Main Menu”…”Here’s the drugs in your prescription refill:”, etc.

2. Audio breadcrumbs: The VUI version of the “breadcrumb navigation” trails that are featured so prominently on web sites in the GUI world can be emulated in the VUI world, where they prove no less useful. Each “voice page” that requires interaction with the user can be associated with a “position page” that announces the user’s position within the dialog tree. “Prescription, Reorder, Address”, as an example, would very nicely indicate to the user that they chose “prescriptions”, then “Reorder”,a nd are now confirming their prescription reorder address on file with the system. A “Go Back” provision or option should be offered to users at these “position page” states.

3. Audio Icons: Auditory icons, or “earcons”, are VUI equivalents of the GUI’s icons. These audio icons can be extremely useful to both the VUI designer as well as the call recipient or caller by either annoucing to the user that a particular action is about to be undertaken or positioning the user within a IVR menu structure or transaction path. “Wait audio”, or sounds played to the user to indicate that the system is busy performing a record lookup or other function can prevent the user from interpreting a system crash or IVR interaction end when faced with an absolute extended silence.

GUIs present one fundamental advantage over VUIs: the user navigating a web page or an application screen has control over the medium, the message, and the interaction itself. Although a poor GUI can make the user feel helplessly confused, a VUI faced with the challenges outlined above has to be near-perfect to prevent the user abandoning the IVR interaction entirely by the simple and universal act of hanging up the telephone. VUI designers should always be aware of the significant differences between designing an effective and useful GUI and VUI. It would be ill-advised to enter into a VUI design task or project of any size while carrying into the endeavor the familiar GUI design assumptions.

Want to know more?

You’re reading Boston’s Hub Tech Insider, a blog stuffed with years of articles about Boston technology startups and venture capital-backed companies,software development, Agile project management, managing software teams, designing web-based business applications, running successful software development projects, ecommerce and telecommunications.

About the author.

I’m Paul Seibert, Editor of Boston’s Hub Tech Insider, a Boston focused technology blog. You can connect with me on LinkedIn, follow me on Twitter, even friend me on Facebook if you’re cool. I own and am trying to sell a dual-zoned, residential & commercial Office Building in Natick, MA. I have a background in entrepreneurship, ecommerce, telecommunications andsoftware development, I’m the Director, Technical Projects at eSpendWise, I’m a serial entrepreneur and the co-founder of Tshirtnow.net.

	Keri on The Twenty Laws of Testing Com…
	SERGE on MIT professor and double amput…
	Product Roadmaps \| F… on What is a Product Roadmap? Wha…
	excelandaccess on What is the frequency response…
	Embracing Opportunis… on Five tips for recruiters on co…

How to optimize your web based software application for the mobile web August 7, 2011

Mobile Device Product Categories & Feature Sets

If your web based application or site is not optimized for the mobile web, you are falling behind and losing out on transaction revenue, sales, data, customers: you name it.

The tshirtnow.net mobile web site

Tips for Handheld CSS Style Sheets

Sample Handheld CSS Stylesheet

Resources for testing your mobile applications

Developer Tools & Resources

Apple iPhone / iPad / iOS Resources

RIM Blackberry Resources

Mobile Opera / Mini Opera Resources

CSS3 & CSS3 Media Queries Resources

General mobile web / device detection resources

Mobile Browser / Mobile Web Usage Statistics

Related articles

More Articles From Boston’s Hub Tech Insider:

Share:

What is NFC? What is the smartphone mobile payments technology known as Near Field Communications? March 6, 2011

Related Articles

More Articles From Boston’s Hub Tech Insider:

Share:

Boston’s Apperian, a maker of mobile applications, raises $500k from CommonAngels December 17, 2010

Related Articles

Share:

Acton’s Azuki Systems, a provider of a mobile media communications platform, raises $4 Million December 9, 2010

Related Articles

Share:

Portable power cell maker Lilliputian Systems, Inc., partners with Intel November 22, 2010

Related Articles

Share:

Web Innovators Group 28 (WebInno28) – Five Year Anniversary: Monday, November 29, 2010 at 6:30 PM (ET) — FREE November 22, 2010

Related Articles

Share:

Boston’s Mocospace, a provider of browser-based games for mobile devices, raises $3.5 Million from SoftBank Capital September 27, 2010

Related Articles

Share:

What’s the difference between a Graphic Designer, an Information Architect and an Interaction Designer? September 15, 2010

What’s the difference between Design and User Experience?

Related Articles

Share:

Boston’s Skyhook Wireless maps the physical meatspace world so your smartphone can know its location in a minute without slow GPS satellite fixes August 23, 2010

Related Articles

Share:

The Hub Tech Insider Glossary of Mobile Web Terminology August 21, 2010

The Hub Tech Insider Glossary of Mobile Web Terminology

Related Articles

Share:

Why designing for a VUI is more difficult than designing for a GUI May 11, 2009

Share:

About...

Admin Controls

Email Subscription

Subscribe to HubTechInsider (RSS)

Share HubTechInsider.com with your Social Network!

Blogroll

Boston Startup Blogs

Important Links

Other Links

Recent Posts

Meta

Recent Comments

Top Posts

Editor’s Pick Posts

Categories

Archives

Hub Tech Insider Categories

Twitter Updates

Pages

The Original Xbox 360 & PS3, FPS No Scope Screen Decal

Tshirtnow.net – Earth’s Largest T-shirt Megastore!

xbox 360 & PS3 Video Gaming Decals & Skins at Tshirtnow.net

Tshirtnow.net – New Items!

Tshirtnow.net – Under $10.00 Items!

Feeds