February 27, 2013

Mobile Web Development and Best Practices

James Giese UWEBC Communications Director

Matthew David, Director of Strategy Mobile Solutions, Compuware, held an online workshop on mobile web best practices during the UWEBC's Web and Multichannel Marketing Web Clinic on Feb. 19, 2013.

He discussed the fragmentation of the mobile experience by devices such as smartphones and tablets and operation systems such as iOS, Android, and others; described various tools to use to develop mobile applications; suggested best situations for mobile web vs. mobile app opportunities; and gave live critiques of several member company mobile websites.

Sharing his insights as a thought leader in the mobile development area, David described how important mobile applications are right now. Ninety four percent of Fortune 500 companies are using iPads; 53% of consumers in U.S. own mobile phones; 14% of all Black Friday purchases were researched via mobile; and 15% of all Internet traffic is currently from mobile devices.

“According to a recently released report by Cisco, by the end of this year, 25% of all Internet traffic will be from mobile devices,” said David. Mobile applications are extending from the consumer market to businesses of all sizes, for both internal and external audiences.

The great increase in mobile devices highlights the significance of developers and marketers spending more time developing applications for mobile devices compared to traditional desktop PCs.

“There are generally two schools of thought when building out a mobile website,” said David. One is to create a m-dot or dedicated address version of the site for mobile devices. The other, a more recent approach, is to create one site with a responsive design using HTML 5 that displays differently depending on the screen resolution of the device.

Although still a smaller percentage, there is a trend in Internet traffic that is increasing from the use of both seven- and ten-inch tablets. When designing for the mobile web, it is important to consider this trend and the different user experiences between the smartphone and tablet.

"The customer experience with the smartphone is a very quick one, lasting seconds," said David. It is akin to someone sitting in traffic and waiting for the traffic light to turn from red to green, while with the tablet the user experience is more prolonged. Typically, the tablet user may be engaged in another activity such as watching television or listening to music.

 David said that 85% of mobile users expect sites to load at least as fast as or faster than sites on their desktop. More than 50% of users have a problem when trying to access a mobile site. To increase performance, David suggested using CSS3 and SBG graphics.

Discussing mobile operating systems, David related the challenges for developers with iOS and Android and the various operation systems that determine the rendering of a site. Most Apple devices (about 60%) are running iOS 6 which can support robust applications. While with Android devices and many different vendors, more than 50% of Android users are on Android version 2.2. The challenge is that this version is much less sophisticated than the latest devices running Android Jelly Bean and Ice Cream Sandwich.

There are various tools that can be used to build mobile websites. Two good HTML frameworks are jQuery Mobile and Sencha Touch that allow teams to rapidly build out websites with responsive design that work well on both tablets and smartphones. Good design tools include Adobe Edge Reflow, Adobe Dreamweaver, and Hype. Edge Reflow is a new tool that allows the designer to create responsive layouts with CSS. Hype is an HTML editor that allows the user to easily create animated HTML5 and CSS3 web pages.

“The first mobile app you create is really your mobile website,” said David. However, more sophisticated organizations can develop apps that target and respond to customer needs. The example given was the Starbucks Coffee app that allow the user to pay for their beverages while in the store and notifies users of any awards that are currently available

David finished the presentation with an overview of some member company mobile websites. Each of these sites demonstrated examples of best practices in mobile web design:

• Mobile Web Site—Currently, only one in five organizations have mobile web sites so organizations that have one are in the top 20% of their class.
• Smartphone Optimized Design—David recommends that an organization’s first application should be optimized for smartphones.
• Use of Buttons—Direct Calls to Action—David reminds designers of the mobile applications to recall that fingers are the normal input device so design with that in mind. So use buttons rather than links.
• Smartphone First, Tablet Second—Design for smartphones first because of the larger percentage of users on these devices.
• Focus on Performance—Given the demand of mobile users for fast response, designers need to focus on site performance and responsiveness.