search

hlxsites / merative2

Merative.com site on Franklin
https://merative.com
Apache License 2.0
2 stars 9 forks source link

fix(blog-landing):fix design QA bugs to ensure the page aligns with the Design specs #266

Closed proeung closed 1 year ago

proeung commented 1 year ago

Issue

Fixes https://github.com/hlxsites/merative2/issues/264

Description

Changed

Design Specs

Test URLs

Testing Instruction

aem-code-sync[bot] commented 1 year ago

Hello, I'm Franklin Bot and I will run some test suites that validate the page speed. In case there are problems, just click the checkbox below to rerun the respective action.

aem-code-sync[bot] commented 1 year ago
Page Scores Audits Google
/blog PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS PSI
aem-code-sync[bot] commented 1 year ago
Page Scores Audits Google
/blog PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS PSI
aem-code-sync[bot] commented 1 year ago
Page Scores Audits Google
/blog PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS PSI
anabarcelona commented 1 year ago

Hi @proeung, will let @sachinmesh do a more detailed design QA but from my review it's looking good! Just a couple of things below:

Desktop: dev on left / design on right

A.

image
  1. The main content well starting with the Merative Blog title needs to shift down. It needs 96px at the top.

B.

image
  1. We need two cards at the bottom. Noticing when you hit load more there's always a missing card on the right...
  2. Load more button- please un-bold the number.
anabarcelona commented 1 year ago

@proeung @sachinmesh

Desktop: Dev on left / design on right

C.

image
  1. Left filters- Checkmark looks too bold compared to the design
  2. We should only have 1 feature card on the landing pages at the top
  3. The tag - please capitalize Health and Human Services

D.

image
  1. Increase the bottom padding to 160px under the last cards (or load more button)

E.

image
  1. Category on state needs to be adjusted. The gradient bar size isn't correct. Alignment needs to be centered to the bar

F.

image
  1. Only the homepage should have the featured card. All other category pages should have our two row cards.
  2. Increase the text width of the intro copy under the main title. Should span the full width of the body area.
  3. the body copy in our cards in the designs are limited to two lines. Our titles are also limited to two lines on desktop... this equates to 4 lines on mobile, so I don't think we want to go longer than this.
anabarcelona commented 1 year ago

@proeung @sachinmesh

Below is some feedback for mobile- will let Sachin take a more in-depth review, but looking good!

Mobile- Dev on left / Design on right

A.

image
  1. The feature card photo is a bit taller than the other secondary blog cards. Please adjust. Feature card image height on mobile: 328x287px, secondary card image height on mobile: 328x219px (we have a 3x2 image ratio for our secondary cards)
  2. The type size for Filters is too large.
  3. When you select some filters, we need a way to clear them on mobile. @sachinmesh, did you want to explore some options?
  4. When you deselect the filters on mobile the empty state is showing as Filters (0). Let's remove the (0).
aem-code-sync[bot] commented 1 year ago
Page Scores Audits Google
/blog PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS PSI
sachinmesh commented 1 year ago

Hi @proeung with @anabarcelona comments above, i am adding my observations here.

  1. The spacing between sidebar and right content should be 48px. Its 46px now.

    image

  2. This spacing inside the card should be 24px and not 32px.

    image

  3. We can replace categories with solutions. And use the product names as well like Zelta, Curam and arrange them in alphabetically.

CC: @keith-kaplan

aem-code-sync[bot] commented 1 year ago
Page Scores Audits Google
/blog PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS PSI
proeung commented 1 year ago

@anabarcelona @sachinmesh Appreciate both of you taking the time to conduct design QA for this PR! I've pushed up commits that should address all of the feedback mentioned above, however, there are some that are content entry-related and feature requests that are out of scope for this PR. See below.

We need two cards at the bottom. Noticing when you hit load more there's always a missing card on the right...

We should only have 1 feature card on the landing pages at the top

The tag - please capitalize Health and Human Services

the body copy in our cards in the designs are limited to two lines. Our titles are also limited to two lines on desktop... this equates to 4 lines on mobile, so I don't think we want to go longer than this.

We can replace categories with solutions. And use the product names as well like Zelta, Curam and arrange them in alphabetically.

proeung commented 1 year ago

@helms-charity or @sahmad-merative Can I get a code review for this PR? Thanks!

Also, @sahmad-merative @nimithshetty17 these CSS changes/fixes can be used in the Thought Leadership landing page as well.

aem-code-sync[bot] commented 1 year ago
Page Scores Audits Google
/blog PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS PSI
aem-code-sync[bot] commented 1 year ago
Page Scores Audits Google
/blog PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS PSI
proeung commented 1 year ago

I'm going to go ahead and merge the changes in this PR since the majority of the Design QA issues have been addressed. Also, we need to update these changes into the feat/thought-leadership branch so that we don't have any conflict/overlapping.

@sachinmesh If you notice any other display issues within this deploy preview (https://fix-blog-landing-design-qa--merative2--proeung.hlx.page/blog), please open a JIRA ticket and I'll address them with a new PR.