Как верстать такой адаптив?

Question

[Александр Андреев]

В общем дизайнер нарисовал такую штуку. На десктопе сайт схематично выглядит так joxi.ru/J2beG8BsXE6qQm т.е. просто 3 колонки, меню, контент и отдельная колонка с основными услугами компании. По мере сужения экрана уменьшаются колонки меню, вплоть до 5% от ширины экрана (остаются иконки) и колонка услуги до 20 - 15%, контент остаётся довольно широкий и хорошо читабельный. Я сделал эти три колонки через float:left задав ширину в процентах.

А вот в макете для мобильных устройств, начиная с 768px меня ожидал сюрприз. Там третья колонка с услгуами помещается внутри второй с контентом, вот так: joxi.ru/Vrwow4zIOdegkr . Как быть? Для меня самым очевидным вариантом сейчас является скрыть третью колонку, а во второй сделать её скрытую копию которую показывать на разрешении 768px и меньше. Но это как мне кажется не очень правильно. Может есть какой-то иной способ?

Answer 1

[Александр Лысенко]

Если уж такая пьянка, почему бы просто не переносить содержимое блока услуг в пустую обертку внутри контента средствами JS/JQUERY. Или подгружаться AJAX-ом

Comments

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

...или продублировать в разметке, скрывая / показывая в зависимости от размеров экрана.

[Александр Андреев]

мне больше по душе таскать этот блок туда - сюда при помощи jQuery =)

[Александр Лысенко]

Андрей Хохлов: SEO вымиксирует себе глаза миксером )

[Александр Андреев]

AlexanderZe: да там простейший блок, 4 ссылки на 4 услуги =)) при загрузки страницы он остаётся неизменным и робот его будет видеть, так что думаю с SEO всё норм =)

[Александр Лысенко]

Александр Андреев: Все же дубляжей лучше избегать. Хотя если бы вы не подняли этот вопрос, я бы скорее всего так и сделал. О JS подумал только размышляя об удобстве.

Answer 2

[lavezzi1]

Поместить третью колонку с услугами под контент. И сказать дизайнеру что он криворукий.

Comments

[Александр Андреев]

это была первая мысль, боюсь не прокатит ))

[lavezzi1]

Александр Андреев: Прокатит если он адекватный. Всегда нужно говорить и общаться с дизайнером. Скажите ему что это не просто и зачем городить такое на не сложном сайте.