Как лучше верстать адаптивный сайт, когда на мобильных скрывается много контента?

Question

[#FFFFFF]

Всем привет.
Предстоит верстать новый сайт. Ситуация такова, что по макетам на планшетах и мобильных гораздо меньше контента по сравнению с десктопом. Убираются несколько слайдеров, много фотографий и некоторый функционал.
Задумалась над тем, что не хотелось бы грузить лишний код и фотки на мобильных, а потом скрывать типа display: none. Как тут лучше приступить к разработке? Может какую-то библиотеку посоветуете, или какой-то особенный подход. Просто не разбираюсь, к сожалению, в таких моментах адаптивной верстки - обычно все блоки как-то перестраивались, но не пропадали совсем.

Comments

[NikolayAlb]

С помощью media можно картинки менять на url(''), тогда не будут подгружаться.

[#FFFFFF]

NikolayAlb: ваш совет единственный, который помог, спасибо. Похоже, действительно нет "рецепта" для таких штук.

Answer 1

[Павел]

Скрывается любым классом по условиям по сути .hidden-md, hidden-xs и другие в бутстрап например.
А вот чтобы не загружалось то тут только уже либо Js, jQuery либо php, определять что это смартфон, после поставить условия что такие то блоки не подгружаем

Answer 2

[Urvin]

Это двойная работа, и при изменениях все равно что-нибудь похерится и сломается.
Стоит ли экономия свеч?

Answer 3

[Андрей Хохлов]

Смысл адаптивного сайта в том, что он дает одинаковые возможности (функционал, контент и т.д.), одновременно обеспечивая наилучший пользовательский опыт на любом устройстве.

Если зайдя с телефона я не могу что-то увидеть/прочитать/сделать на сайте - это проблема.

В таких случаях следует делать отдельно большую/тяжелую/функциональную версию и отдельно легкую/урезанную мобильную. С возможностью нажать "показать полную версию" даже если пользователь зашел с телефона.

Помимо UX есть и техническая сторона.
Адаптивный сайт не требует каких-то особых оптимизаций. Спрайты, свг-иконки, минификация, структура, грамотный js код и т.д. - это уже по дефолту должно делаться.
Но есть момент с контентом: адаптивные изображения, адаптивные изображения в css (фоны например).
Все поскрывать можно. Но вот картинки с display: none; все равно на данный момент грузятся во многих браузерах.

Comments

[Ankhena]

kode_krendel: По сути вопроса вам советуют делить дескотопы и мобилки на бэкенде. И при большой разнице в содержимом - это хорошее решение.
Если это именно адаптив, то ничего кроме подхода типа display none и пустых url и не посоветовать.