Интернет магазин, адаптивный кататолог. Реализация

Question

[Александр Борисович]

Если у пользователя имеется монитор 1900px шириной, то разумно ему добавлять пару товаров на экран, чего место терять.В случае 1000px ширины экрана, товары прячутся.

Вот что нашел из более менее логичной реализации www.svachon.com/wordpress/wp-content/demos/wrecker/advanced.html здесь от ширины добавляется новая колонка и сами элементы увеличиваются, раз появляется место. Хотя все тот же float:left

Есть конечно такие забавные вещи:
www.wookmark.com/jquery-plugin
masonry.desandro.com/
Но они плохо подходят в силу своей реализации.

Весь день думали вдвоем над добавлением товаров к широким мониторам, но все обламывается, когда начинается постраничная навигация.
По сути вся адаптивщина пойдет на всякие виджеты типа акции и новинки, а на каталог что-то не вяжется и проще float:left. не ложиться на алгоритм адаптивщина и динамические элементы.
Да и из крупных магазинов что то подобного не встретил.

Никто не сталкивался с подобным и к какому решению пришли?

Answer 1

[mrspd]

media queries вам в помощь

Comments

[Александр Борисович]

да, есть такое как само простое. Спасибо.

[mrspd]

Это скорей всего самое верное. Главное чтобы блоки были по сетке. Иначе по мимо ступенчатого уменьшения основного контейнера вам еще придется изменять ширину блоков. Терпимо конечно, но не всегда приятно.

Answer 2

[Илья Ерин]

А в чем проблема с постраничной навигацией? Всем управляет js, грузите ajax запросами нужные вам порции данных в зависимости от разрешения экрана. Или же адаптивная верстка с float: left; Так же можо посмотреть как это реализовано, скажем, в twitter bootstrap. Там есть примеры, где верстка адаптируется и для телефона.

Comments

[Александр Борисович]

Вобщем то верно… мы этот вариант не рассматривали в силу ограниченности работ часов на сайт. Остановились на стандартном механизме навигаци из коробки. Как то сразу поставили это как стену за которую не лезем. Оно все как выше описал и сформировалось. Спасибо за морской воздух.

Answer 3

[A3a]

Размещайте на странице изначально много товаров, а если разрешение монитора широкое, ставьте их в один или два ряда, чтобы они полностью все помещались в экран без надобности скроллинга. И обладателям широких экранов будет удобно(все товары на виду), остальных пользователей не обидите и реализуется это просто с помощью через float.

Answer 4

[Tõnis Simo]

Мой первый опыт адаптации уже готового магазина был на Skeleton`е, сразу же разобрался с media query, получилось быстро и довольно неплохо. Единственное, пришлось заморачиваться с меню, с сеткой каталога проблем не было. Тогда Skeleton особо популярностью не пользовался, но сейчас, смотрю, уже на гитхабе много форков с разными фичами.

Теперь, конечно, юзаю Bootstrap. Он выручает, если проект делать изначально на нем, иначе можно нагромоздить кучу всего ненужного, особенно если впервые с ним работать.

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

Comments

[Александр Борисович]

Спасибо, да я уже определился. Все быстро через медиа запросы.
А вот здесь нашел примерно что искал
webdesignerwall.com/tutorials/css3-media-queries
Особенно вот этот пример: teegallery.com/
Единственное — это пустое место внизу может появляться. Но здесь уже никуда не деться. По дефолту сделаю количество товара исходя из метрики — чьих мониторов больше.
Да и вобщем то спороное тоже это дело. тоже вижу не все это используют. Думается потому что это все же сложнее отлаживать и контролировать в будущем, а преимущества ну все же не велики.

Answer 5

[RodgerFox]

Вы меня простите, давно еще задавался этим вопросом и иногда возвращаюсь к нему снова.
Лучшее решение (имхо), сложилось в данном методе:

В каталоге самое важное. Это фильтр, удобная навигация по категориям и сам каталог товаров. Ну оки...
Имеется див с шириной 100% , туда загоняем 2 колонки. одна из них фиксированная (можно и не фиксированную) и вторая резиновая с отступом разным ширине первой колонки. Как вы могли уже догадаться, первая колонка имеет навигацию, фильтры и другие плюшки. Сам каталог товаров в резину пихаем. Манипуляцию удобная и изящная. При громадных экранах (4k+ / TV) можем поиграться с размерами товара, а лучше максимальную ширину для контейнера занять). Такой место удобен и для планшетов, что то поменьше прячем первую колонку... ну это уже ближе к UI.

Аминь.
p.s. Masonry не нужен, делайте удобно для клиента.
Если товар или какой то контент не помещается - это не значит стилизовать все "узкие места" (кажется Лебедев писал).