Optimizing website for mobile devices

Question

I am developing a website exclusively for mobile browsers. What guidelines should I follow to optimize the site for mobile development? My main concerns:

1. Most mobile devices have propriety browsers. How can the app be tested on those different browsers (testing on an actual device is not possible due to security restrictions)?

2. How to optimize the site for different screen sizes?

3. How to make the app touch friendly?

4. How to detect orientation of devices (in devices that come with an accelerometer)?

5. How to check that the device is not a desktop/laptop?

Answer 1

Things that I have used when designing mobile websites.

1. Find out the range of devices that you are planning to support. Some questions that you can ask are
   • Are u going to support only smartphones
   • What platforms are u planning to support ( iPhone, Android, Symbian ? )

A lot of you questions can be answered by the kind of Analytics that you are able to gather. If you have very less statistics then you can follow this strategy to start with.

1. Separate out the target range of devices into

   • simple ( basic phones with minimum browsing capabilities. ) - Design a very simple plain vanilla site for them.
   • medium ( older generation smartphones with browsers with poor javascript support ) - Design a site that has slightly better features.
   • Highend smartphones ( iPhone, Android, WebOS ) - Provide jazzy features that these phones support.

2. Use a device detection library like WURFL / .Mobi for device detection and WALL for dynamic rendering of content.

3. You can use .Mobi to detect an HTML5 compliant mobile browser. That way, you can take advantage of HTML5 capabilities in the devices that support it.

4. For testing you can follow this approach

   • test on browsers - Firefox / Safari / Opera have plugins to alter USER_AGENT and can simulate mobile testing.
   • Test on simulators - All the device platforms provide free to download emulators
   • If needed try device emulation products like device anywhere / perfecto.

I hope I was able to clarify atleast some of you questions. :)

Answer 2

The definitive guide has to be the W3C Mobile Web Best Practices: http://www.w3.org/TR/mobile-bp/ Don't let the length of it put you off - I find it much easier to read than other W3C specs. The key section is the Best Practice Statements, divided into bite-size chunks, often with an example. There's also a recent and extensive mobile web optimization guide here: http://dev.opera.com/articles/view/the-mobile-web-optimization-guide/ (disclaimer: I work for Opera)

Answer 3

5.How to check that the device is not a desktop/laptop?

Please take a look at http://51degrees.codeplex.com/. It is an ASP.NET open source module which detects mobile devices and provides auto redirection to mobile optimized pages when request is coming from mobile device. It makes use of WURFL mobile device database. For redirection there is no need to modify existing ASP.NET web application pages.

Apart from this it also gives upto-date mobile capability information like manufacturer, model, screen height & width, image formats supported and MANY MORE...... which helps to customize pages for best mobile output.

Answer 4

Q1 Most mobile devices have propriety browsers. How can the app be tested on those different browsers (testing on an actual device is not possible due to security restrictions)?

The answer depends on how many devices you want to test and support.

iPhone: device and simulator are available. Android: devices and emulator are available

Other mobile phones?

check http://www.deviceanywhere.com

Of course, you need to pay service fee. But i think its reasonable.

Q2 How to optimize the site for different screen sizes?

iphone4 WVGA854 WVGA800 VGA HVGA QVGA QCIF+

Making contents for all different size is difficult. So have to make a choice about screen size and supported models.

Q3 How to make the app touch friendly?

It is your design issue.

Q4 How to detect orientation of devices (in devices that come with an accelerometer)?

Android and iOS has special message about such event. You have to follow such message. Of course, you need both landscape and portlait layout.

Q5 How to check that the device is not a desktop/laptop?

You can use User-Agent header or IP address. But IP address is not good method.