QA: /webinars/cloud-based-real-world-data

[arumsey]

https://main--merative2--hlxsites.hlx.page/webinars/cloud-based-real-world-data

https://www.figma.com/file/vw24IPXXt4vCh9BNumka9A/Web--Merative-Digital-Design-System-2.0?node-id=586-5888&t=xo5zaUm4Xwn5A7B1-0

[keith-kaplan]

@arumsey was starting to look through some of the market related pages. For this one, https://main--merative2--hlxsites.hlx.page/webinars/cloud-based-real-world-data

Can we get the Marketo form and text component to be side by side? Right now, I'm seeing them stack on top of each other. One the live site you can see how it should look and behave - https://www.merative.com/webinars/cloud-based-real-world-data . When you resize the screen the text is hidden with a read more / read less.

Also this type of component will be used on all webinar, offers, and event pages where there are marketo forms.

@amol-anand has been working on the Marketo form component here and you can see the new block format for Marketo forms - https://issue-172-marketo-redirect--merative2--hlxsites.hlx.page/drafts/amol/marketo-test

[arumsey]

@keith-kaplan The form layout has been fixed to support any webinar or event page. Hiding the text with a read more/less link still needs to be added however and will similarly be applied across ALL webinar and event pages. Should the read more/less link be used rergardless if text is to the left or right of the form?

[arumsey]

@keith-kaplan

• Would you prefer the read more/less functionality be added for Phase 2?
• Should ALLL forms have read more/less or is it up to author to decide?
• Will the text next to a form ALWAYS appear above the form on small screens regardless if the text was on left or right on large screens?

[keith-kaplan]

@arumsey yes, we should added the read more/ read less, since that is present our pages in AEM. It should be applied regardless if the form is on the right or left. The text will Always appear above the form on smaller screen regardless of left or right.

Just taking a quick look at the text, can we make sure both the heading and the body text are aligned with in the column. It look like the header text is creeping over on desktop

[keith-kaplan]

Also, was just looking at the layout. Can we have two variations in the Marketo block? One for form on left side and one on the right. If the form is on the right side, text on block spans wider. If form is on the left, the text spans less columns. See below.

[arumsey]

@keith-kaplan The heading is not part of the columns. It sits above the columns so it is unaffected by column layout based on screen size? You would prefer the heading be aligned with whatever content is on the left side (form or text?). But as the screen size decreases and all the elements become stacked you always want the order to be Heading, Text, Form regardless of the order used on desktop?

[arumsey]

@keith-kaplan What are your rules for read more/less? Should the same rules be applied regardless of page content?

• truncate based on character count?
• truncate based on line count?
• truncate based on paragraph count?

[keith-kaplan]

We should probably do a character count. Let me ask Sachin and Saad what they have to implement in AEM right now.

[keith-kaplan]

@keith-kaplan The heading is not part of the columns. It sits above the columns so it is unaffected by column layout based on screen size? You would prefer the heading be aligned with whatever content is on the left side (form or text?). But as the screen size decreases and all the elements become stacked you always want the order to be Heading, Text, Form regardless of the order used on desktop?

This is correct. We want the heading to be with in the column as you can see in the screenshots above. e.g. Overview or What is the event about?

[arumsey]

@keith-kaplan The heading is not part of the columns. It sits above the columns so it is unaffected by column layout based on screen size? You would prefer the heading be aligned with whatever content is on the left side (form or text?). But as the screen size decreases and all the elements become stacked you always want the order to be Heading, Text, Form regardless of the order used on desktop?

This is correct. We want the heading to be with in the column as you can see in the screenshots above. e.g. Overview or What is the event about?

Overview and What is the event about? are different heading levels. Level 2 headings (like What is the event about?) will always be placed above the form as a heading for the entire section.

Content on the left will now always be the widest column as well.

[keith-kaplan]

@arumsey this is looking good. I'm just doing another check and it looks like the bulleted list in the text area is not showing up under the paragraph. See screenshots below.

[keith-kaplan]

@arumsey helping with QA'ing this one as well. It looks like the bio's of each speaker needs a line height, it looks a bit squished now. A line height of 160%

[sachinmesh]

Adding my observations with attached PDF

cloud-based-real-world-data v1.pdf

Read more and read less in AEM is defined on height of the text component.

CC: @keith-kaplan @anabarcelona

[arumsey]

@keith-kaplan and @sachinmesh All observations have been addressed.

I didn't change how Read more link works yet however. It still just displays the first paragraph regardless of height. Based on comment from @sachinmesh I am assuming there was a hardcoded height where the Read more link would kick in. Do you recall what that height was?

[keith-kaplan]

This is looking good. Saad said that the read more/less was only triggered by device type, so not necessarily height.

Is there any issue with keeping it as is?