Cubender Blog

Tutorials, articles and all things Cubender
11 - 2011
Small business websites – planning your layout

Creating a website is a little like building a house – you have to make sure that the fundamentals are in place – plumbing, electric, and uber-soft couches.

You also want to make sure that the rooms are accessible, useful, and practical.  And finally, you want to make it inviting to those who enter.  Creating a home for yourself on the internet isn’t all that different, and it’s the planning stages that will set the tone for the whole project.

In a recent article, Smashing Magazine author Kayla Knight describes some of the imperative steps needed for website planning and navigation.  Being able to clearly define what type of content you want to include in your site, how you believe users should navigate through that content, and presenting it in such a way that users find useful and intuitive are the keys to planning a great website.

Once you know what types of information you want to put out there and have a good idea of how to categorize it all, you’ll be able to develop a visual representation of what your website will look like.

Using the above example, you could create this website in one of 3 ways using Cubender:

  1. Vertical – one single web page using Stacks
  2. Horizontal – many web pages (one for each section) linked together
  3. Combination – using both multiple pages and Stacks

There are of course advantages and disadvantages to each strategy, and the method you choose should best reflect your needs.  Do you need a website that is easy to update and maintain?  Do you want web pages that load as fast as possible?  Will registered users need special access to restricted pages?  Let’s take a look at the pros and cons of each.

Vertical Design

One of Cubender’s most versatile features (and my personal favorite) is called a ‘Stack’.  A Stack is an ‘area’ that you place on a Webpage that allows you to transform that portion of the page into individual ‘Layers’.  A stack can have an unlimited number of layers, and the content of each layer can be changed as desired.  The areas of the page outside of the stack do not change.

The first thing you can do with a Stack is use it to create what looks to be a
multiple-page website using only one page:

In the image below, I have separated the stack from the menu so that you can see the page components.  This example shows that there’s only one web page, that the page has a stack in the center (highlighted in blue), and the stack is linked to a menu.
Having clicked on the stack, you’ll notice that we are currently on Layer 1 (Home) of the ‘Main Stack’.  By clicking the left and right arrows on the stack, or by clicking on a tab in the menu, the layer of the stack will flip to the appropriate content, leaving everything else on the page untouched.

The main benefit to setting up your website using Stacks is simplicity.  Imagine a 20-page website that has your company logo on each of the 20 pages.  If you need to change the logo, you need to edit all 20 pages.  You also have to make sure that the logo is in the exact same position on every single page; otherwise it might look unprofessional to see the logo ‘hopping around’ as a user navigates.

Using the Stack layout, if you want to change the logo, you only have to change it once
because there’s only one page.  The website is assured a clean and consistent look, and you know that your page layout is perfect throughout your website.

Another benefit to setting up your site with Stacks is that your webpage doesn’t have
to reload every time a user clicks somewhere; once the page is loaded, it’s loaded.  This can drastically speed up navigation, and make the user experience a lot more seamless.

To make things even more exciting, consider putting a ‘Stack within a Stack’.  Crazy, I know!  Take a look at this example to see what I mean:

This website is also just one page long.   The Main page has a Stack with three Layers – Home, About, and Contact.  Clicking on the ‘About’ layer (highlighted) brings me to the appropriate layer of that Main Stack, and you can see that within that 2nd layer we have placed another stack and menu (“ABOUT Page Stack”).  The second stack has an additional 7 layers that users can navigate through with the menu tabs found on the left.  Thus, if each of the three Main tabs (Home, About, and Contact) each had a 7-layer stack inserted, you would have what appears to be a 21-page website (3 layers x 7 layers per) all on one page.  Amazing?  Indeed. Learn more about Stacks.

Functionally, using Stacks allows you to create an entire website in a concise and manageable manner, true.  But the drawback to this method is that all users have access to the same information, and you cannot send users directly to a specific spot in your website if you need to.

Horizontal Design

In my former life in the Steel Industry, I would often have to log in to our Supplier
websites to check our order status, and I remember how frustrating it would always
be to have to go every time to the Supplier’s main Home Page, find my way to
the Customer Login tab somewhere in the network of their Sitemap, click ‘Suppliers’,
and eventually get to the place I wanted to go.

By creating separate web pages, you can give the specific URL to your customer so that they can avoid headaches of this kind, and they can access a specific page directly.

Here’s an example of a website with 2 pages: the main home and a Supplier page (accessed by adding the page filename ‘Supplier’ to the domain name).  Typing in will send a user to the home page and all it has to offer, whereas typing will send people directly to your Supplier page, avoiding having to navigate through an entire site, especially if it’s a complicated one.

This brings me to another really cool feature that Cubender has – the User Login Widget, where you can control page access by having users log in with a username and
password.  Normally used in conjunction with the user Registration Form (so that they can sign up themselves), only users that you have approved can access information on your restricted or ‘Private’ pages, so it’s important to keep those pages separate from the general content if you want to use the feature.

In my humble opinion, I think that planning is highly underrated.  A little extra planning in the beginning stages can ultimately save time and money in the end.



  1. It‘s quiet in here! Why not leave a response?

You must be logged in to post a comment.