Designing Smart Sites for Smartphone Users

Last May, U.S. mobile search queries passed desktop queries for the first time, confirming a long-anticipated trend, according to Google. Smartphone usage grew 394 percent between December 2010 and December 2014, while tablet usage increased 1,721 percent, with the two devices combining to account for 60 percent of time spent on social media, according to comScore.

As the growth of mobile changes the dynamics of Internet access, web design is changing accordingly. Here are some of the design trends that are transforming websites into smart sites for smartphones.

Defining Smart Sites

A smart site is a website midway between a traditional multi-page website and a one-page landing page. A traditional site has multiple pages of content that are accessible by clicking. In contrast, a sales-oriented landing page using a "squeeze page" format employs a single page that is designed to boost sales conversion rates by minimizing options for clicking away from the page. This means the only on-page option is clicking a buy button.

A smart site combines the one-page nature of a landing page with the content-oriented characteristics of a traditional website. The structure of a smart site steers users through a narrative that is digested by scrolling down the page rather than clicking off the page. The story is told visually and emotionally, with the plot guiding the readers toward some desired action at the conclusion. A smart site is also designed to be intuitive. Traditional analytics provide raw numbers from multiple pages that must be analyzed in context to translate results into meaningful performance metrics. In contrast, smart site analytics measure whether or not the site's single-page design achieved its intended goal, using tools such as heat maps, that measure which part of the page drew the reader's activity. Finally, smart sites are designed to work on all devices. Smart sites use responsive designs that adapt to the user's device and screen size in order to provide optimal experience for all users.

Pageless Design

Single-page smart sites use an approach to web design known as pageless design or scroll-oriented design. Pageless design arranges the elements of the site to be read vertically down and across the page in a story sequence that resembles the acts of a play or the chapters of a book. For instance, Driving-Tests.org places its most essential features on a page where the top of the page is dominated by a banner graphic with an image and word balloon arranged in cartoon-style configuration, which is meant to be read from left to right and down. As the reader's eye travels from left to right to follow the word balloon, his or her gaze is guided toward a call-to-action button that invites visitors to take a DMV practice test.

For readers who do not immediately click on the practice test button, the story continues in a second row that reinforces the call to action. All the essential elements of the story are contained on a single page. The site also includes supplementary pages that perform functions such as answering FAQs, illustrating that a pageless design does not have to be literally one page in order to incorporate scrolling-oriented principles. The key feature is that the page design is guided by a scroll-through narrative structure rather than a click-oriented menu structure.

Bounce Rates

Traditionally, analytics tools such as Google Analytics have measured bounce rate in terms of what percentage of visitors left a site after visiting only one page, with a high bounce rate indicating lack of user engagement. But with a one-page site, a user can be engaged even if they only read one page. To factor this in, Around Analytics recommends that one-page sites should define a timeout range, which represents how long a user has to stay on a page in order to be considered engaged. Use Javascript to set up a timeout counter that starts when the page code finishes loading, and execute a Google Analytics event when the timeout expires to let Google know the visitor is not a bounce.