Google's “Mobile Path to Purchase” report surveyed 950 US consumers across 9 diﬀerent verticals (Restaurants, Food and Cooking, Finance, Travel, Home and Garden, Apparel and Beauty, Automotive, Electronics, Health and Nutrition) to assess how they researched purchases that were conducted using mobile devices. The starting points for mobile research were an interesting find.
Almost 50% of mobile researchers start on search engines, while the rest prefer branded apps and websites. For those who convert online, many switch devices, ranging from mobile to tablet to desktop, or a combination of them. This means, marketers have to be prepared for a variety of devices.
An understanding of your audience, their browsing and shopping behavior, their wants and needs on different devices, along with the business and functional requirements and objectives, ultimately guides mobile strategy.
As mobile internet and e-commerce grow, and the number of smart devices keeps increasing, people will continue using multiple devices. In order to meet requirements, search engine policies on mobile sites and new designs were put in place.
Desktop Sites on Mobile Devices
Before m (dot) design, mobile visitors would often open a site’s desktop version on their mobile devices. Once in the site, they would struggle to navigate a design and UX/UI that was originally created for desktop visitors..
m (dot) design
With m (dot) design, people have to create a different version of their site that would be specifically optimized for mobile users. There will be less content, simplified navigation, fewer images, and the like. (Eg: m.website.com). When accessing the website from a mobile device, m (dot) automatically redirects the user to the mobile site.
With the growth of mobile tech, ominichannel, and other developments, m (dot) is gradually turning obsolete. Since 2012, responsive design has replaced m (dot).
Problems with m (dot)
- Although quite fast, it ends up managing and optimizing 2 separate sites (desktop and mobile)
- Google hates sites redirection and this affects the ranking of the sites and, in turn, the traffic.
Responsive web design responds to the needs of the users according to the devices they’re using. The layout changes based on the size and capabilities of the device. For ex: On a phone, content would be seen in a single column view, while it would display the same content in two columns in a tablet. Responsive pages are built for easier maintenance and SEO, but they are slow and heavy for mobile users.
Regardless of the users’ device (desktop, non-visual browser, tablet, mobile), responsive web design serves the same HTML code on the same URL, but can render the display differently, according to the screen size. Responsive design is Google’s recommended design pattern.
Advantages of Responsive Design
- Need to manage and optimize one site
- Only one URL and no redirections
- Easy to share on the social networks
Problems with Responsive Design
- Responsive design means that everything from the desktop version can be downloaded on a mobile/tablet, irrespective of whether it is used on a mobile/tablet. This increases its loading time.
Here, the server identifies the device type that a visitor is using and then loads the correct version of the site. For ex: if you are browsing on your iPhone, the server will load the mobile version of your site. There will be 3 different versions of your site. For each, only the corresponding resources will be downloaded.
- A desktop site.
- A tablet site.
- A mobile site.
Advantages of Adaptive Design
- Download assets only for that particular version of the site. (i.e. tablet, mobile, desktop). Page loading time decreases and less bounce rates.
- With Adaptive, you can create a separate buyer journey optimized for each device type.
Problem with Adaptive
- Takes a lot of resources in creating separate versions for all devices.
Ex: Two versions of a site were built in WordPress – one was adaptive, while the other was responsive. Both these versions had the same design, content and architecture. Both of the versions performed well on a desktop. Although, on a mobile device, the adaptive version performed well (response speed: 568 ms) while the responsive version took longer (response speed: 1,202 ms). Further optimization of the versions resulted in reduced response time for both, but the adaptive version scored better than the responsive version.
Responsive design is becoming the top mobile design strategy, given its relative advantages. Also Google's stance on Responsive design adds to its attraction. A responsive B2B web design sets the stage for a fantastic user experience and contributes to better website conversions , thereby improving the ROI.