Research landing page front end development
Open, NormalPublic


Front end development requirements for the Research landing page.

High priority (needed to launch)

  • sub-page to parent page nav currently, you can't navigate directly from a level-2 nav item back to the parent page. For example, if I'm on increasing-diversity.html and want to go back its parent page, projects.html, I can't do that directly. I would need to click on some other level-1 page and then click on "Projects".
  • Implement new classes @cmadeo's prototype is pretty close to the current style guide, but there are a couple of 'new' elements. The most important of these, from my point of view, are what I'm calling the "preview cards" (for lack of a better term) that are used here to display previews of featured projects. There are also some slight differences between Carolyn's prototype and the Style Guide framework in the styling of some items in the header and footer (for example, the social media icons), and I don't know how to implement these in the current stylesheet.
  • Team member cards with a headshot, name, and title.
  • Three-column link list under the "Resources and Links" section of this mock

Normal priority (needed to assure maintainability)

  • templating system for navigation, header, and footer: so we don't have to manually update every page when we add a new list item or change a link
  • JS/CSS to automatically highlight current page in nav so we don't have to manually make this change on each new page we add

Some of these requirements may already be addressed in the WikimediaUI Style Guide framework. If so, we'll need pointers to those.

@DarTar We've been discussing different static site generators in T164449 – without finding the perfect solution yet.

@Volker_E per our email discussion, it sounds like neither of the nav/template related requirements are going to be available for launch. Should we keep this task open in case other requirements emerge, or close it for now?

@Capt_Swing If you're referring to the two points in the task description, my plan is to give the CSS/JS highlight another shot.

Capt_Swing updated the task description. (Show Details)Sep 11 2017, 9:08 PM

@Volker_E that makes perfect sense. In fact, I realized that I was being premature and added two other requirements (also sent to you in email). Thanks for being on top of it!

Capt_Swing updated the task description. (Show Details)Oct 17 2017, 8:55 PM

@Volker_E @cmadeo any progress on this task since we last touched base on October 17?

@Capt_Swing I'm looking into it later this afternoon on the technical side.

cmadeo added a comment.Mon, Nov 6, 9:24 PM

@Capt_Swing + @Volker_E, sorry I wasn't clear on what to move forward with design-wise. Happy to jump back in if you need any additional design help!

High-prio 1:

Generally speaking, we're not doing ourselves from extensibility POV the biggest favor starting with a copy of Style Guide. It would have been better to be involved from the beginning to come up with a more modular solution. It's not a big problem right now, but it might become one if the Research Page gets further built upon.

Ad prio 2: @cmadeo We should reduce font-size slightly/treat differently at the mentioned cards of from an information architecture and weighing perspective…?!

cmadeo added a comment.Wed, Nov 8, 6:56 PM

@Volker_E we certainly could, although these all link out to pages where the same title will be the H1 for that page. I sort of like the large titles, but if it feels overwhelming or is too much of a hierarchy issue I can scale them back a touch.

Volker_E updated the task description. (Show Details)Wed, Nov 8, 8:52 PM

@Volker_E Couple questions:

  • when do anticipate completing the implementation of the "preview cards"?
  • We'd like to provide team member cards with a headshot, name, and title. I've repurposed the color-palette color-section class to approximate this. It works fine for name and title, but I think I need some help with image formatting. Here's what I have so far. @cmadeo's implementation is better (see the team section of this mock), but I don't know if implementing that is in-scope, since I didn't specify it at the outset.
  • finally, there's one additional element that we'd like to adopt from @cmadeo's mock, if possible. It's the three-column link list under the "Resources and Links" section of this mock. I don't know whether this can be implemented in the current framework, or if it requires additional classes.

Sorry for adding new requirements at this late stage; I'm not super familiar with what's possible in the style guide framework, and I'm slowly discovering that elements from Carolyn's mock which I assumed were already part of the framework will actually (probably?) require additional development.

@Capt_Swing The next PR is in, it brings the team member “cards” on par with the design template with minor amendments, the font-size for the member descriptions is a tad bigger and the color contrast of the descriptions is a bit higher – following our subtle colors which align to the Web Content Accessibility Guidelines.

Volker_E updated the task description. (Show Details)Fri, Nov 17, 6:21 AM
Volker_E updated the task description. (Show Details)

@cmadeo Did you decide against the section breadcrumb (example: “About” above “Research team”) with a specific idea behind?