Regarding Mobile specific blocks #2460
suhjainadobe
started this conversation in
General
Replies: 1 comment
-
Has anyone looked at what Google recommends and the impacts on SEO with some of these approaches? There's been several conversations related to this. |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
We have received requirements regarding vertical videos on product pages, which is specific for mobile viewport only [https://jira.corp.adobe.com/browse/MWPW-151568]. According to the designs/requirements that are given till now, this will affect a bit of the video block and will have a new variant of carousel. As part of earlier discussions, we need to add desktop implementations as well, but the product manager is saying that it will be done as a fast follow(https://wiki.corp.adobe.com/pages/viewpage.action?pageId=3182877303).
In milo, we do not have any mobile specific components till now. To incorporate the requirements, we are using MEP, which affects performance of the page. For the same, we are exploring the alternatives for mobile specific components.
Following are the observations as part of small due diligence:
We are considering screen resolution as the deciding point for mobile.
Alternate approaches:
2.1: Adding a icon in section like desktop or mobile and based on this icon's text, we render the components in that section. This will render the components based on the viewport, but while resizing, we will have to refresh the page. It will render the components that are required for that particular viewport.
URL: https://directtextsectionvideo--milo--suhjainadobe.hlx.page/drafts/suhjain/verticalVideo/section-text-hide
Document: https://adobe.sharepoint.com/:w:/r/sites/adobecom/_layouts/15/Doc.aspx?sourcedoc=%7B68eec2a3-f2ce-4304-be30-6281ffe031c9%7D&action=editnew
2.2: Adding class directly to the components and show/hide them based on those classes. This will work when we resize the screen, but will make a network call for the components which are not needed in the viewport. We will have to work around eager loading the images for the second component.
URL:https://hidecomponent--milo--suhjainadobe.hlx.live/drafts/suhjain/verticalVideo/document
DocumentL:https://adobe.sharepoint.com/:w:/r/sites/adobecom/_layouts/15/Doc.aspx?sourcedoc=%7B69b3b05b-8d9a-4205-85f6-f61bd7fd1855%7D&action=editnew
2.3: We can add queryparams to the fragments and handle the rendering at the fragment level. We will have to explore this approach further.
We would further like to hear out the opinions on the above points or any other suggestions to render mobile specific components. What is approach we should be taking as there might more mobile specific components coming up in future.
Beta Was this translation helpful? Give feedback.
All reactions