About two years ago, NationBuilder collaborated with cStreet to create Publish, one of the most popular site themes for bloggers, writers, and activists across our network. Now, drawing on feedback from their 100+ NationBuilder-powered clients and the design insights from their talented team, cStreet has partnered with us again to bring you Action. As its name might imply, this theme is tailor-made for the most effective NationBuilder features and optimized to help you succeed in meeting your goals, whether you’re looking to draw donations, drive petition signatures, or simply convey your message as powerfully as possible.
Some of its notable new features include:
-
A header image site setting that activates a splash page for first-time site visitors.
-
Simplified featured content slider design placing text alongside (rather than laid over) each image, creating a cleaner look. For an especially impactful header, include a “background image” that will show behind the featured content slider when activated.
-
Action-oriented homepage widgets with card-based elements like petitions and volunteer forms, resulting in a truly mobile-first design.
-
A supporter nav drop-down located in the top navigation bar, including “log out” and “settings” links as well as shortcuts for logged-in admins.
-
Based on popular demand, a “donate” button appears in the top navigation when you have a donation page assigned for your site and marked “Include in the top nav.”
-
A card-based design for blog and event posts, showing only a streamlined headline and image that users can click through to a full post. Add an image to the social media settings and it’ll show as a background to the card.
-
Action-focused “squeeze” pages without a header or footer, optimized for conversion.
-
Five color variations to start from, including one in black and white. Plus, clean and well-annotated CSS for easy customizations if you choose to modify the theme.
For additional color on the collaborative process that brought this theme to life, we connected with Amy Leaman, cStreet’s Co-Founder and Creative Director, for a brief Q&A.
So, how does one go about creating an action-focused design theme?
“It was really about saying, we have this wealth of features available to us in NationBuilder and a lot of them are out-of-the-box. Let's simplify down to what we've learned from clients and working with lots of people. What are the real campaign-focused, action-focused features that we can use on the front end? How do we bring those things to light, making sure that we maintain all the functionality of NationBuilder in a way that allows people to focus on their core actions? Generally, if you're taking an action on the web, you want to make sure you're really focusing your users on exactly what you want them to do and they're not being distracted by a million other things on your page.”
In addition to the action-focused modifications, what other oft-requested features were you able to work into the theme?
“One of the things they ask for often is to have the flexibility to be able to change up their site depending on their core goals at any given time. So we created homepage widgets that are really simple but give the look of having a custom website, even if it's an out-of-the-box theme. [NationBuilder] gives us a lot of functionality there so that you can pick and choose exactly what you want to show on your homepage. And when you scroll it looks as though it's something that's been developed as a custom design for you.
[Another] thing we noticed is that other clients and visual architects were using Publish as a bootstrap—basically taking Publish, creating new themes with it, cloning it, and then editing it to put in their specific colors or their specific style. So Action was designed with that in mind.
It's designed to be very well-featured, but the actual code is also really well documented. So if you're in the CSS, each block of code comes with notes that tells you what from the coder bootstrap is being overwritten, why some decisions were made, and warnings about places where the code is a bit touchy. It's geared not just toward people using it out of the box but also toward developers who may customize it for their clients.”
Action opens up some powerful use of striking photography. Do you have any recommendations for how users can select photos for maximum visual impact?
“We work with lots of really large organizations...that can pick and choose from the most beautiful photos for basically any issue. But most people using a basic NationBuilder theme may not have access to that kind of photography. So, where we have the ability to add thumbnails to blog posts or events, we also have fallbacks that utilize the colors of the theme and the different variations as a stand-in for having a photographic thumbnail image. So if you had no images at all on the entire site, it would still look great because we use a lot of color, we use a lot of big text, and we fall back on typography to take the place of having these beautiful images.
When it comes to the featured content sliders where you want to feature images, we’ve done two things. We've [introduced] a feature that allows you to put up a proper background image behind your featured content slider, so you can have the impact of a full-width image with something beautiful on top. Also, your featured content slider is constrained not to the width of the screen but to the width of the page. So instead of having to scramble to find something that's going fit edge-to-edge, it's actually much more manageable. It's not only going to look great on your screen; it's also going to be much easier to choose a photo.
A number of the support requests that come in from our clients are about how big the [feature content slider] image should be, or what should the focus of the image be so the text overlays properly? Instead, we just took the text off altogether and placed it next to the image. You still have the ability to do something that looks really beautiful and has a lot of impact, but you're not constrained by this desire to have a huge hero image that works perfectly with your text. It’s really about making all of those features easier to use and more geared around the actual user.”
