You are viewing our old blog site. For latest posts, please visit us at the new space. Follow our publication there to stay updated with tech articles, tutorials, events & more.

Short Primer on our experience on developing Mobile Websites

Friday, May 22, 2015 | By
0.00 avg. rating (0% score) - 0 votes
Sale of Smart phones and tablets have seen a phenomenal growth over past few years. More and more people are now using mobile phones for shopping, entertainment, finance, health and even job search. Almost every company now has a mobile presence i.e. they either have a mobile app or mobile websites or both.
For the uninitiated, mobile website is simply a normal HTML or HTML5 website optimized for display on mobile. It has a responsive design with very limited features as compared to full fledge desktop website. They run in the mobile web browser. They do not have access to device features like camera, phone book etc.
Mobile apps on the other hand are applications, which are installed on the devices (android or iphone) and have access to device features (camera, phone book, photo gallery etc.)
Why create mobile websites?
Mobile apps are a rage these days. Companies are shelling out money in order to boost their mobile app downloads. So a natural question arises as to why bother creating a website when world is moving towards apps. There are few good reasons
  1. Mobile web browser is an important channel for engagement with users. Still many users prefers using web browser over apps.
  2. Creating and maintaining a mobile app is costly and time consuming. One needs to build app for different OS (like Android/iOS/Windows).
  3. Some Apps cannot be installed on every mobile or smart phone device (due to limitation of memory, CPU etc.)
On other hand, creating a mobile website is cheaper and easier to develop/maintain. It can run on most of the devices which have web browser installed. So while apps are the future for any business in long term, having a mobile website is the bare minimum solution for growth.
However depending on the complexity of business and resources at hand, one can go for mobile apps even before creating mobile website.
What are the challenges in creating mobile websites?
Developing an application for mobile is way different from a desktop application development. Some of the challenges are
  1. Low real estate in terms of display – No matter how big is your mobile device, still the real estate available for display is limited. Not every feature can be added on the mobile website. From a usability perspective, scrolling horizontally/vertically should be minimal. It becomes a challenge from a UI/product perspective regarding what feature to include and what to remove and how to present different features.
  2. Limitations in terms of data transfer – Mobile data plans are still very costly and data speed slow (even on 3G) with frequent network issues. As a result designing a mobile website with as low data size as possible is a challenge.
  3. Limitations in terms of memory/CPU/battery – Unlike desktop, mobile devices have a very limited CPU/memory. As a result, use of javascript should be as low as possible. There is a direct correlation between use of javascript and usage of CPU/battery. Richer the UI effects and animations, slower the website and higher is the battery consumption.
  4. Maintaining different code bases for mobile website UI and desktop UI. However backend code can be kept same. Still if you have a legacy code than you may be need to restructure your code a bit to enable common backend code.
  5. Different behavior of UI code on different OS+Browser code – e.g. one UI element may display differently on Android Chrome and Windows IE. As a result, maintaining a consistent UI is a challenge across multiple devices. However this can be minimized with the use of Javascript frameworks like jQuery Mobile.
  6. Testing on different devices – Identifying and setting a baseline for the devices on which mobile website will work is a challenge. There are thousands of combinations of devices and browsers. Testing on each and every device is physically not possible due to limitations of cost and time.
What technologies to use?
  1. Mobile Website frameworks – There are many mobile website framework available in the market which helps create mobile optimized websites very fast. Some of the prominent among them are
·         Jquery Mobile
·         Sencha Touch
·         Kendo UI
These frameworks help creating designs which will work seamlessly across different mobiles, saving much of development cost and time. They also support touch support for most of the smart phones available in the market.
2.     HTML5
3.     CSS3 and Media queries for responsive design
Tips for creating awesome mobile websites
  1. Image optimizations – Images should be used as little as possible (due to bandwidth limitation). Use css sprites or font-awesome for different icons.
  2. Minimal use of Javascript – Since Javascript increases CPU and battery usage and also does not give good experience on low end mobile.
  3. Debug using desktop browser and mobile user agent – In order to test and debug mobile websites, quick way is to test it on desktop browser using firebug and changing user agent (to any mobile device). User agent can be changed via various freely available plugins.
  4. Identify top mobile devices used by your users through google analytics – Use top 5-10 devices for testing, since it is not possible to test on each and every device.
  5. Keep the UI elements as simple as possible so that mobile experience is easy and consistent across all devices. Using too many animations, pop up boxes, scroll effects will degrade performance and experience.
  6. Plan SEO of your mobile site right from the beginning. Google now gives lot of weightage to sites who have mobile presence and adopt its SEO guidelines for mobile.
  7. Use Google tools to identify problems related to speed, performance and SEO and plan accordingly.
This short guide is not exhaustive and there are many things that needs to be planned and executed before you roll out your mobile website. However this primer can certainly help you avoid pitfalls involved in mobile websites.
Posted in General