The Basics of Mobile Application Environments and Devices

Zia

2 Followers

Follow

Aug 4, 2024

-

0 sec read

555

0

0

0

❌

Introduction

Today, access to the Web is not limited to only desktop systems but is also available on portable wireless devices, such as mobile devices. Mobile devices, such as smartphones and tablets are equipped with browsers and network access that provide a better Web experience for their users.

As the number of mobile users has increased, so has the requirement 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 requirements 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 Web pages.

1. Types of Mobile Devices

• Basic mobile devices

These are very basic models with only a 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 require heavy Internet usage. They also include a basic camera and a basic music player.

Manufacturers, such as Xiaomi, Motorola, Sony Ericsson, Samsung, and so forth have gained popularity for offering low-cost handsets on the global market.

• 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 vices include a medium-sized screen, an 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.

• 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 full browser support similar to desktop browsers with wireless LAN and 3G and 4G connections. Apart from these, they have several advanced features which are as follows:

1. Digital Compass
2. Global Positioning System (GPS).
3. Touch screen
4. Camera with video recording
5. TV is out
6. Bluetooth
7. Accelerometer

Some of the popular smartphones available on the market are the Apple iPhone, a wide range of HTC smartphones, Motorola smartphones, the Samsung Galaxy series, and so on.

• 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 a multi-touch display, better user experience, high-quality screen resolution, better Web support, and multitasking OS at high speed. Some of the tablets available on the market are Lenovo Tablet PC, Samsung Galaxy Tab, and HCL Me Tab.

2. Mobile Platforms

A mobile device platform is similar to a software platform. It is responsible for interacting with the device hardware and running 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 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 users. Users can download the source code and alter it as per their requirements.

The brief description of popular platforms available on mobile devices is as follows:

1. iOS - It is a mobile OS developed by Apple Inc. and was initially referred to as the iPhone OS. It is derived from MacOS X, which is based on the UNIX platform. It was originally developed for iPhone and iPod touch but later extended to support other devices, such as iPad and Apple TV. IOS cannot be installed on non-Apple platforms.
   
   
2. Windows Mobile - It is a mobile OS that runs on top of the Windows Mobile platform.
   
   
3. Android - Android is an open-source OS developed by Google. Smartphones and tablet computers currently use it. Device manufacturers and community developers can customize it to extend the functionality of the devices.

3. Design Aspects of a Mobile Website

The design process of a mobile Website is similar to that of a traditional Website developed for desktop Web browsers. Still, some differences between them must be taken into consideration.

An ideal mobile Website is supported as well as rendered properly by the maximum possible browsers and OS. Some of the basic considerations required for designing a Website for intended mobile devices are as follows:

1. Resolution and Physical Dimension
2. Page Orientation
3. Input methods

• Resolution and Physical Dimension

The primary concern in designing a mobile website design is screen resolution. Resolution means the number of pixels (width and height) on the screen of a mobile device. As there are no standards defined for screen resolution, it varies depending on its model and manufacturer. Some of the popular resolutions for mobile devices in recent times have been 360x640, 360x780, and 412x892.

The resolution of mobile devices is measured in terms of the physical dimensions of the screen. The screen dimensions are either measured diagonally in terms of inches/centimeters or the terms of width and height.

The relation between physical dimension and resolution is termed Pixels per Inch (PPI) or Dots per Inch (DPI). The higher DPI results in good print-quality graphics on a mobile device.

Thus, the design of a Website must be flexible and adjustable to meet the dimensions of the screen on which it is displayed.

• Page Orientation

Mobile devices are also categorized based on their orientation, vertical and horizontal. Vertical orientation devices are also referred to as portrait devices with taller displays. Similarly, horizontal orientation devices are referred to as landscape devices with wider displays.

Today, smartphones and tablets can switch between landscape and portrait views to present a better view of a Web page. This rotation capability of changing the view from landscape to portrait or vice-versa is due to the hardware accelerators available in the phones.

Thus, a mobile website must be aware of these rotations and should be capable of providing a good user experience in both orientations.

• Input methods

There are different methods of putting data on mobile devices. A mobile device can support more than one input method.

Some of the possible input methods for a mobile device are as follows:

1. Numeric keypad
2. Alphanumeric keypad (Simple or QWERTY)
3. The virtual keypad on the screen
4. Multi-touch
5. External keypad
6. Voice and handwriting recognition

4. Architectural Aspects of a Mobile Website

The Website developed for a mobile device is a collection of Web pages. Thus, it is essential to understand a few architectural concepts that can help create meaningful mobile services.

The architecture for designing a mobile Website begins with understanding the information and services that are offered to the mobile user. Some of the concepts that relate to its architecture are as follows:

• Navigation

Navigation is the path followed by a user to travel on the Website. As compared to the navigation tree of a desktop site, almost 80% of the information of a desktop site will not be useful for a mobile Website. Thus, the main focus should be on 20%.

1. Design Web pages based on use cases. For example, some of the common use cases are: performing a search for products and prices, performing a search for the nearest store location, or viewing a Contact Us page.
   
   
2. Arrange Web pages depending on the frequent requirements of mobile users. This can be achieved through statistical information or usability tests performed to keep the organization updated.
   
   
3. Restrict the depth of a mobile page to three clicks for a specific use case.
   
   
4. Design minimum input controls for the form pages.
   
   
5. Desktop websites normally have a welcome screen. In the case of mobile websites, Avola develops welcome screens.
   
   
6. While designing a service, decide on its usability. For example, before designing a service, such as locating a user, determine its usefulness as a service.
   
   
7. Approximate the number of mobile pages required to separate services, after the home page.
   
   

• Perspective

The perspective of a mobile user is different from that of a desktop user in terms of requirements and accessibility. Hence, a user-centric design approach should be followed when designing mobile websites. This ensures that a user completes the task easily and successfully.

Some of the possible user contexts are as follows:

1. What is the location of the user?
2. Why is a mobile website accessed by the user?
3. What are the requirements of the user?
4. What solution is offered by a mobile application to solve the user's problem?
5. Where is the user present while accessing a Website? For example, a user can access the Website while walking on the street, at a workplace, in a public place, or so on.

• Enhancement

Enhancement is a simple and powerful technique that can be adopted while designing a mobile website. This technique defines the compatibility of the Website and allows access to basic content, services, and functionality on all types of mobile devices. Also, it provides a better Web experience on devices with higher standards.

Some of the core principles for enhancing mobile websites are as follows:

1. Basic content and functionality are accessible in all browsers.
2. Enhanced layout and behavior must be provided through external style sheets and JavaScript that are linked to the Web pages.
3. Markup elements used on pages must have proper semantics.
4. Web browser settings on a user's device should be considered.
   

• Use of Web standards

The Web standards, such as HTML, CSS, and JavaScript followed in mobile Website design must be correctly used. This increases the possibility of displaying pages on a large number of devices. The well-formedness of the markup tags used on a page can be achieved by validating them.

Apart from validating HTML pages, the use of certain HTML elements can be avoided while designing Web pages for mobile devices.

The brief description of these elements is as follows:

1. Use of HTML tables - As the screen size of mobile devices is small, the use of tables in layouts should be avoided. The reason to avoid tables is that it makes scrolling difficult and also slows down the page loading in the browser. Also, tables are not rendered properly on mobile devices.
   
   
2. Pop-up windows - Websites with pop-up windows make the site impractical to work with. Also, all mobile browsers do not provide support for them. Even browsers providing support for pop-up windows may result in the closing of the existing window.
   
   
3. Use of graphics - The use of graphics increases the download time of pages. Also, they can obstruct the layout of old mobile browsers, resulting in incorrect display of the page.
   
   
4. Use of frames - Many mobile devices do not provide support for frames due to usability problems. Also, the HTML5 new specification does not provide support for frames.

Setting up the Environment for Mobile Applications

Desktop Web applications are created and tested in the environment in which they are developed. Mobile Web applications are developed to be run on different mobile devices. Hence, they must be tested in several different environments.

The tools required to develop a mobile Web application are namely, an Integrated Development Environment (IDE) and emulators. These are described as follows:

• IDE

An IDE is a tool used for coding HTML markup, JavaScript, and CSS. Today, different tools provide the facility to easily build a mobile Web application.

Some of these tools are as follows:

1. Adobe Dreamweaver
2. Aptana Studio
3. Notepad++
4. Eclipse
5. Editplus (text editor)

The latest versions of these tools provide better support for mobile markups. They also provide support for validating pages against mobile Web standards.

• Emulators

Testing of a mobile Web application can be done using an emulator. An emulator is software that translates the compiled code into the native platform on which the application is executed.

The emulator runs as a desktop application that allows testing and debugging of a mobile application. It offers an environment similar to a real mobile device on which an application will be executed.

In other words, it imitates the features, such as the hardware and OS of a mobile device, to test and debug an application.

Emulators are developed by manufacturers and are often offered free to users. They are either standalone applications or bundled with a Software Development Kit (SDK) for native development.

Some of the popular emulators that either run as standalone applications or in an SDK are as follows:

1. Android
2. iOS
3. Windows Mobile
4. Opera Mobile

Note: Browsers such as Google Chrome provide tools to simulate mobile platforms on the browser screen.