What it means to be 'mobile-first'

The concept of mobile first has been around for a while – most notably when Eric Schmidt announced Google would focus on ‘mobile first’ back in 2010. However, the concept still means different things to many different people.

It’s not far-fetched to say that mobile technologies have permeated our lives. You no longer go online, you are online and you carry it around in your pocket. Just like Dr. Michio Kaku says, “Today, your cell phone has more computer power than all of NASA back in 1969, when it placed two astronauts on the moon."

A few years ago a retailer’s goal was to be mobile-capable either through M. sites or custom apps. But today, being mobile-capable simply doesn’t cut it; now, you have to be mobile-first if you really want to engage your customers.

Mobile first is the opposite of graceful degradation where a desktop site is scaled back by removing content and features. The goal before was to at least have a functional site on a mobile device but not necessarily an optimal one. With mobile first, retailers focus on creating a great user experience on the small form factor, which requires prioritizing the most important elements, content and designing for taps and swipes vs. clicks and mouse hovers. Once retailers have done that and scale up their site for desktop, the retailers have already identified the most important elements and can focus on adding additional value to the desktop user.

This can be very difficult for many retailers, especially those that have pages designed by committee and every business unit feels the need to have a piece of homepage real estate. For example, creating cluttered designs that lack a cohesive call to action. One of the hidden benefits of a mobile first design is having clear calls to action based on what is most important to the customers in this way a mobile first design can also help increase conversions across all other devices.

While many retailers understand the need to address mobile users, the reality is that there’s much room for improvement. For example, according to Guy Podjarny, CEO & Founder of Snyk.io, only about 12 percent of the top 100 retailers currently employ responsive web design (RWD), which is crucial for providing a seamless customer experience across devices. For many, mobile devices are the preferred devices for product and services research and many customers will interact with a retailer’s site on multiple devices before making a purchase, making the mobile device a very important piece of the purchase process. If your site requires mobile users to pinch and zoom, this is a frustrating experience and your competitors are only one back button away.

Once you have designed your site with a mobile first responsive design, what’s next? While responsive design solves display issues across devices, it does present some interesting performance challenges; since performance is a key element of a great customer experience – according to a recent Akamai analysis of e-commerce consumers’ behaviors and expectations, 49 percent of users expect a page to load in less than two seconds.

Below are a couple of ways to provide a better overall customer experience whether the user is on mobile, desktop or shopping in-store.

Adaptive Image Compression

While the top 1,000 websites saw an average page size of 1.5 MB in July 2014, the average now exceeds 2 MB. This is certainly an impressive increase, but what caused it? Images. Approximately 65 percent of a page’s weight now comes from images, while stylesheets, HTML, scripts and fonts comprise the rest. Furthermore, not only are the number of images increasing, but the images themselves are getting larger as well; compared to 2011, they are now 2.4 times the size.

In an effort to provide users with the level of experience they expect, retailers have increased the size and quality of the product and marketing images. This is great when the user is on a fast connection; however, when the users are on a slower or congested connection, this can cause long delays in page load. While RWD will make the images fluid where they fit properly based on the device screen size, it will still be using the same size image as shown on the desktop. This can mean your users on slow 3G or high latency networks are required to download an image that’s several megabytes only to have it show to them in near postage stamp size. The answer: responsive images only sending the user the size of image appropriate for their current network conditions. Adaptive image compression accomplishes this by taking into consideration the current network connection, latency and device, then compressing the image in real-time to provide a balance between image quality and download time to ensure users have access to high-quality images without suffering from slow performance.

Visually Complete

The concept of visually complete is pretty simple: when a user can see and interact with a webpage, their perception that the pages are loaded and the speed associated with that result in a better customer experience. For a demonstration of this, visit webpagetest.org and enter your site and a competitor for a filmstrip version of how many seconds it takes for your site to render visually complete. One of the many ways you can optimize for visually complete is Front End Optimization (FEO). One part of the idea is to automatically load elements of the page above the fold first to enhance the user’s perception that the page is complete. This can mean lazy loading, asynchronous JavaScript or keeping thing like social networking buttons from blocking page load. In more advanced setups, Edgestart can begin requesting content from origin servers before the client requests it.

In Store Experience

With more technology and personalization in store through apps, geo fencing, beacons and interactive retail, the traditional private WAN architectures that retail locations have relied on are often not enough to keep up with these new bandwidth demands. This results in poor in-store website performance and application usage, which is important as shoppers continue to increasingly utilize mobile devices in-store; in fact, recent Google research shows that 89 percent of smartphone owners leverage their smartphones while shopping at a physical location.

By evolving to a Hybrid WAN architecture, retailers can utilize technologies like predictive analytics, edge caching and pre-positioning of content to allow them to customize content for each user at scale. During off-peak hours or when a strong Wi-Fi signal is available, mobile devices will benefit as content is pushed to their devices and saving the download time later. This means content can be delivered at a higher bit rate, enabling retailers to provide fresh content and truly personalized experiences to their users while removing some of the limitations of standard MPLS network connections.

Long story short: Shoppers are using their mobile devices everywhere and all the time, and retailers need to adapt to this behavior if they truly want to engage their shoppers. Technology is changing at a rapid pace, and the mobile initiatives that may have satisfied consumers a few years ago are no longer up to par. So, take a look at your current mobile presence and ask yourself: are you truly mobile-first?

Jason Miller is the chief strategist of commerce at Akamai Technologies, whose Akamai Intelligent Platform provides its users with web performance, mobile performance, cloud security and media delivery solutions in order to manage the underlying complexities of online businesses, with access to a network of more than 170,000 servers across the globe.