Foundation.mozilla.org: Design Page Templates for the CMS

[sabrinang]

Description

This is a discussion ticket on how templates are designed, created and used in the CMS.

I have a few questions about the design and build of reusable templates on Mezzanine. I think this is an important system to build out as we expect more requests to include content on the site and it to be a central hub for foundation content moving forward.

Current Inconsistencies
▪ headings on Opportunity pages
▪ spacing for type and images on Opportunity pages
How do we revise these to align with our main pages?

Templates
It’s currently pretty tricky to implement any designs on the CMS that has images across various columns. How do we want to approach designing templates with images or content with different column widths? There has been mentions of templates but I didn't find much on the CMS and found the current one limiting.

Components
There is a signup widget and was wondering how do we make more pieces into widgets/components? What is the process to submit a new widget to our components list?

---

Application

This can be applied to opportunity pages coming up such as Web Literacy and Global Sprint pages. I want to learn more about how we should approach making the design consistent with our main pages and how they can be maintained so we can keep track of any suggestions, thoughts and ideas here.

cc @xmatthewx @kristinashu @taisdesouzalessa

[sabrinang]

Note: Sub Navigation patterns should also be considered in these templates

[alanmoo]

@sabrinang can you find a time to get @gvn up to speed with this?

@gvn this might be as simple as using utility classes in the WYSIWYG field's source code.

[kristinashu]

I echo Sabrina's concerns here. We will be using these CMS pages a lot (example Aadhaar campaign) so we should really invest in getting them up to the standards we have on the rest of the site.

As Sabrina mentioned, headings definitely need to match the rest of the site. For example, h3 on these CMS pages should be the same as h3 on the main site (i.e. be Zilla rather than Nunito).

The spacing also makes it hard to read and scan content.

Example: About page is great how there is a larger vertical space above the title than below (helps group the title with the content below)

Compared with the CMS pages where the spacing is the same and it takes more mental effort to group the content

[xmatthewx]

Thanks all. I'd like to prioritize:

• style consistency between cms pages and site pages
• simple cms-based recipes for style (like tais did on the miti page). authors will break things. authors will learn to not break things. that's cool. we're all about web literacy. (designers can drive this)

We need to be conservative and realistic about engineering new templates and capacities for cms. These are a serious investment, and realistically will require more bandwidth than we have available. We can collect ideas (example two levels in left-hand nav), but these can't be blockers to launching pages for global sprint and web lit.

[kristinashu]

I'm going to close this since Pomax will be fixing a lot of it in Wagtail. If there are still issues, then we can open up small tickets.