Check
it out
Guide to Increasing Conversion

In our 7-part Guide to Increasing Conversion we'll introduce you to proven e-commerce functionality including, but not limited to, live chat, loyalty programs, and back in stock notifications! Sign up now and we'll deliver tips and best practices about each straight to your inbox!

Blog

Linear Responsive Design

Linear Responsive Design

Linear Responsive Design

As responsive design and mobile-first design become more widely practiced, we begin to see different methods and techniques being introduced. The linear approach or the long one-page site has been increasingly popular. The elevator pitch for one-page sites is that it’s clean, simple, and mobile-responsive. The one-page design approach not only creates a story-driven website but also forces us to really think about the website in terms of content first. But are there downfalls? Are responsive websites too long? Will readers get bored or be better engaged? This article will talk about the major advantages to the linear responsive design and tools to help navigate a long page.

Success Websites Tell A Story

Stories help us remember better. You may have used an mnemonic before to help remember math equations or formulas. When you put context into something, it makes it more memorable. Stories are effective tools to cognitive recognition. That is why we incorporate storytelling into building a website. How do we do that? First, we need to organize content so that it tells a story. There should be a purpose or main idea and supporting content as well as an end action. The linear method is one that helps organize content into a cohesive and readily understandable flow, thus making it an easy technique for storytelling.

The Flat vs. Realism and Hydraulic Fracturing site literally tells a story while you are scrolling through the it. They are powerful examples that and will compel readers to scroll down continuously to the end at which there is a action.

Story-Driven Design

One-page sites are carefully crafted so that one point leads to the next in a very quick and natural manner.

When content is given in a linear fashion, one by one, we don’t have to worry about if the user is going from points A-C-D-B rather than A-B-C-D. We aren’t asking the user for their e-mails or telling them to take an action before they know what’s it for. No one is willing to give out their information without knowing what’s it going to be used for.

Clean & Responsive-Friendly Design

We can take the same impact from the two story-telling sites I just mentioned to everyday websites. Sites like The Girl and the Bull are the linear, clean one-page design that tells a story and doesn’t require users to click from page to page.

As you can see a linear design also makes for a very clean design. The content is stacked one on top of the other. (accompanied by an image) If this looks familiar, it’s because the approach is mimics the mobile-first approach where we are thinking about how the content should be laid out first in mobile; thus making it clean and easy to mold responsively.

Here is a gallery of rich one-page sites.

This one-page concept embraces the need for “clean and minimal” design. However, the question lies in how can a one-page site design accommodate a website that used to have over 20+ pages? This concept forces us to decide what content is actually relevant to the overall goal of the site.

On the other hand, there are some cases where I would say that you don’t take this approach. This approach is not for every site. Some companies have a lot more to say about their company than others.

Scrolling is Intuitive

Scrolling is not a foreign behavior. We scroll on our desktops and especially on mobile devices. The one-page relies on this habitual behavior. However, we can easily see how the page can get lengthy really quickly. This affects browser loading time as well as the users’ attention.

Tools that help with scrolling and loading include lazy loading plugins or infinite loading plugins.

The bigger question is: what if it’s so long that we’ve lost the user’s attention before they get to the action and goal? I believe the answer depends on what kind of content we are presenting. Facebook has an infinite scroll in place that just keeps loading new feeds of various content that was posted. I won’t ask you how many hours you can spend just scrolling down that page. Therefore, I believe scrolling doesn’t cause users to lose attention; it’s the presentation of content that may cause our users to leave.

Forward-Thinking Tools, Features, Patterns...

Interactions engage us. We as humans feel satisfied and delighted by microinteractions, things that make us think “oh, I like this.” Examples of delightful interactions.

For example, take a look at the beautifully linear and responsive Shadow App site. When we go through the site and scroll, we see one message at a time. We aren’t bombarded to a whole bunch of different areas to look at. And each message transition feels like something is moving, there is an interesting interaction that is engaging the audience.

Alas, the organization of content also needs to be looked at differently on a one-page site. We need content to be clear and succinct. This means grouping content together, creating clear lists or tabs, and sections that visually communicate the relevancy of the content. One way to display content on long linear pages is the card design pattern, which has become quite the trend. Blocks of relevant information are grouped into cards. Pinterest is the prime example of the card layout, where a display of pins (or cards) will expand to more information when we interact with it. (image) A lot of advantages can come with using this card design technique, including ease of content consumption because visually it is succinct and engaging. The interactions with cards will be interesting; we can have information transition in by animating the area with a flip animation or expand the box for more content, which helps eliminate the need to click to other pages, thus making this design pattern great for one page websites.

Techniques such as hide, expand, collapse should be used on a long one-page site to minimize  what needs to be seen at any given time and maximize the reader’s attention. Users are familiar with the accordion which is used on most mobile menus.

Better Conversion Rates

No matter how beautiful a site is, the site isn’t doing its job if users are engaged and conversion rates are low. The purpose of a clean design is to cultivate engagement and ultimately conversion. This is where I think linear sites have an advantage. Several case studies have shown that a linear one-page site has increased conversion rates as opposed to the their multi-page counterparts.

We’ve also seen that responsive sites yield better conversion rates. Plus the fact that we are stripping content down to the most important aspects to get the message across, we can expect that the conversion rate will be that much better.

Responsible Responsive Design

Linear one-page sites are also very easy to abuse. The load time starts to be an afterthought but just because the design is shrinking when we resize our browser doesn’t mean it will respond the same way.

Supporting articles say that users don’t care if the site is responsive. They care if it’s easy to use and loads quick. That’s where we need to be careful using a single page design. Performance should not be sacrificed, but that goes for all responsive sites, not just single page websites. However, with one-page sites there may be more content so the loading time for this one page may be great but that doesn’t mean one-page sites are horrible then; it just means we need to optimize for best performance by decreasing the use of javascript files, image files, etc.

Is Pageless Design the Future of the Web?

We can argue both ways. Personally, I think it’s a definitely another stepping stone that helps us create better web experiences. There are plenty of good reasons listed here and other designers would agree that a one-page design is a step up. On the other hand, I don’t think every site can be page-less though.

There may be multiple goals that a website is trying to achieve. Some sites are complicated and have multiple portals for different audiences. These sites don’t fit under the one-page umbrella. These sites

One downfall about having pageless navigation is that you won’t be able to share a specific page because there are no pages. Also, if the page is long, it becomes difficult when you want to share one section of information. Then we should start using anchors to add to the hyperlinks.

It’s All About Getting Attention

We want our audiences to pay attention to what’s important and tell them exactly where to find the information they’re looking for through our web presence. The average attention span in 2013 was 8 seconds. That means we need to try to find new ways to keep our audience on our site before they turn away. With a linear responsive site, it carries the audiences’ attention from one point to another so that the user is not lost. If someone is lost, you can’t blame them for closing out your site. A successful website should guide the user's attention and the linear design pattern is one way to achieve that.