Design Web Literacy Curriculum Landing Page (Opportunity Sub Page)

sabrinang commented 6 years ago

Description

To design a top level landing page from foundation.mozilla.org/opportunity that will provide context and framing for curriculum with the web lit issues and mozilla mission. This page will also connect users to the external (github) pages that will contain curriculum.

Design Brief: https://docs.google.com/document/d/1a_RK0OcgWxcBShg-4_jmxAE9cgnjFYD5n0WAL0sXzZg/edit#

Link to existing references: Mozilla Learning Site - Web Literacy https://learning.mozilla.org/en-US/web-literacy

Mozilla IMLS Videos https://www.kollaborate.tv/link?id=5970c622a244d

An Opportunity page example https://foundation.mozilla.org/opportunity/2017-tech-policy-fellows/

Related Issue: https://github.com/mozilla/foundation.mozilla.org/issues/986 Design Curriculum (Github Pages) Template

cc/ @xmatthewx @alanmoo @anmechung @zee-moz

sabrinang commented 6 years ago

We are focusing on MVP content first that we can put on the CMS with minimal engineering help for now.

Here is an overview of an idea of the structure of these Web Literacy Curriculum Pages:

We can link to Web Literacy landing page from the About page
Web Literacy Landing Page - It contains text to give context and framing for Web Literacy that refers back to the broader mission and internet health issues.
Curriculum Overview - It contains text to give context on what the curriculum is and introduce the framework. Notes for learners and instructors can be here to describe how it can be used. This can also contain helpful tips but if it gets too long it can go into Additional Resources. This links to the four main web lit categories
- Frame: Description and links to curriculum
- Read: Description and links to curriculum
- Write: Description and links to curriculum
- Participate: Description and links to curriculum
Additional Resources - There is a lot of text on pathways, tracks and additional links so that can be contained on this page with hyperlinks.
Curriculum - These activities will be on github page templates.

web literacy overview

/cc @xmatthewx

sabrinang commented 6 years ago

@alanmoo I’m putting some placeholder content in mezzanine on staging and figuring out the structure. I have some questions about formatting in the CMS:

Can we have a sub page for a sub page?
How do we place images properly into the page and have margins around them? The text is really close.

xmatthewx commented 6 years ago

This all looks good @sabrinang. Good questions for @alanmoo regarding sub-pages and images. Your overview map will be very helpful to share with engineers and stakeholders. Let's share with @kristinashu as she'll be doing something similar for global sprint.

Two small things:

Can we update the redpen project or create a new one to just include the current proposal? no need to mock up every page, just each page type or template.
The arrows in the subnav look nice but are slightly confusing. We use arrows elsewhere to indicate external links.

alanmoo commented 6 years ago

Can we have a sub page for a sub page?

Technically, yes, but we've disabled that as the templates don't currently have the navigation structure to support that.

How do we place images properly into the page and have margins around them? The text is really close.

This is starting to push the edges of what should be done in a single field vs in its own template. You could add a pr-2 class to the images themselves when you view source, but that doesn't touch the bigger problem that this page as it's currently built is not responsive in smaller browsers.

sabrinang commented 6 years ago

@alanmoo How do we make a template that is responsive? There is also overall heading spacing issues where the titles don't look close to the paragraph copy which makes it hard to scan information

xmatthewx commented 6 years ago

Images

I spoke with @alanmoo. I think we can try with @taisdesouzalessa to create a pattern in the CMS for left align photo with text wrapping. She did something similar on the miti page.

Since the CMS strips classes, this might require a bit of creativity. Hopefully not, but we might think of way to use tags like <p><span><img></span>text text</p> and then add a bit of CSS for this pattern.

Sub nav

@sabrinang - can you file a new issue specifically on this? I think it's worth considering as a new feature. For now, we might need to ship this with all the pages as siblings.

sabrinang commented 6 years ago

I updated the layout on staging to use the pr-2 class and span tag with CSS. I initially used the table approach similar to the MITI page but the text wasn't reflowing so this seems to work better.

Also flagging that the side nav disappears when I try the staging link on my mobile device (side nav on prod opportunity pages work though).

alanmoo commented 6 years ago

If you're not logged in, the side nav won't show up till the sub-pages are published.

sabrinang commented 6 years ago

Notes from meeting with @anmechung and @zee-moz

Content Feedback This mainly needs real copy and content to be shuffled around and it would be most effective if An-Me can get access to edit the text on these pages directly.

Graphic Assets Feedback

find image resources/library for curriculum/pathways and help place/format them (note: look for free stock - if not, ask about budget)
update static image for web literacy map in Curriculum page (update type, consider colour but new palette may not be vision impaired friendly)

anmechung commented 6 years ago

Just a reminder - I have a presentation at the American Library Association on Feb 12 where I planning to share some iteration of the curriculum. In addition, Reagan McDonald (MoCo) needs a link to the curriculum for something they are submitting and due by Feb 23.

xmatthewx commented 6 years ago

@anmechung - as far as I can tell, the main remaining task is populating content. true? that can be done in parallel with Gavin's effort to update the gh pages template with lastest design. is there anything else blocking a release later this month? (apologies - operating without Hannah around makes everything a bit trickier)

cc @alanmoo @sabrinang @zee-moz

anmechung commented 6 years ago

@sabrinang I think so! Will check-in with @zee-moz too. Thanks for wrangling - really appreciate it.

sabrinang commented 6 years ago

@xmatthewx Yes, it is content that is left.

As a design suggestion @anmechung and @zee-moz please use images that are under creative commons . The site https://pixabay.com/ seems like a good option for safe to use images without asking for permission or giving credit to the artist.

xmatthewx commented 6 years ago

thanks all. if you find images, but need help cropping, feel free to ping us on slack in the mofo design channel.

sabrinang commented 6 years ago

This design ticket is complete and moving over to implementation on this ticket here: https://github.com/mozilla/foundation.mozilla.org/issues/1048

MozillaFoundation / foundation.mozilla.org