Introducing Cover Pages

Automatic, cutomizable micro-sites for your guide on Guidebook

Pete Lada
Guidebook Design

--

Guidebook has always had a web presence for guides, and maintaining an accessible, modern web product to pair with a native mobile guide has and will always be something we care about. While mobile is where we believe Guidebook can offer the most value, we still believe that a web component is a necessity, both for displaying your guide’s information for a desktop (“pre-event”) experience, and as a promotional tool.

However, the “modern” part of our criteria for a web solution had become less accurate for our web product — it was something that wasn’t updated nearly as often as our core products. It became obvious to us that we needed to overhaul our web offering, and provide Guidebook users with an experience which we are proud of.

Goals

There were numerous goals established for the project, the main ones being:

  • Create a web product which entices and easily directs users to download the mobile guide
  • Design the product to feasibly serve as the sole web presence for small events or organizations
  • Provide enough information so that the user doesn’t necessarily need to download the mobile guide if they choose not to
  • Create a framework to allow for future web expansions
  • Zero extra effort for guide managers

The product

While a Cover Page is customizable in terms of where and what information you’d like to display, the base Cover Page will follow a familiar format. The hero section at the top contains general information about the guide, such as location, dates, and directions on how to get the mobile guide.

A Cover Page hero example

Below that, we default to rendering the guide’s schedule. This is a fully-functional schedule, complete with session details and track filtering.

The schedule displayed on a Cover Page

Next, we display up to two Custom Lists from within the guide. This can be things like speakers, sponsors, or exhibitors. These can be formatted to fit the content type, for instance you may want thumbnail images for speakers, or large header-type images for sponsors.

Examples of custom lists on a Cover Page

Finally, we display a section on how to download the mobile guide with a “text me a link” function. This is similar to how our previous landing pages functioned. Fun detail: the phone screens in this section are fully representative of the guide, down to the theme and menu items displayed.

Cover Pages are also fully themeable and responsive, meaning they both will render in the full theme of your Space (if you have one), and will display nicely on any size device.

We also built a really nice section of Builder to manage and deploy your Cover Page. The experience is quite seamless and should feel natural to those familiar with using Builder.

Configuring a Cover Page within Guidebook Builder

Let us know what you think!

A lot of effort went into crafting Cover Pages from nearly every department at Guidebook. We hope the effort shines through, and we’d love to hear what you think!

Technical note:

We built Cover Pages using React and Styled Components, a UI development framework. Styled Components, specifically, has been a joy to develop with, and I recommend it to any UI developers looking to improve their workflow and tool set.

--

--