Introduction
Today, access to the Web is not limited to only desktop systems, but is also available on portable and wireless devices, such as mobiles devices. Mobile devices, such as smartphones and tablets are equipped with browsers and network access that provide a better Web experience to their users.
As the number of mobile users has increased, so has the need for a mobile Web experience that is identical to a desktop user experience. In other words, mobile users now look for applications targeting their mobiles that are similar to the ones on their desktops. This has led to the emergence of mobile Web application development.
Different companies follow distinctive strategies for developing mobile applications depending on the need of their users.
Mobile Application Environment
A mobile device, also known as a handheld device, is a small portable computing device with a small display screen and keyboard. A mobile device has an operating system on which various types of application software are executed. These application software are also known as apps. The most commonly used apps are mobile browsers that display the Web pages.
Types of Mobile Devices
The different categories of mobile phones available in the market are as follows:
Basic mobile devices - These are very basic models with only call and Short Message Service (SMS) facility. They do not provide support for Web browsers or network access.
Low-end mobile devices - These types of models provide more features than a basic mobile device, typically Web support. There is a large market for these mobile devices and they are preferred by users who do not need heavy Internet usage. They also include a basic camera and a basic music player.
Manufacturers, such as Nokia, Motorola, Sony Ericsson, Samsung, and so forth have gained popularity for offering low cost handset in the global market.
16
Session
Building a Mobile Web Application
Concepts
V 1.1 © zetutorials Limited
Mid-end mobile devices - These types of mobile devices have gained popularity due to their increased user experience and moderate cost. Some key features of these devices include: medium sized-screen, HTML supported browser, a decent camera, games, and support for applications. They have a proprietary Operating System (OS) that is not well-known and is also not portable across various platforms.
The mid-end mobile devices available from different manufacturers.
High-end mobile devices - These types of mobile devices have advanced features, such as an accelerometer, advanced camera features, and Bluetooth. They have a better look and feel as compared to mid-end mobile devices
Smartphones - These are mobile devices with multitasking capabilities. These devices have a full browser support similar to desktop browsers with wireless LAN and 3G connection. Apart from these, they have several advanced features that are as follows:
Digital Compass
Global Positioning System (GPS)
Touch screen
Camera with video recording
TV out
Bluetooth
Accelerometer
Some of the popular smartphones available in the market are Apple iPhone, a wide range of BlackBerry smartphones, HTC Magic smartphone, Nokia Lumia, Samsung Galaxy series, and so on. Concepts Session 16 Building a Mobile Web Application V 1.1 © zetutorials Limited
Figure 16.4 shows the various smartphone devices.
Figure 16.4: Smartphones
Tablets and notebooks - These devices are larger than mobile phones. They are mobile computers with a touch screen virtual keyboard and stylus or digital pen. Features of tablets include: multi-touch display, better user experience, high quality screen resolution, better Web support, and multitasking OS with high speed.
Some of the tablets available in the market are BlackBerry PlayBook Tablet PC, Samsung Galaxy Tab, and HCL Me Tab.
Figure 16.5 shows different types of tablet devices.
Concepts Session 16 Building a Mobile Web Application V 1.1 © zetutorials Limited
16.2.2 Mobile Platforms
A mobile device platform is similar to a software platform. It is basically responsible to interact with the device hardware and run software/services on the mobile device. The mobile platforms are categorized as proprietary and open source. Proprietary platforms are those which are designed and developed by the mobile device manufacturers. These platforms are developed for specific devices and are not supported on all platforms. Open source platforms are those which are freely available to the users. The users can download the source code and alter them as per their requirements.
The brief description of the platforms available on mobile devices is as follows:
Palm OS - It is a proprietary mobile OS developed by Palm Inc. and was used for Personal Digital Assistants (PDAs). The Palm OS was later on extended to support smartphones. Currently, Palm Inc. has developed webOS, which is based on the Linux kernel. webOS is now acquired by Helwlett-Packward and is used with various devices, such as Pre, Pixi, and Veer phones as well as HP TouchPad tablet.
Blackberry OS - It is a proprietary mobile OS developed by Research in Motion (RIM) and is based on Java platform. It is primarily used by Blackberry smartphone devices.
iOS - It is a mobile OS developed by Apple Inc. and was initially referred to as iPhone OS. It is derived from Mac OS X, which is based on the UNIX platform. It was originally developed for iPhone and iPadTouch, but later extended to support other devices, such as iPad and Apple TV. iOS cannot be installed on non-Apple platforms.
Symbian - It is an open source mobile OS developed for mobile phones. It includes a user interface framework, libraries, and component tools. Symbian is the most widely supported platform for Nokia mobile devices.
Windows Mobile - It is a mobile OS that runs on top of the Windows Mobile platform.
Linux - It is an open source OS and is supported by smartphones that are manufactured by Motorola.
Android - Android is an open source OS developed by Google. It is currently used by smartphones and tablet computers. It can be customized by device manufacturers and community developers to extend the functionality of the devices.
16.2.3 Design Aspects of Mobile Web Site
The design process of a mobile Web site is similar to that of a traditional Web site developed for desktop Web browsers. Still, there are some differences between them that need to be taken into consideration.
An ideal mobile Web site is supported as well as rendered properly by maximum possible browsers and OS.
Concepts Session 16 Building a Mobile Web Application V 1.1 © zetutorials Limited
Some of the basic considerations needed for designing a Web sites for intended mobile device are as follows:
Resolution and Physical Dimension
Page Orientation
Input methods
Resolution and Physical Dimension
The primary concern in designing a mobile Web site design is the screen resolution. The resolution means the number of pixels (width and height) on the screen of the mobile device. As there are no standards defined for screen resolution, it varies depending on its model and manufacturer.
Table 16.1 lists the resolutions of mobile devices based on their categories.
Category Resolutions (in pixels)
Low-end mobile devices 128 x 160 or 128 x 128
Mid-end mobile devices 176 x 220 or 176 x 208
High-end devices 240 x 320
Smartphones 240 x 480, 480 × 320, 640 × 480, or 960 × 640
webOS
Blackberry
Windows Phone
Opera Mobile
16.4 HTML5 Support on Mobiles
Today, a majority of smartphones and tablets are providing good support for HTML5. Most Android and iOS mobile devices as well as tablets use browsers that are based on Webkit. The Webkit is a layout engine supported by browsers, such as Google Chrome and Apple Safari to render Web pages.
Some of the new features introduced in HTML5 are supported by several mobile devices. This reduces the need of any third party plug-in to get those features on the mobile devices. The features suited for mobile devices are as follows:
Video
Audio
Drag and drop
Accessing browser history
Geolocation API for accessing location
Web storage API to save data on mobile devices
Offline Web applications (Applications with no Internet connection)
16.4.1 HTML5 Markup
The Web pages developed for a mobile Web application have the same structure as traditional Web pages.
A Web page contains the following sections:
Heading Structure
Document Structure Concepts Session 16 Building a Mobile Web Application V 1.1 © zetutorials Limited
16.4.2 Heading Structure
The heading structure is represented by a <head> element defined in an HTML Web page. It defines a <meta> tag that is used specifically for mobile browsers.
The brief description for some of the tags defined under <head> element is as follows:
Meta Tag
Two factors that need to be considered while designing a mobile Web application are its initial display (zoom) scale and orientation. Thus, it is necessary to inform mobile browsers to consider these factors while displaying a Web page.
This can be achieved by using a <meta> tag. A <meta> tag indicate that the document is optimized for mobile devices and are used to control the display scale, while displaying HTML content on the device. It is specific to mobile browsers.
Table 16.3 lists some of the variations of <meta> tag used for different mobile browsers.
Meta Tag Description Supported Mobile Browser
<meta name=”HandheldFriendly” content=”true”/> Indicates that the content is designed for small-screen handheld devices. The value true prevent the browsers from scaling the content BlackBerry and others
<meta name=”MobileOptimized” content=”width” /> Accept width (in pixels) to place the content and forces the layout to one column in the browser Windows Mobile and Windows Phone
<meta name=”Apple-mobile-web-app-capable” content=”yes”/> Indicates that the Web application will run in a full-screen mode Safari
<meta name=”Format-detection” content=”telephone=no”/> Automatic detection of phone numbers is enabled or disabled on Web pages Safari running on iOS
No comments:
Post a Comment