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

Мобильная версия сайта


Recommended Posts

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

Link to comment
Share on other sites

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

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

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

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

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

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

Link to comment
Share on other sites


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

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 comment
Share on other sites

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

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

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

Link to comment
Share on other sites

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

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

Link to comment
Share on other sites


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

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

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


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

Link to comment
Share on other sites

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

 

gY7R.png

Link to comment
Share on other sites

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

 

gY7R+.png

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

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

Сколько времени от клика на фильтр до выдачи на реальном телефоне с GPRS ?
Link to comment
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 comment
Share on other sites


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

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

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

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

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

Link to comment
Share on other sites

  • 1 month later...

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

 

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

 

UPD:

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

  • +1 1
Link to comment
Share on other sites

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

 

UPD:

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

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

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

Link to comment
Share on other sites

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

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

 

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

  • +1 1
Link to comment
Share on other sites


  • 4 weeks later...

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

Link to comment
Share on other sites


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

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

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

Link to comment
Share on other sites


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

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

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

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

Link to comment
Share on other sites

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

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

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

Link to comment
Share on other sites


  • 2 weeks later...

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

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

Link to comment
Share on other sites


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

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

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

 

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

Link to comment
Share on other sites


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

Link to comment
Share on other sites

  • 1 month later...
  • 2 weeks later...

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

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

Link to comment
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
 Share

×
×
  • 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.