This blog post was provided by Elcom CMS to provide a concise and strategic overview for business and IT managers, about Mobile Web. It aims to provide strategic level insights into the topic of Mobile Web and its practical applications – by addressing the following issues:

• What is Mobile Web?
• Why it’s important (trends and business implications)
• Strategies to help implement Mobile Web capabilities (advantages/disadvantages)
• Mobile Web best practices
• Other considerations

What is Mobile Web?

Generally the term Mobile Web refers to the browsing of the internet from a Mobile Device, such as a phone, PDA or Tablet. These devices are portable, wireless enabled and oer users a convenient way in which to retrieve information, connect to friends and family and shop online.

The importance of the Mobile Web, reached a milestone in 2008 when according to the International Telecommunications Union (ITU), mobile access to the Internet exceeded desktop computer based access for the first time. From this point, there has been a growing need among businesses on how to best capitalize on and cater to this new demand.

Why It’s Important

Global Trends

Currently there are over 5 billion mobile phones worldwide in active use today – a figure which is approximately 4 times greater than Personal Computers. This automatically indicates that as ownership of mobile phones and other such devices continues to rise, so too does consumer demand to access the Web from mobile devices, whether it be in addition to or in replacement of traditional PCs.

There is an abundance of research in support of this notion. This is especially the case throughout 2010, whereby global Web traffic from mobile devices increased exponentially (124%). In North America, the Web traffic from mobile devices increased by 110%, according to the same study conducted by Quantcast.

On the other side of the world, mobile consumers in China have surpassed their American counterparts with regards to using the devices to access the Internet (38% of Chinese mobile subscribers compared to 27% of American mobile subscribers), despite less advanced networks.

Further to these current trends, Gartner Research states that “By 2013, mobile phones will overtake PCs as the most common Web access device worldwide”. In addition, while the number of PCs accessing the Web is predicted to be 1.78 billion units in 2013, the combined installed base of smart phones and browser-equipped enhanced phones is expected to exceed 1.82 billion units – surpassing PC access by almost 100 million units.

Business Implications

Every day, more and more consumers are using their mobile devices to access and retrieve information via their mobile browsers, view multimedia and other rich content, connect to social networking sites, and even make retail transactions. This diverse level of interaction between the business and its customers ultimately impacts all stages of the consumer purchase decision.

For example, if a customer cannot find a company’s website or other relevant information it seeks; or is unable to view this information because of a non-mobile compatible site, then their information search stage is severely hindered. This is also apparent when evaluating alternatives, as when a customer is unable to find or view the necessary information, then they would unlikely include that particular company’s product on their shortlist for purchase. Further to this, is the inability to actually make the transaction or appropriate call to action through a non-existent or non user friendly ecommerce portal for example, would ultimately serve to obstruct the actual purchase decision.

Web sites are generally designed for the large screens of desktops computers and laptops. However, mobile devices, even those with large screens like an iPhones, make it very difficult to browse, search for information, connect or transact. Some web site programming languages, including Flash, can’t be viewed on some mobile device operating systems, meaning that important messaging, even navigation, may not work for many web sites .

Therefore, it is particularly evident that in order for a business to effectively capitalize on this Mobile Web trend, its website content needs to be properly tailored for mobile devices. This will not only assist in acquiring a competitive advantage, it will also ensure positive interactions between the business and its customers.

Mobile Web Strategies

When selecting the most appropriate strategy to deploy, it is necessary to comprehend why and how the targeted users browse. Apart from convenience, a user can be time-poor and simply require quick and easy access to certain pieces of information such as a company’s contact details or brief product information. This is indicative of mobile browsers seeking answers to pre-defined questions, rather than an involved reading experience.

In addition, web design for mobile devices must account for differences in the browsers and the different screen sizes. While most mobile devices have screen sizes that are between 128×160 and 320×480, other mobile phones have screen sizes between 176×220 and 240×320.

After understanding these issues of context, design and mark-up, there are two primary strategies which can be utilized to achieve a functional and accessible Mobile site. A business can either select to keep one site for both PCs and Mobile devices, or create two separate sites.

One Site Method

The One Site Method can be executed using two main approaches:

1. User Agent Detection
2. Media Queries

The User Agent Detection approach involves repurposing content. This means that content which is created for a specific use (i.e. to be accessed via PCs), is automatically reorganized and converted for another use (i.e. mobile device compatibility). This is generally achieved through a user-agent detection code, which is able to detect the device a user is browsing from, and then automatically provide the user with the appropriate version of the website for that particular device.

The Media Queries approach allows websites to be tailored to a number of mobile devices, without having to change the content. When using CSS3, this is done by understanding the capability of the mobile device and then restricting the capacity of stylesheets, in terms of dimensions of the browser window, the dimensions of the actual device, page orientation and screen resolution.

When selecting either approach, under the One Site Method, a key question businesses need to ask themselves is whether they can in fact create a single site which will operate effectively over the two separate contexts. If the content on the site is not relevant or suited to a mobile device, regardless of how it is repurposed or how restrictive the stylesheets are, then it may be necessary to evaluate the option of the Two Site Method, which will be discussed in later sections of this paper.

Advantages – One of the primary advantages of the One Site Method is the ease of ongoing maintenance and administration. When content is automatically repurposed or restricted for a mobile device, any changes or modifications do not need to be duplicated across different sites. This also assists in version control and syncing, ensuring consistency across multiple Web properties saving time and reducing operational costs.

Furthermore, this automation also brings positive marketing implications, in that administering one site allows a business to more easily maintain brand uniformity and message consistency. A site that is repurposed for mobile devices retains all logos, positioning, content and functionality – it simply allows the user to view the web page in a size suited to mobile devices.

Disadvantages - The most immediately apparent disadvantage of the One Site Method is the propensity to push irrelevant content to the end user, or content which does not suit a mobile device.

As discussed previously, a user browsing from their mobile device is typically seeking answers to a pre-defined question, such as the company’s contact details or product range. A repurposed site could serve as a hindrance in helping to answer these questions, as there would be much more information for a user to navigate through, before finding what they were searching for. However, this is not absolute and its impact should be assessed on a case by case basis.

The other disadvantage of the One Site Method is that it can be slightly more expensive to implement. Cost will vary depending on the complexity of the site. For example, a plain text site being repurposed would be much cheaper to implement than a banking site which would involve repurposing complex applications.

Two Site Method

The Two Site Method involves redeveloping a site’s information architecture, thereby effectively generating two separate sites for users browsing on mobile devices and those on PCs. The site targeting PCs would be the standard site, with all available content and functionality, while the site targeting mobile devices would be a much more simplistic version of the main site, containing only a few key details and more simplistic functionality.

Some key considerations of this approach include the importance of ensuring content is simple and readable. This means selecting the content to be deemed most relevant (i.e. contact details, store locations, product range), and ensuring it is presented in a format which is easy to get to, and easy to read. Some other important features include installing a powerful search tool, buttons with direct access to relevant details and appropriate calls to action.

Advantages - The most significant advantage of the Two Site Method is the ability to better tailor content for mobile devices, and therefore only push what is relevant for this type of browser. This would in turn assist in better site conversions where calls to action are easily viewable, as well as providing a far greater user-experience than if a user would have to navigate through an entire site, in smaller dimensions, for a simple piece of information.

Disadvantages - The main disadvantage of deploying the Two Site Method is with regards to the increased amount of site administration and maintenance required. Any changes or modifications made to the main site, will need to be assessed and accordingly replicated on the mobile site. The modifications will be based on each individual site’s information architecture.

Best Practices

Upon selection of an appropriate strategy, there are a few rules or best practices which should be adhered to, in order to provide the optimum user experience. These are in conjunction with the aforementioned strategies and are as follows:

Thematic Consistency - This ensures that content is accessible on a variety of sites, regardless of the type of device.

Page Content and Layout - Designers should present context in a way that is suitable for mobile viewing. The text should be written in clear, simple language. Scrolling should be limited to one direction, as most mobile devices cannot support scrolling in multiple directions. Furthermore, if background images are used ensure that they remain readable on the device.

Provide a Consistent Experience - Sites should always be designed to meet the needs of Default Delivery Context. This will ensure that mobile users receive a consistent experience on all devices.

Testing – Designers should test mobile websites on emulators or actual devices. Emulators should be used with caution as they often behave differently than actual devices. Where practical, test mobile sites on as many actual devices as possible.

Refreshes, Redirections and Pop-ups – Designers should avoid pop-up windows on websites, as support for these on mobile devices is limited. Do not automatically refresh the page on mobile page designs. Alternatively, provide a means to turn the function on or off. Redirects only operate quickly if the server is configured to redirect with HTTP 3xx codes.

Resource URLs - Designers should strive whenever possible to keep URLs short for mobile devices. This will make it easier to type the information on the small cellular device. Designers should account for users linking to a site through a hyperlink as well as other sources.

Minimize Navigation - When designing for websites, minimizing navigation at the top of the page.

Minimize Links - Balance the number of links provided on the page.

Target Identification of Links - Mobile device users are often slowed by following links on websites. Always identify the target of the link to avoid unnecessary navigation onto the website, by users.

Image Maps - Designers are encouraged to not use image maps unless the device supports them effectively.

Externally Linked Resources – Externally linked resources may increase the load times of mobile context. These should be kept to a minimum.

User Input - Always keep the required number of keystrokes to a minimum. Ensure that labels will appear along with any related form entries. Provide default values to make selection easier.

Other Considerations – HTML5

When launching a site for mobile devices it is necessary to plan for issues such as cell reception and network instability. These occurrences are all highly likely, and can adversely affect the user-experience. An excellent way in which to limit the effect of 3G network problems is through the use of offine content delivery mechanisms, such as HTML5.

With HTML5, all content would be stored offine and no connection would be necessary to access to the website homepage or documents, emails and attachments, hosted on it. The applications of HTML5 are limitless. For example, fully functioning learning management systems (LMS) could be developed for mobile devices where students could have access to vital information whenever they need it.

Who is Elcom?

Founded by John Anstey in 1996, Elcom Technology Inc. (Elcom) is a globally recognized enterprise web content management solution. Elcom assists mid-market organizations achieve their online objectives for corporate websites, intranets, e-commerce portals, staff orientation and elearning through one powerfully simple, secure platform.