Mobilization Techniques Utilized by Leading Global E-Commerce Sites

Introduction

Consumers are increasingly using mobile devices for online shopping and product research. Globally 34% of e-commerce transactions were conducted via a mobile device during the first quarter of 2015 (“State of Mobile Commerce”, 2015). In Japan and South Korea over 50% of e-commerce transactions are conducted on mobile devices. Two of the world’s largest global shopping sites, Amazon.com and Target.com, reported that for the 2014 shopping season almost 60% of web traffic was from mobile devices (Sterling, 2015b). Most major on-line shopping sites have responded to this trend by offering mobile-friendly interfaces.

Mobile devices compared to desktop computers typically have smaller screens, less processing power, lower data transmission speeds, and greater network latency. In this paper the term “mobile device” refers specifically to smart phones. This usage is consistent with the definition used by Google’s Mobile Developer Guide (Google Developer’s Mobile Guide, 2014a; West & Mace, 2010).

Websites that are developed for desktop and laptop computers usually render poorly on mobile devices. Converting a traditional desktop web site to a mobile-friendly site can be expensive, depending upon the size and complexity of the site.

Mobile-friendly web sites are designed to render well on all devices, including desktop computers, laptop computers, tablets, and mobile phones. A mobile-friendly design will typically modify the content and the layout to accommodate the screen size of the device. For mobile devices it is common to reduce the amount of content presented, utilize smaller images that require less bandwidth, present content vertically rather than horizontally, and to increase the size of tap-targets such as buttons, text entry elements, and navigation links.

Three popular mobilization techniques are utilized to make web sites mobile-friendly. A variety of names are used for these techniques so to avoid confusion this paper employs the terminology utilized in Google’s Mobile Developer Guide (Google Developer’s Mobile Guide, 2014b). The three techniques are:

• •

  Responsive Web Design: Serves the same content to all devices and utilizes CSS media queries to “respond” to size of the device screen. CSS media queries, which are executed by the requesting device’s browser, are used to reformat page layout and modify page content;

• •

  Redirect to Separate URLs: Different content is served to different devices on separate URLs. Typically, the web server examines information included in the web request and redirects the request to a URL that serves content appropriate to the device. Sites that utilize this technique are often referred to as “m-dot” sites;

• •

  Dynamic Serving: Different content is served to different devices from a single URL. As with the previous technique, the server examines the web request to determine from which type of device the request originated. The server then modifies the response to accommodate the capabilities of the requesting device.

Each of the three techniques has distinctive benefits and drawbacks. Responsive has the benefit that it utilizes CSS media queries and does not require the server to identify the user’s device, which can be problematic. CSS media queries are executed by the user’s browser and reformat web pages to “respond” to the actual screen size. On devices that can be rotated between vertical and horizontal the display can change on the fly when the device is rotated. The primary drawback of the responsive technique is that it serves the same content to all devices, making it difficult to optimize image sizes and other resources (Nebeling & Norrie, 2013), which can lead to slow rendering times on mobile devices over high-latency networks.