Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
  • Sign Up

Recommended Posts

Guest

Добрый день! недавно закончил под свой проект мобильную адаптивную версию шаблона. Что очень порадовало, увеличилось количество покупок с айпадов и андроидов, сделал вывод что с мобильных устройств очень часто заходят на сайт, при этом показатели тока растут. Интересно кто нибудь из сообщества адаптирует свои сайт под мобильные устройства, планшеты телефоны? какие варианты решение используют? и просто интересно ваше мнение.

Link to post
Share on other sites

Я делаю следующее:

1. в css ставлю правила для нужных разрешений (@media only screen), и трансформирую элементы под них.

2. заменяю все jquery-примочки на адаптивные (слайды, табы, меню, лайтбоксы и пр.)

Получается примерно так: http://ocs1541juicyblue.webmix.info/

p.s. пробовал всякие скрипты и фреймворки - решил, что проще и быстрее самому.

p.p.s. по уму еще лучше сделать доп.меропреятия: в зависимости от разрешения подгружать или не подгружать разные стили, шрифты, элементы; подготовить отдельные версии картинок под разные разрешения - этим экономится трафик посетителя, увеличивается скорость загрузки.

Link to post
Share on other sites

Guest

Я делаю следующее:

1. в css ставлю правила для нужных разрешений (@media only screen), и трансформирую элементы под них.

2. заменяю все jquery-примочки на адаптивные (слайды, табы, меню, лайтбоксы и пр.)

Получается примерно так: http://ocs1541juicyblue.webmix.info/

p.s. пробовал всякие скрипты и фреймворки - решил, что проще и быстрее самому.

p.p.s. по уму еще лучше сделать доп.меропреятия: в зависимости от разрешения подгружать или не подгружать разные стили, шрифты, элементы; подготовить отдельные версии картинок под разные разрешения - этим экономится трафик посетителя, увеличивается скорость загрузки.

На своем сайте как раз через отдельный шаблон mobile.css и в нем (@media only screen) стилей сделал шаблоны под разные разрешения.

По поводу js вобщем сложностей не заметил работает на мобильных устройствах. единственное возможно не адаптированы под точ прикосновения.

Кстати по js, пислись ли правила отмены обработки в зависимости от разрешения экрана?

Link to post
Share on other sites
Guest brk

Респонс конечно решает, но не забываем про фильтры!

Не так давно с коллегой обсуждали и искали хоть один пример магазина с полным респонсом и фильтрами.

Скрипты фильтров на мобилах не работают (

Link to post
Share on other sites

Вы про какие фильтры? Типа разных сортировок (по цене, от А до Я и пр.)?

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

Link to post
Share on other sites

Вы про какие фильтры? Типа разных сортировок (по цене, от А до Я и пр.)?

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

имелись в виду фильтры подбора товаров по атрибутам и прочим параметрам.
Link to post
Share on other sites

Guest

проверил у себя фильтр от соора. на планшете работает отлично :) единственно надо адаптировать удобство пользование под маленькое разрешение экрана. пока сркыл ибо очень обменный получается.

Link to post
Share on other sites

А как еще можно сделать адаптивную версию (не мобильную, а именно responsive), кроме как используя правила css под разные разрешения? :) И какие проблемы могут быть у фильтров? Ведь меняются только правила css, никто же не запрещает подгружать скрипты для работы фильтров в адаптивной версии. Я у себя делал все, взяв за основу тему responsive9, но из-за идиотской реализации в категориях и товарах пришлось все переделать, в итоге от изначальной задумки остались лишь верхние комбобоксы со ссылками меню и категориями, а касаемо фильтра получилось вот так, при этом даже на самом маленьком экране в 240рх вполне можно работать (это filterpro):

 

gY7R.png

Link to post
Share on other sites
Guest brk

А как еще можно сделать адаптивную версию (не мобильную, а именно responsive), кроме как используя правила css под разные разрешения? :) И какие проблемы могут быть у фильтров? Ведь меняются только правила css, никто же не запрещает подгружать скрипты для работы фильтров в адаптивной версии. Я у себя делал все, взяв за основу тему responsive9, но из-за идиотской реализации в категориях и товарах пришлось все переделать, в итоге от изначальной задумки остались лишь верхние комбобоксы со ссылками меню и категориями, а касаемо фильтра получилось вот так, при этом даже на самом маленьком экране в 240рх вполне можно работать (это filterpro):

 

gY7R+.png

Да картинки тут ни при чем.

Попробуйте заюзать в деле.

Сколько времени от клика на фильтр до выдачи на реальном телефоне с GPRS ?
Link to post
Share on other sites

Господа, извиняюсь что не по теме. У самого нету мобильной версии сайта, но купил OpenCart Mobile Framework, так и не смог хорошо ее настроить по себя.

 

Проблема заключается в том, у меня на айфоне 4 магазин начинает лагать (медленно зумится, перемещается и т.п.) когда я ставлю код яндекс.метрики с вебвизором. Как только отключаю его (удаляю в коде), все работает отлично.

 

Без вебвизора совсем грустно.

У меня:

Не мобильные устройства 2 786
Мобильные телефоны и КПК 1 417
 
Не мобильные устройства 28
Мобильные телефоны и КПК 16
 
Причем "Мобильные телефоны и КПК 16" = 100% apple (ipad/iphone), ни одного аyдроида и wm =)
 
Кто может помочь? Что-бы сайт не лагает с вебвизором?
Да и вообще, я бы заплатил за работу по настройки  OpenCart Mobile Framework (дизайн) или css.
Link to post
Share on other sites

Да картинки тут ни при чем.

Попробуйте заюзать в деле.

Сколько времени от клика на фильтр до выдачи на реальном телефоне с GPRS ?

По вашему для клиентов с GPRS именно загрузка выборки фильтра будет наибольшей проблемой, при том, что адаптивная верстка абсолютно не подразумевает уменьшение веса страницы? :)

Расчет больше не на пользователей телефонов (плюс у меня аудитория не такая, которая часто покупала бы что-либо с телефонов), а на тех, кто использует планшеты, то есть это вайфай или 3г/4г, поэтому особой разницы в моем случае не будет. Но тут, как и везде, надо смотреть конкретно на каждый магазин, стоят ли усилия возможных положительных результатов - продавцу с/х техники или производственного оборудования например мобильная версия и даром не нужна, а вот какой-нибудь пиццерии вполне может пригодится.

Link to post
Share on other sites
  • 1 month later...

Добрый день! недавно закончил под свой проект мобильную адаптивную версию шаблона. Что очень порадовало, увеличилось количество покупок с айпадов и андроидов, сделал вывод что с мобильных устройств очень часто заходят на сайт, при этом показатели тока растут. Интересно кто нибудь из сообщества адаптирует свои сайт под мобильные устройства, планшеты телефоны? какие варианты решение используют? и просто интересно ваше мнение.

 

В какой-то момент мне эта тема показалась полезной. Потом начал читать. Вначале пришел к выводу, что high resolution для iphone это приходящая мода (так и оказалось судя по текущей ситуации), а сейчас я обнаруживаю, что пользователи iphone 4,5 и ipad хрен ложили на @media и нормально зумят все пальцами без волнений. Так что процитированному месседжу ТС я не очень доверяю. Вот если бы Вы сказали, что продажи с Android-девайсов подскочили, то я бы поверил - там довольно много гаджетов на низком разрешении (в нищебродском СНГ так их сегмент особенно большОй) и бОльший разнобой браузеров.

 

UPD:

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

  • +1 1
Link to post
Share on other sites
Guest

В какой-то момент мне эта тема показалась полезной. Потом начал читать. Вначале пришел к выводу, что high resolution для iphone это приходящая мода (так и оказалось судя по текущей ситуации), а сейчас я обнаруживаю, что пользователи iphone 4,5 и ipad хрен ложили на @media и нормально зумят все пальцами без волнений. Так что процитированному месседжу ТС я не очень доверяю. Вот если бы Вы сказали, что продажи с Android-девайсов подскочили, то я бы поверил - там довольно много гаджетов на низком разрешении (в нищебродском СНГ так их сегмент особенно большОй) и бОльший разнобой браузеров.

 

UPD:

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

сам лично имею телефон на андроиде с разрешением 480на 800. после адаптации сайта получаю удовольствие от срефинга по сайту. в случае необходимости очень легко оформить заказ либо посмотреть что то по наличию. Аналогично думаю у клиентов. Могу точно сказать после адаптации заказов стало больше. Я кстати адаптировал сайт под 3 разрешения до 480 для мобильных устройств до 800 для планшетов и все остальное.

toggle я использую но не для ссылок а для более подробной информации. на сколько обратил внимание некоторые на планшетах этим пользуются.

Link to post
Share on other sites

сам лично имею телефон на андроиде с разрешением 480на 800. после адаптации сайта получаю удовольствие от срефинга по сайту. в случае необходимости очень легко оформить заказ либо посмотреть что то по наличию. Аналогично думаю у клиентов. Могу точно сказать после адаптации заказов стало больше. Я кстати адаптировал сайт под 3 разрешения до 480 для мобильных устройств до 800 для планшетов и все остальное.

toggle я использую но не для ссылок а для более подробной информации. на сколько обратил внимание некоторые на планшетах этим пользуются.

 

На самом деле чтобы действительно адаптировать сайт под мобильные устройства нужно индивидуальную навигацию делать. Некоторые функции, которые во многих движках активно используются на мобильный устройствах работают плохо или вообще ни как (например выпадание меню по наведению курсора или раскрывающиеся деревья). Тут адаптивной версткой не обойтись. Погуглите по поводу разработки дизайна под мобильные устройства, посмотрите на Ext Touch. Работа с тачскринами несколько отличается от работы с традиционными средствами ввода.

  • +1 1
Link to post
Share on other sites

  • 4 weeks later...

Извините что стреваю ваш интересный разговоро. Я в форуме первый раз, в opencart не разбераюсь, однако у меня есть сайт который нужно адабтировать под телефон  , планшет итд. Может кто подскажет кто делает такую работу и где?  пишите на почту vibro77@mail.ru Зарание спасиба 

Link to post
Share on other sites

Здравствуйте, форумчане. =)

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

Посоветуйте, пожалуйста...

Link to post
Share on other sites

Guest

Здравствуйте, форумчане. =)

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

Посоветуйте, пожалуйста...

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

Link to post
Share on other sites

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

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

Хочу отдельный шаблон с полной адаптацией под мобилку и планшет.

Link to post
Share on other sites

  • 2 weeks later...

Извините что стреваю ваш интересный разговоро. Я в форуме первый раз, в opencart не разбераюсь, однако у меня есть сайт который нужно адабтировать под телефон  , планшет итд. Может кто подскажет кто делает такую работу и где?  пишите на почту vibro77@mail.ru Зарание спасиба 

Нужно для начала заказать соответствующий дизайн. Поищите в Сети. Есть дизайнеры, которые уже освоили это направление.

Link to post
Share on other sites

Здравствуйте, форумчане. =)

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

Посоветуйте, пожалуйста...

 

Самый надежный вариант - делать свое на этой основе.

Link to post
Share on other sites

Для мобильных версий, лучше использовать эту тему, в качестве основы. У OMF в Free версии нет чекаута, а Pro стоит в два раза дороже, чем предложенный мною вариант, да и по дизайну уступает, имхо.

Link to post
Share on other sites
  • 1 month later...

Когда будет релиз Мобильной версии шаблона, выкладывайте поскорее, будем заценивать  :wink:

Link to post
Share on other sites

  • 2 weeks later...

Специализируюсь на ios & android приложениях, оосбенно что касается заморочек с заказами  :)

Есть движок, админка для управления контентом, дизайн разрабатывается под заказчика. Велкам!

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Similar Content

    • By colaweb
      12 999.00 руб
      Скачать/Купить дополнение


      Мобильное приложение из сайта или магазина
      Используйте момент чтобы обойти конкурентов.
       
      ПРЕИМУЩЕСТВА
       
      При помощи данного модуля создается полностью рабочее приложение для сайта или магазина как будто вы его загрузили из Google Play или Microsoft Store.
      Это приложение может работать без подключения к интернету.

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

      По заявлению Google, перед специалистами Lancôme стояла задача создать быстро загружаемый, мощный мобильный инструмент, который можно будет быстро найти и просто использовать. В результате в 2016 году у компании появилось веб-приложение.
      И что же в итоге? Результаты говорят сами за себя: на 84% снизилось время загрузки, на 17% увеличилась конверсия, на 53% увеличилось количество мобильных сеансов на iOS,18% push-уведомлений открываются пользователями, 8% потребителей, которые открыли push-уведомление, совершали покупку.
      Пример компании Lancôme стал показательным для всех, кто сомневался.

      Второй плюс — это то что при обновлении приложения созданного при помощи модуля, не требуется повторная установка. То есть у пользователей вашего сайта будут всегда актуальные данные.

      Третий плюс, страницы вашего сайта в интернете будут загружаться очень быстро. Что в свою очередь положительно повлияет на выдаче Google и Яндекс.
       
      Четвертый плюс. По данным Leanplum, мобильные уведомления побуждают в 9,6 раз больше пользователей совершать покупки в приложениях. К тому же клиенты, которые получают пуши, проводят внутри приложения  на 16% больше времени, чем те, которые не получают никаких оповещений на свой телефон. Догадались о чем пойдет дальше речь? О важности мобильных пушей для вашего мобильного приложения и бизнеса.
      Push уведомления настраиваются с помощью бесплатного тарифа на сервисе push.gravitec.net/push в стоимость модуля не входит.
       
      ВИДЕО
       
      Совместим со всеми версиями OpenCart и ocStore.
       
      ДЕМО
       
      ЛИЦЕНЗИЯ

      Лицензия дает право на установку модуля на один тестовый домен и на один рабочий домен.
      При покупке модуля обязательно указывайте тестовый и рабочий домен.

      ОБЯЗАТЕЛЬНЫЕ ТРЕБОВАНИЯ ДЛЯ РАБОТЫ МОДУЛЯ

      1. Подключение по https
      2. Ваш сайт должен быть адаптирован для показа на смартфонах и планшетах
      Работает в браузере Chrome на платформе Android для смартфонов. Для десктопов на платформе Windows 10 также в браузере Chrome.
      Другие браузеры включая Apple планируют включить полную поддержку данной технологии в ближайшее время.
       
      В настройках модуля можно изменить:
      Настройка времени, через которое посетителю сайта показывается баннер с предложением установить приложение.
      Настройка внешнего вида баннера.
      Настройка текста и значка на баннере.
      Настройка "Моментальных страниц"

      ДОПОЛНИТЕЛЬНЫЕ УСЛУГИ
       
      Установка модуля на хостинг
      Установка приглашения "установить приложение вашего магазина" в мобильное меню или другое место вашего сайта
      Настройка push уведомлений на сервисе push.gravitec.net/push
      Настройка кэширование данных магазина
       
      ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ
       
      О технологии PWA можно почитать здесь https://ru.wikipedia.org/wiki/Прогрессивное_веб-приложение
      Добавил colaweb Добавлено 03.05.2019 Категория Платные шаблоны Системные требования https Метод активации По запросу на почту Ioncube Loader Нет OpenCart 3.0
      2.3
      2.2
      2.1
      2.0
      1.5.6.4
      1.5.6.3
      1.5.6.2
      1.5.6.1
      1.5.6
      1.5.5.1
      1.5.5
      1.5.4.1
      1.5.3.1 ocStore 3.0
      2.3
      2.2
      2.1
      1.5.5.1.2
      1.5.5.1.1
      1.5.5.1
      1.5.4.1.2
      1.5.4.1.1
      1.5.4.1
      1.5.3.1
      1.5.2.1
      1.5.1.3 OpenCart.Pro, ocShop Не проверялось Обращение к серверу разработчика Нет Старая цена 0  
    • By AlexMax13
      Здравствуйте)
      Есть такой сайт:
       
      У него есть полная адаптация под мобильные устройства. Проблема в том что гугл в упор этого не видит.
      результаты системы от гугл mobile-friendly неверные.
      Явно проблема с прогрузкой стилей.
       
      В чем может быть проблема?
      Opencart 3
    • By tatyanausa
      Здравствуйте!
       
      Ищу специалиста для изменения мобильной версии сайта. 
      Сайт https://exelera.ru/  шаблон Moneymaker.
       
      ТЗ в прикрепленном файле.
      ТЗ_exelera_мобильная_версия.docx ошибки при тестировании мобильной версии.docx
    • By colaweb
      Используйте момент чтобы обойти конкурентов.
       
      ПРЕИМУЩЕСТВА
       
      При помощи данного модуля создается полностью рабочее приложение для сайта или магазина как будто вы его загрузили из Google Play или Microsoft Store.
      Это приложение может работать без подключения к интернету.

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

      По заявлению Google, перед специалистами Lancôme стояла задача создать быстро загружаемый, мощный мобильный инструмент, который можно будет быстро найти и просто использовать. В результате в 2016 году у компании появилось веб-приложение.
      И что же в итоге? Результаты говорят сами за себя: на 84% снизилось время загрузки, на 17% увеличилась конверсия, на 53% увеличилось количество мобильных сеансов на iOS,18% push-уведомлений открываются пользователями, 8% потребителей, которые открыли push-уведомление, совершали покупку.
      Пример компании Lancôme стал показательным для всех, кто сомневался.

      Второй плюс — это то что при обновлении приложения созданного при помощи модуля, не требуется повторная установка. То есть у пользователей вашего сайта будут всегда актуальные данные.

      Третий плюс, страницы вашего сайта в интернете будут загружаться очень быстро. Что в свою очередь положительно повлияет на выдаче Google и Яндекс.
       
      Четвертый плюс. По данным Leanplum, мобильные уведомления побуждают в 9,6 раз больше пользователей совершать покупки в приложениях. К тому же клиенты, которые получают пуши, проводят внутри приложения  на 16% больше времени, чем те, которые не получают никаких оповещений на свой телефон. Догадались о чем пойдет дальше речь? О важности мобильных пушей для вашего мобильного приложения и бизнеса.
      Push уведомления настраиваются с помощью бесплатного тарифа на сервисе push.gravitec.net/push в стоимость модуля не входит.
       
      ВИДЕО
       
      Совместим со всеми версиями OpenCart и ocStore.
       
      ДЕМО
       
      ЛИЦЕНЗИЯ

      Лицензия дает право на установку модуля на один тестовый домен и на один рабочий домен.
      При покупке модуля обязательно указывайте тестовый и рабочий домен.

      ОБЯЗАТЕЛЬНЫЕ ТРЕБОВАНИЯ ДЛЯ РАБОТЫ МОДУЛЯ

      1. Подключение по https
      2. Ваш сайт должен быть адаптирован для показа на смартфонах и планшетах
      Работает в браузере Chrome на платформе Android для смартфонов. Для десктопов на платформе Windows 10 также в браузере Chrome.
      Другие браузеры включая Apple планируют включить полную поддержку данной технологии в ближайшее время.
       
      В настройках модуля можно изменить:
      Настройка времени, через которое посетителю сайта показывается баннер с предложением установить приложение.
      Настройка внешнего вида баннера.
      Настройка текста и значка на баннере.
      Настройка "Моментальных страниц"

      ДОПОЛНИТЕЛЬНЫЕ УСЛУГИ
       
      Установка модуля на хостинг
      Установка приглашения "установить приложение вашего магазина" в мобильное меню или другое место вашего сайта
      Настройка push уведомлений на сервисе push.gravitec.net/push
      Настройка кэширование данных магазина
       
      ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ
       
      О технологии PWA можно почитать здесь https://ru.wikipedia.org/wiki/Прогрессивное_веб-приложение
    • By Iysus
      Подскажите пожалуйста, в какой файле можно изменить видимость главной страницы мобильной версии. 
      Задача: нужно в мобильной версии сайта блок "Новые поступления" поставить ниже, чем он есть сейчас. В какой файле нужно внести правки? 
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.