Most web portals have an associated mobile portal. This can be found across all industries to name a few banking, insurance, telecom, retail and government.
The common requirement is to extend the web portal to mobile devices and provide adaptable rendering for existing and new devices. Some of the unique needs
of each industry are Security for Banking, Performance, Scalability and Device Support for telecom, Content Management and Commerce capabilities for Retail
and Government portals. Hence having the right design approach to creating a mobile portal is important and good design should be followed by adopting the
best practices for development and test to ensure an exceptional web experience on the device for the user.
The challenges of building a mobile portal can be listed as follows
- Increasing number of mobile devices which can be classified as smartphone, feature phones, tablets etc.
- Assuring the quality of rendering and ensuring the user experience on all the mobile devices.
- Software bugs in the Phone browser software distorts mobile rendering
- Effectively designing a mobile portal to offers seamless user experience on all devices (both existing and new devices) with
can ensure the responsiveness of portal with minimal testing effort.
- Non-functional requirements like Security and Performance.
- Leveraging new standards like HTML5/CSS3 and device capabilities for smartphones
The first stage of building a mobile portal starts with good design. Good design principles for a mobile web experience are
- Device Classification – Devices can be classified into different categories based on type of phone, browser or screen resolution. Mobile portal can be designed
based on the device classification and this ensures a good web experience on the device .
Type – Android, IOS, Blackberry
Browsers – Opera, Safari, Chrome, Internet Explorer
Screen Resolution – 128, 240, 320, 640 px
- Responsive Web Design - Responsive Web design is widely being adopted to cater to various mobile phones and tablets. This ensures a uniform experience
irrespective of the device being used and these simple design principles will help a great deal to create good web sites
- Liquid Layouts – Create layouts that are flexible and adapt to the device to ensure uniform pages across all devices. The real estate on the device needs
to be effectively utilized. Some points to adopt are
Use % for width so that the columns align based on screen width of the device,
Use of Viewport in device browsers where supported.
Adapting to orientation change of the device
Use media queries to handle rendering to screen sizes
- Images – Images need to managed effectively for different devices. Some devices have higher resolution and larger screen sizes while others are smaller.
Based on the resolution images need to cropped or scaled to suit the device.
- User Behavior – Design based on a common user behavior on mobile web pages with restricted input system (say feature phones’ input mechanism) or touch screens.
The user navigation pattern is different on touch screens and non touch screen devices. Hence follow these rules to manage user behavior based on input type non touch screen : If the length of the page is more (vertical scroll), having links to navigate to the top of the page on the interim portion of the page in-order to avoid taking controls over the links using key pad.
Touch Screen: Low quality touch screens have the risk of improper mapping of the touch to the input part. Providing enough spaces (at the same time
effectively utilizing the screen real estate) between links or clickable items saves user from un-necessary navigations
Placing the highlighted content on the screen to grab the user attention to the right item (considering principle of thirds) while displaying Advertisements
Dynamically reposition the most accessed item (or menu to the front) or on the top list, Including bookmarks. etc
- Page size and Response Time – The page size is an important factor to consider when designing a page which gets rendered on mobile. The response time
depends on data download and the connections 3G, E-GPRS or GPRS. Keeping this in mind the design of page can be different for different access connections.
As a rule of thumb donot use heavy pages, large images [ Limit page size < 30 KB ] on slower mobile connections
- HTML5/CSS3 Capabilities and Hybrid applications – HTML 5 features can be used for capturing location details which can be used for all location specific
applications like address and routes. Using CSS3 features enhance the appearance of the web page on the device.
Once we have a good design we move on to development and testing the mobile portal.
- Device Independent development – Generic development model should consider the , mobile browser software’s error prone situations. Maximize the use
of page elements which are common across different kind of markups, style sheets etc. and handle the device specifics conditionally using device classification.
- Fallback options – Fallback options are needed to handle non standard mobile browsers. These include switching from rich interface to a basic interface. .
Emulators & Real Devices – The emulators and real device to be tested can be covered based on device classification This will ensure devices from each group
are covered during testing as testing on all devices supported will not be possible. DeviceAnywhere is a commercial service available on the web which can
be used to test applications on real devices.
Performance Testing – Testing with wired network (theoretically zero latency) and tools which simulates the wireless networks and projecting the results
like like NetEm can be used to simulate wireless networks. Wireless connected laptops can be used for testing the low bandwidth and high latency for mobile
portal applications and understand the site response behavior.
Websphere Portal Family Mobile Offerings
Mobile Portal Accelerator
Websphere Portal Mobile Themes for Smartphones [ Webkit browsers ]
Web Experience Factory
Benefits of following the best practices are
- Maximizing the adaptability of User Experience irrespective of the device & its nature.
- Lesser rework and ability to add more capabilities to mobile portal
- Easier maintenance & enhancement of the code artifacts
- Easier integration
- Better performance and scalability