Design template for campaign pages

[alanmoo]

The campaign pages we've spun up thus far leave some things to be desired in terms of layout. The most pressing is probably placement of petitions. Right now, they're below the main content of the pages. This is because we can't have 3 columns (including the sidebar nav on the left). However, for pages that don't have a sidebar nav, we can probably fit the petition to the right side of the page.

Can someone put together a design of how the grid should be laid out for mobile and desktop views of single page campaigns? It doesn't need to be high-fidelity, simply blocks for Header, Content, and Petition positioning should be enough to get started.

[xmatthewx]

@taisdesouzalessa can you dig up old wireframe or UI that had a two column opportunity page with sign-up form in a column on the right?

We want to do something similar for new CMS campaign pages. If they have left-hand nav, form will drop down below to avoid 3 column craziness.

Thanks!

[xmatthewx]

note: this is being implemented today for a quick response campaign that will launch this week. so, we can really only pass on wireframes for basic layout to engineers.

we can iterate for the next campaign if needed.

[taisdesouzalessa]

@xmatthewx is this one you are talking about? https://redpen.io/dq4d9952795727b77d

I also included a wireframe example in which we had a multi-page template with a cta on the left: https://redpen.io/amd84017759655c442

[xmatthewx]

@alanmoo you can use this as a guide.

thanks @taisdesouzalessa !

[taisdesouzalessa]

One important thing to note: this template uses 10 grid columns (instead of 8 - which is the number of columns the simple column template has).

So, instead of splitting the single column template into 2 columns (which gives us a very narrow view at some viewports):

I would recommend we use a 10 grid columns (offsetting 1)

For mobile view we will need to use a single column - stacking the content - like we do in this page

Does that make sense?

[alanmoo]

Makes sense to me. Just to be clear, should the heading span both columns? I anticipate the petition will regularly have its own CTA in larger text above it

[taisdesouzalessa]

I think the heading should span both columns because it is the title of the whole section, what do you think?. I am not sure I understood your comment about the CTA, could you send me an example?

[taisdesouzalessa]

Can I consider this done on design side?