914343 - Build page for Web Literacy Standard

Status: RESOLVED FIXED

(Webmaker Graveyard :: webmaker.org, defect)

Description

[Cassie McDaniel [:cassiemc]]

Brett, do we have content for this page?

The initial build for this page can be based on the style guide and the standard design template we have.

We'll need this link to finish implementation of the homepage redesign.

Comment 1

[Brett Gaylor [:brett]]

This will need a design pass but initial content is here:
https://wiki.mozilla.org/Learning/WebLiteracyStandard

Comment 2

[[:dajbelshaw] Doug Belshaw]

I'm meeting with Chris A. this week and then we've got a call about this with Mark Surman, et al. on the 19th. :-)

Comment 3

[[:dajbelshaw] Doug Belshaw]

Met with Chris.

Comment 4

[[:dajbelshaw] Doug Belshaw]

Chris mentioned Cassie had a mockup of the new /Teach part of webmaker.org that links to the WebLitStd? Could I see that please?

Brett: who's decision is it as to whether it's /Teach/Standard or just /Standard?

I've suggested a 'red pill/blue pill' approach to the landing page for the WebLitStd (similar to https://webmaker.org/teach-templates). Chris riffed on this suggesting 'Use the Standard / Spread the Standard'. 

I'd like some kind of 'ambient validation' in the same way startups have greyed-out logos on the bottom of their home pages (e.g. NYT, TechCrunch). Chris added that this could link out to press clippings and WebLitStd blog.

Doug's provided Chris and Cassie with a draft user flow. Chris is going to get back to Doug with an updated UX plan before next Thursday's meeting. :-)

Comment 5

[Brett Gaylor [:brett]]

Attachment: 1-Landing.png

Comment 6

[Brett Gaylor [:brett]]

Attachment: 2-Category.png

Comment 7

[Brett Gaylor [:brett]]

Attachment: 3-Competency.png

Comment 8

[[:dajbelshaw] Doug Belshaw]

Just to clarify, this is what we're aiming at for MozFest:


Webmaker.org
      /Standard
             Strand
             Strand
             Strand
             (Download, etc.)

Comment 9

[Brett Gaylor [:brett]]

Some points from our front end meeting today:

1) Given the IA that Doug mentions above, with the comptencies being listed on the same pages as the strands, ChrisA we need an update to the comps
2) For localization and readability, Kate suggested heading numbers, ie 2.1 - Composing For The Web, 2.2 Remixing, etc

You ok with this Doug?

Comment 10

[[:dajbelshaw] Doug Belshaw]

So we've had an email conversation since which puts unique URLs for each competency/skill potentially back on the table. But if nothing's changed:

1) Yep.

2) Yep.

As I explain in the following post, getting unique URLs for each competency/skill is *really* important for the Standard:

http://dmlcentral.net/blog/doug-belshaw/ontology-web-why-i-learned-stop-worrying-and-love-learning-standards

:-)

Comment 11

[Chris Appleton]

Hey all,

Just want to clarify a couple points so that we can coordinate design and development.

1) Are we using canonical urls for each competency? If so, the 3 page type designs posted above will work for that purpose. If no, we'll need to redesign the category page to accomodate that content -- or we can hold off on including that level of detail for now).

2) The other point I just want to loop back on as we have not discussed in much detail, is what the downloadable version of this is. The original plan was a 4 page booklet, but given our timelines, I'm thinking a one page PDF version is the way to go. Wanted to make sure you still want to include the downloadable version, and also make sure you're on board for the one-page approach for that.

Brett and Doug, let me know about the above -- 
and Dale, let's connect on the plan once we get final word.

Thanks guys!

-Chris

Comment 12

[David Humphrey (:humph)]

One note on URLs:

The way our localization stuff works, we support requesting localized versions of our pages in one of two ways:

1) Using HTTP Headers --> if you have the German version of Firefox, and you request a page, your browser adds an 'accept-language' header with a request for the `de` locale.  We'll see this and http://webmaker.org/* will actually be the German version.

2) Using URL locale info --> if you are in Germany, using the German version of Firefox, BUT! you want to get the page in English, you can force a locale/lang on the URL manually.  Therefore, doing http://webmaker.org/en/* will do the right thing, as will http://webmaker.org/en-GB/* etc.

I mention this because, for purposes of having standard URLs for things in the standard, you should be aware that the first portion of the URL *can* be a lang-LOCALE string.

Comment 13

[[:dajbelshaw] Doug Belshaw]

Thanks humph, that's really useful! :-)

Chris/Brett/Dale, given that there's hidden complexities with the URL structure I suggest:

- We go for the structure I suggested in Comment 8 (i.e. redesign the Category page)
- Go for a one-pager for the PDF download

The great thing about this is that we can circle back post-MozFest to work on the URL structure as well as an expanded PDF download and localization!

Comment 14

[Chris Appleton]

Ok sounds good.
One last clarification,

Doug, do you want all of the info on the competency comp (attached above) to appear on the redesigned 'category' page (also above)?

Just want to make sure the typographic structure supports that content.

-Chris

Comment 15

[[:dajbelshaw] Doug Belshaw]

Sorry Chris, I don't understand. :-/

Comment 16

[Chris Appleton]

There are 2 design comps attached above.
One is labelled 'competency' and the other is labelled 'category'.

I want to know if all of the info that is currently presented on the 'competency' comp should appear on the redesigned 'category' page.

If we are going to be consolidating the content on those 2 pages, we will need to redesign how we are using typography to support elements such as h1, h2, h3, lists, paragraphs, sidebars etc.

Let me know if that makes more sense, or if you need any clarification!

Thanks!

-Chris

Comment 17

[Brett Gaylor [:brett]]

Agreed - URL structure is
 /Standard
             Strand
             Strand
             Strand
             (Download, etc.)

So ChrisA - we do need an updated design where the skills are in the strand pages.

Re: a PDF, this needs to be owned by you, a single page is fine provided you can fit all this info in there!

Comment 18

[[:dajbelshaw] Doug Belshaw]

Thanks for the clarification, Chris and yes, what Brett says is correct. 

So each Strand page needs to include the name of the Strand (<h1>?), the Competency (<h2>?) and the Skill (potentially <h3> but depends on the design, I guess). We'll not be including examples of each skill in this release.

In terms of the PDF we probably won't be able to fit everything onto one page, but I agree we should keep it short. Two pages max, right?

- Strands/competencies/skills
- URL to find out more (webmaker.org/standard)
- Brief overview of what the Standard is

(I realise the actual text is separate from the design process, but just to say that will be finalised by 1st October. You can see progress at http://bitly/weblitstdprep)

Comment 19

[Chris Appleton]

Sounds good! Thanks Doug.
Dale, I'll get this updated design over to your for tomorrow, as well as the image assets you need to finish it off.

Will most likely be end of week or early next for the PDF version.
Will keep you posted on that as it comes further along.

Thanks all,

-Chris

Comment 20

[Brett Gaylor [:brett]]

Also, Chris - what is the large blue block at the top of each page?

Comment 21

[Chris Appleton]

The blue block was originally intended to be placeholder for a branded image when we were thinking of the standard as more of a stand-alone piece. 

Now that we're positioning it as more of a conceptual underpinning/specification in relation to webmaker.org I'm reconsidering that and think it might make more sense to use more general imagery to signal the product goals more strongly for our intended audience.

Will do some more thinking and link up with Kate about the current plan for using photography across the site -- I know she's been doing some thinking on that too.

I'll aim to have those images together for end of week.

Comment 22

[Erica Sackin]

Chris -- looking at this bug, does Dale have the updated images already? If so, can we update the bug and add the images? If not, let's make that a top priority, yeah? Thank you!

Comment 23

[Dale Karp (:daleee)]

Currently blocked on continuing the build for these pages until I receive new mockups + assets.

Comment 24

[Brett Gaylor [:brett]]

In the "competency" attachment, there is example text for each of the skills.  Do we have this text for each skill?

If not, Doug, can you provide?  We'd need this very soon.

Comment 25

[Dale Karp (:daleee)]

Hi all,

I met with Chris today, so I am able to continue on with the implementation.

I did have a question for Doug, or someone on content who can answer this. How did you envision the URL structure for these pages?

Right now, the main standard page is living at /standard
What about the next three? should it live off of standard, like /standard/building, /standard/exploriong, etc...

And for the competencies, it would be something like /standard/exploring#navigation

How does this sound?

Comment 26

[[:dajbelshaw] Doug Belshaw]

Hi Dale, it would be good to jump on a call sometime to make sure we're on the same page. I'm based in the UK so UTC+1 at the moment (i.e. EDT +5). Want to talk just before the Webmaker call today?

For the avoidance of doubt, here's what is in my mind in terms of an updated UX plan: http://flic.kr/p/ghN7cg

Feel free to use #anchors but we'll be going for a URL for each skill/competency/strand come the next release in 2014. 

Yesterday was the last day for comments/feedback on the RFC version of the Standard. The competency grid is like this: http://flic.kr/p/g5sbwF. I've got some work to do today on the skills.

The examples of each skill (which Brett refers to in Comment 24) are out of scope for this release.

If that's not clear, I'm keen to help clarify! :-)

Comment 27

[Matt Thompson (@OpenMatt :OpenMatt)]

* We were discussing this page in today's Cross Team Call
* Any blockers or areas where we can help?

* Localization: we'll need to have all the copy on this page locked by Oct 9. So that we can begin localization work. 
* Is that copy locked already? Can you update us on that status?

Comment 28

[[:dajbelshaw] Doug Belshaw]

Hi Matt, thanks for asking.

So yesterday I updated the Mozilla wiki: http://mzl.la/weblitstd. It's close to what will be on webmaker.org/standard.

The only thing I need to work on post-Summit is the text to introduce each 'strand' page (i.e. Exploring, Building and Connecting). I've asked Erica Sackin if Erika Drushka could look through that copy once I've written it.

So, yes, October 9th is totally doable for locking in the copy, I reckon. :-)

Comment 29

[Dale Karp (:daleee)]

Hi all,

Check out the current version of the Web Lit Standard on Webmaker.org:

http://dk-webmaker.herokuapp.com/standard

(Please ignore the broken login box on the left side, we don't have the full stack running on Heroku)

Any suggestions, ideas, complaints and criticisms are welcome!

Comment 30

[David Humphrey (:humph)]

One thing that might be nice here is Github style anchor tagging UI for each section.  For example, if I want to get to Web Mechanics, there's an <a id="wm"> but no way to find that link without knowing it's there.  Github solves this problem in READMEs by providing a hover icon you can click on to get the link to persist in your URL bar.

Comment 31

[Dale Karp (:daleee)]

Good idea, Humph! I do like that feature of GitHub READMEs, and it would definitely be nice to get a direct link to a subsection without hitting the /standard page first.

Comment 32

[David Humphrey (:humph)]

It might also be worth considering the naming of your anchors, since they will become part of the URL.  I know Doug has thought about this and might have thoughts.  I think having a link of #wm is less helpful than it might be.  I'd write it out in full, personally.

Comment 33

[Dale Karp (:daleee)]

Kate said the same thing, so I already changed all the shortform anchors like 'wm' and 'infra' to 'web-mechanics' and 'infrastructure'.

Comment 34

[Dale Karp (:daleee)]

Hi all,

Updated the Heroku build!

Changelog:

- Short-form anchors like #wm expanded to #web-mechanics
- GitHub README-style links to in-page subsections when hovering over subsection names. Examples: http://dk-webmaker.herokuapp.com/standard/exploring

Comment 35

[[:dajbelshaw] Doug Belshaw]

Thanks Dale and Humph, this is definitely something I want to work with you on for the next iteration as it's important for OBI-alignment. Right now, it's a nice-to-have and I appreciate you adding nuance to the UX. :-)

Comment 36

[Chris Appleton]

Attachment: weblit-footer-graphic.png

Hey all!

Here's the graphic for the footer image that links to the downloadable PDF.
Let me know when the text is locked and I can put that PDF together for you.
Also coming up, graphic for the header. 

-Chris

Comment 37

[Chris Appleton]

Attachment: weblit-header-graphic.png

Here's the graphic for the header image.
You might want to think about this as a temporary placeholder.

There's a ton of great photos up at http://www.flickr.com/photos/mozilladrumbeat/favorites/

...you might be able to find one there that captures the standard in action with real-life people (rather than the illustrative graphic attached)

Doug, have a look through those and see if any convey the ethos behind the standard.

Alternatively, we could remove the header graphic all together, as it doesn't add a ton of valuable information, beyond the text that's already there.

-Chris

Comment 38

[Dale Karp (:daleee)]

Hi,

Here is an updated version of the page, now with placeholder header and footer image!

http://dk-webmaker.herokuapp.com/standard

Comment 39

[[:dajbelshaw] Doug Belshaw]

Hi all,

Many thanks to Chris for his work on the Standard - he'll be missed!


In response to specific points above:

1. Let's keep the header image abstract - I like it! (i.e. continue to use attachment 813802 [details])

2. Great work on the Heroku build, Dale! Could we make the following changes, please?

     a) Change the introductory text to: "The Web Literacy Standard comprises a map of competencies and skills that Mozilla and our community of stakeholders believe are important to pay attention to when getting better at reading, writing and participating on the web."

     b) Move the current introductory text on the landing page underneath the title on the 'Exploring', 'Building', and 'Connecting' pages.

     c) Move the descriptors for each of the competencies *under* each competency (rather than beside them). They could be italicised to distinguish from the skills?


Ping me if anything doesn't make sense. :-)

Comment 40

[Dale Karp (:daleee)]

Hey Doug, I think I may have missed you on IRC! I had a question about 2b:

Do you want the current intro paragraph on /standard MOVED to underneath 'Connecting', 'Exploring' and 'Building' on those respective pages, or just copied?

Comment 41

[[:dajbelshaw] Doug Belshaw]

Hi Dale,

Apologies, it's late here.

MOVE current intro paragraph at /standard TO 'Connecting', 'Exploring' and 'Building'.

REPLACE current intro paragraph at /standard with 2a.

:-)

Comment 42

[Dale Karp (:daleee)]

Hey,

So I had a design review from Kate and implemented Doug's suggestions. See the newest version here:
http://dk-webmaker.herokuapp.com/standard

Now works on mobile! Yay!

Comment 43

[Dale Karp (:daleee)]

Attachment: Design Review

http://dk-webmaker.herokuapp.com/standard

Comment 44

[[:dajbelshaw] Doug Belshaw]

Oh niiiiice. Great work.

Please could we:

1) Add '(specification)' next to 'Web Literacy Standard' in a smaller font size. 
2) Italicize the competency descriptors.
3) Remove the link to the page the user is on (e.g. if they're on the Building page, remove the link within the introductory text to 'Building')
4) On the landing page, find a way to link to https://wiki.mozilla.org/Learning/WebLiteracyStandard to show there's ongoing work. Perhaps as some kind of pull quote or box-out?

Other than that, at the moment I'm really happy how this is coming together for the MozFest release. :-)

Comment 45

[[:dajbelshaw] Doug Belshaw]

Attachment: Landing page feedback from Doug

Comment 46

[[:dajbelshaw] Doug Belshaw]

Attachment: Exploring page feedback from Doug

Comment 47

[[:dajbelshaw] Doug Belshaw]

Attachment: Building page feedback from Doug

Comment 48

[[:dajbelshaw] Doug Belshaw]

Attachment: Connecting page feedback from Doug

Comment 49

[[:dajbelshaw] Doug Belshaw]

OK, so the above attachments show visually the changes I believe it's important to make before we go live with this. Instead of replicating the comments on each page (e.g. about the height of the header image) assume they apply to all of them. :-)

Comment 50

[inactivate account for kate]

Comment on attachment 814956 [details]
Design Review

Most of the design review stuff we did in person has been fixed, a couple things left: 

The header, while cool, needs to go. It's really huge on most screen sizes, including mine:
https://dl.dropboxusercontent.com/spa/udzcfdb4yizzlua/tewvdjtl.png

Also, watch your mobile styles for:
https://dl.dropboxusercontent.com/spa/udzcfdb4yizzlua/u-5es4xq.png

Comment 51

[[:dajbelshaw] Doug Belshaw]

"The header, while cool, needs to go."

I think 'needs to go' is a bit strong. We could, however, substitute the icon used on the @WebLitStd Twitter account for it? I've got the .ai file: http://twitter.com/WebLitStd.

Comment 52

[Erica Sackin]

Hey all -- sorry to jump in here, me and Erika D realized that we never got to do a content/copy edit review between the wiki and the web pages. Following Doug's changes I'd add two more: 

1) For the building, exploring and connecting pages, the layout of the headline strand name, description of the web lit standard, and description of the competencies is confusing. I would *either* move the paragraph text that reads:  

"The Web Literacy Standard is made up of three strands: Exploring, Building and Connecting. In turn, each strand is made up of several competencies. Each competency is comprised of a number of skills." 

Above the competency strand name (so above the big blue "Building" or "Connecting") OR italicize that paragraph to show that it's a descriptor of the Web Lit Standard and not of the competency. See attached image, but right now it reads as really confusing. 

Example: http://31.media.tumblr.com/902a2d4462851167566abf93f518f142/tumblr_muh3zgqDi31qen9qvo1_400.png

2) On the main Web Lit Standard page, instead of saying "The Web Literacy Standard comprises a map of competencies and skills" it should just read "The Web Literacy Standard is a map of competencies and skills"

Dale-- let me know if these all make sense?

Comment 53

[Dale Karp (:daleee)]

Hi all,

Here is the result of the implementation of requests made by Erica S, Erika D and Doug (B).

http://dk-webmaker.herokuapp.com/standard

Still haven't gotten a new header image yet... may try out the Twitter icon; may also have to make it more pattern-izaable.

Going to also ping Kate for another review since things have moved around since the last time she looked at it.

Comment 54

[Dale Karp (:daleee)]

Attachment: Design Review II

http://dk-webmaker.herokuapp.com/standard

Comment 55

[[:dajbelshaw] Doug Belshaw]

Attachment: web-lit-avatar.ai

The .ai file for the avatar that Chris Appleton designed for the @WebLitStd twitter account.

Comment 56

[[:dajbelshaw] Doug Belshaw]

If we do use a version of the avatar from the @WebLitStd twitter account it would be great if we could use the colour scheme for each strand (+strand page):

* Exploring: #EE3D36
* Building: #02ABB1
* Connecting: #F79229

Does that make sense?

Comment 57

[inactivate account for kate]

Let's do colour changes in a new ticket (filed 
https://bugzilla.mozilla.org/show_bug.cgi?id=926958) .

Comment 58

[inactivate account for kate]

Comment on attachment 815618 [details]
Design Review II

There are still some details with type that need to get fixed. For now let's do the following:
* Rebase
* Remove the header image and add whitespace at the top
* Add the PDF (do you have this asset yet?) so that the download link works
* Hide the bottom image on mobile (https://dl.dropboxusercontent.com/spa/udzcfdb4yizzlua/qjyrnmy9.png)

I noticed there was some text added above the title on each page 
(https://dl.dropboxusercontent.com/spa/udzcfdb4yizzlua/xokyt2md.png)
The typographical hierarchy is off here, it will need some work

Comment 59

[[:dajbelshaw] Doug Belshaw]

'Add the PDF (do you have this asset yet?) so that the download link works'

The PDF is now out of scope for MozFest and being re-imagined, potentially as a printable stylesheet, later. Dale and I have had an IRC chat where we settled on pointing people towards the general Webmaker translation effort.

I don't have the design expertise to comment on the rest, but will provide input as/when required. :-)

Comment 60

[Dale Karp (:daleee)]

Attachment: Design Review III

http://dk-webmaker.herokuapp.com/standard

Comment 61

[Dale Karp (:daleee)]

Attachment: Code Review

https://github.com/mozilla/webmaker.org/pull/434

Comment 62

[inactivate account for kate]

Comment on attachment 817956 [details]
Design Review III

Good for now

Comment 63

[inactivate account for kate]

Comment on attachment 817967 [details] [review]
Code Review

Just a few things to fix up and this is good to go

Comment 64

[Dale Karp (:daleee)]

Attachment: Code Review II

https://github.com/mozilla/webmaker.org/pull/434

Fixed concerns in comments.

Comment 65

[[github robot]]

Commit pushed to master at https://github.com/mozilla/webmaker.org

https://github.com/mozilla/webmaker.org/commit/0a845998679f15ad417a90fd88b8d8232b056b1d
[bug 914343] Web Literacy Standard, yo

Comment 66

[Matt Thompson (@OpenMatt :OpenMatt)]

@ is there an estimate on when this will be on the live site?
* Sackin is asking cuz she wants to share it with a journalist

Comment 67

[Dale Karp (:daleee)]

It will be live, pre-MozFest. You can see it on the staging site at https://webmaker.mofostaging.net/en-US/standard