More and more web users are accessing the web from mobile devices than ever before. As a result, a growing number of businesses, corporations and organizations are now beginning to believe that they need to develop a mobile strategy and make their web presence accessible on smartphones.
With the availability of sophisticated HTML5 development platforms, capable of generating mobile web applications and mobile web sites with functionality and user experiences almost identical to native apps, mobile web sites and web apps have become viable solutions.
Once a site-owner or business has decided that the best strategy forward is to build a mobile web site or web app, instead of a native app, there are more decisions that need to be made. While a mobile-optimized web site may be the preferred solution, many site-owners and businesses do not have the funds to build a full-blown mobile optimized web site from scratch and therefore need alternate inexpensive solutions.
There is no single design strategy that works for all businesses so the mobile web site development strategy will differ from project to project. In any case, a site owner must decide whether to let customers interact with its existing site via mobile, adapt an existing site to mobile or create a mobile-optimized site from scratch.
Typically, there are three scenarios that drive the requirements and development directions of a mobile web site:
Each of these scenarios will lead to a different approach and drives a different set of requirement.
Before a web site development project can start the web site developer needs to know the business objectives as they relate to the web site and specifically to the mobile web site.
There are many challenges mobile web developers need to overcome when designing for smartphones, including the small screen (often with tiny text), slower downloads, the lack of a physical keyboard for data entry, and mouse for item selection. In addition, there are no mouse buttons to issue commands and access to contextual menus is limited to touch screen only signals.
Mobile phone users often struggle using web sites that were initially designed for the desktop, even on the latest iPhones and Android-powered smartphones. Ideally, to solve those problems, websites must provide special mobile versions, but often, due to budget constraints, more affordable inexpensive alternatives are used. Here is a rundown of the various options that are often used:
The most basic and easiest way to access web site content on a smartphone is to tweak the regular web site for proper display on mobile devices. This means at the minimum that users can access the information they need, with a user “feel” as close as possible to desktop experience. Basic adjustments to the text size and viewport can be implemented to affect the way the web site displays on a mobile device. This approach is easy to implement with minimal effort. Using the site may be frustrating for users because they have to navigation through large amounts of content using the zoom function and deal with slow download speeds.
When implementing the adaptive layout approach designers basically create one mobile web design and then adapt it to the various mobile devices the site must be rendered on. The basic structure of the site will be the same across all devices, but specific elements, such as image sizes, needs to be automatically adjusted to fit all display resolution and devices. Adaptive layouts need to work with the content already available on the web site. This means that the source order and mark-up plays a vital role in providing a logical order to content when linearize for the narrow layouts. Designers will also need to take into consideration that images will need to scale-to-fit as their containing elements adapt to different layouts.
Adaptive layout is very good at addressing design considerations and adjusting for different screen sizes, however it does not always address bandwidth and performance limitations of mobile devices.
A web design based on adaptive layout will often use CSS media queries, which have gained in popularity since browser vendors began supporting the W3C’s CSS-3, to style the page according to specific rules, for instance width, height, device width and height, orientation and more.
The ideal approach to mobile web site design is to create one separate, high-end version with simplified navigation, fewer features and stripped down content for mobile phones with full-browsers, that works solely on iPhone or Android-powered mobile devices. This means that any content and functionality that is not absolutely necessary has been be eliminated.
A web site dedicated to mobile users aims to deliver an optimized mobile experience that can take on a life of its own and often requires a lot of research and analysis in order to prioritize and deliver the most important content to users.
Site properties such as images are typically kept to a minimum, common tasks and key navigational paths are highlighted to give users exactly what they want. Despite the extra work, the result can be greatly improved performance, and a more streamlined experience that puts the most important features and content at the user’s fingertips. However, mobile-optimized sites are relatively expensive to build and maintain because site assets must be optimized and content prioritized.
When designing a dedicated mobile website it is important to enforce the brand identity of the “full desktop site” and transfer the most visually significant elements from the desktop site to the mobile site. Also, because mobile sites do not render colors and background the same as desktop or laptop monitors, designers must make sure the backgrounds and text colors provide adequate contrast so that the content can be read easily. Page load speed matters on all websites; they matter even more on mobile sites. This is probably one of the most important usability options to take into consideration when building a mobile web site. Web developers must give the highest priority to low page weight with limited the use of images, when designing a mobile web site.
As with any web site development project, mobile web sites need to be tested on as many mobile devices as possible. Without owning all these devices, it can be somewhat tricky to find ways to accurately test for each. It will involve a combination of installing the developer SDK for the platform (like the iPhone SDK and Android SDK) and using web-based emulators for viewing on other mobile platforms.
Advanced Media Productions
251 West Central Street
Suite 28
Natick, Massachusetts 01760
Copyright © 1999 - 2010 Advanced Media Productions, Inc.
Advanced Media Productions | 251 West Central St. | Natick Massachusetts 01760
Tel: (508) 647-5151 | Toll Free: 1-888-755-5151 | Fax: (508) 647-5150 | Email:info@advmediaproductions.com
