Building a Secure and Responsive Mobile Web

Optimization is critical for mobile commerce growth

Responsive Design

Since Apple released iOS for iPhone in 2007, Google has subsequently released its own competing operating system, Android. The resulting plethora of device specifications has made it challenging to design for mobile Internet. While mobile apps still provide a richer experience due to their ability to directly access operating system functions and resources, mobile web allows businesses to reach a broader range of consumers.

Continuing some of the core paradigms of XHTML, the responsive design framework uses a combination of CSS media queries, JavaScript and HTML to render slightly altered versions of a website based on defined interaction points coded in CSS as declarations.

There are two implementations that businesses can pursue for responsive design. The first implementation builds a separate site that has been fully optimized for mobile by removing extraneous scripting and other code, and reducing image sizes (Grigsby, 2010). However, reducing files sizes being sent over cellular networks, and thus providing faster page downloads to consumers, comes at a cost for businesses as they now have multiple code bases to manage. This can also slow down implementation of mobile web as budget constraints necessitate phased rollouts of functionality.

The second implementation of responsive design uses the same code base and content as the desktop site. For mobile, images may be suppressed and scripting ignored, while also realigning a horizontal layout optimized for 1024 pixel display to a layout where all elements are now vertically stacked to accommodate the scrolling form factor of a mobile display. Technology teams manage just a single code base, and the mobile commerce experience is greatly improved versus a site that has not incorporated any responsive design.

The challenge with using a single code base is that mobile devices must download and process all the code from the site, even if it will be skipped over during rendering (Grigsby, 2010). Businesses can mediate this issue by setting media queries to recognize mobile devices as the default in CSS instead of desktops. This ensures that the code base has been built for mobile, and desktop code is only loaded on demand if the queries determine the display size is large enough to render a desktop version.

Since the ubiquity and maturity of responsive design implementation and management are still in their early stages, it is recommended that organizations implement the second option and use media queries to define how the site experience should adapt to match mobile form factors. For the near-term, networking teams will need to find solutions for accommodating this growth in mobile web traffic until responsive design and mobile first become more mature aspects of site management within technology and marketing organizations.

Securing Mobile

Devices With both responsive design and improved network access increasing mobile browsing capabilities, the issue of how to secure network traffic must be considered. This is especially the case as we determine how to build the level of trust needed to persuade consumers to enter payment information such as credit cards.

The primary mechanism for delivering secure transactions in mobile browsers is the Secure Sockets Layer (SSL) (IETF, 1995). Operating within the transport layer of the OSI Reference Model, SSL/TLS provides for the negotiation, setup and teardown of a security envelope, or tunnel, within which regular TCP/ IP communication can be transmitted. The benefit of this layered approach is that the underlying communicating devices need not concern themselves about the security of the connection. This allows for improvements to the security (e.g., encryption style, bit length, entropy, etc.) without restructuring the entire end-to-end communications.

Of the remaining percentage of mobile transactions not delivered using HTTPS, specialized applications are developed to perform the purchase. These apps will likely utilize SSL/TLS as a transport layer to communicate with backend databases and credit card payment processing systems.

Despite subscribers having the same security protections on mobile devices as they do on desktop computers, 60 percent of study respondents mentioned a greater fear of using their mobile Internet device for m-commerce than their desktop device (Mashable, 2011). In line with the trend towards biometrics as a viable solution to mobile web security, Apple is rumored to be incorporating a fingerprint sensor in its next iPhone model. This speculation arises from their recent acquisition of biometric manufacturer AuthenTec for $356 million, and also from Apple’s refusal to sell any future technology to other companies (Biometrics Institute, 2013). Additionally, Apple holds a patent for unlocking smartphones using a visual photograph of the owner’s hand.

Combined with NFC (near field communication) chips, biometric sensors could enhance smartphone security to the point where mobile devices become the most secure and most convenient form of payment moving forward. Traditional physical wallets can be stolen or lost, and any person who finds a physical wallet is immediately able to use the cash contained within, along with the credit cards for some period of time.

In comparison, a biometric-protected virtual wallet would be nearly impossible to unlock, and would immediately be traceable using GPS beacons. For businesses to fully capitalize on the growing mobile ownership and engagement trends, consumers will need simple and secure options for making payments as they shop via mobile web and mobile apps. The easier and more secure the payment process, the more likely users will be to complete a sale.