Есть ли какие то хорошие решения или практики для верстки адаптивного интернет-магазина, в том числе для мобильных устройств?

Question

[Радмир]

Мы столкнулись с тем что наш магазин нужно переверстать под мобильные устройства (крайне желательно) и под большие экраны (необязательно, но желательно).

Есть ли какие то примеры хороших решений, ведь проблема в том чтобы на мобильном устройстве жетельно сохранился функционал, из всего что мы видели больше всего понравился сайт mvideo.ru на айфоне сохранен почти весь функционал и при этом все удобно.

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

Answer 1

[Радмир]

getuikit.com - в итоге случайно наткнулись на этот фреймворк, и его будем использовать для изменения переверстки всего фронтенда, он поддерживает flexbox и адаптивность и less, в том числе довольно элегантное решение по поводу отображения больших меню для магазинов.

Answer 2

[veitmen]

Возьмите готовый css фреймворк, аля бутстрап, и сделайте себе тему, или найдите, и все. Лучше вы ничего не придумаете.

Answer 3

[Mr Crabbz]

Главный совет - не урезайте функционал для пользователей смартфонов и планшетов. Желательно оставить буквально всё, что может делать пользователь за компьютером.
При этом оптимизируйте вывод изображений в сторону уменьшения веса для мелких экранов. Часто бывает, что скорость мобильного интернета не фонтан.

Comments

[Радмир]

это понятно, мы так и хотим оставить весь функционал, вопрос в том как например реализовать поиск, или размер шрифта чтобы нормальным был и сам подстраивался и так далее. Я думал может гайды под это дело где есть

[Алим Алибаев]

RadmirZ: Так гуглите Responsive Search Form

[Юрий Балака]

Еще можно нанять дизайнера

Answer 4

[Iliya Berg]

сегодня тоже столкнулся с этим принял решение для теста создать на wordpress адаптивным под мобилы
но нужен php что-бы определял пользователя с какого устройства зашел и автоматом кидал на него с основного сайта может кто знает решение

Comments

[Саша Улыч]

mobiledetect.net можно использовать, isMobile класс использовать, и грузить моб версиию.

[Iliya Berg]

Спасибо! но как сделать чтобы при определении php скриптом тип устройства автоматически переброс был с www.example.ru (простой версии) на www.m.example.ru (мобильную)

Answer 5

[htmleater]

Ну вот к примеру, недавно делал под OpenCard:
overtune.ru от 320 пикс до бесконечности