[Applications] UI issues

[MeghnaTewari]

1. Can we update the TOC section for some pages like it is on live? Grey background and bullets under the titles https://franklin.moleculardevices.com/technology/luminescence https://franklin.moleculardevices.com/technology/absorbance#overview

2. Fix "View ELISA protocol****Automate ELISA workflow" CTA https://franklin.moleculardevices.com/applications/enzyme-linked-immunosorbent-assay-elisa

3. Center align "Latest Resources" globally. https://franklin.moleculardevices.com/technology/fluorescence

4. Add space above the title and add line separator https://franklin.moleculardevices.com/technology/fluorescence-polarization

Remove

5. Fix UI of the table and TOC bullets should be below the paragraph https://franklin.moleculardevices.com/technology/time-resolved-fluorescence-trf-tr-fret-htrf Screenshot from live

6. Topic cards missing https://franklin.moleculardevices.com/technology/western-blot

7. Topic card images should be consistent globally with the dimensions - 555*282 https://franklin.moleculardevices.com/applications/cell-counting

8. Add line separator https://franklin.moleculardevices.com/applications/cell-imaging/cell-painting

9. Fix "See detailed workflow" CTA , Add space above all the titles and unbold caption under the video https://franklin.moleculardevices.com/applications/live-cell-imaging

10. Remove the double arrow icon from all the cards, add space above "Neurite outgrowth applications..." title https://franklin.moleculardevices.com/applications/neurite-outgrowth

11. Add line separator above "Featured assets to optimize your cell line.." title https://franklin.moleculardevices.com/applications/cell-line-development-workflow

12. Fix "Learn more View video" CTA and add space above the titles https://franklin.moleculardevices.com/applications/synthetic-biology

13. "See detailed workflow" CTA missing and add arrow icons after "Watch Video" https://franklin.moleculardevices.com/applications/3d-cell-models

[lydiapuric]

Fixes are done for:

1) TOC, styling + grey background https://895-applications--moleculardevices--hlxsites.hlx.page/technology/luminescence https://895-applications--moleculardevices--hlxsites.hlx.page/technology/absorbance

2) Fix 2 buttons in same row, center align: https://895-applications--moleculardevices--hlxsites.hlx.page/applications/enzyme-linked-immunosorbent-assay-elisa

3) Center align "Latest Resources" https://895-applications--moleculardevices--hlxsites.hlx.page/technology/fluorescence https://895-applications--moleculardevices--hlxsites.hlx.page/technology/luminescence https://895-applications--moleculardevices--hlxsites.hlx.page/technology/absorbance

4) Add space above title in column block and add separators https://895-applications--moleculardevices--hlxsites.hlx.page/technology/fluorescence-polarization

5) Fixed Table UI, TOC is underneath the table https://franklin.moleculardevices.com/technology/time-resolved-fluorescence-trf-tr-fret-htrf

6) Add topic cards https://895-applications--moleculardevices--hlxsites.hlx.page/technology/western-blot

7) Topic card images dimensions - @MeghnaTewari wrote 555282px, minor correction here: It should be 455282px max height https://895-applications--moleculardevices--hlxsites.hlx.page/applications/cell-counting

8) Add line seperator https://895-applications--moleculardevices--hlxsites.hlx.page/applications/cell-imaging/cell-painting

9) Fix "See detailed workflow" CTA , Add space above all the titles and unbold caption under the video https://895-applications--moleculardevices--hlxsites.hlx.page/applications/live-cell-imaging

10) Remove the double arrow icon from all the cards, add space above "Neurite outgrowth applications..." title https://895-applications--moleculardevices--hlxsites.hlx.page/applications/neurite-outgrowth

11) Add line separator above "Featured assets to optimize your cell line.." title https://895-applications--moleculardevices--hlxsites.hlx.page/applications/cell-line-development-workflow

12) Fix "Learn more View video" CTA and add space above the titles https://895-applications--moleculardevices--hlxsites.hlx.page/applications/synthetic-biology

13) See detailed workflow" CTA missing and add arrow icons after "Watch Video" https://895-applications--moleculardevices--hlxsites.hlx.page/applications/3d-cell-models

[lydiapuric]

@MeghnaTewari Regarding point 1, TOC We agreed with @kapildhiman in the past that TOC subtitles / categories are not available to be generated dynamically with the TOC, so therefore these titles will and cannot not provided. cc @mhaack

[MeghnaTewari]

okay, got it. Thanks

[lydiapuric]

@MeghnaTewari Could you please validate the changes, see also the URL where the changes are available in this issue. Thanks!

[MeghnaTewari]

@lydiapuric Please find my inline comments -

Point 1 - Can we add a little space here, on the absorbance page? Also please left align all the titles for topic cards https://895-applications--moleculardevices--hlxsites.hlx.page/technology/absorbance https://895-applications--moleculardevices--hlxsites.hlx.page/technology/luminescence

Point 3 - Looks good, I hope the Latest Resources text will be center aligned globally.

Point 4 - Please remove this text https://895-applications--moleculardevices--hlxsites.hlx.page/technology/fluorescence-polarization

Point 6 - Anchor links not working, please fix. https://895-applications--moleculardevices--hlxsites.hlx.page/technology/western-blot

Point 7- Can you please align the topic card images? This change should be applied globally. https://895-applications--moleculardevices--hlxsites.hlx.page/applications/cell-counting

Point 13- Please add arrow icons after "Watch Video" and link "See detailed workflow" CTA to the workflow tab https://895-applications--moleculardevices--hlxsites.hlx.page/applications/3d-cell-models

[lydiapuric]

@MeghnaTewari Thanks for the first validation. In the meantime, I could address the last issues - except point 7, see the comments below. Could you please revalidate them?

Regarding point 7: I cannot align topic card images without defining a global height for the headlines. This would introduce unnecessary empty spaces in the cards between the title and image because the headlines differ between the size of 1 and 3 lines. The reason is that these cards are generated and one card does not know the next card or the length of the headline.

[lydiapuric]

And another question @MeghnaTewari You asked me to unbold caption under the video in https://895-applications--moleculardevices--hlxsites.hlx.page/applications/live-cell-imaging

Is this also a global change or an exceptional style for applications?

[MeghnaTewari]

@MeghnaTewari Thanks for the first validation. In the meantime, I could address the last issues - except point 7, see the comments below. Could you please revalidate them?

Regarding point 7: I cannot align topic card images without defining a global height for the headlines. This would introduce unnecessary empty spaces in the cards between the title and image because the headlines differ between the size of 1 and 3 lines. The reason is that these cards are generated and one card does not know the next card or the length of the headline.

@lydiapuric Given that we have already defined a global height for the headlines on the live site, I believe it is appropriate to apply the same here. We have allocated space for two lines in case the title is longer, and the overall layout appears fine without any strange gaps.

Check this screenshot from live-

[MeghnaTewari]

And another question @MeghnaTewari You asked me to unbold caption under the video in https://895-applications--moleculardevices--hlxsites.hlx.page/applications/live-cell-imaging

Is this also a global change or an exceptional style for applications?

@lydiapuric On the live site, we use two quote styles:

1. For products = Font size - 24px + Bold ( No italics ) Example ( https://www.moleculardevices.com/products/microplate-readers/multi-mode-readers/spectramax-i3x-readers )

2. For applications = Font size - 14 px + italics Example ( https://www.moleculardevices.com/applications/live-cell-imaging )

Please update globally for products and apps.

[mhaack]

What would be the style for other pages? We agreed should have these kinds of things styled similarly and have less exceptions in favor of a unified experience (@dev-rajneeshkumar was part of that discussion).

If we go with 1) for products, does the apply to all products? And can we use 2) for the rest (not only applications)?

[lydiapuric]

Thanks @mhaack regarding the question about the video caption.

@MeghnaTewari Regarding the alignment of topic titles and image:

However, the space is not 2 lines when 2 1-liner titles are next to each other, so there is no empty space of 2 lines in general, see

As said, we can't determine how long the next topic card's title is, as this list is dynamically generated.

[MeghnaTewari]

Thanks @mhaack regarding the question about the video caption.

@MeghnaTewari Regarding the alignment of topic titles and image:

However, the space is not 2 lines when 2 1-liner titles are next to each other, so there is no empty space of 2 lines in general, see

As said, we can't determine how long the next topic card's title is, as this list is dynamically generated.

@lydiapuric I understand your point, but the images should be aligned. Below you can see an example of a 3-liner title, so in this case, 2-line space is getting added to the left card and the space is getting managed. https://www.moleculardevices.com/technology/absorbance Rest Simran will discuss this with you.

[MeghnaTewari]

If we go with 1) for products, does the apply to all products? And can we use 2) for the rest (not only applications)?

Yes @mhaack this is applicable for all the product pages - 24px + Bold ( No italics ). Generally, for applications and other pages, we typically use a font size of "14px with italics". However, there may be certain cases where customization is necessary based on specific requirements.

[mhaack]

@lydiapuric then lets go with this ☝️ generic style as descripted above and only one overlay with .product .... .

[lydiapuric]

@MeghnaTewari The cation style is adjusted.

[lydiapuric]

Alignment of image for topic cards will be addressed with #931.

@MeghnaTewari The cards images to be aligned, what is the scope for this adjustment? Is this restricted to Related Application Topic Cards?

[lydiapuric]

@MeghnaTewari Could you please test the alignment of image for topic cards in

• https://931-topic-card--moleculardevices--hlxsites.hlx.page/technology/absorbance
• https://931-topic-card--moleculardevices--hlxsites.hlx.page/technology/luminescence

[MeghnaTewari]

@lydiapuric This looks good.