If you are citizen of an European Union member nation, you may not use this service unless you are at least 16 years old.
You already know Dokkio is an AI-powered assistant to organize & manage your digital files & messages. Very soon, Dokkio will support Outlook as well as One Drive. Check it out today!

Website design

Page history last edited by Tony Murray 12 years, 7 months ago

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)

Articles:

Smartphone Browser Landscape by Peter-Paul Koch

"In this article, I’ll give you an overview of the mobile web market, as well as phone platforms and their browsers, so that you can decide which mobile devices to test on. Then, we’ll look at how to set up a mobile test bed."

De-mystifying the elusive mobile context (by Rachel Hinman/UX magazine)

This article describes research on where people use mobile (Mobile Context). Conclusion: mobile context = anywhere and everywhere. The article mentions the Ushahidi platform and provides six 'Mobile Context' design tips.

Designing for the mobile web

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

Redesigning a site for mobile: What's involved (by Simon Meek/Elated)

http://www.elated.com/articles/redesigning-a-site-for-mobile-whats-involved/

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/

Responsive website design
http://www.alistapart.com/articles/responsive-web-design/
The author of this article argues that it is impractical to target websites at particular devices such as 'iphone','iPad', 'N90'. More and more devices are coming on the market with a wide range of capabilities, physical dimensions etc. Instead, new CSS techniques can be used so that the design of a website changes dynamically to match the capabilities of the device it is being viewed on.

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

News:

BBC kills off WML site
..."fewer than one per cent of the BBC's mobile visitors are using WML these days, compared to 20 per cent two years back"
http://www.theregister.co.uk/2011/01/12/bbc_wml/

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)

Plugin for detecting mobile devices: http://www.mobilejoomla.com/

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

Creating A Mobile Version of Your Drupal Website

http://djere.com/node/27

http://drupal.org/project/mobile

http://drupal.org/project/iui

http://drupal.org/project/mobile_tools

http://drupal.org/project/mobileplugin

Hosted

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

Google website browser

No longer active?
http://google.com/gwt/n

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

Apache2: How to redirect users to mobile or normal web site based on device

Redirect mobile visitors to, for example: m.website.com using Apache's rewrite module (HowToForge/Author: Falko)

http://goo.gl/XcqeY

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)