Designing for the mobile web

This section contains some resources and ideas on how to design (websites) for the mobile web.

From a website design perspective, mobile devices can be broadly divided into basic 'green-screen' phones, mid-range phones and newer smart phones.

• In rural areas from Africa, Asia, LA, Caribbean, etc. it is likely to be few smart phones
• Are green-screen mobile phones being used to access websites, or mainly for sms and other internet services like e-mai, facebook, etc.?
• The situation is changing rapidly in terms of technology, available website (services), demand, internet access, etc.
• Are there any cheaper mobile phones with decent web browsers already available?
• In any case, it may be useful to distinguish between the two to the point of having three versions of a website
  • Desktop (regular web)
  • mid-range phones (+ some green-screen)
  • Smart phones
• In many online articles, discussion tends towards assuming smart-phones (since many of the authors are keen technologists with the latest phones)

Some key articles:

Designing for the mobile web
Essential reading - describes the differences between green-screen phones and smart phones in terms of code (X)HTML, vs WML and screen sizes. It also contains info on Nokia 1100 and 1101 (The world's best selling phone - designed for Developing Countries and with 200m sales worldwide)
http://articles.sitepoint.com/article/designing-for-mobile-web

Pocket-sized design:
An article from 2004 on how to approach mobile website design: constraints, scaling down, linearizing content, and some other technical details
http://www.alistapart.com/articles/pocket/

Return of the mobile stylesheet
An article discussing standards/stylesheets. From the article:
"The reality is that a site designed specifically with mobility in mind will always provide a much better user experience to mobile users... It’s not merely a question of network costs and delays or memory and CPU limitations. Rather, the mobile experience merits its own design, as discussed in a growing body of literature... The formula for a mobile experience provided by Little Springs Design sums up the goal nicely: mobilize, don’t miniaturize.
http://www.alistapart.com/articles/return-of-the-mobile-stylesheet/

WML Tutorial (Wap, for green-screen phones)
http://www.w3schools.com/wap/default.asp

Testing:

It's highly impractical for a single developer or a team, to do real-world testing on the large number of mobile devices that abound:

• High costs for hiring/borrowing/purchasing
• How to connect devices to the web?
  (smart phones will usually have wi-fi)

Article on testing:
http://www.dailyblogtips.com/test-your-website-on-a-mobile-phone/
(Comment section also interesting)

There is also a better article somewhere.

Some 'emulators' are available, such as:
http://emulator.mtld.mobi/emulator.php (2 phone models Nokia N70/Sony K750 )

Opera browser.- built in mobile view

Nokia Mobile Browser Simulator 4.0
http://www.forum.nokia.com/.....(requires Windows/Java/Registration)

wapua - WAP simulator browser (Ubuntu linux - available in repositories)

Android STK:

http://developer.android.com/sdk/index.html (available for Windows, Mac, Linux)

How to test websites on Google Android

http://themattharris.com/2009/06/02/testing-websites-on-google-android/

Blackberry simulators

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

(Registration required)

Key testing sites

W3C Mobile web checker
http://validator.w3.org/mobile/
- The W3C mobile web checker also includes lots of advice on how to fix errors, improve features, etc.

http://ready.mobi/
(results includes 5 test phone modules Nokia N70/Sony K750, Samsung Z105, Motorola v3i, Sharp GX-10)

Content Managemennt Systems/ Plugins and Mobile websites

Key question: whether to use browser sniffer scripts to detect mobile website browsers or to use mobile stylesheets (see return-of-the-mobile-stylesheet article above)

Joomla

With Joomla CMS, you can work with various aspects of the system (plugins, modules, templates) in order to rearrange content for the mobile web. So, for example, the main menu can be placed below the article.

Start here:
http://extensions.joomla.org/extensions/search/mobile

(also some interesting extensions in relation to SMS)

The CTA Observatory website (currently) uses:

Mobilebot:
http://extensions.joomla.org/extensions/core-enhancements/mobile/9804

Description/instructions and discussion on Mobilebot:
http://mobiforge.com/developing/story/mobile-sites-with-joomla-cms

PDA-plugin
together with a modified version of the following mobile template: (PDA-template)
http://joomup.com/blog/2007/10/20/pdaplugin-joomla-15/

Wordpress

Carrington mobile theme very popular:
http://wordpress.org/extend/themes/carrington-mobile

The Hero Is In Your Pocket (October 2009)
"Today we’re launching a couple of mobile themes that will automatically be displayed when your blog is accessed with a compatible mobile phone."
http://en.blog.wordpress.com/2009/10/20/the-hero-is-in-your-pocket/

Mobile Touch
With Carrington theme and support for both smart phones ('touch' phones) and WAP-type phones:
http://www.bravenewcode.com/wptouch/

Drupal

Ezpublish

Twiki

Twik powers the wiki you are reading now.
Article about mobile readiness of twiki here:
http://twiki.org/cgi-bin/view/Codev/RenderingOnSmartphones

Hosted

There are hosted solutions for mobile websites.
More info to follow (e.g. mobi, swiftmob.com, etc)

Google website browser

Not promoted:??
http://google.com/gwt/n

Google WAP gateway:
http://wap.google.com/

Mobile learning

Connection to the web changes the nature of learning in different ways.

• If you are connected to the net, what do you need to learn? ['wired-in'/information and answers on tap]
• Student-teacher interaction (e.g. questions via SMS).
• Collective learning (likewise companies selling consumer products let users solve their own problems via forums)

FutureLab 'Mobile Technologies and Learning'
http://www.futurelab.org.uk/..../Literature-Review203/

Websites

International Association of Mobile Learning (IAML)
http://mlearning.noe-kaleidoscope.org/links/com.html
IAML bibliography: http://mlearning.noe-kaleidoscope.org/resources/biblio.html

iTunes U
http://www.apple.com/education/mobile-learning/
(But requires iPod/iTunes etc.., though audio/video approach perhaps interesting)

Mobile Learing - Example websites

The following are more reference sites...

Wikipedia Mobile site:
http://en.m.wikipedia.org/

Mobile learning for Unions (UK)
http://www.unionlearn.org.uk/ict/learn-3022-f0.cfm#learn-3022-3

Website design:

http://m.sitepoint.com/
http://m.alistapart.com/

Video (inc learning videos)
http://m.youtube.com

Reference
http://m.reference.com/

Translate words
http://imode.langtolang.com/

Various

%OBJECT{"http://www.youtube.com/v/-dnL00TdmLY&hl=en&fs=1" width="425" height="344"}%