Good mobile project - what is it?

In the light of the growing interest in the mobile Internet, the development of 3G and other things, in the near future we can expect an explosive growth of web projects focused on pda and cell phones. It should be borne in mind that approaches to the development of mobile sites and “for a large web” are completely different. This means the optimization of interfaces in the transition to the mobile web, significant differences in layout, navigation and so on. Below I have tried to highlight the main points that will help make the life of a mobile device user a little better and more pleasant.


1. Display the information correctly.
From the user's point of view, the entire contents of the site page can be divided into three groups:

1. Content - the information for which the user went to the page (went to the site in general) - text, image, links to video or other resources, etc.
2. Navigation - site controls - links to other site pages, fields and form buttons.
3. The background is something that is of secondary importance to the user, of secondary importance or does not matter at all - the site header, section headers, ad units, counters, copyrights, design elements.

Due to the limitations imposed by the screen size, the user can see only a small amount of information at a time. This is one of the main differences between the mobile Internet and its elder brother, and it requires special attention. Each page of the site should be designed in such a way as to provide the fastest, easiest and most convenient access to content and important navigation elements. It is worth paying attention to the following points:

• The smaller the height of the header on the page (within reasonable limits), the better. It’s terrible to see the same image in a third of the screen instead of the desired content each time the page loads. One of the best options is to create two options for the header - full-size for the main page and as narrow as possible (15-25px) for everyone else.
• The closer an object is to the top of the page, the easier it is for the user to access it. This means that one should adhere to the principle of placing information in descending order of importance - first of all, the content for which the user came to the page, then the key navigation elements, then the rest.
• Position information compactly. Avoid the abundance of large fonts and unnecessary vertical spacing between lines and objects.
• Try to give short names and links to titles. If they fit in one line - this is an extra touch to a good appearance.
• Do not overload the design with unnecessary graphics and secondary elements.

')
2. Keep user action to a minimum.
It should be understood that web surfing and information input using mobile devices at this stage of their development are associated with a number of certain inconveniences. These include sequential navigation (step-by-step movement of the cursor from the first element on the page to the last), inconvenient text input from the keyboard, lack of multi-windowing, etc.

• Save the data entered by the user and substitute them as default values ​​next time.
Example: substitution of the login of the last user in the authorization form, storing the search settings, etc.
• Make registration as simple as possible. Demand it only where it is really necessary.
• Actively use accesskeys. Assign the same accesskeys to the same actions — for example, let [0] be tied to a link to the main page everywhere, and [4] and [6] are responsible for page paging.
• Try to minimize the number of clicks required to perform an action.
Example: A common mistake is the creation of "intermediate" pages containing only text like "Registration completed", "Your message has been sent", etc. and the "Continue" link. In most cases, these messages should be displayed immediately on the following pages, along with the content.
• Give the user the opportunity to personalize your service, i.e. customize it "for yourself." If you provide a poster or a weather forecast, let him put on the main page that cinema or city that he needs. If there is an opportunity to comment on something - give the opportunity to specify how many comments to display on the page (as well as the output order). Separate functionality and settings. Take out the settings in a separate section, so as not to overload the pages with additional elements.

3. Minimize traffic
Internet access via GPRS is still too slow and too expensive. To save the user money and time:

• Be sure to optimize the size of the output images. Ideally, select an image option according to the size of the user's screen.
• Make a lite-version of the site - without the secondary images (for example, avatars) and the maximally reduced header (or no header at all).
• Put in order the html-code, remove extra spaces, comments, avoid long id, name and class names.

4. Watch for validity.
Most standard mobile browsers are extremely demanding on the correctness of the resources they receive. This means the following:

• Project pages must comply with XHTML Mobile specifications ( validome.org can be used for verification)
• CSS must be valid (http://jigsaw.w3.org/css-validator/)
• Layout should be as simple as possible (as well as “stretching”, single-column, cross-browser, and using a div).
• Consider the limitations imposed by some devices.
Example: some outdated phones do not work well with pages larger than 40-50kb by volume, or “slow down” when a page is displayed that exceeds a certain number of characters.
Example: Most Motorola phones incorrectly handle the tag — bold characters are replaced with unreadable squares.