What is the best way to design a responsive website when a lot of content is hidden on mobile?

#

#FFFFFF2017-03-03 13:23:54

css

#FFFFFF, 2017-03-03 13:23:54

Hello.
A new site is to be built. The situation is such that there is much less content in layouts on tablets and mobile compared to the desktop. Several sliders are removed, a lot of photos and some functionality.
I thought about the fact that I would not want to load extra code and photos on mobile devices, and then hide it like display: none. What's the best way to get started with development? Can you advise some library, or some special approach. I just don’t understand, unfortunately, in such moments of adaptive layout - usually all the blocks were somehow rebuilt, but did not disappear at all.

Reply

Answer the question

In order to leave comments, you need to log in

3 answer(s)

P

Pavel, 2017-03-03
@PavelMonro

Hidden by any class according to the conditions in fact .hidden-md, hidden-xs and others in bootstrap for example.
But in order not to load, then it’s just either Js, jQuery or php, to determine that this is a smartphone, after setting the conditions that such blocks are not loaded

U

Urvin, 2017-03-03
@Urvin

This is double work, and with changes, something will still be screwed up and broken.
Is the savings worth the candle?

A

Andrey Khokhlov, 2017-03-03
@andrhohlov

The point of a responsive website is that it provides the same features (functionality, content, etc.) while providing the best user experience on any device.
If I can’t see/read/do something on the site when I log in from my phone, this is a problem.
In such cases, you should make a separate large / heavy / functional version and a separate light / stripped down mobile version. With the ability to click "show full version" even if the user logged in from the phone.
In addition to UX, there is also a technical side.
Responsive website does not require any special optimizations. Sprites, svg icons, minification, structure, competent js code, etc. - this should be done by default.
But there is a moment with content: responsive images, responsive images in css (backgrounds for example).
Everything can be covered. But here are pictures with display: none; still loaded in many browsers at the moment.