Responsive Layout vs. One Page Websites

There is no one fixed solution on applying Responsive Layout to one page websites because all greatly depend on what type of one page website you are designing. So before you get your mouse dirty and start designing, get a better understanding of the relationship between Responsive Layout and one page websites.

Responsive Layout

Responsive Layout (or “adaptive layout”) is a grid-based fluid website layout that uses CSS percentage ratio towards each grid width which automatically adjusts its content to fit the browser size. Images are also flexible as long as you do not apply height and width variables to the img tag, and CSS media queries are usually use to target mobile devices. With this being said, in short, there are three important elements of a responsive layout:

  1. Fluid grid-based layout
  2. Flexible images
  3. CSS media queries

One Page Website Layouts

One page or single page website comes in a variety of layout designs (depending on designer’s discretion). Since we are constricted by using only one HTML page, one page layouts are greatly affected by the usage of javascript, e.g. jQuery, to control the navigation to different section of the page. The ones that you’ll see most often are the Horizontal Panel Scroll and Vertical Panel Scroll layout which generally uses fixed panel size to contain scroll elements. Other popular ones are Full Background, Parallax Scrolling and the latest popular usage of “Isotope and Masonry” floating grid layout.

Responsive Layout VS. One Page Websites

Keeping above factors in mind let’s look at some popular one page website layouts and see whether Responsive Design can be applied to them. Showin’ some love… Our one page website examples are courtesy of onepagelove.com, onepagemania.com, awwwards.com and crushlovely.com (Thank you folks!)

Horizontal Scroll

Can we apply Responsive Layout to it? YES and NO.

Most Horizontal Scroll have fixed panel width to contain each panel scroll elements, e.g. text, images, videos, etc. The idea is to scroll panels from right to left, and vice versa, while keeping menu header fixed and panel width consistent. Sometimes, full page panels are used creatively as visual presentation such as in vanityclaire.com and again, with this type of presentation it could be difficult to apply Responsive Layout because of the fixed panel width.

(updated January 2013) With the evolving one page website development, we are seeing more and more flexible Horizontal Scroll layout being utilized. The great thing about this layout is that it occupies the entire web page width and height and automatically adjust to the media device you are viewing it with. For example, take Barrell 2012 Recap website which cleverly combines full background image with Horizontal Scroll slideshow on a Responsive Layout.

Barrell Recap 2012

Carrot Creative

carrotcreative

Gavin Castleton

gavin castleton

Squeeze of Lime Studio

squeeze of lime studio

One page theme: Agent.C

agent.c

Vertical Scroll

Can we apply Responsive Layout to it? YES and NO.

The placement of the menu header greatly affects the layout. This in turns determine whether we can apply Responsive Layout to it. There are three popular header positions: Side Menu Header (left or Right), Fixed/Persistent Top Header, and Sticky Header. Responsive Layout are mostly seen in vertical layouts with Top Header navigation that is because the page’s content is not constricted by any fixed width. Below are website examples with the aforementioned headers.

Fixed Left (or Right) Side Menu Header

Can we apply Responsive Layout to it? NO.

System of a Down

system of a down

Innerspin

innerspin

One page theme: SimpleCity

simplecity

Fixed Top (or Bottom) Header

Can we apply Responsive Layout to it? YES.

Free Range Designs

free range designs

Castagno Village

castagno village

House Creative

house creative

Sticky Header

Can we apply Responsive Layout to it? YES.

Sticky Headers are headers that beautifully appear as a top bar as you scroll down the page. Just like a Fixed Top Header, this particular layout is adaptable too. Notice that a designer/developer uses this layout for a personal wedding RSVP website! How sweet! :)

Nobody baby but you and me

nobody baby but you and me

Oriel Brasserie

oriel brasserie

Carter Digital

carter digital

Parallax Scrollling

Can we apply Responsive Layout to it? YES and NO.

Parallax Scrolling is a technique of creating an illusion of depth by moving multiple layers of images at different speed. Originated from video games, Parallax Scrolling has been applied many times in web design, Nike Better World was one of the early sites who started this trend. Most Parallax websites are vertical in nature but some are horizontal like indofolio.com. The adaptability of a Parallax Scrolling site is greatly depends on CSS media queries, which means more HTTP requests needed, which equals to slower browsing experience in some cases. Keep in mind that most Parallax Scrolling websites do not work well in mobile browser, therefore it is best to create a mobile version of it.

Nike Jumpman

nike jumpman

Beetle

beetle

Janploch

janploch

Kinetic

kinetic

Pixel Fable

pixel fable

Full Background Panel Scroll

Can we apply Responsive Layout to it? YES and NO.

This layout is unique as we are force to imagine the website as a bigger site. The adaptability of the website layout will depend on the flexibility of the panel grids. Below are each example of a fluid grid and a fixed grid.

Mandoch

mandoch

Melissa Hie

melissa hie

Full Background Image

Can we apply Responsive Layout to it? YES and NO.

Full images with cycle transitions are used on the background of this layout presentation. Depending on the discretion of designers/developers these images are sometimes developed to be adaptable and sometimes they are fixed. Large size images are needed to look good across a large browser (careful with slow loading time).

Fabio Neural

fabio neural

Salt Grill & Sky Bar

salt grill and sky bar

Floating Grid

Can we apply Responsive Layout to it? YES.

Floating Grid is gaining in popularity and mostly are used for portfolio galleries. For one page websites, there are many unique and creative applications that you can do with Floating Grid. One of them is the usage of filter system, i.e. Isotope, to dynamically filter content on the page itself. As for adaptability, since it floats you can be sure that it will fit in most browser sizes. But for safe measure, use CSS media queries to target mobile devices.

Faces of New York Fashion Show

faces of nyfw

One page theme: Silhouette

silhouette

One page theme: Silhouette – Mobile

silhouette

Responsive

Can we apply Responsive Layout to it? ISN’T IT OBVIOUS.

Here are some examples of responsive one page websites without the extra jQuery frills and thrills. Notice that all websites are center aligned. Go ahead and drag the corner of your browser to see Responsive Layout in action!

Duet

duet

Studio Saus

studio saus

The Art Source Inc

artsource

Simon Coudeville

simon coudeville

Siska Flaurensia

siska flaurensia

Mobile Version is Recommended

When it comes to developing one page websites on mobile platform, e.g. iPhone and Android, you are better off creating a mobile website than a responsive one. One of the advantage of doing so is that it is many times lighter in file size because it requires less HTTP requests than the desktop version, thus speeds up loading times on mobile browser. But of course one of the obvious downfall from creating a mobile version of your one page website is that you might sacrifice the unique functionality and layout design for a more simpler information-based layout—the choice is up to you.

…Exception to the Rule

Yes, there is always an exception to the rule. On most one page websites, Responsive Layout are not easily applied because of constrictive panel design and so on and so forth. There is a way around it as long as we use a clever combination of CSS media queries and a good dose of javascript. One awesome example is Asiance.com.

asiance This digital agency uses a combination of a Sticky (Bottom) Navigation to scroll horizontal panels which are developed with Floating Grids to make it adaptable to any browser size (including mobile!). Plus, they used jQuery Mousewheel to amp up its smooth horizontal navigation to another level. So kids… When there’s a will, there’s a way.

Now its your turn to talk: What is your favorite one page layout and why? And what are your thoughts on applying Responsive Layout to one page websites? Is Responsive Layout really necessary?

Written and curated by: Siska Flaurensia
A Digital Designer and Front End Developer who has a chronic obsession with one page web design and development. Calls herself “Citizen of the World”, loves to travel, sing in the car, and eat red velvet cupcakes. Visit her website and follow her on Twitter.