A recent report from eMarketer provides stats and info chronicling the divergent behavior of consumers on different types of mobile devices.

“Bottom line: Mobile is fragmenting into multiple screens, some of which play on mobility, and some of which are used more at home. These connected devices may share features and functionality and even reflect some shared usage patterns among owners. “

While the ideal solve to this dilemma is to provide highly differentiated functionality and experiences to accommodate a variety of use cases, needs and behaviors, this often proves to be logistically unrealistic.

A good starting point is to design and develop websites, using responsive design with three distinct breakpoints: desktop, tablet and phone.

  • Content reflows on large vs. small screens (i.e. phone, tablet, desktop)
  • It allows simple elements (text, buttons, etc.) to adapt and change based on target breakpoint
  • Understanding that the mobile user’s patience level is less, meaning content needs to be organized in a streamlined manner and the “click investment” is higher while a page is loading

Recommended layouts/breakpoints to use as a starting point are as follows:

 

Breakpoint Min Width Max Width Implementation
Desktop 980 px  – Columns get Fixed
Tablet ~600 px 979 px Fluid Columns
Phone 320 px ~600 px Fluid Columns

 

Use-case specific apps (ideally coded as universal binaries – providing unique experiences for mobile and tablet users) can round out a brand’s mobile consumer engagement strategy.

  recommend this