Community forum for knowledge and support

Updated 3 months ago

Synthflow's Smooth Mobile Experience

At a glance

The community member is discussing the website https://synthflow.ai/, noting that while it works well on both PC and mobile, the Relume components with tabs are annoying on mobile as they require clicking and scrolling for each one. The only component that works smoothly is layout351, which is responsive. The community member asks if someone knows how Synthflow achieved this smooth mobile experience.

In the comments, another community member suggests having two separate components - one for desktop/tablet and one for mobile - to handle this, while being mindful of SEO and duplicate content. They note that Synthflow has essentially hidden the image on desktop and shown it on mobile, and have layered an accordion interaction to also function as a tab. The community member suggests a similar approach using an accordion-like component and a two-column layout component, with webflow interactions to swap the images on desktop.

Another community member thanks the previous one for clarifying the approach. A final comment asks whether hiding an element would still show up as a problem for SEO, and the response indicates that it depends on the method used - CSS hiding would keep it visible in the DOM, while using visible/hidden toggles would not.

Useful resources

https://synthflow.ai/

If you look at this section, it works well on pc and even better on mobile

But all Relume components with tabs are annoying on mobile tbh

you need to click and scroll for each one

The only one that works smoothly is layout351 ( it's responsive )

The rest have you scolling up and down constantly for info, the way synthflow does it smooth"


Does someone know how it's done?

Attachment
image.png
H
M
5 comments

<@U041X15Q6CE>

the way that I would handle something like this is to have two completely different components - one for desktop/tablet and the other for mobile - just be mindful of SEO/duplicate content. In the case of Synthflow - they've essentially just hidden the image on desktop and show it on mobile.

But they've layered an interaction on the accordion to also be a tab - I suppose doing something similar could be feasible to do starting with an accordion like component and a two column layout component and using webflow interactions to layer a click on desktop to swap images.

Attachment
image.png

thanks for clearing this up!

Just a quick q: if you hide an element, does it still show for SEO as a problem?

depends on how you hide it - if you hide it with CSS - then yeah it will be visible within the DOM. If you use the visible/hidden toggles - then no, it will not be.

Attachment
image.png
Add a reply
Sign up and join the conversation on Slack