My Books

  • Follow me on Twitter
My Photo

Subscribe my blog

  • Get this widget from Widgetbox
  • Add to Google
  • RSS FEEDS
  • Enter your Email here to subscribe :



    Powered by FeedBlitz

Blog Widget by LinkWithin

« Opera Browser or Web Browser for S60 devices | Main | Business Intelligence in the VAS Marketing WAR for next Mobile Monday Italy »

How to make your site accessible for mobile

I've just finished to read and review the Mobile Web Best Practices 1.0. I took some notes and I want to make a summary of the paper.

So, what makes a mobile site accessible ?

Keep the URIs of site entry points short:
Typing URIs on mobile devices can be difficult, and it is expected that users will prefer to use alternative methods of obtaining URIs when available

Divide pages into usable but limited size portions:
If pages are too big they may take an unduly long time to load. In addition, mobile devices typically have restrictions on the largest page they can accommodate.

Limit scrolling to one direction, unless secondary scrolling cannot be avoided:
The page should lay out so that simple repeated scrolling in the same direction (axis) allows the user to experience all its content. However some content (such as maps and other images) cannot be displayed without secondary scrolling.

Provide a short but descriptive page title:
Provide a descriptive title for the page to allow easy identification. Keep the title short to reduce page weight, and bear in mind that it may be truncated.

Ensure that information conveyed with color is also available without color:
Mobile devices often do not have good color contrast and are often used in less-than-ideal lighting conditions.

Provide a text equivalent for every non-text element :
Downloading images to a mobile client adds to the time to display an image and the cost of displaying the page.

Making the page readable in text-only mode can help the user assess its usefulness before images arrive.

Provide informative error messages and a means of navigating away from an error message back to useful information:
It is inevitable that, on occasions, a mobile user will not be successful in accessing the content or information they sought. Providing easy navigation away from the error is particularly important in the mobile arena, where browsers may not have an easy-to-find "back" button, where contextualization is frequently difficult and where re-entry of URIs as a means of error recovery is particularly difficult.

Navigation methods for Mobile sites

Provide only minimal navigation at the top of the page:
Provide basic navigation, which should be placed on the top of the page.

Provide consistent navigation mechanisms:
Using the same navigation mechanisms across a service helps users orient themselves and allows them to identify navigation mechanisms more easily.

Assign access keys to links in navigational menus and frequently accessed functionality:
Where there is no pointing device, assigning an access key (keyboard short cut) to a link can provide a convenient way for users to access the link and avoid navigating to the link by repeated pressing of the navigation key.

Clearly identify the target of each link:
Users of mobile devices may suffer undue delay and cost as a result of following links.

Keep the number of externally linked resources to a minimum:
Each linked resource (images, style sheets and other objects) requires a separate request across the network. This may add significantly to the load time of the page in the mobile context.

User Input Advice

Keep the number of keystrokes to a minimum.
Avoid free text entry where possible.
Provide pre-selected default values where possible.
Specify a default text entry mode, language and/or input format, if the target device is known to support it.

NOT TO DO

Do not use image maps unless you know the target client supports them effectively
Do not use graphics for spacing.
Do not use pixel measures and do not use absolute units in markup language attribute values and style sheet property values.
Do not rely on embedded objects or script.
Do not use images that cannot be rendered by the device. Avoid large or high resolution images except where critical information would otherwise be lost.
Do not cause pop-ups or other windows to appear and do not change the current window without informing the user.
Do not create periodically auto-refreshing pages, unless you have informed the user and provided a means of stopping it.
Do not use markup to redirect pages automatically. Instead, configure the server to perform redirects by means of  HTTP 3xx codes.
Do not use frames.
Do not use tables unless the client is known to support them.
Do not use nested tables.
Do not use tables for layout.
Where possible, use an alternative to tabular presentation.
Do not rely on cookies being available.
Do not rely on support of font related styling.

DON'T FORGET TO :

Ensure that content is suitable for use in a mobile context.
Organize documents so that they may be read without style sheets.
Use style sheets to control layout and presentation, unless the device is known not to support them.
Keep style sheets small.
Use clear and simple language.
Limit content to what the user has requested.
Resize images at the server, if they have an intrinsic size.
Create documents that validate to published formal grammars.
Provide caching information in HTTP responses.
Ensure that the overall size of page is appropriate to the memory limitations of the device.

Comments

Ciao MArco

nice sets of information.
I am playing with Flash Lite in the browser of my N91 and it's pretty cool. It will be intresting to see the integration of the browser FL and mobile web pages.

Alessandro

I can find the prayer I want. I thank God for this website.

I praise God for answering my prayers. God, you are so wonderful, majestic. Jesus Christ, I adore Your Sacred Heart.

This website is very nice and colorful too. Its nice to have something to show others where you attend church and to show all the smiling people filled of the goodness of the Lord. You have a wonderful website here. May God rich bless you always.

Pretty nice site, wants to see much more on it! :)=

Verify your Comment

Previewing your Comment

This is only a preview. Your comment has not yet been posted.

Working...
Your comment could not be posted. Error type:
Your comment has been posted. Post another comment

The letters and numbers you entered did not match the image. Please try again.

As a final step before posting your comment, enter the letters and numbers you see in the image below. This prevents automated programs from posting comments.

Having trouble reading this image? View an alternate.

Working...

Post a comment

Pistach.io

Speaker at

WebDeveloper's Journal Author

  • My favourite Flash Lite 3 mobile phone
  • Web Developer's & Designer's Journal by Sys Con Media
  • Web Developer's & Designer's Journal Blogger
    Web Developer's & Designer's Journal by Sys Con Media
  • FullAsGoog Aggregator
  • Macromedia WebLogs Aggregator

July 2009

Sun Mon Tue Wed Thu Fri Sat
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31