Доброго времени суток всем! Хочу попросить совета как принято поступать в следующей ситуации при верстке десктопной и мобильных версий. Есть два макета, соответственно, для мобильной версии сайта, и для десктопной. В наличии элементов макеты схожи: везде есть верхний fixed navbar, одинаковые секции контента, и тд. Но визуально все эти элементы меняются практически полностью (ориентация расположения дочерних элементов и контролов). Многие элементы скрываются на мобильной версии, меняются цвета, различаются скрипты фото слайдеров и тд.
Первое, что пришло в голову, это в одном шаблоне сверстать и те, и другие элементы, для каждой версии, и прятать, показывать, с помощью display: block и медиа запросов. Но по идее, для мобилы получается будет грузиться много лишнего HTML кода, который будет просто скрыт в итоге. Также была подобная идея, но сделать это с помощью JS (при загрузке страницы проверить ширину окна и вставить в html нужные элементы с помощью jQuery). Тут у меня возникли вопросы, а что, если JS не будет работать в браузере пользователя и тогда страница будет нечитабельна, плюс поисковики не смогут корректно индесировать страницу (кроме гугля, насколько я понял). Третий вариант - рендерить нужный контент на сервере, пологаясь на User-Agent пользователя. Но даже если мы узнаем, что это мобильный браузер, не факт, что размер окна браузера не позволит открыть полную страницу.
Как правильно это делается? Направьте, а то особо версткой не занимался, но тут жизнь заставила. Спасибо
Средний
