How does the development of a mobile website diffe

问题:

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?

回答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.

回答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.

回答3:

I'm afraid you cannot use current asp-View to mobile especially for iPhone. There's special control set for iphone development - componentone.

If you web application is based on MVC or MVP patterns then moving will be not difficult.

回答4:

Recently we have developed a site for iphone users, we are using asp.net/sql for normal site. But when you look at mobile sites, mobile normally have small screens and some time optimization problem.

We use jqtouch for mobile development. A JQuery plugin for mobile web development on the iPhone,Android, iPod Touch, and other forward-thinking devices.

Learning Video

Getting started

回答5:

Establish the context for the mobile site: is there subset of information that is more relevant to your mobile users? Maybe your regular site has apps that are irrelevant on mobile devices? Either way, you should create your mobile site separately in a mobile folder! You can then use a sub-domain to reach it: for example, http://m.mysite.com

You can use a combination of CSS Media Queries and 51degrees.Mobi to detect browser features and render the correct size layout depending on which type of device the user has.

http://html5boilerplate.com/

http://www.modernizr.com/ (this is included in HTM5 Boilerplate)

http://51degrees.codeplex.com/

Do not make the stupid mistake of following current fads like "Responsive Web Design" which attempts to squeeze a desktop version of a website into a mobile screen. Above links should get you started.