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.