首页/Home Web Mobile (XHTML MP) Mobile Web Development: DOes & DON'Ts

Mobile Web Development: DOes & DON'Ts

PrintE-mail
Sunday, 20 July 2008 05:28  

Generally, these principles are for Wap 2.0 mobile web development, that is, based on XHTML-MP. Though Wap 1.0 is more widely supported, modern smart phones support more features and you can develop more attracting sites. If you choose to read the following of this page, probably you are not using Nokia 3250.

1. Character Encoding

    XML documents should always have a UTF-8 character set. The following line shows how to set correct encoding in an XML document:
    <?xml version='1.0' encoding='UTF-8' ?>

    Pages delivered with the text/html MIME type are assumed, by default, to be encoded using ISO-8859-1. If you are using text/html and delivering utf-8 you must set the HTTP Content-Type header to say so.

    If you are developing your Web pages in a Windows environment you should note that the default character encoding is often Windows CP 1252 - which is similar to, but not identical to ISO-8859-1.

2. Doctype Declaration

    Add the following line as the second line (The first line is the XML declaration):
    <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

    Note: If you choose to use that line, your code then should obey XHTML-MP 1.0  related markups.

    For more info: http://dev.mobi/content/fixit-xhtml-mobile-profile.

3. MIME Types

    For XHTML-MP, the recommended MIME type is application/vnd.wap.xhtml+xml or application/xhtml+xml. Unlike HTML, XHTML-MP should not be served as text/html.

4. Valid Markup

    You should use valid XHTML Mobile Profile for your pages. Non-validating markup may not display correctly or efficiently on mobile devices. In some cases, particularly on older phones, non-validating XHTML-MP will not render at all, and the user will see only an error message in their browser.

5. Page Title

    A short descriptive page title should be used for easy identification, but bear in mind that it may be truncated when displayed on a mobile device. Many devices use the page title as a default label for bookmarks, so your title should help identify your content.

6. Use Of Stylesheets

    Do not use in-line markup such as e.g. <b>bold</b> to vary the presentation of your page. Use of stylesheets helps with consistency of style and centralising style helps to reduce page weight.

7. Stylesheets Dependancy

    Your page should be organised so that if necessary they may be read without stylesheets. So don't use display or float properties.   

8. Large Graphics

    Images should be kept as small as possible. All images should be less than 200*150 px.

9. Image Resizing

    Images such as bitmaps have an intrinsic pixel size. Telling the browser in advance what the size is avoids it having to re-flow the page when it receives it. Resizing images at the server reduces the amount of data transferred and the amount of processing the client has to carry out to scale the image. If the specified with and height attributes match the intrinsic size, then the client does not have to do any work to resize the image.

10. Specify Image Sizes

    All images should be specified with width and height.

    Specify the width and height of images in pixels as attributes of the IMG element. This allows devices to leave space for the images when they arrive, which means that pages don't have to be re-drawn several times.

11. Image Maps

    Don't use image maps at all.

12. Alt Texts

    Provide alt text for all images in your page.

    Downloading images can increase the time to load your page considerably. Making your page readable without images allows your users to browse your page in text only mode, which reduces download times and cost. Where images are enabled textual descriptions can help them assess the page's usefulness prior to the arrival of images.

13. Measures

     Avoiding pixel and absolute measures allows the browser to adapt content to fit the display. An exception to rule is where an image has been specifically sized for a particular display. In this case references to the image in markup may specify the exact dimensions of the image in pixels, in order to help the browser to flow the page and avoid re-flowing it after the page has been retrieved. Use percentage and relative measures such as em, ex, bolder, larger and thick.

14. Objects Or Scripts

    Many mobile devices do not support embedded objects or scripts and in most cases it is not possible for users to load plug-ins to add support. Content must be designed with this in mind. Even where a device does support scripting, do not use it unless there is no other way of accomplishing your objectives. Scripting increases power consumption and so decreases battery life.

15. Auto Refresh

     Do not create periodically auto-refreshing pages unless you have informed the user and provided a means of stopping it. Auto-refreshes will incur extra download times and data charges.

16. Redirection

    Do not use markup to redirect pages, as this incurs the cost of downloading and processing a page. Instead you should configure the server to perform redirects using HTTP 3xx codes.

17. Default Input Mode

    Given the typical input limitations of a mobile device, the interface must as far as possible minimize user input. Where possible, use selection lists, radio buttons and other controls that do not require typing.

    Some markup languages allow the specification of an input mode, which is particularly useful in cases where user input is to be restricted, for example to numeric only.

18. Provide Defaults

    Pre-selected default input values should be provided for input elements where possible as this will reduce the amount of input a user must do on their mobile device.

19. Form Submit Buttons

    Unless you know that the device is capable of submitting a form without a submit control button (e.g. through javascript) then you should ensure each form in your page has a submit button. Otherwise users may not be able to use your site correctly.

20. No Frames

    Do not use frames as many mobile devices do not support them and because they cause a number of usability problems.

21. Pop Up Windows

    Don't use pop up windows.

22. Access Keys

    Providing an access key (keyboard shortcut) with a link gives the user a convenient way to access the link. Access keys are particularly useful when used consistently across a site as they enable users to jump quickly to their chosen sections, without having to scroll to find a link.

23. External Resources

    Each external resource listed in a page (such as images, stylesheets, and other objects) must be separately downloaded to the client device. This can add considerably to the time and cost of viewing a page.

24. Caching

    Using cache information can reduce the need to reload resources such as images and stylesheets, thus reducing download times and costs. Caching is particularly important for mobile devices due to the high network latencies typically experienced on mobile networks.

25. Structure

    It is good practice for all but the simplest documents to indicate their structure through headings and sub-headings. Using structural markup, rather than formatting effects, allows easier adaptation of content where it needs to be divided into several pages, as well as potentially facilitating access to the sections of the document that a user is interested in.

26. Tables For Layout

    Use of tables for layout purposes is considered to be bad practice, particularly for mobile devices. Complex layouts, such as tables or nested tables, are hard to render and are rarely appropriate to the mobile context.

27. Page Size Limit

    Page sizes (including images and stylesheets) should be kept small since large pages take longer to load and, on some networks, increase data charges.

 

回复

留个脚印儿吧.


回复