Often times it is so obvious that we follow the same approach as a typical desktop web application development and follow the same well known best practices to design a Mobile based web application also. However sometimes we will not realize if the typical desktop approach fits perfectly or not until we htt some road block.
Here I will try to share some of the critical issues that we have faced with one our mobile web application and best practices we should have carefully considered before starting the project.
There is plenty of information available about the Mobile Website best practices . Please carefully considered each of the best practices .This is one of the best documents that you should consider reading : http://www.w3.org/TR/mobile-bp/
Some of these best Practices covers both visual design and technical aspects you should consider while developing mobile websites to improve the user experience of the web site on mobile devices.
And each of the project is different from another project , so there is no guarantee that these best practices fits your project or not . So please use below steps for your information sake only.
Devices
- Clearly understand the devices you are going to support and try to exploit all the device capabilities to provide an enhanced user experience
- Plan the important and widely used devices which should be given the priority while designing the mockups , because often times IPhone users will be given some preference over other browsers and more over each of the different devices comes in different screen sizes , so same mockup doesn’t fit perfectly in all the browsers.
- Limit scrolling to one direction, unless secondary scrolling cannot be avoided.
- Try avoiding the popups as much as possible
Unit Testing
- Perform Unit Testing on actual devices not only on emulators
- Often times we will perform the unit testing on Emulators , but there are quite a few behavioral differences between emulators and actual devices, so perform UI compatibility validation on real time devices once HTML mockup’s are received plan to carry out testing on actual devices
Behavioral differences
- There are quite a few behavioral differences between mobile browsers & regular browsers
- Regular website strategies & best practices might not work properly in mobile devices , so don’t rely on regular website design strategies
- Do not rely on session cookies being available for mobile website design
- Plan to handle session management without relying on the mobile browser cookie management
Navigation
- Provide only minimal navigation at the top of the page
- Older OS mobiles doesn’t support CSS property “position: fixed” . Plan to handle these cases differently
Search
- Take into account the trade-off between having too many links on a page and asking the user to follow too many links to reach what they are looking for
- Provide a filter kind of options to user to reduce number of key strokes or scrolling
- Provide pre-selected default values where possible.
Performance
- Do not use client side script heavily for the functionalities like auto redirection etc… Instead, design so that most of thees functionality are handled at the server side
- Ensure that the overall size of page is appropriate to the memory limitations of the device and ensure to design the page considering the limitations well in advance
- Keep the number of keystrokes to a minimum.
Videos
- You may run in to videos not playing in certain old the mobile devices(Android 2.1 ,2.2)
- User HTML 5 <Video> tag for videos
- Remove type and codec’s attribute from the source(<source src=”videos/movie.mp4″ type=’video/mp4; codecs=”avc1.42E01E, mp4a.40.2″‘>) for videos to play properly in old devices
- Keep the video size below 20 MB
- Keep the video screen resolution to 400 * 224
- For videos to display on Firefox add an .webm version of the same video
- Add MIME Types to .htaccess file of the webserver
- Do not rely on embedded objects or script.
BackButton
- You may face the issues with device back button , if we go back and forth between the pages using the mobile device back button the site will look completely broken, this happens in older Android OS mobiles.
- To fix this issue add hashListingEnabled: false to the script.
Example:
$.extend( $.mobile , {
hashListeningEnabled: false
});
- One disadvantage to this approach is if we have any dialog window in the site it will not work properly, to avoid this add:
$(document).delegate(‘div[data-role=dialog]’, ‘pageinit’, function() {
$.extend( $.mobile , {
hashListeningEnabled: true
});
});
Images
- When using background images make sure that content remains readable on the device.
- Ensure that foreground and background color combinations provide sufficient contrast to satisfy for different mobile devices & screen resolutions
- Do not rely on support of font related styling
- Break the sprite image in to small sprite images
- Specify the size of images(Width & Height) in the markup
- Avoid large or high resolution images except where critical information would otherwise be lost
Error Messages
- Plan ahead for the error pages or error message
- Provide informative error messages and a means of navigating away from an error message back to useful information.
Other Best Practices :
- Check for W3 Standard errors
- Follow the best SEO optimization techniques
- Provide the Mobile site specific sitemap.xml for SEO
- Do not use pixel measures and do not use absolute units in markup language attribute values and style sheet property values
- Keep the number of externally linked resources to a minimum.
- Limit content to what the user has requested.
- Provide a short but descriptive page title.
- Do not use frames.
- Where possible, use an alternative to HTML table tag
- Ensure that content is encoded using a character encoding that is known to be supported by the device.
- Keep the URIs of site entry points short.
- Provide caching information in HTTP responses.
Space Age Racer 