TechTip: Adapt a site for the mobile web


People are increasingly using mobile devices to access the web, but most websites have been developed to be viewed on a computer monitor. It can be difficult, therefore, to navigate through a website on a small, handheld screen: the download time can be very long and some features are often incompatible with mobile web browsers. There are some simple ways, however, to adapt a website to be more easily accessible from a mobile device.

Designing a site for mobiles can be difficult; screen sizes vary between devices and so the website can look very different depending on the device used to access it. But, in general, the mobile site should be kept as simple as possible so that it can be downloaded quickly over slow internet connections. This means keeping large files, such as photographs, and bandwidth-heavy features, such as Flash, to a minimum. One simple way to create a website for the mobile web is to use a web application to adapt an existing website.

Mobify.me lets site owners redesign their web pages to be viewed on mobile phones with web access. It works for most of the popular mobile phones with web access, including iPhones, Blackberrys, Palm Pre, Google Android and Nokia S60 phones. The application is free to use, but there are also premium services offering more features, for a cost of up to US$ 100 per month.

Sign up

Visit the site http://mobify.me to sign up for an account with your email address. Once logged in, you will see a screen with an overview of the service. Click to view the complete guide or use the screencast for further help on adapting your site. Click ‘Close me’ to close the overview. In the next screen, type in the web address of the site you want to adapt in the space at the top, and then click ‘Click here to begin’.

Select content

You will then see the website you want to adapt, minus any JavaScript and Flash content – the application automatically removes this to ensure that the site loads quickly (you can add this content at a later stage).

Use the mouse to move the pointer around the webpage and select the most important content areas, for example, the sections of text that are regularly updated. Mobify.me guidelines recommend including the search box, story headlines, article summaries, contact information and any streaming and downloadable media, such as mp3 or YouTube videos.

Select the sections you want to appear on the mobile site by clicking on them. Undo mistakes by pressing ‘Ctrl+Z’. Use ‘Ctrl+S’ to save your selection. All the selected areas of your webpage will turn red. When you are satisfied with the choice, click ‘Design’ or ‘Next’ to go to the next stage.

Design

The left-hand side of the screen gives a preview of your selected content. Click the buttons above this to see how the site would look on different devices.

On the left is a box showing the CSS (cascading style sheets) of your site. CSS is a language which describes the look and format of a website to web browsers. Some knowledge of CSS is useful but not necessary, as the application allows you to easily make basic changes, such as moving the order of the content, or deleting and adding sections.

Click ‘Manage’ or ‘Next’ when you have made your changes.

Manage

A preview of the site is again shown on the left. If you are satisfied with how it looks, you can launch the mobile site immediately, or make some further changes. You can use templates to modify more pages of the original source site, or add an analytics function to record visitor statistics to the new mobile site.

Launch

When the site is ready, click ‘Launch’. The application will offer the option of launching the new mobile site using the free ‘Basic’ service, the ‘Free Plus’, which offers additional features at a cost of US$ 24.99 per month, or to upgrade to the ‘Pro’ service.

After making your selection (and filling in your credit card details for the premium services), you will then be directed to a screen where you choose an address on the mobify.me site, such as http://ictupdate.mobify.me, where you can view the mobile site. The application also automatically produces a piece of JavaScript code, which you need to add to the original source website. The code will automatically detect mobile devices and direct them to the mobile view.

Finally, enter a domain name, or web address, for the mobile site. Use this address to advertise the site. Mobile domain names usually incorporate the address of the original site, such as m.ictupdate.cta.int, for example, or ictupdate-mobile.cta.int. Remember that you will have to register this new name with your domain register. Press ‘Save custom domain’ to publish the new mobile site.

Although this application adapts a current website to be viewed on mobile phones with web access, it can still be useful to develop a site specifically for the mobile web. Some content might be particularly suitable for mobile phones: simple market price updates, for example. A separate mobile site could help to target the service to specific users by delivering only the most relevant information and including details that might not be relevant on the original website.

Related links

A detailed guide on using mobify.me, including tips for adapting the CSS code of the site
www.amystoddard.com/blog/article/making-a-mobile-version-of-your-site-wi...

To test the compatibility of any website for viewing on mobile devices, visit the Mobile Web Initiative homepage:
www.w3.org/Mobile

How to create a mobile web site from Mobiles in a Box
http://mobiles.tacticaltech.org/Howtocreateamobilewebsite

28 October 2009

Copyright © 2014, CTA. Technical Centre for Agricultural and Rural Cooperation (ACP-EU)