UI issues on product pages

MeghnaTewari commented 1 year ago

Please reduce the size of these images. Also in the URL it should be ".com" instead of the hyphen https://franklin.moleculardevices.com/products/3d-biology/3d-bioprinting-bab400-bioprinter-automation-solution-com

Remove the line separator above "Assure data integrity.." https://franklin.moleculardevices.com/products/microplate-readers/absorbance-readers/spectramax-abs-plate-readers https://franklin.moleculardevices.com/products/microplate-readers/acquisition-and-analysis-software/softmax-pro-software https://franklin.moleculardevices.com/products/gxp-compliance-solutions/softmax-pro-gxp-software-installation-validation-services
Add a little space here https://franklin.moleculardevices.com/products/microplate-readers/multi-mode-readers/filtermax-f3-f5-readers

Centre align "Cellular Image Gallery" text. Add space above the disclaimer text and remove the letter "S" and remove the extra asterisks. https://franklin.moleculardevices.com/products/cellular-imaging-systems/high-content-imaging/imagexpress-confocal-ht-ai https://franklin.moleculardevices.com/products/cellular-imaging-systems/high-content-imaging/imagexpress-micro-confocal

Fix the font size for this section- Center align "Turnkey solutions for ..." with font h2:36 px.
"MetaXpress Application Modules" h2: 24px blue color "Expedite image analysis and data...." h4:18px https://franklin.moleculardevices.com/products/cellular-imaging-systems/acquisition-and-analysis-software/metaxpress

View Interactive Demo CTA is not working, and remove the cross button below. Add line separators here https://franklin.moleculardevices.com/products/cellular-imaging-systems/acquisition-and-analysis-software/cellreporterxpress

Add line separator https://franklin.moleculardevices.com/products/clone-screening/single-cell-isolation/dispencell-single-cell-dispenser

Remove Request pricing CTA from the banner https://franklin.moleculardevices.com/products/flipr-penta-high-throughput-cellular-screening-system
Empty resources https://franklin.moleculardevices.com/service-support/lab-automation-solutions/lab-automation-for-high-content-screening#resources
Remove line separator https://franklin.moleculardevices.com/products/gxp-compliance-solutions/softmax-pro-gxp-software https://franklin.moleculardevices.com/products/gxp-compliance-solutions/softmax-pro-gxp-software-installation-validation-services

duynguyen commented 1 year ago

@MeghnaTewari @lydiapuric FYI - I moved point 11 to a new issue #943 as it would be easier with an embedded HTML.

MeghnaTewari commented 1 year ago

Ok, thanks.

lydiapuric commented 1 year ago

@MeghnaTewari When a user requests URL https://franklin.moleculardevices.com/products/3d-biology/3d-bioprinting-bab400-bioprinter-automation-solution.com, this user is redirected internally to https://franklin.moleculardevices.com/products/3d-biology/3d-bioprinting-bab400-bioprinter-automation-solution-com. A user will never see a 404.

lydiapuric commented 1 year ago

Fixes done:

Please reduce the size of these images https://franklin.moleculardevices.com/products/3d-biology/3d-bioprinting-bab400-bioprinter-automation-solution.com
Remove the line separator above "Assure data integrity.." https://franklin.moleculardevices.com/products/microplate-readers/absorbance-readers/spectramax-abs-plate-readers https://franklin.moleculardevices.com/products/microplate-readers/acquisition-and-analysis-software/softmax-pro-software https://franklin.moleculardevices.com/products/gxp-compliance-solutions/softmax-pro-gxp-software-installation-validation-services
Add a little space here https://937-products--moleculardevices--hlxsites.hlx.page/products/microplate-readers/multi-mode-readers/filtermax-f3-f5-readers
Centre align "Cellular Image Gallery" text. Add space above the disclaimer text and remove the letter "S" and remove the extra asterisks. https://937-products--moleculardevices--hlxsites.hlx.page/products/cellular-imaging-systems/high-content-imaging/imagexpress-confocal-ht-ai https://937-products--moleculardevices--hlxsites.hlx.page/products/cellular-imaging-systems/high-content-imaging/imagexpress-micro-confocal
Fix the font size for this section- Center align "Turnkey solutions for ..." with font h2:36 px. "MetaXpress Application Modules" h2: 24px blue color "Expedite image analysis and data...." h4:18px https://937-products--moleculardevices--hlxsites.hlx.page/products/cellular-imaging-systems/acquisition-and-analysis-software/metaxpress
View Interactive Demo CTA is not working, and remove the cross button below. Add line separators here https://franklin.moleculardevices.com/products/cellular-imaging-systems/acquisition-and-analysis-software/cellreporterxpress
Add line separator https://franklin.moleculardevices.com/products/clone-screening/single-cell-isolation/dispencell-single-cell-dispenser
@MeghnaTewari Please clarify: Remove Request pricing CTA from the banner The Request Pricing is on the original page on the banner too. https://franklin.moleculardevices.com/products/flipr-penta-high-throughput-cellular-screening-system
Empty resources https://franklin.moleculardevices.com/service-support/lab-automation-solutions/lab-automation-for-high-content-screening#resources
Remove line separator https://franklin.moleculardevices.com/products/gxp-compliance-solutions/softmax-pro-gxp-software https://franklin.moleculardevices.com/products/gxp-compliance-solutions/softmax-pro-gxp-software-installation-validation-services

Additional reported styling issues for Category pages (blue title, title center align, font html snippet, buttons in same row) https://937-products--moleculardevices--hlxsites.hlx.page/products/gxp-compliance-solutions

MeghnaTewari commented 1 year ago

@lydiapuric Can you pls provide the URL where I can verify the fixes?

mhaack commented 1 year ago

@MeghnaTewari When a user requests URL https://franklin.moleculardevices.com/products/3d-biology/3d-bioprinting-bab400-bioprinter-automation-solution.com, this user is redirected internally to https://franklin.moleculardevices.com/products/3d-biology/3d-bioprinting-bab400-bioprinter-automation-solution-com. A user will never see a 404.

To add on this a . is not supported in Franklin as part of the document name.

lydiapuric commented 1 year ago

@MeghnaTewari If you see franklin.moleculardevices.com still in the validation link, it was only a content change necessary to fix the issue, no code changes.

MeghnaTewari commented 1 year ago

@lydiapuric All the issues are still reproducible to me. Sharing screenshots for some-

The line separator is still there -

https://franklin.moleculardevices.com/products/microplate-readers/absorbance-readers/spectramax-abs-plate-readers

Space is not added

https://franklin.moleculardevices.com/products/microplate-readers/multi-mode-readers/filtermax-f3-f5-readers

Text is not center aligned https://franklin.moleculardevices.com/products/cellular-imaging-systems/high-content-imaging/imagexpress-confocal-ht-ai

MeghnaTewari commented 1 year ago

Some more minor UI issues I have identified-

https://franklin.moleculardevices.com/products/gxp-compliance-solutions

Centre align all the h2 titles
Font looks different here

Live-

Update font size to be 40px with blue color
Reduce font size to 24px

Align button parallelly

lydiapuric commented 1 year ago

@MeghnaTewari Til now I was able to work on points 1 - 3, see progress, comments and URLs in https://github.com/hlxsites/moleculardevices/issues/937#issuecomment-1647675704 The other issues are not yet addressed!

MeghnaTewari commented 1 year ago

These changes look good.

lydiapuric commented 1 year ago

@MeghnaTewari All issues incl. new ones got addressed, please validate. See validation issues and URLs in https://github.com/hlxsites/moleculardevices/issues/937#issuecomment-1647675704

MeghnaTewari commented 1 year ago

@MeghnaTewari Please clarify: Remove Request pricing CTA from the banner The Request Pricing is on the original page on the banner too. https://franklin.moleculardevices.com/products/flipr-penta-high-throughput-cellular-screening-system

The request pricing CTA should only be visible for US and EU regions. Currently, it is visible for all the regions.

For US and EU there should be these 2 CTA buttons

For all the other regions it should be this-

cc @mhaack

MeghnaTewari commented 1 year ago

@MeghnaTewari All issues incl. new ones got addressed, please validate. See validation issues and URLs in #937 (comment)

Verified, looks good.

mhaack commented 1 year ago

@lydiapuric @MeghnaTewari on the request pricing C2A, yes this should work this was implemented by @andreituicu.

lydiapuric commented 1 year ago

@mhaack I rechecked, and this is what I see: When I am in with CH, IE (EU) or US, I see 3 buttons. (Tested with VPN, cleaning up local storage for 'ipstack:geolocation' and making sure I see the changed country code / continent code with JSON.parse(localStorage.getItem('ipstack:geolocation')).continent_code)

I will create a separate issue to work on this.

mhaack commented 1 year ago

Thanks yes I think we currently only cover hiding & un-hidding of the request pricing button. But not hiding & un-hidding of an alternative button. @MeghnaTewari are we ok, for interim, to have 3 buttons in eu/us? While outside of these the request pricing is not shown aka. only two buttons?

MeghnaTewari commented 1 year ago

@mhaack The Franklin site should follow the same as the live site as it is intentional to hide the 'download brochure' alternative CTA for US and EU regions. As for whether we should keep all three buttons for US and EU, I don't think I can make that decision.

lydiapuric commented 1 year ago

@MeghnaTewari Could you please verify the CTA buttons? https://franklin.moleculardevices.com/products/flipr-penta-high-throughput-cellular-screening-system

MeghnaTewari commented 1 year ago

@lydiapuric Looking fine for other regions. But for US and EU I am still seeing the 'download brochure' CTA.

MeghnaTewari commented 1 year ago

Also, the Request Pricing CTA should be orange and white on the hover. The second CTA should be white outlined with the same hover behavior ( This used to be correct on Franklin earlier )

Example from live -