Research landing page: Front-end development pre-launch
Closed, ResolvedPublic

Description

Front end development requirements for the Research landing page.

Priorities 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, and I don't know how to implement these in the current stylesheet.
    • header: tagline
    • footer: social media icons. >> We haven't had discussion about such styles in the style guide itself, decided to go for text-only variant links for now
  • Team member cards with a headshot, name, and title.
    • Horizontal alignment issue
  • Three-column link list under the "Resources and Links" section of this mock
    • Whitespace at bottom

From @cmadeo's input below:
Homepage
Title and description area

  • The margin between paragraphs and also between the body text and the title could benefit from a bit more breathing room, perhaps 2rem 0 0? >> Went for 1.2rem 0 0 for now in regards of mobile

Featured Projectshttps://github.com/wikimedia-research/landing-page/pull/11

  • The page title and featured project titles should be the same size and weight, or if we'd like them to be different the featured project title should be decreased more (perhaps 24px (2.4 rem) and 500 weight) >> We are not able to provide`500` for Lato currently
  • The line height looks a bit tight on the subtitle text for the featured projects. Could it be increased to 1.6?
  • The margin between the card title and description should be 10px. >> 8px to stay in distance base
  • The card descriptions should be a standard height (perhaps five lines) so that the cell takes up the same space regardless of text length.
  • Ideally the 'read more' links would all be bottom aligned with 20px of margin between the description box and the link.

Research teamhttps://github.com/wikimedia-research/landing-page/pull/12

  • Currently the profile images are of varying heights, would it be possible to mask them to all be a single standard height? Also if you need help with this I can easily edit the images and send them back to you.
  • The name and title text feels a touch too large, could it be pulled back to 1.4 / 14

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


From @DarTar in-person feedback:

  • Go for grayscale headshots for launch (until next Research offsite)

@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.Nov 6 2017, 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!

@Capt_Swing
High-prio 1: https://github.com/wikimedia-research/landing-page/pull/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 https://wikimedia.invisionapp.com/share/7XD6569D4#/screens/253718274 from an information architecture and weighing perspective…?!

cmadeo added a comment.Nov 8 2017, 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)Nov 8 2017, 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.
https://github.com/wikimedia-research/landing-page/pull/2

Volker_E updated the task description. (Show Details)Nov 17 2017, 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?

@Volker_E Yeah, I think we decided against that after having a way to jump to the resources was added under the title of some subpages.

@Volker_E I added content using the new team member and featured project cards. I'm running into a small alignment problem with both classes: They align on the bottom instead of the top. This creates 'crooked' rows when there are different amounts of content on adjacent cards.

Examples

  • team page: Aaron Halfaker's card is higher than the two following cards because his title is 2 lines instead of 1.
  • projects page: most project descriptions are slightly different lengths, leading to crooked rows.

Can you update the styles so that they are aligned at the top of each card, instead of the bottom? We would need this done by Thursday, November 30th, when we plan to show the landing page to stakeholders.

Also, @Volker_E Have you done any work on the 3-column link list class (see ticket description above for details)? Looking at your commit history, I don't think you explicitly created this as a class. I tried to 'fake' it by using featured project cards, but it didn't work well, for two reasons:

  • The horizontal alignment issue mentioned above (it will only be aligned if each column has the same number of items under it, which will not always be the case)
  • Too much whitespace between section title and items (see the example at the bottom of this page).

Please let me know as soon as you can whether you can implement this class per @cmadeo 's comps by Thursday, November 30.

Volker_E updated the task description. (Show Details)Nov 28 2017, 8:58 AM

@Capt_Swing The alignment issue is now resolved on desktop. There's a small glitch when resizing with the images yet. More to come…

Hi all, I just took a look around the Research landing page and am getting so excited!
There are a few little design (primarily alignment and spacing) tweaks that I thought might be helpful to point out:

Homepage
Title and description area

  • The margin between paragraphs and also between the body text and the title could benefit from a bit more breathing room, perhaps 2rem 0 0?

Featured Projects

  • The page title and featured project titles should be the same size and weight, or if we'd like them to be different the featured project title should be decreased more (perhaps 24px (2.4 rem) and 500 weight)
  • The line height looks a bit tight on the subtitle text for the featured projects. Could it be increased to 1.6?
  • The margin between the card title and description should be 10px.
  • The card descriptions should be a standard height (perhaps five lines) so that the cell takes up the same space regardless of text length.
  • Ideally the 'read more' links would all be bottom aligned with 20px of margin between the description box and the link.

Research team

  • Currently the profile images are of varying heights, would it be possible to mask them to all be a single standard height? Also if you need help with this I can easily edit the images and send them back to you.
  • The name and title text feels a touch too large, could it be pulled back to 1.4 / 14

These changes above would if accepted would also be applied to the shared styles across the site.

Please let me know if you have any questions or need any help! Thanks!

Volker_E updated the task description. (Show Details)Nov 29 2017, 1:47 AM
Volker_E updated the task description. (Show Details)
Volker_E renamed this task from Research landing page front end development to Research landing page: Front-end development pre-launch.Nov 29 2017, 2:06 AM
Volker_E updated the task description. (Show Details)

@Capt_Swing Moved the maintainability topics to T181588 as the site is built now with working navigation and they are therefore for the time being and the launch no priority.

@cmadeo Ad more breathing room, I will increase it, but 2rem 0 0 seems too much, we also need to think about mobile and that we might end up with a lot of vertical scrolling. I also don't want to care about every margin on different device factors again and adapt it per media query if possible.
Going for 1.2rem 0 0 for now.

Volker_E added a comment.EditedNov 29 2017, 5:44 AM

@cmadeo In the style guide we went for a 8px base, we should stay with it if there are no strong arguments for changing.

Volker_E updated the task description. (Show Details)Nov 29 2017, 5:49 AM

Ad Featured Projects: @cmadeo We don't have Charter in 500 available, only 400. Reduced the font-size anyways.

Volker_E updated the task description. (Show Details)Nov 29 2017, 6:23 AM
Volker_E updated the task description. (Show Details)Nov 29 2017, 7:52 AM
Volker_E updated the task description. (Show Details)

@Volker_E, okay, this all sounds reasonable. Thanks!

Feedback from earlier today by @DarTar - headshots get cut off on mobile.

@Volker_E just a quick note that I see these changes and am grateful. Please keep me posted! Thanks, J

@cmadeo I thought about having specifically prepared pics, but it makes more sense to keep the ones from Commons in as they are all a little bigger and therefore scale properly on HiDPI screens. Got the different dimensions pretty much under control with only CSS.

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

@Volker_E that sounds ideal, thanks!

Volker_E updated the task description. (Show Details)Nov 29 2017, 9:42 PM

@DarTar Grayscale is in, it also features a hover effect on wider screens (touchscreens are exempt!) showing the normal pic.

Volker_E updated the task description. (Show Details)Nov 30 2017, 1:27 AM
Volker_E updated the task description. (Show Details)Nov 30 2017, 4:54 AM
Volker_E updated the task description. (Show Details)Nov 30 2017, 5:40 AM
Volker_E closed this task as Resolved.Nov 30 2017, 6:41 AM

With “Read more” feature list position fix, I'm closing this task as resolved now. Every other request for improvement needs to go into T181449: Research landing page: Design/dev improvements post-launch.