How does the development of a mobile website differ from a normal one?

Question

We are going to redevelop one website we developed as an ASP.NET website to be a mobile one. So, I'm wondering how does the development of a mobile website differ from a normal one?

Also, what is the best approach to do this taken in consideration that this mobile website will be browsed mainly from iPhone?

Answer 1

There are a number of differences between a mobile device and a standard computer.

• The screens are much smaller (fewer pixels to display your page). You should put fewer elements on each page.
• They are typically viewed in portrait mode (narrow display - narrow page). You should plan on using the full width of the screen instead of setting a fixed page width like most people do on standard web pages.
• People use finger gestures to manipulate the page instead of a mouse (buttons/links should be larger)
• They can include additional features such as geo-location, telephone, etc. that you can incorporate into your app to be easier to use. There are some libraries available to help you use these, such as jQuery Mobile.
• Users are concerned about battery life plus the CPU tends to be slower. Make sure you keep animations and client side processing to a minimum.
• Users are concerned about data usage. Keep ajax calls to a minimum (don't ask the server for data every few seconds!) and use graphics sparingly (it's better to use html/CSS to make the page attractive).
• Flash isn't supported on iPhone and is not well supported on other devices. However, most mobile devices have decent support for HTML5, so you can typically use that instead.

Answer 2

Users on smartphones are used a different experience.

In addition to Brian's answer I'd add:

• Screens are not resized but scrolled, however sides scrolling is not generally a good experience
• Screens orientations can change, but the same scrolling rules apply
• Consumers are used App like behaviour and as such less information with backwards and forwards between pages is common and between sites
• Consumers generally have data concerns so data traffic needs to be minimised
• Controls/buttons/selections/data entry need to optimised for hand gestures - for example think of what happens with the keyboard pops up to allow data entry, how much screen is available - can the see all their input easily if they need to?

I suggest that for developing a mobile website is to use the target smartphone for a few weeks to understand how the device is used in the real world.