OPTIMIZING MAGENTO FOR MOBILE

Mobile matters. Since 2014, mobile represents more than half of traffic and sales across e-commerce sites. A store’s ability to effectively market and convert customers on mobile devices is essential to any growth strategy.

Over the last five years, we’ve seen clients experiment with different approaches. While each engagement is distinct and may incorporate business needs that override a generally recommended approach, presenting a “responsive” interface that adapts to screen size is the current best practice. Optimizing a responsive Magento interface is the focus, here, but first a brief explanation as to why:

The wrong way (usually)

Beyond responsive, there are four general approaches that we’ve seen born out with varying success:

Doing nothing
In the absence of a mobile strategy, stores that present a conventional desktop interface in the phone are not sufficiently separating signal from noise. The typical three column format renders text and media a format that is illegible and slow to load. Research supports our anecdotal experience: stores that ignore mobile convert roughly 30% fewer customers on phones and tablets than those who have implemented a mobile-friendly design.

Native apps
While developing a native app for iOS or Android empowers stores to collect data and interact with users in innovative ways, the abandonment rate for users who choose not to download the software nearly always outweighs the advantages. We’ve yet to see a compelling reason to develop native apps for conventional e-commerce sties.

Device exceptions
Magento natively allows site administrators to configure device detection and serve up alternate templates for particular devices. This approach allows stores to reformat content for small screens, but is inherently disadvantaged for two reasons: 1) it requires developers to maintain multiple templates in parallel, and 2) device detection is imperfect and requires extensive testing due to the large number of new devices that are constantly coming online.

Proxy overrides
Placing a proxy in place to override the frontend interface either at the DNS level or through dynamic Javascript updates is currently a popular approach to making sites more mobile friendly. While this might be the best option for sites that cannot feasibly change the frontend template (i.e. in the case of some legacy systems), we don’t generally recommend the approach as it invariably generates new room for error on actively developed projects, as the mobile interface tends to be dependent on keys that are inserted into the template markup. The result, usually, is an initially “good enough” product that degrades over time.

Responsive design

The purpose of responsive design it to leverage fluid grids, flexible images and media queries to present the most effective presentation layer to users based on the screen size of their devices. Employing a responsive approach can optimize conversions while minimizing ongoing development cost.

Fluid grids
A typical non-responsive e-commerce layout is 2-3 columns of fixed width. For example, the left column, which is often used for navigation, is Xpx wide and the main column, where product content is displayed, is Ypx wide. Employing a fluid grid at it’s most basic form means the left column width changes to be X% wide, while the main column is Y% wide. In this way, the general layout of the site can adapt to the width of the screen, as can ancillary elements when carried through as a design pattern.

Flexible images
Maximizing the efficacy of images is key across devices and is best achieved by adapting image widths according to device constraints. Generally, this can be achieved by applying the “max-width” rule to images that are contained within fluid elements which allows them to inherit the dimensions of their parent elements.

Media queries
Media queries are conditional statements that frontend developers can embed into style definitions, such that CSS rules are applied only if the conditions are met. The most frequent conditional tests key off of the “height”, “width” and “device-pixel-ratio” values that are exposed to the application once the page loads.

Mobile first

Some of the best responsive design is being produced by new entries in e-commerce. This is likely because designing a mobile-friendly site becomes significantly more complicated as legacy features and systems are added to the business’s ecosystem. That said, companies who embrace a “mobile-first” approach to design benefit from the advantage of self-regulated prioritization. Because you can’t put everything on the front page in a phone, you start to think about what’s truly important, and that kind of thinking trends over into the desktop view.

Image treatment

As small device screens advance and become more pixel-dense than their desktop counterparts, determining the correct image to serve up in a given context becomes more complicated. For example, while a retina iPhone may support big, beautiful images, the network it is running on may produce slower than acceptable load time thresholds. The best solution to this is to leverage adaptive image loading, which essentially loads a low-resolution image first, and then replaces it with a high resolution image. While the overall load time may be impacted negatively, the perceived load time is improved.

Navigation

Probably the most important aspect of navigation in the mobile context is ensuring that the important content on each page is being surfaced, the implication being that navigation should compact to possess minimal screen real estate in it’s passive form. Of note, there are advocates of maintaining an un-compacted top-level menu in the body, but we believe that the benefits of pushing body content above the fold are more significant.

  • The “sandwich” menu is the most recognizable marker for a competed navigation scheme, while activation can either “drop down” or “swing out”.
  • Consider compacting other menu items to abbreviated icon formats to save space.
Front page

The front page is always the most considered in the desktop view, but rarely optimized for mobile.

  • Make the front page easily scanable, as this is the most frequently abandoned entry-point.
  • Hero images need to be rethought to adapt to landscape and portrait orientations, and should be swipe-optimized.
  • Avoid animations (i.e. auto-rotating hero images), as these tend to cause confusion in the mobile context.
  • Ancillary banners should stack at break points down to a single column in the phone view to optimize legibility.
  • Ensure that some content is cut off at the fold, to indicate that there is more available after scrolling.
List page

A fluid grid should be implemented on all list views, including category pages, search results and related items.

  • Expand the number of products displayed on a row to meet the width of the page, while reducing to a single column in the phone view.
PDP

Surface the most important product information to the top of the page on the PDP, including imagery, a brief description and the buy button.

  • Ensure that the call to action is touch-optimized across devices to a normal human finger.
  • Implement swipe triggers to reveal ancillary media.
  • Use the fluid grid on related items to maximize legibility.
  • Use video formats that are widely supported across mobile devices (i.e. youtube, not flash).
Checkout

Just as in desktop, checkout in mobile should be optimized for ease of use.

  • Remove all unessential data points.
  • Ensure that all fields are sufficiently large to be legible across devices.
  • Ensure that all buttons are touch optimized.
  • Don’t require account creation, as it can be a cumbersome added step.
  • Consider (selectively) offering wallet payment methods (such as Apple Pay or Google Wallet, Amazon and PayPal) to leverage saved payment details for guests.
  • Offer a saved payment feature when using user profiles.
  • Persist as much data as possible during the checkout process to prevent a scenario where a user may be forced to re-enter shipping or payment information.
  • Avoid using dialog errors during checkout, as these are sometimes mistaken as device/security dialogs.
  • Disable autocorrection on address fields, as this often leads to mis-spellings.
  • Present only vital fields (i.e. hide “middle initial”), as the clutter increases abandonment.
Login

Emphasize the “guest checkout” option in the mobile interface, as this is the method that most customers will use.