Promise Media

Mobile Web Development

Stored in Website Development and tagged

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:

  1. Android
  2. Iphone
  3. Ipad
  4. Blackberry
  5. Ipod

Mobile User Behavior

  • Low pages per visit
  • Lower time on site

Screen Resolutions

  1. Android: HVGA (320×480, medium density, normal screen)
  2. Iphone: 320×480, 640×960 (Iphone 4)
  3. Ipad 2: 728×1024
  4. Blackberry: 320×240
  5. 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

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

Newspaper Mobile Products

  1. General site: http://m.crestviewbulletin.com/
    1. Desktop access issues
  2. Sections with high mobile visits (analytics, small resolution)
    1. Weather (high interest)
    2. Classifieds (revenue potential)
  3. 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

  1. Focus on mobile content and not mobile apps
  2. Piggyback onto existing products
  3. Keep effort simple
  4. Follow development standards
  5. Track results and grow accordingly
  6. Use regular promotional channels to build audience
  7. Monetize or abandon

Comments are closed.


© 2007-2019 Promise Media LLC • PrivacySitemap