Developing for Mobile Web

May 25th, 2011

In the past few years there has been a significant and well publicized push toward the development of websites that properly display on mobile devices. Publicity would lead one to believe that this mobile device demand is being driven solely by the launch of the iPhone/iPad. Without trying to take anything away from Apple, the utilization of the Android operating system (OS) is prolific and according to some studies, will actually lead in market share within the next year or so. In addition, there are the Windows Mobile OS, Palm OS and the Blackberry OS as well. The arguments regarding which operating system is bigger and better can be waged incessantly but the bottom line is that the affordability and availability of mobile devices have fueled a demand for mobile web development.

The fact that websites display differently on mobile devices has changed the way developers handle web development and has presented fresh challenges that are promulgating a slew of innovative solutions. The fact that mobile devices do not behave consistently across the various brands and platforms, adds to the challenges of mobile web development. Today, websites must be compatible with both desktop and mobile platforms.

The purpose of this article is to provide an initial entry into the various aspects of mobile web development that require your consideration in order to effectively arrive at a viable solution for the presentation of your information on a mobile device. We will pose a series of questions followed by the presentation of information for your consideration. Please remember that we mentioned earlier that innovation was the key to developing effective mobile web solutions. You can consider the following information “food for thought” rather than a recipe for mobile web development.

Is it necessary?

This is an important question because modern mobile devices typically feature a fully functional web browser. In most cases, a standards compliant web site will render without any issues on mobile devices. The decision needs to be made on whether alterations to the existing standards compliant website are even necessary. Sometimes, you may just be over-thinking the need for mobile web development without evaluating how the targeted mobile devices are displaying your existing website. You may not need to change anything. Then again, do not assume anything. Check it out and then make your decision. Look to see what your viewers are going to see before your viewers see it.

Is the current site media rich?

If the current website is media rich then it could present problems for mobile devices by causing extended load times or increased data usage. Furthermore, certain technologies such as flash are not supported by mobile devices. If the site is heavy in media then it is probably worth considering a mobile version of the website that strips much of this media out. Do not go overboard however, in removing or avoiding graphic presentation. In the early days of mobile devices, “text” ruled. New mobile rendering technology provides greater capability today to successfully display graphics more effectively. Do not misinterpret mobile display nuances as debilitating issues. Make good decisions in displaying an adequate amount of graphics to complement your message. There is a balance between boring the viewer with endless copy, versus putting the viewer to sleep waiting on graphics to load, versus frustrating the viewer with poorly displayed websites – particularly after waiting for an endless period of time and then being unable to view the screen anyway. This is adding insult to injury and you can kiss your viewers good-bye.

Is there a specific mobile device that is being targeted?

The three most popular mobile devices on the market today are Android, iPhone and Blackberry and all three of these devices feature a fully functional browser. However, the iPhone supports specific html and css capabilities that allow a web template to be designed in such a way that it looks like a native iPhone interface while the other two operating systems do not provide the same level of support. The result is that, depending on which devices are being targeted, multiple templates may need to be considered for the optimal viewer experience. Preferably, one general set of development parameters should be set in place upfront that would provide an effective mobile web solution for the greatest number of mobile devices. This approach features a single template with consistently designated display widths and simplified navigation.

Is the current content readable on mobile devices?

Color contrast and font sizes all play a role in how well the text can be viewed on a mobile device. If you are evaluating an existing website, consider the limitations in using a mobile device to view the website. These include limitations in: the controls, the size of the screen, memory, bandwidth, available type fonts and colors.

If you are developing a new website, you have greater flexibility. Identify your mobile considerations upfront to establish awareness, complete your primary design, determine any need for adjustments and finalize the design and layout. Be sure to thoroughly and objectively evaluate your design and layout to verify the readability of your content and the visual appeal of your graphics. Upon completion, make sure that you test all links for accuracy and proper functionality.

Does everyone have the same mobile device you use?

While the site may be perfectly viewable on your iPhone for example, your website visitors may not all be using an iPhone. Consider multiple operating systems – at least the major ones – when determining the compatibility of the website with viewers’ mobile devices.

In Summary

As you can imagine, developing for mobile devices is not a cut and dry consideration with right and wrong steps to completion. Conversion of an existing website to mobile compatibility may not always be the most economical or effective solution. Conversion of an existing website is something that needs to be carefully evaluated in terms of specific mobile user requirements and website owner expectations in order to see if a solution can be delivered to the satisfaction of all parties.

We cannot emphasize strongly enough that mobile platforms do not all function in the same manner and that some of the mobile devices, iPhone in particular, are unique cases that can at times require unique solutions when compared to other operating systems. The level of effort, and therefore the cost to develop a mobile website, hinges on numerous variables. The development challenges are not overwhelming by any means and the opportunities for innovation are exciting and steeped in benefits for mobile website users and providers alike.

Since most mobile devices can render standards compliant websites properly, it stands to reason that most existing, “standards compliant” websites are generally mobile ready – but not necessarily mobile optimized. Of course, developers can create an entirely separate mobile version of the website as well. This approach typically lends itself to producing a “dumbed down” website however that does not always appeal to the viewer. It may be an economical approach but not necessarily effective in communicating with the target audiences. Knowledgeable developers can effectively evaluate existing websites and add code to optimize it for the targeted mobile device operating systems. New website development of course should always be geared toward presentation on mobile devices. The use of mobile devices is growing at a rate that cannot be overlooked.

Where does your website stand in the world of mobile devices? Are you missing a significant number of mobile device users, one of which could be your next largest customer?