Mobile Web Development

By Scott S. Bateman

Mobile publishing develops two related products: mobile Web (content) and mobile apps (software).

Mobile Web content is the easiest to implement, most popular to use and has the fewest ongoing maintenance requirements. Its development usually requires simple scripting languages such as HTML and CSS.

Mobile apps are 1) A native app that must be installed on the device; 2) A Web app that resides on server and is accessed via the Internet. They provide the highest degree of control, require the most labor and provide the most targeting to a particular device. Their development usually require higher programming languages such as Java and C++.

The term “mobile app” often is misused to describe products that fall under mobile Web content, such as a PDF product.

“Small Information Appliances”

Mobile phones
Netbooks
Televisions
PDAs
Vending machines
Pagers
Car navigation systems
Mobile game machines
Digital book readers
Smart watches
Many more to come

Mobile Audiences

The number of people who surf the Internet on phones has doubled since 2006, according to Nielsen Mobile, to 40 million. Still, only 16 percent of people with cellphones use them to go online, and those that do visit an average of six sites a month, versus 100 on their computers. (2009 article)

Usage share of browsers for August 2011

Source              IE Firefox Chrome Safari Opera   Mobile   Unknown
Net Applications 51.8% 21.1% 14.5% 7.7% 2.9% 6.4%
Statcounter 38.9% 25.5% 21.5% 6.2% 3.1% 7.1%
W3Counter 35.4% 26.7% 20.2% 6.2% 2.3%    9.2%
Clicky              41.9% 26.9% 20.9% 9.0% 1.2%
Wikimedia 36.3% 24.1% 18.2% 10.7% 4.4% 9.6%
Median              38.9% 25.5% 20.2% 7.7% 2.9% 7.1%

Mobile Defined by Google Analytics

The top five “mobile” devices are:

Android
Iphone
Ipad
Blackberry
Ipod

Mobile User Behavior

Low pages per visit
Lower time on site

Screen Resolutions

Android: HVGA (320×480, medium density, normal screen)
Iphone: 320×480, 640×960 (Iphone 4)
Ipad 2: 728×1024
Blackberry: 320×240
Ipod: 320×480

The Publishing Dilemma

Problem:
The growing number and variety of digital information devices makes it impossible to develop unique products for each one.

Solution:
Cross platform publishing that uses XHTML 1.1 Basic or HTML 5.0 (in development) as a common markup language.

New features should be based on HTML, CSS, DOM, and JavaScript
Reduce the need for external plugins (like Flash)
Better error handling
More markup to replace scripting
HTML5 should be device independent
The development process should be visible to the public

Strategy

Options

Design a Web site to be mobile friendly
Design a redirect to a fully mobile site
Design mobile-specific projects
Commit money and labor that doesn’t exceed the ROI

Newspaper Mobile Products

General site: http://m.crestviewbulletin.com/
1. Desktop access issues
Sections with high mobile visits (analytics, small resolution)
1. Weather (high interest)
2. Classifieds (revenue potential)
Pages with automated templates (low labor)

Building Priorities

Consider caps, costs and speed issues
Follow standards
Keep it simple to accommodate the future
Piggyback on existing site software
Test and track results

Sample Piggyback Template

http://www.caribeez.com/st-maarten/st-maarten-weather/
http://www.caribeez.com/st-maarten/st-maarten-weather/mobile/

{if segment_3 == “”}
{embed=”embeds/header”}
<h1>St. Maarten Weather</h1>
{exp:weather}tncm{/exp:weather}
{embed=”embeds/footer”}
{/if}

{if segment_3 == “mobile”}
{embed=”embeds/header_mobile”}
<h1>St. Maarten Weather</h1>
{exp:mobileweather}tncm{/exp:mobileweather}
{embed=”embeds/footer_mobile”}
{/if}

Brief Intro to Mobile Markup

Sample Header

<?xml version=”1.0″ encoding=”UTF-8″?>

<!DOCTYPE html PUBLIC
“-//WAPFORUM//DTD XHTML Mobile 1.1//EN”
“http://www.openmobilealliance.org/tech/DTD/xhtml-mobile11.dtd”>

<html>
<head>
<title>HeadlineVA Notices and Foreclosures – Mobile Version</title>
<link rel=’stylesheet’ type=’text/css’ media=’all’ href='{stylesheet=mobile/mobile_css}’ />
<style type=’text/css’ media=’screen’>@import “{stylesheet=mobile/mobile_css}”;</style>
</head>
<body>

</body>
</html>

Building a Sample Page

Log into site
Access HTML 5.0 and XHTML 1.1 Basic tutorials
Copy and paste sample templates
Add content and markup
Test results

Testing

With such diversity in the mobile device landscape, it goes without question that you should test your designs on as many platforms as you can manage.

Your mobile device
Desktop emulator (high tech skills required)
On-site emulator
Simple 320 x 480 iframe
W3C validator

Mobile Advertising

Small format advertising is required for resolutions such as 320 x 480.

The relatively small role played by mobile at the recent Facebook developer conference points to the company’s difficulties in figuring out how to monetize mobile.

The Mobile Marketing Association has five large sizes as part of a universal ad package:
320 x 50
300 x 50
300 x 75
216 x 36
216 x 54

Mobile Marketing

Attracting and keeping mobile users is the same as other tactics:

House ads
On site ads
On site links and icons
Search engine optimization
Social media, especially Facebook and Twitter

Conclusion: 7 Takeaways

Focus on mobile content and not mobile apps
Piggyback onto existing products
Keep effort simple
Follow development standards
Track results and grow accordingly
Use regular promotional channels to build audience
Monetize or abandon