Как правильно сделать адаптивную верстку если дизайн разный?
Привет.
Попался необычный макет, к сожалению сейчас показать не могу, т.к. в дороге, позже добавлю если понадобится.
Макет простой, обычный интернет магазин каких полно в сети, адаптивная версия понятное дело урезана, но сделано это так, что со стороны выглядит как совершенно другой дизайн.
Например взять главную страницу, на десктопе полно баннеров выложенных в сетку, блоки новостей и т.п. А в мобиле только два блока "Одежда для мальчиков" и "Одежда для девочек" и дизайн этих блоков никак не похож на те что были в десктопе. Т.е. взять и через медиа запросы видоизменять блоки не получится. Вернее это можно, но проще тогда сверстать моб. блоки и скрывать их на десктопе, а последние скрывать на мобиле.
Шапка тоже выглядит другой, вообщем мобильная версия явно не предусматривает то, как работает responsive дизайн, элементы не видоизменяются не перестраиваются в некоторых случаях, а тупо заменяются заранее подготовленными.
Например взять логотип, по десктопному макету он в одном месте, а на мобиле в другом и окружен различными элементами в виде блока соц иконок, гамбургера, поиска и т.д. То есть изначально разметка не позволяет использовать один элемент в разных разрешениях. Приходится создавать два элемента и показывать их в зависимости от разрешения.
Вопросов два, как правильно поступать в таких случаях и что делать с десктопным контентом и блоками которые "грузят" мобильную страницу?
По первому вопросу, думаю, что надо верстать с заранее стилизованными блоками, если они кардинально отличаются по дизайну и обычной заменой стилей в медиа запросе не обойтись. Вариант так себе, то что на странице (в разметке) появляются по два/три одинаковых элемента явно не правильно.
А со вторым вопросом затык.
Ну так скажите заказчику, что возможности верстки не безграничны и нужно делать 2 версии сайта, например, определять на сервере что за девайс. Ну и опишите все вытекающие, типа поддержки двух версий сайта, что есть ужасный геморрой.
Почему нужно делать именно так - верстка может быть только последовательной, что не соблюдено в дизайне. Давите на скорость загрузки на мобильной версии и самое главное - на то, что это значительно ухудшит СЕО (зачастую заказчики услышав "плохо для СЕО" становятся шелковыми и слушают каждый ваш совет).
Пусть выбирает - либо две версии, либо переделывать макет.
Поддерживаю предыдущего оратора - это не просто можно, а обязательно нужно спросить у дизайнера! Продумать поведение макета и блоков (ну хотя бы в общих чертах) - это его прямая обязанность.
Так же не мешает поставить об этом в известность заказчика (или его технического предстаивтеля) - мол, дизайн непонятный и неконсистентный, вы уверены, что вашим пользователям будет удобно? Давайте обсудим.
Может просто должно быть 2 версии? Для десктопа и мобил? Или может это дизайн вообще приложения? Если нельзя блоки собрать, то только так я это вижу.
Либо еще один вариант - использовать при mediaquery иные js и css, прятав ненужные блоки вовсе через display:none, но это должно быть понятно на предмет "возможно ли" Вам самим, потому что без макета советовать сложно.
