Building mobile-friendly websites

Mobile Devices have become very vital in accessing and using web applications in the society today. They are being used on a momentary basis for different type of activities. From making online bookings for seminars/conferences while on the way to catching a flight to checking bank statements and carrying out bank transfers, catching up with the latest news/information in business, sports, etc; they have integrated into our society and have become tools for accomplishing very varying types of tasks while on the move.

Several technologies exist for delivering web content to these devices. These include developing a separate website for mobile users (mobile site), developing a separate template for mobile devices (mobile theme), developing a native app for smart phones (mobile app), developing adaptive websites (responsive web design), etc.

Based on issues that arise from the use of mobile devices to access web content such as the relatively small screen sizes, mobile operating system capabilities, etc, it has become imperative to deploy the most ideal technology when delivering web content to mobile users. The following are various ways of developing websites for mobile devices:

1. Mobile Site

This involves developing a separate website for mobile devices. This implies that desktop users will be expected to use the desktop site while mobile users, the mobile site. Issues arise with this and they will be detailed in the next section. An example of this is that of Yahoo Inc. which has ‘yahoo.com’ as the desktop site and ‘m.yahoo.com’ as the mobile version.

Advantages:

1. Relatively cheap to build and deploy
2. Minimal development time is involved
3. Content source can be the same as desktop site
4. Some specifications can be defined for the mobile site, in terms of content and features

Disadvantages:

1. Due to minimal resources, certain features on the desktop site may be unavailable
2. Users need to keep in mind the different web addresses for the desktop and mobile sites
3. As two separate entities, they will have to be updated and maintained separately
4. It could result in non-uniformity or inconsistencies for user experience between the desktop and mobile sites.
5. It is usually developed with a particular screen size in mind, thereby meaning some mobile users might still not get have an ideal user experience when access the website

2. Mobile Template

This involves building a website to have two templates, one for the desktop and another for mobile devices generally. So, when a user makes a request for the web content, the website is built to detect the user agent and responds appropriately by serving either the standard template for a desktop browser or the mobile template for a mobile browser (NewCity, 2012).

Advantages:

1. Cheap to build and deploy
2. Minimal development time
3. It does not require a different web address
4. Content source is same with the desktop site

Disadvantages:

1. It needs to be regularly maintained and updated to keep up with newer versions of mobile browsers
2. It serves the same design/layout to all mobile devices regardless of differences in device type, features and capabilities
3. Alterations on the site architecture for the desktop template will have to be implemented on mobile template as well

3. Mobile App

This involves developing a software/application that behaves like a website, which can be downloaded and installed on mobile devices. The app connects to a web server via an API to serve content to the mobile user. These needs to be developed bearing in mind the device it is being developed for; receiving standard build instructions from the company/organization that owns the device.

An obvious issue with this is the fact that mobile devices run on different operating systems, so to deploy a single website as a mobile app, different versions of the app will have to be developed for different mobile devices in the market today. That implies that a single mobile app could have to be written in C# or Silverlight for Windows Phones, Java for Androids, Objective- C for iPhone and J2ME for Blackberry RIM (Sodnik, 2012).

These mobile apps are sold via authorised online stores such as Apple’s App store, Blackberry’s App World, etc. The device vendors usually charge a commission for every sale of an app for users of their mobile devices.

Advantages:

1. Mobile Apps have the capability to provide information even if there is no connection to the Internet, as the app could have its own database from where information is fed to the user
2. They are the most ideal for web applications that involve a very high interactivity level, such as for map applications, games, bookings, etc.
3. It can easily access the features of the mobile device such as camera, geo-location tools, etc

Disadvantages:

1. It requires a relatively long development time
2. It is relatively an expensive venture and may only be suitable for very large organizations
3. It requires a steeper learning curve, as it involves the use of general programming languages as opposed to other options which are predominantly developed with web-specific programming languages
4. For a single web application, several mobile apps will have to be developed and maintained for different mobile devices
5. The need to conform with strict rules and standards set by manufacturers of mobile devices
6. Users need to keep installing updates which could be an issue based on real time locations
7. Not ideal for a small/medium-sized organisation based on the financial implications
8. Content may be outdated if the mobile app has not been updated to a newer version as having an up-to-date mobile app depends on the user
9. It does not replace a website, rather it can only run alongside one

4. Responsive Web Design

Having discussed this concept, the advantages and disadvantages are as listed below:

Advantages:

1. Cheap to build and deploy
2. It does not require a different web address for a mobile interface
3. Information source is same, irrespective of the device type being used to access the web application
4. They are built with portability as a key factor; rendering well on different devices either mobile or stationary
5. They offer consistency across devices, thereby contributing to the brand identity for organizations
6. Search Engine Optimization is only implemented once and applies to finding the web application using any type of device.

Disadvantage:

1. It might be quite difficult to build responsiveness into an existing web application

5. Hybrids

Also, hybrid implementations exist, in which case, two or more of the options discussed above are implemented together. One of the most common is developing a mobile website that is responsive in nature and this can be found in the case of prominent websites such as the social networking giant; Facebook which has “facebook.com” as the desktop site and “m.facebook.com” as a responsive mobile site and BBC with “bbc.co.uk” as the desktop site and “m.bbc.co.uk” as their responsive mobile site.

These companies/organizations also have native apps developed for different mobile device platforms which offer mobile users a choice between the responsive mobile site and the native app.

• By: Segun Adedugbe (Consultant, Cittrex)
• 07/12/2012