Making Complex Landing Pages Easy

Great design is all the rage these days. In the 90’s if you had a website at all, you were on the cutting edge of things, but you really needed a number in the yellow pages. In the 2000’s you were fine with a few colors, a big list of things and if you had round  corners you were doing something right. But these days, your website not only needs to be useful, it needs to be beautiful. 

But how do we make the beautifuls, without blowing our budgets? Since the beginning of webdesign, clients, designers and builders came up with various formats to communicate about websites. First there were mockups, high resolution images of what the developers were supposed to build. Becaue of more screen sizes and various pixel resolutions they came up with style guides, that outlined 14px (not pt) for text, padding for buttons etc. More recently they separated 'information architecture' from 'design' by using wireframes to complement the design-focused style guides.

But what if you have a site with style guides and wireframes, but wanted to create a single destination page with much more flexibility? What's out there?

Stage 1: Mockups

Designers use Adobe Photoshop to give you print-quality mockups of  the main pages of your site.

Stage 2: Style Guides and Wireframes

In recent years, to serve as a meeting point between designers, developers and clients, designers have huddled around wireframes and style guides. Style guides range from one-page of definitions to multi-page brochures intended to standardize the colors and fonts used across websites to give a consistent look and feel. Wireframes are low resolution boxes used to highlight the structure of the information and the interactivity of the site as separate from the design. Both of these allow the client, designer and developer to view and approve of what they’re getting independent of what actually shows up on each page. 


But what happens when you have a CMS and style guide but want to create even more complex pages, with multiple layouts and presentations?

And Now …

Stage 3: Pattern Libraries

The English language has 26 letters combined into roughly 1,025,110 words (I listed them from memory and counted them … actually I googled it.). This combination of 26 letters allows for a variety of patterns that we call words which occur in larger patterns we call phrases, which are the building blocks of sentences, conversations, poems, paragaphs, and more.

Print and web design has its own type of letters (fonts, spacing, colors, images, gradients, movement, interaction, etc) that combine to make a vast array of web pages, dashboards, apps and sites. We can portray the same information in an unlimited amount of ways.

But this is no comfort to people that have to build these pages one by one. Companies contract with designers and website builders to give them a site that’s easy to use for their customers and personnel, and pleasant to look at. With content management systems like Wordpress, Joomla and Drupal, building pages is a lot easier than learning the now retired Adobe Dreamweaver or Microsoft Frontpage. However, you’re still ‘stuck’ inside the design and framework built by the cms.

We at BackOffice Thinking have taken this notion of reusable patterns, or templates if you will, and run with it. Our client, Ransomed Heart, was interested in being able to build complex pages for upcoming events and products they were launching. So we put our noggins together and came up with a solution that lets them build sophisticated pages just by using the normal Drupal fields.

Instead of building a complex content type as we would usually do, we started thinking of each horizontal section as a reusable pattern. With that insight, we could then create multiple patterns that the client could use in any order they pleased. With the design in hand, all we had to do was apply the styling to the pattern (instead of the item - think class instead of id) and our client could build many of these pages on their own!

Let’s take a look at how this works:

Here is a sample of what we helped Ransomed Heart create by utilizing our landing page setup. In order to create this section of their landing page (below), the setup through the admin is very simple for the administrative user.

In this particular section of the landing page, the Drupal admin is setup to allow for various title, columns, and image graphic configurations. This sample called for a main title, a left column for text, and a right column for an attractive graphic.

How the information is entered into the backend of Drupal.

1. Add the section Title.

2. Upload and style content for the left column.

3. Upload graphic for the right sidebar.

That's it! You'll notice in the screenshot above you will see horizontal tabs for "Show Three Columns" and "Show Bottom Full". These tabs are used for additional configurations or "landing page sections" that require alternate layout features such as 3 columns and subtext underneath a section.

The great part about working with and configuring entity types is the ability to create an infinite number of layouts to match any landing page design and design options.

Here are a couple more examples of how this particular section looks on various landing pages throughout Ransomed Heart's website:

Here is a link to view a live landing page example from Ransomed Heart, created from a total of 7 fully-administered sections.

In this full-page example, each "section" is essentially itentified by different background colors or graphics. Each section may also be reordered by simply dragging and dropping the sections within the administration panel.

So there you have it. The final product. Now, folks at Ransomed Heart Ministries can go in and update their content and create new pages without having to learn html and css... and without having to worry about breaking the colors and formatting.

For more information about how we can customize your website so that you can build and update landing pages yourself, please contact us.

Related Blog Posts



Technologies for Nonprofits