How to make an adaptive layout if the design is different?

Question

css

Hello.

I came across an unusual layout, unfortunately I can’t show it now, because on the way, later add if needed.

The layout is simple, a regular online store of which there are plenty on the web, the adaptive version is understandably cut down, but it is done in such a way that from the outside it looks like a completely different design.
For example, take the main page, the desktop is full of banners laid out in a grid, news blocks, etc. And in the mobile there are only two blocks "Clothes for boys" and "Clothes for girls" and the design of these blocks is in no way similar to those that were in the desktop. Those. You won't be able to change blocks through media queries. Rather, it is possible, but then it is easier to make a mob. blocks and hide them on the desktop, and hide the last ones on the mobile.
The header also looks different, in general, the mobile version clearly does not provide for how the responsive design works, the elements are not modified or rebuilt in some cases, but stupidly replaced by pre-prepared ones.
For example, take a logo, according to the desktop layout it is in one place, and on the mobile it is in another and is surrounded by various elements in the form of a block of social icons, a hamburger, search, etc. That is, initially the markup does not allow using one element in different resolutions. We have to create two elements and show them depending on the resolution.

There are two questions, what is the right thing to do in such cases and what to do with desktop content and blocks that "load" the mobile page?
Regarding the first question, I think that it is necessary to typeset with pre-styled blocks, if they are radically different in design and the usual replacement of styles in the media query is not enough. The option is so-so, the fact that two / three identical elements appear on the page (in the markup) is clearly not correct.
And with the second question plug.

Answer 1

All questions to the web layout designer!

Answer 2

Well, tell the customer that the layout possibilities are not unlimited and you need to make 2 versions of the site, for example, to determine what device is on the server. Well, describe all the consequences, such as supporting two versions of the site, which is a terrible hemorrhoids.
Why do you need to do it this way - the layout can only be consistent, which is not observed in the design. Put pressure on the download speed on the mobile version and, most importantly, on the fact that this will significantly worsen SEO (often customers, having heard "bad for SEO", become silky and listen to your every advice).
Let him choose - either two versions, or redo the layout.

Answer 3

I support the previous speaker - it's not just possible, but you should definitely ask the designer! To think over the behavior of the layout and blocks (well, at least in general terms) is his direct responsibility.
It also does not hurt to notify the customer (or his technical representative) about this - they say, the design is incomprehensible and inconsistent, are you sure that your users will be comfortable? Let's discuss.

Answer 4

Maybe there should just be 2 versions? For desktop and mobile? Or maybe it's the design of the app in general? If it is impossible to collect blocks, then this is the only way I see it.
Or another option is to use other js and css with mediaquery, hiding unnecessary blocks at all through display:none, but this should be clear on the subject of “is it possible” for you yourself, because it’s difficult to advise without a layout.