Как правильно поступить с адаптивом в данном случае?

Question

[SexyMonkey]

Предстоит верстать довольно крупный проект, и столкнулась с такой проблемой. Вёрстка должна быть адаптивной, но дизайн нарисован таким образом, что на разных разрешениях очень много перестроений элементов, следующих не по порядку.
Например:
Десктоп -
Мобильный -
Таким образом организованы ~30% элементов. Т.е., фактически нарисована отдельная мобильная версия, а не адаптив, но нужен именно адаптив.
Какие решения есть в такой ситуации?
1) Делать отдельную мобильную версию (клиенту нужен адаптив, придётся его убеждать).
2) Делать копии элементов в нужных местах, и скрывать/показывать в зависимости от разрешения. (Не будет ли проблем с SEO?)
3) Перестраивать средствами jQ в зависимости от разрешения.
4) Просить дизайнера перерабатывать макеты таким образом, чтоб перестроения были минимальны. (Плотность контента достаточно велика, возможно, не удастся сделать это без ущерба для удобства пользователя)
Какой из вариантов вы бы посоветовали? Если не затруднит, попросила бы написать плюсы и минусы по каждому варианту.
Или предложите свой, если видите лучшее решение.

P.S. flex использовать не могу, нужна поддержка устаревших браузеров.

Comments

[metaf]

Вы не хотите использовать flexbox из-за кроссбраузерности или он вам в верстке не подходит?

Answer 1

[Глеб Мазур]

3. Перестроить средствами jQuery можно. Для того, чтоб не было проблем с SEO - добавление и удаление конкретно этих блоков реализуйте тоже с помощью jQuery. Тяжелый, но хороший вариант.
И задача решена - и с SEO никаких проблем, так как фактически, этих элементов еще нет на странице.
Видел неплохую практику с использованием этого метода.

Comments

[SexyMonkey]

В том то и дело, что тяжёлый. И проблемный в последующей поддержке.

[Глеб Мазур]

SexyMonkey: Если сайт будет статичный - никаких проблем не вижу.

[SexyMonkey]

Глеб Мазур: Конечно же, не статичный.

Answer 2

[metaf]

Почему не можете использовать flexbox? Если из-за поддержки, проверяйте через modernizr и всем неподдерживающим браузерам делайте где возможно через float/display:inline-block+rtl-ltr flexbox polyfill или любые другие хаки css и оставшимся - через jQuery, так % людей, видящих прыгающие или мигающие блоки при загрузке будет ниже.
Правда, и работы будет в намноооого больше. Ну и обязательно все это обсудите вначале с заказчиком, потом с дизайнером. Я бы за такое раза в 4 больше эстимейт дала)) Может, действительно проще перерисовать или отдельный мобильный сайт сделать?

Answer 3

[Opacum]

Предлагаю дублировать блоки и оборачивать дубли в noindex, чтобы решить проблему с SEO.
Как по мне более изящно нежели использовать js.