Contact US : 01233 663 205
Follow us :
Newsletter :
Follow us :
Newsletter :
News
The Mobile Revolution
The mobile web market has dramatically increased in recent years. In 2010, about 250 million Smartphones were sold in the world and according to Park Associates, these figures should be quadrupled by 2014. By this date, this increase in internet connected Smartphones will have increased the total number of internet mobile users to a total of about 1 billion.
To compare this data with the PC market, its total users stands at a total of 2 billion PCs users at the end of 2010 and this market is expected to develop but at a much slower rate than the Smartphone market for 2 main reasons:
As a result of this trend, mobile websites for smartphones and tablets are developing dramatically and will become play a key part in providing information and services online. However, they have a very different use from a standard website and present technical constraints that it is very important to be aware of.
1. The era of Mobile Web
a) A very different usage
Although the principle of mobile websites and standard websites are the same, its usage differs greatly as a smartphone user is generally on the move or busy when looking for information on the internet, it is therefore critical to take into account the following:
For these reasons, a mobile internet website needs to be designed and developed very differently from that viewed on a PC.
b) New technical constraints
Diversity of the Mobile users platform - PC users represent a limited variety of internet users and the Smartphones users are often much more diverse. Indeed, there are a large variety of mobile platforms and operating systems on the market such as Apple IOS, Android, Nokia S60, Palm Pre etc, Opera Mobile and Opera Mini, Internet Explorer Mobile etc.
Hardware limitations - Despite the amazing developments achieved in the recent years, the Smartphones terminals remain technically limited compared with that of a PC. In addition to this, the screen resolution is still quite low (800*400 points resolution) and its size is limited.
When this is combined together, the access to the information and interaction with the device will be mainly done via a “touch and point” facility lowering precision and reducing the interaction process. In addition, the absence of physical keyboards mean the user has a restricted ability to type long texts.
Network limitations - The internet connection speeds and bandwidth allowance provided by the mobile networks are comparatively small. This means that a high volume of data downloads are not recommended. However, this limitation should disappear as the network capability offered by the mobile providers tends to evolve very quickly.
As a result of this, it is much more complex to develop a website compatible with all the different platforms and although useful tools (simulators) for developers exist, creating for all can be quite daunting.
2. Mobile Development – Good practices
There are a number of good practices that can be applied to mobile development to optimise a mobile website. W3C announced 6 key rules to follow when developing a website for the mobile users:
Without entering into details for all the points above, some of these good practices are followed by the points listed below-
KEEP IT SIMPLE
This rule is applied for website presentation; the website elements need to be highly intuitive, explicit and universal. For example, it is better to use symbols rather than texts. The pages succession need to be logical and the navigation very intuitive.
The style and design need to be very simple.
MINIMISE THE SIZE
The size of the images needs to be adapted to the screen resolution of the mobile phones so this means it is ideally no more than 300 pixels wide. Additionally, it needs to be explicitly defined by the page to avoid any adaptation for the browser. If possible it is beneficial to set up an images adaptation mechanism for the images. The size of the pages also needs to be limited as although the display of images on a PC screen are straight forward, this is not the case with a smart phone and this operation needs to be reduced if possible.
ASSIST THE USER IN HIS ACTIONS
This can be achieved as follows:
OPTIMISE THE DATA TRANSACTIONS
It is important to minimise the data volume needed during loading period process in order to avoid issues.
3. Developing a successful Mobile website
a. Technical considerations
A website consists of a combination of technologic components whose functions are complementary: HTML, CSS, Javascript, images, videos each contain a variety of different formats and versions. Below is some advice on how to choose wisely from these options-
The HTML family
A wide range of HTML langage variations exist along with its derivatives XML and XHTML. With regard to the mobile websites, the W3C standards strongly recommend the use of document type XHTML 1.0 which is intended to make the website compatible for both the smart phones and PCs. The Media Type that is recommended for the html files is text/html.
CSS Style
CSS allows the application of presentation styles to the web content. Several different versions of this exist and these are called levels. There is a level that has been created specifically for the mobile websites and it is called CSS Mobile. Therefore, is is strongly advised to use the level that is the closest to the CSS Mobile when it is aimed at developing a website that is compatible to the PCs and Smartphones.
Javascript : The script langage for the internet
Javascript is the main script langage used on the web these days. The Javascript support features for the mobile users are very varied. Therefore, it is highly recommended to choose a library that can manage these different contexts. JQuery is one of the main libraries for the development of websites on PCs and a mobile versions which has recently been developed and this simplifies considerably the development of mobile websites.
Images
There are two types of images – Vectorial and point (or bitmap) images. With regard to the vectorial images, there are 2 common formats that exist which are Flash and SVG. We strongly recommend the use of SVG as Flash format is not supported on Apples IOS platform. For the bitmap images the choice recommended would be either JPEG or PNG (for logos or icons).
Videos
Contrary to the images, videos were not elements that were natively recognised by the navigators prior to the HTML 5 and so required plugins. This approach is a real problem for the mobile websites. Indeed the disparity of platforms and the impossibility to install plugins on these makes the choice of format for videos very difficult. HTML 5 has introduced a new addition to solve this issue. However, the management of the different videos is still not standard as this is an area keeps evolving very fast. If a choice is required then the following formats are recommendedH.264, Theora or WebM. Google has recently announced they would not support H.264 and would use WebM instead. The other market leaders of Apple and Microsoft support H.264 and intend to get the coded VP8 integrated to the webM format.
Other components
There are components that are used in standard website that have issues when transferring to mobile. For example, PDF format is widely spread but these still do not have a wide enough support for use with mobiles.
b) Strategic Approach
As a results to the elements detailed above, the conclusion would be that 2 different website would be needed for both PCs and Smartphones. However, the development and maintenance of two different sites would represent an additional workload and therefore dramatically increase costs.
2 different approaches can therefore be used.
Option 1: Develop 2 websites and use common developments as much as possible
This approach is the most expensive but produces a mobile website perfectly adapted to the audience with content that can be very specific to the mobile users. The conception stage will therefore involve optimising the structure and content to both websites. However, specificities will need to be addressed involving an increase in the workload.
Option 2: Develop a standard website structure and use a generation system for PCs and Mobiles.
This approach is very practical when this requirement corresponds to a CMS. The latest CMS versions of Drupal, SPIP, Joomla allow for easy generation of a common base for websites adapted to PCs and SmartPhones. This approach would avoid duplication of work; however, a number of tests and adjustments would be required in some cases.
Is it possible to adapt a standard website to the smartphones?
Free solutions currently exist but none are completely satisfactory. They mostly consist of using the adaptation solutions that are provided by the mobile network providers or certain search engines such as Google and Bing. However, these tools do not take into account the website specificities as they need to be used for a wide audience.
In addition, when a website has been specifically developed for Smartphones, it is very important not to forget to communicate this adaptation. For example, the use of a specific domain name such as .mobi is needed to communicate this adaption.
4. Mobile Web and future Trends
Smartphones bring many features PCs don’t and it is clear the market will make the most of these in the near future. Below some possible trends:
Geolocalisation
The geo-localisation that a Smart Phone provides has a number of very interesting perspectives regarding user functionalities. For example, many mobile website can use these features by including geographical details on how to get from one point to another one, map displays, itinerary games etc. A Javascipt API exists and already offers this geolocalisation functionality usable on Iphone, Android or Mobile Opera.
Audio interactions
The primary function of the Smartphones remains the capability to have phone conversations. Therefore this tool includes by default a voice acquisition system. It is possible to associate a voice recognition system that would allow the control of mobile applications using voice data. This can compensate for the limited keyboard or touch facilities inherent in the Smartphones. However, this would involve using a specific API which allows the use of this type of interaction. This is currently under developments.
Accelerometer
The Accelerometer is a device that measures movement and is increasingly common in Smartphones. It is currently used by applications conceived specifically for Smartphones. It is perfectly possible that in the near future specific API will use this facility. Projects are currently in process and one API is already available API Javascript (QtWeb Runtime).
Web technology and Apps
For a number of years there has been an ongoing debate on which approach should be taken when developing a mobile app. The fundamental question that needs to be addressed is whether it is required to develop a mobile app or a mobile website. Further to this initial discussion each option presents specific advantages and disadvantages which need to be weighed up before developing one or the other. In future, we could perfectly envisage that an app could be a mixture of both an app and a website and could therefore reap the benefits from both approaches.
References
« Relever le défi du Web mobile » (François DAOUST, Dominique HAZAEL-MASSIEUX – EYROLLES)
« Les bonnes pratiques du web mobile », Site du W3C (http://www.w3c.org/2007/Talks/11-parisweb/#%281%29)
« dotMobi Mobile Web Developers Guide », Site de mobiForge (http://mobiforge.com)
To compare this data with the PC market, its total users stands at a total of 2 billion PCs users at the end of 2010 and this market is expected to develop but at a much slower rate than the Smartphone market for 2 main reasons:
- The purchase of PCs has reached a saturation level in the developed countries
- Access to the internet in the emerging countries will more than likely happen by acquiring a smartphone rather than a PC as they are, or will be more affordable.
As a result of this trend, mobile websites for smartphones and tablets are developing dramatically and will become play a key part in providing information and services online. However, they have a very different use from a standard website and present technical constraints that it is very important to be aware of.
1. The era of Mobile Web
a) A very different usage
Although the principle of mobile websites and standard websites are the same, its usage differs greatly as a smartphone user is generally on the move or busy when looking for information on the internet, it is therefore critical to take into account the following:
- A Smartphone user can be busy and needs data to be accessible very quickly
- A Smartphone user can just search for leisure so the site needs to be fun and adapted to a support with reduced dimensions
- A mobile website must not require specific concentration or effort from the user who could potentially be on the move
- It needs to minimise as much as possible the manual interactions which can be difficult using a mobile device
- It needs to adapt to the user as a Smartphones are generally a very personal tool and often used as a support to the social networks
- It needs to take advantage of the nomadic features of the device to offer services adapted to its localisation
For these reasons, a mobile internet website needs to be designed and developed very differently from that viewed on a PC.
b) New technical constraints
Diversity of the Mobile users platform - PC users represent a limited variety of internet users and the Smartphones users are often much more diverse. Indeed, there are a large variety of mobile platforms and operating systems on the market such as Apple IOS, Android, Nokia S60, Palm Pre etc, Opera Mobile and Opera Mini, Internet Explorer Mobile etc.
Hardware limitations - Despite the amazing developments achieved in the recent years, the Smartphones terminals remain technically limited compared with that of a PC. In addition to this, the screen resolution is still quite low (800*400 points resolution) and its size is limited.
When this is combined together, the access to the information and interaction with the device will be mainly done via a “touch and point” facility lowering precision and reducing the interaction process. In addition, the absence of physical keyboards mean the user has a restricted ability to type long texts.
Network limitations - The internet connection speeds and bandwidth allowance provided by the mobile networks are comparatively small. This means that a high volume of data downloads are not recommended. However, this limitation should disappear as the network capability offered by the mobile providers tends to evolve very quickly.
As a result of this, it is much more complex to develop a website compatible with all the different platforms and although useful tools (simulators) for developers exist, creating for all can be quite daunting.
2. Mobile Development – Good practices
There are a number of good practices that can be applied to mobile development to optimise a mobile website. W3C announced 6 key rules to follow when developing a website for the mobile users:
- Take into account the network limitations
- Provide freedom to the mobile users
- Apply the web standards
- Be flexible
- Make the most of the functionality of mobile devices
- Optimise the response time
Without entering into details for all the points above, some of these good practices are followed by the points listed below-
KEEP IT SIMPLE
This rule is applied for website presentation; the website elements need to be highly intuitive, explicit and universal. For example, it is better to use symbols rather than texts. The pages succession need to be logical and the navigation very intuitive.
The style and design need to be very simple.
MINIMISE THE SIZE
The size of the images needs to be adapted to the screen resolution of the mobile phones so this means it is ideally no more than 300 pixels wide. Additionally, it needs to be explicitly defined by the page to avoid any adaptation for the browser. If possible it is beneficial to set up an images adaptation mechanism for the images. The size of the pages also needs to be limited as although the display of images on a PC screen are straight forward, this is not the case with a smart phone and this operation needs to be reduced if possible.
ASSIST THE USER IN HIS ACTIONS
This can be achieved as follows:
- Limit the manual entries
- Guide and control the insertion prior to sending to the server in order to minimise the risks of error
- Memorise the preferences to avoid the user having to carry out identical operations after each visits.
OPTIMISE THE DATA TRANSACTIONS
It is important to minimise the data volume needed during loading period process in order to avoid issues.
3. Developing a successful Mobile website
a. Technical considerations
A website consists of a combination of technologic components whose functions are complementary: HTML, CSS, Javascript, images, videos each contain a variety of different formats and versions. Below is some advice on how to choose wisely from these options-
The HTML family
A wide range of HTML langage variations exist along with its derivatives XML and XHTML. With regard to the mobile websites, the W3C standards strongly recommend the use of document type XHTML 1.0 which is intended to make the website compatible for both the smart phones and PCs. The Media Type that is recommended for the html files is text/html.
CSS Style
CSS allows the application of presentation styles to the web content. Several different versions of this exist and these are called levels. There is a level that has been created specifically for the mobile websites and it is called CSS Mobile. Therefore, is is strongly advised to use the level that is the closest to the CSS Mobile when it is aimed at developing a website that is compatible to the PCs and Smartphones.
Javascript : The script langage for the internet
Javascript is the main script langage used on the web these days. The Javascript support features for the mobile users are very varied. Therefore, it is highly recommended to choose a library that can manage these different contexts. JQuery is one of the main libraries for the development of websites on PCs and a mobile versions which has recently been developed and this simplifies considerably the development of mobile websites.
Images
There are two types of images – Vectorial and point (or bitmap) images. With regard to the vectorial images, there are 2 common formats that exist which are Flash and SVG. We strongly recommend the use of SVG as Flash format is not supported on Apples IOS platform. For the bitmap images the choice recommended would be either JPEG or PNG (for logos or icons).
Videos
Contrary to the images, videos were not elements that were natively recognised by the navigators prior to the HTML 5 and so required plugins. This approach is a real problem for the mobile websites. Indeed the disparity of platforms and the impossibility to install plugins on these makes the choice of format for videos very difficult. HTML 5 has introduced a new addition to solve this issue. However, the management of the different videos is still not standard as this is an area keeps evolving very fast. If a choice is required then the following formats are recommendedH.264, Theora or WebM. Google has recently announced they would not support H.264 and would use WebM instead. The other market leaders of Apple and Microsoft support H.264 and intend to get the coded VP8 integrated to the webM format.
Other components
There are components that are used in standard website that have issues when transferring to mobile. For example, PDF format is widely spread but these still do not have a wide enough support for use with mobiles.
b) Strategic Approach
As a results to the elements detailed above, the conclusion would be that 2 different website would be needed for both PCs and Smartphones. However, the development and maintenance of two different sites would represent an additional workload and therefore dramatically increase costs.
2 different approaches can therefore be used.
Option 1: Develop 2 websites and use common developments as much as possible
This approach is the most expensive but produces a mobile website perfectly adapted to the audience with content that can be very specific to the mobile users. The conception stage will therefore involve optimising the structure and content to both websites. However, specificities will need to be addressed involving an increase in the workload.
Option 2: Develop a standard website structure and use a generation system for PCs and Mobiles.
This approach is very practical when this requirement corresponds to a CMS. The latest CMS versions of Drupal, SPIP, Joomla allow for easy generation of a common base for websites adapted to PCs and SmartPhones. This approach would avoid duplication of work; however, a number of tests and adjustments would be required in some cases.
Is it possible to adapt a standard website to the smartphones?
Free solutions currently exist but none are completely satisfactory. They mostly consist of using the adaptation solutions that are provided by the mobile network providers or certain search engines such as Google and Bing. However, these tools do not take into account the website specificities as they need to be used for a wide audience.
In addition, when a website has been specifically developed for Smartphones, it is very important not to forget to communicate this adaptation. For example, the use of a specific domain name such as .mobi is needed to communicate this adaption.
4. Mobile Web and future Trends
Smartphones bring many features PCs don’t and it is clear the market will make the most of these in the near future. Below some possible trends:
Geolocalisation
The geo-localisation that a Smart Phone provides has a number of very interesting perspectives regarding user functionalities. For example, many mobile website can use these features by including geographical details on how to get from one point to another one, map displays, itinerary games etc. A Javascipt API exists and already offers this geolocalisation functionality usable on Iphone, Android or Mobile Opera.
Audio interactions
The primary function of the Smartphones remains the capability to have phone conversations. Therefore this tool includes by default a voice acquisition system. It is possible to associate a voice recognition system that would allow the control of mobile applications using voice data. This can compensate for the limited keyboard or touch facilities inherent in the Smartphones. However, this would involve using a specific API which allows the use of this type of interaction. This is currently under developments.
Accelerometer
The Accelerometer is a device that measures movement and is increasingly common in Smartphones. It is currently used by applications conceived specifically for Smartphones. It is perfectly possible that in the near future specific API will use this facility. Projects are currently in process and one API is already available API Javascript (QtWeb Runtime).
Web technology and Apps
For a number of years there has been an ongoing debate on which approach should be taken when developing a mobile app. The fundamental question that needs to be addressed is whether it is required to develop a mobile app or a mobile website. Further to this initial discussion each option presents specific advantages and disadvantages which need to be weighed up before developing one or the other. In future, we could perfectly envisage that an app could be a mixture of both an app and a website and could therefore reap the benefits from both approaches.
References
« Relever le défi du Web mobile » (François DAOUST, Dominique HAZAEL-MASSIEUX – EYROLLES)
« Les bonnes pratiques du web mobile », Site du W3C (http://www.w3c.org/2007/Talks/11-parisweb/#%281%29)
« dotMobi Mobile Web Developers Guide », Site de mobiForge (http://mobiforge.com)
Your browsing history of : 23/02/2012
Sauvegarder l'historique
Smart phones have given people the opportunity to increase their productivity and stay in touch while on the go. They have also presented businesses with the opportunity to stay connected to their customers through mobile applications. AMJ have embraced the possibilities offered by mobile deve...
Let's assume your website has been finished and is looking good. A good web developer should have done all the technical stuff by putting the organic search engine optimisation in place. These may need tweaking in the future and you may even be considering a pay-per-click campaign however I wi...
The common feature that all the best websites have is the way that they connect with their potential customers. Below is a list of five things to consider when deciding what should be included on your company website. Are you providing information of some kind? Information is a great way to ...
AMJ UK is part of the AMJ Group, an IT Services provider that was first established in 1986. With a team of 100 engineers, project managers and technicians, AMJ boasts a range and depth of technical skills. AMJ UK is based in Ashford Kent and London and works in close partnership with three othe...
WEBSITE DESIGN Successful web design is a combination of compelling design work and a detailed understanding of usability and utility. AMJ combine the two to develop attractive web sites that work for business. Aesthetic Design AMJ provide high quality, custom design made to provide a uniq...
With Guide Star holding information on 163,000 charities in the UK, it is clear that the competition for the attention and altruistic generosities of the general public is highly competitive. Figures released by the Boston Consulting Group last week revealed that Britain is leading the world in te...
With Guide Star holding information on 163,000 charities in the UK, it is clear that the competition for the attention and altruistic generosities of the general public is highly competitive. Figures released by the Boston Consulting Group last week revealed that Britain is leading the world in te...