I have created two different layouts (with bootstrap) on the same page. One for mobile, one for desktop. Website has different pages with complex structure. Some of blocks should be visible only in desktop and vice-versa.
Here is an example page: (other pages are different, but has the same problems)
Title A, Title N... are links, they:
- On desktop: sets content to top block "Text content A" from hidden red area.
- On mobile: just scrolls down to corresponding content.
There is no problems, everything works. But... I am afraid that website will be blacklisted by Google.
- There are too much hidden content - images, links (visible-xs and etc.)
- Content even placed outside the div with overflow:hidden;
Yes, it will be easier to put content on page and just let user scroll on desktop and mobile versions without any hidden content and popovers, but this website needs to be created as designed.
Now i have two different ideas to avoid problems with SEO.
- Just create different mobile theme on subdomain.
- Use one responsive layout for both desktop and mobile, but avoid hiding content via css - instead hide unnecessary content with jQuery and load additional content with Ajax. (I prefer this but it looks strange)
So, how you usually solve similar tasks?