lagotto / alm-report

ALM Reports
http://almreports.plos.org/
MIT License
8 stars 3 forks source link

Font corrections #118

Open jenniferlin15 opened 9 years ago

jenniferlin15 commented 9 years ago

A few corrections for the site:

1) the title "ALM: Measuring the Impact of Research" should not be italicized 2) The button font should be corrected back to the original font fonts

3) Fonts in the Review list of articles page need to be corrected back too fonts2

4) Paper titles, while hyperlinked, should not be in blue. They should be in black font. 5) Search results page - paper titles font should be fixed back as well as the links on the right hand column. font3

jure commented 9 years ago

OK, will change the title italics, not sure what happened there. Looks like the original tagline was in .text-light-italic, and then there was a specific style to make it non-italic. I've gone through a bit of the CSS and cleaned it up a bit, I'll fix it.

I considered the buttons and fonts/links changes were improvements, honestly. There was no consistency in terms of what a link is and what a button is. Sometimes the link was blue, sometimes it has an underline, sometimes it's black with an underline, sometimes a button was small, sometimes big.

To me this looks a lot cleaner, i.e. a link is blue without an underline:

image

Than this:

image

The benefits of consistency are most evident in something like the new search results page:

image

You instinctively know what on the page is clickable, without really thinking about it. I wasn't done with style fixes, that would be part of polishing. I can make it like it was, but I'd at least like some good reasons to do that. If it's only for consistency with PLOS Search, then I would argue that PLOS Search would benefit from these changes too, e.g. like this:

image

When the user sees this page she thinks: I can click on the blue things.

Vs. the current:

image

I could imagine the user looking at this page and thinking: there's the title of the paper which is black underline, I guess I can click it, because it's underline. There are some other black things, I guess I can't click those because they don't have an underline. And then there are some blue things, which surely I can click, because they are blue.

That's a lot more to process.

Again, happy to change back to what it was, but my argument (and my goal when I set out to do these optimizations) is that there is a lot of value in consistency across the app in terms of how complex and straight-forward it feels for the user. And again, I wasn't done with the style optimizations, I merely came to a point where it was good enough to finish facets.

jure commented 9 years ago

Oh, I actually agree about the buttons font, it should be fixed. It looks funny now because it's faux-bold, as the FS Albert doesn't load from fontdeck on test.parascope.io (wrong domain).

jenniferlin15 commented 9 years ago

You have a good point, Jure. I agree that we want links to be more obvious. We cannot touch the journal publishing platform right now due to major work and will need ALM Reports to maintain consistency. I'll pass on your recommendations to the platform team and we can do an entire overhaul of links visualization later, all together.

The reason for keeping the font color dark grey to enhance readability. The blue and black for every article line makes the page too busy and difficult to read, as jumping from color to color is taxing. We will need to move all the content in the body of the template to default to dark grey, except for the faceted search left column which can stay blue (since they are like the links on the right hand column). font color2

There is reasoning behind button and links. Buttons are direct actions that move you forward to the next "step" in generating the report. The links do not - they are either ancillary actions that help clear the contents of the page and make it easier to start over, or they help channel you to another part of the site (navigational). For example, the main page has a Search button and a Clear all link. The Search processes the search input needed to add articles and generate the report. The Clear all link has a different nature and helps clear the input fields. We'll need to change the Clear all link back to a button on the home page. clear all

clear all2

jure commented 9 years ago

OK, I'll implement the link/article search result color changes in order to keep consistency with PLOS' publishing platform, although I personally still disagree. The "Clear All" button will be fixed, agreed on all points in terms of primary/secondary actions.

jenniferlin15 commented 9 years ago

I've added the test.parascope.io. site to the web font toolkit (Font Deck). They correct fonts are now showing up so we can make corrections to it properly. There are still a number of places where font is FS Albert, but should be Arial. For example on the home page:

arial

jure commented 9 years ago

Thanks Jennifer, will fix.

jure commented 9 years ago

I believe all of these have been addressed now. Feel free to reopen if you think I missed something.

image

jenniferlin15 commented 9 years ago

HOME PAGE 1) The "By DOI/PMID" and "Edit List" buttons need adjustment. Please have the new code mirror the production screen shot and computed CSS. The font needs to be bigger, in bold, and the padding corrected with left alignment.

bydoi

-webkit-background-clip: border-box; -webkit-background-origin: padding-box; -webkit-background-size: auto; background-attachment: scroll; background-clip: border-box; background-color: rgb(60, 99, 175); background-image: none; background-origin: padding-box; background-size: auto; border-bottom-color: rgb(255, 255, 255); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-bottom-style: none; border-bottom-width: 0px; border-image-outset: 0px; border-image-repeat: stretch; border-image-slice: 100%; border-image-source: none; border-image-width: 1; border-left-color: rgb(255, 255, 255); border-left-style: none; border-left-width: 0px; border-right-color: rgb(255, 255, 255); border-right-style: none; border-right-width: 0px; border-top-color: rgb(255, 255, 255); border-top-left-radius: 4px; border-top-right-radius: 4px; border-top-style: none; border-top-width: 0px; color: rgb(255, 255, 255); cursor: auto; display: block; font-family: Arial, Helvetica, sans-serif; font-size: 15px; font-style: normal; font-variant: normal; font-weight: bold; height: 17px; line-height: normal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 26px; min-width: 78px; padding-bottom: 9px; padding-left: 10px; padding-right: 0px; padding-top: 8px; text-decoration: none; vertical-align: baseline; width: 230px; zoom: 1;

2) The Your List button needs to be corrected with the original text: "Your List" (not Your Article List). The button is rectangular with straight edges (not curved). The size of the button is bigger than the others on the page. your list

correct your list

3) The Search button and Clear All link font should be bigger (15px). And the space between the two should be narrower (decrease padding between). search button

4) The H2 headers on home page need to be corrected (font style, size, etc.). This includes:

They should render as follows in production: border-bottom-color: rgb(51, 51, 51); border-bottom-style: none; border-bottom-width: 0px; border-image-outset: 0px; border-image-repeat: stretch; border-image-slice: 100%; border-image-source: none; border-image-width: 1; border-left-color: rgb(51, 51, 51); border-left-style: none; border-left-width: 0px; border-right-color: rgb(51, 51, 51); border-right-style: none; border-right-width: 0px; border-top-color: rgb(51, 51, 51); border-top-style: none; border-top-width: 0px; color: rgb(51, 51, 51); display: block; font-family: 'FS Albert Web Regular', Verdana, sans-serif; font-size: 26px; font-style: normal; font-variant: normal; font-weight: normal; height: 33px; line-height: normal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline; width: 924px; zoom: 1;

5) Sample reports links on home page The font should be left-aligned for each tile (funder, institution, etc.)

6) ALM title needs correction in font weight (normal instead of 300px) title

font-family: 'FS Albert Web Regular', Verdana, sans-serif; font-size: 34px; font-style: normal; font-variant: normal; font-weight: normal; height: 42px;

7) ALM Reports description in top bar needs adjustment:

description

It should render as follows with height of 42 px (not 50 px on test site): font-family: 'FS Albert Web Regular', Verdana, sans-serif; font-size: 16px; font-style: italic; font-variant: normal; font-weight: normal; height: 42px; line-height: normal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 7px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline; width: 643.1875px;

FIND ARTICLES BY DOI/PMID PAGE 1) The title Find Articles by DOI/PMID needs font style, height, and weight correction: font-family: 'FS Albert Web Regular', Verdana, sans-serif; font-size: 26px; font-style: normal; font-variant: normal; font-weight: normal; height: 33px; line-height: normal; margin-bottom: 34px; margin-left: 106px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline; width: 594px; zoom: 1;

2) The DOI/PMID font needs height adjustment so that it's 21 px instead of 28 px. font-family: Arial, Helvetica, sans-serif; font-size: 18px; font-style: normal; font-variant: normal; font-weight: bold; height: 21px; letter-spacing: -1px; line-height: normal; margin-bottom: 0px; margin-left: 106px; margin-right: 500px; margin-top: 4px; padding-bottom: 3px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline; width: 74.015625px; zoom: 1;

3) The right hand column title, Add more articles, needs correction in font style and font height: font-family: 'FS Albert Web Regular', Verdana, sans-serif; font-size: 22px; font-style: normal; font-variant: normal; font-weight: normal; height: 27px; line-height: normal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 37px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; position: relative

4) The buttons Add to My List and Add More Fields need correction in the font style, font height, font weight, and margin padding. font-family: Arial, Helvetica, sans-serif; font-size: 15px; font-style: normal; font-variant: normal; font-weight: bold; height: 32px; letter-spacing: normal; line-height: normal; margin-bottom: 0px; margin-left: 107px; margin-right: 20px; margin-top: 22px; min-width: 78px; padding-bottom: 8px; padding-left: 19px; padding-right: 19px; padding-top: 7px; text-align: center; text-indent: 0px; text-shadow: none; text-transform: none; white-space: pre; width: 141.328125px; word-spacing: 0px; writing-mode: lr-tb; zoom: 1;

SEARCH RESULTS PAGE 1) The Preview List button on the search results page also needs to be corrected (bigger font, bold)

jure commented 9 years ago

Oh boy, that's a lot of computed CSS. I can't really use it, I need to figure out what exact changes you would like on which element, computed is just everything that the element inherited from all of CSS. For this, I hope you have you taken into account that since your recent fontdeck.com configuration change, the actual FS Albert Web font is not loading in production? If you took current production as a reference point, it is a potentially wrong reference point as all FS Albert Web text will appear in Verdana or Arial.

I'll try to make sense of these changes.

2) The Your List button needs to be corrected with the original text: "Your List" (not Your Article List). The button is rectangular with straight edges (not curved). The size of the button is bigger than the others on the page.

^ This one's for you, @mfenner.

mfenner commented 9 years ago

We need to discuss this. The Your List button is wider because we are displaying the name of the logged-in user. "Your List" looks weird on this wide button, therefore I renamed to "Your Article List". There are other ways to add login/logout functionality to the existing layout, but I felt that this is one of the most unobtrusive ways. Rectular vs. curved I have no strong opinion.